/* Łoscypki Bird — "sticker arcade" UI
   Thick chocolate outlines, hard offset shadows, cream paper panels, sunny CTA.
   Everything is CSS-drawn; the only image assets are the character avatars. */

:root{
  --ink:#2B1A0F;          /* outlines, text, hard shadows */
  --paper:#FFF7E6;        /* panels, sheets, secondary buttons */
  --paper-2:#FBE9C6;      /* inset tiles, chips, list rows */
  --line:#E3CBA3;         /* soft borders on paper */
  --muted:#6B5443;        /* secondary text (6.5:1 on paper) */
  --sun:#FFC83D;          /* primary actions, selection, "you" */
  --sun-2:#FFE7A8;        /* banners */
  --sky:#4FC3E8;
  --err:#B3261E; --err-line:#C0262D; --err-bg:#FDE4E1;
  --ok:#1F5410;  --ok-line:#6FB84A;  --ok-bg:#DFF3D2;
  --neutral-bg:#EDE3D3;
  --gold:#FFC83D; --silver:#CFD8E3; --bronze:#E0995E;
  --record:#D9363E;
  --scrim:rgba(43,26,15,.55);
  --focus:#1C6FD1;
  --font:'Baloo 2',ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body{display:grid;place-items:center;background:#1E140C radial-gradient(rgba(255,200,61,.07) 1.5px,transparent 1.6px) 0 0/22px 22px}
button{font:inherit;color:inherit}
img{-webkit-user-drag:none}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.shell{position:relative;width:min(100vw,430px);height:100vh;height:100dvh;overflow:hidden;background:var(--sky);
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* Outlined "sticker" text */
.stk{color:#fff;text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),
  2px 2px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),0 6px 0 var(--ink)}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 18px;
  border:3px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:0 5px 0 var(--ink);
  font-size:19px;font-weight:800;line-height:1;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn svg{width:22px;height:22px;flex-shrink:0}
.btn.primary{background:var(--sun);font-size:26px;min-height:64px}
.btn.big{min-height:72px;font-size:30px;border-radius:20px;box-shadow:0 6px 0 var(--ink)}
.btn.big svg{width:28px;height:28px}
.btn.big:active{box-shadow:0 2px 0 var(--ink)}
/* Restart lock: a shade sweeps off the button while taps are ignored */
.btn.arming::after{content:"";position:absolute;inset:0;background:rgba(43,26,15,.2);transform-origin:right;animation:arm .45s linear forwards}
@keyframes arm{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.icon-btn{width:44px;height:44px;padding:0;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:14px;
  background:var(--paper);box-shadow:0 3px 0 var(--ink);cursor:pointer;transition:transform .08s,box-shadow .08s}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.icon-btn svg{width:22px;height:22px}
.icon-btn.round{border-radius:50%;background:rgba(255,247,230,.85)}
.btn:focus-visible,.icon-btn:focus-visible,.tile:focus-visible,.name-pill:focus-visible,.hero-avatar:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- HUD ---------- */
.hud{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(var(--safe-t) + 12px) 12px 0;pointer-events:none}
.hud>button{pointer-events:auto}
.hud-center{display:flex;flex-direction:column;align-items:center;gap:6px}
.score{font-size:72px;font-weight:800;line-height:1;margin-top:-2px;transition:opacity .2s}
.score.dim{opacity:.55}
.score.pop{animation:pop .18s ease-out}
@keyframes pop{50%{transform:scale(1.22)}}
.rival{height:30px;padding:0 4px 0 12px;border-radius:999px;background:rgba(43,26,15,.72);color:#fff;display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;white-space:nowrap;max-width:220px}
.rival b{min-width:30px;height:22px;padding:0 6px;border-radius:999px;background:var(--sun);color:var(--ink);display:grid;place-items:center}
.rival.flash{background:var(--sun);color:var(--ink);padding:0 14px;border:2px solid var(--ink);animation:pop .25s ease-out}
.shell[data-state=menu] .hud-center,.shell[data-state=menu] #rankTop,
.shell[data-state=over] .hud{visibility:hidden}
.shell[data-state=over] .hud{display:none}

/* ---------- Get ready ---------- */
.ready{position:absolute;inset:0;z-index:3;pointer-events:none}
.ready-title{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 19%);text-align:center;font-size:40px;font-weight:800;line-height:1;transform:rotate(-3deg)}
.ready-box{position:absolute;left:16px;right:16px;top:54%;display:flex;flex-direction:column;align-items:center;gap:14px}
.tap{position:relative;width:76px;height:76px;display:grid;place-items:center}
.ping{position:absolute;inset:0;border-radius:50%;border:4px solid #fff;animation:ping 1.2s ease-out infinite}
@keyframes ping{from{transform:scale(.6);opacity:.9}to{transform:scale(1.6);opacity:0}}
.tap-ic{width:64px;height:64px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);display:grid;place-items:center}
.tap-ic svg{width:34px;height:34px}
.callout{background:var(--paper);border:3px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink);padding:10px 20px 12px;text-align:center}
.callout b{display:block;font-size:26px;font-weight:800;line-height:1.15}
.callout span{display:block;font-size:15px;font-weight:600;color:var(--muted);line-height:1.3}

/* ---------- Screens ---------- */
.screen{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column}

/* Start */
.start{padding-top:calc(var(--safe-t) + 12px)}
.logo{margin:clamp(14px,3.4dvh,32px) 0 0;display:flex;flex-direction:column;align-items:center;transform:rotate(-4deg);
  font-weight:800;line-height:.92;letter-spacing:-1px;pointer-events:none}
.logo span:first-child{font-size:clamp(38px,6.4dvh,52px)}
.logo span:last-child{font-size:clamp(54px,9.4dvh,76px);color:var(--sun)}
.hero{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 0 14px}
.chip-dark{height:28px;padding:0 12px;border-radius:999px;background:rgba(43,26,15,.78);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px}
.chip-dark svg{width:16px;height:16px}
.hero-avatar{background:none;border:0;padding:0;cursor:pointer;border-radius:24px}
.hero-avatar img{display:block;width:clamp(88px,20dvh,176px);height:clamp(88px,20dvh,176px);filter:drop-shadow(0 4px 3px rgba(43,26,15,.25));animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(-4deg)}}
.name-pill{display:flex;align-items:center;gap:12px;height:44px;padding:0 5px 0 18px;border:3px solid var(--ink);border-radius:999px;background:var(--paper);
  box-shadow:0 4px 0 var(--ink);font-size:20px;font-weight:800;text-transform:uppercase;cursor:pointer;transition:transform .08s,box-shadow .08s}
.name-pill:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.pill-action{display:flex;align-items:center;gap:5px;height:30px;padding:0 12px 0 9px;border:2px solid var(--ink);border-radius:999px;background:var(--sun);font-size:15px;text-transform:none}
.pill-action svg{width:16px;height:16px}
/* "Change character" pill on the ready and game-over screens (the ready overlay is otherwise click-through) */
.name-pill.swap{pointer-events:auto;align-self:center;padding-left:6px;gap:8px;font-family:inherit;color:var(--ink)}
.name-pill.swap img{width:32px;height:32px;object-fit:contain}

.sheet{background:var(--paper);border-top:3px solid var(--ink);border-radius:28px 28px 0 0;box-shadow:0 -4px 0 rgba(43,26,15,.12);
  padding:18px 20px calc(16px + var(--safe-b));display:flex;flex-direction:column;gap:14px}
.lbl{display:block;font-size:16px;font-weight:700;margin-bottom:6px}
.field{position:relative}
#name{width:100%;height:56px;border:3px solid var(--ink);border-radius:16px;background:#fff;padding:0 64px 0 16px;
  font:700 20px/1 var(--font);color:var(--ink);outline:none;-webkit-user-select:text;user-select:text}
#name::placeholder{color:#8A7363}
#name:focus{box-shadow:0 0 0 4px var(--sun)}
.counter{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:14px;font-weight:700;color:var(--muted)}
.field.invalid #name{border-color:var(--err-line);background:#FFF5F4;box-shadow:0 0 0 4px rgba(192,38,45,.2)}
.field.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.field-error{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:15px;font-weight:700;color:var(--err);line-height:1.2}
.field-error svg{width:18px;height:18px;flex-shrink:0}
.greet{display:flex;align-items:center;justify-content:space-between;gap:12px}
.greet small{display:block;font-size:15px;font-weight:600;color:var(--muted);line-height:1.1}
.greet b{display:block;font-size:28px;font-weight:800;line-height:1.1;word-break:break-word}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{height:36px;padding:0 14px;border-radius:999px;background:var(--paper-2);border:2px solid var(--ink);display:flex;align-items:center;gap:6px;font-size:16px;font-weight:700}
.chip b{font-size:18px;font-weight:800}
.sheet.is-returning #play{min-height:72px;font-size:32px;border-radius:20px;box-shadow:0 6px 0 var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{margin:0;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-size:15px;font-weight:600;color:var(--muted);line-height:1.25}
.hint.small{font-size:14px}

/* Game over */
.over{background:rgba(43,26,15,.38);animation:fade .25s ease-out}
.over-title{position:absolute;left:16px;right:16px;top:calc(var(--safe-t) + 13%);text-align:center;font-size:clamp(40px,7dvh,56px);font-weight:800;line-height:1;transform:rotate(-3deg)}
.card{background:var(--paper);border:3px solid var(--ink);border-radius:28px;box-shadow:0 6px 0 var(--ink)}
.over-card{position:absolute;left:12px;right:12px;bottom:calc(var(--safe-b) + 20px);padding:18px 16px;display:flex;flex-direction:column;gap:14px;
  animation:rise .3s cubic-bezier(.2,.9,.3,1.15)}
.over-card.has-ribbon{padding-top:32px}
@keyframes rise{from{transform:translateY(60px);opacity:0}}
.ribbon{position:absolute;left:50%;top:-24px;height:46px;padding:0 18px;display:flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--record);color:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);
  font-size:22px;font-weight:800;letter-spacing:.04em;transform:translateX(-50%) rotate(-3deg);animation:drop .5s cubic-bezier(.2,1.6,.4,1) both}
.ribbon svg{width:20px;height:20px}
@keyframes drop{from{transform:translateX(-50%) translateY(-40px) rotate(-3deg);opacity:0}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--paper-2);border:2.5px solid var(--ink);border-radius:18px;padding:8px 10px 6px;display:flex;flex-direction:column;align-items:center}
.stat small{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.stat b{font-size:clamp(44px,7dvh,56px);font-weight:800;line-height:1}
.stat em{font-style:normal;font-size:13px;font-weight:700;color:var(--muted);line-height:1.2}
.stat.hot{background:var(--sun)}
.stat.hot small{color:var(--ink)}
.status{min-height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 14px;
  font-size:16px;font-weight:700;line-height:1.15;text-align:center}
.status svg{width:18px;height:18px;flex-shrink:0}
.status--saving,.status--neutral{background:var(--neutral-bg);color:#4A3628}
.status--ok,.status--rank{background:var(--ok-bg);border:2px solid var(--ok-line);color:var(--ok)}
.status--error{background:var(--err-bg);border:2px solid var(--err-line);color:#8E1B16;justify-content:flex-start;text-align:left;min-height:56px;border-radius:20px;padding:4px 5px 4px 14px}
.status--error>span{flex:1}
.mini-btn{min-height:44px;font-size:16px;border-radius:14px;box-shadow:0 3px 0 var(--ink);padding:0 12px;gap:6px;border-width:2.5px}
.mini-btn svg{width:16px;height:16px}
.spinner{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.medal{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--ink);display:grid;place-items:center;font-size:15px;font-weight:800;color:var(--ink);flex-shrink:0}
.m1{background:var(--gold)}.m2{background:var(--silver)}.m3{background:var(--bronze)}
.rival-line{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:-4px;font-size:15px;font-weight:600;color:var(--muted);text-align:center}
.rival-line svg{width:16px;height:16px;flex-shrink:0}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-24px;width:10px;height:16px;border:2px solid var(--ink);border-radius:3px;animation:fall 1s ease-in forwards}
@keyframes fall{to{transform:translateY(60vh) rotate(540deg);opacity:0}}

/* ---------- Bottom sheets (picker, ranking) ---------- */
.modal{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:flex-end;background:var(--scrim);animation:fade .2s ease-out}
@keyframes fade{from{opacity:0}}
.panel{display:flex;flex-direction:column;max-height:calc(100% - var(--safe-t) - 24px);background:var(--paper);border-top:3px solid var(--ink);
  border-radius:28px 28px 0 0;animation:up .26s cubic-bezier(.2,.9,.3,1.1)}
.panel.tall{height:calc(100% - var(--safe-t) - 24px)}
@keyframes up{from{transform:translateY(40%)}}
.panel-grab{touch-action:none}
.grabber{width:44px;height:5px;border-radius:5px;background:#CDB38F;margin:8px auto 0}
.panel-head{display:flex;align-items:center;gap:12px;padding:6px 16px 10px}
.panel-head .t{flex:1;min-width:0}
.panel-head small{display:block;font-size:14px;font-weight:600;color:var(--muted);line-height:1.2}
.panel-head b{display:block;font-size:26px;font-weight:800;line-height:1.1}
.panel-head img{width:56px;height:56px;flex-shrink:0}
.panel-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:8px 16px 12px}
.panel-foot{display:flex;flex-direction:column;gap:8px;padding:12px 16px calc(14px + var(--safe-b));border-top:2px solid #F0DDB8}

/* Character grid */
.chargrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;padding-top:6px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;padding:6px 4px 8px;border:3px solid var(--line);border-radius:20px;
  background:var(--paper-2);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s}
.tile img{display:block;width:min(84px,100%);aspect-ratio:1}
.tile span{font-size:16px;font-weight:800;line-height:1.2}
.tile:active{transform:translateY(2px)}
.tile[aria-checked=true]{background:var(--sun);border-color:var(--ink);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.tile[aria-checked=true]::after{content:"";position:absolute;top:-8px;right:-6px;width:28px;height:28px;border-radius:50%;border:2px solid var(--paper);
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}
.wig{animation:wig .35s ease-out}
@keyframes wig{30%{transform:rotate(-9deg) translateY(-4px)}60%{transform:rotate(7deg)}}

/* Ranking */
.banner{min-height:40px;display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 12px;border:2px solid var(--ink);border-radius:14px;
  background:var(--sun-2);font-size:16px;font-weight:700;text-align:center;line-height:1.2}
.banner svg{width:18px;height:18px;flex-shrink:0}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;padding-top:10px}
.pod{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}
.pod>img{width:66px;height:66px}
.pod.p1>img{width:80px;height:80px}
.pod .crown{width:30px;height:20px}
.pod .n{max-width:100%;padding:0 6px;font-size:16px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:999px}
.pod.me .n{background:var(--ink);color:#fff}
.pod .s{margin-bottom:4px;font-size:14px;font-weight:700;color:var(--muted)}
.pod .block{width:100%;display:flex;justify-content:center;padding-top:7px;border:3px solid var(--ink);border-bottom:0;border-radius:14px 14px 0 0}
.p1 .block{height:72px;background:#FFD866}.p2 .block{height:52px;background:#DCE3EA}.p3 .block{height:40px;background:#F0C49C}
.p1 .medal{width:34px;height:34px;font-size:18px}
.rows{list-style:none;margin:0 -16px;padding:10px 16px 4px;border-top:3px solid var(--ink);display:flex;flex-direction:column;gap:5px}
.rowi{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px 0 4px;border:2px solid var(--line);border-radius:14px;background:var(--paper-2)}
.rowi.me{background:var(--sun);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.rowi .pos{width:30px;flex-shrink:0;text-align:center;font-size:17px;font-weight:800;color:#4A3628}
.rowi>img{width:38px;height:38px;flex-shrink:0}
.rowi .nm{flex:1;min-width:0;font-size:17px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowi .sc{min-width:36px;text-align:right;font-size:19px;font-weight:800}
.ty{height:22px;padding:0 8px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:800;letter-spacing:.05em;display:flex;align-items:center}
.ini{display:grid;place-items:center;flex-shrink:0;border-radius:50%;background:#CFE8F5;border:2.5px solid var(--ink);font-weight:800}
.rowi .ini{width:34px;height:34px;margin:2px;font-size:16px}
.pod .ini{width:56px;height:56px;margin:5px;font-size:26px}
.pod.p1 .ini{width:68px;height:68px;margin:6px}
.stale{margin:10px 0 0;text-align:center;font-size:14px;font-weight:600;color:var(--muted)}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 12px;text-align:center}
.empty-state>svg{width:64px;height:64px;color:var(--muted)}
.empty-state b{font-size:24px;font-weight:800;line-height:1.15}
.empty-state p{margin:0 0 8px;font-size:16px;font-weight:600;color:var(--muted)}
.skel{display:block;background:#EFDDBE;border-radius:14px;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}

/* ---------- Social features ---------- */
/* Start: GRAJ + Lot dnia */
.play-row{display:grid;grid-template-columns:1fr 104px;gap:10px}
.btn.daily{min-height:64px;flex-direction:column;gap:2px;padding:0 6px;background:var(--sun-2);font-size:17px;line-height:1.05}
.btn.daily svg{width:24px;height:24px}
.sheet.is-returning .btn.daily{min-height:72px;border-radius:20px;box-shadow:0 6px 0 var(--ink)}
.sheet.is-returning .btn.daily:active{box-shadow:0 2px 0 var(--ink)}
/* "Someone overtook you" */
.news{max-width:310px;display:flex;align-items:center;gap:8px;padding:8px 14px;border:3px solid var(--ink);border-radius:16px;background:var(--record);
  color:#fff;box-shadow:0 4px 0 var(--ink);font-size:15px;font-weight:600;line-height:1.2;transform:rotate(-2deg);animation:news .45s cubic-bezier(.2,1.6,.4,1) both}
.news b{font-weight:800}
.news svg{width:20px;height:20px;flex-shrink:0}
@keyframes news{from{transform:translateY(-16px) rotate(-2deg);opacity:0}}
/* Game over */
.over-menu{position:absolute;top:calc(var(--safe-t) + 12px);left:12px;z-index:2}
.over-head{position:absolute;left:16px;right:16px;top:calc(var(--safe-t) + 13%);display:flex;flex-direction:column;align-items:center;gap:12px}
.over-head .over-title{position:static}
.medal-tag{display:inline-flex;align-items:center;gap:4px;height:26px;margin-top:2px;padding:0 10px 0 6px;border:2px solid var(--ink);border-radius:999px;font-size:14px;font-weight:800;line-height:1}
.medal-tag svg{width:16px;height:16px}
.mt-bronze{background:#F0C49C}.mt-silver{background:#E4EAF0}.mt-gold{background:#FFE08A}.mt-platinum{background:#C9F3F3}
.mstar{width:16px;height:16px;flex-shrink:0;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.ms-bronze{fill:#E0995E}.ms-silver{fill:#CFD8E3}.ms-gold{fill:#FFC83D}.ms-platinum{fill:#9FE7E7}
.pod .s{display:flex;align-items:center;gap:3px}
.pod .s .mstar{width:14px;height:14px}
.toast{position:absolute;left:50%;top:calc(var(--safe-t) + 70px);z-index:30;transform:translateX(-50%);max-width:calc(100% - 32px);padding:10px 18px;
  border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:700;text-align:center;animation:fade .2s ease-out}
.over-actions .btn{font-size:17px;padding:0 10px;gap:6px;white-space:nowrap}
.over-actions .btn svg{width:20px;height:20px}
@media (max-width:379px){.over-actions .btn{font-size:16px;padding:0 8px}.over-actions .btn svg{display:none}}
/* Ranking tabs */
.tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0 16px 6px;padding:3px;border:2px solid var(--ink);border-radius:16px;background:var(--paper-2)}
.tab{min-height:42px;border:0;border-radius:12px;background:none;color:var(--muted);font-size:14px;font-weight:800;cursor:pointer;padding:0 4px}
.tab[aria-selected=true]{background:var(--sun);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.tab:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
/* Crew stats */
.crew-hero{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 12px;border:2.5px solid var(--ink);border-radius:20px;background:var(--sun);
  box-shadow:0 4px 0 var(--ink);text-align:center}
.crew-hero b{font-size:44px;font-weight:800;line-height:1}
.crew-hero span{font-size:15px;font-weight:700;line-height:1.2}
.crew-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.crew-card{display:flex;align-items:center;gap:10px;min-height:64px;padding:8px 12px 8px 8px;border:2px solid var(--line);border-radius:16px;background:var(--paper-2)}
.crew-card>img{width:48px;height:48px;flex-shrink:0}
.crew-card>.ini{width:44px;height:44px;margin:2px;font-size:20px}
.crew-t{flex:1;min-width:0}
.crew-t small{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.crew-t b{display:block;font-size:18px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crew-v{font-size:17px;font-weight:800;white-space:nowrap}
.crew-note{margin:12px 0 0;text-align:center;font-size:14px;font-weight:600;color:var(--muted)}
@media (max-height:700px){.chip-dark#randomChip{display:none}}

/* ---------- Pairs ---------- */
.bond{display:inline-grid;place-items:center;flex-shrink:0}
.bond svg{width:18px;height:18px}
.pair-chip{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 4px;margin-top:4px;border:2px solid var(--ink);border-radius:999px;
  background:rgba(255,247,230,.92);font-size:14px;font-weight:700;white-space:nowrap}
.pair-chip img{width:26px;height:26px}
.pair-chip b{font-weight:800}
.pick-pair{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:14px;font-weight:700;color:var(--muted)}
.pick-pair img{width:20px;height:20px}
.panel-head .pick-pair b{display:inline;font-size:14px;font-weight:800;line-height:1.2}
.tile .tile-bond{position:absolute;top:-8px;left:-6px;width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);display:grid;place-items:center}
.tile .tile-bond svg{width:18px;height:18px}
.pair-line{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:-6px;font-size:15px;font-weight:700;color:var(--ink);text-align:center;line-height:1.2}
.pair-line svg{width:18px;height:18px;flex-shrink:0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;margin-bottom:10px;border:2px solid var(--line);border-radius:14px;background:#fff}
.seg button{min-height:40px;border:0;border-radius:10px;background:none;font-size:15px;font-weight:800;color:var(--muted);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--paper-2);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pairs{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.prow{display:flex;align-items:center;gap:8px;min-height:60px;padding:4px 12px 4px 4px;border:2px solid var(--line);border-radius:16px;background:var(--paper-2)}
.prow.me{background:var(--sun);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.prow .pos{width:28px;flex-shrink:0;text-align:center;font-size:17px;font-weight:800;color:#4A3628}
.prow .duo{display:flex;flex-shrink:0}
.prow .duo img,.prow .duo .ini{width:40px;height:40px}
.prow .duo>*+*{margin-left:-12px}
.prow .duo .ini{font-size:16px}
.prow .pt{flex:1;min-width:0}
.prow .pt b{display:block;font-size:17px;font-weight:800;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .pt small{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--muted)}
.prow .pt small svg{width:15px;height:15px}
.prow .ps{text-align:right}
.prow .ps b{display:block;font-size:20px;font-weight:800;line-height:1}
.prow .ps small{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.pair-chip{cursor:pointer;color:var(--ink);font-family:inherit;box-shadow:0 3px 0 var(--ink)}
.pair-chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.hero-q{display:grid;place-items:center;width:clamp(88px,20dvh,176px);height:clamp(88px,20dvh,176px);border-radius:50%;border:4px dashed var(--ink);
  background:rgba(255,247,230,.75);font-size:clamp(48px,10dvh,96px);font-weight:800;color:var(--ink);animation:bob 1.6s ease-in-out infinite}
.sheet-title{display:block;font-size:28px;font-weight:800;line-height:1.1}
.sheet-text{margin:4px 0 0;font-size:16px;font-weight:600;color:var(--muted);line-height:1.3}
.row2.single{grid-template-columns:1fr}
@media (max-height:640px){.pair-chip{display:none}}

/* ---------- Crew features: goal, duels, hall of fame, badges, news ---------- */
.chip-btn{cursor:pointer;font-family:inherit;color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.chip-btn:active{transform:translateY(2px);box-shadow:none}
.chip-bar{display:block;width:44px;height:8px;border:2px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden;flex-shrink:0}
.chip-bar i{display:block;height:100%;background:var(--ok-line)}
.news{flex-direction:column;align-items:stretch;gap:6px}
.news-row{display:flex;align-items:center;gap:8px}
.news-row+.news-row{padding-top:6px;border-top:2px solid rgba(255,255,255,.35)}
.sec-title{margin:16px 0 8px;font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sec-title:first-child{margin-top:4px}
.goal{padding:12px 14px;border:2.5px solid var(--ink);border-radius:18px;background:var(--paper-2)}
.goal-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.goal-top b{font-size:17px;font-weight:800}
.goal-top span{font-size:16px;font-weight:800}
.bar{height:16px;margin:8px 0 6px;border:2.5px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.bar i{display:block;height:100%;background:repeating-linear-gradient(-45deg,#8ACD6B 0 10px,#6FB84A 10px 20px);border-right:2.5px solid var(--ink);box-sizing:border-box}
.goal small{font-size:14px;font-weight:700;color:var(--muted)}
.goal.done{background:var(--ok-bg)}
.duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:10px;margin-bottom:8px;border:2px solid var(--line);border-radius:18px;background:var(--paper-2)}
.duel.mine{border:3px solid var(--ink);background:#FFF2CC;box-shadow:0 3px 0 var(--ink)}
.duel-side{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;text-align:center}
.duel-side .duo{display:flex}
.duel-side .duo img,.duel-side .duo .ini{width:36px;height:36px}
.duel-side .duo>*+*{margin-left:-10px}
.duel-side b{max-width:100%;font-size:14px;font-weight:800;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duel-side strong{font-size:24px;font-weight:800;line-height:1}
.duel-side.win strong{padding:0 8px;border-radius:999px;background:var(--sun);box-shadow:inset 0 0 0 2px var(--ink)}
.vs{font-size:16px;font-weight:800;color:var(--muted)}
.duel-note{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--muted);text-align:center}
.summary-btn{width:100%;margin-top:14px}
.hof{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hof li{padding:8px 12px;border:2px solid var(--line);border-radius:16px;background:var(--paper-2)}
.hof-week{display:block;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.hof-line{display:flex;align-items:center;gap:8px;min-height:36px;font-size:16px;font-weight:700}
.hof-line>img,.hof-line .ini{width:32px;height:32px;font-size:14px}
.hof-line .duo{display:flex}
.hof-line .duo img,.hof-line .duo .ini{width:32px;height:32px}
.hof-line .duo>*+*{margin-left:-10px}
.hof-line .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hof-line .crown{width:24px;height:16px;flex-shrink:0}
.hof-line .bond svg{width:18px;height:18px}
.hof-line b{font-weight:800}
.badge-grid{list-style:none;margin:0;padding:4px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.badge{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:2px dashed #CDB38F;border-radius:18px;background:#fff;text-align:center;color:var(--muted)}
.badge svg{width:46px;height:46px}
.badge b{font-size:16px;font-weight:800;line-height:1.15}
.badge small{font-size:13px;font-weight:600;line-height:1.25}
.badge.got{border:2.5px solid var(--ink);background:var(--paper-2);color:var(--ink);box-shadow:0 3px 0 var(--ink)}

/* Game over: medal stamp and rank-up arrow */
.medal-tag.stamp{animation:stamp .5s cubic-bezier(.2,1.6,.4,1) .35s both}
@keyframes stamp{from{transform:rotate(-12deg) scale(2.2);opacity:0}to{transform:none;opacity:1}}
.rankup{display:inline-flex;align-items:center;gap:4px;padding:0 8px;border-radius:999px;background:#fff;border:2px solid var(--ok);animation:rankup .5s ease-out .5s both}
.rankup svg{width:16px;height:16px}
@keyframes rankup{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* Short screens (e.g. Messenger's browser on small phones): a denser game over card. */
@media (max-height:700px){
  .over-card{gap:9px;padding:14px 14px 14px}
  .over-card.has-ribbon{padding-top:28px}
  .stat b{font-size:40px}
  .over-head{top:calc(var(--safe-t) + 9%)}
  .over-head .over-title{font-size:34px}
  .over-card .rival-line{display:none}
  .btn.big{min-height:62px;font-size:26px}
}

/* ---------- Desktop: phone-sized card in the middle ---------- */
.keys{position:fixed;left:0;right:0;bottom:14px;margin:0;text-align:center;color:#E9D9BF;font-size:14px;font-weight:600;display:none}
kbd{display:inline-block;padding:0 8px;border:2px solid #E9D9BF;border-radius:6px;font:700 13px/1.5 var(--font)}
@media (min-width:700px){
  .shell{height:min(844px,calc(100dvh - 72px));border:4px solid var(--ink);border-radius:32px;box-shadow:0 10px 0 #000,0 30px 60px rgba(0,0,0,.5)}
}
@media (min-width:700px) and (pointer:fine){.keys{display:block}}

/* ---------- Reduced motion: no bobbing, drops, confetti or shakes ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .spinner{animation-duration:2.4s!important;animation-iteration-count:infinite!important}
  .confetti,.ping{display:none}
  .btn.arming::after{animation-duration:.45s!important}
}