/* ===== Road Detectives ===== */
#s-title{background:#9fd6ff}
#s-title .splash{object-position:50% 40%}
#s-title .splash-fade{background:linear-gradient(rgba(255,255,255,0) 60%,rgba(30,60,120,.45))}
#s-title .t-title{background:linear-gradient(#4fb3ff,#1d6fd1);color:#fff;text-shadow:0 3px 0 rgba(0,40,100,.35);box-shadow:0 8px 24px rgba(10,40,100,.35),inset 0 -5px 0 rgba(0,0,0,.12)}
#s-title .t-sub{color:#163a6b}
#t-start{position:absolute;bottom:calc(var(--sab) + 44px);left:50%;translate:-50% 0}
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:1}
.sparkles i{position:absolute;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,rgba(255,240,170,.9) 45%,rgba(255,255,255,0) 70%);animation:twinkle 3s ease-in-out infinite;opacity:0}
@keyframes twinkle{50%{opacity:1;transform:scale(1.3)}}
.menu-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:linear-gradient(#ffffff,#e8f5ff);border-radius:22px;padding:16px 8px;box-shadow:0 5px 0 #a9d3f5,0 8px 18px rgba(30,80,140,.15)}
.mode-btn .ico{font-size:40px}.mode-btn .mt{font-size:21px;font-weight:800;color:#1d4f8a}.mode-btn .ms{font-size:14px;color:#456}
.menu-stars{margin-top:12px;font-size:17px;font-weight:700;color:#8a5a00;min-height:1em}
.hero img{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#fff}
.instr-heroes{display:flex;justify-content:center;gap:10px;margin-bottom:6px}
.instr-heroes img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.instr-list{text-align:right;font-size:19px;font-weight:700;line-height:1.7;padding-right:22px;margin:6px 0 16px}
/* game */
#s-game{background:#bfe6ff}
.stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='16' cy='16' r='11' fill='rgba(200,235,255,.35)' stroke='%23b8860b' stroke-width='4'/%3E%3Cline x1='24' y1='24' x2='37' y2='37' stroke='%238b5a2b' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") 16 16,zoom-in}
.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.street{display:block;width:1024px;height:1536px;pointer-events:none;-webkit-user-drag:none}
#fixes .fix{position:absolute;opacity:0;transition:opacity 1s ease;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
#fixes .fix.on{opacity:1}
.spot{position:absolute;border-radius:50%;pointer-events:none}
.spot.found{box-shadow:0 0 0 5px rgba(255,60,60,.95),0 0 30px 12px rgba(255,40,40,.7),inset 0 0 26px rgba(255,60,60,.6);animation:redPulse 1s ease-in-out infinite}
@keyframes redPulse{50%{box-shadow:0 0 0 7px rgba(255,60,60,1),0 0 44px 18px rgba(255,40,40,.75),inset 0 0 30px rgba(255,60,60,.7)}}
.spot.fixed{box-shadow:0 0 0 4px rgba(80,220,110,.95),0 0 26px 8px rgba(80,220,110,.55);animation:none}
.spot.fixed::after{content:"✔";position:absolute;right:-6px;top:-6px;width:30px;height:30px;border-radius:50%;background:#2fbf55;color:#fff;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;border:3px solid #fff}
.spot.hint{animation:hint 2.2s ease-out 1}
@keyframes hint{0%{box-shadow:0 0 0 0 rgba(255,255,255,0)}30%{box-shadow:0 0 0 6px rgba(255,255,255,.9),0 0 34px 14px rgba(255,255,200,.7)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.lens-cur{position:absolute;left:-38px;top:-38px;width:76px;height:76px;pointer-events:none;z-index:6;opacity:0;transition:opacity .15s}
.lens-cur.on{opacity:1}
.lens-cur::before{content:"";position:absolute;inset:0;border-radius:50%;border:6px solid #d9a521;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(190,230,255,.18) 45%,rgba(255,255,255,.05));box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 0 8px rgba(255,255,255,.6)}
.lens-cur::after{content:"";position:absolute;width:14px;height:40px;background:linear-gradient(90deg,#7a4a1c,#b07636,#7a4a1c);border-radius:7px;left:62px;top:56px;transform:rotate(-45deg);box-shadow:0 3px 6px rgba(0,0,0,.3)}
@media (pointer:fine){ .lens-cur{display:none} }
.tap-ring{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid #fff;z-index:5;pointer-events:none;animation:ring .6s ease-out forwards}
@keyframes ring{to{transform:scale(4);opacity:0}}
.hud{position:absolute;top:calc(var(--sat) + 8px);left:64px;right:64px;display:flex;justify-content:center;gap:8px;z-index:8;pointer-events:none;flex-wrap:wrap}
.hud-pill{background:rgba(255,255,255,.92);border-radius:20px;padding:5px 14px;font-size:19px;font-weight:800;color:#1d4f8a;box-shadow:0 3px 10px rgba(0,0,0,.15)}
.hud-players{display:flex;gap:6px}
.hp{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.88);border-radius:20px;padding:3px 10px 3px 4px;font-size:15px;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.15);transition:transform .3s}
.hp img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.hp .nm{max-width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hp.on{background:#fff3b0;transform:scale(1.08);box-shadow:0 0 0 3px #ffc928,0 3px 10px rgba(0,0,0,.2)}
.turn-banner{position:absolute;left:50%;top:38%;translate:-50% -50%;z-index:9;background:rgba(255,255,255,.96);border-radius:26px;padding:10px 22px 10px 14px;font-size:24px;font-weight:800;color:#1d4f8a;display:flex;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none}
.turn-banner img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.turn-banner.on{animation:banner 2.2s ease both}
@keyframes banner{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.05)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.toast{position:absolute;left:50%;bottom:calc(var(--sab) + 30px);translate:-50% 0;z-index:9;background:rgba(255,255,255,.95);border-radius:22px;padding:8px 20px;font-size:20px;font-weight:800;color:#7a4a00;opacity:0;pointer-events:none;white-space:nowrap}
.toast.on{animation:toast 1.8s ease both}
@keyframes toast{0%{opacity:0;transform:translateY(10px)}15%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
.closeup{position:absolute;left:50%;top:calc(var(--sat) + 60px);translate:-50% 0;width:min(70vw,300px);aspect-ratio:1;border-radius:50%;overflow:hidden;z-index:7;border:8px solid #d9a521;box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 4px #fff;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.closeup.on{transform:scale(1)}
.closeup img{width:100%;height:100%;object-fit:cover}
.closeup.fixed{border-color:#2fbf55}
.pick{position:absolute;left:0;right:0;bottom:0;z-index:10;background:linear-gradient(rgba(255,255,255,.97),#fff);border-radius:28px 28px 0 0;padding:14px 12px calc(var(--sab) + 14px);box-shadow:0 -10px 30px rgba(0,0,0,.25);transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.9,.3,1.1);text-align:center}
.pick.on{transform:none}
.pick-t{font-size:clamp(18px,5vw,23px);font-weight:800;line-height:1.55;color:#c0262f}
.pick.done .pick-t{color:#1f7a3a}
.pick-q{font-size:20px;font-weight:800;color:#1d4f8a;margin:6px 0 10px}
.pick.done .pick-q{color:#b07a00;font-size:24px}
.pick-opts{display:flex;justify-content:center;gap:10px}
.opt{flex:1;max-width:150px;background:linear-gradient(#fff,#eef7ff);border-radius:22px;padding:8px 4px 8px;box-shadow:0 5px 0 #b9dcf7,0 8px 16px rgba(30,80,140,.15);display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .2s,filter .3s}
.opt img{width:100%;max-width:120px;aspect-ratio:1;object-fit:contain}
.opt span{font-size:16px;font-weight:800;color:#1d3f6a;line-height:1.3;min-height:2.6em;display:flex;align-items:center}
.opt.reading{transform:scale(1.07);box-shadow:0 0 0 4px #ffc928,0 5px 0 #e0a800}
.opt.no{filter:grayscale(1) opacity(.45)}
.opt.yes{box-shadow:0 0 0 5px #2fbf55,0 5px 0 #1f8a3c;transform:scale(1.08)}
.opt.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(5px)}}
#pick-next{margin-top:8px}
.fly{position:fixed;z-index:30;pointer-events:none;object-fit:contain;transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .8s ease-in}
.burst{position:absolute;inset:0;pointer-events:none;z-index:7}
.burst i{position:absolute;font-style:normal;font-size:22px;color:#5dff7a;text-shadow:0 0 8px #fff,0 0 14px #3ddc63;animation:spark 1.2s ease-out forwards}
@keyframes spark{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2);opacity:0}}
.end-heroes{display:flex;justify-content:center;gap:12px;margin-bottom:8px}
.end-heroes img{width:110px;height:110px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.cert-hero{width:130px!important;height:130px!important;border-radius:50%;object-fit:cover;border:5px solid #ffc928}
.cert-stars{font-size:1.1em;color:#b07a00}
#s-cert .cert-title{color:#1d5fa8}

.closeup.swap{transform:scale(.85);transition:transform .25s}
.badge{position:absolute;width:68px;height:68px;border-radius:50%;box-shadow:0 0 0 4px #2fbf55,0 4px 14px rgba(0,0,0,.3);animation:badgeIn .6s cubic-bezier(.3,1.6,.5,1) both;pointer-events:none}
@keyframes badgeIn{from{transform:scale(0)}to{transform:scale(1)}}
#s-title .splash{inset:0!important;top:0!important;left:0!important;width:100%!important;height:100%!important;translate:none!important;object-fit:cover;-webkit-mask-image:none!important;mask-image:none!important}

/* v4: player colour tags (p0 blue, p1 orange) */
.pl-box.p0{box-shadow:inset 0 0 0 3px #3b8cff}
.pl-box.p1{box-shadow:inset 0 0 0 3px #ff8a1f}
.pl-box.p0 .pl-t{color:#1d5fd0}.pl-box.p1 .pl-t{color:#d96500}
.hp.p0 img{box-shadow:0 0 0 3px #3b8cff}.hp.p1 img{box-shadow:0 0 0 3px #ff8a1f}
.turn-banner.p0 img{box-shadow:0 0 0 4px #3b8cff}.turn-banner.p1 img{box-shadow:0 0 0 4px #ff8a1f}
.hero-tag{display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin:0 4px}
.hero-tag span{font-size:16px;font-weight:800;color:#fff;border-radius:14px;padding:2px 12px;max-width:140px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hero-tag.p0 span{background:#3b8cff}.hero-tag.p1 span{background:#ff8a1f}
.hero-tag.p0 img{border-color:#3b8cff!important}.hero-tag.p1 img{border-color:#ff8a1f!important}
#instr-heroes .hero-tag img{border:4px solid #fff}

/* back button room + answer tiles fit (Oct 28) */
#s-game .hud{top:calc(var(--sat) + 62px)}
.closeup{top:calc(var(--sat) + 108px);width:min(62vw,270px)}
.opt{min-width:0;padding:8px 6px}
.opt span{font-size:clamp(15px,4.4vw,17px);line-height:1.25;min-height:2.5em;max-width:100%;padding:0 4px;justify-content:center;text-align:center;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none;color:#163257}