/* TR-GAME-005 prototype styles — mobile first (360 px), brand tokens from the Brand Bible / GAME_04 */
@font-face{font-family:Fredoka;font-weight:600;font-display:swap;src:url(fonts/fredoka-600.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(fonts/fredoka-700.woff2) format("woff2")}
:root{--sky:#78D2E3;--sky2:#D9F3F8;--sun:#F7C94B;--brown:#A95C2D;--deep:#70402A;--green:#83C95A;--red:#E94A3D;--cream:#FFF6E2;--card:#fff;--line:#E3C9A0;--bar:56px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--sun);color:var(--deep);font-family:Fredoka,"Trebuchet MS",system-ui,sans-serif;font-weight:600;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:4px solid #1B6FA8;outline-offset:2px}
img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.game{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--cream);overflow:hidden;max-width:760px;margin:0 auto}
.ic{width:26px;height:26px;flex:none}
/* ----- bar ----- */
.bar{height:var(--bar);flex:none;display:flex;align-items:center;gap:6px;padding:0 8px;padding-top:env(safe-area-inset-top);background:var(--sun);border-bottom:3px solid var(--brown);position:relative;z-index:30}
.bar-title{flex:1;text-align:center;font-weight:700;font-size:17px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb{width:44px;height:44px;min-width:44px;border-radius:50%;background:#fff;border:3px solid var(--brown);display:inline-flex;align-items:center;justify-content:center;color:var(--deep);text-decoration:none;box-shadow:0 2px 0 var(--brown)}
.rb.sm{width:44px;height:44px}
.rb:disabled{opacity:.35;box-shadow:none}
.rb.snd.asleep{background:#FFE9A8}
.rb.watch{width:auto;border-radius:22px;padding:0 10px;gap:4px}
.rb.watch .wt{font-size:15px;font-variant-numeric:tabular-nums}
.game[data-screen="sound"]{background:#0F1F3D}.game[data-screen="sound"] .bar{background:transparent;border:0}
.game[data-screen="sound"] #bSnd{visibility:hidden}
/* ----- buttons ----- */
.btn{min-height:48px;padding:6px 16px;border-radius:24px;background:#fff;border:3px solid var(--brown);box-shadow:0 3px 0 var(--brown);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:16px;line-height:1.15;text-align:center;color:var(--deep)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--brown)}
.btn.big{min-height:56px;font-size:18px;padding:8px 20px}
.btn.small{min-height:44px;font-size:14px;padding:4px 12px}
.btn.gold,.btn.ready{background:var(--sun)}
.btn.alt{background:var(--cream)}
.btn.on{background:var(--sky)}
.btn.waits{opacity:.7}
.btn .ic{width:24px;height:24px}
.hl,.glow{animation:hl 1.2s ease-in-out infinite;box-shadow:0 0 0 5px rgba(27,111,168,.8),0 3px 0 var(--brown)}
@keyframes hl{50%{box-shadow:0 0 0 10px rgba(27,111,168,.3),0 3px 0 var(--brown)}}
.screen{flex:1;min-height:0;position:relative;overflow:hidden}
/* ----- sound-first ----- */
.s-sound{background:linear-gradient(var(--sun),#FFE9A8)}
.sound{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px 20px 20px;text-align:center;overflow:auto}
.s-trot{width:min(34vh,200px);height:auto}
.lt{font-size:30px;line-height:1.05;margin:0;color:var(--deep);font-weight:700}
.s-ask{font-size:19px;margin:2px 0;max-width:20em}
.s-btns{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.s-note{font-size:13px;margin:0;max-width:22em;opacity:.8}
/* ----- casebook ----- */
.s-casebook,.s-complete,.s-closed{background:linear-gradient(var(--cream),#FFE9A8);overflow:auto}
.casebook{padding:12px 14px 24px;display:flex;flex-direction:column;gap:12px}
.cb-intro{margin:0;text-align:center;font-size:17px}
.folders{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.folder{position:relative;width:100%;min-height:128px;border-radius:14px 14px 12px 12px;background:#F2C879;border:3px solid var(--brown);box-shadow:0 4px 0 var(--brown);padding:20px 8px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.folder::before{content:"";position:absolute;left:10px;top:-11px;width:44%;height:12px;border:3px solid var(--brown);border-bottom:0;border-radius:8px 8px 0 0;background:#F2C879}
.folder.closed{background:#CFEBA5}.folder.closed::before{background:#CFEBA5}
.f-n{font-size:13px;opacity:.85}.f-t{font-size:17px;font-weight:700;line-height:1.1}
.f-lv{display:flex;flex-direction:column;align-items:center;font-size:12px}
.mags{display:flex}.mg{width:22px;height:22px;color:var(--brown)}
.f-stamp{position:absolute;right:-6px;top:-10px;transform:rotate(10deg);border:3px solid var(--red);color:var(--red);border-radius:8px;padding:0 5px;font-size:12px;font-weight:700;background:rgba(255,255,255,.7)}
.f-start{position:absolute;right:6px;top:-12px;background:var(--green);border:3px solid var(--brown);border-radius:14px;padding:0 10px;font-size:13px;font-weight:700;white-space:nowrap;animation:hl 1.6s infinite}
.wrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:3px solid var(--line);border-radius:14px;padding:6px 10px;margin-top:10px}
.sw{min-height:44px;min-width:92px;border-radius:22px;border:3px solid var(--brown);background:#eee;display:inline-flex;align-items:center;gap:6px;padding:0 10px;font-size:15px;font-weight:700}
.sw i{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--brown)}
.sw.on{background:var(--green)}.sw.on i{order:2}
/* ----- case open ----- */
.s-open{background:linear-gradient(var(--sky2),var(--cream))}
.open{height:100%;overflow:auto;padding:12px 14px 20px;display:flex;flex-direction:column;gap:12px}
.story{background:#fff;border:3px solid var(--line);border-radius:18px;padding:12px 14px;position:relative}
.story h2{margin:0 0 6px;font-size:22px;line-height:1.1}.story::after{content:"";display:block;clear:both}
.story p{margin:0 0 8px;font-size:17px;line-height:1.35}
.story .q{font-weight:700;font-size:19px;margin-bottom:0}
.st-pic{float:right;margin:0 0 6px 10px;width:96px;height:auto;max-height:112px;object-fit:contain}
.o-btns{display:flex;flex-direction:column;gap:10px;align-items:stretch}
/* ----- board ----- */
.s-board{background:linear-gradient(var(--sky2),var(--cream))}
.board{height:100%;display:flex;flex-direction:column;min-height:0;position:relative}
.qbar{display:flex;align-items:center;gap:8px;text-align:left;margin:8px 10px 0;padding:6px 12px;border-radius:16px;background:var(--sun);border:3px solid var(--brown);font-weight:700;font-size:17px;line-height:1.15;min-height:48px;flex:none}
.bscroll{flex:1;min-height:0;overflow:auto;padding:4px 10px 10px}
.sec{margin:8px 2px 4px;font-size:15px;opacity:.9}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cards.n4{grid-template-columns:repeat(2,1fr)}
.oc{position:relative;background:var(--card);border:3px solid var(--line);border-radius:14px;min-width:0}
.oc-main{width:100%;padding:6px 4px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;min-height:112px}
.oc-art{display:flex;align-items:center;justify-content:center;width:100%;height:84px}
.oc-art img,.oc-art svg{max-height:84px;max-width:92%;width:auto;height:auto}
.oc-name{font-size:14px;font-weight:700;line-height:1.05;text-align:center}
.oc-x{position:absolute;right:-6px;top:-8px;width:44px;height:44px;border-radius:50%;background:#FFF1C7;border:3px solid var(--brown);color:var(--deep);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 var(--brown)}
.oc-x .ic{width:22px;height:22px}
.oc.st-ruled{background:#ECE6DA;border-style:dashed}
.oc.st-ruled .oc-art,.oc.st-ruled .oc-name{opacity:.38;filter:grayscale(.7)}
.oc.st-ruled .oc-x{border-color:var(--deep);color:var(--deep);box-shadow:0 2px 0 var(--deep)}
.bigx{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);pointer-events:none}
.oc.st-mine{border-color:var(--green);box-shadow:0 0 0 4px rgba(131,201,90,.5)}
.oc-tag{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);background:var(--green);border:2px solid var(--deep);border-radius:12px;font-size:12px;padding:0 8px;white-space:nowrap;font-weight:700}
.oc-st{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);background:#fff;border:2px solid var(--deep);border-radius:12px;font-size:11px;padding:0 6px;white-space:nowrap}
.oc.lit{border-color:var(--red);box-shadow:0 0 0 4px rgba(233,74,61,.45)}
.oc.hl{animation:hl 1.2s infinite}
.clues{display:flex;flex-wrap:wrap;gap:8px}
.cc,.sc{min-height:56px;padding:4px 12px;border-radius:14px;background:#fff;border:3px solid var(--brown);box-shadow:0 3px 0 var(--brown);display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;position:relative}
.cc.seen{background:#FFF1C7}
.cc-ok{position:absolute;right:-6px;top:-8px;width:24px;height:24px;border-radius:50%;background:var(--green);border:2px solid var(--deep);display:flex;align-items:center;justify-content:center;color:#fff}.cc-ok .ic{width:16px;height:16px}
.sc{background:#E8F7FB}.sc img{width:34px;height:auto;max-height:40px;object-fit:contain}
.bbar{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--sun);border-top:3px solid var(--brown)}
.slot{border:3px dashed var(--brown);border-radius:14px;background:#FFF6E2;min-height:52px;display:flex;align-items:center;gap:6px;padding:2px 8px;font-size:14px;line-height:1.05;font-weight:700}
.slot.full{border-style:solid;background:#E4F5CF}
.sl-art{width:38px;height:44px;display:flex;align-items:center}.sl-art img,.sl-art svg{max-height:42px;width:auto}
.btn.close{min-height:52px;font-size:16px}
.btn.close[aria-disabled="true"]{opacity:.55;background:#eee}
.btn.close.ready{background:var(--green)}
.btn.hint,.btn.guide{min-height:46px;font-size:15px}
/* ----- overlays ----- */
.ov{position:absolute;left:0;right:0;top:var(--bar);bottom:0;z-index:20;display:flex;flex-direction:column;min-height:0}
#ovViewer,#ovGuide{background:linear-gradient(var(--sky2),var(--cream));z-index:22}
.sheetwrap{z-index:26;top:0;background:transparent}
.sheet{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.sheet.center{align-items:center;background:rgba(112,64,42,.5)}
.sh-bg{position:absolute;inset:0;background:rgba(112,64,42,.5)}
.sh{position:relative;width:100%;max-width:520px;max-height:92%;overflow:auto;background:var(--cream);border:3px solid var(--brown);border-bottom:0;border-radius:22px 22px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.sheet.center .sh{border-radius:22px;border-bottom:3px solid var(--brown);margin:0 14px;width:auto}
.sh h3{margin:0;font-size:22px}
.sh-art{height:120px;display:flex;align-items:center}.sh-art img,.sh-art svg{max-height:120px;width:auto;max-width:200px}
.sh-pic{width:auto;max-height:100px}
.sh-t{font-size:19px;line-height:1.3;margin:0}
.sh-st,.sh-note{margin:0;font-size:14px;min-height:0}.sh-st:empty{display:none}
.sh-btns{display:flex;flex-direction:column;gap:8px;width:100%;align-items:stretch;margin-top:4px}
.hh{display:flex;align-items:center;gap:10px}.hh img{height:70px;width:auto}
.how ol{list-style:none;margin:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px}
.how li{display:flex;gap:10px;align-items:flex-start;font-size:17px;line-height:1.25}
.how li b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--sun);border:3px solid var(--brown);display:flex;align-items:center;justify-content:center}
.menu .mrow{display:flex;flex-direction:column;gap:4px;width:100%;align-items:stretch;text-align:left;font-size:16px}
.menu small{font-size:13px;opacity:.8}
.seg{display:flex;gap:0;border:3px solid var(--brown);border-radius:24px;overflow:hidden;background:#fff}
.seg button{flex:1;min-height:44px;font-size:14px;font-weight:700;padding:2px 6px;line-height:1.05}
.seg button.on{background:var(--sun)}
.m-dev{font-size:13px;margin:6px 0 0;opacity:.85}
/* ----- viewer ----- */
.v,.g{display:flex;flex-direction:column;height:100%;min-height:0}
.vhead{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px}
.vt{flex:1;font-size:18px;font-weight:700;text-align:center}
.vnav{display:flex;gap:6px}
.vscroll,.gscroll{flex:1;min-height:0;overflow:auto;padding:0 12px 14px}
.vpic{background:#fff;border:3px solid var(--line);border-radius:16px;overflow:hidden;aspect-ratio:3/2;width:100%}
.vzoom{width:100%;height:100%;transform-origin:50% 50%;transition:transform .2s}
.vzoom svg{display:block;width:100%;height:100%}
.vline{margin:8px 2px;font-size:19px;line-height:1.3;text-align:center}
.vtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.zg{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}
.vstrip{margin-top:12px}.vs-l{font-size:14px;opacity:.85}
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.vcards{gap:12px 8px}.vcards.n4{grid-template-columns:repeat(2,1fr)}
.vcards.n5,.vcards.n6{grid-template-columns:repeat(3,1fr)}
.oc.mini .oc-main{min-height:90px;padding:20px 2px 3px}
.oc.mini .oc-art{height:50px}.oc.mini .oc-art img,.oc.mini .oc-art svg{max-height:50px}
.oc.mini .oc-name{font-size:11px}
.oc.mini .oc-x{width:44px;height:44px;right:-6px;top:-14px}
.oc.mini .oc-st{display:none}
.rulebox{position:relative;background:#FFF1C7;border:3px solid var(--brown);border-radius:14px;padding:8px 44px 8px 12px;margin:0 0 8px;font-size:16px;line-height:1.3;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.rbx{position:absolute;right:0;top:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center}.rbx .ic{width:20px;height:20px}
.cmp{display:flex;flex-direction:column;gap:8px}
.cmp-c,.cmp-g{background:#fff;border:3px solid var(--line);border-radius:14px;padding:6px}
.cmp-l{font-size:13px;font-weight:700}
.cmp-art svg{display:block;width:100%;height:auto}
.gts{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.gt{width:84px;display:flex;flex-direction:column;align-items:center;font-size:12px;text-align:center;line-height:1.05}.gt svg{width:80px;height:70px}
/* ----- bubble ----- */
.bubslot{flex:none;position:relative;z-index:5}
.bub{display:flex;align-items:center;gap:8px;margin:6px 10px 0;padding:8px 58px 8px 8px;background:#fff;border:3px solid var(--brown);border-radius:18px;position:relative;box-shadow:0 3px 0 var(--brown)}
.bub img{height:64px;width:auto;flex:none}
.bub p{margin:0;font-size:16px;line-height:1.25}
.bubx{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;border:3px solid #fff;box-shadow:0 0 0 2px var(--deep),0 3px 0 2px var(--deep);display:flex;align-items:center;justify-content:center}.bubx .ic{width:20px;height:20px}.bubx:active{transform:translateY(-45%)}
.open{position:relative}.open .bubslot{position:absolute;top:6px;left:4px;right:4px;z-index:6}.open .bub{box-shadow:0 3px 0 var(--brown),0 8px 16px rgba(60,35,20,.3)}
/* ----- guide ----- */
.tabs{flex:none;display:flex;gap:6px;padding:0 10px 8px}
.tab{flex:1;min-height:44px;border-radius:22px;border:3px solid var(--brown);background:#fff;font-size:15px;font-weight:700}.tab.on{background:var(--sun)}
.gc{display:flex;gap:10px;background:#fff;border:3px solid var(--line);border-radius:14px;padding:8px;margin-bottom:8px;align-items:flex-start}
.gc>img{width:60px;height:auto;flex:none}.gc-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.gc h4{margin:0;font-size:18px}.gc p{margin:0;font-size:14px;line-height:1.25}.gc-w{opacity:.9}
.gc-r{display:flex;gap:8px;align-items:center}.gc-r svg{width:66px;height:60px;flex:none;background:var(--cream);border-radius:8px}
.gr-t{margin:4px 2px 8px;font-size:18px}
.gc.rule{align-items:center;flex-wrap:wrap}.rn{width:30px;height:30px;border-radius:50%;background:var(--sun);border:3px solid var(--brown);display:flex;align-items:center;justify-content:center;flex:none}
.gc.rule p{flex:1;font-size:16px}
/* ----- case closed ----- */
.closed{padding:12px 14px 28px;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.stampwrap{height:84px;display:flex;align-items:center;justify-content:center}
.stamp{border:6px solid var(--red);color:var(--red);border-radius:14px;padding:2px 18px;font-size:34px;font-weight:700;letter-spacing:1px;transform:rotate(-8deg) scale(2.2);opacity:0;background:rgba(255,255,255,.4)}
.stamp.in{opacity:1;transform:rotate(-8deg) scale(1);transition:transform .25s cubic-bezier(.3,1.6,.6,1),opacity .1s}
.react{margin:0;text-align:center;font-size:19px;min-height:26px}
.cl-cards{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mc2{position:relative;width:76px;background:#fff;border:3px solid var(--line);border-radius:12px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;font-size:11px;font-style:normal;line-height:1.05;text-align:center}
.mc2 em{font-style:normal;font-weight:700}
.mc2 .oc-art{height:46px}.mc2 .oc-art img,.mc2 .oc-art svg{max-height:46px}
.mc2 .bigx{opacity:0;transition:opacity .3s}
.mc2.out{background:#ECE6DA}.mc2.out .oc-art,.mc2.out em{opacity:.38}.mc2.out .bigx{opacity:1}
.mc2.win{border-color:var(--green);box-shadow:0 0 0 4px rgba(131,201,90,.55)}
.replay h3,.motive h3{margin:6px 0 4px;font-size:18px}
.replay ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.replay li{opacity:0;max-height:0;overflow:hidden;background:#fff;border:3px solid var(--line);border-radius:12px;padding:0 10px;font-size:16px;line-height:1.3;transition:opacity .3s,max-height .3s,padding .3s}
.replay li.on{opacity:1;max-height:140px;padding:6px 10px}
.motive,.trap{opacity:0;max-height:0;overflow:hidden;transition:opacity .4s,max-height .4s}
.motive.on,.trap.on{opacity:1;max-height:480px}
.motive p,.trap p{margin:0;font-size:17px;line-height:1.35}
.trap{background:#FFF1C7;border:3px solid var(--brown);border-radius:14px;padding:0 12px}.trap.on{padding:8px 12px}.trap h4{margin:0 0 4px;font-size:16px}
.ctime{margin:0;text-align:center;font-size:15px}
.cbtns{display:flex;flex-direction:column;gap:8px;margin-top:6px}
/* ----- complete ----- */
.complete{padding:20px 14px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.stamps{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.cs{background:#fff;border:3px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14px}.cs em{font-style:normal}
.cs-s{color:var(--red);border:3px solid var(--red);border-radius:8px;padding:0 8px;font-weight:700;transform:rotate(-6deg)}
.cp-l{font-size:19px;margin:0}
.lang{position:absolute;left:0;right:0;bottom:2px;margin:0;z-index:40;display:flex;gap:12px;justify-content:center;font-size:12px}.lang a{color:var(--deep);padding:8px}
@media (min-width:520px){.cards{gap:12px}.oc-art{height:100px}.oc-art img,.oc-art svg{max-height:100px}.folders{grid-template-columns:repeat(3,1fr)}.o-btns,.cbtns{flex-direction:row;justify-content:center;flex-wrap:wrap}}
@media (max-height:520px){.s-trot{width:90px}.stampwrap{height:60px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.stamp{transform:rotate(-8deg)}}

/* ===== search the scene (DEC-691) ===== */
.s-search{background:#F4E6C6}
.search{height:100%;display:flex;flex-direction:column;min-height:0;position:relative;overflow:auto;background:linear-gradient(#F4E6C6,#EBD3A6)}
.scw{position:relative;width:100%;flex:none;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:#cbb;border-bottom:3px solid var(--brown)}
.sci,.sco{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.scw .cut,.scw .spr{position:absolute;pointer-events:none;filter:drop-shadow(0 5px 3px rgba(60,35,20,.35))}
.spr.hop{animation:hop .6s ease}
@keyframes hop{30%{transform:translateY(-22%) rotate(-6deg)}60%{transform:translateY(0) rotate(4deg)}}
.spot{position:absolute;border-radius:50%;background:transparent;pointer-events:none}
.spot:focus-visible{outline:4px solid #1B6FA8;outline-offset:0;background:rgba(255,255,255,.18)}
.spot.glow{animation:sglow 1.4s ease-in-out 3;box-shadow:none;border:4px dashed rgba(255,255,255,.95)}
@keyframes sglow{50%{background:rgba(255,246,190,.45);transform:scale(1.06)}}
.spot.k-clue.done::after{content:"";position:absolute;inset:30%;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 3px var(--green)}
.lens{position:absolute;width:150px;height:150px;border-radius:50%;overflow:hidden;border:6px solid #8A5528;box-shadow:0 0 0 3px #F7C94B,0 8px 14px rgba(60,35,20,.45);pointer-events:none;z-index:4;background:#fff}
.lens::after{content:"";position:absolute;left:18%;top:12%;width:30%;height:16%;border-radius:50%;background:rgba(255,255,255,.35);transform:rotate(-25deg)}
.lens-in{position:absolute;left:0;top:0;transform-origin:0 0}
.lens-in img,.lens-in svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.brush-ic{position:absolute;width:52px;height:52px;pointer-events:none;z-index:4;color:var(--deep);animation:brush .5s ease-in-out infinite alternate}
.brush-ic .ic{width:52px;height:52px}
@keyframes brush{to{transform:rotate(-18deg) translateX(6px)}}
.ring{position:absolute;border-radius:50%;border:6px solid rgba(255,255,255,.4);pointer-events:none;z-index:5}
.ring.go{animation:ring .42s linear forwards}
@keyframes ring{from{border-color:rgba(255,255,255,.35);box-shadow:0 0 0 0 rgba(247,201,75,.0)}to{border-color:#F7C94B;box-shadow:0 0 0 10px rgba(247,201,75,.55)}}
.dark{position:absolute;inset:0;background:rgba(10,8,20,.9);pointer-events:none;z-index:3;-webkit-mask:radial-gradient(circle 80px at var(--lx,-200px) var(--ly,-200px),transparent 0 75%,#000 100%);mask:radial-gradient(circle 80px at var(--lx,-200px) var(--ly,-200px),transparent 0 75%,#000 100%)}
.dark.lit{-webkit-mask:radial-gradient(ellipse 30% 30% at var(--cx,50%) var(--cy,46%),transparent 0 70%,#000 100%);mask:radial-gradient(ellipse 30% 30% at var(--cx,50%) var(--cy,46%),transparent 0 70%,#000 100%);background:rgba(10,8,20,.6)}
.sco .loose{transition:transform .6s ease,opacity .6s ease}
.sco .loose.lift{transform:translate(90px,-40px) rotate(40deg);opacity:0}
.tslot.pop{animation:pop .7s ease}
@keyframes pop{0%{transform:scale(.2) translateY(-60px)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.sh.found .fd-t{margin:0;display:flex;align-items:center;gap:6px;font-size:20px;color:#1B6FA8}
.sh.found .fd-n{font-size:18px}
.sh.found .fd-pic{width:min(100%,420px);border:3px solid var(--brown);border-radius:14px;overflow:hidden;background:#fff}
.sh.found .fd-pic .art{display:block;width:100%;height:auto}
.hand{position:fixed;z-index:60;width:56px;height:56px;pointer-events:none;animation:tap 1.1s ease-in-out infinite;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}
.hand svg{width:56px;height:56px}
@keyframes tap{0%,100%{transform:translate(0,10px)}50%{transform:translate(0,0) scale(.92)}}
@media (prefers-reduced-motion:reduce){.hand,.spot.glow,.brush-ic,.tslot.pop,.spr.hop,.ring.go{animation:none}.sco .loose{transition:none}}

/* ===== the casebook as a detective desk (DEC-691) ===== */
.s-casebook{background:#B9783E url(art2/desk.webp) center top/cover no-repeat;overflow:auto}
.desk{padding:10px 14px 24px;display:flex;flex-direction:column;gap:10px;min-height:100%}
.cork{align-self:center;display:flex;gap:7px;align-items:center;padding:8px 14px;border-radius:10px;background:#C99A62 repeating-radial-gradient(circle at 30% 40%,rgba(120,70,30,.18) 0 1px,transparent 1px 4px);border:4px solid #8A5528;box-shadow:0 4px 0 rgba(70,40,20,.5)}
.cork .pin{width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.st6{width:34px;height:34px;border-radius:50%;border:3px dashed rgba(112,64,42,.55);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:rgba(112,64,42,.7);background:rgba(255,255,255,.25)}
.st6.on{border:3px solid var(--red);color:var(--red);background:rgba(255,255,255,.85);transform:rotate(-8deg)}
.st6 .ic{width:20px;height:20px}
.desk .cb-intro{background:rgba(255,246,226,.92);border-radius:14px;padding:6px 10px;align-self:center;font-size:16px}
.desk .folders{gap:34px 14px;margin-top:14px}
.desk .folders li{animation:deal .5s cubic-bezier(.2,.9,.3,1.2) backwards;animation-delay:calc(var(--i) * 80ms)}
@keyframes deal{from{transform:translate(-40px,60px) rotate(-14deg);opacity:0}}
.desk .folder{min-height:150px;padding:28px 8px 10px;background:#F2C879 linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%,rgba(160,100,40,.12));box-shadow:0 5px 0 var(--brown),0 10px 14px rgba(60,30,10,.35);transition:transform .15s}
.desk li:nth-child(odd) .folder{transform:rotate(-1.5deg)}.desk li:nth-child(even) .folder{transform:rotate(1.2deg)}
.desk .folder:active{transform:translateY(-6px) rotate(0) scale(1.03)}
.desk .folder.closed{background:#D9EFB8 linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%)}
.desk .folder.start{animation:hl 1.4s ease-in-out infinite;box-shadow:0 0 0 5px rgba(27,111,168,.8),0 5px 0 var(--brown)}
.pol{position:absolute;right:-8px;top:-18px;width:74px;padding:4px 4px 12px;background:#fff;border-radius:3px;box-shadow:0 3px 6px rgba(0,0,0,.3);transform:rotate(7deg)}
.pol img{display:block;width:100%;height:48px;object-fit:cover;border-radius:2px}
.pol.solved .pol-a{display:block;height:48px;overflow:hidden;border-radius:2px;background:var(--cream)}
.pol.solved .pol-a .art{width:100%;height:100%}
.pol.solved b{position:absolute;right:-8px;bottom:-8px;width:26px;height:26px;border-radius:50%;background:var(--green);border:3px solid var(--brown);display:flex;align-items:center;justify-content:center}
.pol.solved b .ic{width:16px;height:16px}
.clip{position:absolute;right:42px;top:-24px;width:12px;height:34px;border:3px solid #9AA4AE;border-radius:8px;transform:rotate(7deg)}
.desk .f-t{max-width:calc(100% - 4px)}
.desk .f-start{left:6px;right:auto;top:-14px}
.desk .wrow{margin-top:auto;background:rgba(255,255,255,.95)}
.st-scene{display:block;width:calc(100% + 28px);max-width:none;margin:-12px -14px 10px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:15px 15px 0 0;border-bottom:3px solid var(--line)}
@media (prefers-reduced-motion:reduce){.desk .folders li,.desk .folder.start{animation:none}}

/* ===== DEC-707: title screen ===== */
.title{position:relative;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:#0F1F3D;color:#fff;text-align:center}
.t-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 58%;animation:tbg 14s ease-in-out infinite alternate}
@keyframes tbg{from{transform:scale(1.02)}to{transform:scale(1.09) translateY(-1%)}}
.t-shade{position:absolute;inset:0;background:linear-gradient(rgba(10,20,45,.55),rgba(10,20,45,0) 34%,rgba(10,20,45,0) 52%,rgba(20,12,6,.82) 82%)}
.t-h{position:relative;margin:0;padding:calc(14px + env(safe-area-inset-top)) 14px 0;width:100%;display:flex;justify-content:center}
.t-stack{position:relative;display:flex;flex-direction:column;align-items:center;width:min(92%,440px)}
.t-logo{width:100%;height:auto;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45));animation:tdrop .8s cubic-bezier(.3,1.5,.5,1) both}
@keyframes tdrop{from{transform:translateY(-70px) scale(.8);opacity:0}}
.t-rib{position:relative;margin-top:-6px;padding:0 26px;animation:trib .6s .5s ease-out both}
.t-rib::before,.t-rib::after{content:"";position:absolute;top:10px;width:30px;height:100%;background:#B8352B;z-index:-1}
.t-rib::before{left:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,30% 50%)}
.t-rib::after{right:0;clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%)}
.t-rib-in{display:block;background:var(--red);color:#fff;border:3px solid #fff;border-radius:6px;padding:6px 14px 7px;font-size:clamp(17px,5.3vw,28px);font-weight:700;line-height:1.05;letter-spacing:.3px;text-shadow:0 2px 0 #8E2A21;box-shadow:0 4px 0 #8E2A21,0 8px 14px rgba(0,0,0,.35);white-space:nowrap}
@keyframes trib{from{transform:scaleX(.1);opacity:0}}
.t-badge{position:absolute;right:0;top:calc(100% - 12px);width:clamp(64px,19vw,86px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE58A,var(--sun) 55%,#E0A422);border:4px solid #fff;box-shadow:0 0 0 3px var(--deep),0 6px 10px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;transform:rotate(12deg);animation:tstamp .5s 1s cubic-bezier(.3,1.6,.5,1) both}
.t-badge span{color:var(--deep);font-weight:700;font-size:clamp(13px,3.9vw,17px);line-height:1;width:80%}
@keyframes tstamp{from{transform:rotate(-30deg) scale(2.4);opacity:0}}
.t-bot{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 20px calc(30px + env(safe-area-inset-bottom));animation:tup .5s 1.2s ease-out both}
@keyframes tup{from{transform:translateY(24px);opacity:0}}
.t-bot .s-ask{color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.6);font-size:20px;margin:0}
.t-bot .s-btns{max-width:320px}
.t-bot .s-note{color:#FFF3D0;text-shadow:0 1px 3px rgba(0,0,0,.7);opacity:1}
@media (max-height:600px){.t-stack{width:min(70%,360px)}.t-bot .s-ask{font-size:17px}.t-bot .btn.big{min-height:50px}}

/* ===== DEC-707: search panel (clue tray + detective kit) ===== */
.vchip{position:absolute;left:8px;top:8px;z-index:6;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 14px 4px 8px;border-radius:22px;background:#fff;border:3px solid var(--brown);box-shadow:0 3px 0 var(--brown);font-weight:700;font-size:15px;color:var(--deep)}
.vchip .ic{width:22px;height:22px}
.views{display:flex;gap:8px;justify-content:center;padding:10px 10px 0;flex-wrap:wrap}
.viewbtn{background:#E8F6FB}
.pcard{margin:8px 10px 0;background:rgba(255,255,255,.72);border:3px solid var(--brown);border-radius:18px;padding:4px 8px 8px;box-shadow:0 3px 0 rgba(112,64,42,.35)}
.kcard{margin-bottom:10px}
.search .kcard{margin-top:auto}
.search .tcard+.kcard{margin-top:8px}
.pc-h{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 4px;font-size:15px;font-weight:700;color:var(--deep)}
.pc-h .ic{width:20px;height:20px}
.pc-h h2{margin:0;font-size:15px;flex:1;text-align:left}
.kcard .pc-h{justify-content:space-between}
.tray{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.tslot{position:relative;width:70px;height:52px;border-radius:12px;border:3px dashed #C9A97B;background:rgba(255,246,226,.8);display:inline-flex;align-items:center;justify-content:center;color:#C29A6A}
.ts-q{font-size:30px;font-weight:700;line-height:1}
.ts-n{position:absolute;left:-8px;top:-8px;min-width:24px;height:24px;border-radius:12px;background:#fff;border:2px solid #C9A97B;font-size:13px;line-height:20px;text-align:center;color:#B08458;padding:0 4px}
.tslot.got{border:3px solid var(--brown);background:#fff;box-shadow:0 3px 0 var(--brown);padding:2px;overflow:visible}
.tslot.got .ts-n{background:var(--green);border-color:var(--brown);color:var(--deep)}
.ts-art{display:block;width:100%;height:100%;border-radius:8px;overflow:hidden;pointer-events:none}
.ts-art svg{width:100%;height:100%;display:block}
.tslot.pop{animation:pop .7s ease}
.tslot.said{border:3px solid var(--brown);background:#E8F6FB;width:56px}
.tslot.said img{width:40px;height:46px;object-fit:contain}
.tslot.said .ts-n{background:#E8F6FB;border-color:var(--brown)}
.toboard{margin:10px auto 2px;display:flex;width:100%;max-width:340px}
.toboard .ic{width:22px;height:22px}
.tcard.full{border-color:var(--green);background:rgba(236,248,226,.9)}
.kit{display:flex;gap:8px;justify-content:center;align-items:stretch}
.tool{position:relative;flex:1 1 0;min-width:0;max-width:150px;min-height:76px;border-radius:16px;background:#fff;border:3px solid var(--brown);box-shadow:0 4px 0 var(--brown);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 6px 8px;color:var(--deep)}
.tool .ic{width:34px;height:34px}
.tool b{font-size:16px;line-height:1.1}
.tool small{font-size:12px;line-height:1.15;opacity:.8;font-weight:600}
.tool.on{background:var(--sky);transform:translateY(-3px);box-shadow:0 7px 0 var(--brown)}
.t-ck{position:absolute;right:-8px;top:-10px;width:26px;height:26px;border-radius:50%;background:var(--green);border:2px solid var(--brown);font-size:15px;line-height:22px;text-align:center;color:var(--deep)}
.tool.hintbtn{flex:0 1 82px;background:#FFF3C4;border-style:dashed}
.tool.hintbtn .ic{width:30px;height:30px}
@media (max-height:700px){.tool small{display:none}.tool{min-height:58px}.tool .ic{width:28px;height:28px}.tool.hintbtn .ic{width:26px;height:26px}.pc-h{font-size:14px}}

/* ===== update 1.1 ===== */
.d-logo{display:block;align-self:center;width:min(62%,300px);height:auto;margin:2px 0 -2px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
.desk .cb-intro{margin-bottom:6px}
.bstory{display:flex;gap:10px;align-items:flex-start;background:#fff;border:3px solid var(--line);border-radius:14px;padding:10px;margin-bottom:6px}
.bstory img{width:90px;height:auto;border-radius:8px;flex:none;border:2px solid var(--line)}
.bstory b{display:block;font-size:17px;margin-bottom:2px}
.bstory p{margin:0 0 6px;font-size:15px;line-height:1.3}
.bstory .btn{margin-top:2px}
@media (max-width:400px){.bstory img{width:70px}}