:root{--cream:#e6dcc0;--paper:#efe4c8;--ink:#2a2419;--berry:#7a2e2a;--sage:#6f7a4a;--mustard:#b98c2e;--corn:#4f5f7a;--tomato:#8e3b26;--lime:#a3b23a;--fs:19px;
 --serif:'Fraunces',Georgia,serif;--sans:'Atkinson Hyperlegible',system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none;overflow-x:hidden}
body{background:#1d1610;color:var(--ink);font-family:var(--serif);-webkit-tap-highlight-color:transparent}
body.dys{--serif:'Atkinson Hyperlegible',system-ui,sans-serif}
.hidden{display:none!important}
.btn{font:700 16px var(--sans);border:0;border-radius:999px;padding:14px 22px;background:var(--ink);color:var(--paper);cursor:pointer;min-height:48px;box-shadow:0 3px 0 #1d1320}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #1d1320}
.btn.alt{background:var(--paper);color:var(--ink);box-shadow:0 3px 0 #cbb79a;border:2px solid #cbb79a}
.btn.big{font-size:19px;padding:16px 30px}
#desk{min-height:100%;display:flex;flex-direction:column;align-items:center}
.screen{width:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px}
/* cover */
.tome{width:min(420px,92vw);aspect-ratio:3/4.2;background:linear-gradient(90deg,#2a1a14 0 7%,#4a2a20 7% 9%,#5b3a26 9%);border-radius:8px 18px 18px 8px;box-shadow:0 30px 60px rgba(40,15,30,.45),inset -8px 0 0 rgba(0,0,0,.08);padding:26px 24px 22px 44px;display:flex}
.tome-face{flex:1;border:3px dashed rgba(200,170,110,.55);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--paper);padding:14px;gap:12px}
.tome h1{font:800 54px var(--serif);margin:0;letter-spacing:-1px;text-shadow:0 3px 0 #1a0f0a}.tome h1 span{color:var(--mustard)}
.sub{margin:0;font-size:17px;line-height:1.35}
.cover-honk{width:120px;filter:drop-shadow(0 6px 4px rgba(0,0,0,.3));animation:bob 3.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-4deg)}}
.cover-opts{display:flex;flex-direction:column;gap:8px;font:400 14px var(--sans);text-align:left}
.cover-opts label,.sheet label{display:flex;gap:10px;align-items:center;min-height:36px}
.cover-opts input,.sheet input{width:22px;height:22px;accent-color:var(--mustard)}
.beta{font:400 13px var(--sans);color:#fff3e0;opacity:.85}.beta a{color:#fff}
/* song */
.song-card{width:min(520px,94vw);background:var(--paper);border-radius:14px;padding:26px 22px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.song-card h2{margin:0 0 14px;font-size:28px}.song-card small{display:block;font-size:15px;font-style:italic;font-weight:400}
.lyric{min-height:150px;font-size:21px;line-height:1.55;margin-bottom:18px}
.lyric .tag{font:700 13px var(--sans);color:var(--berry);letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:6px}
/* game */
#game{justify-content:flex-start;padding:10px 0 0}
.hud{width:min(560px,100vw);display:flex;align-items:flex-start;padding-top:10px!important;justify-content:space-between;padding:4px 14px;gap:10px}
.clip{font-size:26px;background:none;border:0;min-width:48px;min-height:48px;cursor:pointer}
.ribbons{display:flex;gap:6px;flex:1;overflow:hidden}
.ribbon{font:700 12px var(--sans);background:var(--berry);color:#fff;padding:6px 10px 10px;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);white-space:nowrap}
.ribbon.word{background:var(--sage)}
.ink{display:flex;align-items:center;gap:6px;font:700 22px var(--sans);background:var(--paper);border-radius:999px;padding:6px 14px;box-shadow:0 2px 0 #cbb79a}
.ink .pot{width:22px;height:26px;background:#2b2140;border-radius:4px 4px 10px 10px;position:relative}
.ink .pot:after{content:"";position:absolute;left:5px;top:-10px;width:3px;height:16px;background:var(--mustard);transform:rotate(18deg);border-radius:2px}
.book{position:relative;width:min(560px,100vw);padding:0 10px 0 22px;perspective:1600px}
.gutter{position:absolute;left:0;top:6px;bottom:6px;width:30px;background:linear-gradient(90deg,#efe2c6,#d8c6a2 60%,#9b8566);border-radius:6px 0 0 6px}
.page{position:relative;background:var(--paper);border-radius:2px 12px 12px 2px;box-shadow:0 18px 40px rgba(50,20,10,.35),inset 14px 0 18px -10px rgba(110,80,40,.35);padding:14px 18px 28px 24px;transform-origin:left center;background-image:radial-gradient(rgba(150,110,60,.06) 1px,transparent 1px);background-size:5px 5px}
.illus{position:relative;width:100%;aspect-ratio:1.25;overflow:hidden;border-radius:10px;background:#e8dcc0;clip-path:polygon(0 2%,3% 0,20% 1%,45% 0,70% 1.2%,97% 0,100% 3%,99.4% 30%,100% 60%,99.2% 97%,96% 100%,60% 99%,30% 100%,3% 99.2%,0 96%,.7% 60%,0 30%)}
.layer{position:absolute;left:-6%;width:112%;bottom:-3%;background-size:100% auto;background-repeat:no-repeat;background-position:center bottom;will-change:transform}
.layer.back{top:-6%;bottom:-6%;background-size:cover;background-position:center}
.layer.mid{height:62%;filter:drop-shadow(0 6px 5px rgba(60,30,10,.28))}
.layer.front{height:34%;bottom:-6%;filter:drop-shadow(0 -2px 6px rgba(60,30,10,.3))}
.cast{position:absolute;inset:0;will-change:transform}
.actor{position:absolute;bottom:var(--ground,7%);height:58%;filter:drop-shadow(4px 8px 5px rgba(50,20,10,.35));transform-origin:50% 100%}
.actor img{height:100%;display:block}
.prop{position:absolute;height:26%;filter:drop-shadow(3px 6px 4px rgba(50,20,10,.35))}
.grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.55;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .6  0 0 0 0 .5  0 0 0 0 .4  0 0 0 .25 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.poofs{position:absolute;inset:0;pointer-events:none}
.bit{position:absolute;width:9px;height:7px;border-radius:2px}
.pageno{font:700 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#a38a6a;margin:14px 0 2px}
.ptitle{margin:0 0 10px;font-size:25px;font-weight:800;line-height:1.15}
.text{font-size:var(--fs);line-height:1.6}
.text p{margin:0 0 .85em}
.text p.anchor:before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e46a6a,#a52a2a);margin-right:6px;vertical-align:1px;opacity:0;transition:opacity .3s}
.jack .text p.anchor:before{opacity:.8}
.text p:first-child:first-letter{font-size:3.1em;float:left;line-height:.85;margin:6px 8px 0 0;color:var(--berry);font-weight:800}
.w.hl{background:linear-gradient(transparent 55%,rgba(224,177,63,.55) 55%)}
.jack .text{line-height:2.05}
.slot{position:relative;cursor:pointer;border-bottom:2px dotted #8a7660;padding:6px 2px;margin:-6px 0;border-radius:4px}
.jack .slot{border-bottom:3px dotted var(--corn);background:rgba(111,143,216,.08)}
.jack .slot.gold{border-bottom-color:var(--mustard)}
.slot .ico{font:700 10px var(--sans);vertical-align:super;color:var(--corn);margin-left:2px}
.slot:not(.live) .ico{display:none}
.jack .slot.target{background:rgba(182,224,63,.35);outline:2px dashed var(--lime)}
.jack .slot.off{opacity:.45;pointer-events:none}
.staged{text-decoration:line-through;text-decoration-color:#6b6b6b;text-decoration-thickness:2px;color:#8a7f73}
.pencil{font-family:'Fraunces',serif;font-style:italic;color:#5b5b5b;margin-left:4px}
.inked .pencil{color:var(--berry)}
.retold{font-style:normal}
.retold .new{background:linear-gradient(transparent 60%,rgba(184,71,110,.18) 60%)}
.recap{font-style:italic;color:#7d6a58}
.redx{font:italic 400 15px var(--serif);color:#7d6a58}
.margin{display:flex;gap:10px;align-items:flex-start;margin-top:8px;min-height:60px}
.margin .mort{width:52px;flex:none;filter:drop-shadow(2px 3px 2px rgba(0,0,0,.25))}
.margin p{margin:0;font-style:italic;font-size:17px;line-height:1.45;color:#5a4460;background:#e2d4b0;border-radius:12px;padding:10px 12px;position:relative;flex:1}
.margin p:empty{display:none}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.actions .btn{flex:1 1 auto}
.jackin{background:var(--berry)!important;box-shadow:0 3px 0 #4a1a17!important}
.pulse{animation:pulse 1.4s ease-in-out 2}
@keyframes pulse{50%{transform:scale(1.06)}}
/* hand: fan of v1-style framed cards, grotesque palette */
.hand{position:sticky;bottom:0;width:min(640px,100vw);display:flex;justify-content:center;align-items:flex-end;padding:30px 8px calc(30px + env(safe-area-inset-bottom));padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));min-height:10px;overflow:visible;z-index:5}
.card{--w:clamp(92px,26vw,132px);position:relative;width:var(--w);aspect-ratio:512/720;flex:none;border:0;padding:0;background:none;cursor:pointer;transform:translateY(var(--lift,0)) rotate(var(--rot,0));transform-origin:50% 140%;transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .2s;margin-left:calc(var(--w) * -.34);-webkit-tap-highlight-color:transparent}
.card:first-child{margin-left:0}
@media (min-width:560px){.card{margin-left:calc(var(--w) * -.18)}}
.card:hover,.card:focus-visible,.card.sel{transform:translateY(-26px) rotate(0) scale(1.07);z-index:40!important}
.card:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:12px}
.cf{position:absolute;inset:0;border-radius:calc(var(--w)*.066);background:linear-gradient(160deg,#2b211a,#140f0b);box-shadow:0 8px 16px rgba(10,5,2,.55),inset 0 0 0 calc(var(--w)*.012) #8b6d2b;overflow:hidden;display:block;font-family:var(--serif);color:#eadfc4}
.cf:before{content:"";position:absolute;inset:calc(var(--w)*.016);border-radius:calc(var(--w)*.055);border:calc(var(--w)*.012) solid #a8852f;pointer-events:none;z-index:3}
.cf .art{position:absolute;left:5%;right:5%;top:3.6%;height:59.7%;border-radius:calc(var(--w)*.04);overflow:hidden;background:radial-gradient(circle at 50% 40%,#5a4a33,#231b13);box-shadow:inset 0 0 0 2px rgba(168,133,47,.7)}
.cf .art img{width:100%;height:100%;object-fit:contain;display:block}
.cf .art:after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,rgba(20,15,11,.85))}
.cf .gem{position:absolute;left:6%;top:4%;width:calc(var(--w)*.21);height:calc(var(--w)*.21);border-radius:50%;background:#1d1610;border:calc(var(--w)*.02) solid #a8852f;display:grid;place-items:center;font:800 calc(var(--w)*.13) var(--serif);color:#eadfc4;z-index:4}
.cf .rib{position:absolute;left:50%;top:60.5%;transform:translateX(-50%);padding:.25em .9em;border-radius:999px;font:700 calc(var(--w)*.062) var(--sans);letter-spacing:.08em;text-transform:uppercase;background:#6b5a3a;color:#efe4c8;white-space:nowrap;z-index:4}
.cf .cn{position:absolute;left:6%;right:6%;top:68%;text-align:center;font:800 calc(var(--w)*.11) var(--serif);line-height:1.05}
.cf .cs{position:absolute;left:8%;right:8%;top:84%;text-align:center;font:italic 400 calc(var(--w)*.075) var(--serif);color:rgba(234,223,196,.75);line-height:1.1}
.cf .cd{position:absolute;left:8%;right:8%;top:81%;text-align:center;font:italic 400 calc(var(--w)*.05) var(--serif);color:rgba(234,223,196,.85);line-height:1.25}
.card.common .rib{background:#8a7448}
.card.uncommon .rib{background:#4f5f7a}
.card.rare .rib{background:#7a2e2a}.card.rare .cf{box-shadow:0 8px 16px rgba(10,5,2,.55),inset 0 0 0 calc(var(--w)*.014) #c9a227}
.card.legendary .rib{background:#4c2f57}.card.legendary .cf{background:linear-gradient(160deg,#2e2232,#130d14)}
/* subtle sheen only: none on common/uncommon */
.card .glint{position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(115deg,transparent 40%,rgba(255,240,200,.10) 50%,transparent 60%);background-size:260% 100%;background-position:130% 0;opacity:0}
.card.legendary .glint{background:linear-gradient(115deg,transparent 38%,rgba(200,255,230,.08) 46%,rgba(255,220,250,.12) 50%,rgba(255,245,200,.08) 54%,transparent 62%);background-size:260% 100%}
.card.rare:hover .glint,.card.legendary:hover .glint,.card.rare.sel .glint,.card.legendary.sel .glint,.card.rare:focus-visible .glint,.card.legendary:focus-visible .glint{opacity:1;animation:glint 5s ease-in-out infinite}
@keyframes glint{to{background-position:-130% 0}}
.card.sel .cf{box-shadow:0 14px 26px rgba(10,5,2,.6),0 0 0 3px var(--lime)}
.card.notarget{filter:grayscale(.8) brightness(.75)}
.card .nt{position:absolute;left:6%;right:6%;top:42%;z-index:6;background:rgba(20,15,11,.88);color:#efe4c8;font:700 calc(var(--w)*.07) var(--sans);text-align:center;border-radius:4px;padding:3px;transform:rotate(-6deg)}
/* inspect pop-up */
.inspect{position:fixed;inset:0;z-index:50;background:rgba(15,10,6,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));perspective:1200px;overflow:auto}
.inspect .big{--w:min(72vw,300px,42vh);margin:0!important;transform:none!important;cursor:pointer}
.inspect .iq{margin:0;max-width:340px;text-align:center;font:italic 400 17px var(--serif);color:#efe4c8}
.inspect .ibtns{display:flex;flex-direction:column;gap:10px;width:min(340px,90vw)}
.inspect .inote{margin:0;text-align:center;color:#efe4c8;font:700 14px var(--sans)}
@media (orientation:landscape) and (max-height:500px){.inspect{flex-direction:row;flex-wrap:wrap}.inspect .big{--w:min(34vh*1.3,240px)}.hand{position:relative}.card{--w:clamp(80px,14vw,116px)}}
/* drawer */
.drawer{position:fixed;left:0;right:0;bottom:0;max-height:62vh;background:var(--cream);border-radius:20px 20px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.3);padding:14px 14px calc(14px + env(safe-area-inset-bottom));overflow:auto;z-index:20}
.dhead{display:flex;justify-content:space-between;align-items:center;font:700 16px var(--sans);margin-bottom:10px}
.x{font-size:20px;background:none;border:0;min-width:44px;min-height:44px;cursor:pointer}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.tile{background:var(--paper);border:0;border-radius:12px;padding:8px;min-height:56px;font:700 14px var(--sans);color:var(--ink);cursor:pointer;box-shadow:0 3px 0 #d7c4a4;display:flex;flex-direction:column;align-items:center;gap:4px}
.tile img{width:64px;height:64px;object-fit:contain}
.modal{position:fixed;inset:0;background:rgba(30,15,25,.5);display:grid;place-items:center;z-index:30}
.sheet{background:var(--paper);border-radius:16px;padding:22px;width:min(380px,92vw);font:400 16px var(--sans);display:flex;flex-direction:column;gap:6px}
.sheet h3{margin:0 0 8px;font:800 24px var(--serif)}
.fine{font-size:13px;color:#7d6a58;margin:0 0 8px}
.report{text-align:center}.report .grade{font:800 64px var(--serif);color:var(--berry);margin:6px 0}
.prizes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.story h4{margin:16px 0 4px;font-size:18px}.story p{font-size:16px;line-height:1.5;margin:0 0 .6em}
@media (min-width:900px){:root{--fs:21px}.hud,.book,.hand{width:640px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body.rm *{animation:none!important;transition:none!important}

.page{background-image:radial-gradient(rgba(60,40,20,.12) 1px,transparent 1px),repeating-linear-gradient(45deg,rgba(60,40,20,.035) 0 1px,transparent 1px 4px)!important}
.illus{filter:sepia(.12) contrast(1.04)}
.tome{box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 40px rgba(0,0,0,.45)!important}
.amb{position:absolute;left:-6%;top:-6%;width:112%!important;height:112%!important;pointer-events:none;will-change:transform}
.amb.air{mix-blend-mode:screen}
.sway .layer.front{animation:sway 6s ease-in-out infinite alternate}
.sway .layer.mid{animation:sway 9s ease-in-out infinite alternate-reverse}
@keyframes sway{from{background-position:49.6% bottom}to{background-position:50.4% bottom}}
.layer.front:after{content:"";position:absolute;inset:0;background:inherit;opacity:0}
.layer.mid,.layer.front{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}
.actor .shadow{position:absolute;left:12%;right:12%;bottom:-3%;height:7%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(20,12,6,.55),rgba(20,12,6,0) 70%);z-index:-1}
.actor img{position:relative}
.actor{filter:drop-shadow(3px 5px 3px rgba(30,15,5,.3))}
.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden}
.backdrop .bd{position:absolute;inset:-4%;background-size:cover;background-position:center;animation:deskdrift 40s ease-in-out infinite alternate}
.backdrop:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(20,14,9,.15) 0,rgba(20,14,9,.55) 55%,rgba(10,6,3,.88) 100%)}
@keyframes deskdrift{to{transform:scale(1.05) translate(-1%,1%)}}
.clippy{position:absolute;top:-22px;right:18px;width:62px;height:74px;border:0;background:none;padding:0;cursor:pointer;z-index:8;transform:rotate(12deg);filter:drop-shadow(2px 4px 3px rgba(0,0,0,.45))}
.clippy img{width:100%;height:100%;object-fit:contain}
.clippy:hover,.clippy:focus-visible{transform:rotate(4deg) translateY(-3px)}
.clippy:focus-visible{outline:3px solid var(--lime);border-radius:8px}
#continue{background:var(--mustard);color:#1d1610;box-shadow:0 3px 0 #6b4f12}
@media (min-width:1000px){.hud,.book,.hand{width:740px}:root{--fs:22px}}
.backdrop .bd{background-image:var(--d)}
@media (max-width:700px){.backdrop .bd{background-image:var(--dm)}}

.moodm{display:flex;align-items:center;gap:4px;background:var(--paper);border-radius:999px;padding:4px 10px;box-shadow:0 2px 0 #b9a47a}
.moodm b{font-size:18px}.moodm span{width:44px;height:8px;border-radius:4px;background:#cdbf9c;overflow:hidden}.moodm i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sage),var(--mustard),var(--tomato));transition:width .5s}
.fold{position:absolute;top:0;right:0;width:0;height:0;z-index:7;transition:all .4s}
.dogeared .fold{width:46px;height:46px;background:linear-gradient(225deg,#2a1d12 50%,#d8c9a3 50%);box-shadow:-3px 3px 5px rgba(0,0,0,.3);border-bottom-left-radius:6px}
.dogeared .clippy{right:64px}
#intro{position:fixed;inset:0;z-index:60;background:rgba(14,9,5,.82);justify-content:space-between;padding:max(16px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));overflow:hidden}
.istage{position:relative;flex:1;width:min(560px,100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;perspective:1000px}
.icap{width:min(560px,100%);min-height:5.5em;margin:0;background:var(--paper);border-radius:14px;padding:12px 14px;font:italic 400 17px/1.45 var(--serif);color:var(--ink);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.iskip{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;min-height:44px;padding:8px 14px;font-size:14px}
.ibook{width:min(230px,58vw);aspect-ratio:3/4;background:linear-gradient(90deg,#2a1a14 0 8%,#5b3a26 8%);border-radius:6px 14px 14px 6px;display:grid;place-items:center;text-align:center;color:#e8d8a8;font:800 20px/1.2 var(--serif);padding:18px;box-shadow:0 20px 40px rgba(0,0,0,.6)}
.ibook small{font-weight:400;font-style:italic;font-size:15px}
.imort{position:absolute;left:0;bottom:0;height:min(42vh,320px);filter:drop-shadow(4px 8px 6px rgba(0,0,0,.5))}
.ifan{display:flex;justify-content:center}.ifan .card{margin-left:-18px}.ifan .card:first-child{margin-left:0}
.iscene{position:relative;width:min(420px,92vw);aspect-ratio:1.4;border-radius:12px;background-size:cover;background-position:center;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.ipip{position:absolute;left:22%;bottom:4%;height:78%}.itrom{position:absolute;right:16%;bottom:10%;height:36%;filter:drop-shadow(3px 6px 4px rgba(0,0,0,.4))}
.itext{margin:0;background:var(--paper);padding:10px 16px;border-radius:10px;font:400 21px var(--serif);color:var(--ink)}
.iw{border-bottom:3px dotted #8a7660;padding:0 2px}.iw.ilive{border-bottom-color:var(--corn);background:rgba(182,224,63,.35);outline:2px dashed var(--lime);border-radius:4px}
.itext .new{background:linear-gradient(transparent 60%,rgba(184,71,110,.25) 60%)}
.idemo{position:absolute;bottom:4%;right:8%;margin:0!important}
.itile{position:absolute;bottom:30%;width:110px}
.ijack{min-width:160px}
.ihud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;font-size:18px}
.iclip{width:90px;height:auto}
.ibegin{margin-top:6px}
@media (orientation:landscape) and (max-height:500px){.imort{height:60vh}.icap{min-height:3.5em;font-size:15px}.iscene{width:min(300px,45vw)}}
.hand .card:nth-last-child(n+6),.hand .card:nth-last-child(n+6)~.card{--w:clamp(80px,21vw,124px)}
.hand{z-index:30!important}.book{z-index:1}
/* card polish r3 */
.cf{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .8 0 0 0 0 .6 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 90% at 50% 30%,#33271d,#150f0b 80%);box-shadow:0 8px 16px rgba(10,5,2,.55),inset 0 0 0 calc(var(--w)*.012) #8b6d2b,inset 0 1px 0 calc(var(--w)*.02) rgba(255,230,170,.08),inset 0 -2px 0 calc(var(--w)*.02) rgba(0,0,0,.35),inset 0 0 calc(var(--w)*.09) rgba(0,0,0,.55)}
.card.legendary .cf{background-color:#1c1320;background-blend-mode:normal}
.cf .art{left:7.5%;right:7.5%;top:6%;height:55%;border:calc(var(--w)*.008) solid #1a120c;outline:calc(var(--w)*.008) solid #b8933a;outline-offset:calc(var(--w)*.012);box-shadow:0 calc(var(--w)*.02) calc(var(--w)*.04) rgba(0,0,0,.6),inset 0 0 calc(var(--w)*.05) rgba(0,0,0,.6)}
.cf .gem{left:3.5%;top:2.5%;width:calc(var(--w)*.15);height:calc(var(--w)*.15);font-size:calc(var(--w)*.09);border-width:calc(var(--w)*.014);box-shadow:0 2px 4px rgba(0,0,0,.6)}
.cf .rib{top:63.5%;font-size:calc(var(--w)*.055)}
.cf .tb{position:absolute;left:9%;right:9%;top:70%;bottom:5.5%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.2em;overflow:hidden;text-align:center}
.cf .tb .cn,.cf .tb .cs,.cf .tb .cd{position:static;left:auto;right:auto;top:auto;max-width:100%;overflow-wrap:break-word;hyphens:auto}
.cf .tb .cn{font-size:calc(var(--w)*.098);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 0 #000}
.cf .tb .cs{font-size:calc(var(--w)*.068);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cf .tb .cd{font-size:calc(var(--w)*.05);line-height:1.22}
.inspect .big{--w:min(78vw,320px,46vh)}
.drawer{z-index:60}.tiles{padding:6px 4px 4px;scroll-padding:8px}
body.picking .hand{transform:translateY(70%);opacity:.35;pointer-events:none;transition:transform .25s,opacity .25s}
.hand{transition:transform .25s,opacity .25s}
/* hover lift on inner face so the hit box never moves (no jitter) */
.card:hover,.card:focus-visible,.card.sel{transform:translateY(var(--lift,0)) rotate(var(--rot,0))}
.card .cf{transition:transform .18s ease-out}
.card:focus-visible .cf,.card.sel .cf{transform:translateY(-22px) rotate(calc(var(--rot,0deg) * -1)) scale(1.07)}
@media (prefers-reduced-motion:reduce){.card .cf,.hand{transition:none}}
.actor .rig{position:relative;display:block;width:100%}
.actor .rig .rb{display:block;width:100%}
.actor .rig .rh{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.actor .rig .held{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.actor .rig{height:100%;width:auto;display:inline-block}
.actor .rig .rb{height:100%;width:auto}
.actor .rig .rh{position:absolute;left:0;top:0;width:100%;height:100%}
.actor .rig .held{position:absolute;height:auto!important;display:block}
/* adjective FX (procedural, $0) */
.actor{--fxs:1}
.actor .fxp{position:absolute;pointer-events:none;font:700 18px var(--sans);z-index:3;will-change:transform,opacity}
.fxp.fall{color:#7fb6e6;animation:fxfall 1.6s linear infinite}
.fxp.rise{color:#e9e1c8;animation:fxrise 2.4s ease-out infinite;text-shadow:0 0 4px #000}
.fxp.twk{color:#fff3b0;animation:fxtwk 1.8s ease-in-out infinite;text-shadow:0 0 6px #ffe680}
.actor.fx-nightcap .fxp{font:800 20px var(--serif)}
.actor .puddle{position:absolute;left:20%;right:20%;bottom:-3%;height:7%;border-radius:50%;background:radial-gradient(rgba(110,160,210,.55),transparent 70%);z-index:0}
.actor.fx-sticky .puddle{background:radial-gradient(rgba(200,140,40,.6),transparent 70%)}
.actor.fx-sticky .fxp{font-size:12px}
@keyframes fxfall{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(160%);opacity:0}}
@keyframes fxrise{0%{transform:translate(0,0) scale(.6);opacity:0}25%{opacity:1}100%{transform:translate(14px,-60px) scale(1.2);opacity:0}}
@keyframes fxtwk{0%,100%{transform:scale(.3);opacity:0}50%{transform:scale(1.1);opacity:1}}
.actor.fx-scale-down>img,.actor.fx-scale-down>.rig{transform:scale(.6)!important;transform-origin:50% 100%}
.actor.fx-scale-up>img,.actor.fx-scale-up>.rig{transform:scale(1.3)!important;transform-origin:50% 100%}
.actor.fx-flip>img,.actor.fx-flip>.rig{transform:rotate(180deg)!important;transform-origin:50% 50%}
.actor.fx-ghost>img,.actor.fx-ghost>.rig{opacity:.72;animation:fxflick 3s steps(1) infinite;filter:saturate(.4) brightness(1.2)}
@keyframes fxflick{0%,100%{opacity:.72}48%{opacity:.4}50%{opacity:.75}}
.actor.fx-nightcap>img,.actor.fx-nightcap>.rig{transform:rotate(-6deg)!important;transform-origin:50% 100%}
.actor.fx-monocle>img,.actor.fx-monocle>.rig{animation:fxshifty 3.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes fxshifty{0%,100%{transform:rotate(0) translateX(0)}30%{transform:rotate(-5deg) translateX(-4px)}60%{transform:rotate(4deg) translateX(3px)}}
.actor.fx-fluff>img,.actor.fx-fluff>.rig{filter:drop-shadow(0 0 2px #f4ecd8) drop-shadow(0 0 5px #f4ecd8) drop-shadow(0 0 9px rgba(244,236,216,.7))}
.actor.fx-crown>img,.actor.fx-crown>.rig{filter:drop-shadow(0 0 8px rgba(230,190,60,.85))}
.actor.fx-sparkle>img,.actor.fx-sparkle>.rig{filter:saturate(1.4) drop-shadow(0 0 6px #b6e03f)}
.actor.fx-drip>img,.actor.fx-drip>.rig{filter:brightness(.88) saturate(.8) hue-rotate(-8deg)}
@media (prefers-reduced-motion:reduce){.actor .fxp,.actor>img,.actor>.rig{animation:none!important}}
.drawer{padding-bottom:calc(24px + env(safe-area-inset-bottom))!important;max-height:min(62vh,62dvh);-webkit-overflow-scrolling:touch}
.dchip{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#2b211a;color:#eadfc4;font:700 12px var(--sans);vertical-align:middle}
body.picking .hand{visibility:hidden}
body.picking .card.sel{display:none}
.wm{display:block;width:clamp(92px,26vw,132px);line-height:0;flex:none}
.wm svg{width:100%;height:auto;display:block}
.wmfix{position:fixed;left:max(10px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));z-index:70;pointer-events:none;width:clamp(84px,22vw,140px)}
.cmenu{align-items:stretch;text-align:center;background:var(--paper) url("art/clippy.webp") no-repeat -999px 0;border:2px solid #8b6d2b;box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 0 30px rgba(120,90,40,.25)}
.cmenu .cmimg{width:64px;height:auto;align-self:center;transform:rotate(-12deg)}
.cmenu .btn{min-height:48px}
.modal{z-index:80}
@media (hover:hover){.card:hover .cf{transform:translateY(-22px) rotate(calc(var(--rot,0deg) * -1)) scale(1.07)}}
.tile .pz{font:700 10px var(--sans);color:#7a2e2a;text-transform:uppercase;font-style:normal}
.toast{position:fixed;left:50%;top:max(56px,calc(env(safe-area-inset-top) + 48px));transform:translateX(-50%);z-index:90;background:#2b211a;color:#eadfc4;border:2px solid #b8933a;border-radius:12px;padding:10px 16px;font:700 15px var(--sans);box-shadow:0 8px 20px rgba(0,0,0,.5);max-width:90vw;text-align:center}
.marks{list-style:none;padding:0;margin:0 0 12px;text-align:left;display:grid;gap:6px}
.marks li{padding:8px 10px;border-radius:8px;background:rgba(43,33,26,.08);opacity:.6;font:400 15px var(--sans)}
.marks li.got{opacity:1;background:rgba(182,224,63,.25)}.marks li.got b:before{content:"🔖 "}
.actor[data-role="ember"]{height:78%}