.play{max-width:1160px;margin:0 auto;padding:12px 20px 24px}
/* ============ guide: two prominent CTAs, two modals ============ */
.gd-cta{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
.gd-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--bd);font-size:0.86rem;font-weight:800;
  letter-spacing:0.2px;padding:11px 18px;border-radius:3px;cursor:pointer;transition:all .18s;
  border:1px solid transparent;white-space:nowrap;line-height:1.15}
.gd-btn .gd-ic{font-size:1rem;line-height:1}
.gd-how{background:var(--sz-blue);border-color:var(--sz-blue-hi);color:#fff;
  box-shadow:0 3px 14px rgba(42,142,135,0.42)}
.gd-how:hover{background:var(--sz-blue-hi);transform:translateY(-1px);box-shadow:0 5px 20px rgba(42,142,135,0.55)}
.gd-odds{background:var(--sz-amber);border-color:var(--sz-amber-hi);color:#0a1123;
  box-shadow:0 3px 14px rgba(213,173,73,0.34)}
.gd-odds:hover{background:var(--sz-amber-hi);transform:translateY(-1px);box-shadow:0 5px 20px rgba(213,173,73,0.46)}
.gd-ov{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;
  padding:22px;background:rgba(7,12,26,0.82)}
.gd-ov.show{display:flex}
.gd-card{width:min(880px,100%);max-height:min(86vh,860px);display:flex;flex-direction:column;
  background:var(--sz-bg2);border:1px solid var(--sz-edge);border-radius:3px;overflow:hidden;
  box-shadow:0 24px 70px rgba(5,9,18,0.62)}
.gd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--sz-line2);flex-shrink:0}
.gd-head h3{display:flex;align-items:center;gap:10px;font-size:1.08rem;margin:0}
.gd-x{background:transparent;border:none;color:var(--sz-mute);font-size:1.6rem;line-height:1;
  cursor:pointer;padding:0 4px}
.gd-x:hover{color:var(--sz-amber)}
.gd-tabs{display:flex;gap:6px;padding:12px 20px 0;flex-shrink:0}
.gd-tab{flex:1;font-family:var(--bd);font-size:0.82rem;font-weight:700;padding:9px 12px;border-radius:3px;
  cursor:pointer;background:transparent;border:1px solid var(--sz-edge);color:var(--sz-mute);transition:all .16s}
.gd-tab:hover{border-color:var(--sz-edge-hi);color:var(--sz-amber)}
.gd-tab.on{background:var(--sz-blue);border-color:var(--sz-blue-hi);color:#fff}
.gd-scroll{overflow-y:auto;padding:4px 20px 8px;flex:1;min-height:0}
.gd-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;
  border-top:1px solid var(--sz-line2);flex-shrink:0}
.gd-body{padding:0;max-width:none}
.gd-body h2{font-size:1.04rem;margin:20px 0 8px}
.gd-body h2:first-child{margin-top:8px}
.gd-body h3{font-size:0.95rem}
.gd-body p{font-size:0.92rem}
.gd-body table{font-size:0.8rem}
.gd-mode{background:rgba(42,142,135,0.16);border-color:var(--sz-edge-hi);color:var(--sz-amber-hi)}
.gd-mode:hover{background:rgba(213,173,73,0.16);transform:translateY(-1px)}
.md-card{width:min(560px,100%)}
.md-opt{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;margin:12px 0;
  padding:15px 16px;border-radius:3px;background:var(--sz-bg3);border:1px solid var(--sz-edge);
  cursor:pointer;transition:all .16s;font-family:var(--bd)}
.md-opt:hover{border-color:var(--sz-edge-hi)}
.md-opt.on{border-color:var(--sz-amber);background:rgba(213,173,73,0.10)}
.md-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--sz-line);flex-shrink:0;margin-top:2px;
  position:relative;transition:all .16s}
.md-opt.on .md-dot{border-color:var(--sz-amber)}
.md-opt.on .md-dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--sz-amber)}
.md-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.md-txt b{font-size:0.98rem;color:var(--sz-ink)}
.md-txt span{font-size:0.87rem;color:var(--sz-mute);line-height:1.6}
.md-note{font-size:0.82rem;color:var(--sz-mute);margin:4px 2px 8px}
.edu-part{margin-bottom:34px}
.edu-part h2{display:flex;align-items:center;gap:10px}
@media(max-width:700px){
  .gd-cta{width:100%}
  .gd-btn{flex:1;justify-content:center;padding:12px 10px;font-size:0.8rem}
  .gd-ov{padding:0}
  .gd-card{max-height:100vh;height:100%;border-radius:0;border:none}
}
.play-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.play-title{display:flex;align-items:baseline;gap:11px;min-width:0}
.play-title h1{font-size:1.3rem;margin:0}
.play-title .fam{font-family:var(--mn);font-size:0.68rem;color:var(--sz-amber);letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
.play-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.entry-strip{font-family:var(--mn);font-size:0.74rem;color:var(--sz-mute);background:rgba(42,142,135,0.14);
  border:1px solid var(--sz-line);border-radius:3px;padding:6px 12px;margin-bottom:9px}
.entry-strip b{color:var(--sz-amber-hi)}
.stage-wrap{display:grid;grid-template-columns:1fr 268px;gap:14px;align-items:start}
/* grid items default to min-width:auto, which lets a wide child push the
   whole column past the viewport. Every item here is allowed to shrink. */
.stage-wrap>*{min-width:0;max-width:100%}
.side>*{min-width:0;max-width:100%}
.stage>*{max-width:100%}
.cols{max-width:100%;flex-wrap:nowrap}
.stage{background:var(--sz-bg2);border:1px solid var(--sz-line);border-radius:3px;padding:52px 14px 14px;position:relative;min-height:320px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px}
.side{background:var(--sz-bg2);border:1px solid var(--sz-line);border-radius:3px;padding:15px}
.side h4{font-family:var(--hd);font-size:0.78rem;letter-spacing:1.3px;text-transform:uppercase;color:var(--sz-amber);margin-bottom:11px}
.pts-box{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:3px;
  background:var(--sz-bg);border:1px solid var(--sz-line2);margin-bottom:12px}
.pts-box span{font-size:0.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--sz-mute)}
.pts-box b{font-family:var(--mn);font-size:1.05rem;color:var(--sz-amber-hi)}
.entry-row{display:flex;gap:6px;align-items:center;margin-bottom:9px;min-width:0}
.e-btn{width:32px;height:32px;flex-shrink:0;border-radius:3px;border:1px solid var(--sz-line);background:var(--sz-bg);
  color:var(--sz-ink);font-size:1.05rem;cursor:pointer;line-height:1}
.e-btn:hover{border-color:var(--sz-amber);color:var(--sz-amber)}
.e-val{flex:1;width:100%;min-width:0;background:var(--sz-bg);border:1px solid var(--sz-amber-dim);border-radius:3px;
  font-family:var(--mn);font-size:1rem;font-weight:600;color:var(--sz-amber-hi);text-align:center;padding:6px;
  -moz-appearance:textfield}
.e-val::-webkit-outer-launch-button,.e-val::-webkit-inner-launch-button{-webkit-appearance:none;margin:0}
.e-quick{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:13px}
.e-quick button{flex:1;min-width:42px;padding:5px 4px;border-radius:3px;border:1px solid var(--sz-line);
  background:transparent;color:var(--sz-mute);font-family:var(--mn);font-size:0.7rem;cursor:pointer}
.e-quick button.active,.e-quick button:hover{border-color:var(--sz-amber);color:var(--sz-amber)}
.act{display:block;width:100%;margin-top:9px;padding:12px;border-radius:3px;border:none;cursor:pointer;
  font-family:var(--hd);font-size:0.95rem;font-weight:700;color:#0a1123;
  background:linear-gradient(135deg,var(--sz-amber-hi),var(--sz-amber));box-shadow:0 5px 16px rgba(213,173,73,0.3)}
.act:hover{transform:translateY(-1px)}
.act:disabled{opacity:0.45;cursor:not-allowed;transform:none}
.act.sec{background:transparent;border:1px solid var(--sz-line);color:var(--sz-ink);box-shadow:none;font-size:0.85rem;padding:9px}
.act.sec:hover{border-color:var(--sz-amber);color:var(--sz-amber)}
.status{font-family:var(--mn);font-size:0.74rem;color:var(--sz-mute);text-align:center;min-height:18px}
.res-banner{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:6;padding:9px 22px;border-radius:3px;
  font-family:var(--hd);font-weight:700;font-size:1rem;display:none;white-space:nowrap;box-shadow:0 6px 20px rgba(5,9,18,0.45)}
.res-banner.show{display:block}
.res-banner.w{background:linear-gradient(135deg,#34c77b,#1f9457);color:#fff;animation:rbW .5s ease-out}
.res-banner.l{background:linear-gradient(135deg,#e5544a,#a83229);color:#fff;animation:rbL .4s ease-out}
.res-banner.p{background:var(--sz-bg3);color:var(--sz-mute);border:1px solid var(--sz-line)}
@keyframes rbW{0%{transform:translateX(-50%) scale(0.7);opacity:0}60%{transform:translateX(-50%) scale(1.08)}100%{transform:translateX(-50%) scale(1);opacity:1}}
@keyframes rbL{0%,100%{transform:translateX(-50%)}25%{transform:translateX(-54%)}75%{transform:translateX(-46%)}}
.gate{background:linear-gradient(135deg,rgba(42,142,135,0.2),rgba(42,142,135,0.06));
  border:1px solid var(--sz-blue-hi);border-radius:3px;padding:30px 26px;text-align:center;max-width:660px;margin:0 auto}
.gate-mark{display:inline-block;font-family:var(--mn);font-size:0.6rem;letter-spacing:1.6px;padding:4px 10px;
  border-radius:3px;background:rgba(56,203,194,0.24);border:1px solid var(--sz-blue-hi);color:#8fede7;margin-bottom:14px}
.gate h2{font-size:1.35rem;margin-bottom:10px}
.gate p{font-size:0.92rem;color:var(--sz-mute);line-height:1.7;margin-bottom:20px}
.gate-btns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.back-bottom{display:block;width:100%;margin-top:16px;text-align:center;font-family:var(--hd);font-size:1rem;
  font-weight:700;color:#0a1123;padding:14px 22px;border-radius:3px;
  background:linear-gradient(135deg,var(--sz-amber-hi),var(--sz-amber));box-shadow:0 5px 18px rgba(213,173,73,0.32)}
.back-bottom:hover{transform:translateY(-2px)}

/* --- refill: opened only by a click, light tint, never blurred --- */
.rf-ov{position:fixed;inset:0;background:rgba(42,142,135,0.18);z-index:135;display:none;
  align-items:flex-start;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 20px) 16px 20px}
.rf-ov.show{display:flex}
.rf-card{background:var(--sz-bg2);border:1px solid var(--sz-amber);border-radius:3px;padding:26px 24px;max-width:390px;width:100%;
  text-align:center;max-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 40px);overflow-y:auto}
.rf-card h3{font-size:1.15rem;margin-bottom:9px}
.rf-card p{font-size:0.88rem;color:var(--sz-mute);line-height:1.62;margin-bottom:17px}

/* --- dial --- */
.dial-wrap{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;width:100%}
.dial-stage{width:238px;max-width:238px;position:relative}
.dial-out{font-family:var(--mn);font-size:0.8rem;color:var(--sz-mute);text-align:center;margin-top:7px}
.dial-out b{color:var(--sz-amber-hi);font-size:1.1rem}
.pad{display:grid;gap:4px;grid-template-columns:repeat(6,1fr);max-height:200px;overflow-y:auto;padding-right:3px}
.pad button{position:relative;height:34px;border-radius:3px;border:1px solid var(--sz-line2);cursor:pointer;
  font-family:var(--mn);font-size:0.72rem;font-weight:600;color:#fff;padding:0}
.pad button.a{background:rgba(213,173,73,0.26);border-color:var(--sz-amber-dim)}
.pad button.b{background:rgba(42,142,135,0.34);border-color:var(--sz-blue)}
.pad button:hover{outline:1px solid var(--sz-amber)}
.pad button .chip{position:absolute;top:-4px;right:-4px;background:var(--sz-amber);color:#0a1123;font-size:0.55rem;
  font-weight:800;border-radius:999px;padding:1px 4px;min-width:15px}
.outside{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-top:7px}
.outside button{position:relative;padding:8px 4px;border-radius:3px;border:1px solid var(--sz-line);background:var(--sz-bg);
  color:var(--sz-ink);font-size:0.76rem;font-weight:600;cursor:pointer}
.outside button:hover{border-color:var(--sz-amber);color:var(--sz-amber)}
.outside button .chip{position:absolute;top:-5px;right:-5px;background:var(--sz-amber);color:#0a1123;font-size:0.55rem;
  font-weight:800;border-radius:999px;padding:1px 5px}

/* --- symbol --- */
.cols{display:flex;gap:5px;justify-content:center;--ch:56;--cg:5}
.col{overflow:hidden;border-radius:3px;background:var(--sz-bg);border:1px solid var(--sz-line2);
  height:calc(var(--ch)*1px*var(--rows) + var(--cg)*1px*(var(--rows) - 1));box-sizing:content-box}
.strip{display:flex;flex-direction:column;gap:calc(var(--cg)*1px);will-change:transform}
.cell{height:calc(var(--ch)*1px);width:calc(var(--ch)*1px);display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--ch)*0.52px);box-sizing:border-box;border-radius:3px;background:var(--sz-bg3);flex-shrink:0}
.cell.hit{background:rgba(213,173,73,0.3);box-shadow:inset 0 0 0 2px var(--sz-amber)}

/* --- cards --- */
.pc{width:64px;height:92px;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--hd);font-weight:700;font-size:1.5rem;border:2px solid rgba(5,9,18,0.25);user-select:none}
.pc.c0{background:linear-gradient(150deg,#d5ad49,#b48d2b);color:#171309}
.pc.c1{background:linear-gradient(150deg,#38cbc2,#2a8e87);color:#fff}
.pc.c2{background:linear-gradient(150deg,#6f695e,#48443c);color:#fff}
.pc.c3{background:linear-gradient(150deg,#eceadf,#c6c3b5);color:#16254d}
@keyframes szPcIn{
  0%  {opacity:0;transform:translate(18px,-32px) rotate(10deg) scale(0.88)}
  100%{opacity:1;transform:none}
}
.pc.new{animation:szPcIn .32s cubic-bezier(.2,.85,.3,1.05) both}
@media (prefers-reduced-motion: reduce){ .pc.new{animation:none} }
.pc small{font-family:var(--mn);font-size:0.52rem;font-weight:600;opacity:0.75;letter-spacing:1px;margin-top:2px}
.hl-row{display:flex;gap:16px;align-items:center;justify-content:center;min-height:100px}
.hl-arrow{font-size:1.4rem;color:var(--sz-mute)}
.mem{display:grid;gap:6px;width:100%;max-width:min(100%,330px,42vh)}
.mem .mc{aspect-ratio:3/4;border-radius:3px;cursor:pointer;position:relative;perspective:600px;background:transparent;border:none;padding:0}
.mem .face{position:absolute;inset:0;border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-family:var(--hd);font-weight:700;font-size:1.05rem;backface-visibility:hidden;transition:transform .3s}
.mem .back{background:linear-gradient(135deg,var(--sz-blue),#1b5b57);border:1px solid var(--sz-blue-hi);color:rgba(255,255,255,0.35);font-size:1.2rem}
.mem .front{transform:rotateY(180deg);font-family:var(--hd);font-weight:700;font-size:1.15rem;border:2px solid rgba(5,9,18,0.25)}
.mem .front.c0{background:linear-gradient(150deg,#d5ad49,#b48d2b);color:#171309}
.mem .front.c1{background:linear-gradient(150deg,#38cbc2,#2a8e87);color:#fff}
.mem .front.c2{background:linear-gradient(150deg,#6f695e,#48443c);color:#fff}
.mem .front.c3{background:linear-gradient(150deg,#eceadf,#c6c3b5);color:#16254d}
.mem .mc.up .back{transform:rotateY(180deg)}
.mem .mc.up .front{transform:rotateY(360deg)}
.mem .mc.done{opacity:0.38;cursor:default}

/* --- reveal --- */
.rv{display:grid;gap:6px;width:100%;max-width:min(100%,330px,44vh)}
.rv .tile{position:relative;aspect-ratio:1;border-radius:3px;overflow:hidden;background:var(--sz-bg3);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.rv .tile canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
/* the coin the player scratches with */
.rv-coin{position:fixed;left:0;top:0;width:42px;height:42px;border-radius:50%;z-index:145;
  pointer-events:none;opacity:0;transition:opacity .12s;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 30%,#f8eed6 0%,#e1c98d 28%,#c3a24e 58%,#9f7e2a 100%);
  box-shadow:0 0 0 1.5px #775e1e,0 5px 14px rgba(5,9,18,0.55),inset 0 -3px 6px rgba(103,80,23,0.5),
             inset 0 3px 6px rgba(249,241,220,0.7)}
.rv-coin.on{opacity:1}
.rv-coin.press{box-shadow:0 0 0 1.5px #775e1e,0 2px 7px rgba(5,9,18,0.6),
  inset 0 -2px 5px rgba(103,80,23,0.55),inset 0 2px 5px rgba(249,241,220,0.6)}
/* the tile itself only hides the arrow while a round is live */
.rv .tile canvas{cursor:default}
.rv.live .tile canvas{cursor:none}
.rv-coin span{font-size:1.05rem;color:rgba(95,74,23,0.75);line-height:1;
  text-shadow:0 1px 0 rgba(248,238,214,0.6)}
@media(pointer:coarse){ .rv-coin{width:34px;height:34px} .rv .tile canvas{cursor:pointer} }
.rv .tile.done{box-shadow:inset 0 0 0 2px var(--sz-amber)}

/* --- draw --- */
.dr-head{display:flex;gap:6px;width:100%;max-width:420px}
.dr-head div{flex:1;text-align:center;background:var(--sz-bg);border:1px solid var(--sz-edge);border-radius:3px;padding:6px 4px}
.dr-head span{display:block;font-family:var(--mn);font-size:0.58rem;letter-spacing:1px;text-transform:uppercase;color:var(--sz-mute)}
.dr-head b{font-family:var(--mn);font-size:1rem;color:var(--sz-ink)}
.dr-head div.low b{color:var(--sz-danger)}
.dr-ball{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mn);font-size:1.15rem;font-weight:600;color:#0a1123;
  background:linear-gradient(150deg,var(--sz-amber-hi),var(--sz-amber));box-shadow:0 5px 16px rgba(213,173,73,0.35)}
.dr-ball.idle{background:var(--sz-bg3);color:var(--sz-mute);box-shadow:none;border:1px solid var(--sz-line2)}
.dr-grid{display:grid;gap:4px;width:100%;max-width:min(100%,320px,40vh)}
.dr-grid .n{aspect-ratio:1;border-radius:3px;background:var(--sz-bg3);display:flex;align-items:center;justify-content:center;
  font-family:var(--mn);font-size:0.78rem;color:var(--sz-mute);border:1px solid var(--sz-edge);padding:0;cursor:default}
/* a number you can still claim pulses; once it drops off the strip it stops */
.dr-grid .n.hot{cursor:pointer;color:#fff;border-color:var(--sz-amber);box-shadow:0 0 0 2px rgba(213,173,73,0.35);
  animation:drHot 1s ease-in-out infinite}
@keyframes drHot{0%,100%{box-shadow:0 0 0 2px rgba(213,173,73,0.3)}50%{box-shadow:0 0 0 4px rgba(213,173,73,0.55)}}
.dr-recent i.live{background:var(--sz-amber);color:#0a1123;border-color:var(--sz-amber)}
.dr-grid .n.need{border-color:var(--sz-blue);color:var(--sz-ink)}
.dr-grid .n.mark{background:var(--sz-blue);color:#fff;border-color:var(--sz-blue-hi)}
.dr-grid .n.need.mark{background:var(--sz-amber);color:#0a1123;border-color:var(--sz-amber-hi)}
.dr-recent{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;max-width:420px}
.dr-recent i{font-family:var(--mn);font-size:0.64rem;font-style:normal;background:var(--sz-bg3);border:1px solid var(--sz-line2);
  border-radius:3px;padding:2px 5px;color:var(--sz-mute)}

/* --- learning section --- */
.edu{max-width:880px;margin:34px auto 0;padding:0 20px}
.edu h2{font-size:1.5rem;margin-bottom:6px}
.edu .lead{color:var(--sz-mute);font-size:0.95rem;margin-bottom:22px}
.edu-b{background:var(--sz-bg2);border:1px solid var(--sz-line2);border-radius:3px;padding:18px 20px;margin-bottom:12px}
.edu-b h3{font-family:var(--bd);font-size:0.78rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--sz-amber);margin-bottom:8px}
.edu-b p{font-size:0.93rem;color:rgba(250,246,238,0.8);line-height:1.75;overflow-wrap:anywhere}

@media(max-width:980px){
  .stage-wrap{grid-template-columns:1fr}
  /* the panel becomes a compact bar directly under the board so the action
     button is never pushed off a phone screen */
  .side{order:2;display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;align-items:center;padding:12px}
  .side h4{display:none}
  .pts-box{margin:0;padding:8px 11px}
  .entry-row{margin:0}
  .e-quick{grid-column:1/-1;margin:0}
  .act{grid-column:1/-1;margin-top:0}
  .act.sec{grid-column:1/-1}
  .play-top h1{font-size:1.15rem}
  .stage{padding:46px 10px 12px;min-height:0}
  .entry-strip{font-size:0.7rem;padding:5px 10px;margin-bottom:7px}
  /* every board shrinks against viewport height so the action button stays
     reachable without scrolling on a phone */
  .rv,.mem,.dr-grid{--capvh:24vh}
  .pad{max-height:150px}
  .pad button{height:30px;font-size:0.66rem}
  .outside button{padding:6px 4px;font-size:0.72rem}
  .dr-ball{width:42px;height:42px;font-size:1rem}
  .dr-head div{padding:4px 3px}
  .dr-head b{font-size:0.86rem}
  .cols{--ch:34;--cg:3}
  /* ring beside the pad, not above it: stacking costs ~200px of height */
  .dial-wrap{grid-template-columns:118px 1fr;gap:10px;align-items:start}
  .dial-stage{width:118px}
  .dial-out{font-size:0.7rem;margin-top:4px}
  .pad{max-height:150px;width:100%}
  .cols{--ch:46}
  .play{padding:10px 14px 20px}
}
@media(max-width:520px){
  .rv,.mem,.dr-grid{--capvh:21vh}
  .dr-head div{padding:3px 2px}
  .dr-head span{font-size:0.54rem}
  .dr-head b{font-size:0.8rem}
  .dr-recent{display:none}
  .cols{--ch:38;--cg:4}
  .pc{width:54px;height:78px;font-size:1.25rem}
  .dr-ball{width:52px;height:52px;font-size:1.15rem}
  .edu{padding:0 14px}
}
/* height-based trims apply to the desktop two-column layout only: on phones
   the width-based rules above already own these sizes */
@media(min-width:981px) and (max-height:820px){ .cols{--ch:48} .dial-stage{width:206px} }
@media(min-width:981px) and (max-height:700px){ .cols{--ch:40} .dial-stage{width:180px} .stage{min-height:280px} }