/* 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}
#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)}
@media (max-width:620px){
  .board{padding:12px;border-radius:14px;gap:6px}
  .board[data-cols]{grid-template-columns:repeat(4,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;
}
@keyframes linkflash{0%{opacity:0;stroke-width:2}25%{opacity:1;stroke-width:6}100%{opacity:0;stroke-width:6}}

/* 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)}}

/* 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)}
}