:root { --navy:#426b79; --cream:#fff9e7; --yellow:#ffd45e; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; user-select:none; }
html,body { margin:0; width:100%; height:100%; position:fixed; inset:0; overflow:hidden; touch-action:none; overscroll-behavior:none; }
body { font-family:"Comic Sans MS","Segoe Print","Chalkboard SE",sans-serif; background:#acc998; }
button,a { touch-action:none; }
button { font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible { outline:4px solid #f19e8f; outline-offset:3px; }
[hidden] { display:none !important; }
.frame { position:fixed; inset:0; }
.stage { position:absolute; left:50%; top:50%; width:1600px; height:900px; transform-origin:center; overflow:hidden; }
#world { width:1600px; height:900px; display:block; }
.topbar { position:fixed; top:max(10px,env(safe-area-inset-top)); left:max(14px,env(safe-area-inset-left)); right:max(14px,env(safe-area-inset-right)); display:flex; justify-content:space-between; z-index:20; pointer-events:none; }
.topbuttons { display:flex; gap:6px; }
.round,.pill { pointer-events:auto; border:0; color:#fff; background:#426b79f5; box-shadow:0 4px 0 #304f6130,0 5px 12px #334e4720; }
.pill { display:grid; place-items:center; min-height:64px; min-width:64px; padding:0 22px; border-radius:999px; text-decoration:none; font-size:19px; background:rgba(31,79,143,.92); }
.round { width:64px; height:64px; min-width:64px; min-height:64px; flex:none; border-radius:50%; display:grid; place-items:center; padding:5px; position:relative; }
.round img { width:54px; height:54px; object-fit:contain; pointer-events:none; }
.round[aria-pressed="true"],.round[aria-expanded="true"] { outline:4px solid var(--yellow); outline-offset:-4px; background:#5a8287; }
.round.hinted::after { content:""; position:absolute; inset:-5px; border:4px solid var(--yellow); border-radius:50%; animation:glow 1.5s ease-in-out infinite; }
.badge { position:absolute; top:0; right:0; width:19px; height:19px; border:3px solid var(--cream); background:var(--yellow); border-radius:50%; pointer-events:none; }
.camera-controls { position:fixed; left:max(10px,env(safe-area-inset-left)); bottom:max(10px,env(safe-area-inset-bottom)); z-index:20; display:grid; grid-template-columns:64px 64px; gap:6px; }
.camera-controls .home { grid-column:1 / 3; }
.vehicle-bar { position:fixed; left:max(155px,calc(env(safe-area-inset-left) + 145px)); right:max(10px,env(safe-area-inset-right)); bottom:max(10px,env(safe-area-inset-bottom)); z-index:20; display:flex; justify-content:center; align-items:center; gap:4px; pointer-events:none; }
.vehicle-bar .round { background:var(--cream); border:2px solid #d7dcc0; }
.vehicle-bar .round[aria-pressed="true"] { background:var(--yellow); border-color:#76988b; }
.vehicle-bar .round.locked img { filter:grayscale(1); opacity:.35; }
.vehicle-bar .round.locked::after { content:"?"; position:absolute; color:#687c73; font-size:25px; font-weight:bold; }
.vehicle-bar .pager { background:#547b82; }
#ribbon { position:fixed; top:82px; left:50%; transform:translateX(-50%); display:flex; padding:4px 10px; border-radius:22px; background:#fff9e7e8; gap:6px; z-index:18; pointer-events:none; box-shadow:0 3px 6px #54785620; }
#ribbon:empty { display:none; }
.step { width:32px; height:32px; border-radius:50%; opacity:.35; }
.step.current { opacity:1; background:var(--yellow); box-shadow:0 0 0 3px #f2c873; }
.step.done { opacity:.9; background:#bfdbb3; }
.step img { width:32px; height:32px; }
#choices { position:fixed; left:50%; top:calc(50% + 20px); transform:translateX(-50%); display:flex; gap:12px; z-index:22; padding:8px 14px; border-radius:50px; background:#fff9e7f5; box-shadow:0 6px 16px #47634b30; }
.swatch { border:5px solid #fff9e7; box-shadow:0 0 0 2px #8ba499; }
.swatch img { width:42px; height:42px; }
.overlay { position:fixed; inset:0; z-index:40; display:grid; place-items:center; background:#355b6a4d; }
.panel { width:min(636px,calc(100vw - 24px)); max-height:calc(100dvh - 20px); padding:12px; display:flex; flex-direction:column; align-items:center; gap:9px; border-radius:26px; border:3px solid #dfd9b6; background:var(--cream); box-shadow:0 14px 42px #304e5140; }
.panel-head,.panel-foot,.tabs { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; }
.panel-head { justify-content:space-between; }
.panel-head .tabs { width:auto; }
.panel-head .round,.panel-foot .round { background:#70968e; }
.panel-head .round.selected { background:var(--yellow); border:3px solid #839d82; }
.panel-grid { display:grid; grid-template-columns:repeat(6,80px); grid-template-rows:repeat(2,80px); gap:6px; justify-content:center; width:100%; }
.picture { width:80px; height:80px; padding:4px; border:2px solid #e4dfc5; background:#fffdf4; border-radius:17px; position:relative; display:grid; place-items:center; }
.picture img { width:68px; height:68px; object-fit:contain; pointer-events:none; }
.picture.unfound img { filter:brightness(.3) grayscale(1); opacity:.22; }
.picture.gold { border:4px solid #e9c667; background:#fff0ad; }
.picture.pop img { animation:jiggle .4s ease; }
.cards { display:flex; gap:8px; justify-content:center; width:100%; height:207px; align-items:center; }
.job-card { width:137px; height:200px; min-height:96px; border:3px solid #dbcfae; border-radius:23px; background:#fffdf4; padding:8px; display:flex; flex-direction:column; align-items:center; justify-content:space-around; position:relative; }
.job-card .portrait { width:48px; height:54px; object-fit:contain; align-self:flex-start; }
.job-card .building { width:112px; height:105px; object-fit:contain; margin-top:-18px; }
.job-card .zone { width:38px; height:38px; position:absolute; right:7px; top:8px; }
.rewards { display:flex; gap:0; }
.rewards img { width:25px; height:25px; }
.ring { background:conic-gradient(var(--yellow) var(--progress,0%),#edf0d5 0) !important; padding:5px; }
.ring::before { content:""; position:absolute; inset:6px; border-radius:50%; background:#6f958b; }
.ring img { z-index:1; }
.hold { background:conic-gradient(#eaba82 var(--hold,0%),#9bb4a6 0) !important; }
.hold img { background:#78998f; border-radius:50%; padding:7px; }
.bin-target { position:fixed; right:12px; top:calc(50% - 32px); z-index:30; background:#e8b794; }
.rotate { display:none; position:fixed; inset:0; z-index:100; place-items:center; text-align:center; padding:28px; color:#fff; background:#1a2a44; font-size:clamp(20px,6vw,32px); }
@keyframes glow { 50% { opacity:.35; transform:scale(1.05); } }
@keyframes jiggle { 30% { transform:rotate(-7deg) scale(1.06); } 70% { transform:rotate(5deg); } }
@media (min-height:600px) { #ribbon { top:92px; } .panel { padding:18px; gap:16px; } }
@media (orientation:portrait) { .rotate { display:grid; } .frame,.topbar,.camera-controls,.vehicle-bar,#ribbon,#choices,.overlay,.bin-target { display:none !important; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }