/* Mahjong Connect — uses the site theme variables so it matches the rest of the
   site. Layout mirrors tile-memory.html: a framed "control console" plus a tile
   board. Tiles are face-up (no flip); the twist is the link-path rule. */

/* Page hero reuses the site's standard .page-hero (theme-adaptive). Sits OUTSIDE
   <main> so its green background spans the full viewport width, edge to edge. */
.page-hero.game-hero{padding:50px 0 46px}
.page-hero.game-hero .wrap{max-width:980px;padding:0 20px}
.page-hero.game-hero .eyebrow{margin-bottom:12px}
.page-hero.game-hero h1{margin:0 0 14px}

.game-shell{max-width:880px;margin:22px auto 0}

/* Framed "control console" — identical language to the memory game. */
.game-bar{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
  margin-bottom:18px;
  border:1px solid var(--rule);
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(150% 130% at 0% 0%, rgba(176,141,87,.12), transparent 55%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:0 12px 28px rgba(20,42,30,.10), inset 0 1px 0 rgba(255,255,255,.75);
}

/* stat block — small engraved label over a large serif value */
.stats{display:grid;grid-template-columns:repeat(4,1fr);flex:1 1 320px;min-width:0}
.stat{
  display:flex;flex-direction:column;gap:5px;justify-content:center;
  padding:14px 15px;
  border-right:1px solid var(--rule);
  font-family:var(--sans);
}
.stat:last-child{border-right:none}
.stat .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat .val{display:flex;align-items:baseline;gap:3px;line-height:1}
.stat b{font-family:var(--serif);font-size:23px;color:var(--evergreen-deep);font-variant-numeric:tabular-nums;font-weight:700}
.stat .sep{font-size:18px;color:var(--muted);font-weight:600}
.stat .den{font-size:15px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}

/* danger (low time) — Time Attack countdown turns red and pulses */
.game-shell.danger #tleft{color:#c0392b;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* control zone (selects, toggle, swatches, buttons) */
.controls-zone{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;
  background:rgba(255,255,255,.42);
  border-left:1px solid var(--rule);
}
.buttons{display:flex;gap:9px;align-items:center;margin-left:auto;flex-wrap:wrap}
.game-bar .btn-primary{padding:9px 16px;font-size:13.5px}
.game-bar .btn-ghost{padding:9px 16px;font-size:13.5px}
/* Ghost buttons (Hint / Shuffle / Restart) must read on BOTH the light day
   game-bar and the dark night game-bar. The global .btn-ghost uses light
   --hero-soft text meant for the dark hero, which vanishes on the light bar,
   so pin a high-contrast scheme here. */
.game-bar .btn-ghost{
  background:var(--cream,#f6f2e6);
  color:var(--evergreen-deep,#0E2A1E);
  border:1px solid var(--rule,#e2d8c3);
  box-shadow:0 2px 8px rgba(20,42,30,.10);
}
.game-bar .btn-ghost:hover{background:#efe7d6;transform:translateY(-2px)}
html.ll-night .game-bar .btn-ghost,
html.th-hc .game-bar .btn-ghost{
  background:rgba(255,255,255,.08);
  color:var(--brass-lt,#C9A96A);
  border-color:rgba(212,180,131,.35);
  box-shadow:none;
}
html.ll-night .game-bar .btn-ghost:hover,
html.th-hc .game-bar .btn-ghost:hover{background:rgba(255,255,255,.14)}
#cNext:disabled{opacity:.45;cursor:not-allowed}
#cNext:not(:disabled){margin-left:0}

/* mode tabs — premium segmented control */
.mode-tabs{display:flex;gap:0;justify-content:center;margin:0 auto 18px;padding:5px;width:fit-content;max-width:100%;border:1px solid var(--rule);border-radius:999px;background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px rgba(20,42,30,.08)}
.mode-tab{font-family:var(--sans);font-size:14px;font-weight:600;padding:9px 18px;border-radius:999px;border:none;background:transparent;color:var(--ink-soft);cursor:pointer;transition:.18s}
.mode-tab.is-on{background:var(--evergreen);color:#fff;box-shadow:0 2px 8px rgba(20,42,30,.28)}
.mode-tab:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* level progress dots */
.lvl-dots{display:flex;gap:9px;justify-content:center;margin:14px 0 2px}
.lvl-dot{width:11px;height:11px;border-radius:50%;background:var(--rule);border:1px solid var(--line);transition:.2s}
.lvl-dot.done{background:var(--evergreen);border-color:var(--evergreen)}
.lvl-dot.current{background:var(--brass);border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,141,87,.25)}

/* controls: labels + selects + table-color swatches */
.ctl{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12.5px;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ctl .sel{font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 10px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);text-transform:none;letter-spacing:0;font-weight:500;transition:.15s}
.ctl .sel:hover{border-color:var(--brass)}
.backs{display:flex;gap:6px;padding:5px 7px;border:1px solid var(--rule);border-radius:11px;background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.swatch{width:24px;height:24px;border-radius:7px;border:2px solid transparent;cursor:pointer;padding:0;transition:.15s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.swatch:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.swatch.is-on{border-color:var(--brass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 3px rgba(176,141,87,.22)}
.swatch.back-evergreen{background:linear-gradient(150deg,var(--evergreen),var(--evergreen-deep))}
.swatch.back-brass{background:linear-gradient(150deg,#C9B27E,#A6884F)}
.swatch.back-midnight{background:linear-gradient(150deg,#2a3a5c,#101a2e)}
.swatch.back-crimson{background:linear-gradient(150deg,#A66B6B,#6E3F3F)}

/* small-screen: stack the console, swap the left divider for a top one */
@media (max-width:680px){
  .game-bar{flex-direction:column}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--rule)}
  .stat:nth-child(2n){border-right:none}
  .stat:nth-last-child(-n+2){border-bottom:none}
  .stat:last-child{border-right:none}
  .controls-zone{border-left:none;border-top:1px solid var(--rule);justify-content:flex-start}
  .buttons{margin-left:0;width:100%}
  .buttons .btn{flex:1 1 auto}
}

/* 2-Player Versus uses the same framed console; drop the stray left divider. */
.game-bar.versus-bar .controls-zone{border-left:none}
.game-bar.versus-bar .btn-primary{margin-left:auto}
.game-bar.versus-bar .vs-title{display:flex;flex-direction:column;justify-content:center;padding:14px 18px;border-right:1px solid var(--rule);flex:0 0 auto}
.vs-title .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.vs-title .vsub{font-family:var(--serif);font-size:18px;color:var(--evergreen-deep);font-weight:700;margin-top:3px;line-height:1.05}
.game-bar.versus-bar .controls-zone{flex:1 1 auto}
@media (max-width:680px){
  .game-bar.versus-bar .vs-title{border-right:none;border-bottom:1px solid var(--rule)}
}

/* Players segmented control — same visual language as the mode tabs. */
.vs-players{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px;background:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.pseg{font-family:var(--sans);font-size:13px;font-weight:600;padding:6px 13px;border:none;border-radius:999px;background:transparent;color:var(--ink-soft);cursor:pointer;transition:.16s}
.pseg.is-on{background:var(--evergreen);color:#fff;box-shadow:0 2px 7px rgba(20,42,30,.22)}
.pseg:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ---- Board ---- */
/* board-wrap is the positioning context for the link-path SVG overlay. */
.board-wrap{position:relative;margin:2px auto 0}
.board{
  display:grid;gap:8px;justify-items:center;
  width:100%;
  padding:18px;
  border:1px solid var(--rule);
  border-radius:18px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(176,141,87,.10), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow:0 12px 30px rgba(20,42,30,.10), inset 0 1px 0 rgba(255,255,255,.7);
}
.board[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
.board[data-cols="6"]{grid-template-columns:repeat(6,1fr)}
.board[data-cols="8"]{grid-template-columns:repeat(8,1fr)}
.board[data-cols="10"]{grid-template-columns:repeat(10,1fr)}
  .board[data-cols="12"]{grid-template-columns:repeat(12,1fr)}
@media (max-width:620px){
  .board{padding:12px;border-radius:14px;gap:6px}
  .board[data-cols]{grid-template-columns:repeat(6,1fr)}
}

/* link-path overlay sits on top of the board; it is click-through. */
.link-overlay{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:5;
}
.link-overlay polyline{
  fill:none;stroke:var(--brass);
  stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 4px rgba(20,42,30,.45));
  opacity:0;
  animation:linkflash .55s ease forwards;
}
.link-overlay polyline.lk-1{stroke-width:7;filter:drop-shadow(0 0 9px currentColor)}
.link-overlay polyline.lk-2{stroke-dasharray:3 12;animation:linkdash .72s ease forwards}
.link-overlay polyline.lk-3{stroke-width:9;filter:drop-shadow(0 0 7px currentColor);animation:linkthick .62s ease forwards}
@keyframes linkflash{0%{opacity:0;stroke-width:2}25%{opacity:1;stroke-width:6}100%{opacity:0;stroke-width:6}}
@keyframes linkdash{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
@keyframes linkthick{0%{opacity:0;stroke-width:3}26%{opacity:1;stroke-width:10}100%{opacity:0;stroke-width:10}}

/* a cell holds one face-up tile */
.cell{width:100%;display:flex;justify-content:center}
.tile{
  position:relative;width:100%;max-width:60px;aspect-ratio:58/79;
  border:none;background:transparent;padding:0;cursor:pointer;
  border-radius:9px;overflow:hidden;
  box-shadow:0 3px 0 #d7d0bf,0 6px 11px rgba(20,42,30,.26);
  transition:transform .12s ease,box-shadow .12s ease,opacity .2s ease;
}
.tile:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 6px 0 #d7d0bf,0 16px 26px rgba(20,42,30,.36),0 0 0 2px rgba(176,141,87,.5)}
.tile:active{transform:translateY(0) scale(.97)}
.tile:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.tile .tl{width:100%;height:100%;display:block}
.tile .face{position:absolute;inset:0;border-radius:9px;background:linear-gradient(158deg,#fffdf8,#f0e9da);box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -3px 6px rgba(40,30,10,.08),inset 0 0 0 1px rgba(0,0,0,.05),0 2px 5px rgba(14,42,30,.1)}
.tile.selected{box-shadow:0 3px 0 #d7d0bf,0 6px 11px rgba(20,42,30,.26),0 0 0 3px var(--brass),0 0 14px rgba(176,141,87,.5);transform:translateY(-2px) scale(1.03)}
.tile.hint{animation:hintpulse 1s ease 2}
@keyframes hintpulse{0%,100%{box-shadow:0 3px 0 #d7d0bf,0 6px 11px rgba(20,42,30,.26)}50%{box-shadow:0 3px 0 #d7d0bf,0 6px 11px rgba(20,42,30,.26),0 0 0 3px #2a9d8f,0 0 16px rgba(42,157,143,.6)}}
.tile.cleared{opacity:0;transform:scale(.6);pointer-events:none}
.tile.pop{animation:tile-pop .3s ease}
@keyframes tile-pop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
/* "blocked" cue: same face tapped but no connecting path right now -> red ring pulse */
.tile.blocked{animation:blockflash .76s ease}
@keyframes blockflash{0%,100%{box-shadow:0 3px 0 #d7d0bf,0 6px 11px rgba(20,42,30,.26)}30%,70%{box-shadow:0 3px 0 #d7d0bf,0 6px 11px rgba(20,42,30,.26),0 0 0 3px #c0392b,0 0 18px rgba(192,57,43,.7)}}

/* table-color swatch tints the board mat (reuses the four hues) */
.board[data-back="evergreen"]{background:radial-gradient(120% 80% at 50% -10%, rgba(176,141,87,.10), transparent 60%),linear-gradient(180deg,#f3f0e7,#e7e1d2)}
.board[data-back="brass"]{background:radial-gradient(120% 80% at 50% -10%, rgba(176,141,87,.16), transparent 60%),linear-gradient(180deg,#f6efe0,#ece0c6)}
.board[data-back="midnight"]{background:radial-gradient(120% 80% at 50% -10%, rgba(120,150,200,.16), transparent 60%),linear-gradient(180deg,#e7ecf4,#d4dcea)}
.board[data-back="crimson"]{background:radial-gradient(120% 80% at 50% -10%, rgba(200,140,140,.16), transparent 60%),linear-gradient(180deg,#f5e9e9,#ecd8d8)}

.game-msg{margin-top:18px;font-family:var(--sans);font-size:15px;color:var(--evergreen);min-height:1.2em;text-align:center}

/* ---- Versus (2–4 players) ---- */
.versus{max-width:920px}
.vs-side.pi-0{--pacc:var(--evergreen)}
.vs-side.pi-1{--pacc:#2a3a5c}
.vs-side.pi-2{--pacc:#A6884F}
.vs-side.pi-3{--pacc:#6E3F3F}
.vs-side{border:1px solid var(--line);border-left:4px solid var(--pacc);border-radius:14px;padding:14px;background:var(--surface);transition:.2s}
.vs-side.is-active{border-color:var(--brass);border-left-color:var(--pacc);box-shadow:0 0 0 3px rgba(176,141,87,.18)}
.vs-side.locked{opacity:.45;filter:grayscale(.3)}
.vs-side.done{opacity:1;filter:none;border-style:dashed}
.vs-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-family:var(--sans);font-weight:600;color:var(--ink)}
.vs-name{font-size:15px;display:inline-flex;align-items:center}
.vs-name::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pacc);margin-right:8px;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.vs-stat{font-variant-numeric:tabular-nums;color:var(--evergreen-deep);font-size:13.5px}
.vs-board{padding:12px;gap:6px}
.vs-board .tile{max-width:52px}
.vs-arena{display:grid;grid-template-columns:1fr;gap:18px;margin-top:8px}
.vs-arena.cols2{display:grid}
@media (min-width:900px){
  .vs-arena.cols2{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .vs-side.locked{opacity:1;filter:none}
}

/* ---- celebration: banner + confetti burst (reused from the memory game) ---- */
.celebrate{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.celebrate-banner{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);text-align:center;animation:cb-pop 2.8s ease forwards}
.cb-head{font-family:var(--serif);font-size:34px;line-height:1.1;color:var(--brass);text-shadow:0 2px 6px rgba(0,0,0,.22);font-weight:700}
.cb-sub{font-family:var(--sans);font-size:16px;color:var(--evergreen-deep);margin-top:8px;font-weight:600}
.celebrate--big .celebrate-banner{top:28%}
.celebrate--big .cb-head{font-size:50px;color:var(--brass)}
.celebrate--big .cb-sub{font-size:18px;margin-top:10px}
@keyframes cb-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}
.confetti{position:absolute;top:42%;left:50%;width:9px;height:13px;border-radius:2px;opacity:0;transform:translate(-50%,-50%);animation:confetti-burst linear forwards}
@keyframes confetti-burst{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 38vh)) rotate(var(--rot)) scale(.7)}
}

/* ===== Full-screen play (FAB) + PWA / mobile ergonomics ===== */
.fs-row{display:flex;justify-content:flex-end;margin:-2px 0 16px}
.fs-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--rule);background:var(--paper,#fff);color:var(--evergreen);font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .15s ease,transform .1s ease}
.fs-btn:hover{background:var(--cream,#f6f2e6)}
.fs-btn:active{transform:translateY(1px)}
.fs-btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.fs-btn svg{width:18px;height:18px}
.fs-btn .fs-collapse{display:none}
/* Day / Night toggle — sits next to Full screen on the right of the tabs. */
.day-night-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--rule);background:var(--paper,#fff);color:var(--evergreen);font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .15s ease,transform .1s ease}
.day-night-btn:hover{background:var(--cream,#f6f2e6)}
.day-night-btn:active{transform:translateY(1px)}
.day-night-btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.day-night-btn .dn-dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--rule);background:var(--brass);flex:none;transition:background .15s ease}
.day-night-btn.is-night{color:var(--brass-lt);background:linear-gradient(180deg,#141A14,#0E120E);border-color:rgba(212,180,131,.3)}
.day-night-btn.is-night .dn-dot{border-color:rgba(212,180,131,.5)}
.fs-btn.is-full .fs-expand{display:none}
.fs-btn.is-full .fs-collapse{display:block}
/* Soft fullscreen fallback for iOS Safari and other browsers without a reliable
   Fullscreen API: hide the page chrome and fill the viewport with the game. */
html.soft-fs, html.soft-fs body{height:100%;overflow:hidden}
html.soft-fs header, html.soft-fs .page-hero, html.soft-fs footer{display:none!important}
html.soft-fs #main{
  position:fixed;top:0;left:0;right:0;bottom:0;
  width:100%!important;max-width:none!important;height:100%!important;margin:0!important;
  padding:calc(env(safe-area-inset-top) + 8px) 12px calc(env(safe-area-inset-bottom) + 8px)!important;
  background:var(--paper,#f3f0e7);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow:auto;z-index:9999
}
#main:fullscreen{max-width:none!important;width:100%!important;background:var(--paper,#f3f0e7);padding-top:env(safe-area-inset-top)!important;padding-bottom:env(safe-area-inset-bottom)!important;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:auto}
.game-stage{transform-origin:top center;will-change:transform}
button,.tile-btn,.tile,.swatch,.pseg,.mode-tab,.sel{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ios-install-hint{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:80;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--evergreen);color:#fff;font-family:var(--sans);font-size:13.5px;line-height:1.35;box-shadow:0 10px 26px rgba(20,42,30,.34)}
.ios-install-hint b{font-weight:700}
.ios-install-hint .ios-install-close{flex:none;width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.18);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.ios-install-hint .ios-install-close:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ===== Randomized celebration effects (added) ===== */
.fx-firework{position:absolute;width:var(--fsize,90px);height:var(--fsize,90px);border-radius:50%;opacity:0;transform:scale(.2);animation:fx-burst ease-out forwards;mix-blend-mode:screen;pointer-events:none}
@keyframes fx-burst{0%{opacity:0;transform:scale(.2)}18%{opacity:.95}100%{opacity:0;transform:scale(1.35)}}
.fx-ribbon{position:absolute;top:-12%;width:8px;height:46px;border-radius:3px;opacity:0;animation:fx-ribbon linear forwards;pointer-events:none;transform-origin:top center}
@keyframes fx-ribbon{0%{opacity:0;transform:translateY(-10vh) rotate(0)}12%{opacity:.95}100%{opacity:0;transform:translateY(112vh) rotate(360deg) translateX(var(--sway,0))}}
.fx-spark{position:absolute;width:9px;height:9px;border-radius:50%;opacity:0;box-shadow:0 0 8px currentColor;animation:fx-spark ease-in-out forwards;pointer-events:none}
@keyframes fx-spark{0%,100%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.15)}72%{opacity:.55}}
.celebrate-banner{z-index:5}

/* ===== Obsidian (dark) table + inline full-screen button + night deepening ===== */
.swatch.back-obsidian{background:linear-gradient(150deg,#2A2924,#0B0A08);box-shadow:inset 0 0 0 1px rgba(212,180,131,.25)}
.board[data-back="obsidian"]{background:radial-gradient(120% 80% at 50% -10%, rgba(176,141,87,.10), transparent 60%),linear-gradient(180deg,#14130F,#0A0907)}

/* Full-screen button sits on the RIGHT of the mode tabs (same row). */
.mode-row{display:flex;align-items:center;gap:14px;max-width:880px;margin:0 auto 18px;padding:0 4px;position:relative;z-index:5}
.mode-row .mode-tabs{margin:0;flex:1 1 auto}
.fs-inline{margin-left:auto}
@media (max-width:560px){
  .mode-row{flex-wrap:wrap}
  .fs-inline{margin-left:0;width:100%;justify-content:center}
}

/* Star-rain celebration family (randomized). */
.fx-star{position:absolute;top:-8%;width:13px;height:13px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0%,var(--star-col,#D4B483) 38%,transparent 72%);box-shadow:0 0 8px currentColor;animation:fx-star linear forwards;pointer-events:none}
@keyframes fx-star{0%{opacity:0;transform:translateY(-10vh) scale(.4) rotate(0)}14%{opacity:1}100%{opacity:0;transform:translateY(112vh) scale(1) rotate(360deg)}}

/* ===== Deep "night" treatment under the dark / gold themes ===== */
html[data-theme="dark"] .board, html[data-theme="gold"] .board{
  background:radial-gradient(120% 80% at 50% -10%, rgba(176,141,87,.18), transparent 62%),linear-gradient(180deg,#16241D 0%, #0C140F 100%);
  border-color:rgba(212,180,131,.30);
  box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(212,180,131,.14);
}
html[data-theme="dark"] .board[data-back="evergreen"], html[data-theme="gold"] .board[data-back="evergreen"]{background:radial-gradient(120% 80% at 50% -10%, rgba(176,141,87,.18), transparent 62%),linear-gradient(180deg,#16241D,#0C140F)}
html[data-theme="dark"] .board[data-back="brass"], html[data-theme="gold"] .board[data-back="brass"]{background:radial-gradient(120% 80% at 50% -10%, rgba(176,141,87,.24), transparent 62%),linear-gradient(180deg,#1E1A12,#0E0B07)}
html[data-theme="dark"] .board[data-back="midnight"], html[data-theme="gold"] .board[data-back="midnight"]{background:radial-gradient(120% 80% at 50% -10%, rgba(120,150,200,.22), transparent 62%),linear-gradient(180deg,#101A2E,#070B14)}
html[data-theme="dark"] .board[data-back="crimson"], html[data-theme="gold"] .board[data-back="crimson"]{background:radial-gradient(120% 80% at 50% -10%, rgba(200,140,140,.22), transparent 62%),linear-gradient(180deg,#1E1212,#0C0707)}
html[data-theme="dark"] .board[data-back="obsidian"], html[data-theme="gold"] .board[data-back="obsidian"]{background:radial-gradient(120% 80% at 50% -10%, rgba(176,141,87,.14), transparent 60%),linear-gradient(180deg,#0C0B08,#050403)}
html[data-theme="dark"] .game-bar, html[data-theme="gold"] .game-bar{
  background:radial-gradient(150% 130% at 0% 0%, rgba(176,141,87,.16), transparent 55%),linear-gradient(180deg,#16201B 0%, #10160F 100%);
  border-color:rgba(212,180,131,.26);
  box-shadow:0 12px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(212,180,131,.12);
}
html[data-theme="dark"] .controls-zone, html[data-theme="gold"] .controls-zone{background:rgba(255,255,255,.04);border-left-color:rgba(212,180,131,.22)}
html[data-theme="dark"] .tile .face, html[data-theme="gold"] .tile .face{background:linear-gradient(158deg,#f6f0e0,#e4d8bf);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 -3px 6px rgba(40,30,10,.12),inset 0 0 0 1px rgba(0,0,0,.06),0 2px 5px rgba(0,0,0,.4)}
html[data-theme="dark"] .stat, html[data-theme="gold"] .stat{border-right-color:rgba(212,180,131,.16)}
html[data-theme="dark"] .stat b, html[data-theme="gold"] .stat b{color:var(--brass-lt)}

/* ===== Night-friendly under the site's high-contrast (hc) reading theme =====
   The site's dark experience is html.th-hc (not data-theme). It darkens body +
   hero, but the game's surface vars stay light, so the board/console glare as a
   bright panel. Deepen the game chrome to the BRAND deep-evergreen so night
   play matches the site; tiles keep light faces for contrast. Tiles keep light
   faces for contrast. Also darken the soft-fullscreen stage so night play isn't
   harsh. The site's evergreen page-hero band and footer are never touched. */
html.th-hc .board{
  background:radial-gradient(120% 80% at 50% -10%, rgba(212,175,120,.14), transparent 60%),linear-gradient(180deg,#14342B 0%, #0B1E16 100%);
  border-color:rgba(212,180,131,.28);
  box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(212,180,131,.12);
}
html.th-hc .board[data-back]{background:radial-gradient(120% 80% at 50% -10%, rgba(212,175,120,.14), transparent 60%),linear-gradient(180deg,#14342B,#0B1E16)}
html.th-hc .game-bar{
  background:radial-gradient(150% 130% at 0% 0%, rgba(212,175,120,.10), transparent 55%),linear-gradient(180deg,#102A20 0%, #0A1C14 100%);
  border-color:rgba(212,180,131,.22);
  box-shadow:0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(212,180,131,.08);
}
html.th-hc .controls-zone{background:rgba(255,255,255,.03);border-left-color:rgba(212,180,131,.18)}
html.th-hc .stat{border-right-color:rgba(212,180,131,.14)}
html.th-hc .stat b{color:var(--brass-lt)}
html.th-hc.soft-fs #main, html.th-hc #main:fullscreen{background:#0E2A1E}

/* ===== In-game Day / Night toggle (independent of the site reading theme) =====
   Mirrors the prototype's "Day" light switch: one tap dims the PLAY STAGE (and
   the page backdrop) for dark-room play so the outside no longer glares. SCOPED
   to the game area only — the site's evergreen page-hero band and footer are
   LEFT untouched (they keep their green). BRAND deep-evergreen + brass on
   evergreen-deep; tiles keep light faces for contrast. State lives in
   localStorage 'mjs-ll-night' and is flipped by #dayNightBtn. */
body.ll-night{background:#0E2A1E}
html.ll-night .board{
  background:radial-gradient(120% 80% at 50% -10%, rgba(212,175,120,.14), transparent 60%),linear-gradient(180deg,#14342B 0%, #0B1E16 100%);
  border-color:rgba(212,180,131,.28);
  box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(212,180,131,.12);
}
html.ll-night .board[data-back]{background:radial-gradient(120% 80% at 50% -10%, rgba(212,175,120,.14), transparent 60%),linear-gradient(180deg,#14342B,#0B1E16)}
html.ll-night .game-bar{
  background:radial-gradient(150% 130% at 0% 0%, rgba(212,175,120,.10), transparent 55%),linear-gradient(180deg,#102A20 0%, #0A1C14 100%);
  border-color:rgba(212,180,131,.22);
  box-shadow:0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(212,180,131,.08);
}
html.ll-night .controls-zone{background:rgba(255,255,255,.03);border-left-color:rgba(212,180,131,.18)}
html.ll-night .stat{border-right-color:rgba(212,180,131,.14)}
html.ll-night .stat b{color:var(--brass-lt)}
html.ll-night.soft-fs #main, html.ll-night #main:fullscreen{background:#0E2A1E}