/* ============================================================================
   Shakebox — styles.css
   Visuals reproduced from the Claude Design export (design doc = source of
   truth for look/motion). All colors, type, and animation feel come from there.
   ========================================================================== */

/* ---- Self-hosted fonts (variable, latin subset). No external requests. ---- */
@font-face{
  font-family:'Unbounded';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/unbounded.woff2') format('woff2');
}
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/schibsted-grotesk.woff2') format('woff2');
}

:root{
  --porcelain:#EDF1F5;
  --ink:#14161F;
  --oracle:#2440F0;
  --oracle-deep:#0c1670;
  --pop:#FF6B9D;
  --focus:0 0 0 3px rgba(36,64,240,.4);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:var(--porcelain);
  font-family:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}

/* App is a centered phone-width column; the rest of the viewport is porcelain. */
#app{
  position:relative;
  height:100%;
  max-width:480px;
  margin:0 auto;
  overflow:hidden;
  background:var(--porcelain);
}

/* Every screen is an absolute layer; JS toggles `.on`. */
.screen{position:absolute;inset:0;display:none;}
.screen.on{display:block;}
.screen.on.flex{display:flex;flex-direction:column;}

button{font-family:inherit;}
:focus{outline:none;}
:focus-visible{outline:none;box-shadow:var(--focus);}

/* ============================ shared chrome ============================ */
.wordmark{
  position:absolute;top:calc(26px + env(safe-area-inset-top));left:0;right:0;
  text-align:center;font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.22em;color:rgba(20,22,31,.55);
  pointer-events:none;
}
.corner-btn{
  position:absolute;top:calc(18px + env(safe-area-inset-top));
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:12px;cursor:pointer;
  /* sit above the full-screen .center-stack so corner taps reach the buttons */
  z-index:20;
}
.corner-btn.right{right:16px;color:rgba(20,22,31,.5);}

.center-stack{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:44px;
}
.hint{font-size:19px;font-weight:500;color:rgba(20,22,31,.55);}
.hint.dim{color:rgba(20,22,31,.45);letter-spacing:.02em;}

/* open, visible entry to the toy list (top-left pill) */
.toys-btn{
  position:absolute;z-index:20;
  top:calc(16px + env(safe-area-inset-top));left:14px;
  display:inline-flex;align-items:center;gap:7px;
  height:44px;padding:0 15px 0 13px;
  background:#fff;border:1px solid rgba(20,22,31,.1);border-radius:22px;
  color:rgba(20,22,31,.72);font-family:'Schibsted Grotesk',sans-serif;font-size:15px;font-weight:600;
  cursor:pointer;box-shadow:0 4px 12px -6px rgba(20,22,31,.28);
  transition:transform .12s,border-color .12s;
}
.toys-btn:hover{transform:translateY(-1px);border-color:rgba(36,64,240,.35);}
.toys-btn:active{transform:translateY(0);}
.toys-btn__ico{display:flex;color:var(--oracle);}

/* labeled back button: chevron + destination name */
.backbtn.labeled{
  width:auto;height:40px;padding:0 10px 0 6px;gap:2px;
  display:inline-flex;align-items:center;border-radius:12px;
  color:rgba(20,22,31,.6);font-family:'Schibsted Grotesk',sans-serif;font-size:16px;font-weight:600;
}
.backbtn.labeled:hover{color:var(--oracle);}
.backbtn__ico{display:flex;}
.backbtn__label{line-height:1;}

/* ============================== the 8-ball ============================== */
.ball{
  --ball:min(296px,76vw);
  position:relative;width:var(--ball);height:var(--ball);border-radius:50%;
  background:radial-gradient(circle at 35% 27%,#565b6b 0%,#2a2d38 26%,#101219 60%,#05060b 100%);
  box-shadow:
    inset calc(var(--ball) * -.068) calc(var(--ball) * -.088) calc(var(--ball) * .203) rgba(0,0,0,.8),
    inset calc(var(--ball) * .054) calc(var(--ball) * .061) calc(var(--ball) * .155) rgba(120,135,175,.16),
    0 44px 70px -22px rgba(20,22,31,.5);
  display:flex;align-items:center;justify-content:center;
}
.ball.tap{cursor:pointer;}
.ball.breathe{animation:breathe 5s ease-in-out infinite;}
.ball.wobbling{filter:blur(.6px);animation:wobble .42s cubic-bezier(.36,.07,.19,.97) infinite;}
.ball__spec{
  position:absolute;top:8%;left:15%;width:42%;height:30%;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%);
  filter:blur(4px);transform:rotate(-18deg);pointer-events:none;
}
.ball__win{
  position:relative;width:44%;height:44%;border-radius:50%;
  background:radial-gradient(circle at 50% 36%,#223154,#0a1226 68%,#05070f);
  box-shadow:inset 0 8px 22px rgba(0,0,0,.85),inset 0 -2px 6px rgba(60,90,220,.3),0 0 0 6px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
}
.ball__eight{
  font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:calc(var(--ball) * .209);line-height:1;
  color:rgba(120,150,240,.42);text-shadow:0 0 18px rgba(60,90,240,.4);
}
.ball.motion{--ball:min(236px,62vw);}
/* one-time "tap me" attention ping around the ball (first home visit) */
.ball__ripple{
  position:absolute;inset:0;border-radius:50%;
  border:3px solid rgba(36,64,240,.6);pointer-events:none;
  animation:tapripple 1.8s ease-out infinite;
}
@keyframes tapripple{0%{transform:scale(.96);opacity:.55;}70%{opacity:.12;}100%{transform:scale(1.32);opacity:0;}}

/* Empty-vault ball: window holds a small answer triangle instead of the "8". */
.ball.empty-ball .ball__win{
  width:51%;height:51%;
  background:radial-gradient(circle at 50% 40%,#1a2440,#080d1c 72%,#04060e);
  box-shadow:inset 0 8px 22px rgba(0,0,0,.85),inset 0 -2px 6px rgba(60,90,220,.25),0 0 0 6px rgba(0,0,0,.45);
}
.empty-tri{
  position:relative;width:70%;height:63%;
  clip-path:polygon(50% 5%,96% 96%,4% 96%);
  background:linear-gradient(180deg,rgba(90,120,225,.55),rgba(24,42,150,.8));
  box-shadow:inset 0 0 20px rgba(160,185,255,.35);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;
}
.empty-tri span{
  font-size:8.5px;font-weight:600;line-height:1.18;
  color:rgba(224,232,255,.95);text-align:center;width:76px;
}
.empty__actions{display:flex;flex-direction:column;align-items:center;gap:16px;}
.empty__sub{font-size:15px;font-weight:400;color:rgba(20,22,31,.4);}

/* ============================== buttons ============================== */
.btn-primary{
  width:100%;height:56px;border-radius:16px;background:var(--oracle);color:#fff;
  border:none;font-family:'Schibsted Grotesk',sans-serif;font-weight:600;font-size:18px;
  cursor:pointer;box-shadow:0 10px 24px -8px rgba(36,64,240,.6);
  transition:transform .12s;
}
.btn-primary:hover{transform:translateY(-1px);}
.btn-primary:active{transform:translateY(1px);}
.btn-ink{
  width:100%;height:52px;border-radius:14px;background:var(--ink);color:#fff;border:none;
  font-family:'Schibsted Grotesk',sans-serif;font-weight:600;font-size:16px;cursor:pointer;
  transition:transform .12s;
}
.btn-ink:hover{transform:translateY(-1px);}
.btn-ink:active{transform:translateY(1px);}
.link-underline{
  background:none;border:none;cursor:pointer;font-family:'Schibsted Grotesk',sans-serif;
  font-size:16px;font-weight:500;color:rgba(20,22,31,.62);text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:1.5px;padding:8px 12px;border-radius:10px;
  transition:color .12s;
}
.link-underline:hover{color:var(--oracle);}
.link-quiet{
  width:100%;background:none;border:none;cursor:pointer;font-family:'Schibsted Grotesk',sans-serif;
  font-size:14px;font-weight:500;color:rgba(20,22,31,.5);
}
.link-quiet:hover{color:var(--ink);}
.backbtn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  color:rgba(20,22,31,.5);background:none;border:none;border-radius:12px;cursor:pointer;flex:none;
}

/* ============================ motion card ============================ */
.motion-card{
  width:300px;background:#fff;border:1px solid rgba(20,22,31,.08);border-radius:22px;
  padding:22px 22px 20px;box-shadow:0 20px 44px -18px rgba(20,22,31,.35);text-align:center;
}
.motion-card__title{font-size:19px;font-weight:600;color:var(--ink);}
.motion-card__sub{margin-top:8px;font-size:14px;line-height:1.45;color:rgba(20,22,31,.55);}
.motion-card .btn-primary{margin-top:18px;height:52px;font-size:17px;box-shadow:0 8px 20px -8px rgba(36,64,240,.6);}
.motion-card .link-quiet{margin-top:10px;}

/* ============================== reveal ============================== */
.reveal{
  position:absolute;inset:0;overflow:hidden;transform-origin:center;
  background:radial-gradient(circle at 50% 60%,#3a5cff 0%,#2440f0 32%,#1528b0 68%,#0c1670 100%);
}
.reveal.flood{animation:floodin .4s cubic-bezier(.2,.8,.2,1) both;}
.reveal.xfade{animation:fadein .45s ease both;}
.reveal__grain{
  position:absolute;inset:-44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;opacity:.3;mix-blend-mode:soft-light;
  animation:grainshift 9s linear infinite alternate;pointer-events:none;
}
.reveal__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 58%,transparent 38%,rgba(6,12,60,.55) 100%);
}
.reveal__confetti{
  position:absolute;top:196px;left:0;right:0;display:flex;justify-content:center;pointer-events:none;
}
.reveal__confetti > div{position:relative;width:0;height:0;}
.conf{position:absolute;}
.conf.c1{width:10px;height:10px;border-radius:2px;background:var(--pop);animation:conf1 1.3s ease-out;}
.conf.c2{width:8px;height:8px;border-radius:50%;background:var(--pop);animation:conf2 1.3s ease-out .1s;}
.conf.c3{width:9px;height:9px;border-radius:2px;background:#ff9dc0;animation:conf3 1.3s ease-out .05s;}
.conf.c4{width:8px;height:8px;border-radius:50%;background:var(--pop);animation:conf4 1.3s ease-out .18s;}
.conf.c5{width:10px;height:10px;border-radius:2px;background:var(--pop);animation:conf5 1.3s ease-out .12s;}
.conf.c6{width:9px;height:9px;border-radius:50%;background:#ff9dc0;animation:conf6 1.3s ease-out .07s;}

.reveal__stage{
  position:absolute;top:0;left:0;right:0;bottom:198px;
  display:flex;align-items:center;justify-content:center;
}
.token{position:relative;}
.token.pop{animation:surfacePop .6s cubic-bezier(.34,1.56,.64,1) both;}
.token.float{animation:floaty 4s ease-in-out infinite;}
.token__glow{
  position:absolute;inset:-34px;
  background:radial-gradient(circle,rgba(150,180,255,.55),transparent 70%);filter:blur(22px);
}
.token__tri{
  position:relative;width:232px;height:208px;
  clip-path:polygon(50% 3%,97% 97%,3% 97%);
  background:linear-gradient(180deg,rgba(130,160,255,.62) 0%,rgba(40,70,240,.9) 100%);
  box-shadow:inset 0 0 42px rgba(190,210,255,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding-bottom:32px;
}
.token__emoji{font-size:60px;line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3));}
.token__name{
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:21px;line-height:1.05;
  color:#fff;text-align:center;width:152px;letter-spacing:-.01em;
}
.reveal__actions{
  position:absolute;left:28px;right:28px;bottom:calc(46px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;
}
.btn-light{
  appearance:none;border:none;cursor:pointer;height:56px;border-radius:16px;
  background:var(--porcelain);color:var(--ink);font-family:'Schibsted Grotesk',sans-serif;
  font-weight:600;font-size:18px;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);
  transition:transform .12s,background .12s;
}
.btn-light:hover{background:#fff;transform:translateY(-1px);}
.btn-light:active{transform:translateY(1px);}
.btn-light:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.9);}
.btn-ghost{
  appearance:none;cursor:pointer;height:52px;border-radius:16px;background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.55);color:#fff;font-family:'Schibsted Grotesk',sans-serif;
  font-weight:600;font-size:17px;transition:background .12s;
}
.btn-ghost:hover{background:rgba(255,255,255,.18);}
.btn-ghost:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.55);}
.reveal__shakehint{text-align:center;margin-top:4px;font-size:13px;font-weight:500;color:rgba(255,255,255,.72);}

/* ============================== PIN gate ============================== */
.pin{padding-top:env(safe-area-inset-top);}
.pin__head{height:60px;display:flex;align-items:center;padding:0 12px;flex:none;}
.pin__body{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 32px 0;}
.pin__brand{font-family:'Unbounded',sans-serif;font-weight:700;font-size:12px;letter-spacing:.2em;color:rgba(20,22,31,.38);}
.pin__title{margin-top:38px;font-size:23px;font-weight:600;}
.pin__sub{margin-top:6px;font-size:16px;color:rgba(20,22,31,.55);}
.pin__dots{display:flex;gap:20px;margin-top:36px;}
.pin__dots.shake{animation:dotshake .4s ease;}
.dot{width:16px;height:16px;border-radius:50%;background:rgba(20,22,31,.14);}
.dot.filled{background:var(--oracle);}
.pin__note{margin-top:20px;font-size:13px;color:rgba(20,22,31,.42);text-align:center;max-width:220px;line-height:1.45;}
.pinpad{padding:0 30px 6px;flex:none;}
.pinpad__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.key{
  appearance:none;border:none;background:rgba(20,22,31,.04);border-radius:16px;height:62px;
  font-family:'Schibsted Grotesk',sans-serif;font-size:26px;font-weight:500;color:var(--ink);
  cursor:pointer;transition:background .1s;
}
.key:active{background:rgba(36,64,240,.14);}
.key--del{background:none;display:flex;align-items:center;justify-content:center;color:rgba(20,22,31,.5);}
.key--del:active{background:rgba(20,22,31,.06);}
.pin__forgot-wrap{text-align:center;padding:6px 0 calc(26px + env(safe-area-inset-bottom));flex:none;}
.pin__forgot{
  background:none;border:none;cursor:pointer;font-family:'Schibsted Grotesk',sans-serif;
  font-size:15px;font-weight:500;color:rgba(20,22,31,.5);text-decoration:underline;
  text-underline-offset:4px;padding:6px 10px;border-radius:8px;
}
.pin__forgot:hover{color:var(--oracle);}

/* ============================== toy vault ============================== */
.vault{padding-top:env(safe-area-inset-top);}
.vault__head{padding:16px 12px 6px;flex:none;}
.vault__head-row{display:flex;align-items:center;gap:8px;}
.vault__titlebar{display:flex;align-items:baseline;gap:8px;margin:8px 4px 0;}
.vault__title{font-family:'Unbounded',sans-serif;font-weight:700;font-size:19px;}
.vault__count{font-size:14px;color:rgba(20,22,31,.42);font-weight:500;}
.icon-btn{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  color:rgba(20,22,31,.4);background:none;border:none;border-radius:10px;cursor:pointer;font-size:20px;
}
.backbtn.sm{width:36px;height:36px;border-radius:10px;}
.vault__add{padding:8px 20px 0;flex:none;}
.btn-add{
  width:100%;height:52px;border-radius:14px;background:var(--oracle);color:#fff;border:none;
  font-family:'Schibsted Grotesk',sans-serif;font-weight:600;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 8px 20px -8px rgba(36,64,240,.6);transition:transform .12s;
}
.btn-add:hover{transform:translateY(-1px);}
.btn-add:active{transform:translateY(1px);}
.vault__searchwrap{padding:14px 20px 6px;flex:none;}
.searchbar{
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid rgba(20,22,31,.1);
  border-radius:12px;padding:0 13px;height:44px;
}
.searchbar input{
  flex:1;min-width:0;border:none;outline:none;background:none;
  font-family:'Schibsted Grotesk',sans-serif;font-size:15px;color:var(--ink);
}
.searchbar svg{color:rgba(20,22,31,.4);flex:none;}
.vault__list{flex:1;overflow-y:auto;padding:2px 14px calc(90px + env(safe-area-inset-bottom));}
.vault__empty{padding:40px 20px;text-align:center;color:rgba(20,22,31,.42);font-size:15px;line-height:1.5;}
.toy-row{display:flex;align-items:center;gap:14px;padding:13px 6px;border-bottom:1px solid rgba(20,22,31,.07);}
.toy-row.paused{opacity:.5;}
.toy-row.flash{animation:rowflash 1s ease;}
.toy-row__emoji{font-size:25px;width:30px;text-align:center;flex:none;}
.toy-row__name{flex:1;font-size:16px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.toy-row__namewrap{flex:1;display:flex;align-items:center;gap:8px;min-width:0;}
.badge-paused{
  font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:rgba(20,22,31,.5);
  background:rgba(20,22,31,.09);padding:2px 7px;border-radius:6px;flex:none;
}
.switch{
  width:38px;height:22px;border-radius:11px;background:var(--oracle);position:relative;flex:none;
  border:none;cursor:pointer;padding:0;
}
.switch.off{background:rgba(20,22,31,.18);}
.switch__knob{position:absolute;top:2px;left:18px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s;}
.switch.off .switch__knob{left:2px;}
.row-menu{width:26px;text-align:center;color:rgba(20,22,31,.38);font-size:20px;cursor:pointer;background:none;border:none;flex:none;}

/* ---- row action popover (edit / delete) ---- */
.rowpop{
  position:absolute;z-index:40;background:#fff;border:1px solid rgba(20,22,31,.1);
  border-radius:12px;box-shadow:0 16px 36px -12px rgba(20,22,31,.35);padding:6px;min-width:150px;
}
.rowpop button{
  display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;cursor:pointer;
  padding:10px 12px;border-radius:8px;font-family:'Schibsted Grotesk',sans-serif;font-size:15px;
  font-weight:500;color:var(--ink);text-align:left;
}
.rowpop button:hover{background:rgba(20,22,31,.05);}
.rowpop button.danger{color:var(--oracle);}

/* ============================ add-a-toy sheet ============================ */
.sheet-overlay{position:absolute;inset:0;}
.sheet-overlay__behind{position:absolute;inset:0;opacity:.55;pointer-events:none;}
.sheet-scrim{position:absolute;inset:0;background:rgba(20,22,31,.42);cursor:pointer;}
.sheet{
  position:absolute;left:0;right:0;top:96px;bottom:0;background:#fff;border-radius:26px 26px 0 0;
  box-shadow:0 -20px 50px -12px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden;
  animation:sheetup .3s cubic-bezier(.2,.8,.2,1) both;
}
.sheet__grip{width:40px;height:5px;border-radius:3px;background:rgba(20,22,31,.15);margin:0 auto 16px;}
.sheet__top{padding:12px 22px 0;flex:none;}
.sheet__titlerow{display:flex;align-items:baseline;gap:10px;}
.sheet__title{font-family:'Unbounded',sans-serif;font-weight:700;font-size:18px;}
.add-counter{font-size:13px;font-weight:600;color:var(--oracle);background:rgba(36,64,240,.1);padding:4px 11px;border-radius:20px;}
.add-search{
  margin-top:14px;display:flex;align-items:center;gap:9px;background:var(--porcelain);
  border:2px solid var(--oracle);border-radius:14px;padding:0 14px;height:50px;
  box-shadow:0 0 0 4px rgba(36,64,240,.14);
}
.add-search svg{color:rgba(20,22,31,.4);flex:none;}
.add-search input{
  flex:1;min-width:0;border:none;outline:none;background:none;
  font-family:'Schibsted Grotesk',sans-serif;font-size:16px;font-weight:500;color:var(--ink);
}
.add-body{flex:1;overflow-y:auto;padding:4px 22px 20px;}
.chip-group__label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(20,22,31,.4);margin:16px 0 10px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  appearance:none;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(20,22,31,.12);
  border-radius:13px;padding:9px 13px 9px 11px;font-family:'Schibsted Grotesk',sans-serif;
  font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color .12s,background .12s;
}
.chip:hover{border-color:var(--oracle);background:rgba(36,64,240,.04);}
.chip__emoji{font-size:18px;}
.chip.added{background:rgba(36,64,240,.07);border-color:rgba(36,64,240,.28);color:rgba(20,22,31,.5);cursor:pointer;}
.chip.added .chip__emoji{opacity:.55;}
.chip.flash{animation:chipflash 1s ease;}
.chip__check{display:flex;color:var(--oracle);}
.add-custom{
  display:flex;align-items:center;gap:10px;background:var(--oracle);border-radius:14px;
  padding:11px 11px 11px 15px;box-shadow:0 8px 20px -8px rgba(36,64,240,.6);
}
.add-custom__btn{
  appearance:none;flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:none;
  cursor:pointer;text-align:left;color:#fff;font-family:'Schibsted Grotesk',sans-serif;font-size:15px;font-weight:600;
}
.add-custom__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.add-custom__emoji{font-size:19px;flex:none;}
.add-custom__change{
  appearance:none;flex:none;background:rgba(255,255,255,.16);border:none;border-radius:9px;padding:7px 11px;
  color:#fff;font-family:'Schibsted Grotesk',sans-serif;font-size:12px;font-weight:600;cursor:pointer;
}
.add-custom__change:hover{background:rgba(255,255,255,.28);}
.sheet__footer{flex:none;padding:12px 22px calc(26px + env(safe-area-inset-bottom));border-top:1px solid rgba(20,22,31,.07);}

/* compact emoji picker */
.emoji-pop{
  position:absolute;z-index:60;background:#fff;border:1px solid rgba(20,22,31,.12);border-radius:14px;
  box-shadow:0 18px 40px -12px rgba(20,22,31,.4);padding:10px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:250px;
}
.emoji-pop button{background:none;border:none;cursor:pointer;font-size:22px;padding:6px;border-radius:8px;line-height:1;}
.emoji-pop button:hover{background:rgba(36,64,240,.08);}

/* ============================== settings ============================== */
.settings{padding-top:env(safe-area-inset-top);}
.settings__head{padding:16px 12px 10px;flex:none;}
.settings__head-row{display:flex;align-items:center;gap:8px;}
.settings__titlebar{margin:8px 4px 0;}
.settings__title{font-family:'Unbounded',sans-serif;font-weight:700;font-size:19px;}
.settings__body{padding:4px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px;overflow-y:auto;}
.card{background:#fff;border:1px solid rgba(20,22,31,.08);border-radius:16px;overflow:hidden;}
.row{display:flex;align-items:center;padding:16px;}
.row + .row,.card > .row:not(:last-child){border-bottom:1px solid rgba(20,22,31,.07);}
.row.tappable{cursor:pointer;}
.row__main{flex:1;min-width:0;}
.row__label{font-size:16px;font-weight:500;}
.row__sub{font-size:13px;color:rgba(20,22,31,.48);margin-top:2px;}
.switch.lg{width:44px;height:26px;border-radius:13px;}
.switch.lg .switch__knob{top:2px;left:20px;width:22px;height:22px;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.switch.lg.off .switch__knob{left:2px;}
.chevron{color:rgba(20,22,31,.35);display:flex;flex:none;}
.pin-actions{margin-top:14px;display:flex;gap:8px;padding:0 16px 16px;}
.pin-actions button{
  flex:1;height:42px;border-radius:11px;font-family:'Schibsted Grotesk',sans-serif;font-weight:600;font-size:14px;cursor:pointer;
}
.pin-actions .alt{background:rgba(36,64,240,.08);border:1px solid rgba(36,64,240,.2);color:var(--oracle);}
.pin-actions .off{background:none;border:1px solid rgba(20,22,31,.14);color:rgba(20,22,31,.6);}
.storage-note{font-size:13.5px;line-height:1.6;color:rgba(20,22,31,.5);padding:0 4px;}
.setpin-row{padding:0 16px 16px;}
.setpin-row input{
  width:100%;height:46px;border-radius:11px;border:1px solid rgba(20,22,31,.14);background:var(--porcelain);
  padding:0 14px;font-family:'Schibsted Grotesk',sans-serif;font-size:18px;letter-spacing:.3em;color:var(--ink);
}

/* =========================== first-run welcome =========================== */
.welcome{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 40px calc(0px + env(safe-area-inset-bottom));text-align:center;
}
.welcome .ball{--ball:130px;}
.welcome__brand{margin-top:30px;font-family:'Unbounded',sans-serif;font-weight:700;font-size:11px;letter-spacing:.22em;color:rgba(20,22,31,.4);}
.welcome__title{margin-top:22px;font-family:'Unbounded',sans-serif;font-weight:700;font-size:29px;line-height:1.1;letter-spacing:-.01em;}
.welcome__sub{margin-top:14px;font-size:16px;line-height:1.5;color:rgba(20,22,31,.6);max-width:280px;}
.welcome__cta{position:absolute;left:28px;right:28px;bottom:calc(40px + env(safe-area-inset-bottom));}

/* ============================== snackbar / toast ============================== */
.snackbar{
  position:absolute;left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:80;
  background:var(--ink);color:#fff;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;
  box-shadow:0 16px 36px -12px rgba(20,22,31,.5);font-size:15px;
  animation:sheetup .25s ease both;
}
.snackbar__msg{flex:1;}
.snackbar__btn{
  background:none;border:none;color:#8fa5ff;font-family:'Schibsted Grotesk',sans-serif;font-weight:700;
  font-size:15px;cursor:pointer;padding:4px 8px;border-radius:8px;
}
.snackbar__btn:hover{color:#b9c6ff;}

/* add-to-home-screen nudge (home screen, bottom) */
.install-bar{
  position:absolute;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:75;
  background:#fff;border:1px solid rgba(20,22,31,.1);border-radius:16px;
  padding:12px 12px 12px 14px;display:flex;align-items:center;gap:11px;
  box-shadow:0 16px 36px -12px rgba(20,22,31,.35);animation:sheetup .3s ease both;
}
.install-bar__ico{display:flex;color:var(--oracle);flex:none;}
.install-bar__text{flex:1;font-size:13.5px;line-height:1.35;color:var(--ink);}
.install-bar__cta{
  flex:none;background:var(--oracle);color:#fff;border:none;border-radius:11px;padding:9px 15px;
  font-family:'Schibsted Grotesk',sans-serif;font-weight:600;font-size:14px;cursor:pointer;
}
.install-bar__x{flex:none;background:none;border:none;color:rgba(20,22,31,.4);cursor:pointer;font-size:20px;line-height:1;padding:2px 6px;}

/* persistent "can't save" notice */
.storage-warn{
  position:absolute;left:0;right:0;bottom:0;z-index:90;background:#b00020;color:#fff;
  font-size:12.5px;line-height:1.4;padding:10px 14px calc(10px + env(safe-area-inset-bottom));text-align:center;
}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ============================== keyframes ============================== */
@keyframes breathe{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-9px) scale(1.015);}}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes wobble{0%{transform:translate(0,0) rotate(0);}12%{transform:translate(-12px,5px) rotate(-8deg);}26%{transform:translate(11px,-4px) rotate(7deg);}40%{transform:translate(-9px,6px) rotate(-6deg);}56%{transform:translate(9px,-5px) rotate(6deg);}72%{transform:translate(-6px,3px) rotate(-4deg);}88%{transform:translate(4px,-2px) rotate(3deg);}100%{transform:translate(0,0) rotate(0);}}
@keyframes bgvibe{0%,100%{transform:translate(0,0);}25%{transform:translate(-2px,1px);}50%{transform:translate(2px,-1.5px);}75%{transform:translate(-1px,-2px);}}
@keyframes floodin{0%{transform:scale(.16);opacity:.5;border-radius:50%;}55%{opacity:1;}100%{transform:scale(1);opacity:1;border-radius:0;}}
@keyframes grainshift{0%{transform:translate(0,0);}100%{transform:translate(-44px,26px);}}
@keyframes conf1{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0;}14%{opacity:1;}100%{transform:translate(-74px,-48px) scale(1) rotate(200deg);opacity:0;}}
@keyframes conf2{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0;}14%{opacity:1;}100%{transform:translate(68px,-36px) scale(1) rotate(-172deg);opacity:0;}}
@keyframes conf3{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0;}14%{opacity:1;}100%{transform:translate(-28px,-100px) scale(1) rotate(140deg);opacity:0;}}
@keyframes conf4{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0;}14%{opacity:1;}100%{transform:translate(46px,-90px) scale(1) rotate(-112deg);opacity:0;}}
@keyframes conf5{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0;}14%{opacity:1;}100%{transform:translate(-96px,12px) scale(1) rotate(260deg);opacity:0;}}
@keyframes conf6{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0;}14%{opacity:1;}100%{transform:translate(94px,8px) scale(1) rotate(-238deg);opacity:0;}}
@keyframes surfacePop{0%{transform:translateY(92px) scale(.5);opacity:0;}55%{opacity:1;}70%{transform:translateY(-13px) scale(1.08);}85%{transform:translateY(5px) scale(.97);}100%{transform:translateY(0) scale(1);opacity:1;}}
@keyframes fadein{0%{opacity:0;}100%{opacity:1;}}
@keyframes sheetup{0%{transform:translateY(24px);opacity:0;}100%{transform:translateY(0);opacity:1;}}
@keyframes dotshake{0%,100%{transform:translateX(0);}20%{transform:translateX(-9px);}40%{transform:translateX(8px);}60%{transform:translateX(-6px);}80%{transform:translateX(4px);}}
@keyframes rowflash{0%,100%{background:transparent;}30%{background:rgba(36,64,240,.12);}}
@keyframes chipflash{0%,100%{transform:scale(1);}30%{transform:scale(1.06);box-shadow:0 0 0 3px rgba(36,64,240,.3);}}

/* background vibe applied to shaking screen */
.bgvibe{animation:bgvibe .11s linear infinite;}

/* ======================= reduced-motion ======================= */
@media (prefers-reduced-motion: reduce){
  .ball.breathe,.ball.wobbling,.token.float,.reveal__grain,.reveal__confetti,
  .bgvibe,.reveal.flood,.token.pop,.ball__ripple{animation:none !important;}
  .ball.wobbling{filter:none;}
  .switch__knob{transition:none;}
}

/* narrow phones */
@media (max-width:340px){
  .motion-card{width:88vw;}
}

/* tablets (portrait, roomy) — give the toy more presence and use the screen */
@media (min-width:700px) and (min-height:800px){
  #app{max-width:640px;}
  .ball{--ball:min(440px,66vw,54vh);}
  .hint{font-size:22px;}
  .token__tri{width:300px;height:270px;padding-bottom:40px;}
  .token__emoji{font-size:78px;}
  .token__name{font-size:26px;width:200px;}
  .reveal__stage{bottom:230px;}
  .reveal__confetti{top:250px;}
}