/* Mosswick Classrooms demo. Everything is laid out on a 480×600 grid and scaled with the stage:
   --u is one design pixel (1px at 480 wide, .75px at 360 wide). */
#stage{container-type:inline-size}
.mc{--u:calc(100cqw / 480);--pix:'VT323',ui-monospace,monospace;--good:#7FBF6A;--shaky:#E3A64A;--miss:#D9644A;--cream:#F1EBC9;--cream2:#E3DCB5;--deep:#0E211D;--ink2:#16302B;
  position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--display);color:var(--ink);font-size:calc(16*var(--u));line-height:1.3;overflow:hidden}
.mc *{box-sizing:border-box}
.mc img.px,.mc .px{image-rendering:pixelated;image-rendering:crisp-edges}
.mc button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mc button:focus-visible,.mc textarea:focus-visible{outline:calc(3*var(--u)) solid #FFF3B0;outline-offset:calc(2*var(--u))}
.mc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ——— Step rail ——— */
.mc-rail{position:relative;z-index:3;height:calc(40*var(--u));flex:none;display:flex;align-items:center;gap:calc(10*var(--u));padding:0 calc(14*var(--u));background:var(--deep);border-bottom:calc(2*var(--u)) solid #0A1815}
.mc-pips{display:flex;gap:calc(4*var(--u))}
.mc-pips i{width:calc(20*var(--u));height:calc(20*var(--u));display:grid;place-items:center;font:normal calc(18*var(--u))/1 var(--pix);color:#6F8A77;background:#16302B;border:calc(2*var(--u)) solid #2A4A42;transition:background .3s,color .3s,border-color .3s}
.mc-pips i.done{background:#2D5446;color:var(--mid);border-color:#3F6B5A}
.mc-pips i.on{background:var(--accent);color:var(--ink2);border-color:#FFF0BE}
.mc-step{flex:1;min-width:0;font:normal calc(21*var(--u))/1 var(--pix);color:var(--ink);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-where{font:normal calc(16*var(--u))/1 var(--pix);color:var(--accent);border:calc(2*var(--u)) solid #3F6B5A;padding:calc(3*var(--u)) calc(7*var(--u));white-space:nowrap}

/* ——— Screens ——— */
.mc-view{position:relative;flex:1;min-height:0}
.mc-scr{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateX(calc(24*var(--u)));transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
.mc-scr.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.mc-scr.gone{transform:translateX(calc(-24*var(--u)))}
.mc-night{background:#14302A center bottom/cover no-repeat}
.mc-night::after{content:'';position:absolute;inset:0;background:linear-gradient(#0B1C1900,#0B1C19AA);pointer-events:none}
.mc-night>*{position:relative;z-index:1}
.mc-desk{background:radial-gradient(ellipse at 50% 0%,#24463E,#16302B 70%)}

.mc-btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(8*var(--u));border:0;border-radius:calc(4*var(--u));background:var(--accent);color:var(--ink2)!important;font:normal calc(25*var(--u))/1 var(--pix)!important;letter-spacing:.03em;padding:calc(10*var(--u)) calc(18*var(--u));box-shadow:0 calc(4*var(--u)) 0 #8E7442,0 calc(4*var(--u)) 0 calc(2*var(--u)) var(--deep);position:relative;overflow:hidden;transition:transform .1s,box-shadow .1s,filter .2s}
.mc-btn:hover{filter:brightness(1.06)}
.mc-btn:active,.mc-btn.press{transform:translateY(calc(3*var(--u)));box-shadow:0 calc(1*var(--u)) 0 #8E7442,0 calc(1*var(--u)) 0 calc(2*var(--u)) var(--deep)}
.mc-btn:disabled{filter:grayscale(.8) brightness(.7);cursor:default}
.mc-btn .fill{position:absolute;left:0;bottom:0;height:calc(4*var(--u));width:0;background:var(--ink2);opacity:.45}
.mc-btn .fill.go{width:100%;transition:width var(--t,4s) linear}
.mc-btn.ghost{background:transparent;color:var(--accent)!important;box-shadow:inset 0 0 0 calc(2*var(--u)) #5C7D63}
.mc-link{background:none;border:0;padding:calc(4*var(--u));color:var(--ink2);font:700 calc(14*var(--u))/1.2 var(--display);text-decoration:underline;text-underline-offset:.2em;opacity:.75}

/* ——— 1. Paste ——— */
.mc-paste{padding:calc(16*var(--u)) calc(18*var(--u)) calc(14*var(--u));gap:calc(10*var(--u))}
.mc-card{background:var(--cream);color:var(--ink2);border:calc(2*var(--u)) solid var(--deep);border-radius:calc(4*var(--u));box-shadow:0 calc(5*var(--u)) 0 var(--deep)}
.mc-paste .mc-card{flex:1;min-height:0;display:flex;flex-direction:column;padding:calc(14*var(--u)) calc(14*var(--u)) calc(12*var(--u));gap:calc(8*var(--u))}
.mc-h{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8*var(--u))}
.mc-h h2{margin:0;font:800 calc(22*var(--u))/1.1 var(--display)}
.mc-sub{font:600 calc(13*var(--u))/1.3 var(--display);color:#4D6B5F}
.mc-ta-wrap{position:relative;flex:1;min-height:0}
.mc-ta{width:100%;height:100%;resize:none;border:calc(2*var(--u)) solid #B8B08A;border-radius:calc(3*var(--u));background:#FBF8E8;color:#1D3A33;font:600 calc(15*var(--u))/1.5 var(--display);padding:calc(9*var(--u)) calc(10*var(--u));outline:0;user-select:text;-webkit-user-select:text}
.mc-ta:focus{border-color:#7E9E6B}
.mc-ta.flash{animation:pasteflash .9s ease-out}
@keyframes pasteflash{0%{background:#FFE9A6;border-color:var(--accent)}100%{background:#FBF8E8}}
.mc-keycap{position:absolute;right:calc(10*var(--u));top:calc(10*var(--u));font:normal calc(20*var(--u))/1 var(--pix);background:var(--ink2);color:var(--accent);padding:calc(5*var(--u)) calc(8*var(--u));border-radius:calc(3*var(--u));box-shadow:0 calc(3*var(--u)) 0 #000;opacity:0;transform:translateY(calc(-6*var(--u)))}
.mc-keycap.show{animation:keycap 1s ease-out forwards}
@keyframes keycap{0%{opacity:0;transform:translateY(calc(-6*var(--u))) scale(.9)}20%{opacity:1;transform:none scale(1.08)}35%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.mc-parsed{display:flex;align-items:center;justify-content:space-between;gap:calc(6*var(--u));font:700 calc(14*var(--u))/1.2 var(--display)}
.mc-parsed b{font:normal calc(20*var(--u))/1 var(--pix);color:#2D5446}
.mc-parsed.warn b{color:#A2442F}
.mc-chips{display:flex;flex-wrap:wrap;gap:calc(5*var(--u));min-height:calc(56*var(--u));align-content:flex-start}
.mc-chip{display:inline-flex;align-items:center;gap:calc(4*var(--u));background:var(--ink2);color:var(--ink);font:normal calc(18*var(--u))/1 var(--pix);padding:calc(3*var(--u)) calc(7*var(--u)) calc(3*var(--u)) calc(5*var(--u));border-radius:calc(3*var(--u));animation:chip .35s cubic-bezier(.3,1.6,.5,1) both}
.mc-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-chip img{width:calc(14*var(--u));height:calc(14*var(--u))}
@keyframes chip{from{opacity:0;transform:scale(.4)}}
.mc-go{width:100%;font-size:calc(28*var(--u))!important;padding:calc(13*var(--u))!important}
.mc-note{font:600 calc(12.5*var(--u))/1.3 var(--display);color:var(--mid);text-align:center}

/* ——— 2. Lobby ——— */
.mc-lobby{padding:calc(14*var(--u)) calc(18*var(--u)) calc(14*var(--u));align-items:center;text-align:center}
.mc-lobby .k{font:normal calc(20*var(--u))/1 var(--pix);color:var(--mid);letter-spacing:.12em;text-transform:uppercase}
.mc-code{display:flex;gap:calc(7*var(--u));margin:calc(8*var(--u)) 0 calc(6*var(--u))}
.mc-code span{width:calc(50*var(--u));height:calc(62*var(--u));display:grid;place-items:center;font:normal calc(54*var(--u))/1 var(--pix);color:var(--ink2);background:var(--accent);border-radius:calc(3*var(--u));box-shadow:0 calc(4*var(--u)) 0 #8E7442,0 calc(4*var(--u)) 0 calc(2*var(--u)) var(--deep)}
.mc-code span.roll{background:#3A5A4E;color:#F3ECC8AA}
.mc-code span.lock{animation:lock .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes lock{from{transform:translateY(calc(-8*var(--u))) scale(1.15)}}
.mc-howjoin{font:600 calc(13.5*var(--u))/1.3 var(--display);color:var(--mid)}
.mc-count{display:flex;align-items:center;gap:calc(10*var(--u));margin:calc(12*var(--u)) 0 calc(8*var(--u));font:normal calc(26*var(--u))/1 var(--pix)}
.mc-count b{font-weight:400;color:var(--accent)}
.mc-meter{width:calc(120*var(--u));height:calc(12*var(--u));background:#0B1C19;border:calc(2*var(--u)) solid #3F6B5A;position:relative}
.mc-meter i{position:absolute;inset:0 auto 0 0;width:0;background:repeating-linear-gradient(90deg,var(--good) 0 calc(8*var(--u)),#5E9A5B calc(8*var(--u)) calc(10*var(--u)));transition:width .25s}
.mc-room{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(6*var(--u)) calc(8*var(--u));width:100%;flex:1;align-content:start}
.mc-seat{height:calc(78*var(--u));display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:calc(2*var(--u));border-radius:calc(4*var(--u));background:#0B1C1966;border:calc(2*var(--u)) dashed #2E5048;position:relative}
.mc-seat img{width:calc(54*var(--u));height:calc(54*var(--u));opacity:0}
.mc-seat span{font:800 calc(14*var(--u))/1 var(--display);height:calc(16*var(--u));opacity:0}
.mc-seat.in{background:#1E3D36;border:calc(2*var(--u)) solid #3F6B5A}
.mc-seat.in img,.mc-seat.in span{opacity:1}
.mc-seat.in img{animation:hop .5s cubic-bezier(.3,1.7,.5,1)}
.mc-seat.in::after{content:'';position:absolute;inset:calc(-2*var(--u));border:calc(3*var(--u)) solid var(--accent);border-radius:calc(5*var(--u));opacity:0;animation:ring .6s ease-out}
@keyframes hop{0%{transform:translateY(calc(18*var(--u))) scale(.5)}60%{transform:translateY(calc(-6*var(--u))) scale(1.08)}100%{transform:none}}
@keyframes ring{0%{opacity:1;transform:scale(.85)}100%{opacity:0;transform:scale(1.12)}}
.mc-foot{display:flex;align-items:center;justify-content:space-between;gap:calc(10*var(--u));width:100%;min-height:calc(52*var(--u))}
.mc-foot .t{font:600 calc(13.5*var(--u))/1.25 var(--display);color:var(--mid);text-align:left}

/* ——— 3. Duel ——— */
.mc-duel{padding:calc(10*var(--u)) calc(16*var(--u)) calc(12*var(--u))}
.d-top{display:flex;align-items:center;justify-content:space-between;height:calc(48*var(--u))}
.d-round{font:normal calc(26*var(--u))/1 var(--pix);color:var(--accent)}
.d-round small{font-size:.7em;color:var(--mid)}
.d-codechip{font:normal calc(17*var(--u))/1 var(--pix);color:var(--mid);border:calc(2*var(--u)) solid #2E5048;padding:calc(3*var(--u)) calc(8*var(--u))}
.d-ring{position:relative;width:calc(46*var(--u));height:calc(46*var(--u))}
.d-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.d-ring circle{fill:none;stroke-width:5}
.d-ring .bg{stroke:#0B1C19}
.d-ring .fg{stroke:var(--accent);stroke-dasharray:113.1;stroke-dashoffset:0}
.d-ring.low .fg{stroke:var(--miss)}
.d-ring b{position:absolute;inset:0;display:grid;place-items:center;font:normal calc(26*var(--u))/1 var(--pix);font-weight:400}
.d-head{position:relative;height:calc(104*var(--u))}
.d-q,.d-ban{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:opacity .3s,transform .35s}
.d-q .l{font:800 calc(19*var(--u))/1.1 var(--display);color:var(--mid)}
.d-q .w{font:normal calc(54*var(--u))/.95 var(--pix);color:var(--accent);text-shadow:0 calc(3*var(--u)) 0 var(--deep),0 0 calc(18*var(--u)) #E4C58C55;margin:calc(2*var(--u)) 0;max-width:100%;overflow-wrap:anywhere}
.d-q .w.long{font-size:calc(42*var(--u))}
.d-q .w.xlong{font-size:calc(32*var(--u))}
.d-q .w.pop{animation:wpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes wpop{from{transform:scale(.6);opacity:0}}
.d-ban{opacity:0;transform:translateY(calc(10*var(--u)));flex-direction:row;gap:calc(10*var(--u));background:#0B1C19AA;border:calc(2*var(--u)) solid #3F6B5A;border-radius:calc(4*var(--u));padding:calc(8*var(--u)) calc(12*var(--u));top:calc(8*var(--u));bottom:calc(8*var(--u));justify-content:flex-start;text-align:left}
.d-ban img{width:calc(34*var(--u));height:calc(26*var(--u));flex:none}
.d-ban .tx{flex:1;min-width:0}
.d-ban .tx b{display:block;font:normal calc(28*var(--u))/1 var(--pix);color:var(--accent);font-weight:400}
.d-ban .tx span{display:block;font:700 calc(14.5*var(--u))/1.25 var(--display);color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.d-ban .got{flex:none;text-align:center;font:normal calc(30*var(--u))/1 var(--pix);color:var(--ink)}
.d-ban .got small{display:block;font:700 calc(11.5*var(--u))/1.1 var(--display);color:var(--mid)}
.mc-duel.board .d-q{opacity:0;transform:translateY(calc(-10*var(--u)))}
.mc-duel.board .d-ban{opacity:1;transform:none}
.d-mid{position:relative;flex:1;min-height:0}
.d-ask,.d-board{position:absolute;inset:0;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.d-ask{display:flex;flex-direction:column;gap:calc(10*var(--u))}
.d-ans{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:calc(9*var(--u));flex:1;min-height:0}
.d-opt{position:relative;display:flex;flex-direction:column;gap:calc(6*var(--u));padding:calc(10*var(--u)) calc(10*var(--u)) calc(8*var(--u));border-radius:calc(4*var(--u));background:var(--c);border:calc(2*var(--u)) solid var(--deep);box-shadow:0 calc(4*var(--u)) 0 var(--deep);color:#FFFBEA;transition:opacity .3s,filter .3s,transform .3s;text-align:left;overflow:hidden}
.d-opt .rt{display:flex;align-items:center;gap:calc(8*var(--u));flex:1;min-height:0}
.d-opt .rt img{width:calc(27*var(--u));height:calc(27*var(--u));flex:none}
.d-opt .rt span{font:800 calc(18.5*var(--u))/1.2 var(--display);text-shadow:0 calc(1.5*var(--u)) 0 #0006;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.d-opt .who{display:flex;align-items:center;gap:calc(2*var(--u));height:calc(22*var(--u));opacity:0;transition:opacity .3s}
.d-opt .who img{width:calc(20*var(--u));height:calc(20*var(--u));margin-right:calc(-5*var(--u))}
.d-opt .who b{margin-left:auto;font:normal calc(24*var(--u))/1 var(--pix);font-weight:400}
.d-opt .tick{position:absolute;right:calc(-4*var(--u));top:calc(-4*var(--u));width:calc(40*var(--u));height:calc(28*var(--u));opacity:0;transform:scale(.3);transition:opacity .25s,transform .35s cubic-bezier(.3,1.7,.5,1)}
.mc-duel.reveal .d-opt .who{opacity:1}
.mc-duel.reveal .d-opt:not(.right){opacity:.42;filter:saturate(.4)}
.mc-duel.reveal .d-opt.right{transform:scale(1.03);box-shadow:0 calc(4*var(--u)) 0 var(--deep),0 0 0 calc(3*var(--u)) #FFF0BE,0 0 calc(26*var(--u)) #E4C58C99;z-index:1}
.mc-duel.reveal .d-opt.right .tick{opacity:1;transform:none;right:calc(6*var(--u));top:calc(6*var(--u))}
.d-strip{display:flex;align-items:center;gap:calc(8*var(--u));height:calc(40*var(--u));padding:0 calc(10*var(--u));background:#0B1C1999;border-radius:calc(4*var(--u))}
.d-strip .n{font:normal calc(21*var(--u))/1 var(--pix);white-space:nowrap;min-width:calc(92*var(--u))}
.d-strip .faces{display:flex;flex:1;justify-content:space-between}
.d-strip .faces img{width:calc(25*var(--u));height:calc(25*var(--u));filter:grayscale(1) brightness(.45);transition:filter .2s,transform .25s}
.d-strip .faces img.in{filter:none;transform:translateY(calc(-3*var(--u)))}
.d-board{opacity:0;transform:translateY(calc(24*var(--u)));pointer-events:none;overflow:hidden}
.mc-duel.board .d-ask{opacity:0;transform:translateY(calc(-14*var(--u)));pointer-events:none}
.mc-duel.board .d-board{opacity:1;transform:none;pointer-events:auto}
.d-row{position:absolute;left:0;right:0;top:0;height:calc(36*var(--u));display:grid;grid-template-columns:calc(26*var(--u)) calc(32*var(--u)) calc(64*var(--u)) 1fr calc(54*var(--u));align-items:center;gap:calc(5*var(--u));padding:0 calc(6*var(--u)) 0 calc(4*var(--u));background:#0B1C1999;border-radius:calc(3*var(--u));transition:transform .7s cubic-bezier(.5,0,.2,1),opacity .4s}
.d-row.out{opacity:0}
.d-row .rk{font:normal calc(22*var(--u))/1 var(--pix);color:var(--mid);text-align:center}
.d-row.r1 .rk{color:#F2CF6B}.d-row.r2 .rk{color:#DCE3E8}.d-row.r3 .rk{color:#E0A070}
.d-row.r1{background:linear-gradient(90deg,#E4C58C33,#0B1C1999 60%);box-shadow:inset 0 0 0 calc(2*var(--u)) #E4C58C66}
.d-row .av{position:relative;width:calc(30*var(--u));height:calc(30*var(--u))}
.d-row .av img{width:100%;height:100%}
.d-row .av .crown{position:absolute;left:calc(6*var(--u));top:calc(-9*var(--u));width:calc(18*var(--u));height:calc(10*var(--u));display:none}
.d-row.r1 .av .crown{display:block}
.d-row .nm{font:800 calc(15*var(--u))/1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-row .tr{position:relative;height:calc(16*var(--u));background:#0B1C19;border-radius:calc(2*var(--u))}
.d-row .fl{position:absolute;inset:0 auto 0 0;width:0;border-radius:calc(2*var(--u));background:var(--c);box-shadow:inset 0 calc(-4*var(--u)) 0 #0003,inset 0 calc(3*var(--u)) 0 #FFF4;transition:width .45s cubic-bezier(.3,1.3,.5,1)}
.d-row .fl::after{content:'';position:absolute;right:0;top:0;bottom:0;width:calc(3*var(--u));background:#FFF8D8;opacity:.8}
.d-row .bd{position:absolute;left:0;top:50%;transform:translate(0,-50%);display:flex;align-items:center;gap:calc(4*var(--u));padding-left:calc(4*var(--u));pointer-events:none;white-space:nowrap}
.d-row .crit{font:normal calc(19*var(--u))/1 var(--pix);color:#FFE07A;background:#B5432E;padding:calc(1*var(--u)) calc(5*var(--u)) calc(2*var(--u));border-radius:calc(2*var(--u));text-shadow:0 calc(1.5*var(--u)) 0 #5A1D10;display:none}
.d-row .crit.on{display:inline-block;animation:crit .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes crit{from{transform:scale(2) rotate(-8deg);opacity:0}}
.d-row .stk{display:none;align-items:center;gap:calc(2*var(--u));font:normal calc(19*var(--u))/1 var(--pix);color:#FFD15A;background:#0B1C19D9;padding:calc(1*var(--u)) calc(5*var(--u)) calc(1*var(--u)) calc(3*var(--u));border-radius:calc(2*var(--u))}
.d-row .stk img{width:calc(14*var(--u));height:calc(18*var(--u))}
.d-row .stk.on{display:inline-flex}
.d-row .pt{font:normal calc(23*var(--u))/1 var(--pix);text-align:right;color:var(--ink)}
.d-row .plus{position:absolute;right:calc(62*var(--u));top:calc(6*var(--u));font:normal calc(20*var(--u))/1 var(--pix);color:#B9F59A;background:#0B1C19E6;padding:calc(1*var(--u)) calc(4*var(--u));border-radius:calc(2*var(--u));pointer-events:none;opacity:0}
.d-row .plus.go{animation:plus 1.1s ease-out}
@keyframes plus{0%{opacity:0;transform:translateY(calc(6*var(--u)))}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(calc(-14*var(--u)))}}
.d-row.hit{animation:hit .35s ease-out}
@keyframes hit{0%{background:#E4C58C66}100%{background:#0B1C1999}}
.d-more{position:absolute;left:0;right:0;bottom:0;text-align:center;font:600 calc(12.5*var(--u))/1.2 var(--display);color:var(--mid)}
.mc-duel .mc-foot{margin-top:calc(8*var(--u));min-height:calc(48*var(--u))}

/* ——— 4. Mastery ——— */
.mc-mast{padding:calc(12*var(--u)) calc(14*var(--u)) calc(12*var(--u));gap:calc(10*var(--u))}
.mc-mast .mc-card{padding:calc(12*var(--u)) calc(12*var(--u)) calc(10*var(--u))}
.g-wrap{display:grid;grid-template-columns:calc(104*var(--u)) repeat(12,1fr);gap:calc(3*var(--u));align-items:center;margin-top:calc(8*var(--u))}
.g-head{display:flex;justify-content:center;border:0;background:none;padding:0;border-radius:calc(3*var(--u))}
.g-head img{width:calc(23*var(--u));height:calc(23*var(--u))}
.g-head.sel{background:#16302B22;box-shadow:0 0 0 calc(2*var(--u)) var(--ink2)}
.g-word{font:800 calc(13.5*var(--u))/1.05 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:calc(4*var(--u));padding-right:calc(2*var(--u))}
.g-word.hot{color:#A2442F}
.g-word.hot::before{content:'!';font:normal calc(18*var(--u))/1 var(--pix);background:var(--miss);color:#FFF3E0;width:calc(12*var(--u));text-align:center;flex:none}
.g-word.hot.queued::before{content:'MON';width:auto;padding:0 calc(3*var(--u));background:var(--accent);color:var(--ink2);font-size:calc(15*var(--u));line-height:calc(18*var(--u))}
.g-word.hot.queued{color:var(--ink2)}
.g-cell{height:var(--rh,calc(28*var(--u)));border-radius:calc(2*var(--u));background:var(--cream2);box-shadow:inset 0 calc(-3*var(--u)) 0 #0002;transform:scale(.2);opacity:0;transition:transform .3s cubic-bezier(.3,1.6,.5,1),opacity .2s,background .3s}
.g-cell.on{transform:none;opacity:1}
.g-cell.s2{background:var(--good)}.g-cell.s1{background:var(--shaky)}.g-cell.s0{background:var(--miss)}
/* Shapes as well as colours, so the grid reads without colour vision. */
.g-cell,.g-legend i{position:relative}.g-cell::after,.g-legend i::after{position:absolute;inset:0;display:grid;place-items:center;font:700 calc(11*var(--u))/1 var(--display);color:rgba(14,33,29,.62)}
.g-cell.s2::after,.g-legend i.s2::after{content:'✓'}.g-cell.s1::after,.g-legend i.s1::after{content:'~'}.g-cell.s0::after,.g-legend i.s0::after{content:'✕'}
.g-cell.s1::after,.g-legend i.s1::after{background:repeating-linear-gradient(45deg,#0000 0 calc(4*var(--u)),#FFF3 calc(4*var(--u)) calc(6*var(--u)))}
.g-cell.dim{opacity:.35}
.g-cell.hot.s0.on{animation:hot 1.2s ease-in-out .3s 2}
@keyframes hot{50%{box-shadow:inset 0 calc(-3*var(--u)) 0 #0002,0 0 0 calc(2*var(--u)) #A2442F}}
.g-legend{display:flex;gap:calc(12*var(--u));justify-content:flex-end;margin-top:calc(8*var(--u));font:700 calc(12*var(--u))/1 var(--display);color:#4D6B5F;flex-wrap:wrap}
.g-legend i{display:inline-block;width:calc(11*var(--u));height:calc(11*var(--u));margin-right:calc(4*var(--u));vertical-align:-.1em;border-radius:calc(2*var(--u))}
.g-info{min-height:calc(18*var(--u));margin-top:calc(6*var(--u));font:700 calc(13*var(--u))/1.25 var(--display);color:#2D5446}
.g-call{display:flex;gap:calc(10*var(--u));align-items:center;padding:calc(12*var(--u));background:#2A1F18;border:calc(2*var(--u)) solid #D9644A;border-radius:calc(4*var(--u));box-shadow:0 calc(4*var(--u)) 0 var(--deep);opacity:0;transform:translateY(calc(12*var(--u)));transition:opacity .35s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.g-call.on{opacity:1;transform:none}
.g-call .ic{font:normal calc(38*var(--u))/1 var(--pix);color:#FFE07A;width:calc(34*var(--u));height:calc(40*var(--u));display:grid;place-items:center;background:var(--miss);border-radius:calc(3*var(--u));flex:none}
.g-call p{margin:0;font:600 calc(14.5*var(--u))/1.3 var(--display);color:#F7E8D2}
.g-call p em{font:normal calc(21*var(--u))/1 var(--pix);font-style:normal;color:#FFE07A}
.g-call p small{display:block;color:#D7BFA6;font-size:calc(12.5*var(--u));margin-top:calc(2*var(--u))}
.mc-mast .mc-foot{min-height:calc(50*var(--u))}
.g-call.done{border-color:var(--accent);background:#1E3D36}
.g-call.done .ic{background:var(--accent);color:var(--ink2);font-size:calc(17*var(--u));width:calc(40*var(--u))}
.g-call.done p em{color:var(--accent)}
.g-call.done{animation:callpop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes callpop{from{transform:scale(.94)}}

/* ——— 5. Parent report ——— */
.mc-par{padding:calc(16*var(--u)) calc(22*var(--u)) calc(12*var(--u));gap:calc(12*var(--u));align-items:center}
.mc-par .mc-foot{margin-top:auto}
.p-env{width:100%;flex:none;display:flex;flex-direction:column;position:relative;padding:calc(14*var(--u)) calc(16*var(--u)) calc(12*var(--u));gap:calc(9*var(--u));animation:none}
.mc-par.on .p-env{animation:letter .6s cubic-bezier(.3,1.4,.5,1) both}
@keyframes letter{from{transform:translateY(calc(40*var(--u))) rotate(-2deg);opacity:0}}
.p-top{display:flex;align-items:center;gap:calc(10*var(--u));border-bottom:calc(2*var(--u)) dashed #B8B08A;padding-bottom:calc(9*var(--u))}
.p-top img.owl{width:calc(42*var(--u));height:calc(45*var(--u))}
.p-top .from{flex:1;font:600 calc(12.5*var(--u))/1.3 var(--display);color:#4D6B5F}
.p-top .from b{display:block;font:normal calc(21*var(--u))/1 var(--pix);color:var(--ink2);font-weight:400}
.p-top img.seal{width:calc(30*var(--u));height:calc(30*var(--u))}
.p-hi{display:flex;align-items:center;gap:calc(12*var(--u))}
.p-hi img{width:calc(56*var(--u));height:calc(56*var(--u));background:#DCD3A8;border-radius:calc(4*var(--u));border:calc(2*var(--u)) solid var(--deep)}
.p-hi h3{margin:0;font:800 calc(21*var(--u))/1.15 var(--display);color:var(--ink2)}
.p-hi h3 em{font-style:normal;color:#2E7A3E}
.p-words{display:flex;flex-wrap:wrap;gap:calc(5*var(--u))}
.p-words span{font:700 calc(13*var(--u))/1 var(--display);padding:calc(5*var(--u)) calc(7*var(--u));border-radius:calc(3*var(--u));background:#CFE3B8;color:#1F4A2B}
.p-words span.prac{background:#F4D9A7;color:#7A4B12}
.p-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(6*var(--u))}
.p-stats div{background:#E7E0BB;border-radius:calc(3*var(--u));padding:calc(6*var(--u));text-align:center;font:700 calc(11.5*var(--u))/1.2 var(--display);color:#4D6B5F}
.p-stats b{display:block;font:normal calc(26*var(--u))/1 var(--pix);color:var(--ink2);font-weight:400}
.p-tip{font:600 calc(13*var(--u))/1.35 var(--display);color:#2D5446;background:#FBF8E8;border-left:calc(4*var(--u)) solid var(--accent);padding:calc(7*var(--u)) calc(9*var(--u))}
.p-opt{display:flex;align-items:center;gap:calc(10*var(--u));width:100%;background:none;border:0;padding:calc(4*var(--u)) 0;text-align:left;color:var(--ink)}
.p-opt .sw{flex:none;width:calc(46*var(--u));height:calc(26*var(--u));background:#0B1C19;border:calc(2*var(--u)) solid #3F6B5A;border-radius:calc(3*var(--u));position:relative;transition:background .2s}
.p-opt .sw::after{content:'';position:absolute;top:calc(2*var(--u));left:calc(2*var(--u));width:calc(18*var(--u));height:calc(18*var(--u));background:var(--mid);border-radius:calc(2*var(--u));transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .2s}
.p-opt[aria-checked=true] .sw{background:#2D5446}
.p-opt[aria-checked=true] .sw::after{transform:translateX(calc(20*var(--u)));background:var(--accent)}
.p-opt .tx{font:600 calc(12.5*var(--u))/1.3 var(--display);color:var(--mid)}
.p-opt .tx b{display:block;color:var(--ink);font-size:calc(14*var(--u))}

/* ——— FX + CTA ——— */
.mc-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
#cta{z-index:6;--u:calc(100cqw / 480)}
#cta .trophy{width:calc(96*var(--u));height:calc(54*var(--u));image-rendering:pixelated}
#cta .sum{font:normal calc(22*var(--u))/1 var(--pix);color:var(--accent)}
@media (prefers-reduced-motion:reduce){.mc-scr,.mc-scr.gone{transform:none}}
.mc-btn img{height:calc(16*var(--u));width:auto;flex:none}
.mc-btn img.spk{height:calc(20*var(--u));filter:brightness(0);opacity:.7}