/* WordlyPlay — Wordle Rooms: room cards (Store, settings page), the settings page (/rooms/new), /join, and the room (/r/CODE).
   Light/dark from the site tokens; the room itself is always the dark game stage (like Battle Royale and the Grand Slam). */
.rm-wrap{max-width:560px;margin:0 auto;padding:14px 16px 40px}
.rm-k{font:900 11px/1 var(--font-body,'Nunito');letter-spacing:.09em;text-transform:uppercase;color:var(--text-tertiary,#94A3B8)}
.rm-h1{font:400 26px/1.15 var(--font-heading,'Fredoka One');margin:4px 0 4px;text-wrap:balance;color:var(--text-primary)}
.rm-lede{margin:0;color:var(--text-secondary);font-size:14.5px;line-height:1.45}
.rm-panel{background:var(--bg-card,rgba(255,255,255,.7));border:1px solid var(--border-color,rgba(148,163,184,.3));border-radius:18px;padding:12px 14px}

/* ---- room cards (Store tab, create page) */
.rm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rm-card{position:relative;border:0;border-radius:18px;padding:14px 12px 12px;color:#fff;text-align:left;font:inherit;cursor:pointer;overflow:hidden;
  box-shadow:0 5px 0 var(--sh),0 10px 22px rgba(15,23,42,.18);transition:transform .15s}
.rm-card:hover{transform:translateY(-2px)}.rm-card:active{transform:translateY(2px);box-shadow:0 2px 0 var(--sh)}
.rm-card:focus-visible{outline:3px solid #FBBF24;outline-offset:2px}
.rm-card .ic{display:block;font-size:28px;line-height:1;animation:rmBob 3s ease-in-out infinite}
.rm-card b{display:block;font:400 18px/1.1 var(--font-heading,'Fredoka One');margin-top:8px}.rm-card small{display:block;opacity:.92;font-size:12px;font-weight:700;line-height:1.3}
.rm-card .pr{display:inline-flex;align-items:center;gap:4px;margin-top:10px;background:rgba(255,255,255,.22);border-radius:999px;padding:3px 10px;font-weight:900;font-size:13px}
.rm-card .own{position:absolute;top:9px;right:9px;background:#fff;color:#0F172A;border-radius:999px;font:900 11px var(--font-body,'Nunito');padding:2px 8px}
.rm-card .soon{position:absolute;top:9px;right:9px;background:rgba(0,0,0,.3);border-radius:999px;font:900 10.5px var(--font-body);padding:2px 8px}
.rm-card[disabled]{cursor:default;opacity:.65}.rm-card[disabled]:hover{transform:none}
.rm-card::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.32) 50%,transparent 60%);transform:translateX(-60%);animation:rmShine 4.5s ease-in-out infinite;pointer-events:none}
.rm-card.k-single{background:linear-gradient(150deg,#34D399,#10B981);--sh:#047857}.rm-card.k-h2{background:linear-gradient(150deg,#60A5FA,#3B82F6);--sh:#1D4ED8}
.rm-card.k-day{background:linear-gradient(150deg,#FBBF24,#F59E0B);--sh:#B45309}.rm-card.k-week{background:linear-gradient(150deg,#A78BFA,#8B5CF6);--sh:#6D28D9}
.rm-card.k-tourney{background:linear-gradient(150deg,#FB7185,#E11D48);--sh:#9F1239}
.rm-free{display:flex;gap:10px;align-items:center;border-radius:16px;padding:10px 12px;font-size:14px;font-weight:700;background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.45);color:var(--text-primary)}
.rm-free i{font-style:normal;font-size:24px}
.rm-btn{display:block;width:100%;border:0;border-radius:16px;padding:14px;font:400 19px/1 var(--font-heading,'Fredoka One');color:#fff;cursor:pointer;text-align:center;text-decoration:none;
  background:linear-gradient(180deg,#60A5FA,#3B82F6);box-shadow:0 5px 0 #1D4ED8;transition:transform .1s}
.rm-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #1D4ED8}.rm-btn[disabled]{opacity:.55;cursor:default}
.rm-btn small{display:block;font:800 12px var(--font-body,'Nunito');opacity:.9;margin-top:4px}
.rm-btn.green{background:linear-gradient(180deg,#4ADE80,#22C55E);box-shadow:0 5px 0 #15803D}.rm-btn.gold{background:linear-gradient(180deg,#FCD34D,#F59E0B);color:#3b2300;box-shadow:0 5px 0 #B45309}
.rm-btn.ghost{background:transparent;color:var(--text-primary);border:2px solid var(--border-color,rgba(148,163,184,.4));box-shadow:none;font-size:16px;padding:11px}
.rm-btn:focus-visible,.rm-chip:focus-visible,.rm-mode:focus-visible,.rm-preset:focus-visible,.rm-step button:focus-visible,.rm-sw:focus-visible{outline:3px solid #FBBF24;outline-offset:2px}
.rm-sheet{position:fixed;inset:0;z-index:3000;display:grid;place-items:end center;background:rgba(15,23,42,.55)}
.rm-sheet[hidden]{display:none}
.rm-sheet .in{width:min(520px,100%);background:var(--bg-secondary,#EFF6FF);color:var(--text-primary);border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:12px;animation:rmUp .25s ease-out}
.rm-sheet h3{margin:0;font:400 21px var(--font-heading,'Fredoka One')}

/* ---- the settings page: three short steps that fit one phone screen */
.rm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 12px}
.rm-steps button{border:0;background:none;padding:0;cursor:pointer;color:var(--text-tertiary);font:800 12px var(--font-body,'Nunito');text-align:left}
.rm-steps button i{display:block;height:5px;border-radius:3px;background:rgba(148,163,184,.3);margin-bottom:6px}
.rm-steps button.on{color:var(--text-primary)}.rm-steps button.on i,.rm-steps button.done i{background:linear-gradient(90deg,#3B82F6,#60A5FA)}
.rm-pane{display:grid;gap:12px;animation:rmIn .25s ease-out}.rm-pane[hidden]{display:none}
.rm-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rm-preset{border:2px solid rgba(148,163,184,.35);background:var(--bg-card);color:var(--text-primary);border-radius:14px;padding:9px 10px;font:800 13.5px var(--font-body,'Nunito');cursor:pointer;text-align:left;display:flex;gap:8px;align-items:center}
.rm-preset i{font-style:normal;font-size:20px}.rm-preset.on{border-color:#3B82F6;background:rgba(59,130,246,.12)}
.rm-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rm-mode{position:relative;border:2px solid rgba(148,163,184,.35);background:var(--bg-card);color:var(--text-primary);border-radius:16px;padding:10px 8px;text-align:center;cursor:pointer;font:inherit;transition:transform .12s}
.rm-mode i{display:block;font-style:normal;font-size:24px}.rm-mode b{display:block;font:400 16px var(--font-heading,'Fredoka One');margin-top:2px}.rm-mode small{display:block;color:var(--text-secondary);font-size:11.5px;line-height:1.25;font-weight:700}
.rm-mode.on{border-color:#3B82F6;background:rgba(59,130,246,.12);transform:translateY(-2px)}.rm-mode[disabled]{opacity:.5;cursor:default}
.rm-mode .soon{position:absolute;top:6px;right:6px;font:900 10px var(--font-body);background:rgba(148,163,184,.25);border-radius:999px;padding:1px 6px}
.rm-set{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed rgba(148,163,184,.3)}.rm-set:last-child{border-bottom:0}
.rm-set>div:first-child>span{font-weight:800}.rm-set small{display:block;color:var(--text-secondary);font-size:12px;font-weight:700}
.rm-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rm-chip{border:2px solid rgba(148,163,184,.35);background:var(--bg-card);color:var(--text-primary);border-radius:999px;padding:5px 12px;font:800 13px var(--font-body,'Nunito');cursor:pointer}
.rm-chip.on{background:#2563EB;border-color:#2563EB;color:#fff}
.rm-step{display:flex;align-items:center;gap:6px}.rm-step button{width:32px;height:32px;border-radius:10px;border:2px solid rgba(148,163,184,.35);background:var(--bg-card);color:var(--text-primary);font:900 17px var(--font-body);cursor:pointer}
.rm-step b{min-width:58px;text-align:center;font-variant-numeric:tabular-nums}
.rm-sw{width:46px;height:26px;border-radius:13px;background:#CBD5E1;border:0;position:relative;cursor:pointer;transition:background .2s;flex:none}
.rm-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s}.rm-sw[aria-checked="true"]{background:#22C55E}.rm-sw[aria-checked="true"]::after{left:23px}
.rm-words{display:grid;gap:6px}.rm-word{display:grid;grid-template-columns:110px 1fr 32px;gap:6px}
.rm-in{width:100%;min-width:0;border:2px solid rgba(148,163,184,.35);border-radius:12px;padding:9px 10px;background:var(--bg-input,#fff);color:var(--text-primary);font:800 15px var(--font-body,'Nunito')}
.rm-in:focus{outline:none;border-color:#3B82F6;box-shadow:0 0 0 4px rgba(59,130,246,.18)}
.rm-word .w{text-transform:uppercase;letter-spacing:.06em}.rm-x{border:0;background:none;color:var(--text-tertiary);font-size:18px;cursor:pointer}
.rm-note{font-size:12.5px;color:var(--text-secondary);font-weight:700}.rm-err{color:#EF4444;font-weight:800;font-size:13px;min-height:1em}
.rm-sum{display:flex;gap:8px;align-items:center;background:linear-gradient(135deg,#1E3A8A,#3B82F6);color:#fff;border-radius:16px;padding:10px 12px;font-size:13.5px;font-weight:800}.rm-sum i{font-style:normal;font-size:22px}
.rm-use{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800}.rm-use button{border:0;background:none;color:#3B82F6;font:900 13px var(--font-body);cursor:pointer}
.rm-nav{display:grid;grid-template-columns:auto 1fr;gap:8px}

/* ---- /join */
.rm-code{display:flex;gap:6px;justify-content:center}
.rm-code input{width:46px;height:56px;border-radius:12px;border:2px solid rgba(148,163,184,.4);background:var(--bg-input,#fff);color:var(--text-primary);text-align:center;font:400 28px var(--font-heading,'Fredoka One');text-transform:uppercase;padding:0}
.rm-code input:focus{outline:none;border-color:#3B82F6;box-shadow:0 0 0 4px rgba(59,130,246,.2)}
@media (max-width:360px){.rm-code input{width:40px;height:50px;font-size:24px}}
.rm-name{display:flex;gap:8px}.rm-dice{border:2px solid rgba(148,163,184,.4);background:var(--bg-card);border-radius:14px;width:54px;font-size:24px;cursor:pointer;flex:none}.rm-dice.roll{animation:rmRoll .5s ease}
.rm-myrooms{display:grid;gap:8px}.rm-myroom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:var(--bg-card);border:1px solid rgba(148,163,184,.3);color:var(--text-primary);text-decoration:none;font-weight:800}
.rm-myroom small{display:block;color:var(--text-secondary);font-weight:700;font-size:12px}.rm-myroom code{font:400 18px var(--font-heading);letter-spacing:.12em;color:#22C55E}

/* ---- the room (/r/CODE): always the dark game stage */
body.rm-room{margin:0;min-height:100vh;min-height:100dvh;background:radial-gradient(120% 70% at 50% 0%,#1E3A8A 0%,#0F172A 62%) fixed;color:#F8FAFC;font-family:var(--font-body,'Nunito'),sans-serif}
.rm-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 14px calc(10px);padding-top:calc(10px + env(safe-area-inset-top,0px));background:rgba(15,23,42,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(51,65,85,.6)}
.rm-top .logo{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#60A5FA,#3B82F6);color:#fff;font:400 16px var(--font-heading);box-shadow:0 3px 0 #1D4ED8;text-decoration:none;flex:none}
.rm-top .t{flex:1;min-width:0}.rm-top .t b{display:block;font:400 17px/1.1 var(--font-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rm-top .t small{color:#94A3B8;font-weight:800;font-size:12px}
.rm-left{display:inline-flex;align-items:center;gap:5px;background:rgba(34,197,94,.15);color:#86EFAC;border:1px solid rgba(34,197,94,.35);border-radius:999px;padding:3px 10px;font-weight:900;font-size:12.5px;white-space:nowrap}
.rm-left.low{background:rgba(245,158,11,.15);color:#FCD34D;border-color:rgba(245,158,11,.4)}
.rm-iconbtn{width:36px;height:36px;border-radius:11px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;font-size:16px;cursor:pointer;flex:none;display:grid;place-items:center;text-decoration:none}
.rm-main{max-width:560px;margin:0 auto;padding:14px 14px 28px;display:grid;gap:12px}
.rm-scr[hidden]{display:none}.rm-scr{display:grid;gap:12px;animation:rmIn .3s ease-out}
.rm-stagepanel{background:rgba(30,41,59,.72);border:1px solid #334155;border-radius:18px;padding:12px}
.rm-room .rm-k{color:#93C5FD}
.rm-codebox{text-align:center;display:grid;gap:8px;min-height:150px;align-content:start}
.rm-tiles{display:flex;justify-content:center;gap:6px;perspective:600px;min-height:56px}
.rm-tile{width:46px;height:54px;border-radius:11px;display:grid;place-items:center;font:400 29px var(--font-heading);color:#fff;background:linear-gradient(180deg,#4ADE80,#22C55E);box-shadow:0 4px 0 #15803D;transform:rotateX(90deg);opacity:0}
.rm-tile.in{animation:rmFlip .55s cubic-bezier(.3,1.4,.5,1) forwards}
.rm-share{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rm-share button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:6px 12px;font:800 13px var(--font-body);cursor:pointer}
.rm-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:12px 6px;min-height:84px}
.rm-pl{display:flex;flex-direction:column;align-items:center;gap:3px;animation:rmJoin .6s cubic-bezier(.3,1.6,.5,1) both;background:none;border:0;color:inherit;font:inherit;padding:0;cursor:default}
.rm-pl.kick{cursor:pointer}
.rm-av{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#334155,#1E293B);border:3px solid #475569;position:relative;overflow:visible}
.rm-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.rm-av.host{border-color:#FBBF24}.rm-av.host::after{content:"👑";position:absolute;top:-13px;font-size:15px}.rm-av.me{border-color:#60A5FA}.rm-av.off{opacity:.45}
.rm-pl small{font-size:12px;font-weight:800;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#E2E8F0}
.rm-pl.wave .rm-av{animation:rmWave .9s ease-in-out 2}
.rm-count{font:400 16px var(--font-heading);color:#E2E8F0}.rm-count b{color:#4ADE80}
.rm-hostbar{display:grid;grid-template-columns:1fr auto auto;gap:8px}
.rm-hostbar .rm-iconbtn{width:52px;height:auto;border-radius:16px}
.rm-pulse{animation:rmPulse 1.6s ease-in-out infinite}
.rm-wait{text-align:center;color:#CBD5E1;font-weight:800}.rm-dots::after{content:"";animation:rmDots 1.4s steps(4) infinite}
.rm-open{position:fixed;inset:0;z-index:50;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 45%,#2563EB,#0F172A 70%);color:#fff}
.rm-open .door{font-size:76px;animation:rmPop .7s cubic-bezier(.3,1.6,.5,1) both}.rm-open h2{font:400 28px var(--font-heading);margin:8px 0 0;animation:rmRise .6s .25s both}.rm-open p{margin:4px 0 0;color:#BFDBFE;font-weight:800;animation:rmRise .6s .4s both}
.rm-open.out{animation:rmFade .45s ease forwards}.rm-open[hidden]{display:none}
.rm-conf{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}.rm-conf i{position:absolute;top:-14px;width:8px;height:12px;border-radius:2px;animation:rmFall 1.9s ease-in forwards}
.rm-cd{position:fixed;inset:0;z-index:55;display:grid;place-items:center;background:rgba(15,23,42,.97)}.rm-cd[hidden]{display:none}.rm-cd b{font:400 120px/1 var(--font-heading);color:#FCD34D;animation:rmZoom .9s ease-out both}
.rm-cd small{display:block;text-align:center;font:800 15px var(--font-body);color:#BFDBFE;margin-top:8px}
/* play */
.rm-playhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rm-wordno{font:400 17px var(--font-heading)}.rm-wordno small{display:block;font:800 12px var(--font-body);color:#94A3B8}
.rm-timer{font:400 26px var(--font-heading);font-variant-numeric:tabular-nums;color:#FCD34D;min-width:70px;text-align:right}.rm-timer.low{color:#F87171;animation:rmPulseT 1s ease-in-out infinite}
.rm-clue{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);color:#FDE68A;border-radius:12px;padding:7px 10px;font-weight:800;font-size:14px;text-align:center}
.rm-room .grid{margin:0 auto}
.rm-mini{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.rm-mini span{flex:none;display:inline-flex;align-items:center;gap:5px;background:rgba(30,41,59,.8);border:1px solid #334155;border-radius:999px;padding:3px 9px 3px 4px;font-size:12px;font-weight:800}
.rm-mini span img{width:20px;height:20px;border-radius:50%}.rm-mini span.me{border-color:#60A5FA}.rm-mini em{font-style:normal;color:#86EFAC}
.rm-room .keyboard{margin-top:4px}
/* between words / live board */
.rm-reveal{text-align:center}.rm-reveal .rm-tiles .rm-tile{width:42px;height:50px;font-size:26px}
.rm-board{display:grid;gap:6px}
.rm-brow{display:grid;grid-template-columns:22px 32px 1fr auto;align-items:center;gap:8px;background:rgba(30,41,59,.72);border:1px solid #334155;border-radius:12px;padding:6px 10px;font-weight:800}
.rm-brow.me{border-color:#60A5FA}.rm-brow .r{color:#94A3B8;text-align:center}.rm-brow img{width:30px;height:30px;border-radius:50%}
.rm-brow .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rm-brow .dots{display:flex;gap:3px;margin-top:2px}
.rm-brow .dots i{width:12px;height:12px;border-radius:3px;background:#334155}.rm-brow .dots i.s{background:#22C55E}.rm-brow .dots i.f{background:#64748B}.rm-brow .dots i.p{background:#F59E0B;animation:rmBlink 1.2s ease-in-out infinite}
.rm-brow .pts{font:400 18px var(--font-heading);color:#FCD34D;font-variant-numeric:tabular-nums}
/* results */
.rm-podium{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:8px;height:230px}.rm-podium:has(> :nth-child(2):last-child){grid-template-columns:1fr 1fr;max-width:66%;margin-inline:auto}
.rm-pod{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}.rm-pod .rm-av{animation:rmPop .6s cubic-bezier(.3,1.6,.5,1) both}
.rm-pod .bar{width:100%;border-radius:14px 14px 0 0;display:grid;place-items:start center;padding-top:8px;font:400 26px var(--font-heading);color:#fff;transform-origin:bottom;animation:rmGrow .8s cubic-bezier(.3,1.2,.5,1) both}
.rm-pod.p1 .bar{height:120px;background:linear-gradient(180deg,#FCD34D,#F59E0B)}.rm-pod.p2 .bar{height:86px;background:linear-gradient(180deg,#CBD5E1,#94A3B8)}.rm-pod.p3 .bar{height:62px;background:linear-gradient(180deg,#FDBA74,#EA580C)}
.rm-pod small{font-weight:900;font-size:13px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rm-pod em{font-style:normal;color:#93C5FD;font-size:12px;font-weight:800}
.rm-win{font:400 26px var(--font-heading);color:#FCD34D;text-align:center;margin:0}
.rm-next{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rm-next a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:#fff;background:rgba(30,41,59,.8);border:1px solid #334155;border-radius:14px;padding:10px 12px;font-weight:900}
.rm-next a small{color:#94A3B8;font-weight:700;font-size:12px}.rm-next a.big{grid-column:1/-1;background:linear-gradient(135deg,#15803D,#22C55E);border-color:#22C55E}.rm-next a.big small{color:#DCFCE7}
.rm-toast{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translate(-50%,-10px);opacity:0;z-index:70;background:#0F172A;border:1px solid #334155;color:#fff;padding:9px 14px;border-radius:12px;font-weight:800;transition:.2s;max-width:calc(100vw - 32px);text-align:center;pointer-events:none}
.rm-toast.on{opacity:1;transform:translate(-50%,0)}
body:has(#s-wait:not([hidden])) .rm-toast{top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px))}   /* the wait screen: below the player list, clear of "Word 1 of 2" and "Done! Waiting" */
@media (orientation:landscape) and (max-height:480px){body:has(#s-wait:not([hidden])) .rm-toast{bottom:calc(8px + env(safe-area-inset-bottom,0px))}}   /* short landscape: the same, the list ends lower there */
.rm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@keyframes rmBob{50%{transform:translateY(-4px) rotate(-6deg)}}@keyframes rmShine{0%,60%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
@keyframes rmUp{from{transform:translateY(40px);opacity:0}}@keyframes rmIn{from{transform:translateY(8px);opacity:0}}@keyframes rmRoll{50%{transform:rotate(200deg) scale(1.2)}}
@keyframes rmFlip{to{transform:none;opacity:1}}@keyframes rmJoin{from{transform:translateY(18px) scale(.4);opacity:0}}@keyframes rmWave{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes rmPulse{50%{transform:scale(1.03);box-shadow:0 5px 0 #15803D,0 0 0 8px rgba(34,197,94,.2)}}@keyframes rmPop{from{transform:scale(.2);opacity:0}}@keyframes rmRise{from{transform:translateY(12px);opacity:0}}
@keyframes rmFade{to{opacity:0;visibility:hidden}}@keyframes rmFall{to{transform:translateY(105vh) rotate(540deg)}}@keyframes rmZoom{from{transform:scale(2.2);opacity:0}}@keyframes rmGrow{from{transform:scaleY(0)}}
@keyframes rmDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}@keyframes rmBlink{50%{opacity:.45}}@keyframes rmPulseT{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.rm-card .ic,.rm-card::after,.rm-pl,.rm-pl.wave .rm-av,.rm-pulse,.rm-open .door,.rm-open h2,.rm-open p,.rm-pod .bar,.rm-pod .rm-av,.rm-scr,.rm-pane,.rm-brow .dots i.p,.rm-timer.low{animation:none!important}.rm-tile{transform:none;opacity:1}}
/* hidden always wins inside the rooms pages (several blocks here set display:grid/flex) */
.rm-room [hidden],.rm-wrap [hidden],.rm-sheet [hidden]{display:none!important}
/* the board and keyboard always fit the phone: keys share the row, tiles follow --tile-size from room.js */
.rm-room #s-play{justify-items:center}.rm-room #s-play>*{width:100%;min-width:0}
.rm-room .keyboard{padding:0;max-width:520px}.rm-room .keyboard__row{gap:5px}
.rm-room .key{flex:1 1 0;min-width:0;padding:0;height:var(--key-height,52px);font-size:clamp(13px,3.6vw,18px)}.rm-room .key--wide{flex:1.5 1 0;font-size:clamp(10px,2.8vw,14px)}
.rm-room .grid{width:auto!important}
@media (max-height:700px){.rm-room{--key-height:44px}}

/* QR code + "or go to …/join" under the room code */
.rm-qr{width:112px;height:112px;margin:2px auto 0;background:#fff;border-radius:12px;padding:6px}.rm-qr svg{width:100%;height:100%;display:block}
.rm-joinat{margin:0;color:#94A3B8;font-size:12.5px;font-weight:700}.rm-joinat b{color:#E2E8F0}
/* a teacher's class room on a big screen (projector): code + QR on the left, the students on the right; bigger everything */
@media (min-width:900px){
  body.rm-proj .rm-main{max-width:1180px}
  body.rm-proj #s-lobby{grid-template-columns:380px 1fr;align-items:start;column-gap:28px}
  body.rm-proj #s-lobby .rm-codebox{grid-row:span 3}
  body.rm-proj .rm-tile{width:52px;height:62px;font-size:34px}
  body.rm-proj .rm-qr{width:220px;height:220px}
  body.rm-proj .rm-joinat{font-size:16px}
  body.rm-proj .rm-players{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  body.rm-proj #s-wait .rm-board{grid-template-columns:repeat(2,1fr)}
}

/* room chat: a button with an unread badge, a panel (bottom sheet on phones, side panel on wide screens), reactions float up */
.rm-chatbtn{position:relative}
.rm-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;background:#EF4444;color:#fff;font:900 12px/20px var(--font-body);padding:0 5px}
.rm-chat{position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:62vh;display:flex;flex-direction:column;gap:8px;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));
  background:#0F172A;border-top:1px solid #334155;border-radius:20px 20px 0 0;box-shadow:0 -14px 40px rgba(0,0,0,.45);animation:rmUp .25s ease-out;color:#F8FAFC}
@media (min-width:1180px){.rm-chat{left:auto;right:16px;top:calc(env(safe-area-inset-top,0px) + 64px);bottom:16px;width:min(360px,calc((100vw - 560px) / 2 - 32px));max-height:none;border:1px solid #334155;border-radius:20px}}   /* Chromebook (2026-10-31): a panel down the right side, like Royale and Grand Slam */
.rm-chat-h{display:flex;align-items:center;justify-content:space-between}.rm-chat-h b{font:400 18px var(--font-heading)}
.rm-chat-feed{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:90px;display:flex;flex-direction:column;gap:6px}
.rm-chat-feed li{display:flex;gap:7px;align-items:flex-start;font-size:14px;animation:rmIn .25s ease-out}.rm-chat-feed img{width:24px;height:24px;border-radius:50%;flex:none}
.rm-chat-feed .msg{background:#1E293B;border:1px solid #334155;border-radius:4px 14px 14px 14px;padding:5px 10px;max-width:85%;overflow-wrap:anywhere}.rm-chat-feed .msg b{display:block;font-size:11.5px;color:#93C5FD}
.rm-chat-feed li.me{flex-direction:row-reverse}.rm-chat-feed li.me .msg{background:#1D4ED8;border-color:#3B82F6;border-radius:14px 4px 14px 14px}
.rm-chat-feed li.react .msg{background:none;border:0;font-size:22px;padding:0 4px}
.rm-chat-reacts{display:flex;gap:4px;flex-wrap:wrap}.rm-chat-reacts button{border:1px solid #334155;background:#1E293B;border-radius:12px;font-size:20px;padding:4px 8px;cursor:pointer}
.rm-chat-quick{display:flex;flex-wrap:wrap;gap:6px}.rm-chat-quick button{flex:none;border:1px solid #334155;background:#1E293B;color:#E2E8F0;border-radius:999px;padding:6px 11px;font:800 13px var(--font-body);cursor:pointer}
.rm-chat-form{display:flex;gap:6px}.rm-chat-form .rm-in{background:#1E293B;border-color:#334155;color:#fff}
.rm-chat-note{margin:0;font-size:12px;color:#94A3B8}.rm-chat-note a{color:#86EFAC}
.rm-bursts{position:fixed;inset:0;pointer-events:none;z-index:46;overflow:hidden}.rm-bursts span{position:absolute;bottom:80px;font-size:34px;animation:rmFloat 2.6s ease-out forwards}
@keyframes rmFloat{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-40px) scale(1.1)}100%{transform:translateY(-55vh) scale(1);opacity:0}}
.rm-bubble{position:fixed;right:12px;top:calc(62px + env(safe-area-inset-top,0px));z-index:44;display:flex;gap:6px;align-items:center;background:#1E293B;border:1px solid #334155;border-radius:999px;padding:4px 12px 4px 4px;color:#fff;font-size:13px;font-weight:800;max-width:calc(100vw - 32px);animation:rmIn .25s ease-out;pointer-events:none}
.rm-bubble{max-width:calc(100vw - 100px)}.rm-bubble img{width:22px;height:22px;border-radius:50%}.rm-bubble span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.rm-bursts span{animation:none;display:none}}

/* small phones: the room header stays one line (the code shows in the subtitle only) */
@media (max-width:420px){.rm-top{gap:8px;padding-left:10px;padding-right:10px}.rm-top .t b{font-size:15px}.rm-top .t small .rm-sub-word{display:none}.rm-left{font-size:11.5px;padding:3px 8px}}

/* the room code fits a 320 px phone (6 tiles) */
.rm-tile{width:min(46px,calc((100vw - 64px) / 6));height:auto;aspect-ratio:46/54}
@media (max-width:360px){.rm-tile{font-size:24px}.rm-top .rm-left{display:none}}
/* settings rows whose chips need the whole width */
.rm-set.stack{flex-direction:column;align-items:flex-start}
.rm-card .ic{display:inline-block}
/* light mode: labels and white-on-colour text stay readable */
:root[data-theme="light"] .rm-k{color:#64748B}
:root[data-theme="light"] .rm-room .rm-k{color:#93C5FD}
:root[data-theme="light"] .rm-room .rm-name .rm-in{background:rgba(30,58,138,.3);color:#F1F5F9}:root[data-theme="light"] .rm-room .rm-dice{background:rgba(30,58,138,.25)}   /* the join block on the screen that stays dark: the dark values of --bg-input, --text-primary and --bg-card (the settings sheets stay light) */
.rm-card b,.rm-card small,.rm-card .pr{text-shadow:0 1px 2px rgba(0,0,0,.25)}
.rm-card.k-day{background:linear-gradient(150deg,#F59E0B,#D97706)}
/* ---- /join: one page for every code */
.jn{display:grid;gap:18px}
.jn-icons{display:flex;justify-content:center;gap:10px;font-size:34px;height:52px;align-items:center}
.jn-icons span{display:inline-block;animation:rmBob 3s ease-in-out infinite}.jn-icons span:nth-child(2){animation-delay:.4s;font-size:42px}.jn-icons span:nth-child(3){animation-delay:.8s;font-size:42px}.jn-icons span:nth-child(4){animation-delay:1.2s}
.jn-tip{margin:-4px 0 0;text-align:center;color:var(--text-secondary);font-size:13px;font-weight:700}
.jn-card{display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;color:#fff;background:linear-gradient(150deg,#34D399,#059669);box-shadow:0 5px 0 #047857;animation:jnIn .35s cubic-bezier(.3,1.4,.5,1)}
.jn-card>i{font-style:normal;font-size:34px;flex:none}.jn-card div{min-width:0;display:grid;gap:2px}.jn-card .rm-k{color:rgba(255,255,255,.85)!important}
.jn-card b{font:400 19px/1.15 var(--font-heading);overflow-wrap:anywhere}.jn-card small{font-weight:700;font-size:12.5px;opacity:.95}
.jn-card.t-tournament{background:linear-gradient(150deg,#F59E0B,#D97706);box-shadow:0 5px 0 #92400E}.jn-card.t-class{background:linear-gradient(150deg,#F472B6,#DB2777);box-shadow:0 5px 0 #9D174D}
.jn-card.t-battle{background:linear-gradient(150deg,#FB7185,#E11D48);box-shadow:0 5px 0 #9F1239}.jn-card.t-invite{background:linear-gradient(150deg,#A78BFA,#7C3AED);box-shadow:0 5px 0 #5B21B6}
.jn-card.shut{filter:grayscale(.85);opacity:.8}
.jn-card.wait{background:var(--bg-card);color:var(--text-secondary);box-shadow:none;border:1px dashed rgba(148,163,184,.5);font-weight:800;justify-content:center}
.jn-card b,.jn-card small{text-shadow:0 1px 2px rgba(0,0,0,.25)}
.jn-spin{width:16px;height:16px;border-radius:50%;border:3px solid rgba(148,163,184,.4);border-top-color:#3B82F6;animation:jnSpin .8s linear infinite}
.jn-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.jn-kind{display:grid;gap:2px;padding:12px;border-radius:16px;text-decoration:none;color:var(--text-primary);background:var(--bg-card);border:1px solid rgba(148,163,184,.3);transition:transform .2s}
.jn-kind:hover{transform:translateY(-2px)}.jn-kind i{font-style:normal;font-size:24px}.jn-kind b{font:400 16px var(--font-heading)}.jn-kind span{color:var(--text-secondary);font-size:12.5px;font-weight:700;line-height:1.35}
.jn-make{display:grid;grid-template-columns:1fr 1fr;gap:8px}.jn-make .rm-btn{font-size:15px}
@media (max-width:360px){.jn-make{grid-template-columns:1fr}}
@keyframes jnIn{from{transform:translateY(10px) scale(.97);opacity:0}}@keyframes jnSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.jn-icons span,.jn-card{animation:none}}
/* deeper card colours so white text reads well in both themes */
.rm-card.k-single{background:linear-gradient(150deg,#10B981,#047857)}.rm-card.k-h2{background:linear-gradient(150deg,#3B82F6,#1D4ED8)}
.rm-card.k-week{background:linear-gradient(150deg,#8B5CF6,#6D28D9)}.rm-card.k-tourney{background:linear-gradient(150deg,#F43F5E,#BE123C)}
.rm-card.k-day{background:linear-gradient(150deg,#D97706,#B45309)}
.rm-card .pr{background:rgba(15,23,42,.28)}

/* ---- team play (groups / class vs class); every team carries its colour in --tc */
.rm-tp{background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.25);border-radius:20px;padding:14px;display:grid;gap:12px}
.tp-h b{display:block;font:400 19px var(--font-heading);color:#fff}.tp-h small{color:#94A3B8;font-weight:700;font-size:12.5px}
.tp-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tp-opt{display:grid;gap:2px;justify-items:center;text-align:center;padding:12px 6px;border-radius:16px;border:2px solid #334155;background:rgba(255,255,255,.04);color:#E2E8F0;cursor:pointer;font:inherit;transition:transform .15s,border-color .2s,background .2s}
.tp-opt i{font-style:normal;font-size:28px;line-height:1.1}.tp-opt b{font:400 14.5px/1.15 var(--font-heading)}.tp-opt span{font-size:11px;font-weight:700;color:#94A3B8;line-height:1.25}
.tp-opt:hover:not(:disabled){transform:translateY(-2px)}.tp-opt.on{border-color:#3B82F6;background:linear-gradient(160deg,rgba(59,130,246,.3),rgba(59,130,246,.08));box-shadow:0 0 0 4px rgba(59,130,246,.18)}
.tp-opt.on i{animation:rmBob 2.4s ease-in-out infinite}.tp-opt:disabled{opacity:.4;cursor:not-allowed}
.tp-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.tp-chips{display:flex;flex-wrap:wrap;gap:6px}
.tp-chips button{border:2px solid #475569;background:transparent;color:#E2E8F0;border-radius:999px;padding:7px 13px;font:800 13px var(--font-body);cursor:pointer}.tp-chips button.on{background:#3B82F6;border-color:#3B82F6;color:#fff}
.tp-note{color:#93C5FD;font-size:12.5px;font-weight:800}.tp-lock{display:flex;gap:8px;align-items:center;color:#CBD5E1;font-weight:700;font-size:13px;cursor:pointer}
.tp-tools{display:flex;gap:8px;flex-wrap:wrap}.tp-tools button{border:1px solid #475569;background:rgba(255,255,255,.06);color:#E2E8F0;border-radius:12px;padding:8px 12px;font:800 13px var(--font-body);cursor:pointer}
.tp-names{display:grid;gap:8px}.tp-names label{display:flex;gap:8px;align-items:center;border-left:5px solid var(--tc);padding-left:8px}.tp-names i{font-style:normal;font-size:20px}
.tp-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tp-side{display:grid;justify-items:center;gap:4px;padding:16px 8px;border-radius:18px;border:3px solid var(--tc);background:color-mix(in srgb,var(--tc) 18%,transparent);color:#fff;cursor:pointer;font:inherit;transition:transform .15s}
.tp-side i{font-style:normal;font-size:38px}.tp-side b{font:400 19px var(--font-heading)}.tp-side span{font-size:12px;font-weight:800;opacity:.9}
.tp-side:hover{transform:translateY(-3px)}.tp-side.on{background:var(--tc);box-shadow:0 6px 0 rgba(0,0,0,.3),0 0 0 4px color-mix(in srgb,var(--tc) 35%,transparent)}
.tp-you{display:flex;gap:12px;align-items:center;justify-content:center;padding:6px;color:#fff}.tp-you i{font-style:normal;font-size:40px;animation:rmBob 3s ease-in-out infinite}
.tp-you small{display:block;color:#94A3B8;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.tp-you b{font:400 24px var(--font-heading);color:var(--tc,#fff)}
.tp-move{display:grid;gap:8px;margin:8px 0}
/* lobby: team columns */
.rm-players.teamed{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px}
.tm-col{border-radius:16px;background:color-mix(in srgb,var(--tc) 14%,rgba(15,23,42,.6));border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);padding:8px;display:grid;gap:6px;align-content:start;min-width:0}
.tm-h{display:flex;align-items:center;gap:6px;color:#fff;min-width:0}.tm-h i{font-style:normal;font-size:20px}.tm-h b{font:400 15px var(--font-heading);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-h span{flex:none;background:var(--tc);border-radius:999px;padding:1px 8px;font-weight:900;font-size:12px}
.tm-list{display:flex;flex-wrap:wrap;gap:4px}.tm-empty{color:#94A3B8;font-weight:700}
.tm-pl{display:inline-flex;align-items:center;gap:5px;max-width:100%;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:#F1F5F9;padding:3px 9px 3px 3px;font:800 12px var(--font-body);cursor:pointer;animation:jnIn .3s ease-out}
.tm-pl img{width:22px;height:22px;border-radius:50%;background:#334155;flex:none}.tm-pl.me{background:#fff;color:#0F172A}.tm-pl.off{opacity:.55}
/* while playing: team scores */
.rm-tbar{border-radius:14px;background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.2);padding:8px 10px;display:grid;gap:5px}
.rm-tbar small{color:#94A3B8;font-weight:700;font-size:11.5px;text-align:center}
.tg-names{display:flex;justify-content:space-between;gap:8px;font-weight:900;font-size:13px}.tg-names span{color:var(--tc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tg-names b{color:#fff}
.tg-rope{position:relative;display:flex;height:12px;border-radius:6px;overflow:hidden;background:#1E293B}.tg-rope i{display:block;height:100%;transition:width .8s cubic-bezier(.3,1.3,.5,1)}
.tg-rope em{position:absolute;top:-3px;bottom:-3px;width:4px;margin-left:-2px;background:#fff;border-radius:2px;box-shadow:0 0 8px #fff;transition:left .8s cubic-bezier(.3,1.3,.5,1)}
.tl-row{display:grid;grid-template-columns:18px minmax(0,1fr) minmax(40px,30%) 34px;gap:6px;align-items:center;font-size:12.5px;font-weight:800;color:#E2E8F0}
.tl-row .r{color:#94A3B8}.tl-row .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tl-row .b{height:8px;border-radius:4px;background:#1E293B;overflow:hidden}.tl-row .b i{display:block;height:100%;background:var(--tc);border-radius:4px;transition:width .8s ease}
.tl-row b{text-align:right;font-variant-numeric:tabular-nums}.tl-row.me{background:color-mix(in srgb,var(--tc) 22%,transparent);border-radius:8px;padding:2px 4px;margin:0 -4px}
.rm-tbar.big{padding:14px}.rm-tbar.big .tg-names{font-size:17px}.rm-tbar.big .tg-rope{height:22px;border-radius:11px}.rm-tbar.big .tl-row{font-size:15px;grid-template-columns:24px minmax(0,1fr) 40% 44px}.rm-tbar.big .tl-row .b{height:14px}
/* results: team podium + stars */
.rm-tres{display:grid;gap:12px}
.tr-pod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end;height:220px}
.tr-step{height:var(--h);display:grid;grid-template-rows:auto auto auto 1fr;justify-items:center;text-align:center;color:#fff;min-width:0;animation:trUp .7s cubic-bezier(.3,1.4,.5,1) both}
.tr-step i{font-style:normal;font-size:30px}.tr-step b{font:400 15px/1.1 var(--font-heading);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tr-step small{font-size:11px;font-weight:800;color:#CBD5E1}
.tr-step .bar{width:100%;margin-top:6px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,var(--tc),color-mix(in srgb,var(--tc) 60%,#000));display:grid;place-items:start center;padding-top:6px;font:400 26px var(--font-heading);min-height:36px}
.tr-stars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px}
.tr-star{display:flex;gap:8px;align-items:center;border-radius:14px;padding:8px;background:color-mix(in srgb,var(--tc) 18%,rgba(15,23,42,.6));border:1px solid color-mix(in srgb,var(--tc) 50%,transparent);min-width:0}
.tr-star img{width:34px;height:34px;border-radius:50%;background:#334155;flex:none}.tr-star div{min-width:0}.tr-star b{display:block;color:#fff;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tr-star small{color:#CBD5E1;font-weight:700;font-size:11.5px}
@keyframes trUp{from{transform:translateY(40px);opacity:0}}
@media (max-width:360px){.tp-opt span{display:none}.tp-opt b{font-size:13px}}
@media (prefers-reduced-motion:reduce){.tr-step,.tm-pl,.tp-opt.on i,.tp-you i{animation:none}}
/* projector (teacher): bigger team bars */
@media (min-width:900px){body.rm-proj .rm-tbar.big .tg-names{font-size:24px}body.rm-proj .rm-tbar.big .tg-rope{height:34px;border-radius:17px}body.rm-proj .rm-tbar.big .tl-row{font-size:20px}body.rm-proj .rm-tbar.big .tl-row .b{height:20px}body.rm-proj #s-lobby .rm-tp{grid-column:2}}
.tr-score{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;font:400 20px var(--font-heading)}.tr-score span{color:var(--tc)}.tr-score b{color:#fff;font-size:26px}.tr-score em{font-style:normal;color:#94A3B8}
.tr-why{display:block;text-align:center;color:#94A3B8;font-weight:700;font-size:12px;margin-top:-6px}
#rm-sheet .rm-tp{background:#0F172A;border:0}
@media (min-width:900px){body.rm-proj .rm-players.teamed{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}body.rm-proj .tm-pl{font-size:14px}body.rm-proj .tm-pl img{width:28px;height:28px}}
/* power-ups in rooms */
.rm-pw{display:flex;justify-content:center;gap:6px;margin:2px 0}
.rm-pw button{border:1px solid #475569;background:rgba(255,255,255,.07);color:#E2E8F0;border-radius:999px;padding:6px 11px;font:800 12.5px var(--font-body);cursor:pointer}
.rm-pw button b{color:#FCD34D;margin-left:2px}.rm-pw button:disabled{opacity:.5}
.rm-pwinfo{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:#E2E8F0}
.rm-pwinfo i{width:1px;height:14px;background:#475569}.rm-pwinfo b{color:#FCD34D;letter-spacing:.1em}
.rm-pwinfo span{display:inline-grid;place-items:center;width:18px;height:20px;border-radius:4px;background:#1E293B;margin:0 1px;font-size:11px}.rm-pwinfo span.on{background:#16A34A;color:#fff}
#keyboard .key[data-state="hinted"]{box-shadow:inset 0 0 0 3px #F59E0B}
/* setup page: your cards, quick-start subtitles, the tournament header */
.rm-mycards{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 4px;font-size:12.5px;font-weight:800;color:var(--text-secondary)}
.rm-mycards b{border-radius:999px;padding:3px 9px;color:#fff;background:#475569}.rm-mycards b.k-single{background:#059669}.rm-mycards b.k-h2{background:#2563EB}.rm-mycards b.k-day{background:#B45309}.rm-mycards b.k-week{background:#6D28D9}.rm-mycards b.k-tourney{background:#BE123C}.rm-mycards b.k-class{background:#BE185D}
.rm-mycards em{font-style:normal}.rm-mycards a{margin-left:auto;color:#3B82F6;font-weight:900;text-decoration:none}
.rm-preset span{display:grid;gap:1px;line-height:1.15}.rm-preset small{font-weight:700;font-size:11.5px;color:var(--text-secondary)}
.rm-tourhead{display:flex;gap:12px;align-items:flex-start;border-radius:16px;padding:12px 14px;background:linear-gradient(150deg,rgba(245,158,11,.18),rgba(245,158,11,.05));border:1px solid rgba(245,158,11,.4)}
.rm-tourhead i{font-style:normal;font-size:30px}.rm-tourhead b{display:block;font:400 17px var(--font-heading);color:var(--text-primary)}.rm-tourhead span{color:var(--text-secondary);font-size:13.5px;line-height:1.45}
#rm-tcard button{border:0;border-radius:999px;padding:7px 14px;background:linear-gradient(180deg,#FBBF24,#F59E0B);color:#3B2300;font:900 13px var(--font-body);cursor:pointer}
a.rm-mode{color:var(--text-primary)}
.rm-hostbar{grid-template-columns:1fr auto auto auto!important}
/* the word card (meaning of a revealed word) */
.rm-defbox{display:grid;justify-items:center;margin-top:8px}
.rm-def{max-width:520px;text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(148,163,184,.3);border-left:4px solid #22C55E;border-radius:12px;padding:10px 12px;color:#E2E8F0;animation:jnIn .35s ease-out}
.rm-def b{font:400 18px var(--font-heading);letter-spacing:.06em;color:#fff;margin-right:8px}.rm-def i{font-style:italic;color:#93C5FD;font-size:13px;font-weight:700}
.rm-def p{margin:4px 0 0;font-size:14.5px;line-height:1.45;color:#E2E8F0}.rm-def small{display:block;margin-top:4px;color:#94A3B8;font-style:italic;font-size:13px}
.rm-wordsres{display:grid;gap:8px}.rm-wordsres .rm-def{max-width:none}
.rm-upsell{margin:2px 0 0;text-align:center;color:#CBD5E1;font-size:13.5px;font-weight:700}.rm-upsell a{color:#FCD34D}
.tp-sides.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.tp-sides.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.tp-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.tp-opts{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* student class game + teacher portal */
.cg-head{display:flex;gap:12px;align-items:center}.cg-head>span{font-size:44px;animation:rmBob 3s ease-in-out infinite}
.cg-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.tpo-room{background:var(--bg-card);border:1px solid rgba(148,163,184,.3);border-radius:18px;padding:14px;display:grid;gap:10px}
.tpo-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.tpo-top b{display:block;font:400 19px var(--font-heading);color:var(--text-primary)}.tpo-top small{color:var(--text-secondary);font-weight:700;font-size:13px}
.tpo-top code{font:400 24px var(--font-heading);letter-spacing:.12em;color:#22C55E}
.tpo-act{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tpo-act .rm-btn{font-size:14.5px;padding:10px 6px}
@media (max-width:420px){.tpo-act{grid-template-columns:1fr}}
.tpo-rep summary{cursor:pointer;font-weight:900;color:#3B82F6}
.tpo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin-top:10px}
.tpo-w{display:grid;grid-template-columns:72px 1fr auto;gap:8px;align-items:center;margin:5px 0;font-size:13.5px}.tpo-w b{letter-spacing:.06em;color:var(--text-primary)}
.tpo-w .bar{height:8px;border-radius:4px;background:rgba(148,163,184,.25);overflow:hidden}.tpo-w .bar i{display:block;height:100%}.tpo-w small{color:var(--text-secondary);font-weight:800}
.tpo-s{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dashed rgba(148,163,184,.3);font-size:13.5px;color:var(--text-primary)}.tpo-s small{color:var(--text-secondary);font-weight:800}
.tpo-w small{white-space:nowrap}

/* late joiner: watching a game that already started */
.rm-latenote{display:grid;gap:2px;text-align:left;border-radius:14px;padding:10px 12px;margin-bottom:10px;background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.55);color:var(--text-primary);font-size:14px}.rm-latenote b{font-weight:900}.rm-latenote span{color:var(--text-secondary);font-weight:700;font-size:13px}

/* form placeholders read as hints, not filled-in values */
.rm-in::placeholder,.ta-in::placeholder,input.rm-in::placeholder,textarea::placeholder{color:var(--text-tertiary);font-weight:500;opacity:.75}

/* ── Every screen size (2026-11-03). Nothing moves on the sizes where it fitted ── */
/* the page never gets wider than the phone: a long team name used to set the column's width, and cut everything at the right edge */
.rm-main,.rm-scr{grid-template-columns:minmax(0,1fr)}
.rm-tbar{grid-template-columns:minmax(0,1fr)}.tg-names span{min-width:0}
@media (max-width:420px){.rm-tbar.big .tg-names{font-size:14px}}
/* lobby: Start stays in view at the bottom of the screen while the players and team panel scroll (a flex column: sticky cannot leave a grid row).
   It sits where it always did once you reach it. */
.rm-room #s-lobby{display:flex;flex-direction:column}.rm-room #s-lobby>*{min-width:0}
#rm-hostbar{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:6}
#rm-hostbar .rm-iconbtn{background:#1E293B}
#rm-hostbar::before{content:'';position:absolute;inset:-8px -8px calc(-8px - env(safe-area-inset-bottom,0px));z-index:-1;border-radius:22px;background:rgba(15,23,42,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}   /* the list scrolling behind the bar does not show between the buttons; same glass as the top bar, on every paid stage too */
@media (max-width:340px){.rm-hostbar{gap:6px}.rm-hostbar .rm-iconbtn{width:44px}#rm-start{font-size:15.5px;line-height:1.1;padding:12px 4px}}
/* a teacher's projector: same two columns (code left, class right) built so Start can stay in view there too */
@media (min-width:900px){body.rm-proj #s-lobby{display:flow-root}body.rm-proj #s-lobby>.rm-codebox{float:left;width:380px}body.rm-proj #s-lobby>:not(.rm-codebox){margin-left:408px}body.rm-proj #s-lobby>:not(.rm-codebox)+*{margin-top:12px}
  /* the live board: as many columns as fit, slimmer rows for a full class, so the whole class shows without scrolling */
  body.rm-proj:has(#s-wait:not([hidden])) .rm-main{max-width:min(96vw,1760px)}
  body.rm-proj #s-wait .rm-board{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:6px 10px}body.rm-proj #s-wait .rm-board:not(:has(>.rm-brow:nth-child(6))){max-width:760px;width:100%;margin-inline:auto}body.rm-proj #s-wait .rm-board>:not(.rm-brow){grid-column:1/-1}
  body.rm-proj #s-wait .rm-board:has(>.rm-brow:nth-child(16)) .rm-brow{padding:2px 8px;gap:6px}body.rm-proj #s-wait .rm-board:has(>.rm-brow:nth-child(16)) .rm-brow img{width:24px;height:24px}body.rm-proj #s-wait .rm-board:has(>.rm-brow:nth-child(16)) .rm-brow .dots i{width:9px;height:9px}}
/* neighbouring long names stay in their own column */
.rm-pl{min-width:0}.rm-pl small{max-width:100%}
/* chat: guests can always reach the last phrases and the sign-up link */
.rm-chat{overflow-y:auto;overscroll-behavior:contain}
@media (max-width:1179px) and (max-height:700px){.rm-chat{gap:6px;padding-top:8px}.rm-chat-feed{min-height:44px}.rm-chat-quick{flex:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-12px;padding-inline:12px}.rm-chat-quick::-webkit-scrollbar{display:none}}
/* a teacher's chat panel: the class makes room for it instead of being hidden behind it */
@media (min-width:1180px) and (max-width:2520px){body.rm-proj:has(#rm-chat:not([hidden])) .rm-main{max-width:none;margin:0 calc(min(360px,(100vw - 560px) / 2 - 32px) + 24px) 0 0}}
/* full room on a small screen: room.js adds these while a word is on when the tiles would get too small (see fit) */
body.in-play .rm-main{padding-bottom:8px}   /* the word fits exactly, so the page does not drag under a thumb */
body.in-play.rm-tight .rm-main{padding:6px 14px 8px;gap:6px}body.in-play.rm-tight #s-play{gap:4px}
body.in-play.rm-tight .rm-clue{padding:3px 8px;font-size:12.5px;line-height:1.25}
body.in-play.rm-tight .rm-tbar{padding:4px 8px;gap:3px}body.in-play.rm-tight .rm-tbar small{display:none}body.in-play.rm-tight .tg-rope{height:8px}
body.in-play.rm-tight .rm-top{padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px}
body.in-play.rm-tight2 #rm-mini,body.in-play.rm-tight2 .rm-wordno small{display:none}body.in-play.rm-tight2 .rm-pw{margin:0}body.in-play.rm-tight2 .rm-playhead .rm-timer{font-size:20px}
/* school Chromebook: the tiles get the room (the keys were far taller than a window this short needs) */
@media (max-height:700px) and (min-width:800px){.rm-room{--key-height:36px}}
/* a phone on its side: the board beside the keyboard, no scrolling between guesses */
@media (orientation:landscape) and (max-height:480px){
  .rm-room{--key-height:clamp(30px,11dvh,44px)}
  body.in-play .rm-top{padding-top:calc(4px + env(safe-area-inset-top,0px));padding-bottom:4px}
  body.in-play .rm-main{max-width:940px;padding:2px 14px 6px;gap:0}
  .rm-room #s-play{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto auto auto 1fr;grid-template-areas:'head head' 'board clue' 'board tbar' 'board info' 'board pw' 'board keys';column-gap:16px;row-gap:4px;align-items:start}
  .rm-room #s-play>.rm-playhead{grid-area:head}.rm-room #s-play>.rm-clue{grid-area:clue}.rm-room #s-play>.rm-tbar{grid-area:tbar}.rm-room #s-play>.rm-pwinfo{grid-area:info}.rm-room #s-play>.rm-pw{grid-area:pw}
  .rm-room #s-play>.grid{grid-area:board;align-self:start}.rm-room #s-play>.keyboard{grid-area:keys;align-self:center;max-width:none;margin:0}
  .rm-room #rm-mini{display:none}.rm-timer{font-size:20px}
}
/* a full class's results: the buttons right under the podium */
#s-results>:empty{display:none}   /* a closed room has no winner, podium or lists: its buttons come up under the heading */
#s-results.rm-many>#rm-res-k,#s-results.rm-many>#rm-win{order:-3}#s-results.rm-many>#rm-tres,#s-results.rm-many>#rm-podium{order:-2}#s-results.rm-many>#rm-res-actions{order:-1}
/* two players or two teams: the podium is centred (the empty third place is still in the page) */
.rm-podium:has(>.p2):not(:has(>.p3)){grid-template-columns:1fr 1fr;max-width:66%;margin-inline:auto}.rm-podium:has(>.p2):not(:has(>.p3))>div:empty{display:none}
.tr-pod:has(>.tr-step:nth-child(2)):has(>div:empty:nth-child(3)){grid-template-columns:1fr 1fr;max-width:66%;margin-inline:auto;width:100%}.tr-pod:has(>.tr-step:nth-child(2))>div:empty:nth-child(3){display:none}
/* the hint row stays one line per button */
.rm-pw button{white-space:nowrap}
@media (max-width:340px){.rm-pw{gap:4px}.rm-pw button{padding:5px 7px;font-size:11.5px}}
/* the three step bars line up even when one label wraps */
.rm-steps{align-items:start}
/* room for a finger, same look */
.rm-steps button,.tm-pl,.rm-mycards a,.rm-chat-note a{position:relative}
.rm-steps button::after{content:'';position:absolute;inset:-5px 0}.tm-pl::after{content:'';position:absolute;inset:-4px 0}.rm-mycards a::after,.rm-chat-note a::after{content:'';position:absolute;inset:-10px -4px}
.rm-sw::before{content:'';position:absolute;inset:-6px -2px}
/* the room's name gets the header on a phone while a word is on (the time left shows in the lobby) */
@media (max-width:420px){body.in-play .rm-top .rm-left,body:has(#s-wait:not([hidden])) .rm-top .rm-left{display:none}}
/* a bracket row on the smallest phones: the dot says live, the names keep the room */
@media (max-width:360px){.rm-livew{display:none}}