/* =========================================================
   Burrow speler. Kleuren per model/kleur staan bovenaan.
   body[data-model] = classic | nano
   body[data-finish] = silver | black | blue | green | pink
   ========================================================= */
:root {
  --desk: #fbfbfa;
  --desk-2: #e7e6e2;
  --metal-hi: #e9eaec;
  --metal-lo: #b4b7ba;
  --metal-edge: rgba(0,0,0,.28);
  --grain: .55;
  --wheel-hi: #fbfbfb;
  --wheel-lo: #e6e6e7;
  --wheel-label: #a4a8ad;
  --center-hi: #e4e6e8;
  --center-lo: #b9bcc0;
  --press: #6aa5ee;
  --ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body[data-finish="black"] {
  --metal-hi: #3b3c3f;
  --metal-lo: #121314;
  --metal-edge: rgba(255,255,255,.12);
  --grain: .25;
  --wheel-hi: #3d3e41;
  --wheel-lo: #27282a;
  --wheel-label: #8f9297;
  --center-hi: #444549;
  --center-lo: #222325;
}
body[data-finish="blue"]  { --metal-hi: #a9cfe9; --metal-lo: #5f97c4; }
body[data-finish="green"] { --metal-hi: #c9e3a5; --metal-lo: #82b153; }
body[data-finish="pink"]  { --metal-hi: #f3c2d6; --metal-lo: #d77ea4; }
body[data-model="nano"] { --center-hi: #fbfbfb; --center-lo: #e7e7e8; }
body[data-model="nano"][data-finish="black"] { --center-hi: #3d3e41; --center-lo: #2a2b2d; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 35%, var(--desk) 40%, var(--desk-2));
  font-family: var(--ui);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.sr { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

/* ---------- behuizing ---------- */
.device {
  --w: min(94vw, calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .9 * .6), 440px);
  position: relative;
  width: var(--w);
  aspect-ratio: .6;
  display: flex;
  flex-direction: column;
  padding: calc(var(--w) * .075) calc(var(--w) * .075) 0;
  border-radius: calc(var(--w) * .085);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(172deg, var(--metal-hi) 0%, var(--metal-lo) 100%);
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.75),
    inset 0 -2px 3px rgba(0,0,0,.28),
    inset 1.5px 0 1px rgba(255,255,255,.35),
    inset -1.5px 0 2px rgba(0,0,0,.18),
    inset 0 0 0 1px var(--metal-edge),
    0 0 0 1.5px #d9dde1,             /* glimmend stalen rand van de achterkant */
    0 0 0 2.5px #7d838a,
    0 3px 3px rgba(0,0,0,.25),
    0 30px 50px -14px rgba(0,0,0,.6),
    0 70px 90px -40px rgba(0,0,0,.5);
}
.device::before { /* zacht lichtvlak + donkerder randen waar hij vaak vastgehouden wordt */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 30% 8%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(140% 100% at 50% 50%, transparent 62%, rgba(40,30,20,.16) 100%);
}
.device::after { /* krasjes en gebruikssporen */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: url("img/wear.svg") center / 100% 100% no-repeat;
  mix-blend-mode: overlay;
  opacity: .9;
}
body[data-model="nano"] .device {
  --w: min(94vw, calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .78 * .74), 440px);
  aspect-ratio: .74;
  padding: calc(var(--w) * .085) calc(var(--w) * .1) 0;
  border-radius: calc(var(--w) * .1);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 -.25'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--metal-hi) 0%, var(--metal-lo) 100%);
  background-blend-mode: soft-light, normal;
}

/* ---------- scherm ---------- */
.bezel {
  position: relative;
  padding: 2.4%;
  border-radius: calc(var(--w) * .022);
  background: linear-gradient(180deg, #2b2c2e, #0d0d0e);
  box-shadow: 0 -1px 0 rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.55), inset 0 0 2px #000;
}
body[data-model="nano"] .bezel { padding: 3%; }
.bezel::after { /* glas met schuine glans */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.16) 0 34%, rgba(255,255,255,0) 34.4%);
}
.lcd {
  position: relative;
  aspect-ratio: 4 / 3;
  container-type: size;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: #000;
  border-radius: 1.5px;
}

.titlebar {
  flex: none;
  height: 9.6cqh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.6cqw;
  font: 700 6.1cqh/1 var(--ui);
  color: #1a1a1a;
  background: linear-gradient(#ffffff, #e9ebee 48%, #d6d9dd 52%, #e2e5e8);
  border-bottom: 1px solid #7d828a;
}
.tb-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
body[data-backdrop="dark"] { --desk: #2a2a2c; --desk-2: #0b0b0c; }
.tb-icons { display: flex; align-items: center; gap: 1.4cqw; flex: none; }
.tb-icons svg { height: 4.4cqh; width: auto; display: block; }
#tbSleep { font: 700 4.6cqh var(--ui); color: #4d5259; }
.battery {
  position: relative;
  width: 8.5cqw; height: 4.6cqh;
  border: 1px solid #50565c;
  border-radius: 1.5px;
  background: #fff;
  padding: 1px;
}
.battery::after { content: ""; position: absolute; right: -2.5px; top: 30%; height: 40%; width: 2px; background: #50565c; border-radius: 0 1px 1px 0; }
.battery b { display: block; height: 100%; width: 100%; background: linear-gradient(#b9f08c, #5fbf2b 55%, #49a51c); }
.battery b.low { background: linear-gradient(#ffb0a0, #e0442a 55%, #c3321c); }

.views { position: relative; flex: 1; min-height: 0; }
.view { position: absolute; inset: 0; display: flex; overflow: hidden; background: #fff; }
.view.in-right { animation: inRight .2s ease-out; }
.view.in-left { animation: inLeft .2s ease-out; }
@keyframes inRight { from { transform: translateX(100%); } }
@keyframes inLeft { from { transform: translateX(-100%); } }

/* menu's */
.pane { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list { position: relative; flex: 1; overflow: hidden; }
.row {
  display: flex; align-items: center; gap: 2cqw;
  height: 11.2cqh;
  padding: 0 4.4cqw 0 2.6cqw;
  font: 700 6.7cqh/1 var(--ui);
  white-space: nowrap;
}
/* line-height ruim genoeg zodat de staartjes van y, g en p niet afgeknipt worden */
.row .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
/* acties (Shuffle, Add, Rename, Delete) zien er anders uit dan nummers */
.row.act { font-weight: 400; color: #2b5fb4; gap: 1.8cqw; }
.row.act .ico { width: 4.2cqh; height: 4.2cqh; flex: none; fill: currentColor; }
.row.act.sel { color: #fff; }
.row.sep-below { border-bottom: 1px solid #c3c8ce; }
.row.sep-above { border-top: 1px solid #c3c8ce; }
.row.sel.sep-below, .row.sel.sep-above { border-color: transparent; }
.row .rt { font-weight: 400; font-size: 5.6cqh; color: #444; }
.row .chev { display: none; width: 2.6cqh; flex: none; }
.row.sel {
  color: #fff;
  background: linear-gradient(#86baf3, #4c90e4 50%, #3279da 51%, #3f86e1);
  text-shadow: 0 -1px 0 rgba(0,40,110,.35);
}
.row.sel .rt { color: #fff; }
.row.sel .chev { display: block; fill: #fff; }
.row.sub2 { height: 15cqh; }
.row .two { display: flex; flex-direction: column; gap: .6cqh; min-width: 0; flex: 1; }
.row .two small { font-size: 4.8cqh; font-weight: 400; color: #555; overflow: hidden; text-overflow: ellipsis; }
.row.sel .two small { color: #e8f0ff; }
.note { padding: 3cqh 3cqw; font: 400 5.4cqh/1.3 var(--ui); color: #333; white-space: normal; }
.note.install { flex: 1; overflow: auto; font-size: 5.2cqh; }
.note.install ol { margin: 2cqh 0 0; padding-left: 5cqw; }
.note.install li { margin-bottom: 1.6cqh; }
.note .inl { height: 4.6cqh; width: auto; vertical-align: -.6cqh; fill: #2d73d6; color: #2d73d6; }
.note.credits { text-align: center; padding-top: 5cqh; }
.note.credits .big { display: block; font-size: 8cqh; margin-bottom: 1.6cqh; }
.note.credits small { color: #777; font-size: 4.2cqh; }
.note b { font-weight: 700; }
.field {
  margin: 2.4cqh 2.6cqw 1cqh;
  padding: 1.6cqh 2cqw;
  font: 700 6.2cqh var(--ui);
  border: 1px solid #8a9099;
  border-radius: 3px;
  background: linear-gradient(#f2f3f5, #fff 30%);
  outline: none;
  -webkit-user-select: text; user-select: text;
}
.scroll {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: 2.6cqw;
  background: linear-gradient(90deg, #d9dbde, #f4f5f6);
  border-left: 1px solid #b9bdc2;
}
.scroll i {
  position: absolute; left: 0; right: 0;
  border-radius: 1px;
  background: linear-gradient(90deg, #8f959c, #5d636a);
}

/* hoofdmenu: rechterhelft met hoesfoto */
.art {
  position: relative; flex: 1; overflow: hidden;
  border-left: 1px solid #9aa0a7;
  background: linear-gradient(135deg, #3a3d42, #16181b);
}
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.18) translate(4%, 2%); } to { transform: scale(1.32) translate(-5%, -3%); } }
.art .placeholder { position: absolute; inset: 0; display: grid; place-items: center; }
.art .placeholder svg { width: 40%; fill: rgba(255,255,255,.18); }

/* speelt nu */
.np { flex: 1; display: grid; grid-template-columns: 44% 1fr; grid-template-rows: 1fr auto; padding: 4cqh 3.4cqw 3.4cqh; gap: 0 3.4cqw; }
.np-cover {
  align-self: center;
  width: 100%; aspect-ratio: 1;
  background: linear-gradient(145deg, #d8dadd, #9da2a8);
  background-size: cover; background-position: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  -webkit-box-reflect: below 1px linear-gradient(transparent 62%, rgba(255,255,255,.32));
  display: grid; place-items: center;
  /* kantel-effect: --tx/--ty komen van de bewegingssensor */
  transform: perspective(70cqw) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
  transition: transform .12s linear;
}
.np-cover svg { width: 46%; fill: rgba(255,255,255,.9); }
.np-text { align-self: center; display: flex; flex-direction: column; gap: 1.6cqh; min-width: 0; padding-bottom: 6cqh; }
.np-title { font: 700 7cqh/1.1 var(--ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-artist, .np-album { font: 700 5.4cqh/1.15 var(--ui); color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-count { font: 400 5.2cqh var(--ui); margin-top: 2.4cqh; color: #222; }
.np-bottom { grid-column: 1 / -1; display: flex; align-items: center; gap: 2.4cqw; font: 700 5.2cqh var(--ui); }
.np-bar {
  position: relative; flex: 1; height: 5cqh;
  border: 1px solid #8d939b;
  background: linear-gradient(#e9ebee, #fff 45%, #f1f2f4);
}
.np-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#a6cdf7, #4f95e5 50%, #3a83dd 51%, #5a9de8); }
.np-knob { display: none; position: absolute; top: 50%; width: 4.4cqh; height: 4.4cqh; margin: -2.2cqh 0 0 -2.2cqh; transform: rotate(45deg); background: linear-gradient(135deg, #fff, #b8bcc2); border: 1px solid #555; }
.np.scrub .np-knob { display: block; }
.np-flags { position: absolute; right: 3.4cqw; top: 3cqh; display: flex; gap: 1.6cqw; }
.np-flags svg { height: 4.4cqh; fill: #4d5259; }
.np-empty { flex: 1; display: grid; place-items: center; text-align: center; padding: 6cqw; font: 700 5.6cqh/1.3 var(--ui); color: #444; }

/* cover flow */
.cf { flex: 1; position: relative; background: linear-gradient(#fdfdfd, #eceef0); perspective: 80cqw; overflow: hidden; }
.cf-stage { position: absolute; left: 50%; top: 8cqh; width: 0; height: 44cqh; transform-style: preserve-3d; }
.cf-item {
  position: absolute; top: 0;
  width: 44cqh; height: 44cqh; margin-left: -22cqh;
  background: linear-gradient(145deg, #c9ccd0, #8e949b);
  background-size: cover; background-position: center;
  -webkit-box-reflect: below 1px linear-gradient(transparent 58%, rgba(255,255,255,.4));
  transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s;
  display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.cf-item svg { width: 40%; fill: rgba(255,255,255,.9); }
.cf-caption { position: absolute; left: 0; right: 0; bottom: 6cqh; text-align: center; padding: 0 4cqw; }
.cf-caption b { display: block; font: 700 6.2cqh/1.2 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-caption span { font: 400 5cqh var(--ui); color: #444; }

/* synchroniseren */
.sync { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6cqh; padding: 4cqw; text-align: center; background: linear-gradient(#fff, #eef0f2); }
.sync svg.big { width: 30cqh; height: 30cqh; }
.sync.busy svg.big .arrows { animation: spin 2.4s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
.sync b { font: 700 7cqh var(--ui); }
.sync p { margin: 0; font: 400 5cqh/1.3 var(--ui); color: #333; white-space: pre-line; }
.sync .np-bar { width: 80%; flex: none; }
.scanbox { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh; background: #000; color: #fff; }
.scanbox video { width: 62cqw; height: 62cqh; object-fit: cover; border: 2px solid #4c90e4; }
.scanbox p { margin: 0; font: 400 4.8cqh var(--ui); text-align: center; padding: 0 4cqw; }

.toast {
  position: absolute; left: 12%; right: 12%; top: 50%;
  transform: translateY(-50%);
  padding: 4cqh 4cqw;
  border-radius: 6px;
  background: rgba(30,32,36,.88);
  color: #fff;
  font: 700 5.4cqh/1.3 var(--ui);
  text-align: center;
  animation: pop .18s ease-out;
}
@keyframes pop { from { transform: translateY(-50%) scale(.9); opacity: 0; } }

/* ---------- klikwiel ---------- */
.wheel-wrap { flex: 1; display: grid; place-items: center; }
.wheel {
  position: relative;
  width: 66%;
  aspect-ratio: 1;
  border-radius: 50%;
  touch-action: none;
  color: var(--wheel-label);
  background:
    radial-gradient(circle, transparent 50%, rgba(90,80,60,.06) 64%, rgba(90,80,60,.03) 78%, transparent 90%), /* glimmend/vuil spoor waar je duim draait */
    radial-gradient(circle at 50% 30%, var(--wheel-hi), var(--wheel-lo) 75%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(0,0,0,.12),
    0 0 0 1px rgba(0,0,0,.08),
    0 1px 0 rgba(255,255,255,.6);
  font: 700 calc(var(--w) * .038) var(--ui);
  letter-spacing: .04em;
}
body[data-finish="black"] .wheel { box-shadow: inset 0 1px 1px rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.5); }
body[data-model="nano"] .wheel { width: 60%; }
.wl { position: absolute; pointer-events: none; transition: color .08s; }
svg.wl { width: calc(var(--w) * .058); height: auto; fill: currentColor; }
.wl-top { top: 9%; left: 50%; transform: translateX(-50%); }
.wl-bottom { bottom: 9.5%; left: 50%; transform: translateX(-50%); }
.wl-left { left: 9%; top: 50%; transform: translateY(-50%); }
.wl-right { right: 9%; top: 50%; transform: translateY(-50%); }
.wheel.press-top .wl-top, .wheel.press-bottom .wl-bottom,
.wheel.press-left .wl-left, .wheel.press-right .wl-right { color: var(--press); }
.center {
  position: absolute; left: 50%; top: 50%;
  width: 38%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 0;
  padding: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01 .9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .4 -.15'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 28%, var(--center-hi), var(--center-lo) 85%);
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.75),
    inset 0 -1px 2px rgba(0,0,0,.2),
    0 0 0 1px rgba(0,0,0,.12),
    0 1px 2px rgba(0,0,0,.15);
  touch-action: none;
  transition: box-shadow .06s;
}
.center.down {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.15);
}

/* ---------- eerste keer: begroeting en tutorial ---------- */
.greet { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqh; background: radial-gradient(circle at 50% 40%, #fff, #e9edf2); }
.greet-word { font: 300 17cqh/1.1 var(--ui); letter-spacing: -.02em; color: #1d1d1f; opacity: 0; }
.greet-word.in { animation: greet 1.9s ease-in-out; }
@keyframes greet { 0% { opacity: 0; transform: translateY(2cqh); } 18%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-1.5cqh); } }
.greet p { margin: 0; font: 400 4.6cqh var(--ui); color: #8a8f96; }

.hello p { white-space: pre-line; }
.wheel-diag { overflow: visible; }
.wheel-diag .ring { fill: #f1f2f4; stroke: #c4c8cd; stroke-width: 1.2; }
.wheel-diag .c { fill: #dfe2e6; stroke: #b5bac0; stroke-width: 1; }
.wheel-diag text { font: 700 8px var(--ui); fill: #9aa0a7; }
.wheel-diag path { fill: #9aa0a7; }
.wheel-diag .hot { fill: #3a82dd; }
.wheel-diag .ring.hot { fill: #e4efff; stroke: #3a82dd; stroke-width: 3; animation: pulse 1.4s ease-in-out infinite; }
.wheel-diag .c.hot { stroke: #2d73d6; stroke-width: 2; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.tut { flex: 1; display: flex; align-items: center; gap: 4cqw; padding: 0 5cqw; background: linear-gradient(#fff, #eef0f2); }
.tut svg.big { width: 38cqw; height: 38cqw; flex: none; }
.tut-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2cqh; }
.tut-text b { font: 700 7cqh var(--ui); }
.tut-text p { margin: 0; font: 400 4.8cqh/1.35 var(--ui); color: #333; white-space: pre-line; }
.tut-text .np-bar { height: 4cqh; }
.tut-dots { display: flex; gap: 1.4cqw; margin-top: 1cqh; }
.tut-dots i { width: 2cqh; height: 2cqh; border-radius: 50%; background: #cfd3d8; }
.tut-dots i.done { background: #7fb1ea; }
.tut-dots i.now { background: #2d73d6; }