/* The Impossible Detective. Dark ink-blue study, brass fittings, parchment cards. */
:root{--ink:#2b1d12;--night:#12202b;--night2:#1c3142;--brass:#d9a441;--brass2:#8f6420;--paper:#f4e8cc;--paper2:#e6d3a6;--red:#b8412f;--green:#4f9d63;--blue:#3f7fb5;--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;background:var(--night);color:#f4e8cc;font-family:"Georgia","Palatino Linotype",serif;touch-action:manipulation;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column;background:radial-gradient(120% 80% at 50% 0,#27465c,#12202b 70%)}
button{font:inherit;color:inherit;cursor:pointer}
.hidden{display:none!important}
#hud{display:flex;align-items:center;gap:8px;padding:calc(8px + var(--safe-t)) 10px 6px;min-height:58px}
.pill{background:#0d1620;border:2px solid var(--brass2);border-radius:14px;padding:4px 10px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:4px;font-weight:700;color:var(--paper)}
.pill.btn:active{transform:translateY(1px);background:#1d2f40}.pill.btn span{font-size:12px}
#ttl{display:flex;flex-direction:column;line-height:1.1;flex:1;min-width:0}#ttl small{font-size:10px;letter-spacing:.14em;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#ttl b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#coinPill{color:var(--brass)}
#eras{display:flex;gap:6px;padding:2px 10px 6px}
.era{flex:1;min-height:46px;border-radius:12px;border:2px solid #38546a;background:#0d1620;color:#b8c7d3;font-weight:700;font-size:13px;line-height:1.15;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 4px;position:relative}
.era small{font-size:10px;font-weight:400;opacity:.8}
.era.on{background:linear-gradient(#7a5418,#4d330c);border-color:var(--brass);color:#fff3d2;box-shadow:0 0 12px #d9a44166}
.era .dot{position:absolute;right:6px;top:4px;font-size:10px;color:var(--green)}
#stage{flex:1;position:relative;min-height:0;margin:0 8px;border:3px solid var(--brass2);border-radius:14px;overflow:hidden;background:#000;box-shadow:0 6px 18px #0009}
#rooms,#spots,#slip{position:absolute;inset:0}
#rooms img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease,filter .7s ease}
#rooms img.on{opacity:1}
#slip{pointer-events:none;background:radial-gradient(circle,#fff3c8aa,#d9a44100 65%);opacity:0}
#slip.go{animation:slip .9s ease}
@keyframes slip{0%{opacity:0;transform:scale(.6)}35%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.spot{position:absolute;transform:translate(-50%,-50%);width:25%;min-width:76px;max-width:150px;aspect-ratio:1;border:0;background:none;padding:0;touch-action:manipulation}
.spot img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 4px #000c) drop-shadow(0 0 5px #ffe9a0aa);pointer-events:none;animation:bob 3.4s ease-in-out infinite}
.spot:nth-child(2) img{animation-delay:-1.1s}.spot:nth-child(3) img{animation-delay:-2.2s}
@keyframes bob{50%{transform:translateY(-3px)}}
.spot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #ffe9a000;background:radial-gradient(circle,#ffe9a044,#ffe9a000 70%);pointer-events:none;animation:halo 2.4s ease-in-out infinite}@keyframes halo{50%{transform:scale(1.12);opacity:.55}}
.spot.seen::after{display:none}.spot.seen img{filter:drop-shadow(0 3px 4px #000c) saturate(.55) brightness(.85);animation:none}
.spot.seen::before{content:"✓";position:absolute;right:2px;top:2px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:14px;line-height:22px;text-align:center;font-family:system-ui}
.spot.hinted::after{border-color:#ffe9a0;box-shadow:0 0 14px 4px #ffe9a0cc;animation:ping 1.2s ease-in-out infinite}
@keyframes ping{50%{transform:scale(1.15);opacity:.6}}
.spot:active img{transform:scale(.94)}
#toast{position:absolute;left:50%;top:8px;transform:translate(-50%,-10px);background:#f4e8cc;color:var(--ink);border:2px solid var(--brass2);border-radius:12px;padding:6px 14px;font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:5;max-width:92%;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#bar{display:flex;gap:6px;padding:8px 8px calc(8px + var(--safe-b))}
.tool{flex:1;min-height:56px;border-radius:14px;border:2px solid #38546a;border-bottom-width:5px;background:#16293a;color:#e9deC2;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;position:relative;padding:2px}
.tool i{font-style:normal;font-size:20px;line-height:1.1}.tool span{font-size:12px}.tool em{position:absolute;right:5px;top:3px;font-size:10px;font-style:normal;opacity:.75}
.tool.hero{background:linear-gradient(#b4801f,#7a5214);border-color:#5e3e0a;color:#fff3d2}
.tool:active{transform:translateY(2px);border-bottom-width:3px}.tool:disabled,.tool.dim{opacity:.5}
.overlay{position:fixed;inset:0;z-index:20;background:#070d13e6;display:flex;align-items:center;justify-content:center;padding:calc(10px + var(--safe-t)) 12px calc(10px + var(--safe-b));overflow:auto}
.card{background:var(--paper);color:var(--ink);border:3px solid var(--brass2);border-radius:18px;padding:16px 16px 14px;width:min(100%,440px);max-height:100%;text-align:center;box-shadow:0 10px 30px #000a}
.card.scroll{overflow:auto}
.card h2{margin:0 0 6px;font-size:20px;letter-spacing:.04em}.card h3{margin:10px 0 4px;font-size:15px}
.card p{margin:6px 0;line-height:1.35;font-size:15px}.card p.small,.small{font-size:12.5px;opacity:.85}
.card p.tag{font-style:italic}
.logo{display:flex;flex-direction:column;align-items:center;margin-bottom:6px;font-weight:900;letter-spacing:.08em;line-height:1}
.logo span:first-child{font-size:19px;color:var(--brass2)}.logo span:last-child{font-size:34px;color:#3b2410;text-shadow:0 2px 0 #fff8}
.friends{display:flex;justify-content:center;margin:8px 0 10px}.friends img{height:82px;margin:0 -6px;filter:drop-shadow(0 3px 3px #0006)}
.big{display:block;width:100%;min-height:50px;margin:8px 0 0;border-radius:14px;border:3px solid #5e3e0a;border-bottom-width:6px;background:linear-gradient(#d9a441,#a8741c);color:#2b1805;font-weight:800;font-size:16px;letter-spacing:.05em}
.big.alt{background:linear-gradient(#5a7f9c,#3a566d);border-color:#23384a;color:#fff}.big.small{min-height:40px;font-size:13px}.big:active{transform:translateY(2px)}.big:disabled{opacity:.5}
.cardrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0}.cardrow img{height:120px;border-radius:8px;border:2px solid var(--brass2)}
/* casebook */
.case{display:flex;gap:10px;align-items:center;text-align:left;width:100%;background:#fffaf0;border:2px solid var(--paper2);border-radius:12px;padding:6px;margin:6px 0;color:var(--ink)}
.case img{width:72px;height:54px;object-fit:cover;border-radius:8px;flex:none;border:2px solid var(--brass2)}
.case b{display:block;font-size:14px}.case small{display:block;font-size:12px;opacity:.75;line-height:1.2}
.case .r{margin-left:auto;font-size:15px;white-space:nowrap;color:var(--brass2)}
.case.lock{opacity:.55;filter:grayscale(.6)}.case.solved{border-color:var(--green)}
/* suspects */
.sus{display:flex;gap:10px;text-align:left;background:#fffaf0;border:2px solid var(--paper2);border-radius:12px;padding:8px;margin:7px 0;color:var(--ink)}
.sus>img{width:96px;height:112px;object-fit:contain;flex:none}.sus b{font-size:15px}.sus i{display:block;font-size:12px;opacity:.7;margin-bottom:2px}
.sus ul{margin:4px 0 0;padding-left:16px;font-size:12.5px;line-height:1.3}.sus span{display:block;font-size:13px;line-height:1.3}.sus .say{margin-top:4px;font-size:12.5px;font-style:italic;opacity:.85}
.sus button{margin-top:6px}
.sus.pick{border-color:var(--red);background:#fff1ec}
.note{display:flex;gap:6px;text-align:left;font-size:13.5px;margin:4px 0}.note b{flex:none;width:22px}.note.dim{opacity:.45}
.stars{font-size:34px;letter-spacing:6px;color:var(--brass)}
.reveal{text-align:left;font-size:14px;line-height:1.4}
#app.shake #stage{animation:sh .35s}@keyframes sh{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}