/* Mahjong Whack 2026 — game visuals.
   Every color is a --g-* variable so the board survives all 36 background x
   accent combinations the shell offers. */

.mw-wrap{ width:100%; max-width:min(94vw, 760px); margin:0 auto; padding:4px 12px 8px; text-align:center; }

/* ------------------------------------------------------- the 2026 line */
.mw-line{ margin-bottom:4px; }
.mw-slots{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.mw-slot{
  position:relative; border-radius:12px; padding:8px 4px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.28), var(--g-card));
  border:1px solid var(--g-line); box-shadow:var(--g-shadow-sm);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.mw-slot.is-done{ border-color:var(--g-accent); box-shadow:inset 0 0 0 1px var(--g-accent-soft), var(--g-shadow-sm); }
.mw-slot.is-done .mw-slot-lab{ color:var(--g-heading); font-weight:700; }
.mw-slot.is-now{
  border-color:var(--g-accent); transform:translateY(-3px);
  box-shadow:0 0 0 2px var(--g-accent-soft), 0 6px 16px var(--g-accent-soft);
}
.mw-handname{ margin-top:4px; font-size:11px; color:var(--g-muted); }
/* Future tiles (not yet surfaced) stay face-down so the coming line is never
   spoiled. They read as a covered tile, not the tile itself. */
.mw-slot.is-future{ filter:grayscale(.55); opacity:.78; }
.mw-slot-back{
  width:34px; height:46px; display:flex; align-items:center; justify-content:center;
  border-radius:6px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 6px, rgba(0,0,0,.07) 6px 12px),
    linear-gradient(180deg,#2f6f57 0%,#1f4034 100%);
  border:1px solid rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(0,0,0,.30);
}

/* Tile faces: SchoolTiles emits a .tl span carrying only the suit art — the
   ivory body comes from the game (same convention as tile-parlor). */
.mw-slot .tl{
  position:relative; width:34px; height:46px; display:flex;
  border-radius:6px;
  background:linear-gradient(180deg,#FDF9F0 0%,#F5EDDC 58%,#E9DFC8 100%);
  border:1px solid rgba(118,96,56,.40);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 5px rgba(118,96,56,.22), 0 2px 4px rgba(0,0,0,.30);
}
.mw-slot .tl svg{ width:100%; height:100%; display:block; }
.mw-slot .tl .cnr{
  position:absolute; top:2px; left:4px;
  font:700 9px/1 Georgia,'Times New Roman',serif; color:rgba(70,52,22,.55);
}
.mw-slot-lab{ font-size:10px; letter-spacing:.02em; color:var(--g-muted); line-height:1.2; }

/* ------------------------------------------------------------ chapter bar */
.mw-bar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding:0 2px 8px; margin-bottom:6px; border-bottom:1px solid var(--g-line);
}
.mw-lvbtn{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:0; border:0; background:transparent; cursor:pointer; text-align:left;
  color:inherit; font:inherit;
}
.mw-lvbtn-kicker{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--g-muted);
}
.mw-lvbtn-name{
  display:flex; align-items:baseline; gap:7px; line-height:1.1;
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:23px; font-weight:700; color:var(--g-heading);
}
.mw-lvbtn-n{ font-size:15px; color:var(--g-muted); font-variant-numeric:tabular-nums; }
.mw-lvdot{ font-size:14px; color:var(--g-muted); }
.mw-lvbtn-cta{
  align-self:center; margin-left:8px; padding:2px 10px; border-radius:999px; border:1px solid var(--g-line);
  font-family:system-ui,sans-serif; font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--g-muted);
  transition:color .18s, border-color .18s;
}
.mw-lvbtn:hover .mw-lvbtn-cta{ color:var(--g-heading); border-color:var(--g-accent); }
.mw-lvbtn:focus-visible{ outline:2px solid var(--g-accent); outline-offset:3px; }
.mw-goal{ font-size:12px; color:var(--g-muted); white-space:nowrap; padding-bottom:3px; }

/* --------------------------------------------------------------- read-out */
.mw-meter{
  display:flex; align-items:stretch; justify-content:center;
  margin:0 auto 4px; border-top:1px solid var(--g-line); border-bottom:1px solid var(--g-line);
}
.mw-mcell{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:6px 8px; min-width:62px; border-left:1px solid var(--g-line);
}
.mw-mcell:first-child{ border-left:0; }
.mw-mcell:empty{ display:none; }
.mw-mcell b{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:21px; font-weight:700; line-height:1; color:var(--g-heading);
  font-variant-numeric:tabular-nums;
}
.mw-mcell i{
  font-style:normal; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--g-muted);
}
.mw-mcell.is-score{ flex:1 1 auto; }
.mw-mcell.is-tiles .mw-tiles{ display:inline-flex; gap:3px; }
.mw-pip{
  width:11px; height:15px; border-radius:3px;
  background:linear-gradient(180deg, var(--g-accent-lt), var(--g-accent));
  border:1px solid var(--g-accent-edge); box-shadow:var(--g-shadow-sm);
}
.mw-pip.is-gone{ background:transparent; opacity:.28; box-shadow:none; }

/* ---------------------------------------------------------------- tempo */
.mw-tempo{ display:flex; gap:6px; justify-content:center; margin-bottom:4px; }
.mw-tempo-step{
  font-size:11px; padding:3px 10px; border-radius:999px; color:var(--g-muted);
  border:1px solid var(--g-line); background:var(--g-glass);
}
.mw-tempo-step.is-done{ color:var(--g-heading); border-color:var(--g-accent-edge); }
.mw-tempo-step.is-now{
  color:var(--g-on-accent,#fff); background:var(--g-accent); border-color:transparent; font-weight:700;
}

/* ------------------------------------------------------------- call-out */
.mw-call{
  min-height:22px; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:18px; font-weight:700; color:var(--g-heading); letter-spacing:.01em;
}
.mw-call.pop{ animation:mwPop .3s ease-out; }
@keyframes mwPop{ from{ transform:scale(.82); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ---------------------------------------------------------------- board */
/* Board fills the available vertical space (height-responsive) so the holes grow
   on taller windows, while the dvh cap keeps us clear of the stage scrollbar.
   Per-variant max-width lets it stretch wider still on very tall screens. */
.mw-board{ display:grid; gap:8px; margin:8px auto 0; width:min(100%, calc(100dvh - 480px)); }
.mw-board.holes-4{ grid-template-columns:repeat(2,1fr); max-width:360px; }
.mw-board.holes-6{ grid-template-columns:repeat(3,1fr); max-width:540px; }
.mw-board.holes-9{ grid-template-columns:repeat(3,1fr); max-width:540px; }

.mw-hole{
  position:relative; aspect-ratio:1/1; padding:0; border:0; cursor:pointer;
  border-radius:50%; overflow:hidden; background:transparent;
  box-shadow:inset 0 10px 22px rgba(0,0,0,.26), inset 0 2px 6px rgba(0,0,0,.18);
}
.mw-hole-rim{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  border:2px solid var(--g-accent-edge);
  box-shadow:inset 0 0 0 6px var(--g-glass), inset 0 14px 26px rgba(0,0,0,.22);
}
.mw-hole:hover .mw-hole-rim{ border-color:var(--g-accent); }
.mw-hole:focus-visible{ outline:2px solid var(--g-accent); outline-offset:3px; }

/* Telegraph = a neutral "this hole is about to pop" charge on the rim only.
   Nothing about the incoming tile (face, role, or whether it is the target)
   is revealed until it actually surfaces — that is the whole point of the
   whack tension. The mouse stays parked below the rim (clipped by overflow). */
.mw-hole.is-tele .mw-hole-rim{
  border-color:var(--g-accent);
  box-shadow:inset 0 0 0 6px var(--g-accent-soft), 0 0 16px var(--g-accent-soft);
}

/* ---------------------------------------------------------------- mouse */
.mw-mouse{
  position:absolute; left:50%; bottom:0; width:100%; height:100%;
  transform:translate(-50%,100%); transition:transform .16s ease-out, opacity .16s;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  pointer-events:none;
}
/* During the telegraph the mouse is parked at its default position (fully
   below the rim, clipped by the hole's overflow) so the tile cannot be seen.
   It only rises when the hole surfaces. */
.mw-hole.is-up .mw-mouse{ transform:translate(-50%,10%); opacity:1; }

.mw-head{
  position:relative; width:56%; aspect-ratio:1/1; border-radius:50% 50% 46% 46%;
  background:linear-gradient(180deg, var(--g-card), var(--g-panel));
  border:1px solid var(--g-line); box-shadow:var(--g-shadow-md);
  margin-top:-9px;
}
.mw-hat{
  position:absolute; left:50%; top:-16%; transform:translateX(-50%);
  width:62%; height:34%; border-radius:50% 50% 12% 12%;
  background:linear-gradient(180deg, var(--g-accent-lt), var(--g-accent));
  border:1px solid var(--g-accent-edge);
}
.mw-ear{
  position:absolute; top:2%; width:26%; height:26%; border-radius:50%;
  background:var(--g-card); border:1px solid var(--g-line);
}
.mw-ear.left{ left:-9%; } .mw-ear.right{ right:-9%; }
.mw-eye{
  position:absolute; top:38%; width:11%; height:13%; border-radius:50%;
  background:var(--g-strong);
}
.mw-eye.left{ left:26%; } .mw-eye.right{ right:26%; }
.mw-nose{
  position:absolute; left:50%; top:52%; transform:translateX(-50%);
  width:14%; height:10%; border-radius:50%; background:var(--g-accent);
}

.mw-tile{ width:42%; max-width:46px; }
.mw-mouse .tl{
  position:relative; width:40%; max-width:44px; aspect-ratio:58/79; display:flex;
  margin-bottom:2px; z-index:1;
  border-radius:7px;
  background:linear-gradient(180deg,#FDF9F0 0%,#F5EDDC 58%,#E9DFC8 100%);
  border:1px solid rgba(118,96,56,.40);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 5px rgba(118,96,56,.22), 0 3px 6px rgba(0,0,0,.35);
}
.mw-mouse .tl svg{ width:100%; height:100%; display:block; }
.mw-mouse .tl .cnr{
  position:absolute; top:2px; left:4px;
  font:700 9px/1 Georgia,'Times New Roman',serif; color:rgba(70,52,22,.55);
}
/* PNG face fix (bam-1..9, dot-7, joker-1, flower-1..4): the hand-drawn face is
   a .tl-img that has no size rule on this page. Inside the flex .tl it squeezed
   the vector svg to 0 width, so a tile whose PNG had not loaded yet read as
   blank with only the corner numeral. Stack the face absolutely over the svg
   and keep it transparent until it loads, then hide the svg. The corner
   numeral (also absolute, later in the DOM) stays painted on top. */
.mw-mouse .tl .tl-img,
.mw-slot .tl .tl-img{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; object-fit:contain; pointer-events:none; opacity:0;
}
.mw-mouse .tl.has-img>.tl-img,
.mw-slot .tl.has-img>.tl-img{ opacity:1; }
.mw-mouse .tl.has-img>svg,
.mw-slot .tl.has-img>svg{ display:none !important; }

/* Fortune and bomb read differently at a glance. */
.mw-mouse.role-fortune .mw-hat{ background:linear-gradient(180deg, var(--g-accent-lt), var(--g-accent)); }
.mw-mouse.role-fortune .mw-head{ box-shadow:0 0 14px var(--g-accent-soft), var(--g-shadow-md); }
.mw-mouse.role-bomb .mw-head{ border-color:var(--g-accent); box-shadow:0 0 16px var(--g-accent-soft), var(--g-shadow-md); }
.mw-mouse.role-bomb .mw-eye{ background:var(--g-accent); }

/* ------------------------------------------------------------- controls */
.mw-controls{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; margin-top:8px; }
.mw-pace{
  display:flex; border-radius:999px; overflow:hidden;
  background:var(--g-glass); border:1px solid var(--g-line);
}
.mw-pill{
  font:600 12px/1 system-ui,sans-serif; letter-spacing:.02em; padding:9px 17px; cursor:pointer;
  color:var(--g-muted); background:transparent; border:0;
}
.mw-pill + .mw-pill{ border-left:1px solid var(--g-line); }
.mw-pill:hover{ color:var(--g-heading); }
.mw-pill.is-on{ background:var(--g-accent); color:var(--g-on-accent,#fff); }
.mw-endless{ letter-spacing:.06em; }

/* ---------------------------------------------------------- levels panel */
.mw-levels{ position:fixed; inset:0; z-index:45; display:flex; align-items:center; justify-content:center; padding:18px; }
.mw-levels[hidden]{ display:none; }
.mw-levels-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.44); backdrop-filter:blur(3px); }
.mw-levels-card{
  position:relative; width:100%; max-width:520px; max-height:84vh; overflow:auto;
  padding:22px 22px 24px; border-radius:18px; text-align:left;
  background:linear-gradient(180deg, var(--g-card), var(--g-panel));
  border:1px solid var(--g-accent-edge); box-shadow:var(--g-shadow-lg);
}
.mw-levels-x{
  position:absolute; right:12px; top:10px; width:30px; height:30px; border-radius:50%;
  cursor:pointer; font-size:18px; line-height:1; color:var(--g-muted);
  background:var(--g-glass); border:1px solid var(--g-line);
}
.mw-levels-card h2{
  margin:0 34px 4px 0; font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:23px; font-weight:700; color:var(--g-heading);
}
.mw-levels-lead{ margin:0 0 16px; font-size:12px; color:var(--g-muted); }

.mw-chapter{ margin-bottom:15px; }
.mw-chapter:last-child{ margin-bottom:0; }
.mw-chapter h3{
  display:flex; align-items:center; gap:9px; margin:0 0 5px;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--g-muted);
}
.mw-chapter h3::after{ content:""; flex:1; height:1px; background:var(--g-line); }
.mw-chapter ol{ list-style:none; margin:0; padding:0; }

.mw-lrow{
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 11px;
  border:0; border-left:2px solid transparent; border-radius:0 10px 10px 0;
  background:transparent; cursor:pointer; color:inherit; font:inherit; text-align:left;
  transition:background .16s;
}
.mw-lrow:hover:not(:disabled){ background:var(--g-glass); }
.mw-lrow:focus-visible{ outline:2px solid var(--g-accent); outline-offset:-2px; }
.mw-lrow-n{
  width:20px; flex:none; font:600 11px/1 system-ui,sans-serif;
  color:var(--g-muted); font-variant-numeric:tabular-nums;
}
.mw-lrow-name{ flex:1; font-size:14px; color:var(--g-heading); }
.mw-lrow-meta{ flex:none; font-size:11px; color:var(--g-muted); }
.mw-lrow-star{
  width:26px; flex:none; text-align:right;
  font:700 11px/1 system-ui,sans-serif; color:var(--g-muted);
}
.mw-lrow.is-now{ border-left-color:var(--g-accent); background:var(--g-glass); }
.mw-lrow.is-locked{ opacity:.32; cursor:not-allowed; }
.mw-lrow.has-star .mw-lrow-star{ color:var(--g-accent); }

/* --------------------------------------------------------------- result */
.mw-result{ position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; padding:20px; }
.mw-result::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.42); backdrop-filter:blur(3px); }
.mw-result-card{
  position:relative; width:100%; max-width:360px; padding:24px 22px; border-radius:18px; text-align:center;
  background:linear-gradient(180deg, var(--g-card), var(--g-panel));
  border:1px solid var(--g-accent-edge); box-shadow:var(--g-shadow-lg);
}
.mw-grade{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif); font-size:38px; font-weight:700;
  color:var(--g-heading); line-height:1;
}
.mw-result-card h2{ margin:8px 0 6px; font-size:20px; color:var(--g-heading); }
.mw-result-card p{ margin:0; font-size:13px; color:var(--g-muted); }
.mw-ctrl{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.mw-ctrl [hidden]{ display:none !important; }

/* pass-and-play standings */
.mw-ranks{
  margin-top:15px; padding-top:11px; border-top:1px solid var(--g-line);
  display:flex; flex-direction:column; gap:7px;
}
.mw-ranks[hidden]{ display:none; }
.mw-rank{ display:flex; align-items:baseline; gap:10px; font-size:13px; }
.mw-rank-ord{
  width:28px; flex:none; font:700 11px/1 system-ui,sans-serif;
  letter-spacing:.06em; color:var(--g-muted);
}
.mw-rank-name{ flex:1; color:var(--g-heading); }
.mw-rank-grade{ font:600 11px/1 system-ui,sans-serif; color:var(--g-muted); }
.mw-rank-score{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:16px; font-weight:700; color:var(--g-heading); font-variant-numeric:tabular-nums;
}
.mw-rank.is-first .mw-rank-ord,
.mw-rank.is-first .mw-rank-score{ color:var(--g-accent); }

/* ----------------------------------------------------------------- help */
.mw-help{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:18px; }
.mw-help-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.44); backdrop-filter:blur(3px); }
.mw-help-card{
  position:relative; width:100%; max-width:560px; max-height:82vh; overflow:auto;
  padding:22px 22px 26px; border-radius:16px; text-align:left;
  background:linear-gradient(180deg, var(--g-card), var(--g-panel));
  border:1px solid var(--g-accent-edge); box-shadow:var(--g-shadow-lg);
}
.mw-help-x{
  position:absolute; right:12px; top:10px; width:30px; height:30px; border-radius:50%;
  cursor:pointer; font-size:18px; line-height:1; color:var(--g-muted);
  background:var(--g-glass); border:1px solid var(--g-line);
}
.mw-help-card h2{ margin:0 34px 6px 0; font-size:19px; color:var(--g-heading); }
.mw-help-lead{ margin:0 0 12px; font-size:13px; color:var(--g-fg); }
.mw-help-body h3{ margin:14px 0 4px; font-size:14px; color:var(--g-heading); }
.mw-help-body p{ margin:0; font-size:13px; line-height:1.55; color:var(--g-muted); }
.mw-help-body b{ color:var(--g-fg); }

/* -------------------------------------------------------------- on fire */
.mw-stage-fire, .mj-stage.is-fire{ animation:mwFire 1.1s ease-in-out infinite alternate; }
@keyframes mwFire{ from{ box-shadow:inset 0 0 0 0 var(--g-accent-soft); } to{ box-shadow:inset 0 0 90px 0 var(--g-accent-soft); } }
.mj-stage.is-fire .mw-hole-rim{ border-color:var(--g-accent); }
.mj-stage.is-fire .mw-mouse{ filter:drop-shadow(0 0 6px var(--g-accent)); }

@media (prefers-reduced-motion: reduce){
  .mw-call.pop, .mj-stage.is-fire{ animation:none; }
  .mw-mouse{ transition:none; }
}

@media (max-width:420px){
  .mw-slot .tl, .mw-slot-back{ width:26px; height:36px; }
  .mw-call{ font-size:19px; }
  .mw-board{ gap:9px; }
  .mw-lvbtn{ flex:1 1 auto; min-width:0; }
  .mw-lvbtn-kicker{ font-size:9px; letter-spacing:.12em; }
  .mw-lvbtn-name{ font-size:19px; }
  .mw-mcell{ padding:8px 5px; min-width:52px; }
  .mw-lrow-meta{ display:none; }
  .mw-lrow{ padding:9px 8px; }
}