:root{
  --night:#0b1622; --night2:#13283a; --glass:rgba(10,20,32,.86); --glass2:rgba(22,38,54,.9);
  --gold:#d6b25e; --gold2:#f3dc9a; --gold3:#8a6a2a; --ink:#21180f; --cream:#efe6d2; --mute:#a9b4bd;
  --parch:#efe1bf; --parch2:#e2cd9f; --parchline:#cbb07a; --teal:#2d8a83; --ember:#ff9a4a; --ok:#5cc28c; --bad:#e2735f;
  --display:"Cinzel","Trajan Pro","Times New Roman",serif; --body:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
  --r:16px; --shadow:0 18px 50px rgba(0,0,0,.55); --hc:#2d8a83; --hc2:#d9a441; --hdark:#123c3a;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--night)}
body{color:var(--cream);font-family:var(--body);font-size:18px;line-height:1.5;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 60px;overflow-x:hidden}
#root{position:relative;z-index:2;max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.15;margin:0;letter-spacing:.02em;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
.mute{color:var(--mute)}
.label{font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.sr{position:absolute;left:-9999px}

/* ---------- world backdrop ---------- */
.world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.world .scene-bg{position:absolute;inset:0;width:100%;height:100%}
.world.dim::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,rgba(8,16,26,.35),rgba(5,10,18,.86) 70%)}
.world.dim .scene-bg{filter:blur(3px) saturate(.9);transform:scale(1.04)}
.spark{animation:spark 6s ease-in-out infinite}
@keyframes spark{0%,100%{opacity:.1;transform:translateY(0)}50%{opacity:1;transform:translateY(-14px)}}
.mist{animation:mist 40s ease-in-out infinite alternate}
@keyframes mist{to{transform:translateX(-80px)}}
.cloudmove{animation:mist 60s ease-in-out infinite alternate-reverse}
.birds g{animation:glide 9s ease-in-out infinite}
@keyframes glide{50%{transform:translateY(-10px)}}

/* ---------- panels ---------- */
.stage{background:var(--glass);border:1px solid rgba(214,178,94,.45);border-radius:22px;box-shadow:var(--shadow),inset 0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,240,200,.08);padding:clamp(18px,3.6vw,34px);display:flex;flex-direction:column;gap:20px;backdrop-filter:blur(6px)}
.enter{animation:enter .5s cubic-bezier(.2,.8,.2,1)}
@keyframes enter{from{opacity:0;transform:translateY(16px)}}
.panel{border-radius:var(--r);padding:16px;background:var(--glass2);border:1px solid rgba(214,178,94,.25)}
.panel h3{font-size:1.08rem;margin-bottom:10px;display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--gold2)}
.parch{background:linear-gradient(160deg,var(--parch),var(--parch2));color:var(--ink);border:1px solid var(--parchline);box-shadow:inset 0 0 28px rgba(120,84,30,.25)}
.parch .mute{color:#6b5636}
.parch .label{color:#7a5a20}
.headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.headrow h1{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--gold2);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.kicker{font-family:var(--display);font-size:.95rem;color:var(--gold);letter-spacing:.12em;text-transform:uppercase}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--gold3);border-radius:12px;padding:12px 24px;font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:.04em;color:#1c1408;background:linear-gradient(180deg,#f6dd96,#d6a843 55%,#a87a25);box-shadow:0 4px 0 #5e4415,0 10px 24px rgba(0,0,0,.4),inset 0 1px 0 #fff4c8;transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)} .btn:active{transform:translateY(2px);box-shadow:0 1px 0 #5e4415}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--gold2);border-color:rgba(214,178,94,.55);box-shadow:none}
.btn.ghost:hover{background:rgba(214,178,94,.12)}
.btn.ember{background:linear-gradient(180deg,#ffb27a,#e0642c 55%,#a83d16);border-color:#6d2a10;box-shadow:0 4px 0 #5a210b,0 10px 24px rgba(0,0,0,.4),inset 0 1px 0 #ffd9bb}
.btn.big{font-size:1.2rem;padding:16px 34px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:grayscale(.4)}
.nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(214,178,94,.45);background:rgba(255,255,255,.04);border-radius:999px;padding:5px 13px;font-weight:700;font-size:.95rem;color:var(--cream);transition:transform .12s,background .12s}
.chip:hover{transform:translateY(-1px);background:rgba(214,178,94,.14)}
.chip[aria-pressed="true"]{background:var(--gold);color:#1c1408;border-color:var(--gold)}
.parch .chip{color:var(--ink);border-color:var(--parchline);background:rgba(255,255,255,.45)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.icobtn{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(214,178,94,.4);background:rgba(10,20,32,.6);border-radius:10px;padding:6px 11px;font-weight:700;font-size:.88rem;color:var(--gold2)}
.icobtn:hover{background:rgba(214,178,94,.14)}
.field{font:inherit;font-size:1.05rem;width:100%;border:1px solid var(--parchline);background:#fbf4e2;border-radius:10px;padding:10px 13px;color:var(--ink)}
.field.dark{background:rgba(255,255,255,.06);border-color:rgba(214,178,94,.4);color:var(--cream)}

/* ---------- HUD ---------- */
.hud{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;background:var(--glass);border:1px solid rgba(214,178,94,.4);border-radius:18px;padding:8px 10px;box-shadow:var(--shadow)}
.who{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;text-align:left}
.who .ava{width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid var(--gold);flex:none;background:#000}
.who .ava svg{width:46px;height:auto;display:block;margin-top:-6px}
.who b{font-family:var(--display);display:block;font-size:1rem;color:var(--gold2)}
.who small{color:var(--mute);font-weight:700;font-size:.8rem}
.stats{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.35);border:1px solid rgba(214,178,94,.3);border-radius:999px;padding:4px 12px 4px 8px;font-weight:800;font-variant-numeric:tabular-nums}
.journey{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.jstep{display:flex;align-items:center;gap:6px;border:1px solid rgba(214,178,94,.35);background:rgba(0,0,0,.25);border-radius:999px;padding:4px 12px;font-weight:800;font-size:.9rem;color:var(--mute)}
.jstep.now{border-color:var(--gold);color:#1c1408;background:var(--gold)}
.jstep.done{color:var(--gold2)}
.jstep:disabled{cursor:default;opacity:.5}
.jarrow{color:var(--gold3)}
.lvlpills{display:flex;background:rgba(0,0,0,.3);border-radius:10px;padding:3px;border:1px solid rgba(214,178,94,.25)}
.lvlpills button{border:0;background:none;border-radius:8px;padding:4px 10px;font-weight:800;font-size:.82rem;color:var(--mute)}
.lvlpills button[aria-pressed="true"]{background:var(--gold);color:#1c1408}

/* ---------- title screen ---------- */
.title{min-height:calc(100vh - 80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:24px;align-items:end;padding-bottom:10px}
.logo{font-family:var(--display);font-weight:700;font-size:clamp(2.8rem,8vw,5.4rem);line-height:.95;background:linear-gradient(180deg,#fff4cc,#e6bf62 55%,#9a7022);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(0,0,0,.7));align-self:start;margin-top:4vh}
.subtitle{font-family:var(--display);color:var(--gold2);font-size:clamp(1rem,2.2vw,1.3rem);letter-spacing:.2em;margin-top:10px;text-shadow:0 2px 10px #000}
.subtitle::before,.subtitle::after{content:" — "}
.sign{position:relative;background:linear-gradient(180deg,#7a5434,#5a3b22 60%,#3f2814);border:3px solid #2b1a0c;border-radius:14px;padding:22px 18px 18px;box-shadow:0 22px 50px rgba(0,0,0,.7),inset 0 0 0 2px rgba(255,220,160,.12),inset 0 0 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:10px}
.sign::before,.sign::after{content:"";position:absolute;bottom:-60px;width:12px;height:62px;background:linear-gradient(90deg,#3f2814,#5a3b22);border-radius:3px;z-index:-1}
.sign::before{left:24%}.sign::after{right:24%}
.sign h2{font-size:1.25rem;text-align:center;color:#f6dfae;text-shadow:0 2px 0 #2b1a0c}
.sign .nail{position:absolute;top:8px;width:8px;height:8px;border-radius:50%;background:radial-gradient(#d9c7a0,#6b5a3a)}
.signbtn{border:1px solid rgba(255,220,160,.3);background:rgba(20,10,4,.35);border-radius:10px;padding:10px 12px;color:#f6dfae;font-family:var(--display);font-weight:700;letter-spacing:.04em;text-align:left;display:flex;align-items:center;gap:10px}
.signbtn:hover{background:rgba(255,220,160,.14)}
.signbtn.main{background:linear-gradient(180deg,#f6dd96,#d6a843 55%,#a87a25);color:#1c1408;border-color:#5e4415;justify-content:center;font-size:1.1rem}
@media (max-width:760px){.title{grid-template-columns:1fr;align-items:start}.logo{margin-top:2vh}}

/* ---------- character + house select ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.char{border:2px solid rgba(214,178,94,.25);background:#05080d;border-radius:16px;padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative}
.char svg{width:100%;height:auto;display:block}
.char span{font-family:var(--display);font-weight:700;padding:8px 6px;background:linear-gradient(180deg,rgba(10,16,24,.4),#0a1018);color:var(--gold2);text-align:center;font-size:.95rem}
.char:hover{transform:translateY(-4px)}
.char[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 4px rgba(214,178,94,.25),0 0 40px rgba(214,178,94,.25)}
.char[aria-pressed="true"]::after{content:"✓";position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#1c1408;display:grid;place-items:center;font-weight:900}
.houses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:820px){.houses{grid-template-columns:1fr}}
.house{border:2px solid rgba(214,178,94,.25);border-radius:20px;padding:18px;text-align:left;display:flex;flex-direction:column;gap:10px;align-items:center;background:linear-gradient(180deg,var(--hc-a),#070b12 80%);transition:transform .2s,box-shadow .2s;color:var(--cream)}
.house:hover{transform:translateY(-4px)}
.house[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 4px rgba(214,178,94,.25),0 0 50px var(--hc-a)}
.house .nm{font-family:var(--display);font-size:1.45rem;color:var(--gold2)}
.house .yr{font-family:var(--display);font-weight:700;background:rgba(0,0,0,.4);border:1px solid rgba(214,178,94,.5);border-radius:999px;padding:2px 12px;color:var(--gold2)}
.house p{font-size:.95rem;text-align:center}
.house i{font-family:var(--display);font-style:italic;color:var(--gold);font-size:.9rem}
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.levels{grid-template-columns:1fr}}
.lvl{border:2px solid rgba(214,178,94,.25);border-radius:18px;padding:18px;text-align:left;display:flex;flex-direction:column;gap:8px;background:var(--glass2);color:var(--cream);transition:transform .18s}
.lvl:hover{transform:translateY(-3px)}
.lvl[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 4px rgba(214,178,94,.22)}
.lvl .nm{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--gold2)}
.lvl ul{margin:0;padding-left:20px}
.meter{display:flex;gap:4px}.meter i{width:24px;height:8px;border-radius:9px;background:rgba(255,255,255,.12)}.meter i.f{background:var(--gold)}
.notebox{background:rgba(214,178,94,.12);border:1px solid rgba(214,178,94,.4);border-radius:14px;padding:12px 16px;font-weight:700}

/* ---------- great hall ---------- */
.hallgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px}
@media (max-width:860px){.hallgrid{grid-template-columns:1fr}}
.today{position:relative;overflow:hidden;border-radius:20px;padding:22px;background:linear-gradient(135deg,var(--hdark),#0a121c 70%);border:1px solid var(--gold);display:flex;flex-direction:column;gap:12px}
.today::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(rgba(255,207,106,.35),transparent 70%)}
.today h2{font-size:clamp(1.4rem,3.4vw,2rem);color:var(--gold2)}
.today .glyphbig{position:absolute;right:20px;top:20px;color:var(--gold);opacity:.85}
.bonus{display:inline-flex;align-items:center;gap:6px;background:rgba(255,154,74,.16);border:1px solid rgba(255,154,74,.6);color:#ffd2ac;border-radius:999px;padding:3px 12px;font-weight:800;font-size:.85rem;align-self:flex-start}
.qbook{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.qcardb{border:1px solid rgba(214,178,94,.3);background:var(--glass2);border-radius:16px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:6px;color:var(--cream);transition:transform .15s,border-color .15s;position:relative}
.qcardb:hover{transform:translateY(-3px);border-color:var(--gold)}
.qcardb b{font-family:var(--display);font-size:1.08rem;color:var(--gold2)}
.qcardb .meta{font-size:.82rem;color:var(--mute);font-weight:700}
.qcardb .stars{display:flex;gap:2px}
.qcardb .tag{position:absolute;top:10px;right:10px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 8px;background:rgba(255,154,74,.2);color:#ffd2ac}
.qcardb .gl{color:var(--gold)}
.streakbox{display:flex;align-items:center;gap:14px}
.streakbox .big{font-family:var(--display);font-size:2.2rem;color:#ffd2ac;line-height:1}
.week{display:flex;gap:6px;margin-top:10px}
.week span{flex:1;text-align:center;font-size:.75rem;font-weight:800;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:3px}
.week i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(214,178,94,.25)}
.week i.on{background:radial-gradient(#ffcf6a,#e0642c);border-color:#ffcf6a}
.week i.tdy{outline:2px solid var(--gold2);outline-offset:2px}

/* ---------- quest: think ---------- */
.questbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.scroll{border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.scroll .gl{color:#7a5a20;flex:none;margin-top:2px}
.charm{display:flex;gap:10px;align-items:center;background:rgba(214,178,94,.1);border:1px dashed rgba(214,178,94,.55);border-radius:12px;padding:10px 12px;font-weight:700;font-size:.95rem}
.thinkgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:start}
@media (max-width:860px){.thinkgrid{grid-template-columns:1fr}}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.vcard{border-radius:14px;border:1px solid rgba(214,178,94,.35);background:linear-gradient(180deg,#1d3346,#0f1c29);min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center;position:relative;transition:transform .2s;color:var(--cream)}
.vcard:hover{transform:translateY(-3px)}
.vcard.open{background:linear-gradient(160deg,var(--parch),var(--parch2));color:var(--ink);border-color:var(--parchline);animation:flip .35s ease-out}
@keyframes flip{from{transform:rotateY(80deg)}}
.vcard .face{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;height:100%;justify-content:center;color:var(--gold)}
.vcard .w{font-family:var(--display);font-weight:700;font-size:1.02rem}
.vcard .face .w{color:var(--cream)}
.vcard .ex{font-size:.85rem;line-height:1.3}
.vcard .mini{border:0;background:#3a2a10;color:#f6dfae;border-radius:999px;font-size:.76rem;font-weight:800;padding:3px 10px}
.vcard .mini.done{background:#245c43;color:#d9ffe9}
.vcard.text{min-height:60px}
.qlist{display:flex;flex-direction:column;gap:10px}
.qcard{border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.qcard label{font-weight:700;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.qcard .qw{font-family:var(--display);font-weight:700;font-size:1.15rem;color:#7a3b12}
.qcard input{font:inherit;font-size:1.05rem;width:100%;border:1px solid var(--parchline);background:#fbf4e2;border-radius:10px;padding:9px 13px;color:var(--ink)}
.qcard .hintrow{display:flex;gap:8px;align-items:center;font-size:.92rem;font-weight:600;color:#5e4520}
.hintbtn{border:1px solid var(--parchline);background:rgba(255,255,255,.5);border-radius:999px;font-size:.8rem;font-weight:800;padding:3px 10px;align-self:flex-start;color:var(--ink)}
.qcard.done label::after{content:"✓";color:#2d7a4c;font-weight:900}
.progress{display:flex;align-items:center;gap:10px;font-weight:800}
.bar{flex:1;height:12px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;min-width:80px;border:1px solid rgba(214,178,94,.25)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#a87a25,#f3dc9a);border-radius:99px;transition:width .4s}
.parch .bar{background:rgba(120,84,30,.18)}
.bankchip{background:rgba(214,178,94,.2)!important;border-color:var(--gold)!important}
.bankchip .x{border:0;background:none;font-weight:900;color:var(--mute);padding:0 0 0 4px}
.extra{display:flex;gap:8px}.extra .field{flex:1}

/* ---------- organise ---------- */
.map{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.7fr) minmax(0,1fr);grid-template-areas:"z0 . z1" "z2 center z3" ". z4 .";gap:28px 24px;align-items:start}
.map svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.map svg.lines path{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:2 8;stroke-linecap:round;opacity:.7}
.center{grid-area:center;align-self:center;justify-self:center;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a4458,#0c1622);border:2px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.15;box-shadow:0 0 40px rgba(214,178,94,.35);position:relative;z-index:1;padding:14px;color:var(--gold2)}
.zone{position:relative;z-index:1;border-radius:16px;padding:12px;min-height:130px;display:flex;flex-direction:column;gap:8px;border:1px solid rgba(214,178,94,.3);border-top:5px solid var(--zc);background:linear-gradient(180deg,color-mix(in srgb,var(--zc) 22%,#0f1c29),#0f1c29);transition:border-color .15s,transform .15s}
.zone.over{border-color:var(--gold2);transform:scale(1.02)}
.zone h3{font-size:1.02rem;display:flex;align-items:center;gap:8px;color:var(--gold2)}
.zone h3 .n{margin-left:auto;font-size:.8rem;background:rgba(0,0,0,.4);border-radius:99px;padding:1px 9px;font-family:var(--body)}
.zone .zh{font-size:.85rem;font-weight:700;color:var(--mute);margin-top:-6px}
.zone .empty{font-size:.88rem;color:var(--mute);font-weight:600;border:1px dashed rgba(214,178,94,.3);border-radius:12px;padding:10px;text-align:center}
@media (max-width:820px){.map{grid-template-columns:1fr;grid-template-areas:"center" "z0" "z1" "z2" "z3" "z4";gap:14px}.map svg.lines{display:none}.center{width:140px;height:140px}}
.tray{border-radius:16px;border:1px dashed rgba(214,178,94,.45);padding:14px;display:flex;flex-direction:column;gap:10px;background:rgba(0,0,0,.2)}
.tray.over{border-color:var(--gold2)}
.traycards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.card{border-radius:12px;padding:10px 12px;box-shadow:0 6px 16px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:7px;cursor:grab;min-width:0;transition:transform .15s}
.card:hover{transform:translateY(-2px)}
.card.dragging{opacity:.4}
.card .txt{font-weight:800;overflow-wrap:anywhere}
.card .src{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7a5a20}
.card ul{margin:0;padding-left:18px;font-size:.93rem}
.card ul li{overflow-wrap:anywhere}
.card ul li button{border:0;background:none;color:#7a5a20;font-weight:900;padding:0 4px}
.acts{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.acts button,.acts select{font:inherit;font-size:.8rem;font-weight:800;border:1px solid var(--parchline);background:rgba(255,255,255,.55);border-radius:999px;padding:3px 9px;color:var(--ink)}
.acts .add{background:#d7ecd9;border-color:#9cc7a3}
.acts .del{color:#a8322a}
.acts .yes{background:#a8322a;color:#fff;border-color:#a8322a}
.inrow{display:flex;gap:6px}.inrow .field{padding:6px 10px;font-size:.95rem}
.inrow button{border:0;background:#3a2a10;color:#f6dfae;border-radius:10px;padding:0 12px;font-weight:800}
.order{border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;border:1px solid rgba(214,178,94,.35);background:rgba(0,0,0,.2)}
.order.over{border-color:var(--gold2)}
.olist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:o}
.olist li{display:flex;align-items:center;gap:10px;background:linear-gradient(160deg,var(--parch),var(--parch2));color:var(--ink);border-radius:12px;padding:8px 10px;counter-increment:o;cursor:grab}
.olist li::before{content:counter(o);flex:none;width:30px;height:30px;border-radius:50%;background:#3a2a10;color:#f6dfae;display:grid;place-items:center;font-family:var(--display);font-weight:700}
.olist li .t{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.newcard{display:flex;gap:8px;flex-wrap:wrap}
.newcard .field{flex:1 1 220px}
.newcard select{font:inherit;border:1px solid rgba(214,178,94,.45);border-radius:10px;padding:8px 10px;background:#0f1c29;color:var(--cream)}

/* ---------- write ---------- */
.writegrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:18px;align-items:start}
.writegrid.nomap{grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){.writegrid{grid-template-columns:1fr}}
.side{display:flex;flex-direction:column;gap:14px}
.mapmini h4{margin:10px 0 4px;font-size:.95rem;display:flex;align-items:center;gap:6px;color:var(--gold2)}
.mapmini h4 i{width:10px;height:10px;border-radius:50%;display:inline-block}
.mapmini ul,.mapmini ol{margin:0;padding-left:22px}
.mapmini li{overflow-wrap:anywhere}
.mapmini li small{color:var(--mute)}
.paper{border-radius:14px;background:#f6ecd2;border:1px solid var(--parchline);padding:6px 6px 6px 48px;position:relative;box-shadow:inset 0 0 40px rgba(120,84,30,.25),0 10px 30px rgba(0,0,0,.4);
  background-image:linear-gradient(90deg,transparent 36px,rgba(168,50,42,.45) 36px,rgba(168,50,42,.45) 38px,transparent 38px),repeating-linear-gradient(#f6ecd2 0 35px,#dccaa0 35px 36px)}
.paper textarea{width:100%;min-height:340px;border:0;background:transparent;font-family:var(--body);font-size:1.18rem;line-height:36px;color:var(--ink);resize:vertical;padding:0 10px;outline:none}
.paper:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,178,94,.4),0 10px 30px rgba(0,0,0,.4)}
.wbar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.count{font-weight:800;font-variant-numeric:tabular-nums;background:rgba(0,0,0,.35);border:1px solid rgba(214,178,94,.4);border-radius:999px;padding:4px 14px;color:var(--gold2)}
.qs{margin:0;padding-left:20px;font-weight:600}
.check{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none}
.check li{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:.95rem}
.check .tick{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.8rem;background:rgba(255,255,255,.08);color:var(--mute);border:1px solid rgba(214,178,94,.3)}
.check li.ok .tick{background:var(--ok);color:#06210f;border-color:var(--ok)}
.check li small{display:block;font-weight:600;color:var(--mute)}
.check label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check input[type=checkbox]{width:22px;height:22px;accent-color:var(--gold);flex:none;margin:1px}
.goal{display:flex;align-items:center;gap:10px;font-weight:800;font-size:.9rem}

/* ---------- reward ---------- */
.reward{text-align:center;align-items:center}
.reward h1{font-size:clamp(1.8rem,5vw,2.8rem);color:var(--gold2)}
.bigstars{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.bigstars .star{width:58px;height:58px;filter:drop-shadow(0 0 12px rgba(255,207,106,.5))}
.bigstars .star.pop{animation:pop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(0) rotate(-90deg);opacity:0}}
.rlist{display:flex;flex-direction:column;gap:4px;font-weight:700;text-align:left}
.rlist li{display:flex;gap:8px;align-items:center}
.final{width:100%;text-align:left;font-size:1.12rem;white-space:pre-wrap;overflow-wrap:anywhere;padding:18px 22px;border-radius:14px}
.unlock{display:flex;gap:16px;align-items:center;background:radial-gradient(circle at 20% 50%,rgba(255,207,106,.2),transparent 60%),var(--glass2);border:1px solid var(--gold);border-radius:16px;padding:14px 18px;text-align:left;width:100%}
.unlock .trophy{flex:none;animation:pop .7s cubic-bezier(.2,1.6,.4,1) both}
.fb{width:100%;display:flex;flex-direction:column;gap:12px;text-align:left}
.fbq{display:flex;flex-direction:column;gap:6px}
.fbq p{font-weight:800;display:flex;gap:8px;align-items:center}
.faces{display:flex;gap:8px;flex-wrap:wrap}
.faces button{border:1px solid rgba(214,178,94,.35);background:rgba(255,255,255,.04);border-radius:12px;padding:6px 10px;display:flex;align-items:center;gap:6px;font-weight:800;font-size:.85rem;color:var(--cream)}
.faces button svg{width:28px;height:28px}
.faces button[aria-pressed="true"]{border-color:var(--gold);background:rgba(214,178,94,.22)}

/* ---------- profile ---------- */
.prof{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:820px){.prof{grid-template-columns:1fr}}
.idcard{border-radius:20px;overflow:hidden;border:2px solid var(--gold);background:#05080d;display:flex;flex-direction:column}
.idcard .pic{position:relative}
.idcard .pic svg.portrait{width:100%;height:auto;display:block}
.idcard .pic .crest{position:absolute;right:10px;bottom:-26px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.idcard .info{padding:16px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg,var(--hdark),#070b12)}
.idcard h2{font-size:1.5rem;color:var(--gold2)}
.rank{font-family:var(--display);color:var(--gold);font-weight:700}
.xp{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.85rem;color:var(--mute)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.stat{border-radius:14px;padding:12px;background:var(--glass2);border:1px solid rgba(214,178,94,.25);display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--display);font-size:1.7rem;display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;color:var(--gold2)}
.stat span{font-size:.85rem;color:var(--mute);font-weight:700}
.skill{display:grid;grid-template-columns:150px minmax(0,1fr) 58px;gap:10px;align-items:center;font-weight:700}
.skill .lv{font-family:var(--display);color:var(--gold2);text-align:right;font-size:.95rem}
.skill .bar{height:14px}
.skill small{grid-column:1/-1;color:var(--mute);font-weight:600;margin-top:-6px;font-size:.82rem}
@media (max-width:520px){.skill{grid-template-columns:110px minmax(0,1fr) 48px}}
.cabinet{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:14px;border-radius:16px;background:linear-gradient(180deg,#3a2614,#22160b);border:2px solid #5a3b22;box-shadow:inset 0 0 30px rgba(0,0,0,.6)}
.item{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:10px 6px 8px;border-radius:12px;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.4));border-bottom:4px solid #6b4a2a}
.item b{font-family:var(--display);font-size:.82rem;color:#f6dfae}
.item small{font-size:.74rem;color:#c9b48d;font-weight:600;line-height:1.25}
.trophy.locked{filter:grayscale(1) brightness(.35) contrast(.8)}
.item.locked b{color:#8d7a5c}
.log{display:flex;flex-direction:column;gap:8px}
.log details{border:1px solid rgba(214,178,94,.25);border-radius:12px;padding:10px 12px;background:rgba(0,0,0,.2)}
.log summary{cursor:pointer;font-weight:800;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.log summary .stars{display:flex;margin-left:auto}
.log p{white-space:pre-wrap;margin-top:8px;padding:10px 12px;border-radius:10px}

/* ---------- calendar ---------- */
.calhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.calhead h2{font-size:1.5rem;color:var(--gold2)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dow{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-align:center;padding:4px 0}
.day{min-height:104px;border-radius:12px;border:1px solid rgba(214,178,94,.22);background:rgba(15,28,41,.85);padding:6px 7px;display:flex;flex-direction:column;gap:3px;text-align:left;color:var(--cream);font-size:.82rem;position:relative;overflow:hidden}
.day .d{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--gold2)}
.day .t{font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.day .gl{color:var(--gold);position:absolute;right:6px;top:6px;opacity:.75}
.day.out{opacity:.25}
.day.weekend{background:rgba(8,14,22,.7)}
.day.future{opacity:.62}
.day.today{border:2px solid var(--gold);box-shadow:0 0 22px rgba(214,178,94,.35)}
.day.done{background:linear-gradient(180deg,rgba(45,138,131,.35),rgba(15,28,41,.9))}
.day .ds{display:flex;gap:1px;margin-top:auto}
.day .ds .star{width:13px;height:13px}
.day:not(:disabled):hover{border-color:var(--gold)}
@media (max-width:640px){.day{min-height:62px;padding:4px}.day .t,.day .gl{display:none}.cal{gap:3px}}
.daysel{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* ---------- teacher / manual / credits / toast / modal ---------- */
.ctable{width:100%;border-collapse:collapse;font-size:.92rem}
.ctable th,.ctable td{text-align:left;vertical-align:top;padding:8px;border-bottom:1px solid rgba(214,178,94,.22)}
.ctable th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.ctable td:first-child{font-weight:800;color:var(--gold2)}
.tscroll{overflow-x:auto}
.hbar{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.92rem;margin-bottom:6px}
.hbar span:first-child{flex:0 0 46%;min-width:0}
.hbar em{font-style:normal;font-variant-numeric:tabular-nums;font-weight:800;width:3.2em;text-align:right;color:var(--gold2)}
.tlist{margin:0;padding-left:20px}.tlist li{margin-bottom:4px}
.note{background:rgba(214,178,94,.12);border:1px solid rgba(214,178,94,.35);border-radius:12px;padding:10px 12px;font-size:.92rem;font-weight:600}
.foot{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;font-size:.85rem}
.foot button{border:0;background:none;font-weight:700;color:var(--gold2);text-decoration:underline;padding:4px}
.say{border:1px solid rgba(214,178,94,.5);background:rgba(10,20,32,.65);border-radius:999px;width:32px;height:32px;display:inline-grid;place-items:center;flex:none;padding:0;color:var(--gold2)}
.parch .say,.qcard .say,.vcard.open .say{background:rgba(255,255,255,.55);border-color:var(--parchline);color:#5e4520}
.say svg{width:17px;height:17px}
.say.on{background:var(--gold);color:#1c1408}
.modal{position:fixed;inset:0;z-index:70;background:rgba(3,6,12,.7);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px}
.modal .box{background:var(--glass);border:1px solid var(--gold);border-radius:20px;padding:22px;max-width:440px;width:100%;display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center;box-shadow:var(--shadow)}
.modal .box.wide{max-width:780px;max-height:88vh;overflow:auto;text-align:left;align-items:stretch}
.modal .box.wide>*{flex-shrink:0}
.modal .box h2{font-size:1.5rem;color:var(--gold2)}
.mtabs{display:flex;gap:6px;flex-wrap:wrap}
.mtabs button{border:1px solid rgba(214,178,94,.45);background:none;border-radius:999px;padding:5px 13px;font-weight:800;font-size:.9rem;color:var(--cream)}
.mtabs button[aria-pressed="true"]{background:var(--gold);color:#1c1408}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:s}
.steps li{display:flex;gap:12px;align-items:flex-start;background:var(--glass2);border:1px solid rgba(214,178,94,.2);border-radius:14px;padding:10px 12px;counter-increment:s}
.steps li::before{content:counter(s);flex:none;width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,#f6dd96,#a87a25);color:#1c1408;display:grid;place-items:center;font-family:var(--display);font-weight:700}
.steps li b{font-family:var(--display);font-size:1rem;display:block;color:var(--gold2)}
.steps li span{font-size:.95rem}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:10px;background:#0b1622;border:1px solid var(--gold);color:var(--cream);border-radius:999px;padding:8px 18px 8px 10px;font-weight:800;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.toast.show{animation:toast .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes toast{from{transform:translate(-50%,30px);opacity:0}}
canvas.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
.profilepick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}

[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.spark,.mist,.cloudmove,.birds g{animation:none}}
@media print{.world,.hud,.nav,.fb,.chips,.foot,.bigstars,.unlock,.rlist{display:none!important}.stage{background:#fff;color:#000;box-shadow:none;border:0}body{background:#fff}.final{background:#fff;color:#000}}

/* ================= v4: explorable castle ================= */
.world.room::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,18,.15),rgba(5,10,18,.55))}
.bob{animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.room-library .bob,.room-quill .bob{transform-box:fill-box}
.flick{animation:flick .18s ease-in-out infinite alternate;transform-origin:center bottom;transform-box:fill-box}
@keyframes flick{to{transform:scaleY(.92) scaleX(1.05)}}
.wandtip{animation:tip 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes tip{50%{transform:scale(1.35);opacity:.75}}
.roomtag{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);color:var(--gold2);background:rgba(0,0,0,.45);border:1px solid rgba(214,178,94,.5);border-radius:999px;padding:4px 14px 4px 10px;font-size:.9rem;letter-spacing:.06em}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.doorcard{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--cream);position:relative}
.doorcard svg.door{width:100%;max-width:170px;height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6));transition:filter .3s}
.doorcard .leaf{transition:transform .6s cubic-bezier(.3,.8,.3,1);transform-box:fill-box}
.doorcard .leaf.l{transform-origin:left center}.doorcard .leaf.r{transform-origin:right center}
.doorcard:not(.locked):hover .leaf,.doorcard:not(.locked):focus-visible .leaf,.doorcard.opening .leaf{transform:scaleX(.12)}
.doorcard:not(.locked):hover svg.door{filter:drop-shadow(0 0 22px rgba(255,207,106,.55))}
.doorcard .plaque{font-family:var(--display);font-weight:700;font-size:.92rem;text-align:center;background:linear-gradient(180deg,#6b4a2a,#3f2814);border:1px solid #2b1a0c;color:#f6dfae;border-radius:8px;padding:6px 10px;box-shadow:0 4px 10px rgba(0,0,0,.5);line-height:1.2}
.doorcard small{font-size:.8rem;color:var(--mute);font-weight:700;text-align:center;line-height:1.25}
.doorcard.locked{cursor:not-allowed}.doorcard.locked .plaque{filter:grayscale(.6) brightness(.8)}
.doorcard.current .plaque{background:linear-gradient(180deg,#f6dd96,#a87a25);color:#1c1408}
.doorcard .step{position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:2;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#1c1408;display:grid;place-items:center;font-family:var(--display);font-weight:700;border:2px solid #1c1408}
.doorcard .step.ok{background:var(--ok)}
.path{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:800;font-size:.9rem;color:var(--mute)}
.path b{color:var(--gold2)}

/* ---------- Catch the Missing Words ---------- */
.arena{position:relative;height:340px;border-radius:18px;overflow:hidden;border:1px solid rgba(214,178,94,.45);background:radial-gradient(ellipse at 50% 40%,rgba(255,207,106,.12),rgba(5,10,18,.6)),rgba(10,16,26,.65)}
.arena .prompt{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:min(92%,640px);z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.arena .clue{display:flex;gap:10px;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;font-size:1.12rem;font-weight:700}
.arena .clue .blank{display:inline-block;min-width:80px;border-bottom:3px dashed #7a5a20;margin:0 4px}
.orb{position:absolute;z-index:2;width:118px;height:118px;border-radius:50%;border:1px solid rgba(255,240,200,.6);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(140,190,230,.35) 30%,rgba(40,70,110,.55) 70%);box-shadow:0 0 24px rgba(160,210,255,.35),inset 0 0 18px rgba(255,255,255,.25);color:#fff;font-family:var(--display);font-weight:700;font-size:1rem;display:grid;place-items:center;text-shadow:0 2px 6px #000;padding:6px;animation:drift var(--d,7s) ease-in-out infinite alternate}
.orb:hover{box-shadow:0 0 34px rgba(255,220,140,.7),inset 0 0 18px rgba(255,255,255,.35)}
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(var(--dx,18px),var(--dy,-16px))}100%{transform:translate(calc(var(--dx,18px)*-1),10px)}}
.orb.wrong{animation:shake .4s;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.4),rgba(226,115,95,.55) 40%,rgba(90,20,20,.7))}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.orb.hit{animation:burst .5s forwards}
@keyframes burst{to{transform:scale(1.8);opacity:0}}
.gamebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.caught{display:flex;gap:6px;flex-wrap:wrap}
.caught span{border-radius:999px;padding:3px 10px;font-weight:800;font-size:.85rem;border:1px solid rgba(214,178,94,.35);color:var(--mute)}
.caught span.on{background:rgba(214,178,94,.22);color:var(--gold2);border-color:var(--gold)}
@media (max-width:640px){.arena{height:400px}.orb{width:96px;height:96px;font-size:.88rem}}

/* ---------- evidence board ---------- */
.board{background:radial-gradient(circle at 30% 20%,#b8925f,#8e6a3e 70%);border:10px solid #5a3b22;border-radius:14px;padding:18px;box-shadow:inset 0 0 40px rgba(0,0,0,.45),0 14px 30px rgba(0,0,0,.5)}
.board .map svg.lines path{stroke:#b3203a;stroke-dasharray:none;stroke-width:2.5;opacity:.85}
.board .zone{background:rgba(255,245,220,.18);border:2px dashed rgba(58,34,16,.45);border-top:6px solid var(--zc);color:#21180f}
.board .zone h3{color:#2a1a0c}.board .zone .zh{color:#4a3418}.board .zone .empty{color:#4a3418;border-color:rgba(58,34,16,.4)}
.board .zone h3 .n{background:#2a1a0c;color:#f6dfae}
.board .center{background:#efe1bf;color:#2a1a0c;border:3px solid #2a1a0c;border-radius:10px;box-shadow:0 8px 18px rgba(0,0,0,.4);transform:rotate(-2deg)}
.board .center .glyph{color:#7a3b12}
.board .card{position:relative;transform:rotate(var(--rot,0deg))}
.board .card::before{content:"";position:absolute;top:-8px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a8a,#a8202a);box-shadow:0 2px 3px rgba(0,0,0,.5)}

/* ---------- write: quill + chest ---------- */
.qmeter .qsp circle{animation:spark 1.5s ease-in-out infinite}
.qmeter.full{filter:drop-shadow(0 0 14px rgba(255,220,140,.8))}
.quillbox{display:flex;align-items:center;gap:14px}
.quillbox p{font-weight:700}
.chest .lid{transform-box:fill-box;transform-origin:bottom center;transition:transform .9s cubic-bezier(.3,1.4,.4,1) .3s}
.chest.open .lid{transform:rotate(-24deg) translate(-6px,-26px)}
.chest .glow{opacity:0;transition:opacity .8s .5s}.chest.open .glow{opacity:1}
.chestwrap{display:flex;justify-content:center}

/* ---------- character creator ---------- */
.creator{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:820px){.creator{grid-template-columns:1fr}}
.preview{border-radius:20px;overflow:hidden;border:2px solid var(--gold);background:#05080d;position:sticky;top:12px}
.preview svg.portrait{width:100%;height:auto;display:block}
.preview .np{padding:12px 14px;text-align:center;font-family:var(--display);color:var(--gold2);background:linear-gradient(180deg,#0f1a26,#070b12)}
.preview .np small{display:block;font-family:var(--body);color:var(--mute);font-weight:700}
.cards.small{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:0;font-size:.82rem;font-weight:800;color:var(--mute)}
.swatch i{width:46px;height:46px;border-radius:50%;border:2px solid rgba(214,178,94,.35);display:block}
.swatch[aria-pressed="true"] i{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(214,178,94,.35)}
.swatch[aria-pressed="true"]{color:var(--gold2)}
.wands{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wand{border:1px solid rgba(214,178,94,.3);background:var(--glass2);border-radius:14px;padding:10px;text-align:left;color:var(--cream);display:flex;flex-direction:column;gap:4px}
.wand svg{width:100%;height:30px}
.wand b{font-family:var(--display);color:var(--gold2)}
.wand small{color:var(--mute);font-weight:700}
.wand[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,178,94,.25)}

/* ---------- vault ---------- */
.nextrw{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.nextrw .bar{height:16px}
.tierrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.toggle{display:inline-flex;background:rgba(0,0,0,.35);border:1px solid rgba(214,178,94,.35);border-radius:10px;padding:3px}
.toggle button{border:0;background:none;border-radius:8px;padding:4px 12px;font-weight:800;font-size:.85rem;color:var(--mute)}
.toggle button[aria-pressed="true"]{background:var(--gold);color:#1c1408}
.review{border-left:4px solid #a8322a;background:rgba(168,50,42,.12);border-radius:10px;padding:10px 12px;margin-top:8px}
.review b{font-family:var(--display);color:#ffb3a6}

/* ---------- teacher dashboard ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid rgba(214,178,94,.3);padding-bottom:8px}
.tabs button{border:1px solid rgba(214,178,94,.35);background:rgba(0,0,0,.25);border-radius:10px 10px 4px 4px;padding:7px 14px;font-weight:800;color:var(--mute)}
.tabs button[aria-pressed="true"]{background:var(--gold);color:#1c1408;border-color:var(--gold)}
.formrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.formrow label{display:flex;flex-direction:column;gap:4px;font-weight:800;font-size:.85rem;color:var(--gold2);flex:1 1 160px}
.formrow select,.formrow input,.formrow textarea{font:inherit;font-size:.95rem;border:1px solid rgba(214,178,94,.4);border-radius:10px;padding:8px 10px;background:#0f1c29;color:var(--cream);width:100%}
.sub{border:1px solid rgba(214,178,94,.25);border-radius:14px;padding:12px;background:rgba(0,0,0,.2);display:flex;flex-direction:column;gap:8px}
.sub h4{color:var(--gold2);font-size:1rem}
.sub .ans{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;font-size:.9rem}
.sub .ans div{background:rgba(255,255,255,.04);border-radius:8px;padding:6px 8px}
.tp{display:flex;gap:4px;flex-wrap:wrap}
.tp button{width:38px;height:34px;border-radius:8px;border:1px solid rgba(214,178,94,.4);background:none;color:var(--cream);font-weight:800}
.tp button[aria-pressed="true"]{background:var(--gold);color:#1c1408}

/* ================= v5: mockup art direction ================= */
:root{--glass:rgba(22,20,52,.86);--glass2:rgba(34,30,74,.88);--plq1:#3a2a6a;--plq2:#1e1640}
.hand{font-family:"Patrick Hand","Comic Sans MS",cursive}
/* gold-framed plaque buttons */
.plaque{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:700;letter-spacing:.03em;color:#f6e7c0;text-decoration:none;
  background:linear-gradient(180deg,var(--plq1),var(--plq2));border:2px solid #d6b25e;border-radius:14px;padding:11px 22px;
  box-shadow:0 0 0 2px #3a2a10,0 0 0 4px rgba(214,178,94,.55),0 10px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,240,200,.25),inset 0 -10px 18px rgba(0,0,0,.25);transition:transform .15s,filter .15s}
.plaque::before,.plaque::after{content:"";position:absolute;top:50%;width:8px;height:8px;background:#e6c26a;transform:translateY(-50%) rotate(45deg);box-shadow:0 0 6px rgba(255,220,140,.8)}
.plaque::before{left:-6px}.plaque::after{right:-6px}
.plaque:hover{transform:translateY(-2px);filter:brightness(1.12)}
.plaque[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.plaque[aria-pressed="true"]{background:linear-gradient(180deg,#f6dd96,#b88a2e);color:#1c1408}
.plaque.big{font-size:1.25rem;padding:14px 34px;min-width:260px}
.plaque.small{font-size:.88rem;padding:8px 14px;border-radius:10px}
.plaque.small::before,.plaque.small::after{display:none}
.plaque.ember{--plq1:#8a3a1e;--plq2:#4a1a0a}
.plaque.green{--plq1:#1f6a4a;--plq2:#0c2e20}
.plaque.blue{--plq1:#24407a;--plq2:#0e1a3a}
.plaque.locked{filter:grayscale(.65) brightness(.75)}
.gear{border:2px solid #d6b25e;background:linear-gradient(180deg,var(--plq1),var(--plq2));color:#f6e7c0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
/* banner headings */
.bannerhead{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.bannerhead h1,.bannerhead h2{display:inline-flex;align-items:center;gap:12px;font-size:clamp(1.7rem,4.4vw,2.6rem);color:#fbe7b4;text-shadow:0 2px 0 #3a2a10,0 0 24px rgba(255,210,120,.4);padding:6px 36px;background:linear-gradient(90deg,transparent,rgba(58,42,106,.85) 18%,rgba(58,42,106,.85) 82%,transparent);border-top:1px solid rgba(214,178,94,.6);border-bottom:1px solid rgba(214,178,94,.6)}
.bannerhead.small h2{font-size:1.35rem}
.bannerhead p{color:var(--cream);font-weight:600}
.qbanner{display:flex;align-items:center;gap:14px;color:#fbe7b4}
.qbanner .glyph{color:#e6c26a;filter:drop-shadow(0 0 8px rgba(255,210,120,.5))}
.qbanner h1{font-size:clamp(1.5rem,3.6vw,2.2rem);color:#fbe7b4}.qbanner h1 span{font-size:.7em;color:#f6dfae}
.qbanner p{font-weight:600}
.parchframe{background:linear-gradient(160deg,#f3e6c6,#e2cd9f);color:var(--ink);border:3px solid #b8954a;border-radius:16px;box-shadow:0 0 0 2px #5a3b18,inset 0 0 30px rgba(120,84,30,.28),0 12px 28px rgba(0,0,0,.45);padding:14px}
.parchframe .mute{color:#6b5636}.parchframe h3,.parchframe h4{color:#4a2a10}
.parchframe .label{color:#7a5a20}
.parchpanel{background:rgba(255,255,255,.35);border:1px solid #cbb07a;color:var(--ink)}
.parchpanel h3{color:#4a2a10}
/* HUD */
.hud{background:linear-gradient(180deg,rgba(40,30,86,.92),rgba(20,16,48,.92));border:2px solid #d6b25e}
.who .ava{width:56px;height:56px;border:3px solid #d6b25e;box-shadow:0 0 0 2px #3a2a10}
.who .ava svg{width:56px;height:auto;margin-top:0}
.who b{font-size:1.08rem}
.steprail{display:flex;gap:4px;background:rgba(0,0,0,.35);border:1px solid rgba(214,178,94,.5);border-radius:999px;padding:4px}
.steprail button{border:0;background:none;color:var(--mute);font-weight:800;border-radius:999px;padding:5px 14px;display:flex;gap:6px;align-items:center}
.steprail button b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-family:var(--display)}
.steprail button.now{background:linear-gradient(180deg,#2f8a5a,#1a5a38);color:#fff}
.steprail button.done{color:var(--gold2)}
.steprail button:disabled{opacity:.5}
/* title */
.title{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
.titleL{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.logo{display:flex;align-items:center;gap:8px;margin-top:0}
.logoquill{color:#e6c26a;filter:drop-shadow(0 0 10px rgba(255,210,120,.7))}
.subtitle{font-family:"Patrick Hand",var(--display);font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:.04em;color:#fbe7b4;margin-top:-4px}
.subtitle::before,.subtitle::after{content:""}
.tagline{font-family:var(--display);color:#fff;text-shadow:0 2px 10px #000;font-size:1.05rem;margin:8px 0 14px}
.loginbtns{display:flex;flex-direction:column;gap:16px;margin:6px 0 10px 8px}
.group{position:relative;height:min(62vh,520px);display:flex;align-items:flex-end;justify-content:center}
.gm{position:relative;margin:0 -34px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6))}
.gm svg{width:clamp(130px,16vw,220px);height:auto}
.gm.g1{z-index:2;transform:translateY(10px)}.gm.g2{z-index:3;transform:translateY(-6px) scale(1.12)}.gm.g3{z-index:1;transform:translateY(16px)}
@media (max-width:760px){.title{grid-template-columns:1fr}.group{height:auto;order:-1}.gm{margin:0 -24px}.gm svg{width:110px}.loginbtns{margin-left:0}}
/* creator */
.create .creator3{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:start}
@media (max-width:980px){.create .creator3{grid-template-columns:1fr}}
.catmenu{display:flex;flex-direction:column;gap:12px;padding:6px 8px}
.catmenu .plaque{justify-content:flex-start;font-size:.95rem;padding:9px 14px}
@media (max-width:980px){.catmenu{flex-direction:row;flex-wrap:wrap}}
.bigprev{border-radius:20px;overflow:hidden;border:3px solid #d6b25e;box-shadow:0 0 0 2px #3a2a10,0 0 40px rgba(214,178,94,.25);background:#05070d;max-width:340px;justify-self:center;width:100%}
.bigprev svg{width:100%;height:auto;display:block}
.bigprev .np{font-family:var(--display);text-align:center;padding:10px;color:#fbe7b4;font-size:1.3rem;background:linear-gradient(180deg,#2a1e5a,#120c30)}
.optpanel{background:var(--glass2);border:1px solid rgba(214,178,94,.45);border-radius:16px;padding:14px}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.preset{border:2px solid rgba(214,178,94,.4);border-radius:12px;overflow:hidden;padding:0;background:#05070d}
.preset svg{width:100%;height:auto;display:block}
.preset:hover{border-color:#f3dc9a}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.opts.sw{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}
.opt{border:2px solid rgba(214,178,94,.3);background:rgba(0,0,0,.25);border-radius:12px;padding:4px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--cream);font-size:.8rem;font-weight:800}
.opt .optpic{border-radius:8px;overflow:hidden;display:block;width:100%}.opt .optpic svg{width:100%;height:auto;display:block}
.opt .sw{width:40px;height:40px;border-radius:50%;display:block;border:2px solid rgba(255,255,255,.4);margin:4px}
.opt[aria-pressed="true"]{border-color:#f3dc9a;box-shadow:0 0 0 3px rgba(214,178,94,.35)}
.opt.locked{opacity:.75}.opt em{font-style:normal;display:inline-flex;align-items:center;gap:2px;color:#e2b6ff}
/* houses */
.house{background:none;border:0;padding:0;align-items:center;gap:6px}
.house .banner{filter:drop-shadow(0 16px 24px rgba(0,0,0,.6));transition:transform .2s}
.house:hover .banner{transform:translateY(-6px)}
.house[aria-pressed="true"]{box-shadow:none}
.house[aria-pressed="true"] .banner{filter:drop-shadow(0 0 22px rgba(255,220,140,.75)) drop-shadow(0 16px 24px rgba(0,0,0,.6))}
.house .nm{font-family:var(--display);font-size:1.05rem;color:#fbe7b4;text-align:center;margin-top:-112px;position:relative;line-height:1.1;text-shadow:0 2px 6px #000}
.house .nm b{font-size:1.7rem}
.house .traits{font-size:.85rem;font-weight:700;color:#f6e7c0;position:relative;text-shadow:0 1px 4px #000}
.house .yr{margin-top:52px}
/* courtyard dashboard */
.courtyard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start;min-height:calc(100vh - 140px)}
@media (max-width:900px){.courtyard{grid-template-columns:1fr}}
.cyL,.cyR{display:flex;flex-direction:column;gap:22px;padding-top:24px}
.cyC{display:flex;flex-direction:column;gap:14px;align-items:center}
.plaque.dash{justify-content:flex-start;text-align:left;padding:14px 18px;font-size:1.08rem;line-height:1.15;width:100%}
.plaque.dash .glyph{color:#e6c26a;flex:none}
.plaque.dash small{display:block;font-family:var(--body);font-size:.78rem;color:#cdbbff;letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
.plaque.dash.locked small{color:#ffb3a6;text-transform:none;letter-spacing:0}
.plaque.dash.small{width:auto;justify-content:center;padding:9px 20px}
.cyC .today{width:100%;margin-top:clamp(120px,28vh,260px);background:linear-gradient(180deg,rgba(40,30,86,.9),rgba(16,12,40,.94));border:2px solid #d6b25e;box-shadow:0 0 0 2px #3a2a10,0 18px 40px rgba(0,0,0,.5)}
.bonus.gold{background:rgba(214,178,94,.15);border-color:var(--gold);color:var(--gold2)}
.streakmini{width:100%;background:rgba(16,12,40,.85);border:1px solid rgba(214,178,94,.45);border-radius:14px;padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.streakmini b{font-family:var(--display);font-size:1.6rem;color:#ffd2ac}
.streakmini .week{width:100%;margin-top:4px}
.curq{background:rgba(16,12,40,.85);border:1px solid rgba(214,178,94,.45);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.curq b{font-family:var(--display);color:#fbe7b4}
/* think */
.stage.room{background:rgba(22,20,52,.8)}
.thinkwrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.thinkwrap{grid-template-columns:1fr}}
.vtabs{display:flex;flex-direction:column;gap:10px}
@media (max-width:760px){.vtabs{flex-direction:row;flex-wrap:wrap}}
.vtabs button{display:flex;align-items:center;gap:8px;border:2px solid #b8954a;border-radius:12px;padding:12px 14px;font-family:var(--display);font-weight:700;color:#f6e7c0;background:linear-gradient(180deg,#2a4a3a,#12261c);text-align:left}
.vtabs button.on{background:linear-gradient(180deg,#2f8a5a,#1a5a38);box-shadow:0 0 0 2px #f3dc9a}
.vtabs button em{font-style:normal;margin-left:auto;font-family:var(--body);font-size:.8rem;background:rgba(0,0,0,.3);border-radius:99px;padding:1px 8px}
.tabbody{display:flex;flex-direction:column;gap:14px}
.tabtitle{align-self:center;font-family:var(--display);font-weight:700;color:#4a2a10;background:#f9efd6;border:2px solid #b8954a;border-radius:10px;padding:4px 18px;margin-top:-30px;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.carousel{display:flex;align-items:center;gap:8px}
.arrow{border:2px solid #b8954a;background:#f9efd6;color:#4a2a10;width:40px;height:40px;border-radius:50%;font-size:1.6rem;line-height:1;flex:none}
.arrow:disabled{opacity:.35}
.vrow{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:640px){.vrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vpic{border:3px solid #d6b25e;background:#fbf4e2;border-radius:12px;padding:6px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;color:var(--ink);box-shadow:0 6px 14px rgba(0,0,0,.25);transition:transform .15s}
.vpic:hover{transform:translateY(-3px)}
.vpic.on{box-shadow:0 0 0 4px #2f8a5a,0 6px 14px rgba(0,0,0,.25)}
.vpic .pic{width:100%;aspect-ratio:4/3;border-radius:8px;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--pc) 65%,#fff),var(--pc) 60%,color-mix(in srgb,var(--pc) 60%,#000))}
.vpic .pic .glyph{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.vpic b{font-family:var(--display);font-size:1.05rem}
.vpic .inb{position:absolute;top:6px;right:8px;background:#2f8a5a;color:#fff;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-weight:900;font-size:.8rem}
.vdetail{border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.vhead{display:flex;align-items:center;gap:10px}
.vhead h2{font-family:var(--display);color:#3a1a6a;font-size:1.5rem}.vhead h2 small{font-family:var(--body);font-weight:600;font-size:.95rem;color:#6b5636}
.gamecall{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(90,40,140,.12);border:1px dashed #9a6ad0;border-radius:12px;padding:10px 12px;font-weight:600}
.gamecall span{flex:1;min-width:200px}
.tabbody .arena{border-color:#b8954a}
.tabbody .notebox{color:var(--ink);border-color:#b8954a;background:rgba(255,255,255,.4)}
.tabbody .charm{color:var(--ink);border-color:#b8954a}
.tabbody .panel h3{color:#4a2a10}
.tabbody .gamebar .caught span{color:#6b5636;border-color:#cbb07a}.tabbody .gamebar .caught span.on{color:#2a1a0c;background:#f3dc9a}
.tabbody .tlist{color:var(--ink)}
/* organise: parchment mind map */
.board{background:radial-gradient(ellipse at 50% 50%,rgba(120,90,200,.25),rgba(10,8,30,.35));border:2px solid rgba(214,178,94,.5);box-shadow:inset 0 0 40px rgba(0,0,0,.4)}
.board .map svg.lines path{stroke:#e6c26a;stroke-width:3;stroke-dasharray:none;opacity:.8;filter:drop-shadow(0 0 4px rgba(255,210,120,.6))}
.board .zone{background:linear-gradient(160deg,#f6ead0,#e6d2a8);border:2px solid #b8954a;border-top:6px solid var(--zc);border-radius:14px;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.board .zone h3{font-family:var(--display)}
.board .center{background:linear-gradient(160deg,#f6ead0,#e2cd9f);border:3px solid #b8954a;border-radius:18px;transform:none;font-size:1.3rem;color:#3a1a0a;box-shadow:0 0 30px rgba(255,210,120,.45)}
.board .card::before{display:none}
.board .card{transform:none}
/* write */
.write3{display:grid;grid-template-columns:230px minmax(0,1fr) 260px;gap:14px;align-items:start}
@media (max-width:1060px){.write3{grid-template-columns:1fr}}
.scaf,.help{display:flex;flex-direction:column;gap:12px}
.scaf h3,.help h3{font-family:var(--display);font-size:1.05rem}
.scafopts{display:flex;flex-direction:column;gap:8px}
.scafbtn{display:flex;align-items:center;gap:10px;border:2px solid #b8954a;border-radius:12px;padding:8px 10px;background:#fbf4e2;color:var(--ink);text-align:left}
.scafbtn i{width:18px;height:18px;border-radius:50%;border:2px solid #7a5a20;flex:none;background:#fff}
.scafbtn.on{background:linear-gradient(180deg,#f6dd96,#e2b64a)}.scafbtn.on i{background:radial-gradient(#2f8a5a 45%,#fff 50%)}
.scafbtn b{font-family:var(--display);display:block}.scafbtn small{color:#6b5636;font-weight:700}
.scaf .quillbox{flex-direction:column;text-align:center}
.scaf .qmeter circle:first-child{stroke:rgba(120,84,30,.3)}
.scaf details summary{cursor:pointer;font-family:var(--display);color:#4a2a10}
.scaf .mapmini h4{color:#4a2a10}.scaf .mapmini li small{color:#6b5636}
.paperwrap{display:flex;flex-direction:column;gap:8px}
.toolbar{display:flex;gap:4px;align-items:center;flex-wrap:wrap;background:#f9efd6;border:2px solid #b8954a;border-radius:10px;padding:5px 8px}
.tool{border:1px solid transparent;background:none;border-radius:6px;min-width:34px;height:32px;font-weight:800;color:#3a2a10}
.tool:hover{border-color:#b8954a;background:#fff}
.t-bold{font-weight:900}.t-italic{font-style:italic;font-family:Georgia,serif}.t-underline{text-decoration:underline}
.toolbar .count{margin-left:auto;background:none;border:0;color:#4a2a10}
.paper{padding:16px 16px 16px 52px}
.ptitle{font-family:"Patrick Hand",var(--display);text-align:center;color:#3a1a6a;font-size:1.7rem;text-decoration:underline;text-decoration-color:rgba(58,26,106,.35);margin-bottom:4px}
#essay{min-height:360px;outline:none;font-size:1.38rem;line-height:36px;color:#1d1a3a;padding:0 6px;overflow-wrap:anywhere}
#essay:empty::before{content:attr(data-ph);color:#9a8a6a}
#essay ul{margin:0;padding-left:24px}
.writebar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.writebar .ember{margin-left:auto}
.hblock{display:flex;flex-direction:column;gap:6px;border-top:1px solid #cbb07a;padding-top:10px}
.hblock h4{font-family:var(--display);font-size:.98rem;display:flex;justify-content:space-between}
.starters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.starters button{border:0;background:none;text-align:left;font:inherit;color:var(--ink);padding:2px 0;font-family:"Patrick Hand",var(--body);font-size:1.08rem}
.starters button::before{content:"• ";color:#7a5a20}
.starters button:hover{color:#3a1a6a;text-decoration:underline}
.help .chip{color:var(--ink);border-color:#cbb07a;background:rgba(255,255,255,.5)}
.help .check .tick{border-color:#cbb07a;color:#6b5636;background:#fff}
.help .check li.ok .tick{background:#2f8a5a;color:#fff}
.help .check li small{color:#6b5636}
.help .goal .bar{background:rgba(120,84,30,.18)}
.help .qs{color:var(--ink)}
/* enchanted library */
.libgrid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:820px){.libgrid{grid-template-columns:1fr}}
.botw{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.ribbon{font-family:var(--display);font-weight:700;color:#fbe7b4;background:linear-gradient(180deg,#8a3a1e,#4a1a0a);border:2px solid #d6b25e;border-radius:8px;padding:4px 16px;z-index:2;margin-bottom:-18px}
.book{border:0;padding:0;background:none;perspective:600px}
.book .cover{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:6px;width:92px;height:132px;padding:12px 8px;border-radius:4px 10px 10px 4px;background:linear-gradient(90deg,rgba(0,0,0,.35) 0 8px,transparent 8px),linear-gradient(160deg,color-mix(in srgb,var(--bc) 85%,#fff),var(--bc) 50%,color-mix(in srgb,var(--bc) 60%,#000));border:2px solid #d6b25e;box-shadow:inset 0 0 0 3px rgba(255,220,140,.25),4px 8px 14px rgba(0,0,0,.5);color:#fbe7b4;text-align:center;transition:transform .25s}
.book:hover .cover{transform:translateY(-8px) rotateY(-12deg)}
.book .btitle{font-family:var(--display);font-weight:700;font-size:.8rem;line-height:1.15}
.book .bby{font-size:.62rem;font-weight:700;opacity:.9}
.book.big .cover{width:230px;height:310px;padding:20px 14px}
.book.big .btitle{font-size:1.25rem}.book.big .bby{font-size:.85rem}
.book .bava{width:120px;border-radius:50%;overflow:hidden;border:3px solid #d6b25e;display:block}.book .bava svg{width:100%;height:auto;display:block}
.shelves{display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,#3a2414,#22140a);border:3px solid #5a3b22;border-radius:14px;padding:14px;box-shadow:inset 0 0 30px rgba(0,0,0,.6)}
.shelf{display:flex;flex-direction:column;gap:6px}
.shelfname{font-family:var(--display);font-weight:700;color:#fbe7b4;display:flex;gap:8px;align-items:center}
.shelfname::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--bc);border:1px solid #d6b25e}
.shelfname span{font-family:var(--body);font-size:.75rem;background:rgba(0,0,0,.4);border-radius:99px;padding:0 8px}
.shelfrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;min-height:140px;padding:6px 6px 0;border-bottom:10px solid #6b4a2a;box-shadow:0 6px 0 #3a2414}
.emptyshelf{color:#a89070;font-weight:700;font-size:.85rem;align-self:center}
.libempty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px;color:var(--gold2)}
.libempty p{max-width:52ch;color:var(--cream)}
.openbook{display:grid;grid-template-columns:1fr 1.4fr;max-width:900px;width:100%;max-height:88vh;overflow:auto;background:linear-gradient(90deg,#efe1bf,#f6ecd2 48%,#d8c49a 50%,#f6ecd2 52%,#efe1bf);border:6px solid #6a2236;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.6);color:var(--ink)}
@media (max-width:700px){.openbook{grid-template-columns:1fr}}
.pageL,.pageR{padding:22px;display:flex;flex-direction:column;gap:8px}
.pageL{align-items:center;text-align:center}
.pageL svg{border-radius:50%;border:3px solid #d6b25e}
.pageL h2{font-family:var(--display);color:#3a1a6a}
.pageR .hand{font-size:1.3rem;line-height:1.6;white-space:pre-wrap}
.pageR .chips{margin-top:auto}
/* hall of fame */
.fametabs{display:flex;justify-content:center;gap:8px}
.fametabs button{font-family:var(--display);font-weight:700;border:2px solid #d6b25e;border-radius:10px;padding:8px 18px;background:linear-gradient(180deg,var(--plq1),var(--plq2));color:#f6e7c0}
.fametabs button.on{background:linear-gradient(180deg,#2f8a7a,#145a4a)}
.fametable{padding:6px 10px;overflow-x:auto}
.fametable table{width:100%;border-collapse:collapse}
.fametable th{text-align:left;font-family:var(--display);color:#4a2a10;padding:8px;border-bottom:2px solid #b8954a}
.fametable td{padding:8px;border-bottom:1px solid #cbb07a;font-weight:700}
.fametable tr.me td{background:rgba(214,178,94,.3)}
.rank{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;font-family:var(--display);font-weight:700;background:#e9dcc0;color:#4a2a10}
.rank.r1{background:radial-gradient(#fff1b8,#d6a843);box-shadow:0 0 10px rgba(214,168,67,.8)}.rank.r2{background:radial-gradient(#fff,#b8c2cc)}.rank.r3{background:radial-gradient(#ffd9b0,#c07a3c)}
.fw{display:flex;align-items:center;gap:10px}.fw svg{border-radius:50%;border:2px solid #d6b25e;width:42px;height:auto}
.cup{display:flex;flex-direction:column;gap:12px}
.cuprow{display:flex;align-items:center;gap:14px;background:var(--glass2);border:1px solid rgba(214,178,94,.35);border-radius:14px;padding:10px 14px}
.cuprow.lead{border:2px solid #d6b25e;box-shadow:0 0 24px rgba(214,178,94,.3)}
.cuprow b{font-family:var(--display);color:#fbe7b4}
.cupn{font-size:1.3rem;display:flex;align-items:center;gap:6px}
.setlist{display:flex;flex-direction:column;gap:12px;width:100%}
.setlist .plaque{width:100%}

.openbook .mute{color:#6b5636}
.shelfrow:has(.emptyshelf){min-height:44px}
.scaf .chip{color:var(--ink);border-color:#cbb07a;background:rgba(255,255,255,.5)}
.help,.scaf{color-scheme:light}
.help .check input[type=checkbox]{accent-color:#2f8a5a}

/* ================= online version ================= */
.authbox{max-width:620px;margin:0 auto;width:100%}
.authform{display:flex;flex-direction:column;gap:12px}
.authform label,.formrow label{display:flex;flex-direction:column;gap:4px;font-weight:800}
.authform input{font:inherit;font-size:1.1rem;border:2px solid #b8954a;border-radius:10px;padding:10px 12px;background:#fffaf0;color:var(--ink)}
.hint{font-size:.9rem;color:#6b5636;display:flex;gap:6px;align-items:center}
.err{background:#fde3dd;border:1px solid #c45a4a;color:#7a1f14;border-radius:10px;padding:8px 12px;font-weight:700}
.savestate{font-size:.75rem;font-weight:800;border-radius:99px;padding:1px 8px;margin-left:4px;white-space:nowrap}
.savestate.saved{color:#9fe6b8;background:rgba(92,194,140,.15)}.savestate.saving{color:#f3dc9a;background:rgba(214,178,94,.15)}.savestate.error{color:#ffb3a6;background:rgba(226,115,95,.2)}
.busy{position:fixed;inset:0;z-index:90;background:rgba(3,6,12,.55);display:flex;align-items:center;justify-content:center;gap:12px;color:#fbe7b4;font-family:var(--display);font-size:1.1rem}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid rgba(214,178,94,.3);border-top-color:#f3dc9a;animation:sp 1s linear infinite;display:inline-block}
.spin.big{width:48px;height:48px}
@keyframes sp{to{transform:rotate(360deg)}}
.notice{border-color:#c45a4a}
.retrow{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:8px}
.vaulttop{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.bigprev.small{max-width:200px}
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:10px}
.shopitem{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:rgba(0,0,0,.25);border:1px solid rgba(214,178,94,.35);border-radius:14px;padding:8px}
.shopitem .optpic{border-radius:10px;overflow:hidden;width:100%}.shopitem .optpic svg{width:100%;height:auto;display:block}
.shopitem b{font-size:.88rem;color:#fbe7b4}
.shopitem.eq{border-color:#f3dc9a;box-shadow:0 0 0 3px rgba(214,178,94,.3)}
.pill.small{font-size:.8rem;padding:2px 10px}
.classgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.classcard{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;cursor:pointer}
.classcard b{font-family:var(--display);font-size:1.2rem}.classcard span{font-size:.8rem;color:#6b5636;font-weight:800}
.classcard code,.joincode code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.4rem;font-weight:800;letter-spacing:.15em;color:#3a1a6a}
.joincode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#f9efd6;border:2px solid #b8954a;border-radius:12px;padding:8px 14px;color:var(--ink)}
.joincode span{font-weight:800;font-size:.85rem}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.qgrid label{display:flex;flex-direction:column;gap:4px;font-weight:800;color:var(--gold2)}
.qgrid input,.formrow textarea{font:inherit;font-size:.95rem;border:1px solid rgba(214,178,94,.4);border-radius:10px;padding:8px 10px;background:#0f1c29;color:var(--cream);width:100%}
.stat-returned{color:#ffb3a6}.stat-approved{color:#9fe6b8}.stat-submitted{color:#f3dc9a}
.tabs{flex-wrap:wrap;align-items:center}
@media (max-width:560px){.steprail{width:100%;justify-content:space-between}.steprail button{padding:4px 6px;font-size:.82rem;gap:4px}.steprail button b{width:20px;height:20px}.hud .stats{width:100%;justify-content:flex-end}.who b{font-size:.95rem}}
.joincode .chip{color:var(--ink);border-color:#b8954a;background:#fff}

/* ===== ORGANISE v6: tap → choose → place ===== */
.ogbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 16px;border-radius:16px;background:rgba(6,10,20,.6);border:1px solid rgba(214,178,94,.45)}
.ogprog{flex:1 1 240px;display:flex;align-items:center;gap:10px;font-weight:700}
.ogprog .bar{flex:1;max-width:260px}
.oghow{flex:1 1 100%;margin:0;font-size:.95rem;color:var(--cream)}
.ogselnote{margin:0;padding:8px 14px;border-radius:12px;background:rgba(240,192,73,.16);border:1px solid var(--gold);font-weight:700;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.oggrid{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:16px;align-items:start}
.ogtray{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;border-radius:16px;border:1px dashed rgba(214,178,94,.55);padding:12px;display:flex;flex-direction:column;gap:10px;background:rgba(6,10,20,.55);backdrop-filter:blur(3px)}
.ogtray.over,.oggroup.over{outline:3px solid var(--gold2);outline-offset:2px}
.ogtray h3,.oghead b{font-family:var(--display)}
.ogtray h3{font-size:1.05rem;color:var(--gold2);display:flex;align-items:center;gap:8px}
.n{margin-left:auto;font-size:.8rem;background:rgba(0,0,0,.45);color:#f6dfae;border-radius:99px;padding:1px 9px;font-family:var(--body);font-weight:800}
.oggroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;align-items:start}
.oggroup{border-radius:14px;background:linear-gradient(160deg,#f6ead0,#e6d2a8);border:2px solid #b8954a;border-top:6px solid var(--zc);color:#21180f;padding:8px 10px 10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 18px rgba(0,0,0,.35);min-width:0}
.oggroup.closed{padding-bottom:8px}
.oghead{display:flex;align-items:center;gap:6px}
.ogtoggle{flex:1;display:flex;align-items:center;gap:8px;background:none;border:0;padding:4px 2px;text-align:left;color:#2a1a0c;font:inherit;min-width:0}
.ogtoggle i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--zc)}
.ogtoggle span:first-of-type{display:flex;flex-direction:column;min-width:0}
.ogtoggle small{font-size:.8rem;color:#5a4220;font-weight:700}
.ogtoggle .chev{font-size:.9rem;color:#5a4220}
.ogput{width:100%;text-align:center;border:2px dashed var(--zc);background:#fff8e6;color:#2a1a0c;font-weight:800;border-radius:10px;padding:6px 10px;font-size:.92rem;animation:pulseput 1.6s ease-in-out infinite}
@keyframes pulseput{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--zc) 30%,transparent)}}
[data-motion=off] .ogput{animation:none}
.ogcards{display:flex;flex-direction:column;gap:8px}
.ogempty{margin:0;font-size:.88rem;font-weight:700;color:#5a4220;border:1px dashed rgba(58,34,16,.4);border-radius:10px;padding:10px;text-align:center}
.ogtray .ogempty,.order .ogempty{color:var(--mute);border-color:rgba(214,178,94,.35)}
.ogcard{position:relative;border-radius:12px;padding:8px 10px;border-left:6px solid var(--zc);box-shadow:0 4px 10px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:6px;min-width:0;cursor:grab}
.ogcard.sel{box-shadow:0 0 0 3px var(--gold2),0 8px 18px rgba(0,0,0,.4);z-index:2}
.ogcard.dragging{opacity:.4}
.ogcard .src{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7a5a20}
.ogtext{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;width:100%;text-align:left;background:none;border:0;padding:2px 0;font:inherit;font-weight:800;color:var(--ink);overflow-wrap:anywhere;cursor:pointer;min-height:32px}
.ogtap{flex:none;font-size:.7rem;color:#7a5a20;margin-top:4px}
.ogdet{margin:0;padding-left:18px;font-size:.9rem}
.ogdet li{overflow-wrap:anywhere}.ogdet button{border:0;background:none;color:#7a5a20;font-weight:900;padding:0 6px}
.ogmenu{border-top:1px dashed rgba(58,34,16,.35);padding-top:8px;display:flex;flex-direction:column;gap:8px}
.ogmenu .label{color:#5a4220}
.ogplace{display:flex;flex-wrap:wrap;gap:6px}
.ogcat{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--zc);background:#fffaf0;color:#2a1a0c;font-weight:800;border-radius:99px;padding:6px 12px;font-size:.92rem;min-height:38px}
.ogcat i{width:10px;height:10px;border-radius:50%;background:var(--zc)}
.ogcat:hover:not(:disabled),.ogcat:focus-visible{background:color-mix(in srgb,var(--zc) 22%,#fffaf0)}
.ogcat:disabled{opacity:.6}
.ogtools{display:flex;flex-wrap:wrap;gap:6px}
.ogtools button{border:1px solid rgba(58,34,16,.35);background:rgba(255,255,255,.55);color:#2a1a0c;border-radius:8px;padding:5px 9px;font-weight:800;font-size:.85rem;min-height:34px}
.ogtools .del{color:#8a2018}.ogtools .yes{background:#a8322a;color:#fff;border-color:#a8322a}
.ogconf{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;font-weight:800;color:#8a2018}
.ogadd{border-top:1px solid rgba(214,178,94,.25);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.ogadd .inrow{display:flex;gap:6px}.ogadd select{flex:1;min-width:0;font:inherit;border:1px solid rgba(214,178,94,.45);border-radius:10px;padding:8px;background:#0f1c29;color:var(--cream)}
.btn.small{padding:8px 14px;font-size:.92rem}
.inrow{display:flex;gap:6px;flex-wrap:wrap}.inrow .field{flex:1 1 140px;min-width:0}
.inrow button{border:1px solid rgba(58,34,16,.35);border-radius:8px;padding:6px 10px;font-weight:800;background:#fff8e6;color:#2a1a0c}
@media (max-width:760px){.oggrid{grid-template-columns:1fr}.ogtray{position:static;max-height:none}.oggroups{grid-template-columns:1fr}}
.helpq{width:34px;height:34px;flex:none;border-radius:50%;border:2px solid var(--gold);background:rgba(10,14,28,.7);color:var(--gold2);font-weight:900;font-size:1.05rem;display:inline-grid;place-items:center;font-family:var(--display)}
.helpq:hover,.helpq:focus-visible{background:var(--gold);color:#1a1206}
/* Show Me How demo */
.demo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px;border-radius:14px;background:rgba(0,0,0,.3);min-height:230px;overflow:hidden}
.dm-tray,.dm-g{border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.dm-tray{border:1px dashed rgba(214,178,94,.5)}
.dm-groups{display:flex;flex-direction:column;gap:10px}
.dm-g{background:linear-gradient(160deg,#f6ead0,#e6d2a8);color:#2a1a0c;border-top:5px solid #3d8fd6;min-height:70px}
.dm-g:nth-child(2){border-top-color:#9b6bd6}
.dm-card{background:linear-gradient(160deg,var(--parch),var(--parch2));color:var(--ink);font-weight:800;border-radius:10px;padding:8px 10px;border-left:5px solid #8a7a5a;font-size:.92rem}
.dm-g .dm-card{border-left-color:#3d8fd6}
.dm-menu{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.85rem}
.dm-btn{border:2px solid #3d8fd6;background:#fffaf0;color:#2a1a0c;border-radius:99px;padding:3px 10px;font-weight:800}
.dm-btn+.dm-btn{border-color:#9b6bd6}
.dm-hand{position:absolute;width:38px;height:38px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.demo.anim .c1{animation:dmc1 6s infinite}.demo.anim .c2{animation:dmc2 6s infinite}.demo.anim .dm-menu{animation:dmmenu 6s infinite}
.demo.anim .b1{animation:dmb1 6s infinite}.demo.anim .dm-hand{animation:dmhand 6s infinite}
@keyframes dmc1{0%,15%{box-shadow:none;opacity:1}20%,55%{box-shadow:0 0 0 3px var(--gold2);opacity:1}62%,100%{opacity:.15;box-shadow:none}}
@keyframes dmc2{0%,60%{opacity:0;transform:translateX(-40px)}70%,100%{opacity:1;transform:none}}
@keyframes dmmenu{0%,22%{opacity:0}28%,58%{opacity:1}64%,100%{opacity:0}}
@keyframes dmb1{0%,45%{background:#fffaf0}50%,58%{background:#bcd9f5}}
@keyframes dmhand{0%{left:60%;top:85%}18%{left:22%;top:34%}22%{left:22%;top:36%}40%{left:22%;top:36%}50%{left:12%;top:60%}58%{left:12%;top:62%}75%,100%{left:70%;top:40%}}
.demo.still .c2{opacity:1}.demo.still .dm-hand{left:12%;top:60%}
.dm-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;list-style:none;padding:0;margin:12px 0}
.dm-steps li{padding:10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(214,178,94,.3)}
.demo.anim~.dm-steps .s1{animation:dms1 6s infinite}.demo.anim~.dm-steps .s2{animation:dms2 6s infinite}.demo.anim~.dm-steps .s3{animation:dms3 6s infinite}
@keyframes dms1{0%,40%{border-color:var(--gold2);background:rgba(240,192,73,.15)}45%,100%{border-color:rgba(214,178,94,.3);background:rgba(255,255,255,.06)}}
@keyframes dms2{0%,42%{border-color:rgba(214,178,94,.3)}45%,62%{border-color:var(--gold2);background:rgba(240,192,73,.15)}66%,100%{border-color:rgba(214,178,94,.3)}}
@keyframes dms3{0%,62%{border-color:rgba(214,178,94,.3)}66%,100%{border-color:var(--gold2);background:rgba(240,192,73,.15)}}
@media (max-width:560px){.demo{grid-template-columns:1fr}}
/* sound settings */
.soundset{display:flex;flex-direction:column;gap:8px;margin:6px 0 14px;padding:12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(214,178,94,.3)}
.soundset h3{font-family:var(--display);color:var(--gold2);font-size:1.05rem}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;color:inherit;text-align:left;padding:6px 2px;font:inherit}
.swrow span{display:flex;flex-direction:column}.swrow small{color:var(--mute);font-size:.82rem}
.swrow .sw{flex:none;width:46px;height:26px;border-radius:99px;background:#3a3f4f;position:relative;transition:background .2s}
.swrow .sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s}
.swrow .sw.on{background:#3fa877}.swrow .sw.on::after{left:23px}
.volrow{display:flex;align-items:center;gap:12px;font-weight:700}.volrow input{flex:1;accent-color:var(--gold)}
.mutebtn[aria-pressed=true]{color:#ffb3a6}

.chip:disabled{opacity:.42;cursor:not-allowed}
/* THINK / WRITE v6 */
.tabnext{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px dashed rgba(58,34,16,.3)}
.tabnext span{flex:1 1 220px;font-weight:700;color:#4a3418}
.vtabs .tick{color:#3fa877;font-weight:900}
.anslist li{display:flex;gap:8px;align-items:center;justify-content:space-between}
.chip.small{padding:3px 10px;font-size:.82rem}
.qhelp{display:flex;justify-content:flex-end;margin:-6px 0 4px}
#essay{line-height:1.85}
#essay div+div,#essay p+p{margin-top:.6em}
/* teacher review */
.sublist{display:flex;flex-direction:column;gap:8px}
.subrow{display:grid;grid-template-columns:minmax(200px,1.4fr) minmax(140px,1fr) minmax(160px,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border-radius:14px}
.subrow .fw{display:flex;align-items:center;gap:10px}.subrow .fw small{display:block;color:#6b5636;font-size:.82rem}
@media (max-width:760px){.subrow{grid-template-columns:1fr}}
.stat-submitted{color:#b5651d;font-weight:800}.stat-returned{color:#b8332a;font-weight:800}.stat-approved{color:#2f8a5a;font-weight:800}.stat-reviewed{color:#3a6aa0;font-weight:800}
.rvtop{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-bottom:12px}.rvtop h2{font-family:var(--display);color:var(--gold2)}.rvstats{flex-basis:100%;margin:0}
.rvgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:1100px){.rvgrid{grid-template-columns:1fr 1fr}.rvgrid .rvcol:last-child{grid-column:1/-1}}
@media (max-width:720px){.rvgrid{grid-template-columns:1fr}}
.rvcol{background:rgba(6,10,20,.55);border:1px solid rgba(214,178,94,.35);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.rvcol h3{font-family:var(--display);color:var(--gold2);font-size:1.05rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rvcol .num{width:26px;height:26px;border-radius:50%;background:var(--gold);color:#1a1206;display:inline-grid;place-items:center;font-size:.9rem}
.rvpaper{background:linear-gradient(160deg,#fbf3df,#efe0bd);color:#21180f;border-radius:12px;padding:12px 14px;line-height:1.75;font-size:1.02rem;overflow-wrap:anywhere;box-shadow:inset 0 0 0 1px rgba(58,34,16,.2)}
.rvpaper.small{font-size:.92rem;padding:8px 10px}
textarea.rvpaper.edit{width:100%;min-height:240px;resize:vertical;font:inherit;font-size:1.02rem;border:2px solid var(--gold);outline:none}
textarea.rvpaper.edit:focus{box-shadow:0 0 0 3px rgba(240,192,73,.45)}
.rvpaper del,.corr del,.legend del,.pairs del{background:#ffd9d4;color:#8a1a10;text-decoration:line-through;border-radius:3px;padding:0 2px}
.rvpaper ins,.corr ins,.legend ins,.pairs ins{background:#d4f2dc;color:#145a2a;text-decoration:none;border-bottom:2px solid #3fa877;border-radius:3px;padding:0 2px}
mark.hl{background:#ffe680;color:inherit;border-radius:3px;padding:0 2px}
mark.cm{background:#cfe6ff;color:inherit;border-radius:3px;padding:0 2px;border-bottom:2px solid #3a6aa0}
mark sup{font-weight:900;color:#1f4f8a;margin-left:1px}
.legend{font-size:.82rem;display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0}
.rvtools{display:flex;flex-wrap:wrap;gap:6px}
.rvnote{padding:10px;border-radius:12px;display:flex;flex-direction:column;gap:8px}
.notelist{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.notelist li{background:rgba(255,255,255,.07);border-radius:10px;padding:6px 8px}
.notelist q{display:block;font-weight:800;color:var(--gold2)}
.parchframe .notelist q,.corr .notelist q{color:#6b4a10}
.notelist .x,.hlrow .x{border:0;background:none;color:#ffb3a6;font-weight:900;margin-left:6px}
.rvacts{display:flex;flex-direction:column;gap:8px;margin-top:10px}.rvacts>*{width:100%}
.rvmore{margin-top:6px}.rvmore summary{cursor:pointer}.ver{margin-top:8px}
.corr{border-radius:14px;padding:10px 14px;margin-bottom:12px}
.corr summary{cursor:pointer;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.corr>*+*{margin-top:8px}
.pairs{font-size:.92rem}
.mybest{display:flex;gap:14px;align-items:center;padding:10px 16px;border-radius:16px;margin-bottom:12px}
.mybest p{margin:2px 0;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bannerhead .helpq{margin-top:8px}
mark.hl,mark.cm{color:#21180f}
.corr .mtabs{display:flex;flex-wrap:wrap;gap:6px}
.corr .mtabs button{color:#3a2a10;border:1px solid rgba(58,34,16,.4);background:rgba(255,255,255,.55);border-radius:99px;padding:5px 12px;font-weight:800}
.corr .mtabs button[aria-pressed=true]{background:#3a2a10;color:#f6dfae;border-color:#3a2a10}
.corr .review{background:rgba(255,255,255,.55);border-left:4px solid #b8332a;color:#21180f}
.corr .review b{color:#8a1a10}
.corr .ctable th{color:#5a4220}
.corr{background:linear-gradient(160deg,#f6ead0,#e6d2a8)!important;color:#21180f;border:2px solid #b8954a}
.corr summary b{color:#3a2a10;font-family:var(--display)}
.corr .label,.corr .legend{color:#5a4220}
.corr .notelist li{background:rgba(255,255,255,.6);color:#21180f}
.corr .hint{color:#4a3418}
.log .rvmore .rvpaper{margin-top:6px}
.idcard .rank{display:inline;width:auto;height:auto;background:none;color:var(--gold2);border-radius:0;font-size:1rem}
/* subtle Malaysian touch: songket-style gold diamond strip under page titles */
.bannerhead>h1::after,.qbanner h1::after{content:"";display:block;height:9px;width:min(260px,70%);margin:6px auto 0;opacity:.75;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9'%3E%3Cpath d='M9 .5 17 4.5 9 8.5 1 4.5Z' fill='none' stroke='%23e2b64a' stroke-width='1.2'/%3E%3Ccircle cx='9' cy='4.5' r='1.3' fill='%23e2b64a'/%3E%3C/svg%3E") repeat-x center}
.qbanner h1::after{margin:4px 0 0}
/* illustrated guide */
.box.guide{width:min(1060px,96vw);max-height:94vh;overflow:auto;display:flex;flex-direction:column;gap:12px}
.box.guide .headrow{flex-wrap:wrap;gap:10px}
.gprog{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:800;color:var(--gold2)}
.gdots{display:flex;gap:6px;flex-wrap:wrap}
.gdots button{width:14px;height:14px;border-radius:50%;border:2px solid var(--gold);background:transparent;padding:0}
.gdots button.done{background:rgba(226,182,74,.5)}.gdots button.on{background:var(--gold2);transform:scale(1.25)}
.gbody{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:16px;align-items:start}
@media (max-width:760px){.gbody{grid-template-columns:1fr}}
.gshot{position:relative;margin:0;border-radius:12px;overflow:hidden;border:2px solid rgba(214,178,94,.5);background:#0a0f1c;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.gshot img{display:block;width:100%;height:auto}
.gbox{position:absolute;border:3px solid #ffd54a;border-radius:10px;box-shadow:0 0 0 9999px rgba(0,0,0,.38),0 0 18px rgba(255,213,74,.9);pointer-events:none}
.gnum{position:absolute;top:-14px;left:-14px;width:28px;height:28px;border-radius:50%;background:#ffd54a;color:#1a1206;display:grid;place-items:center;font-family:var(--display);font-size:.95rem;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.garrow{position:absolute;transform:translate(-50%,6px);color:#ffd54a;font-size:30px;line-height:1;text-shadow:0 2px 6px #000;pointer-events:none}
.garrow.down{transform:translate(-50%,calc(-100% - 6px))}
[data-motion=on] .garrow.up{animation:garu 1.2s ease-in-out infinite}[data-motion=on] .garrow.down{animation:gard 1.2s ease-in-out infinite}
@keyframes garu{50%{transform:translate(-50%,0)}}@keyframes gard{50%{transform:translate(-50%,calc(-100% - 0px))}}
.gmissing{padding:60px;text-align:center;color:var(--mute)}
.gtext{display:flex;flex-direction:column;gap:8px}
.gtext h3{font-family:var(--display);color:var(--gold2);font-size:1.35rem}
.gtext p{font-size:1.05rem;line-height:1.55}
.gtry{background:rgba(63,168,119,.15);border-left:4px solid #3fa877;border-radius:8px;padding:8px 10px}
.gnav{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.modal .box.guide{max-width:min(1060px,96vw);width:min(1060px,96vw);text-align:left}
.gtext{text-align:left}.gtext h3{text-align:left}
.garrow{font-size:22px}
@media (max-width:560px){.gnav{justify-content:center}.gnav .plaque{order:-1;width:100%}}
.modal .box.guide{align-items:stretch}.modal .box.guide>*{flex-shrink:0}
/* quick login, keep logged in, recovery */
.keep{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;font-weight:800;cursor:pointer}
.keep input{width:22px;height:22px;accent-color:#3fa877;flex:none}
.linkbtn{background:none;border:0;color:#6b3a10;text-decoration:underline;font-weight:800;padding:4px;align-self:center}
.authform.quick h3{font-family:var(--display);color:#3a2a10;font-size:1.15rem}
.qclasses{display:flex;flex-direction:column;gap:8px}.qclasses .plaque{display:flex;flex-direction:column;align-items:center}.qclasses small{font-size:.8rem;opacity:.8}
.qwiz{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:52vh;overflow:auto;padding:2px}
.qwiz button{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid rgba(58,34,16,.3);border-radius:14px;background:rgba(255,255,255,.5);padding:6px;color:#21180f;min-height:120px}
.qwiz button:hover,.qwiz button:focus-visible{border-color:var(--gold);background:#fff8e6}
.qwiz .portrait{border-radius:10px}.qwiz b{font-size:.9rem;overflow-wrap:anywhere}
.qq{width:74px;height:88px;display:grid;place-items:center;font-size:2rem;background:#3a2a10;color:#f6dfae;border-radius:10px}
.qme{display:flex;gap:14px;align-items:center}.qme .portrait{border-radius:12px}.qme h3{margin:0}
code.bigcode{display:inline-block;font-size:1.5rem;letter-spacing:.12em;background:#fff8e6;color:#21180f;border:2px dashed var(--gold);border-radius:10px;padding:6px 14px;font-weight:900;user-select:all}
.authform .chip{color:#3a2a10;border-color:rgba(58,34,16,.45);background:rgba(255,255,255,.55)}
.bannerhead>h1{flex-wrap:wrap}.bannerhead>h1::after{flex-basis:100%}
/* Developer Office */
.st{display:inline-block;border-radius:99px;padding:2px 10px;font-size:.8rem;font-weight:800}
.st-pending{background:#ffe2a8;color:#6a4200}.st-approved{background:#cdeed8;color:#145a2a}.st-rejected{background:#e4e4e4;color:#444}.st-disabled{background:#ffd2cc;color:#8a1a10}.st-none{background:#e4e4e4;color:#444}
.chip.ok{background:#2f8a5a;border-color:#2f8a5a;color:#fff}.chip.danger{background:#a8322a;border-color:#a8322a;color:#fff}
.dstats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.closedrow td{opacity:.7}
/* Original Idea2Write visual language: midnight blue, antique brass, candlelight. */
:root{--night:#090e1c;--night2:#111c32;--glass:rgba(13,21,39,.94);--glass2:rgba(22,33,54,.94);--gold:#cfb676;--gold2:#f2dfac;--gold3:#7f693e;--cream:#eee9dc;--mute:#b0b9c7;--ember:#d9b66d;--display:"Cinzel",Georgia,serif;--body:"Segoe UI",system-ui,sans-serif;--r:10px}
html{min-height:100%;scroll-padding-top:16px}body{margin:0;padding:24px clamp(12px,3vw,48px) 56px;font-size:16px;line-height:1.6;min-width:0;overflow-x:clip}#root{max-width:1380px;gap:16px}#app{min-width:0;width:100%}img,svg{max-width:100%}button,input,textarea,select{font:inherit}button{min-height:42px}h1,h2,h3{line-height:1.25}h1{font-size:clamp(1.7rem,3vw,2.7rem)}h2{font-size:clamp(1.2rem,2vw,1.6rem)}h3{font-size:1.06rem}p{line-height:1.65}
.academy-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.36) saturate(.65)}.world:after,.world.dim:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,19,.12),rgba(5,10,22,.82))}.world.room{opacity:1}.world.dim{opacity:1}
.stage,.panel,.parchframe,.today,.curq,.qcardb,.hud,.ofhud{border-radius:10px;background:linear-gradient(145deg,rgba(23,34,55,.97),rgba(10,17,33,.97));border:1px solid rgba(207,182,118,.38);box-shadow:0 8px 30px #0003,inset 0 0 0 3px #0b1223,inset 0 0 0 4px #bda06416}.stage{padding:clamp(18px,3vw,32px);backdrop-filter:blur(10px)}.parchframe{color:var(--cream)}.parchframe p,.parchframe .mute{color:var(--mute)}.panel{padding:20px}.bannerhead{padding:0 0 18px;border-bottom:1px solid #cfb67640;background:none}.bannerhead h1,.bannerhead h2{color:var(--gold2);text-shadow:none}
.plaque,.plaque.blue,.plaque.green,.btn{background:linear-gradient(180deg,#f2dfa7,#c7a457);border:1px solid #ddc38a;border-radius:6px;box-shadow:0 3px 12px #0003;color:#292214;font-family:var(--display);letter-spacing:.02em;padding:11px 20px;text-shadow:none;transform:none}.plaque::before,.plaque::after{display:none}.plaque.ember,.btn.ember{background:linear-gradient(180deg,#f5e3ad,#d3af60);color:#211a0e;box-shadow:0 4px 18px #ceaa5e2b}.plaque:hover,.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.plaque.dash{background:#152239c9;color:var(--gold2);border-color:#cfb67670;text-align:left;border-radius:8px;box-shadow:none;padding:18px;min-height:106px}.plaque.dash small{color:#bcc6d7;line-height:1.4;margin-top:8px;font-family:var(--body);letter-spacing:0}.plaque.dash .glyph{color:#d1b878}.chip,.icobtn,.btn.ghost{border-radius:6px;color:var(--cream);background:#16213a;border-color:#cfb67655;box-shadow:none}.chip[aria-pressed=true],.tabs button[aria-selected=true]{background:#cbb37a;color:#171b25}.chip:hover,.icobtn:hover{background:#24324b}.utility{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#cfc7b5;font-size:.86rem;padding:0 4px;flex-wrap:wrap}.utility>div{display:flex;gap:8px;flex-wrap:wrap}.utility .chip{font-size:.84rem;padding:5px 12px;min-height:36px}
.title{min-height:70vh;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:32px 16px;background:none}.title .titleL{padding:20px 0}.title .logo{font-size:clamp(2.4rem,5vw,4.8rem);font-family:var(--display);letter-spacing:-.02em}.subtitle{letter-spacing:.22em!important;font-size:1rem!important;color:#e2c888}.tagline{font-size:1.05rem;max-width:400px;margin:24px 0}.loginbtns{display:flex;flex-wrap:wrap;gap:12px}.loginbtns .plaque{width:auto}.academy-hero{position:relative;min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;padding:38px;border-radius:150px 150px 8px 8px;border:1px solid #d0b879;background:linear-gradient(0deg,#0c1529 2%,#0c152944 75%),url('assets/castle.jpg') center/cover;box-shadow:0 0 0 7px #111c2f,0 0 0 8px #b59b5b66}.academy-hero span{font-size:.65rem;letter-spacing:.25em;color:#e5c984;margin-bottom:18px}.academy-hero h2{font-size:2rem;color:#f2e5c4;margin-bottom:18px}.academy-hero p{color:#d2d4dc;font-size:.94rem}.login-support{text-align:center;color:#bac3d2;font-size:.9rem;padding:18px}.login-support a{color:#e7cf96}.academy-welcome{padding:32px 6px 16px}.academy-welcome h1{margin:12px 0;color:#f3e4c7}.academy-welcome p{color:#bdc6d7}.courtyard{min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr);gap:20px}.today{padding:28px}.today h2{color:#ead6a4}.today p{color:#c5cdd9}.today .chips{margin-top:18px}.cyL,.cyR,.cyC{display:flex;flex-direction:column;gap:14px}.qbook{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.qcardb{padding:22px;text-align:left;min-height:170px;transition:border-color .2s}.qcardb:hover{border-color:#edd497;transform:translateY(-2px)}.qcardb .meta{color:#c0c9d9}.curq{padding:18px}.streakmini{background:#10233a8c;border:1px solid #cfb67644;border-radius:8px;padding:14px}.hud{position:relative;top:auto;flex-wrap:wrap;gap:16px;padding:14px 18px}.hud .who{min-width:0}.hud .who b{font-size:1rem}.hud .stats{flex-wrap:wrap;gap:8px}.steprail{flex-wrap:wrap}.steprail button{padding:8px 14px}.steprail .now{background:#cdb477;color:#1b2030}.title .group{display:none}
input,textarea,select,.field,.field.dark{max-width:100%;width:100%;min-width:0;border:1px solid #9b864e88;border-radius:6px;padding:12px 14px;background:#090f20;color:#f0eadd;font-size:16px}label{display:block}label:has(input),label:has(textarea),label:has(select){margin:10px 0}input[type=checkbox],input[type=radio]{width:auto;min-width:18px;min-height:18px;accent-color:#c9ae6a}select option{color:#f0eadd;background:#101b2c}textarea{resize:vertical;min-height:100px}input::placeholder,textarea::placeholder{color:#8c98ae}.authform{max-width:560px;padding:28px;gap:12px}.authbox{max-width:860px;margin:0 auto}.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.lvl{width:100%;text-align:left;background:#142139;border:1px solid #a38c564d;border-radius:8px;padding:22px;color:#e8e6df;box-shadow:none}.lvl .nm{font-size:1.15rem;color:#f0dcaa;display:block;margin:10px 0}.lvl ul{padding-left:20px;color:#bdc7d8}.lvl[aria-pressed=true]{border-color:#f4d58c;background:#283348;box-shadow:inset 0 0 0 1px #e3c78c}.meter{display:none}
.creator3{grid-template-columns:180px minmax(240px,360px) minmax(0,1fr);gap:24px}.bigprev{max-width:360px;border-radius:130px 130px 8px 8px;border:1px solid #c5ab71;background:radial-gradient(ellipse,#2b3850,#080e1b);box-shadow:0 14px 45px #0006}.bigprev svg{width:100%;height:auto;min-height:330px}.bigprev .np{font-family:var(--display);letter-spacing:.1em;padding:14px;color:#ebd7a6}.catmenu{position:static;gap:8px}.catmenu .plaque{background:#122038;color:#dad9d1;border-color:#cfb67640;font:inherit;min-height:40px;box-shadow:none;text-align:left;justify-content:flex-start}.catmenu .plaque[aria-pressed=true]{border-color:#dec487;background:#28354b}.optpanel{background:#121d31;padding:18px;border:1px solid #cfb67644;border-radius:8px}.opts{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}.opt{background:#0d1729;border-radius:6px;color:#cfd2d8;border-color:#a28d5540}.opt[aria-pressed=true]{border-color:#f2ce82;background:#2c3851}.opt .optpic{filter:saturate(.7)}.portrait{filter:saturate(.75) contrast(1.05)}.house .banner{max-height:240px;width:auto}.houses .house{border-radius:8px;background:#111c30;border:1px solid #bda36a55}.houses .house[aria-pressed=true]{border-color:#e5c783;background:#233049}
/* Layout repairs: document scroll, flexible grids and no height-capped writing panels. */
.stage.room,.roomgrid,.thinkgrid,.think3,.write3,.orgsplit,.oglayout,.ogboard,.creator3,.rvgrid,.courtyard{min-width:0;max-width:100%;height:auto;max-height:none;overflow:visible}.write3{display:grid;grid-template-columns:minmax(170px,.7fr) minmax(0,2.1fr) minmax(190px,.85fr);gap:20px;align-items:start}.write3>*{min-width:0}.scaf,.help,.paperwrap,.ogtray,.preview{position:static!important;max-height:none!important;overflow:visible!important}.paperwrap{min-width:0}.paper{background:#f0e5cb;color:#29251e;padding:24px;border-radius:6px}#essay{font-family:Georgia,serif;font-size:1.12rem;line-height:1.95;min-height:330px;max-height:none;height:auto;overflow:visible;word-break:normal;overflow-wrap:anywhere;color:#25241f}.ptitle{color:#5d4c2c}.toolbar,.writebar{flex-wrap:wrap;height:auto;gap:8px}.writebar .plaque{font-family:var(--body);font-size:.85rem;padding:8px 12px}.count{white-space:normal}.scaf .mute,.help .mute{color:#b7c0d0}.hblock{border-color:#cfb67633}.hblock h4{color:#e1c98f}.starters button,.qs li{color:#d4d7e0;background:transparent}.scafopts .scafbtn{background:#101b30;color:#ddd;border-color:#b2985e50}.scafopts .on{background:#2c3750;border-color:#d4b97b}.ogtray{background:#111d32}.ogtext{color:#eee7d6}.ogcard{border-radius:6px;background:linear-gradient(160deg,#f2e9d5,#d6c5a2);color:#30291c}.ogtext .txt{color:#30291c}.ogcat,.oggroup{min-width:0}.thinktabs{flex-wrap:wrap}.wordcard{min-width:0}.hand{font-family:Georgia,serif}.tscroll{max-width:100%;overflow-x:auto}.ctable{font-size:.9rem;min-width:650px}.rvgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.rvpaper{overflow-wrap:anywhere}.rv-edit{min-width:0}.modal{padding:16px;overflow-y:auto;align-items:flex-start}.modal .box{margin:auto;max-height:calc(100dvh - 32px);overflow-y:auto;width:min(640px,100%);padding:28px;min-width:0;border-radius:10px;background:#121c30;border:1px solid #c5ac70;color:#eee7d7}.modal .box.wide,.modal .box.guide{width:min(1000px,100%);max-height:calc(100dvh - 32px)}.modal .box>*{max-width:100%}.box.welcome-guide{width:min(820px,100%);align-items:stretch;text-align:left;gap:18px;display:flex;flex-direction:column}.welcome-guide>button:first-child{align-self:flex-end}.welcome-steps{display:grid;gap:14px;margin:4px 0}.welcome-steps article{display:flex;gap:18px;align-items:flex-start;padding:16px;background:#1c2941;border:1px solid #b49b5c33;border-radius:6px}.welcome-steps article>.glyph{flex:0 0 32px;color:#d6b97b}.welcome-steps p{color:#bcc7d8;font-size:.95rem}.welcome-steps h3{margin-bottom:6px}.guide-illustration{display:flex;align-items:center;justify-content:center;min-height:170px;background:linear-gradient(0deg,#0c1328bb,#0c1328bb),url('assets/windows.jpg') center/cover;color:#e4c687;border-radius:8px}.support-picker .levels{margin:20px 0}.notification-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:50%;background:#d6b96f;color:#151b2b;font-size:.75rem}.notification-badge[hidden]{display:none}.activity-notifications{margin-bottom:16px}.notification-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0}.support-layout{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,2fr);gap:24px;align-items:start}.support-layout h2{margin-bottom:16px}.ticket-list{display:grid;gap:10px}.ticket{text-align:left;display:flex;flex-direction:column;gap:8px;min-width:0;overflow-wrap:anywhere;padding:16px;background:#152238;border:1px solid #cbb27344;border-radius:8px;align-items:flex-start}.ticket.active{border-color:#eed28b;background:#27354b}.ticket small{color:#bac5d8}.status{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;padding:3px 8px;border-radius:4px;background:#d1ab5426;color:#efd49a}.status.resolved{background:#5da38c26;color:#b5dfce}.messages{list-style:none;padding:0;display:grid;gap:14px}.messages li{padding:16px;background:#101a2d;border:1px solid #65748b44;border-radius:6px}.messages li.developer{background:#223847;border-color:#6eaa9b55}.messages time{display:block;font-size:.75rem;color:#a8b7cb}.messages p{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px}.support-form{display:flex;flex-direction:column;gap:10px}.empty-note{padding:20px;color:#a8b6ca}.reply-new{color:#e5c780;font-size:.78rem}.class-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}.demo-note{background:#d9b97318;border:1px solid #c2a45f66;color:#ead8ae;padding:12px 18px;border-radius:6px}.gtry{background:#25324a;color:#e2d5b8}.scaf .quillbox{max-height:160px;overflow:hidden}.scaf .quillbox svg{max-height:110px}.ogtray .chip{white-space:normal}.ornaments{display:none}
@media(max-width:1100px){.write3{grid-template-columns:minmax(170px,.7fr) minmax(0,2fr)}.write3>.help{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.write3>.help>h3{grid-column:1/-1}.creator3{grid-template-columns:155px minmax(0,1fr)}.creator3 .optpanel{grid-column:1/-1}.rvgrid{grid-template-columns:1fr}.courtyard{grid-template-columns:1fr 1.35fr}.cyR{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.qbook{grid-template-columns:repeat(2,minmax(0,1fr))}.title{gap:28px}.academy-hero{min-height:440px}.thinkgrid,.think3{grid-template-columns:1fr}}
@media(max-width:760px){body{padding:12px 12px 36px;font-size:15px}.stage{padding:18px;gap:18px}.hud{padding:12px}.hud .stats{width:100%}.steprail{width:100%}.title{grid-template-columns:1fr;padding:8px;min-height:0}.title .titleL{text-align:left}.academy-hero{min-height:320px;border-radius:90px 90px 8px 8px;order:-1;padding:28px}.academy-hero h2{font-size:1.6rem}.academy-hero p{display:none}.academy-welcome{padding-top:20px}.courtyard{display:flex;flex-direction:column}.cyC{order:-1}.cyL,.cyR{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.plaque.dash{min-height:94px;padding:14px;font-size:.9rem}.courtyard .today{padding:22px}.curq{grid-column:1/-1}.qbook,.levels,.support-layout{grid-template-columns:1fr}.levels .lvl{padding:18px}.lvl ul{font-size:.9rem}.creator3{grid-template-columns:1fr}.bigprev{grid-row:1;max-width:270px}.catmenu{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.catmenu .plaque{padding:6px 10px;font-size:.8rem}.catmenu .glyph{display:none}.write3{grid-template-columns:1fr}.write3 .paperwrap{order:-1}.write3>.help{grid-column:auto;display:block}.writebar .plaque{flex:1 1 130px}.paper{padding:18px}#essay{min-height:300px}.toolbar .count{flex-basis:100%}.oglayout,.orgsplit,.ogboard,.roomgrid,.gamegrid,.qgrid,.thinklayout{display:grid;grid-template-columns:1fr!important}.ogtray{position:static}.oggroups{grid-template-columns:1fr}.modal{padding:8px}.modal .box{padding:20px;max-height:calc(100dvh - 16px)}.modal .box.wide,.modal .box.guide{max-height:calc(100dvh - 16px)}.welcome-steps article{padding:12px;gap:12px}.support-layout{gap:20px}.ticket-list{max-height:270px;overflow:auto}.utility{gap:8px}.utility>div{width:100%}.utility .chip{font-size:.78rem;flex:1}.houses{grid-template-columns:1fr}.houses .house .banner{max-height:180px}.cal{max-width:100%;overflow:auto}.day{min-width:0;font-size:.72rem}.day .t{font-size:.7rem}.week{gap:4px}.foot{flex-wrap:wrap}.today .chips{flex-wrap:wrap}.authform{padding:18px}.tscroll{width:100%}.ogbar{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.demo-banner{background:#28263b;border:1px solid #d1b97b77;padding:12px 18px;color:#ebdab2;font-size:.8rem;position:relative;z-index:2;max-width:1380px;margin:0 auto 20px;line-height:1.7}.demo-banner code{color:inherit}
/* Keep secondary writing instructions readable against midnight panels. */
.write3 .parchframe h3,.write3 .parchframe h4,.write3 .mapmini h4{color:#e8d49f}.write3 .scafbtn small,.write3 .check small{color:#bdc8d9}.scaf .quillbox{max-height:none;overflow:visible}.questbanner,.qbanner{background:transparent}.bannerhead:before,.bannerhead:after{display:none}.bigprev .np{background:#111d30}.utility .chip{white-space:normal}
@media(max-width:760px){.utility>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.utility .chip{padding:7px;line-height:1.4}.hud .who{gap:10px}.hud .who b{font-size:.85rem}.hud .who small{font-size:.72rem}.hud .stats{gap:6px}.hud .stats .pill{font-size:.8rem}.stage.room .qhelp{margin:0}.scaf,.help{padding:16px}.ogtext{max-width:100%}.ogtext .txt{overflow-wrap:anywhere}}
.cyC{align-items:stretch}.cyL,.cyR{padding-top:0}.cyC .today{margin-top:0;background:linear-gradient(145deg,#1b2d43f5,#101b30f5);border:1px solid #d6bb7b;box-shadow:0 8px 24px #0003}.cyC>.plaque{width:100%;min-height:60px}.today:after{display:none}.cyC .today h2{font-size:clamp(1.3rem,2.2vw,1.9rem)}.cyC .today p{font-size:.95rem}.cyC .today .bonus{font-size:.78rem}.courtyard .curq{margin-top:0}
.entry-actions{padding:24px;display:grid;gap:20px;background:#111e32ed;border:1px solid #bda36b55;border-radius:10px}.entry-actions h2{color:#edd8a7}.entry-actions p{color:#b8c6d9;margin:8px 0 16px}.testing-tools{border-top:1px solid #bda36b44;padding-top:16px;font-size:.9rem}.testing-tools summary{cursor:pointer;color:#e6ce96}.testing-status{background:#1b2b40;border:1px solid #bda36b66;padding:10px 16px;border-radius:6px;color:#ead8af;font-size:.8rem}.tabs{display:flex;flex-wrap:wrap;overflow:visible;gap:8px}.tabs [role=tab]{white-space:normal;min-height:44px;flex:0 1 auto}.rvacts{display:flex;flex-direction:column;gap:10px}.rvacts button{white-space:normal}.rvcol textarea{min-height:210px;width:100%}.rvcol .label{color:#e1c99d}.rvstats{color:#c8d1e1!important}.rvhead{flex-wrap:wrap}.feature-path{padding:12px 16px;margin-bottom:16px;background:#0d1c30;border-left:2px solid #cdb378}.entry-actions .chips{flex-wrap:wrap}

.rvcol .hint,.rvcol .mute{color:#bac8dc}.tp-result{padding:10px 14px;border:1px solid #d3b779;background:#28364d;color:#f0d9a7;border-radius:6px;margin:12px 0}

/* Retain the original site palette and typography. */
:root{--night:#0C1222;--night2:#121A2F;--glass:#141C31;--glass2:#1A2340;--gold:#D9B15F;--gold2:#F3DC9A;--gold3:#8C6A2E;--cream:#EFE7D6;--mute:#BDB3A0;--body:"Source Sans 3","Segoe UI",system-ui,sans-serif;--display:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,serif}
/* Layout: a candlelit castle backdrop (real artwork) behind gilded midnight panels; parchment is reserved for the pupil's own writing.
   Single, deliberate dark look: colours are set explicitly so it reads the same on any host theme. */
:root{
  --night:#0C1222; --night-2:#121A2F; --panel:#141C31; --panel-2:#1A2340; --charcoal:#1C1F26;
  --gold:#D9B15F; --gold-hi:#F3DC9A; --gold-d:#8C6A2E; --burgundy:#6E1B2A; --emerald:#1E5B3E; --sapphire:#1F3F7A;
  --text:#EFE7D6; --muted:#BDB3A0; --ink:#2A1D10; --ink-muted:#5E4B33; --parch:#EBDDBB; --parch-2:#D9C39A;
  --good:#7FC79A; --warn:#E9C46A; --danger:#F19484;
  --house:#7A1E2B; --house-deep:#4A0F18;
  --display:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,serif;
  --script:"Cormorant Garamond","Palatino Linotype",Georgia,serif;
  --body:"Source Sans 3","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --r:10px; color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night)}
body{background:var(--night);color:var(--text);font-family:var(--body);font-size:18px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 40px;overflow-x:hidden}
#root{max-width:1240px;margin:0 auto}
.app{display:flex;flex-direction:column;gap:20px;position:relative}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.2;margin:0;text-wrap:balance;color:var(--gold-hi);letter-spacing:.01em}
h1{font-size:clamp(1.7rem,3.4vw,2.4rem)} h2{font-size:1.45rem} h3,.h3{font-size:1.15rem;font-family:var(--display);font-weight:600;color:var(--gold-hi)} h4{font-size:1rem}
p{margin:0} ul,ol{margin:0}
h1:focus{outline:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid #8FC3FF;outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#1a1206;padding:8px 14px;border-radius:8px;z-index:60}
.skip:focus{left:16px}
.muted{color:var(--muted)} .small{font-size:.9rem} .strong{font-weight:700}
.eyebrow{font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lead{font-size:1.08rem;color:#DCD3C0;max-width:70ch}
.tagline-i{font-family:var(--script);font-style:italic;font-size:1.7rem;color:var(--gold-hi)}
.stack{display:flex;flex-direction:column;gap:16px} .stack-l{display:flex;flex-direction:column;gap:22px}
.stack-s{display:flex;flex-direction:column;gap:10px} .stack-xs{display:flex;flex-direction:column;gap:4px}
.row{display:flex;align-items:center;gap:12px} .wrap{flex-wrap:wrap} .between{justify-content:space-between} .end{justify-content:flex-end} .center{justify-content:center} .gap-s{gap:8px}
.grow{flex:1;min-width:0} .center-text{text-align:center;align-items:center} .align-start{align-self:flex-start}
.narrow{max-width:860px;width:100%;margin-inline:auto} .center-col{align-items:center}

/* ---------- backdrop: real artwork, darkened so panels stay readable ---------- */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 50% -10%,#24315A 0,#111A31 45%,#090E1B 100%)}
.bd-sky{position:absolute;left:0;right:0;top:0;height:min(48vh,440px);background-size:cover;background-position:center 30%;opacity:.62;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.bd-left,.bd-right{position:absolute;top:18vh;bottom:0;width:min(17vw,260px);background-size:cover;background-position:center;opacity:.42;filter:saturate(.9)}
.bd-left{left:0;-webkit-mask-image:linear-gradient(90deg,#000 20%,transparent);mask-image:linear-gradient(90deg,#000 20%,transparent)}
.bd-right{right:0;-webkit-mask-image:linear-gradient(270deg,#000 20%,transparent);mask-image:linear-gradient(270deg,#000 20%,transparent)}
.scene-room .bd-left{opacity:.6;width:min(24vw,360px);background-position:left center}
.bd-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 12% 85%,color-mix(in srgb,var(--house) 55%,transparent) 0,transparent 45%),radial-gradient(ellipse at 88% 90%,rgba(217,177,95,.12) 0,transparent 40%);transition:background 1s ease}
.scene-library .bd-glow{background:radial-gradient(ellipse at 50% 100%,rgba(240,180,90,.14) 0,transparent 55%)}
.bd-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(4,6,12,.75) 100%)}
@media (max-width:900px){.bd-left,.bd-right{display:none}}
.app>*:not(.backdrop):not(.skip):not(.overlay):not(.doors){position:relative;z-index:1}

/* ---------- gilded frames ---------- */
.frame{position:relative;background:linear-gradient(180deg,rgba(23,31,54,.94),rgba(13,18,33,.96));border:1px solid var(--gold-d);border-radius:var(--r);
  box-shadow:inset 0 0 0 3px rgba(8,11,22,.9),inset 0 0 0 4px rgba(217,177,95,.32),0 18px 40px rgba(0,0,0,.45)}
.frame::before,.frame::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--gold);pointer-events:none;opacity:.85}
.frame::before{top:5px;left:5px;border-right:0;border-bottom:0;border-top-left-radius:4px}
.frame::after{bottom:5px;right:5px;border-left:0;border-top:0;border-bottom-right-radius:4px}
.panel{padding:clamp(16px,2.4vw,26px)}
.ribbon{align-self:center;display:flex;justify-content:center}
.ribbon>*{font-family:var(--display);font-size:clamp(1.05rem,2.2vw,1.45rem);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);
  background:linear-gradient(180deg,#7E2232,#4C111C);border:1px solid var(--gold);padding:8px 34px;margin:0;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);text-align:center}
.ornate{white-space:nowrap;font-family:var(--display);color:var(--gold);letter-spacing:.08em;text-align:center;display:flex;align-items:center;gap:10px;justify-content:center}
.ornate::before,.ornate::after{content:"";height:1px;flex:0 1 70px;background:linear-gradient(90deg,transparent,var(--gold))}
.ornate::after{transform:scaleX(-1)}
.note{background:rgba(217,177,95,.12);border:1px solid rgba(217,177,95,.35);border-radius:8px;padding:12px 16px}
.banner{background:#4C111C;border:1px solid var(--gold-d);border-radius:8px;padding:12px 16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:8px;padding:10px 22px;font-family:var(--display);font-weight:600;letter-spacing:.03em;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;text-align:center}
.btn.gold{background:linear-gradient(180deg,#F6E2A2 0,#D9AE55 48%,#B5862F 100%);color:#24170A;border-color:#F7E7B4;box-shadow:0 0 0 1px #6B4C1A,0 6px 18px rgba(217,177,95,.25)}
.btn.gold:hover{box-shadow:0 0 0 1px #6B4C1A,0 0 22px rgba(243,220,154,.45);transform:translateY(-1px)}
.btn.secondary{background:rgba(10,14,27,.7);border-color:var(--gold-d);color:var(--gold-hi)}
.btn.secondary:hover{border-color:var(--gold);background:rgba(217,177,95,.12)}
.btn.ghost{background:transparent;color:var(--gold-hi);border-color:transparent}
.btn.ghost:hover{background:rgba(217,177,95,.1)}
.btn.big{min-height:54px;padding:12px 32px;font-size:1.08rem}
.btn.small{min-height:38px;padding:6px 14px;font-size:.88rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.danger{color:var(--danger)!important}
.danger-btn{background:#8E2A22;color:#fff;border-color:#D46A5C}
.linkbtn{background:none;border:0;padding:4px 2px;color:var(--gold-hi);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px}
.iconbtn{width:36px;height:36px;border-radius:8px;border:1px solid var(--gold-d);background:rgba(8,11,22,.6);cursor:pointer;font-weight:800;display:inline-flex;align-items:center;justify-content:center;color:var(--gold-hi)}
.iconbtn:hover{background:rgba(217,177,95,.15)} .iconbtn:disabled{opacity:.3;cursor:default}
.iconbtn[aria-pressed="true"]{background:var(--gold);color:#24170A}
.hintnote{color:var(--gold-hi);font-weight:600;font-size:.92rem;min-height:1em}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--gold-d);background:rgba(8,11,22,.6);border-radius:8px;padding:4px 12px;font-family:var(--display);font-size:.88rem;color:var(--gold-hi);position:relative}
.pill.stars{color:#FFE7A3}.pill.big{font-size:1.05rem;padding:6px 16px}
.gold-pill{background:linear-gradient(180deg,#2A4A39,#16291F);border-color:#7FB79A}
.tag{display:inline-block;border:1px solid rgba(217,177,95,.5);color:var(--gold-hi);border-radius:4px;padding:1px 8px;font-size:.78rem;font-family:var(--display);letter-spacing:.05em}
.status{display:inline-flex;gap:5px;align-items:center;font-size:.85rem;font-weight:700;border-radius:4px;padding:1px 8px}
.st-done{background:rgba(127,199,154,.18);color:#BDEBCB}.st-prog{background:rgba(233,196,106,.18);color:#F6DE9E}.st-none{background:rgba(255,255,255,.07);color:#D7D0C2}
.tip{cursor:help}.tipbox{position:absolute;left:0;top:calc(100% + 8px);width:min(300px,80vw);background:#0B101F;border:1px solid var(--gold);border-radius:8px;padding:10px 12px;font-family:var(--body);font-size:.88rem;color:var(--text);z-index:20;display:none;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.tip:hover .tipbox,.tip:focus .tipbox{display:block}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding:8px 14px}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;padding:4px;color:var(--gold-hi)}
.brandtext{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.brandtext b{font-family:var(--display);font-size:1.35rem;font-weight:600}.brandtext small{font-family:var(--script);font-style:italic;font-size:1rem;color:var(--muted)}
.topbar ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.navlink{background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;font-family:var(--display);font-size:.95rem;cursor:pointer;min-height:44px;color:var(--text)}
.navlink:hover{color:var(--gold-hi)}.navlink.on{color:var(--gold-hi);border-bottom-color:var(--gold)}
.iconpill{background:rgba(8,11,22,.6);border:1px solid var(--gold-d);border-radius:8px;color:var(--muted);padding:6px 10px;font-size:.85rem;cursor:pointer;min-height:40px}
.iconpill[aria-pressed="true"]{color:var(--gold-hi);border-color:var(--gold)}
.profilebtn{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(40,30,20,.6),rgba(10,10,20,.7));border:1px solid var(--gold);border-radius:999px;padding:3px 14px 3px 3px;font-family:var(--display);color:var(--gold-hi);cursor:pointer;min-height:44px}
.profilebtn.on,.profilebtn:hover{box-shadow:0 0 14px rgba(217,177,95,.35)}
@media (max-width:760px){.topbar nav{order:3;width:100%}.navlink{padding:6px 8px;font-size:.85rem}}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:.9rem;border-top:1px solid rgba(217,177,95,.25);padding-top:14px}
.scene-in{display:flex;flex-direction:column;gap:20px;animation:sceneIn .45s ease both}
@keyframes sceneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- portraits & crests ---------- */
.portrait{display:inline-block;flex:none;border-radius:8px;overflow:hidden;border:2px solid var(--gold);box-shadow:0 0 0 3px #0A0E1B,0 0 0 4px var(--ring,var(--gold-d)),0 8px 20px rgba(0,0,0,.5);background:#0A0E1B}
.portrait img{display:block;width:100%;height:100%;object-fit:cover}
.portrait.xs{width:38px;height:38px;border-radius:50%;border-width:1px;box-shadow:0 0 0 2px var(--ring,var(--gold-d))}
.portrait.m{width:118px;height:150px}.portrait.l{width:150px;height:190px}.portrait.xl{width:min(240px,70vw);height:300px}
.portrait.empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.9rem;text-align:center;padding:10px}
.crest{flex:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.pennant{width:100%;max-width:120px;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}

/* ---------- character creation ---------- */
.create-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.create-grid{grid-template-columns:1fr}.preview{order:-1}}
fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
legend{padding:0;margin-bottom:8px}
.portraitgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.portraitgrid .portrait{width:100%;height:auto;aspect-ratio:4/5}
@media (max-width:560px){.portraitgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pick,.housepick,.yearpick{position:relative;cursor:pointer;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border:2px solid transparent;transition:transform .2s,box-shadow .2s,border-color .2s}
.pick:hover,.housepick:hover{transform:translateY(-3px)}
.pick.on,.housepick.on{border-color:var(--gold-hi);box-shadow:0 0 22px rgba(243,220,154,.45)}
.pick:focus-within,.housepick:focus-within,.yearpick:focus-within{outline:3px solid #8FC3FF;outline-offset:2px}
.selmark{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;color:var(--gold-hi)}
.housegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:520px){.housegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hname{font-family:var(--display);font-size:1rem;color:var(--gold-hi)}
.yearpick{flex-direction:row;padding:10px 26px;border:1px solid var(--gold-d);background:rgba(8,11,22,.6);font-family:var(--display);min-height:46px}
.yearpick.on{border:2px solid var(--gold-hi);box-shadow:0 0 16px rgba(243,220,154,.4);background:rgba(217,177,95,.12)}
.field{width:100%;border:1px solid var(--gold-d);border-radius:8px;padding:10px 14px;background:rgba(5,8,16,.75);min-height:46px;color:var(--text)}
.field::placeholder{color:#8F8776}
.field:focus{border-color:var(--gold)}
.field.small{min-height:38px;padding:6px 10px;font-size:.95rem}
.field.sel{width:auto}
.preview{position:sticky;top:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--house,#1A2340) 55%,#0D1222),rgba(13,18,33,.97));transition:background .6s}
.preview-card{display:flex;flex-direction:column;align-items:center;gap:14px}
.pname{font-family:var(--display);font-size:1.7rem;color:var(--gold-hi)}
.hmotto{font-family:var(--script);font-style:italic;font-size:1.2rem;color:var(--gold-hi)}
.swatches{display:flex;gap:6px}.swatches i{width:26px;height:14px;border-radius:3px;border:1px solid var(--gold)}
.whogrid{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.whocard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 20px;cursor:pointer;color:var(--text);transition:transform .2s}
.whocard:hover{transform:translateY(-3px)}

/* ---------- common room ---------- */
.welcome{display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:linear-gradient(110deg,color-mix(in srgb,var(--house) 50%,#0D1222) 0,rgba(14,19,34,.95) 60%);transition:background .8s;overflow:hidden}
.banner-hang{position:absolute;right:120px;top:-6px;width:60px;opacity:.5}
@media (max-width:700px){.banner-hang{display:none}}
.room-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:stretch}
@media (max-width:860px){.room-grid{grid-template-columns:1fr}}
.quest-today{text-align:center;align-items:center;background:linear-gradient(180deg,rgba(20,27,48,.92),rgba(10,14,26,.96))}
.questtitle{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.steps-inline{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-family:var(--display);font-size:.95rem}
.steps-inline li{display:flex;align-items:center;gap:6px}
.steps-inline li+li::before{content:"→";color:var(--gold);margin-right:6px}
.sn{width:26px;height:26px;border-radius:50%;border:1px solid var(--gold);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem}
.nextreward{align-items:center;text-align:center;background:linear-gradient(180deg,#4E1320,#26080F 80%)}
.tiles3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:760px){.tiles3{grid-template-columns:1fr}}
.tilecard{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:14px 16px 16px;cursor:pointer;text-align:left;color:var(--text);transition:transform .2s,box-shadow .2s}
.tilecard:hover,.tilecard:focus-visible{transform:translateY(-3px);box-shadow:inset 0 0 0 3px rgba(8,11,22,.9),inset 0 0 0 4px rgba(217,177,95,.6),0 0 26px rgba(217,177,95,.25)}
.tileart{width:100%;height:120px;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;border-radius:6px;margin-bottom:8px;background:#0A0E1B center/contain no-repeat;border:1px solid rgba(217,177,95,.25)}
.art-topics{background-image:radial-gradient(circle at 70% 40%,rgba(243,220,154,.25),transparent 50%),repeating-linear-gradient(0deg,rgba(217,177,95,.12) 0 2px,transparent 2px 22px),linear-gradient(135deg,#3A2A1A,#14100C)}
.art-cal{background-image:radial-gradient(circle at 30% 30%,rgba(243,220,154,.18),transparent 55%),repeating-linear-gradient(90deg,rgba(217,177,95,.22) 0 1px,transparent 1px 34px),repeating-linear-gradient(0deg,rgba(217,177,95,.22) 0 1px,transparent 1px 24px),linear-gradient(#1D2440,#0D1222)}
.cardtitle{font-family:var(--display);font-size:1.15rem;color:var(--gold-hi)}

/* ---------- bars ---------- */
.bar{display:flex;flex-direction:column;gap:4px}
.barlabel{font-family:var(--display);font-size:.95rem;color:var(--text)}
.track{height:16px;border-radius:4px;border:1px solid var(--gold-d);background:repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 calc(10% - 1px),rgba(217,177,95,.25) calc(10% - 1px) 10%),#070A13;overflow:hidden}
.track i{display:block;height:100%;background:linear-gradient(180deg,#F6E2A2,#C9973F 60%,#8C6A2E);box-shadow:0 0 10px rgba(243,220,154,.6);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.skillbars{display:flex;flex-direction:column;gap:12px;background:rgba(5,8,16,.5);border:1px solid rgba(217,177,95,.25);border-radius:8px;padding:14px}

/* ---------- quests ---------- */
.questgrid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:980px){.questgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.questgrid{grid-template-columns:1fr}}
.questcard{width:100%;height:100%;display:flex;flex-direction:column;gap:8px;padding:12px 14px 16px;cursor:pointer;text-align:left;color:var(--text);transition:transform .2s,box-shadow .25s}
.questcard:hover,.questcard:focus-visible{transform:translateY(-4px);box-shadow:inset 0 0 0 3px rgba(8,11,22,.9),inset 0 0 0 4px rgba(217,177,95,.7),0 0 30px rgba(217,177,95,.3)}
.qframe{display:block;aspect-ratio:36/18;max-width:100%;overflow:hidden;border-radius:6px;border:2px solid var(--gold-d);box-shadow:inset 0 0 30px rgba(0,0,0,.6);position:relative}
.qframe::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(10,8,4,.55));pointer-events:none}
.qframe .scene{width:100%;height:100%;display:block;filter:sepia(.25) saturate(.85) brightness(.92)}
.qframe.big{aspect-ratio:36/22}.qframe.mini{width:120px;aspect-ratio:36/22;flex:none}
.reward{color:#FFE7A3;border-top:1px solid rgba(217,177,95,.25);padding-top:8px;margin-top:auto}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}
.select-card{text-align:left;padding:20px;display:flex;flex-direction:column;gap:8px;cursor:pointer;color:var(--text);transition:transform .2s,box-shadow .2s}
.select-card:hover{transform:translateY(-3px)}
.select-card.on{box-shadow:inset 0 0 0 3px rgba(8,11,22,.9),inset 0 0 0 5px var(--gold-hi),0 0 26px rgba(243,220,154,.35)}
.select-card .sub{color:var(--gold);font-weight:600}
.ticks{list-style:none;padding:0;display:flex;flex-direction:column;gap:3px;font-size:.95rem}
.ticks li::before{content:"✦";color:var(--gold);margin-right:8px;font-size:.75rem}
.navrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px}

/* ---------- activity bar ---------- */
.actbar{padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.acttitle{font-family:var(--display);font-size:1.3rem;color:var(--gold-hi)}
.scroll-ic{color:var(--gold);font-size:1.3rem}
.progress{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.progress li{display:flex;align-items:center}
.progress li+li::before{content:"›";color:var(--gold);margin:0 6px;font-size:1.2rem}
.pstep{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gold-d);background:rgba(8,11,22,.7);border-radius:999px;padding:4px 14px 4px 5px;font-family:var(--display);font-size:.92rem;cursor:pointer;min-height:40px;color:var(--text)}
.pstep .num{width:28px;height:28px;border-radius:50%;border:1px solid var(--gold-d);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem}
.pstep.now{border-color:var(--gold-hi);box-shadow:0 0 16px rgba(243,220,154,.45);color:var(--gold-hi)}
.pstep.now .num{background:var(--gold);color:#24170A}
.pstep.done .num{background:rgba(127,199,154,.25);border-color:#7FC79A}
.levelswitch{display:flex;flex-wrap:wrap;gap:4px;background:rgba(5,8,16,.6);border:1px solid var(--gold-d);border-radius:8px;padding:3px}
.levelswitch button{border:0;background:none;border-radius:6px;padding:6px 12px;font-family:var(--display);font-size:.85rem;cursor:pointer;min-height:36px;color:var(--text)}
.levelswitch button[aria-pressed="true"]{background:linear-gradient(180deg,#F6E2A2,#C9973F);color:#24170A}
.save{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--muted);font-style:italic}
.save.saved{color:#BDEBCB} .save.off,.save.error{color:var(--danger);font-style:normal;font-weight:700}

/* ---------- explore ---------- */
.explore-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start}
@media (max-width:900px){.explore-grid{grid-template-columns:1fr}}
.picture{margin:0;display:flex;flex-direction:column;gap:10px}
.tagline{align-self:flex-start;font-family:var(--display);color:var(--gold-hi);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.qanswers{padding-left:22px;display:flex;flex-direction:column;gap:10px}
.qanswers label{display:block;margin-bottom:4px;font-weight:600}
.addrow .field{flex:1;min-width:0}
@media (max-width:460px){.addrow{flex-direction:column;align-items:stretch}}
details.panel summary,.side summary{cursor:pointer;font-family:var(--display);font-size:1.08rem;color:var(--gold-hi);min-height:32px}
details.panel[open] summary{margin-bottom:8px}
details.panel{padding:14px 18px}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.wordchip{border:1px solid var(--gold-d);background:rgba(217,177,95,.1);border-radius:6px;padding:6px 12px;cursor:pointer;min-height:38px;font-size:.95rem;color:var(--gold-hi)}
.wordchip:hover{background:rgba(217,177,95,.22)}
.wordchip.on{background:var(--gold);color:#24170A}
.meaning{margin-top:10px;background:rgba(5,8,16,.6);border:1px solid rgba(217,177,95,.25);border-radius:8px;padding:10px 14px;min-height:46px}
.ideas{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.idea{display:flex;align-items:center;gap:6px;background:rgba(5,8,16,.6);border:1px solid var(--gold-d);border-radius:8px;padding:8px 8px 8px 14px;flex-wrap:wrap}
.idea .ideatext{flex:1;min-width:120px;font-weight:600;overflow-wrap:anywhere}
.idea.editing .field{flex:1;min-width:140px}

/* ---------- organise ---------- */
.tray{border-style:dashed}
.tray.over,.section.over{outline:3px dashed var(--gold-hi);outline-offset:2px}
.pgroup{display:flex;flex-direction:column;gap:10px}
.pgroup>.btn{align-self:flex-start}
.grouph{display:flex;align-items:center;gap:10px}
.grouph::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.section{padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.section>.linkbtn,.sechead>.linkbtn{align-self:flex-start}
.c0{background:linear-gradient(180deg,rgba(110,27,42,.55),rgba(13,18,33,.96) 70%)}.c1{background:linear-gradient(180deg,rgba(140,106,46,.45),rgba(13,18,33,.96) 70%)}
.c2{background:linear-gradient(180deg,rgba(30,91,62,.5),rgba(13,18,33,.96) 70%)}.c3{background:linear-gradient(180deg,rgba(31,63,122,.55),rgba(13,18,33,.96) 70%)}
.sechead{display:flex;flex-direction:column;gap:4px}
.pcards{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.pcard{background:linear-gradient(180deg,#1E2846,#141B31);border:1px solid var(--gold-d);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;cursor:grab;box-shadow:0 4px 10px rgba(0,0,0,.4);transition:box-shadow .2s,transform .2s}
.pcard:hover{transform:translateY(-1px)}
.pcard.picked{box-shadow:0 0 0 2px var(--gold-hi),0 0 20px rgba(243,220,154,.4)}
.pctext{font-weight:600;overflow-wrap:anywhere;display:flex;gap:8px}
.grip{color:var(--gold-d);letter-spacing:-2px}
.pcactions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mini-select{border:1px solid var(--gold-d);border-radius:6px;background:#070A13;padding:6px 8px;min-height:36px;font-size:.88rem;max-width:100%;color:var(--text)}
.pcactions .mini-select{flex:1 1 130px;min-width:0}
.placebtn{align-self:flex-start}
.empty{border:1px dashed rgba(217,177,95,.4);border-radius:8px;padding:10px;text-align:center;font-size:.9rem;color:var(--muted)}
.addcard{display:flex;gap:6px}.addcard .field{flex:1;min-width:0}

/* ---------- write: parchment ---------- */
.task{background:rgba(5,8,16,.6);border-left:3px solid var(--gold);border-radius:4px;padding:10px 16px}
.write-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:999px){.write-grid{grid-template-columns:1fr}.parchment{order:-1}}
.focusmode .write-grid{grid-template-columns:1fr;max-width:980px;margin:0 auto;width:100%}
.side{padding:14px 16px}
.side[open] summary{margin-bottom:10px}
.plansum{display:flex;flex-direction:column;gap:10px}
.psum{border:1px solid var(--gold-d);border-radius:8px;padding:8px 12px;background:rgba(5,8,16,.55)}
.psum h4{color:var(--gold)} .psum ul{padding-left:18px;font-size:.95rem}
.parchment{position:relative;color:var(--ink);border-radius:6px;padding:clamp(18px,3vw,34px);display:flex;flex-direction:column;gap:8px;
  background:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.35),transparent 40%),radial-gradient(ellipse at 80% 90%,rgba(120,80,30,.25),transparent 50%),linear-gradient(180deg,var(--parch),var(--parch-2));
  box-shadow:inset 0 0 60px rgba(120,80,30,.45),inset 0 0 0 1px rgba(90,60,20,.35),0 20px 50px rgba(0,0,0,.55)}
.parchment h4,.parchment .h3{color:#5A3A12}
.ink{color:var(--ink)} .ink-muted{color:var(--ink-muted)} .ink-title{font-family:var(--display);color:#3B2610;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.parchment .hintnote{color:#6B3D0C}
.ptools{border-bottom:1px solid rgba(90,60,20,.3);padding-bottom:8px}
.ptool{border:1px solid rgba(90,60,20,.45);background:rgba(255,250,235,.5);color:var(--ink);border-radius:6px;padding:5px 10px;font-size:.88rem;cursor:pointer;min-height:36px}
.ptool:hover{background:rgba(255,250,235,.85)} .ptool:disabled{opacity:.4} .ptool[aria-pressed="true"]{background:#5A3A12;color:#F6E7C4}
.ptitle-input{font-family:var(--display);font-size:calc(1.6rem * var(--fs,1));color:#3B2610;background:transparent;border:0;border-bottom:2px solid rgba(90,60,20,.4);padding:4px 2px;width:100%}
.ptitle-input:focus{outline:none;border-bottom-color:#5A3A12}
.draft{width:100%;min-height:400px;resize:vertical;border:1px solid rgba(90,60,20,.25);border-radius:4px;padding:12px 14px;font-family:var(--body);font-size:calc(1.15rem * var(--fs,1));line-height:2.1;color:var(--ink);
  background:rgba(255,252,240,.25) linear-gradient(transparent calc(2.1em - 1px),rgba(90,60,20,.18) calc(2.1em - 1px)) 0 12px/100% 2.1em local}
.draft::placeholder{color:#7D6646}
.draft:focus{outline:3px solid #2F5EA8;outline-offset:2px}
.focusmode .draft{min-height:60vh}
.hintbar{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.hinttoggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:linear-gradient(180deg,#232B44,#151B2E);color:var(--gold-hi);border:1px solid var(--gold-d);border-radius:6px;padding:10px 14px;font-family:var(--display);cursor:pointer;min-height:44px}
.hintbody{background:rgba(255,250,235,.55);border:1px solid rgba(90,60,20,.3);border-radius:6px;padding:12px 14px}
.hintbody .wordchip{background:#F7EBCC;color:#3B2610;border-color:#B08A4A}
.hintbody .wordchip:hover{background:#FFF4D9}
.wordchip.starter{text-align:left}
.supportrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.supbtn{background:linear-gradient(180deg,#232B44,#151B2E);color:var(--text);border:1px solid var(--gold-d);border-radius:6px;padding:10px;font-family:var(--display);font-size:.9rem;cursor:pointer;min-height:44px}
.supbtn[aria-pressed="true"]{border-color:var(--gold-hi);color:var(--gold-hi);box-shadow:0 0 12px rgba(243,220,154,.4)}
@media (max-width:520px){.supportrow{grid-template-columns:1fr}}

/* ---------- review & done ---------- */
.review-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.review-grid{grid-template-columns:1fr}}
.review-grid>.parchment{position:sticky;top:16px}
@media (max-width:900px){.review-grid>.parchment{position:static}}
.draftview{display:flex;flex-direction:column;gap:12px;font-size:1.08rem;line-height:1.85;overflow-wrap:anywhere;white-space:pre-wrap}
.checklist{display:flex;flex-direction:column;gap:2px}
.checklist legend{float:left;width:100%;margin-bottom:8px}
.checkrow{display:flex;gap:12px;align-items:flex-start;padding:8px 4px;border-bottom:1px solid rgba(217,177,95,.15)}
.checkrow:last-child{border-bottom:0}
.checkrow input{width:24px;height:24px;margin-top:2px;accent-color:#D9B15F;flex:none}
.checkrow label{cursor:pointer}
.qc,.reqs{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.95rem}
.qc li{display:flex;gap:10px;padding:6px 10px;border-radius:6px}
.qc li.ok{background:rgba(127,199,154,.12)} .qc li.look{background:rgba(233,196,106,.12)}
.reqs li{color:var(--muted)} .reqs li.ok{color:#BDEBCB}
.done-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.done-grid{grid-template-columns:1fr}.reward{order:-1}}
.improve{background:rgba(255,250,235,.5);border:1px solid rgba(90,60,20,.3);border-radius:6px;padding:10px 14px}
.reward{align-items:center;text-align:center}
.bigline{font-family:var(--script);font-style:italic;font-size:1.6rem;color:var(--gold-hi)}
.starburst{font-size:4rem;color:#FFE08A;text-shadow:0 0 18px #F6C64A,0 0 40px rgba(246,198,74,.6);animation:pop .8s ease both}
.plus{font-family:var(--display);font-size:1.6rem;color:var(--gold-hi);border:1px solid var(--gold);border-radius:8px;padding:4px 18px;display:inline-block;align-self:center}
.reveal{animation:sceneIn .6s ease .2s both}
.unlock{display:flex;flex-direction:column;align-items:center;animation:pop .9s ease .5s both}
@keyframes pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
.printonly{display:none}

/* ---------- collection ---------- */
.relic{display:flex;align-items:flex-end;justify-content:center}
.relic img{display:block;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 0 14px rgba(243,220,154,.35))}
.relic.m{width:130px;height:120px}.relic.l{width:200px;height:150px}.relic.xl{width:min(320px,80vw);height:240px}
.relic.locked img{filter:brightness(0) drop-shadow(0 0 1px rgba(217,177,95,.6));opacity:.75}
.cabinet{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.plinth{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px 12px;cursor:pointer;color:var(--text);border-radius:10px;border:1px solid rgba(217,177,95,.3);
  background:radial-gradient(ellipse at 50% 30%,rgba(243,220,154,.12),transparent 60%),linear-gradient(180deg,#151C33,#0A0E1B);transition:transform .2s,box-shadow .2s}
.plinth:hover,.plinth:focus-visible{transform:translateY(-3px);box-shadow:0 0 24px rgba(217,177,95,.3)}
.cushion{display:block;width:120px;height:16px;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#A3283F,#4E0F1C);box-shadow:0 6px 10px rgba(0,0,0,.6);margin-top:-6px}
.plate{font-family:var(--display);font-size:.92rem;color:var(--gold-hi);border:1px solid var(--gold-d);border-radius:4px;padding:2px 10px;background:rgba(8,11,22,.8)}
.state{font-size:.82rem;color:var(--muted)} .state.ok{color:#BDEBCB}
.closeup{display:flex;justify-content:center;padding:10px;border-radius:10px;background:radial-gradient(ellipse at center,rgba(243,220,154,.18),transparent 65%)}
.achs{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.achs li{display:flex;gap:10px;color:var(--muted)} .achs li.got{color:var(--text)} .achs li>span:first-child{color:var(--gold);font-size:1.1rem}

/* ---------- profile ---------- */
.profile-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.profile-grid.b{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:900px){.profile-grid,.profile-grid.b{grid-template-columns:1fr}}
.char{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--house) 55%,#0D1222),rgba(13,18,33,.96) 75%)}

/* ---------- practice ---------- */
.plist{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.plink{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;background:rgba(5,8,16,.6);border:1px solid rgba(217,177,95,.3);border-radius:6px;padding:8px 12px;cursor:pointer;color:var(--text);text-align:left;min-height:44px}
.plink:hover{border-color:var(--gold)}
.qrun{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:q}
.qprompt{font-weight:600;font-size:1.08rem}
.optrow{display:flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid rgba(217,177,95,.3);border-radius:6px;cursor:pointer;background:rgba(5,8,16,.5)}
.optrow.on{border-color:var(--gold-hi);background:rgba(217,177,95,.12)}
.optrow input{width:20px;height:20px;accent-color:#D9B15F}
.tiles{display:flex;flex-wrap:wrap;gap:8px;min-height:48px;align-items:center}
.tiles.built{border:1px dashed var(--gold-d);border-radius:8px;padding:8px;background:rgba(5,8,16,.5)}
.wtile{border:1px solid var(--gold-d);background:#F1E3C1;color:var(--ink);border-radius:6px;padding:6px 12px;cursor:pointer;min-height:40px;font-size:1rem}
.wtile.on{background:var(--gold);color:#24170A}
.wtile:disabled{opacity:.7;cursor:default}
.feedback{border-radius:6px;padding:10px 14px}
.feedback.good{background:rgba(127,199,154,.15);border:1px solid #7FC79A}
.feedback.again{background:rgba(233,196,106,.12);border:1px solid #E9C46A}

/* ---------- calendar ---------- */
.calwrap{overflow-x:auto}
.cal{width:100%;border-collapse:separate;border-spacing:0;min-width:620px;table-layout:fixed}
.cal th{font-family:var(--display);font-weight:600;color:var(--gold-hi);padding:8px;background:linear-gradient(180deg,#3E1520,#24090F);border:1px solid var(--gold-d)}
.cal td{border:1px solid rgba(217,177,95,.25);padding:0;vertical-align:top;height:86px;background:rgba(8,11,22,.6)}
.cal td.blank{background:rgba(8,11,22,.3)}
.day{width:100%;height:100%;min-height:86px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 8px;background:none;border:0;cursor:pointer;color:var(--text);text-align:left;position:relative}
.day:hover{background:rgba(217,177,95,.08)}
.dnum{font-family:var(--display);font-size:1.05rem}
.dtopic{font-size:.74rem;line-height:1.2;color:var(--muted)}
.dmark{position:absolute;top:6px;right:8px;font-weight:800}
.m-done{color:#7FC79A}.m-progress{color:#E9C46A}.m-none{color:#9DA6BC}
.day.today{box-shadow:inset 0 0 0 2px var(--gold-hi)}
.day.selected{background:linear-gradient(180deg,rgba(217,177,95,.35),rgba(217,177,95,.15))}
.day.selected .dtopic{color:var(--text)}
.small-cal td{height:64px}.small-cal .day{min-height:64px}
.tset{font-size:.68rem;color:var(--gold);border:1px solid var(--gold-d);border-radius:3px;padding:0 4px}
.legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.9rem;color:var(--muted)}
.legend li{display:flex;gap:6px;align-items:center}.legend .dmark{position:static}
.lg-today,.lg-sel{display:inline-block;width:18px;height:14px;border-radius:2px}
.lg-today{box-shadow:inset 0 0 0 2px var(--gold-hi)}.lg-sel{background:rgba(217,177,95,.4)}
.monthname{font-family:var(--display);color:var(--gold-hi);min-width:150px;text-align:center}
.parchment-card{color:var(--ink);border-radius:6px;padding:18px 22px;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(90deg,var(--house) 0 14px,transparent 14px),linear-gradient(180deg,var(--parch),var(--parch-2));padding-left:34px;box-shadow:inset 0 0 40px rgba(120,80,30,.4),0 14px 30px rgba(0,0,0,.5)}
.parchment-card .status{background:rgba(42,29,16,.1);color:var(--ink)}
.parchment-card .field{background:#FFF8E6;color:var(--ink);border-color:#9C7A42}
.pdate{font-family:var(--display);color:#3B2610;font-size:1.25rem}
.ptitle{font-family:var(--display);font-size:1.6rem;color:#3B2610}

/* ---------- prose, tables, tabs ---------- */
.prose{max-width:960px}
.prose p,.prose li{max-width:72ch}
.prose ul{padding-left:22px;display:flex;flex-direction:column;gap:6px}
.guide{padding-left:0;list-style:none;counter-reset:g;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.guide li{counter-increment:g;padding:16px 16px 16px 62px}
.guide li::marker{content:""}
.guide li h2::before{content:counter(g);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,#F6E2A2,#C9973F);color:#24170A;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1rem}
@media (max-width:700px){.guide{grid-template-columns:1fr}}
.tablewrap{overflow-x:auto;border:1px solid var(--gold-d);border-radius:6px}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:640px}
th,td{text-align:left;vertical-align:top;padding:8px 12px;border-bottom:1px solid rgba(217,177,95,.15)}
thead th{background:rgba(110,27,42,.6);font-family:var(--display);font-weight:600;color:var(--gold-hi)}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tab{background:rgba(8,11,22,.7);border:1px solid var(--gold-d);border-radius:6px;padding:8px 14px;font-family:var(--display);cursor:pointer;color:var(--text);min-height:42px}
.tab.on{background:linear-gradient(180deg,#7E2232,#4C111C);border-color:var(--gold);color:var(--gold-hi)}
.manual{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.manual img{width:100%;height:auto;border-radius:6px;border:1px solid var(--gold-d);display:block}
.opt{display:inline-flex;align-items:center;gap:8px;background:rgba(5,8,16,.6);border:1px solid var(--gold-d);border-radius:6px;padding:6px 14px;cursor:pointer;min-height:42px}
.opt input{width:20px;height:20px;accent-color:#D9B15F}
.drafts{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.draftcard{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.confirm{background:rgba(110,27,42,.5);border:1px solid var(--gold-d);border-radius:6px;padding:8px 12px}

/* ---------- dialog ---------- */
.overlay{position:fixed;inset:0;background:rgba(3,5,12,.7);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.dialog{padding:26px;max-width:540px;width:100%;display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow:auto}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- print: only the pupil's writing ---------- */
@media print{
  body{background:#fff;color:#000;padding:0;font-size:13pt}
  .backdrop,.topbar,.foot,.noprint,.banner,.actbar,.skip,.reward{display:none!important}
  .done-grid{display:block}
  .printsheet{box-shadow:none;background:#fff;padding:0}
  .printonly{display:block}
}
.miniweek{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%;height:120px;margin-bottom:8px;padding:8px;border-radius:6px;border:1px solid rgba(217,177,95,.25);background:linear-gradient(#1D2440,#0D1222)}
.miniweek span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid rgba(217,177,95,.3);border-radius:4px;font-family:var(--display);font-size:.8rem;color:var(--muted)}
.miniweek span.t{box-shadow:inset 0 0 0 2px var(--gold-hi);color:var(--gold-hi)} .miniweek b{font-size:1.05rem}
.welcome>.grow{flex:1 1 300px}
.pill{white-space:nowrap}
@media (max-width:560px){.welcome{flex-direction:column;align-items:center;text-align:center}.welcome .row{justify-content:center}}

/* ===================== v3: richer, more interactive layer ===================== */
/* backdrop motion */
.bd-sky{transform:translate3d(calc(var(--px,0) * -18px),calc(var(--py,0) * -10px),0) scale(1.04);transition:transform .25s ease-out}
.bd-left,.bd-right{transform:translate3d(calc(var(--px,0) * 10px),0,0);transition:transform .3s ease-out}
.bd-canvas{position:absolute;inset:0;pointer-events:none}
.scene-room .bd-glow{animation:hearth 3.2s ease-in-out infinite alternate}
@keyframes hearth{0%{opacity:.75}35%{opacity:1}60%{opacity:.85}100%{opacity:.95}}

/* gold buttons: a light sweep on hover/focus */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn.gold::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);transition:left .6s ease;z-index:-1}
.btn.gold:hover::after,.btn.gold:focus-visible::after{left:130%}
.btn.gold.big{font-size:1.15rem;letter-spacing:.06em}
.btn:active{transform:translateY(1px) scale(.99)}

/* tilt + glare used on cards */
.questcard,.tilecard,.plinth,.pick,.tomepick{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .25s}
.questcard:hover,.tilecard:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,236,190,.22),transparent 45%);opacity:0;transition:opacity .25s;z-index:2}
.questcard:hover .glare,.tilecard:hover .glare,.pick:hover .glare,.plinth:hover .glare{opacity:1}
.waxseal{position:absolute;top:-10px;right:-8px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:3;font-weight:800;color:#F7E3B0;
  background:radial-gradient(circle at 35% 30%,#C0394C,#7A1724 60%,#4E0C15);box-shadow:0 0 0 3px rgba(122,23,36,.45),0 6px 12px rgba(0,0,0,.5);transform:rotate(-12deg)}
.questcard.is-done{box-shadow:inset 0 0 0 3px rgba(8,11,22,.9),inset 0 0 0 4px rgba(127,199,154,.55),0 18px 40px rgba(0,0,0,.45)}
.questcard .qframe .scene{transition:transform .6s ease,filter .4s}
.questcard:hover .qframe .scene{transform:scale(1.06);filter:sepia(.1) saturate(1) brightness(1)}

/* character creation ritual */
.create-stage{min-height:620px}
.runes{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0}
.runes li{display:flex;align-items:center}
.runes li+li::before{content:"";width:34px;height:2px;background:linear-gradient(90deg,var(--gold-d),var(--gold));margin:0 4px}
.rune{display:inline-flex;align-items:center;gap:8px;background:rgba(8,11,22,.7);border:1px solid var(--gold-d);border-radius:999px;padding:4px 14px 4px 4px;font-family:var(--display);color:var(--text);cursor:pointer;min-height:42px}
.rn{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gold-d);font-size:.9rem}
.rune.done .rn{background:rgba(127,199,154,.25);border-color:#7FC79A}
.rune.now{border-color:var(--gold-hi);color:var(--gold-hi);box-shadow:0 0 18px rgba(243,220,154,.45)}
.rune.now .rn{background:linear-gradient(180deg,#F6E2A2,#C9973F);color:#24170A;animation:runeGlow 2s ease-in-out infinite}
@keyframes runeGlow{50%{box-shadow:0 0 14px 3px rgba(243,220,154,.6)}}
.stepbody{animation:stepIn .45s cubic-bezier(.2,.8,.2,1) both;min-height:330px}
@keyframes stepIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.stepbody h2{font-size:1.35rem;margin-bottom:6px}.stepbody h2:focus{outline:none}
.portraitgrid{gap:14px}
.pick{padding:8px}
.pick .portrait{transition:box-shadow .3s}
.pick.on .portrait{box-shadow:0 0 0 3px #0A0E1B,0 0 0 5px var(--gold-hi),0 0 30px 6px rgba(243,220,154,.55);animation:chosen 2.4s ease-in-out infinite}
@keyframes chosen{50%{box-shadow:0 0 0 3px #0A0E1B,0 0 0 5px var(--gold-hi),0 0 40px 10px rgba(243,220,154,.35)}}
.namescroll{display:flex;align-items:center;gap:12px;padding:16px 22px;border-radius:6px;background:linear-gradient(180deg,var(--parch),var(--parch-2));box-shadow:inset 0 0 30px rgba(120,80,30,.45),0 10px 24px rgba(0,0,0,.5)}
.quill{font-size:1.8rem;color:#5A3A12}
.namefield{flex:1;min-width:0;background:transparent;border:0;border-bottom:2px solid rgba(90,60,20,.5);font-family:var(--display);font-size:clamp(1.4rem,3.4vw,2rem);color:#3B2610;padding:6px 2px}
.namefield::placeholder{color:#8A7350;font-size:.7em}
.namefield:focus{outline:none;border-bottom-color:#5A3A12}
.housegrid{gap:14px}
.housepick{padding:10px 6px 12px;text-align:center;background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--hc) 30%,transparent),transparent 70%)}
.swing{display:block;transform-origin:50% 0;transition:transform .3s}
.housepick:hover .swing{animation:sway 1.6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}
.housepick.on{background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--hc) 65%,transparent),transparent 75%)}
.housepick.on .swing{transform:scale(1.06)}
.hmini{font-family:var(--script);font-style:italic;font-size:1rem;color:var(--muted);line-height:1.2}
.tomegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:560px){.tomegrid{grid-template-columns:1fr}}
.tomepick{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border-radius:10px;border:2px solid transparent;cursor:pointer;text-align:center}
.tomepick:focus-within{outline:3px solid #8FC3FF;outline-offset:2px}
.tome{width:110px;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6));transition:transform .3s}
.tomepick:hover .tome{transform:translateY(-6px) rotate(-3deg)}
.tomepick.on{border-color:var(--gold-hi);box-shadow:0 0 24px rgba(243,220,154,.4)}
.tomepick.on .tome{transform:translateY(-6px) scale(1.05)}
.errline{min-height:1.4em;color:#FFD38A;font-weight:700}
.errline:not(:empty)::before{content:"✦ ";color:var(--gold)}

/* preview stage */
.pv-stage{position:relative;display:flex;justify-content:center;align-items:flex-start;width:100%;min-height:250px;padding-top:10px}
.pv-banner{position:absolute;top:-8px;left:50%;width:220px;transform:translateX(-50%);opacity:.55;animation:bannerDrop .7s cubic-bezier(.2,.8,.2,1) both}
.pv-banner .pennant{max-width:220px}
@keyframes bannerDrop{from{transform:translate(-50%,-40px);opacity:0}to{transform:translateX(-50%);opacity:.55}}
.pv-portrait{position:relative;z-index:1;animation:fadeUp .5s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.pv-crest{position:absolute;z-index:2;bottom:-18px;right:calc(50% - 110px);animation:crestIn .8s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes crestIn{from{opacity:0;transform:rotateY(180deg) scale(.4)}to{opacity:1;transform:none}}
.shimmer{background:linear-gradient(90deg,#D9B15F,#FFF2C8,#D9B15F);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.swatches.center{justify-content:center}

/* door transition */
.doors{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;cursor:pointer;animation:doorsOut .5s ease 2.1s forwards}
@keyframes doorsOut{to{opacity:0;visibility:hidden}}
.door{position:absolute;top:0;bottom:0;width:50.5%;background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 2px,transparent 2px 46px),
  linear-gradient(180deg,#4A2E18,#2A190C);box-shadow:inset 0 0 0 10px #1A0F06,inset 0 0 0 13px #B5862F,inset 0 0 80px rgba(0,0,0,.7)}
.door.left{left:0;transform-origin:left center;animation:openL 1.5s cubic-bezier(.6,0,.3,1) .55s forwards}
.door.right{right:0;transform-origin:right center;animation:openR 1.5s cubic-bezier(.6,0,.3,1) .55s forwards}
.door.left::after,.door.right::after{content:"";position:absolute;top:50%;width:18px;height:46px;border-radius:9px;background:linear-gradient(#F6E2A2,#8C6A2E);box-shadow:0 0 10px rgba(243,220,154,.6)}
.door.left::after{right:24px}.door.right::after{left:24px}
@keyframes openL{to{transform:perspective(1200px) rotateY(-100deg)}}
@keyframes openR{to{transform:perspective(1200px) rotateY(100deg)}}
.doorlight{position:absolute;inset:0;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--house) 45%,#FFE9A8) 0,color-mix(in srgb,var(--house) 35%,#0B0F1E) 38%,#07090F 75%);opacity:0;animation:light 1.6s ease .6s forwards}
@keyframes light{to{opacity:1}}
.doortext{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fadeUp .7s ease 1.2s forwards}
.doorname{font-family:var(--display);font-size:clamp(2rem,6vw,3.4rem);color:#FFF2C8;text-shadow:0 0 24px rgba(243,220,154,.8)}

/* common room: arched window and wax-sealed letter */
.welcome{padding-right:clamp(16px,2.4vw,26px)}
@media (min-width:1000px){.welcome{padding-right:300px}}
.archwin{position:absolute;right:24px;top:16px;bottom:16px;width:250px;background-size:cover;background-position:60% 40%;border:3px solid var(--gold-d);border-radius:125px 125px 6px 6px;box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 0 0 4px #0A0E1B,0 0 0 5px rgba(217,177,95,.4);overflow:hidden;display:none}
.archwin::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,rgba(140,106,46,.9) 48% 52%,transparent 52%),linear-gradient(0deg,transparent 58%,rgba(140,106,46,.9) 58% 60.5%,transparent 60.5%)}
.twinkle{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 20%,#fff,transparent),radial-gradient(1px 1px at 70% 15%,#fff,transparent),radial-gradient(1.2px 1.2px at 40% 35%,#fff,transparent),radial-gradient(1px 1px at 85% 40%,#fff,transparent);animation:tw 3s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.3}to{opacity:1}}
@media (min-width:1000px){.archwin{display:block}.crestspot{position:absolute;right:112px;bottom:6px;z-index:2}}
.letter{position:relative;color:var(--ink);border-radius:6px;padding:58px clamp(18px,3vw,36px) 26px;
  background:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.35),transparent 40%),radial-gradient(ellipse at 85% 90%,rgba(120,80,30,.3),transparent 50%),linear-gradient(180deg,var(--parch),var(--parch-2));
  box-shadow:inset 0 0 60px rgba(120,80,30,.5),0 20px 50px rgba(0,0,0,.55);transition:transform .3s,box-shadow .3s}
.letter:hover{transform:translateY(-3px) rotate(-.3deg);box-shadow:inset 0 0 60px rgba(120,80,30,.5),0 26px 60px rgba(0,0,0,.6),0 0 30px rgba(243,220,154,.18)}
.letter .ornate{color:#7A4E16}.letter .ornate::before,.letter .ornate::after{background:linear-gradient(90deg,transparent,#7A4E16)}
.letter .questtitle{color:#3B2610}.letter .muted{color:var(--ink-muted)}
.letter .sn{border-color:#7A4E16}.letter .steps-inline li+li::before{color:#7A4E16}
.seal{position:absolute;top:-22px;left:50%;transform:translateX(-50%) rotate(-6deg);width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#C0394C,#7A1724 60%,#4E0C15);box-shadow:0 0 0 4px rgba(122,23,36,.4),0 8px 16px rgba(0,0,0,.55)}
.seal .crest{filter:none;opacity:.9}
.nextreward .relic{animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}

/* nav icons */
.navlink{display:inline-flex;align-items:center;gap:6px}
.navlink svg{opacity:.8}.navlink.on svg,.navlink:hover svg{opacity:1;filter:drop-shadow(0 0 4px rgba(243,220,154,.6))}

/* steps & cards come alive */
.pstep.now{animation:runeGlow 2.4s ease-in-out infinite}
.pcard{animation:cardIn .35s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.idea{animation:cardIn .3s ease both}
.wordchip,.supbtn,.ptool{transition:transform .15s,background .2s,box-shadow .2s}
.wordchip:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(217,177,95,.25)}

/* collection spotlight */
.plinth{position:relative;overflow:hidden}
.plinth::before{content:"";position:absolute;top:-30px;left:50%;width:160px;height:200px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0,rgba(255,236,190,.28),transparent 70%);pointer-events:none;opacity:.5;transition:opacity .3s}
.plinth.unlocked::before{opacity:1}
.plinth .relic img{transition:transform .5s ease}
.plinth:hover .relic img{transform:translateY(-6px) scale(1.06) rotate(-3deg)}
.plinth.unlocked .relic img{animation:glint 5s ease-in-out infinite}
@keyframes glint{0%,85%,100%{filter:drop-shadow(0 0 10px rgba(243,220,154,.3))}92%{filter:drop-shadow(0 0 22px rgba(255,244,210,.9)) brightness(1.2)}}

/* reward reveal */
.reward{position:relative;overflow:hidden}
.burst{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.countline strong{font-size:1.4rem;color:#FFE7A3}
.unlock .relic img{animation:glint 2.5s ease-in-out infinite}

/* reduced motion: keep everything still */
@media (prefers-reduced-motion:reduce){
  .bd-sky,.bd-left,.bd-right,.questcard,.tilecard,.plinth,.pick,.tomepick{transform:none!important}
  .doors{display:none}
}
@media (min-width:1000px){.banner-hang{display:none}}

/* painted, candlelit picture prompts in gilded frames */
.qframe{padding:5px;border:0;background:linear-gradient(135deg,#F6E2A2 0,#8C6A2E 30%,#F3DC9A 55%,#6B4C1A 80%,#D9B15F 100%);box-shadow:0 0 0 1px #2A1D0C,0 8px 18px rgba(0,0,0,.55)}
.qframe .scene{border-radius:3px;filter:sepia(.38) saturate(1.2) contrast(1.06) brightness(.8)}
.qframe::after{inset:5px;border-radius:3px;background:linear-gradient(180deg,rgba(25,35,80,.42),rgba(255,190,110,.08) 55%,rgba(90,50,15,.35)),radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(8,6,3,.7));mix-blend-mode:multiply}
.qframe::before{content:"";position:absolute;inset:5px;border-radius:3px;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 70% 15%,rgba(255,220,150,.28),transparent 45%);mix-blend-mode:screen}
.questcard:hover .qframe .scene{filter:sepia(.25) saturate(1.25) contrast(1.06) brightness(.92)}

/* drop dock: always-visible targets while dragging a card */
.dropdock{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px max(16px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(8,11,22,.6),rgba(8,11,22,.97));border-top:1px solid var(--gold-d);display:flex;flex-direction:column;gap:6px;box-sizing:border-box}
.dockhint{font-size:.85rem;color:var(--muted);text-align:center}
.dockzones{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.dockzone{min-width:120px;min-height:48px;padding:10px 16px;border:2px dashed var(--gold);border-radius:8px;background:rgba(217,177,95,.1);color:var(--gold-hi);font-family:var(--display);display:flex;align-items:center;justify-content:center;text-align:center}
.dockzone.over{background:var(--gold);color:#24170A;border-style:solid}
/* Guide me support */
.lookclosely{background:linear-gradient(180deg,rgba(30,91,62,.35),rgba(13,18,33,.96) 60%)}
.lc-prompts{padding-left:20px;display:flex;flex-direction:column;gap:2px}
.guidebox{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.guidebox ol{padding-left:20px}
.side-pic{display:block;margin-bottom:10px}

/* ===== accounts & classes (reuses the academy look) ===== */
.accountbar{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;font-size:.9rem;padding:6px 14px;border:1px solid var(--gold-d);border-radius:8px;background:rgba(8,11,22,.75)}
.accountbar.demo{background:rgba(110,27,42,.55)}
.accountbar .acc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.gate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:700px){.gate-grid{grid-template-columns:1fr}}
.gatecard{align-items:flex-start}
.gatecard .gate-art{width:100%;height:130px;border-radius:6px;border:1px solid rgba(217,177,95,.3);background:center/cover no-repeat}
.auth-panel{max-width:620px;margin:0 auto;width:100%}
.codefield{font-family:var(--display);letter-spacing:.2em;font-size:1.2rem;text-transform:uppercase}
.asg-list,.asg-mini{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.asg-card{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;padding:12px;border:1px solid rgba(217,177,95,.3);border-radius:8px;background:rgba(5,8,16,.5)}
.asg-actions{min-width:150px}
.instr{background:rgba(217,177,95,.1);border-left:3px solid var(--gold);padding:6px 10px;border-radius:4px}
.ws-not_started{background:rgba(255,255,255,.07);color:#D7D0C2}.ws-in_progress{background:rgba(233,196,106,.18);color:#F6DE9E}
.ws-submitted,.ws-resubmitted{background:rgba(127,170,230,.2);color:#CFE0FF}.ws-revision_requested{background:rgba(240,140,120,.2);color:#FFD2C6}.ws-reviewed{background:rgba(127,199,154,.18);color:#BDEBCB}
.profnote{border:1px solid rgba(217,177,95,.3);border-radius:8px;padding:8px 12px;background:rgba(5,8,16,.5)}
.profnote summary{cursor:pointer;font-family:var(--display);color:var(--gold-hi)}
.parchment-note{margin-top:8px;color:var(--ink);border-radius:6px;padding:12px 16px;background:linear-gradient(180deg,var(--parch),var(--parch-2));box-shadow:inset 0 0 30px rgba(120,80,30,.4)}
.parchment-note .eyebrow{color:#7A4E16}
.submit-wrap{grid-column:1 / -1}
.submit-panel{border-color:var(--gold)}
.asg-note{margin-top:-6px}
.dclass{display:block;font-size:.7rem;color:#FFE7A3;margin-top:2px}
.classdue{border-top:1px solid rgba(90,60,20,.3);padding-top:8px}
.classdue .status{background:rgba(42,29,16,.12);color:var(--ink)}
.importlist{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.loadingbox{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 16px;text-align:center}
.spinner{width:46px;height:46px;border-radius:50%;border:3px solid rgba(217,177,95,.25);border-top-color:var(--gold-hi);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* professor's study */
.study{background:linear-gradient(110deg,rgba(80,40,20,.55),rgba(14,19,34,.95) 60%)}
.sumtiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:900px){.sumtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sumtile{padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.sumtile b{font-family:var(--display);font-size:2rem;color:var(--gold-hi);font-variant-numeric:tabular-nums;line-height:1.1}
.classgrid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.classcard{padding:16px;display:flex;flex-direction:column;gap:10px}
.codebox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(5,8,16,.7);border:1px dashed var(--gold);border-radius:8px;padding:8px 12px}
.codebox code{font-family:var(--display);font-size:1.4rem;letter-spacing:.25em;color:var(--gold-hi)}
.roster td,.roster th{white-space:nowrap}
.roster td.wrap{white-space:normal}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filter{border:1px solid var(--gold-d);background:rgba(8,11,22,.7);color:var(--text);border-radius:999px;padding:5px 12px;font-size:.88rem;cursor:pointer;min-height:36px}
.filter[aria-pressed="true"]{background:var(--gold);color:#24170A}
.sub-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.sub-grid{grid-template-columns:1fr}}
.planview{display:flex;flex-direction:column;gap:8px}
.planview .psum{background:rgba(255,250,235,.45);border-color:rgba(90,60,20,.3);color:var(--ink)}
.planview .psum h4{color:#5A3A12}
.revtabs{display:flex;gap:6px;flex-wrap:wrap}
.rubric{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:560px){.rubric{grid-template-columns:1fr}}

/* Picture labels follow the pointer without changing the academy's artwork. */
.picture-word-target{cursor:help;stroke:transparent;stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:all}
.picture-word-target:hover,.picture-word-target:focus,.picture-word-target.selected{stroke:#fff2bb;fill:#ffe3a51c;outline:none}
.picture-word-target:focus-visible{stroke-width:3;stroke-dasharray:4 2}
.picture-word-tooltip{position:fixed;z-index:10000;pointer-events:none;max-width:200px;padding:9px 12px;background:#101827;color:#fff3d4;border:1px solid #d9b15f;border-radius:7px;box-shadow:0 5px 18px #0009;font:16px/1.3 "Source Sans 3",sans-serif}
.picture-word-tooltip strong,.picture-word-tooltip span{display:block}.picture-word-tooltip span{font-size:13px;color:#ede3d1;margin-top:3px}

.picture-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.picture-action-grid figure{margin:0}.picture-action-grid .qframe{aspect-ratio:36/22}.picture-action-grid figcaption{text-align:center;color:var(--gold-hi);font-size:16px;margin-top:5px}.picture-actions{border-top:1px solid var(--gold-d);padding-top:12px;margin-top:8px}
/* Compatibility only; original visual rules come directly from src/styles.css. */
body{font-family:var(--body);padding:14px max(16px,env(safe-area-inset-left,0px)) 40px;min-width:0;color:var(--text)}#root{max-width:1240px;gap:20px;margin-inline:auto;position:relative;z-index:1;display:flex;flex-direction:column}#top{display:flex;flex-direction:column;gap:20px}.world{position:fixed;inset:0;z-index:0}.world:after{display:none!important}.world.dim,.world.room{opacity:1}.world .backdrop{height:100%}#app{min-width:0}.topbar{position:relative;z-index:5}.account-menu{position:relative}.account-menu summary{cursor:pointer;list-style:none}.account-menu>div{position:absolute;right:0;top:44px;min-width:250px;z-index:50}.account-menu .btn{width:100%}.hdr-right .profilebtn svg{width:38px;height:44px}.original-avatar{flex:0 0 150px;width:150px}.original-avatar svg{width:150px;height:190px;object-fit:contain}.original-quest-art{background-position:center;background-size:contain;background-repeat:no-repeat;background-color:#0a0e1b;width:100%}.gate-grid,.room-grid,.tiles3{min-width:0}.gatecard .gate-art{position:relative;min-height:145px}.original-gate{padding:24px 0}.auth-panel{max-width:760px}.auth-panel .field{margin-top:6px}.stage{display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(23,31,54,.94),rgba(13,18,33,.96));border-radius:var(--r)}.bannerhead{padding:0 0 12px;border:0;background:none}.bannerhead .ribbon{margin-bottom:12px}.stage .bannerhead h1{font-size:clamp(1.05rem,2.2vw,1.45rem)}.write3,.orgsplit,.oglayout,.think3,.thinkgrid{width:100%;min-width:0}.plaque::before,.plaque::after{display:none}.plaque{box-shadow:none;text-transform:none;letter-spacing:.03em}.plaque.dash{display:flex}.write3 .paper{background:linear-gradient(100deg,var(--parch),#f4e9ce 50%,var(--parch-2));border:1px solid var(--gold-d);color:var(--ink)}.creator3 .bigprev{border-radius:8px}.stage .lvl,.stage .optpanel{border-color:var(--gold-d);background:rgba(10,14,27,.7)}.stage .lvl[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--gold);background:rgba(217,177,95,.1)}.today,.academy-hero,.courtyard,.academy-welcome{display:none}.modal{z-index:100}.modal .box{color:var(--text)}.stage .btn{white-space:normal}.original-avatar .portrait{border:0;background:none;box-shadow:none}.welcome .archwin{background-size:cover}.qbook{min-width:0}.letter .muted{color:var(--ink-muted)}
@media(max-width:760px){.topbar nav{overflow-x:auto}.topbar ul{flex-wrap:wrap}.original-avatar{flex-basis:100px;width:100px}.original-avatar svg{width:100px;height:130px}.welcome{flex-wrap:wrap}.account-menu>div{position:fixed;top:90px;right:16px;left:16px;max-height:70dvh;overflow:auto}.room-grid,.tiles3{grid-template-columns:1fr}.welcome .archwin{display:none}.gate-art{min-height:120px!important}.ribbon>*{white-space:normal}.write3{display:grid}.original-gate{padding-top:8px}}
.row.center{grid-area:auto;width:auto;height:auto;min-height:0;border:0;border-radius:0;background:none;box-shadow:none;padding:0;position:static;flex-direction:row;font:inherit;color:inherit}.welcome .bar{flex:initial;height:auto;min-width:0;background:none;border:0;border-radius:0;overflow:visible}.welcome .bar .track{flex:none}.quest-today>.row{width:100%}.quest-today .btn{min-width:180px;min-height:46px;height:auto}.account-menu .frame{background:linear-gradient(180deg,#171f36,#0d1221)}
/* Readable ink on all parchment idea cards. */
.ogcard .ogtext,.ogcard .ogtext *,.ogcard .src,.ogcard button.ogtext:hover,.ogcard button.ogtext:focus{color:#332215!important;text-shadow:none!important}.ogcard input,.ogcard textarea{color:#332215!important;background:#f5ebd6!important}.ogcard .ogtext{font-weight:600}.ogcard .ogtext:hover{background:#bda87930}.tilecard .tileart{background-size:cover!important;background-position:center!important;min-height:145px;height:145px;display:block}.topic-photo{display:block;width:100%;height:100%;object-fit:cover}.qframe.original-quest-art{background:none;aspect-ratio:360/220}.questcard .qframe{height:auto}.topic-photo[src$=".svg"]{object-fit:contain;background:#dbc49b}
/* Realistic book bindings, shelves and readable pages. */
body[data-screen=library] .stage.room{background:linear-gradient(100deg,#0a0c11df,#10151de8),url('assets/windows.jpg') center/cover;isolation:isolate;overflow:hidden}body[data-screen=library] .stage.room:after{content:"";pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 15% 15%,#dfa74a18,transparent 55%),repeating-linear-gradient(125deg,transparent 0 30px,#ffdca006 31px 32px);z-index:-1}.shelves{perspective:1100px}.shelf{margin-bottom:30px}.shelfrow{padding:22px 14px 4px;gap:18px;border-bottom:16px solid #684025;border-radius:2px 2px 5px 5px;box-shadow:0 5px 0 #2a170e,0 16px 24px #000b,inset 0 -5px 18px #0006;background:linear-gradient(0deg,#0008,transparent 70%)}.book{position:relative;perspective:700px;transform-style:preserve-3d;transition:transform .4s,filter .4s;box-shadow:8px 10px 12px #0009;width:108px;min-height:150px}.book .cover{background:repeating-linear-gradient(110deg,#ffffff05 0 1px,transparent 1px 4px),linear-gradient(100deg,#120b0b88 0 9%,transparent 10% 92%,#f8e4b51a 94%),var(--bc,#493026);border:1px solid #c7a56b;border-left:8px ridge #b28e54;border-radius:3px 8px 8px 3px;box-shadow:inset 0 0 0 5px #0003,inset 0 0 0 6px #e1bc674d;min-height:150px;transition:transform .5s;transform-origin:left center;padding:15px 9px;color:#f3dfaa}.book:after{content:"";position:absolute;top:5px;bottom:4px;right:-6px;width:7px;background:repeating-linear-gradient(0deg,#dfd0a7 0 1px,#786847 1px 2px);transform:rotateY(55deg);transform-origin:left}.book:hover,.book:focus-visible{transform:translateY(-10px) rotateY(-16deg) rotateZ(-2deg);filter:brightness(1.13);z-index:2}.book.big{width:190px;min-height:260px}.book.big .cover{min-height:260px}.book .btitle{font-family:var(--display);font-size:.88rem;line-height:1.4;color:#f5e2b2;text-shadow:0 2px 2px #0008}.book .bby{font-size:.76rem;color:#e0cfa6}.book .bava{display:flex;justify-content:center}.book.big .bava svg{max-height:140px}.openbook.reader-spread{position:relative;width:min(1000px,100%);display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);gap:0;background:#9c7440;border-radius:7px 14px 14px 7px;padding:7px;perspective:1600px;box-shadow:0 30px 80px #000c,0 0 0 2px #d9b15f99;animation:book-arrive .55s ease both}.reader-cover{background:linear-gradient(100deg,#392c25,#161b2d);color:#ead7a3;border:1px solid #b39358;display:flex;flex-direction:column;gap:16px;align-items:center;padding:30px 20px;border-radius:3px 0 0 3px;text-align:center}.reader-cover h2{font-size:1.25rem}.reader-cover svg{width:130px;max-height:180px}.reader-cover p{font-size:.9rem}.reader-page{position:relative;background:repeating-linear-gradient(0deg,#ffffff04 0 2px,transparent 2px 4px),linear-gradient(90deg,#b9a47d,#efe4c9 6%,#f5ecd8 75%,#dfcda7);color:#332619;min-height:470px;display:flex;flex-direction:column;padding:32px 32px 20px;box-shadow:inset 10px 0 20px #7a5b2e40;transform-origin:left center;overflow:hidden}.reader-text{white-space:pre-wrap;font-family:Georgia,serif;font-size:clamp(1rem,2vw,1.15rem);line-height:1.9;flex:1;color:#332619;overflow-wrap:anywhere}.reader-page .reader-page-num{font-variant-numeric:tabular-nums;color:#6b5130;font-size:.8rem;text-align:center;margin-top:15px}.reader-controls{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding-top:16px;border-top:1px solid #ac906077;margin-top:20px}.reader-controls .btn{font-size:.82rem;padding:7px 12px}.reader-page.turn-next{animation:page-forward .5s ease both}.reader-page.turn-prev{animation:page-back .5s ease both}.reader-close{position:absolute;right:15px;top:15px;z-index:4;background:#172035;color:#efd79b;border:1px solid #b59659;border-radius:50%;width:35px;height:35px;display:grid;place-items:center}.reader-page .reader-topline{color:#7a603b;font-size:.68rem;letter-spacing:.15em;margin:8px 25px 18px 0;text-transform:uppercase}.library-atmosphere{height:4px;background:linear-gradient(90deg,transparent,#e8c67d77,transparent);margin:2px 0 20px;box-shadow:0 0 25px #e8c67d44}
@keyframes book-arrive{from{opacity:0;transform:translateY(25px) rotateY(-12deg) scale(.96)}to{opacity:1;transform:none}}@keyframes page-forward{0%{transform:rotateY(-35deg) translateX(14px);opacity:.3;filter:brightness(.8)}100%{transform:none;opacity:1;filter:none}}@keyframes page-back{0%{transform:rotateY(25deg) translateX(-14px);opacity:.3}100%{transform:none;opacity:1}}
/* Screenshot tour: the pointer and ring demonstrate the target without touching pupil work. */
.box.visual-tour{width:min(1080px,100%);max-height:calc(100dvh - 24px);padding:22px;overflow-y:auto}.tour-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,.8fr);gap:24px;align-items:start}.tour-shot{position:relative;margin:0;border:1px solid #b99b62;border-radius:8px;overflow:hidden;background:#080e1b;aspect-ratio:16/10}.tour-shot>img{width:100%;height:100%;display:block;object-fit:contain;object-position:top}.tour-focus{position:absolute;left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th);border:3px solid #ffdc85;border-radius:6px;box-shadow:0 0 0 999px #02071650,0 0 25px #ffdc8550;pointer-events:none}.tour-pointer{position:absolute;left:calc(var(--tx) + var(--tw)*.65);top:calc(var(--ty) + var(--th)*.55);width:32px;height:40px;filter:drop-shadow(0 3px 3px #000c);animation:tour-point 3s ease-in-out infinite;pointer-events:none;z-index:2}.tour-ring{position:absolute;left:calc(var(--tx) + var(--tw)*.65 - 9px);top:calc(var(--ty) + var(--th)*.55 - 9px);width:24px;height:24px;border:2px solid #ffe2a0;border-radius:50%;animation:tour-click 3s infinite;pointer-events:none}.tour-target{position:absolute;left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th);background:transparent!important;border:0;padding:0;z-index:3;cursor:pointer}.tour-target:focus-visible{outline:3px solid #8fc3ff}.tour-copy{display:flex;flex-direction:column;gap:15px}.tour-copy h2{font-size:1.35rem}.tour-copy p{font-size:1rem}.tour-copy .note{color:#e9d9b5;font-size:.92rem}.tour-dots{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}.tour-dots button{width:28px;min-height:28px;height:28px;padding:0;border-radius:50%;background:#1e2b43;color:#d6c9ac;border:1px solid #ac905866;font-size:.72rem}.tour-dots button[aria-current=step]{background:#d8b665;color:#20190c}.tour-controls{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:20px}.tour-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:16px}.tour-caption{font-size:.78rem;color:#bcb8af;margin:9px 0 0}.email-preferences{border-top:1px solid #bda36a44;margin-top:15px;padding-top:15px}.email-preferences .hint{margin:9px 0}.tour-fallback{height:100%;display:grid;place-items:center;padding:25px;text-align:center;color:#d9c18c}.tour-paused .tour-pointer,.tour-paused .tour-ring{animation-play-state:paused}.notification-email-note{font-size:.82rem;color:#bfbdaf}
@keyframes tour-point{0%,10%{transform:translate(-75px,55px);opacity:.3}38%,65%{transform:translate(0,0);opacity:1}72%{transform:translate(0,0) scale(.86)}82%,100%{transform:translate(0,0);opacity:1}}@keyframes tour-click{0%,60%{transform:scale(.2);opacity:0}67%{opacity:1}90%,100%{transform:scale(2.3);opacity:0}}
@media(max-width:760px){.tour-layout{grid-template-columns:1fr}.box.visual-tour{padding:16px}.tour-shot{aspect-ratio:16/11}.tour-copy h2{font-size:1.15rem}.openbook.reader-spread{grid-template-columns:1fr}.reader-cover{padding:18px;display:block}.reader-cover svg{display:none}.reader-cover h2{margin-bottom:8px}.reader-cover>p:nth-of-type(n+2){display:none}.reader-page{padding:23px 20px;min-height:400px}.reader-text{font-size:1rem}.reader-page .reader-topline{margin-top:15px}.book{width:95px;min-height:142px}.shelfrow{gap:13px}.library-atmosphere{display:none}.tilecard .tileart{height:155px}}
@media(prefers-reduced-motion:reduce){.book,.book .cover{transition:none}.book:hover{transform:none}.reader-page,.openbook.reader-spread,.tour-pointer,.tour-ring{animation:none!important}.tour-pointer{transform:none;opacity:1}.tour-ring{display:none}}
html[data-motion=off] .reader-page,html[data-motion=off] .openbook.reader-spread,html[data-motion=off] .tour-pointer,html[data-motion=off] .tour-ring{animation:none!important}

.review p,.review b{color:#332215!important;opacity:1!important;text-shadow:none!important}
.modal .box.visual-tour{max-width:min(1080px,96vw);width:min(1080px,96vw);align-items:stretch;text-align:left;gap:8px}.modal .box.visual-tour>*{flex-shrink:0}
@media(max-width:760px){.hdr-right{flex-wrap:wrap;max-width:100%;min-width:0}.topbar{min-width:0}.account-menu>div{right:0;left:auto}}
.realistic-avatar{display:inline-block;vertical-align:middle;overflow:hidden;background:#20252d;isolation:isolate}.realistic-avatar image{image-rendering:auto}.bigprev .realistic-avatar{width:100%;height:auto;min-height:0!important;display:block}.original-avatar .realistic-avatar{object-fit:cover}.preset .realistic-avatar,.optpic .realistic-avatar{display:block;max-width:100%;height:auto}.realistic-avatar:focus{outline:2px solid #e8d19b;outline-offset:3px}
/* Compact wardrobe: a stable preview and one set of choices at a time. */
.realistic-avatar{filter:none!important}.wardrobe{padding:24px!important}.wardrobe .bannerhead{text-align:left;align-items:flex-start}.wardrobe .bannerhead h1{height:auto!important;min-height:0!important;max-width:100%;line-height:1.35;padding:10px 20px;margin:0 0 8px;font-size:1.45rem!important}.wardrobe .bannerhead p{max-width:none;line-height:1.5}.wardrobe>.catmenu{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;width:100%;margin:4px 0 20px}.wardrobe>.catmenu .plaque{min-height:42px;flex:0 1 auto;padding:9px 13px;white-space:normal;background:#142038;color:#eee4ce;border:1px solid #a88b5855;border-radius:7px;box-shadow:none;letter-spacing:0;font-size:.9rem;justify-content:center}.wardrobe>.catmenu .plaque[aria-pressed=true]{background:linear-gradient(#f0d793,#c39a44);color:#2e220e;border-color:#f4d897}.wardrobe-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:28px;align-items:start;width:100%;max-width:960px;margin:0 auto}.wardrobe-preview{display:flex;flex-direction:column;align-items:center;gap:12px;position:sticky;top:16px}.wardrobe .bigprev{width:100%;max-width:300px;border-radius:8px;overflow:hidden;min-width:0}.wardrobe .bigprev svg{min-height:0!important;width:100%;height:auto;display:block}.wardrobe .bigprev .np{padding:10px;font-size:1rem}.wardrobe .optpanel{min-width:0;width:100%;padding:20px;border-radius:10px}.wardrobe-heading{font-size:1.2rem!important;margin:0 0 6px!important}.wardrobe-hint{font-size:.9rem;color:#d4cbb8;margin:0 0 15px;line-height:1.5}.wardrobe .opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px}.wardrobe .opt{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:10px;background:#0d1729;border:1px solid #b8a16d66;border-radius:8px;color:#e9e0cd;font-size:.85rem;line-height:1.3;min-height:64px}.wardrobe .opt[aria-pressed=true]{border:2px solid #e1be70;background:#29354b;padding:9px;box-shadow:0 0 0 2px #e1be7022}.wardrobe .colour-options{grid-template-columns:repeat(3,minmax(0,1fr))!important}.colour-dot{display:block;width:38px;height:38px;border-radius:50%;border:2px solid #fff6;box-shadow:0 2px 5px #0005}.choice-check{position:absolute;right:6px;top:4px;color:#f4d991;font-size:14px}.wardrobe .optpic{width:82px;max-width:100%;height:auto;filter:none}.wardrobe .optpic svg{width:100%;height:auto}.quick-looks{border-top:1px solid #bda36a44;margin-top:20px;padding-top:14px}.quick-looks summary{cursor:pointer;color:#e1c481;font-size:.9rem;padding:6px 0}.wardrobe .presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.wardrobe .preset{padding:0;min-width:0;overflow:hidden}.wardrobe .preset svg{display:block;width:100%;height:auto}.wardrobe>.nav{margin-top:24px}.wardrobe .opt.locked{opacity:.9}
@media(max-width:680px){.wardrobe{padding:16px!important}.wardrobe-grid{grid-template-columns:1fr;gap:18px}.wardrobe-preview{position:static}.wardrobe .bigprev{max-width:230px}.wardrobe>.catmenu .plaque{flex:1 1 calc(25% - 8px);font-size:.78rem;padding:8px 7px}.wardrobe>.catmenu .plaque svg{display:none}.wardrobe .bannerhead h1{font-size:1.15rem!important}.wardrobe .optpanel{padding:16px}}
/* Parchment copy is dark; the surrounding enchanted panels use light copy. */
.vdetail.parch p,.vdetail.parch h2,.vdetail.parch small{color:#342315!important;opacity:1!important}
.vpic .pic{position:relative;display:block;width:100%;height:112px;overflow:hidden;border-radius:8px;background:#302c23}
.vpic .pic img{display:block;width:100%;height:100%;object-fit:cover}
.context-picture{position:absolute;bottom:0;left:0;right:0;background:#111b28e8;color:#fff!important;font:11px/1.5 sans-serif;text-align:center}
.thinkwrap .parchpanel,.thinkwrap .parchpanel h3,.thinkwrap .parchpanel .label,.thinkwrap .parchpanel .mute,.thinkwrap .parchpanel .anslist,.thinkwrap .parchpanel .anslist span{color:#fff5e5!important;opacity:1}
.thinkwrap .parchpanel input{color:#342315!important;background:#f2e3c4}
.activity-support{margin:16px 0;padding:16px;border:1px solid #a68a4b;border-radius:12px;background:#121f31;color:#fff2d5;display:grid;gap:10px}
.activity-support>span{color:#eee6d6}.activity-support .chip[aria-pressed=true]{background:#d0b16b;color:#211c14;border-color:#f4dc99}
.question-choice{margin:0 0 18px;color:#fff3dc}.question-choice p{color:inherit!important}.question-choice .chip{margin:4px}
.sentence-frame{color:#49341f!important;font-size:.9rem;margin:8px 0}.own-sections label{display:grid;gap:6px;margin:10px 0}
.writing-topic{display:block;width:100%;max-height:160px;object-fit:contain;border-radius:6px}.writing-goal p{font-size:.9rem}
.writing-vocabulary{display:flex;flex-wrap:wrap;gap:8px}.writing-word{width:100%;border:1px solid #aa8c52;border-radius:8px;overflow:hidden}.writing-word summary{display:flex;align-items:center;gap:10px;cursor:pointer;padding:7px;color:#fff1cf;background:#182b3c}.writing-word summary img{width:58px;height:44px;object-fit:cover;border-radius:4px}.writing-word summary .context-picture{position:static;font-size:10px;max-width:45px}.writing-word>div{padding:10px;background:#f3e6ca;color:#342315}.writing-word p{color:#342315!important;opacity:1!important}.writing-word .chip{background:#23384a;color:white}.writing-vocabulary+.chips{margin-top:8px}.help .hblock>p{font-size:.88rem}
@media(max-width:620px){.vpic .pic{height:85px}.activity-support{padding:12px}.activity-support .chips{gap:6px}.writing-topic{max-height:140px}}
.thinkwrap .tabnext>span,.scaf .mapmini summary{color:#fff1d4!important;opacity:1}
.thinkwrap .charm,.thinkwrap .charm span,.thinkwrap .charm b{color:#fff2d4!important}

.profile .review,.profile .review b,.profile .review p,.review,.review>b,.review>p{color:#fff!important;opacity:1}

.support-wings .tabbody>.parchpanel:first-child{display:none}
.question-choice h3{color:#fff!important;opacity:1}

.game-vocab-photo{position:relative;display:block;flex:0 0 70px;width:70px;height:56px;overflow:hidden;border-radius:6px}.game-vocab-photo img{width:100%;height:100%;object-fit:cover}.game-vocab-photo .context-picture{font-size:9px}

.vpic .pic .vocab-photo-tile{display:block;width:100%;height:100%}.writing-word summary .vocab-photo-tile{width:58px;height:44px;flex-shrink:0;border-radius:4px}.game-vocab-photo .vocab-photo-tile{width:100%;height:100%}

/* Keep teacher feedback readable on parchment in every year and activity. */
.corr.parchframe .review,
.corr.parchframe .review b,
.corr.parchframe .review p,
.corr.parchframe .ctable.pairs th,
.corr.parchframe .ctable.pairs td,
.corr.parchframe .ctable.pairs td * {
  color: #000 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}