/* The Padel Passport · Adventure. Rally Crew palette. */
:root{
  --sun:#FFCB2E;--court:#1E4FD8;--glass:#CFF1F4;--tomato:#FF5A4E;--ink:#10204A;--paper:#F5F8FF;--cream:#FFF0CC;--green:#1FA36B;--violet:#8C73F2;
  --display:'Grandstander',Figtree,system-ui,sans-serif;--body:'Figtree',system-ui,sans-serif;--talk:'Shantell Sans','Figtree',system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#80BC70;color:var(--ink);font-family:var(--body);overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
body{touch-action:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}
.app{position:fixed;inset:0}
.world{position:absolute;inset:0;width:100%;height:100%;display:block}
:focus-visible{outline:3px solid var(--court);outline-offset:3px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:3px solid var(--ink);border-radius:16px;padding:12px 20px;font:800 17px/1 var(--body);background:#fff;box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s;min-height:48px;text-decoration:none;color:var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn-sun{background:var(--sun)}.btn-blue{background:var(--court);color:#fff}.btn-tomato{background:var(--tomato);color:#fff}.btn-ghost{background:transparent;box-shadow:none;border-color:transparent;text-decoration:underline;min-height:40px;padding:8px 12px;font-weight:700}
.btn.big{font:900 22px/1 var(--display);padding:16px 28px;border-radius:20px}
.linkish{background:none;border:0;padding:6px;text-decoration:underline;font-weight:700}

/* ---------- HUD ---------- */
.hud{position:absolute;left:10px;right:10px;top:calc(8px + var(--safe-t));display:flex;align-items:center;gap:8px;pointer-events:none;z-index:5}
.hud>*{pointer-events:auto}
.hud-me{display:flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:3px 12px 3px 3px;box-shadow:0 3px 0 var(--ink)}
.hud-ava{position:relative;width:38px;height:38px;border-radius:50%;background:var(--glass);border:2px solid var(--ink);overflow:hidden}
.hud-ava svg{position:absolute;left:50%;top:-1px;transform:translateX(-50%);width:44px;height:62px}
.hud-lv{display:flex;flex-direction:column;align-items:flex-start;gap:3px;font:800 13px/1 var(--body)}
.hud-lvl b{font:900 16px/1 var(--display)}
.xp{display:block;width:54px;height:7px;border-radius:9px;background:#E3E9F6;border:2px solid var(--ink);overflow:hidden}
.xp i{display:block;height:100%;width:0;background:var(--green);transition:width .5s}
.hud-pips{display:flex;align-items:center;gap:6px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:5px 12px 5px 5px;box-shadow:0 3px 0 var(--ink);font:900 18px/1 var(--display)}
.coin{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF3A8,var(--sun) 55%,#E29E00);border:2px solid var(--ink);display:grid;place-items:center;font:900 13px/1 var(--display)}
.hud-pips.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.18)}}
.hud-badges{display:flex;gap:4px;margin-left:auto}
.badge-slot{width:40px;height:44px;display:grid;place-items:center;background:rgba(255,255,255,.85);border:3px dashed rgba(16,32,74,.45);border-radius:12px;font:900 11px/1 var(--display);color:rgba(16,32,74,.55)}
.badge-slot.got{border:3px solid var(--ink);background:var(--court);box-shadow:0 3px 0 var(--ink)}
.badge-slot canvas{width:28px;height:35px}
.hud-menu{width:48px;height:48px;border-radius:16px;border:3px solid var(--ink);background:var(--sun);box-shadow:0 3px 0 var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.hud-menu span{display:block;width:20px;height:3px;border-radius:3px;background:var(--ink)}
.place{position:absolute;left:50%;top:calc(66px + var(--safe-t));transform:translateX(-50%);margin:0;background:var(--ink);color:#fff;font:800 14px/1.2 var(--body);padding:8px 14px;border-radius:999px;white-space:nowrap;z-index:4;animation:drop .35s ease-out;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.place b{color:var(--sun)}
@keyframes drop{from{transform:translate(-50%,-14px);opacity:0}}
.tracker{position:absolute;left:10px;top:calc(110px + var(--safe-t));width:min(300px,calc(100% - 20px));background:rgba(255,255,255,.94);border:3px solid var(--ink);border-radius:16px;padding:8px 12px 10px;z-index:4;box-shadow:0 3px 0 var(--ink);font-size:14px}
.tracker h3{margin:0 0 4px;font:900 14px/1.2 var(--display);display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer}
.tracker h3 small{font:800 12px var(--body);background:var(--sun);border:2px solid var(--ink);border-radius:999px;padding:1px 8px}
.tracker ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.tracker li{display:flex;gap:7px;align-items:flex-start;line-height:1.25;font-weight:600}
.tracker li i{flex:none;width:16px;height:16px;margin-top:1px;border:2px solid var(--ink);border-radius:5px;background:#fff}
.tracker li.done{opacity:.6;text-decoration:line-through}
.tracker li.done i{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.2 2.2L9.5 3.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%}
.tracker li.boss i{background:var(--tomato);border-radius:50%}
.tracker.min ul{display:none}
.tracker li.later{display:none}
.tracker.open li.later{display:flex}
@media (min-width:700px){.tracker li.later{display:flex}}
.tracker .more{font:700 12px var(--body);opacity:.7;margin-top:2px}
@media (min-width:700px){.tracker .more{display:none}}
.tracker.open .more{display:none}
@media (max-width:699px){.tracker{width:auto;max-width:calc(100% - 20px);font-size:13px;padding:6px 10px 8px;top:calc(68px + var(--safe-t))}.tracker h3{font-size:13px}}
.tracker.flash{animation:flash .9s}
@keyframes flash{30%{background:var(--sun)}}

/* ---------- controls ---------- */
.stick{position:absolute;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:3px solid rgba(16,32,74,.55);background:rgba(255,255,255,.28);z-index:3;pointer-events:none;opacity:0;transition:opacity .12s}
.stick.on{opacity:1}
.stick .knob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:var(--sun);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.act{position:absolute;right:18px;bottom:calc(26px + var(--safe-b));width:92px;height:92px;border-radius:50%;border:4px solid var(--ink);background:var(--sun);box-shadow:0 5px 0 var(--ink);font:900 18px/1 var(--display);z-index:5;display:grid;place-items:center;transition:transform .08s,background .15s}
.act:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.act.idle{background:#fff;opacity:.85}
.act.ping{animation:ping 1.2s infinite}
@keyframes ping{50%{box-shadow:0 5px 0 var(--ink),0 0 0 10px rgba(255,203,46,.45)}}
.keys-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;background:rgba(16,32,74,.85);color:#fff;font:700 13px var(--body);padding:8px 14px;border-radius:999px;z-index:3;white-space:nowrap}

/* ---------- dialogue ---------- */
.dialog{position:absolute;left:10px;right:10px;bottom:calc(10px + var(--safe-b));max-width:720px;margin:0 auto;display:flex;gap:12px;align-items:flex-start;background:#fff;border:4px solid var(--ink);border-radius:22px;padding:12px 14px 14px;box-shadow:0 6px 0 var(--ink);z-index:8;animation:up .22s ease-out;cursor:pointer;min-height:130px}
@keyframes up{from{transform:translateY(24px);opacity:0}}
.dlg-portrait{flex:none;width:76px;height:86px;border-radius:16px;background:var(--glass);border:3px solid var(--ink);overflow:hidden;display:grid;place-items:end center}
.dlg-portrait canvas{width:76px;height:86px}
.dlg-body{flex:1;min-width:0;position:relative}
.dlg-name{margin:0 0 4px;font:900 17px/1.1 var(--display);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dlg-name .cpu{font:800 11px/1 var(--body);background:var(--ink);color:#fff;border-radius:999px;padding:3px 8px;letter-spacing:.02em}
.dlg-text{margin:0;font:600 17px/1.4 var(--talk);min-height:48px}
.dlg-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dlg-choices .btn{min-height:44px;padding:10px 16px;font-size:16px}
.dlg-more{position:absolute;right:0;bottom:-6px;font-size:18px;animation:nudge .8s infinite}
.dlg-skip{position:absolute;right:12px;top:-24px;min-width:64px;min-height:44px;padding:0 14px;border:3px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:900 15px/1 var(--display);box-shadow:0 3px 0 var(--ink);cursor:pointer}
.dlg-skip[hidden]{display:none}
@keyframes nudge{50%{transform:translateY(3px)}}

/* ---------- sheets (battle card, results, shop) ---------- */
.sheet{position:absolute;inset:0;z-index:9;background:rgba(16,32,74,.55);display:grid;place-items:end center;padding:12px 12px calc(12px + var(--safe-b));animation:fadein .2s}
@keyframes fadein{from{opacity:0}}
.card{width:min(460px,100%);background:#fff;border:4px solid var(--ink);border-radius:26px;box-shadow:0 8px 0 var(--ink);padding:18px 18px 16px;animation:up .25s ease-out;max-height:calc(100dvh - 30px);overflow:auto}
.card .eyebrow{margin:0 0 4px}
.eyebrow{font:800 12px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--court)}
.card h2{margin:0 0 6px;font:900 28px/1.05 var(--display)}
.card h2 span{color:var(--tomato)}
.card p{margin:6px 0;line-height:1.45}
.vs{display:flex;align-items:center;gap:14px;margin:6px 0 10px}
.vs canvas{flex:none;width:96px;height:104px;border-radius:18px;border:3px solid var(--ink);background:var(--glass)}
.vs.boss canvas{background:#232C66}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{font:800 12px/1 var(--body);border:2px solid var(--ink);border-radius:999px;padding:5px 9px;background:var(--paper)}
.chip.cpu{background:var(--ink);color:#fff}
.chip.diff-rookie{background:#DDF7E8}.chip.diff-club{background:#FFF3B0}.chip.diff-pro{background:#FFD9D5}
.sig{font:600 15px/1.35 var(--talk);background:var(--cream);border:2px solid var(--ink);border-radius:14px;padding:8px 12px;margin:8px 0}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.row .btn{flex:1 1 auto}
.handoff{margin-top:10px;font-size:13px;color:#3A4A7A;border-top:2px dashed #C9D3EA;padding-top:10px}
.handoff a{color:var(--court);font-weight:800}
.reward{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.reward span{font:900 16px/1 var(--display);background:var(--sun);border:2px solid var(--ink);border-radius:999px;padding:7px 12px}
.reward span.rw-xp{background:#DDF7E8}
.score{font:900 46px/1 var(--display);margin:4px 0;letter-spacing:-.02em}
.shop-list{display:grid;gap:8px;margin:10px 0}
.shop-item{display:flex;align-items:center;gap:12px;border:3px solid var(--ink);border-radius:16px;padding:10px 12px;background:var(--paper)}
.shop-item i{flex:none;width:34px;height:14px;border-radius:9px;border:2px solid var(--ink)}
.shop-item div{flex:1}
.shop-item b{display:block;font:900 16px/1.1 var(--display)}
.shop-item small{font-size:13px}
.shop-item .btn{min-height:40px;padding:8px 12px;font-size:15px}
.badge-big{display:grid;place-items:center;margin:8px auto 4px}
.badge-big canvas{width:120px;height:150px;animation:slam .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes slam{from{transform:scale(2.4) rotate(-14deg);opacity:0}}

/* ---------- menu ---------- */
.menu{position:absolute;inset:0;z-index:10;background:rgba(16,32,74,.6);display:grid;place-items:center;padding:12px;animation:fadein .2s}
.menu-card{width:min(860px,100%);height:min(720px,calc(100dvh - 24px));background:var(--paper);border:4px solid var(--ink);border-radius:26px;box-shadow:0 8px 0 var(--ink);display:flex;flex-direction:column;overflow:hidden}
.menu-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
.menu-head h2{margin:0;font:900 26px/1 var(--display)}
.x{width:44px;height:44px;border-radius:14px;border:3px solid var(--ink);background:#fff;font:900 24px/1 var(--display);box-shadow:0 3px 0 var(--ink)}
.tabs{display:flex;gap:6px;padding:4px 12px 10px;overflow-x:auto}
.tabs button{flex:none;border:3px solid var(--ink);background:#fff;border-radius:999px;padding:8px 12px;font:800 14px var(--body);min-height:44px}
.tabs button[aria-selected=true]{background:var(--sun);box-shadow:0 3px 0 var(--ink)}
.tab-body{flex:1;overflow:auto;padding:4px 14px 18px;touch-action:pan-y;user-select:text}
.dex-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin:4px 0 10px}
.dex-head p{margin:0;font-weight:700}
.dex-head b{font:900 22px var(--display)}
.dex{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.dex-card{position:relative;border:3px solid var(--ink);border-radius:18px;background:#fff;padding:8px 8px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.dex-card.locked{background:#E8EEFA}
.dex-card.on{box-shadow:0 0 0 4px var(--sun),0 4px 0 var(--ink)}
.dex-card .fig{width:76px;height:96px;display:grid;place-items:center}
.dex-card .fig svg{width:72px;height:100px}
.dex-card b{font:900 15px/1.1 var(--display)}
.dex-card small{font-size:11.5px;line-height:1.3;color:#3A4A7A}
.dex-card .rar{position:absolute;top:6px;left:6px;font:800 10px/1 var(--body);text-transform:uppercase;border-radius:999px;padding:3px 6px;border:2px solid var(--ink);background:#fff}
.rar.common{background:#DCE6FF}.rar.rare{background:#DDF7E8}.rar.epic{background:#EAE2FF}.rar.legendary{background:#FFF3B0}
.dex-card .num{position:absolute;top:6px;right:8px;font:800 11px var(--body);opacity:.6}
.dex-card button{margin-top:4px;min-height:36px;padding:6px 10px;font-size:13px;border-radius:12px}
.mlist{display:grid;gap:10px}
.mitem{border:3px solid var(--ink);border-radius:18px;background:#fff;padding:12px 14px}
.mitem h3{margin:0 0 4px;font:900 18px/1.1 var(--display);display:flex;gap:8px;align-items:center;justify-content:space-between}
.mitem p{margin:0;line-height:1.4}
.mitem .st{font:800 12px var(--body);border:2px solid var(--ink);border-radius:999px;padding:3px 9px;background:var(--paper);white-space:nowrap}
.mitem.done .st{background:var(--green);color:#fff}
.mitem.active .st{background:var(--sun)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bcard{border:3px solid var(--ink);border-radius:18px;background:#fff;padding:12px;text-align:center}
.bcard.locked{background:#E8EEFA;opacity:.85}
.bcard canvas{width:60px;height:75px}
.bcard b{display:block;font:900 17px var(--display)}
.bcard small{display:block;font-size:13px;line-height:1.35;margin-top:2px}
.set{display:grid;gap:12px;max-width:560px}
.set .box{border:3px solid var(--ink);border-radius:18px;background:#fff;padding:12px 14px}
.set h3{margin:0 0 6px;font:900 18px var(--display)}
.set p{margin:4px 0;line-height:1.45}
.set kbd{font:800 12px var(--body);border:2px solid var(--ink);border-bottom-width:3px;border-radius:7px;padding:1px 6px;background:var(--paper)}

/* ---------- start ---------- */
.start{position:absolute;inset:0;z-index:12;background:var(--sun);overflow:auto;touch-action:pan-y;display:flex;flex-direction:column;align-items:center}
.start-sky{position:absolute;left:0;right:0;bottom:0;height:34vh;height:34svh;pointer-events:none;opacity:.9}
.start-sky canvas{width:100%;height:100%;display:block}
.start-card{position:relative;width:min(640px,100%);padding:calc(26px + var(--safe-t)) calc(18px + var(--safe-r)) 30vh calc(18px + var(--safe-l));padding-bottom:30svh;text-align:center}
.start h1{font:900 clamp(38px,9vw,64px)/.98 var(--display);margin:6px 0 10px;letter-spacing:-.01em}
.start h1 span{color:var(--court)}
.start-sub{font:600 17px/1.45 var(--body);max-width:520px;margin:0 auto 16px}
.pick{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 18px}
.pick button{width:124px;border:3px solid var(--ink);border-radius:20px;background:#fff;padding:8px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 4px 0 var(--ink);transition:transform .1s}
.pick button[aria-checked=true]{background:var(--glass);transform:translateY(-4px);box-shadow:0 8px 0 var(--ink)}
.pick .fig{width:84px;height:100px;display:grid;place-items:center}
.pick .fig svg{width:78px;height:108px}
.pick b{font:900 17px/1.1 var(--display)}
.pick small{font-size:12px;line-height:1.25;color:#3A4A7A}
.fine{font-size:13px;margin-top:12px;opacity:.85}
#startHome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
#startHome h1{font-size:clamp(56px,min(16vw,10vh),96px);margin:4px 0 12px}
#startHome .start-sub{margin-bottom:26px}
.start-play{width:min(320px,100%);min-height:68px;font-size:30px;background:var(--court);color:#fff}
.pick-h{font:900 clamp(32px,8vw,48px)/1 var(--display);margin:6px 0 16px}
#startPick .start-play{display:flex;margin:0 auto 6px}
.modes{width:min(340px,100%);margin-top:30px}
.modes-l{font:800 12px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;opacity:.8}
.modes-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.modes-row a{min-height:48px;display:flex;align-items:center;justify-content:center;padding:0 6px;border:2px solid var(--ink);border-radius:14px;background:rgba(255,255,255,.75);color:var(--ink);font:800 16px/1 var(--body);text-decoration:none;touch-action:manipulation}
.modes-row a[aria-current=page]{background:var(--ink);color:#fff}
.modes-row a:active{transform:translateY(2px)}

.toast{position:absolute;left:50%;top:calc(66px + var(--safe-t));transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:16px;padding:10px 16px;font:800 15px/1.3 var(--body);z-index:11;max-width:calc(100% - 24px);text-align:center;box-shadow:0 4px 0 rgba(16,32,74,.3);animation:drop .3s ease-out}
.toast b{color:var(--sun)}
.fade{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none;z-index:13;transition:opacity .22s}
.fade.on{opacity:1}

/* ---------- quick rally ---------- */
.rally{position:fixed;inset:0;z-index:20;background:#BFE7FF;touch-action:none}
.rally-cv{position:absolute;inset:0;display:block}
.rally-hud{position:absolute;top:calc(10px + var(--safe-t));left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}
.rh-side{display:flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px 6px 4px 12px;box-shadow:0 3px 0 var(--ink);min-width:0}
.rh-side.them{padding:4px 12px 4px 6px}
.rh-name{font:800 14px/1 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30vw}
.rh-side.me{flex:none}
.rh-pts{font:900 24px/1 var(--display);background:var(--sun);border:2px solid var(--ink);border-radius:12px;min-width:36px;text-align:center;padding:3px 6px}
.rh-mid{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.rh-fmt{font:900 15px/1 var(--display);background:var(--ink);color:var(--sun);border-radius:999px;padding:6px 12px;white-space:nowrap}
.rh-to{font:800 10px/1 var(--body);white-space:nowrap;color:#fff;background:rgba(16,32,74,.75);border-radius:999px;padding:3px 8px}
.rh-to:empty{display:none}
.rally-hint{position:absolute;left:50%;top:calc(64px + var(--safe-t));transform:translateX(-50%);margin:0;font:800 15px var(--body);background:rgba(255,255,255,.92);border:2px solid var(--ink);border-radius:999px;padding:6px 14px;white-space:nowrap;pointer-events:none}
.rally-hint:empty{display:none}
.rally-shots{position:absolute;left:8px;right:8px;bottom:calc(10px + var(--safe-b));display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:620px;margin:0 auto}
.rally-shots button{border:3px solid var(--ink);border-radius:16px;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:0 4px 0 var(--ink);min-height:64px;touch-action:none}
.rally-shots button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.rally-shots b{font:900 16px/1 var(--display)}
.rally-shots small{font:700 11px/1 var(--body);opacity:.8}
.sh-drive{background:var(--sun)}.sh-lob{background:var(--glass)}.sh-over{background:#FFC2BC}.sh-chiq{background:#fff}

@media (min-width:900px){
  .hud{left:18px;right:18px;top:16px}
  .tracker{left:18px;top:84px}
  .place{top:22px}
  .dialog{bottom:24px}
  .sheet{place-items:center}
}
@media (pointer:coarse){.keys-hint{display:none!important}}
@media (hover:hover) and (pointer:fine){.act{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

@media (max-width:699px){
  .toast{top:auto;bottom:calc(132px + var(--safe-b))}
  .place{top:auto;bottom:calc(132px + var(--safe-b));left:16px;transform:none;max-width:calc(100% - 140px);animation:dropb .35s ease-out}
  @keyframes dropb{from{transform:translateY(14px);opacity:0}}
}

.toast,.place,.keys-hint{pointer-events:none}

/* ===================== A+ build additions ===================== */
.hud-badges{border:0;background:none;padding:0;display:flex;gap:3px;margin-left:auto;cursor:pointer}
.hud-badges .badge-slot{width:30px;height:36px;font-size:9px;border-radius:10px}
.hud-badges .badge-slot canvas{width:24px;height:30px}
@media (max-width:420px){.hud-badges .badge-slot{width:24px;height:30px;font-size:8px;border-width:2px}.hud-badges .badge-slot canvas{width:20px;height:25px}.hud-me{padding-right:8px}.xp{width:40px}}
.hud-me.lvl{animation:lvl .9s}
@keyframes lvl{30%{transform:scale(1.12);box-shadow:0 0 0 8px rgba(31,163,107,.45),0 3px 0 var(--ink)}}
.tracker h3{justify-content:flex-start}
.tq-kind{font:800 10px/1 var(--body);text-transform:uppercase;letter-spacing:.06em;border:2px solid var(--ink);border-radius:999px;padding:3px 6px;background:var(--sun);flex:none}
.tq-kind.side{background:var(--glass)}
.tq-hint{margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);background:var(--sun);font:900 15px/1 var(--display);box-shadow:0 2px 0 var(--ink)}
.tracker li span{min-width:0}
.saved{position:absolute;right:14px;top:calc(64px + var(--safe-t));margin:0;font:800 12px var(--body);background:rgba(16,32,74,.85);color:#fff;border-radius:999px;padding:4px 10px;z-index:4;pointer-events:none}
.saved.on{animation:fadeout 1.6s forwards}
@keyframes fadeout{0%,60%{opacity:1}100%{opacity:0}}
.pip-bubble{position:absolute;z-index:6;max-width:min(300px,calc(100vw - 20px));background:#fff;border:3px solid var(--ink);border-radius:16px;padding:8px 12px;font:600 15px/1.35 var(--talk);box-shadow:0 4px 0 var(--ink);pointer-events:none;animation:pop .3s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.stamp-fx{position:absolute;left:50%;top:38%;z-index:12;pointer-events:none;transform:translate(-50%,-50%)}
.stamp-fx.on .sf-ring{animation:stampin .55s cubic-bezier(.2,1.6,.4,1)}
.sf-ring{display:grid;place-items:center;text-align:center;width:180px;height:180px;border-radius:50%;border:6px double var(--tomato);color:var(--tomato);background:rgba(255,255,255,.92);transform:rotate(-12deg);box-shadow:0 6px 0 rgba(16,32,74,.25)}
.sf-ring b{font:900 22px/1 var(--display);display:block;padding:0 14px}
.sf-ring small{font:800 12px var(--body);display:block;margin-top:4px}
@keyframes stampin{from{transform:scale(2.6) rotate(-30deg);opacity:0}}
.ghost{position:absolute;left:50%;bottom:30%;z-index:4;pointer-events:none;text-align:center;transform:translateX(-50%)}
.ghost .hand{display:block;width:46px;height:46px;margin:0 auto 8px;border-radius:50%;background:rgba(255,255,255,.8);border:3px solid var(--ink);animation:drag 1.6s ease-in-out infinite}
.ghost-t,.ghost-k{font:800 15px var(--body);background:var(--ink);color:#fff;border-radius:999px;padding:6px 12px}
.ghost .ghost-k{display:none}.ghost.kb .ghost-k{display:inline}.ghost.kb .ghost-t,.ghost.kb .hand{display:none}
@keyframes drag{0%,100%{transform:translate(-30px,0)}50%{transform:translate(30px,-16px)}}
.dialog.narr .dlg-portrait{display:none}
.dialog.narr .dlg-text{font-style:italic}

.card.center{text-align:center}.card.center .row{justify-content:center}
.card.wide{width:min(860px,100%)}
.rev-fig,.evo span{display:inline-grid;place-items:center}
.rev-fig svg{width:120px;height:170px}
.evo{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0}
.evo svg{width:90px;height:128px}.evo-arrow{font:900 32px var(--display)}
.evolve .evo-b{animation:pop .7s .2s both}
.chip.warn{background:#FFD9D5}
.tip{font-size:14px;background:var(--paper);border:2px dashed #C9D3EA;border-radius:12px;padding:8px 10px}
.reward span.rw-lv{background:var(--green);color:#fff}
.si-fig{flex:none;width:40px;height:56px;display:grid;place-items:center}.si-fig svg{width:40px;height:56px}

/* region map */
.region{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:640px){.region{grid-template-columns:1fr}}
.region-map{background:#BFE7FF;border:3px solid var(--ink);border-radius:20px;padding:6px;max-height:60vh;max-height:60dvh;display:grid;place-items:center}
.uk{width:100%;max-height:56vh;max-height:56dvh;height:auto}
.uk .land{fill:#9BD38A;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.uk .leg{fill:none;stroke:var(--ink);stroke-width:3;stroke-dasharray:6 6;opacity:.55}
.uk .leg.done{stroke:var(--tomato);stroke-dasharray:none;opacity:1}
.uk .legn rect{fill:#fff;stroke:var(--ink);stroke-width:2}.uk .legn text{font:800 11px Figtree,sans-serif;text-anchor:middle;fill:var(--ink)}
.uk .city circle{stroke:var(--ink);stroke-width:3}.uk .city .cn{font:900 15px Grandstander,Figtree,sans-serif;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:4px}
.uk .city .star{font:900 13px sans-serif;fill:#fff;text-anchor:middle}
.uk .city.here circle{stroke:var(--tomato);stroke-width:5}
.uk .city.can{cursor:pointer}.uk .city.can circle{fill:var(--sun)!important;animation:pulse 1.2s infinite}
@keyframes pulse{50%{stroke-width:6}}
.region-side h3{margin:2px 0 4px;font:900 24px var(--display)}
.region-side .next{background:var(--cream);border:2px solid var(--ink);border-radius:14px;padding:8px 12px}
.clist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.clist li{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:14px;padding:6px 10px;background:#fff;flex-wrap:wrap}
.clist li b{font:900 15px var(--display)}.clist li span{font-size:12px;flex:1}
.clist li.got{background:#DDF7E8}.clist li .btn{min-height:36px;padding:6px 12px;font-size:14px}

/* bag, skills, passport */
.bag-hero{display:flex;gap:14px;align-items:center;border:3px solid var(--ink);border-radius:20px;background:#fff;padding:10px 14px;margin-bottom:12px}
.bag-hero .fig svg{width:90px;height:128px}.bag-hero h3{margin:0;font:900 22px var(--display)}.bag-hero h3 small{font:800 14px var(--body);background:var(--sun);border:2px solid var(--ink);border-radius:999px;padding:1px 8px}
.bag-hero>div:last-child{flex:1;min-width:0}
.small{font-size:13px;margin:4px 0}
.stat{display:grid;grid-template-columns:62px 1fr 28px;gap:8px;align-items:center;font:700 13px var(--body);margin:3px 0}
.stat i{height:10px;border:2px solid var(--ink);border-radius:9px;background:#E8EEFA;overflow:hidden}.stat i b{display:block;height:100%;background:var(--court)}
.stat em{font-style:normal;font-weight:800}
.skills{display:grid;gap:8px}
.lvbox,.skill{border:3px solid var(--ink);border-radius:16px;background:#fff;padding:10px 12px}
.lvbox h3{margin:0;font:900 26px var(--display)}
.skill{display:grid;grid-template-columns:90px 70px 1fr;gap:4px 10px;align-items:center}
.skill b{font:900 16px var(--display)}.skill span{font:800 12px var(--body)}.skill small{grid-column:1/-1;font-size:12.5px;color:#3A4A7A}
.skill.locked{background:#E8EEFA;opacity:.8}
.xpbar{height:12px;border:2px solid var(--ink);border-radius:9px;background:#E8EEFA;overflow:hidden}.xpbar b{display:block;height:100%;background:var(--green)}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.stamp{border:3px dashed #B9C3DD;border-radius:16px;padding:10px;background:#fff;color:#9AA7BF;text-align:center}
.stamp.got{border:3px double var(--ink);color:var(--ink);background:#fff;transform:rotate(-2deg);box-shadow:inset 0 0 0 3px var(--ink)}
.stamp.got b{color:var(--ink)}
.stamp b{display:block;font:900 15px var(--display)}.stamp small{display:block;font-size:11px;line-height:1.25}.stamp em{display:block;font:800 11px var(--body);margin-top:4px}
.bcard canvas{display:block;margin:0 auto 4px}
.mitem.tracked{box-shadow:0 0 0 4px var(--sun)}
.mitem h3 .btn{min-height:34px;padding:4px 10px;font-size:13px}
.steps{margin:6px 0 0;padding-left:20px;font-size:14px}.steps li.ok{text-decoration:line-through;opacity:.55}.steps li.now{font-weight:800}
.mlist h4,.tab-body h4{font:900 16px var(--display);margin:12px 0 4px}
.drills{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:10px 0}
.drill{position:relative;overflow:hidden;border:3px solid var(--ink);border-radius:14px;background:#fff;padding:10px 10px 14px;text-align:left;box-shadow:0 3px 0 var(--ink)}
.drill b{display:block;font:900 16px var(--display)}.drill small{font-size:12px}
.drill i{position:absolute;left:0;bottom:0;height:5px;background:var(--green)}
.drill.locked{background:#E8EEFA;box-shadow:none;opacity:.75;cursor:default}
.set .rng{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:10px;font-weight:700;margin:6px 0}
.set .chk{display:flex;gap:8px;align-items:center;font-weight:700;margin:6px 0}
.set input[type=range]{accent-color:var(--court)}

/* travel + credits */
.travel{position:absolute;inset:0;z-index:14;background:var(--sun);display:grid;place-items:center;padding:16px;animation:fadein .3s}
.tv-card{width:min(560px,100%);text-align:center}
.tv-card h2{font:900 clamp(30px,8vw,48px)/1 var(--display);margin:6px 0}.tv-card h2 span{color:var(--tomato)}
.tv-card p{font:600 17px/1.4 var(--body)}
.tv-track{position:relative;height:40px;border-bottom:4px solid var(--ink);margin:14px 0}
.tv-train{position:absolute;bottom:2px;left:-60px;width:70px;height:30px;border-radius:12px 18px 6px 6px;background:var(--court);border:3px solid var(--ink);animation:train 2.4s ease-in-out forwards}
.tv-train::after{content:'';position:absolute;left:8px;top:6px;width:44px;height:10px;border-radius:4px;background:var(--glass);box-shadow:inset 0 0 0 2px var(--ink)}
@keyframes train{to{left:calc(100% + 10px)}}
.tv-card canvas{border:3px solid var(--ink);border-radius:18px;margin-top:6px;max-width:100%}
.credits{position:absolute;inset:0;z-index:15;background:var(--ink);color:#fff;overflow:auto;touch-action:pan-y;text-align:center}
.cr-roll{padding:60vh 20px 20vh;padding-block:60svh 20svh;animation:roll 32s linear forwards}
@keyframes roll{to{transform:translateY(-55%)}}
.cr-roll section{margin:0 auto 48px;max-width:520px}
.cr-roll h3{font:900 28px var(--display);color:var(--sun);margin:0 0 8px}
.cr-roll p{margin:4px 0;font:600 16px/1.4 var(--body)}
.cr-end .badge-row{display:flex;justify-content:center;gap:8px;margin-bottom:16px}
.reduce .cr-roll{animation:none;padding-top:40px}

.hud-badges .badge-slot.compact{width:auto;padding:0 8px 0 4px;gap:2px;display:flex;align-items:center;font:900 13px var(--display);color:var(--ink);background:#fff;border-style:solid}
.hud-badges .badge-slot.compact.got{background:#fff}
.hud-badges .badge-slot.compact canvas{width:20px;height:25px}

.keys-hint{transition:opacity .45s,transform .45s;background:var(--ink);box-shadow:0 3px 0 rgba(16,32,74,.3)}
.keys-hint.out{opacity:0;transform:translate(-50%,10px)}

/* ---------- Wave 1: the Net Triangle ---------- */
.fam{display:inline-flex;align-items:center;gap:5px;font:900 11px/1 var(--display);letter-spacing:.04em;border:2px solid var(--ink);border-radius:999px;padding:3px 8px 3px 4px;background:#fff;vertical-align:middle}
.fam i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink)}
.fam-net{background:#FFE3E0}.fam-net i{background:var(--tomato)}
.fam-touch{background:#E2F8E8}.fam-touch i{background:var(--green)}
.fam-glass{background:#E4FAFF}.fam-glass i{background:var(--glass)}
.fam-mixed{background:#F3EEFF}.fam-mixed i{background:linear-gradient(120deg,var(--tomato) 33%,var(--green) 33% 66%,var(--glass) 66%)}
.famline{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:6px 0;font:700 15px/1.3 var(--body)}
.famline b{font:900 15px var(--display)}
.pick .fam{margin:2px 0}
@media (max-width:430px){.pick{gap:6px}.pick button{width:calc((100vw - 54px)/3);padding:6px 4px 8px}.pick .fig{width:64px;height:84px}.pick .fig svg{width:60px;height:84px}.pick b{font-size:15px}.pick small{font-size:11px}}

.fam img{width:16px;height:16px;margin:-2px 0}

.toast{z-index:8}

/* ---------- mobile pass (research/mobile/AUDIT.md) ---------- */
/* notch and rounded corners in landscape: keep the edge furniture inside the safe area */
.hud{left:calc(10px + var(--safe-l));right:calc(10px + var(--safe-r))}
.tracker{left:calc(10px + var(--safe-l))}
.dialog{left:calc(10px + var(--safe-l));right:calc(10px + var(--safe-r))}
.act{right:calc(18px + var(--safe-r))}
.sheet{padding-left:calc(12px + var(--safe-l));padding-right:calc(12px + var(--safe-r))}
.menu{padding:calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l))}
.menu-card{height:min(720px,calc(100dvh - 24px - var(--safe-t) - var(--safe-b)))}
@media (min-width:900px){.hud{left:calc(18px + var(--safe-l));right:calc(18px + var(--safe-r))}.tracker{left:calc(18px + var(--safe-l))}}

/* a fling past the end of a pane stays in the pane */
.tab-body,.card,.start,.credits{overscroll-behavior:contain}
input,select,textarea{font-size:16px}

/* tap-to-move marker: a ring that lands where you tapped */
.tapmark{position:absolute;z-index:3;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid var(--ink);background:rgba(255,203,46,.45);pointer-events:none;opacity:0}
.tapmark.go{animation:tapmark .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes tapmark{0%{transform:scale(.4);opacity:1}100%{transform:scale(1);opacity:.75}}
.stick.run .knob{background:var(--tomato)}
@media (hover:hover) and (pointer:fine){.tapmark{display:none}}

/* hit areas: everything you can tap is at least 44px, without changing how the HUD looks */
.tq-hint,.hud-badges{position:relative}
.tq-hint::after,.hud-badges::after{content:'';position:absolute;inset:-8px}
.hud-badges::after{inset:-7px -4px}
@media (pointer:coarse){
  .tq-hint{width:34px;height:34px;font-size:17px}
  .hud-badges{min-height:44px;align-items:center}
  .btn,.btn-ghost,.linkish,.dex-card button,.clist li .btn,.mitem h3 .btn,.shop-item .btn{min-height:44px}
  .linkish{padding:10px 12px}
  .set .chk{min-height:44px}
  .set .chk input{width:24px;height:24px;margin:0;accent-color:var(--court)}
  .set .rng{min-height:44px}
  .set input[type=range]{height:44px;margin:0}
  /* nothing under 11px on a phone */
  .tq-kind{font-size:11px}
  .fam,.pick small,.dex-card small,.stamp small,.stamp em,.rh-to{font-size:12px}
  .dex-card .rar,.dex-card .num{font-size:11px}
}

/* short landscape phones: the map is the game, so the furniture gets compact */
@media (orientation:landscape) and (max-height:500px){
  .dialog{min-height:0;padding:8px 12px 10px;max-width:640px;bottom:calc(8px + var(--safe-b))}
  .dlg-portrait,.dlg-portrait canvas{width:56px;height:64px}
  .dlg-text{font-size:16px;min-height:0}
  .act{width:72px;height:72px;font-size:15px;bottom:calc(14px + var(--safe-b))}
  .tracker{top:calc(66px + var(--safe-t));width:min(280px,40vw)}
  .tracker:not(.open) li.later,.tracker:not(.open) .more{display:none}
  .start-card{padding-top:calc(14px + var(--safe-t))}
  .card{max-height:calc(100dvh - 24px)}
}
@media (pointer:coarse){.hud-badges .badge-slot{font-size:11px}}

.hud-mute{flex:none;width:44px;height:44px;border-radius:14px;border:3px solid var(--ink);background:#fff;color:var(--ink);box-shadow:0 3px 0 var(--ink);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.hud-mute:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.mute-toggle .off,.mute-toggle.muted .on{display:none}.mute-toggle.muted .off{display:inline}
.hud-mute.muted{background:#E8EEF9}