/* Tileborne Connect — game-specific visuals only.
   Shared chrome (top bar, menu, themes, fullscreen, celebration) comes from
   shared/shell.css. Tile faces come from the school site's own vector tiles
   (.tl in assets/site.css). Everything here is scoped under .mj-game so it can
   never fight site.css or the shell. */

/* Theme-reactive aliases: map this game's palette onto the shell's --g-* vars so
   the day/night switch and theme picker move the whole board together. */
.mj-game{
  --mc-accent:var(--g-accent);            --mc-accent-lt:var(--g-accent-lt);
  --mc-accent-dk:var(--g-accent-dk);      --mc-accent-soft:var(--g-accent-soft);
  --mc-accent-edge:var(--g-accent-edge);  --mc-card:var(--g-card);
  --mc-panel:var(--g-panel);              --mc-muted:var(--g-muted);
  --mc-fg:var(--g-fg);                    --mc-heading:var(--g-heading);
  --mc-strong:var(--g-strong);            --mc-line:var(--g-line);
  --mc-glass:var(--g-glass);              --mc-soft:var(--g-glow2);
  --mc-shadow-sm:var(--g-shadow-sm);      --mc-shadow-md:var(--g-shadow-md);
  --mc-shadow-lg:var(--g-shadow-lg);
  --mc-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --mc-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

h1.mj-title{ margin:0; font-size:inherit; line-height:inherit; }

/* ---------- HUD ---------- */
.mj-game .mc-hud{display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap;
  background:var(--mc-card); border:1px solid var(--mc-line); border-radius:14px;
  padding:12px 16px; box-shadow:var(--mc-shadow-sm)}
.mj-game .mc-level{display:flex; align-items:baseline; gap:8px}
.mj-game .mc-level .mc-no{font:700 22px/1 var(--mc-serif); color:var(--mc-heading)}
.mj-game .mc-level .mc-slash{font:600 15px/1 var(--mc-serif); color:var(--mc-accent)}
.mj-game .mc-level .mc-name{font:600 14px/1 var(--mc-sans); color:var(--mc-fg); margin-left:4px}
.mj-game .mc-pips{display:flex; gap:6px; align-items:center}
.mj-game .mc-pip{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--mc-accent);
  background:transparent; transition:.25s}
.mj-game .mc-pip.done{background:var(--mc-accent); border-color:var(--mc-accent)}
.mj-game .mc-pip.current{background:transparent; border-color:var(--mc-accent-dk);
  box-shadow:0 0 0 3px var(--mc-accent-soft)}
.mj-game .mc-timer{display:flex; align-items:center; gap:9px; margin-left:auto}
.mj-game .mc-timer-num{font:700 20px/1 var(--mc-serif); color:var(--mc-heading); font-variant-numeric:tabular-nums}
.mj-game .mc-timer-num.warn{color:var(--mc-accent-dk)}
.mj-game .mc-timer-num .mc-unit{font-size:12px; color:var(--mc-accent); margin-left:2px}
.mj-game .mc-timerbar{width:clamp(64px,18vw,140px); height:7px; border-radius:99px; background:var(--mc-line); overflow:hidden}
.mj-game .mc-timerfill{height:100%; width:100%; background:linear-gradient(90deg,var(--mc-accent),var(--mc-accent-lt)); transition:width 1s linear}
.mj-game .mc-timerfill.warn{background:linear-gradient(90deg,var(--mc-accent-dk),var(--mc-accent))}
.mj-game .mc-left{display:flex; align-items:baseline; gap:6px}
.mj-game .mc-left b{font:700 19px/1 var(--mc-serif); color:var(--mc-heading)}
.mj-game .mc-newbtn{font:600 13px/1 var(--mc-sans); color:var(--mc-heading); background:var(--mc-card);
  border:1px solid var(--mc-line); border-radius:99px; padding:9px 16px; cursor:pointer; transition:.15s}
.mj-game .mc-newbtn:hover{background:var(--mc-panel); border-color:var(--mc-accent)}

/* ---------- Boards ---------- */
.mj-game .mc-boardwrap{margin-top:18px; display:flex; flex-direction:column; gap:8px; align-items:center}
.mj-game .mc-boardlabel{display:flex; align-items:center; justify-content:space-between; width:100%;
  font:600 12px/1 var(--mc-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--mc-accent)}
.mj-game .mc-board{width:100%; max-width:760px; margin:0 auto; display:flex; flex-direction:column;
  gap:14px; align-items:center}
.mj-game .mc-seatboard{position:relative; width:100%; margin:0 auto; border:2px solid var(--mc-accent);
  border-radius:14px; overflow:hidden;
  cursor:pointer; user-select:none; touch-action:manipulation; background:var(--mc-card);
  padding:10px; display:grid; gap:5px}
.mj-game .mc-seatboard.active{border-color:var(--mc-accent-lt);
  box-shadow:0 10px 26px var(--mc-soft), inset 0 0 34px rgba(0,0,0,.10)}
.mj-game .mc-cell{position:relative; aspect-ratio:3/4; border-radius:7px; background:transparent;
  display:flex; align-items:center; justify-content:center; transition:transform .12s}
.mj-game .mc-cell .tl{width:100%; height:100%; margin:0}
.mj-game .mc-cell .tl:hover{transform:none}
.mj-game .mc-cell.mc-gone{visibility:hidden}
.mj-game .mc-cell.mc-sel{transform:scale(1.06); z-index:3; filter:drop-shadow(0 0 0 var(--mc-accent))}
.mj-game .mc-cell.mc-sel::after{content:""; position:absolute; inset:-3px; border-radius:9px;
  border:3px solid var(--mc-accent-lt); box-shadow:0 0 12px var(--mc-accent-lt)}
.mj-game .mc-cell.mc-bad{animation:mcShake .3s}
@keyframes mcShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.mj-game .mc-cell.mc-pop{animation:mcPop .4s ease-out}
@keyframes mcPop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(0)}}

/* Face-down seat board — other players' tiles stay hidden but the board is shown turned over */
.mj-game .mc-seatboard.facedown{cursor:default; background:linear-gradient(135deg,#16352A,#0E241C)}
.mj-game .mc-fdgrid{display:grid; gap:5px; padding:2px}
.mj-game .mc-fdlabel{position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:9; font:700 12px/1 var(--mc-sans); letter-spacing:.16em; text-transform:uppercase;
  color:#F3EEE2; background:rgba(14,36,28,.62); border:1px solid rgba(201,169,106,.5);
  padding:6px 12px; border-radius:8px; white-space:nowrap}
.mj-game .mc-backed{aspect-ratio:3/4; border-radius:7px;
  background:repeating-linear-gradient(45deg,#1B4332 0 8px,#16352A 8px 16px);
  border:1px solid rgba(201,169,106,.35);
  display:flex; align-items:center; justify-content:center}
.mj-game .mc-backed svg{width:46%; height:64%; display:block; opacity:.85}

/* link line overlay */
.mj-game .mc-fx{position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden}
.mj-game .mc-board .mc-fx{position:absolute}
.mj-game .mc-link{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.mj-game .mc-spark{position:absolute; width:9px; height:9px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,var(--mc-accent-lt),var(--mc-accent-dk) 70%,transparent 72%)}

/* seats strip */
.mj-game .mc-seats{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.mj-game .mc-seat{display:flex; align-items:center; gap:10px; background:var(--mc-card);
  border:1px solid var(--mc-line); border-radius:12px; padding:10px 14px; min-width:150px}
.mj-game .mc-seat .mc-dot{width:12px; height:12px; border-radius:50%; background:var(--mc-line); flex:none}
.mj-game .mc-seat.active .mc-dot{background:var(--mc-accent)}
.mj-game .mc-seat.active{border-color:var(--mc-accent); box-shadow:0 0 0 2px var(--mc-accent-soft)}
.mj-game .mc-seat .mc-sname{font:600 14px/1.1 var(--mc-sans); color:var(--mc-fg)}
.mj-game .mc-seat .mc-sstat{font:600 12px/1.2 var(--mc-sans); color:var(--mc-muted)}

/* ---------- setup / overlay panels (reuse the family look) ---------- */
.mj-game .mc-setup{background:var(--mc-card); border:1px solid var(--mc-line); border-radius:18px;
  padding:24px; box-shadow:var(--mc-shadow-md)}
.mj-game .mc-setup:not([hidden]){display:block}
.mj-game .mc-setup h2{font:700 26px/1.1 var(--mc-serif); color:var(--mc-heading); margin:0 0 6px}
.mj-game .mc-setup p.mc-sub{font:400 15px/1.5 var(--mc-sans); color:var(--mc-muted); margin:0 0 18px}
.mj-game .mc-field{margin:0 0 18px}
.mj-game .mc-field>label{display:block; font:600 13px/1 var(--mc-sans); letter-spacing:.04em;
  color:var(--mc-heading); margin-bottom:8px}
.mj-game .mc-seatnames{display:flex; gap:10px; flex-wrap:wrap}
.mj-game .mc-seatnames input{font:500 14px/1 var(--mc-sans); color:var(--mc-fg); background:var(--mc-panel);
  border:1px solid var(--mc-line); border-radius:10px; padding:11px 13px; width:160px}
.mj-game .mc-seatnames input:focus{outline:none; border-color:var(--mc-accent)}
.mj-game .mc-seatcount{display:flex; gap:10px; flex-wrap:wrap}
.mj-game .mc-chip{font:600 14px/1 var(--mc-sans); color:var(--mc-heading); background:var(--mc-panel);
  border:1px solid var(--mc-line); border-radius:99px; padding:11px 18px; cursor:pointer; transition:.15s}
.mj-game .mc-chip:hover{background:var(--mc-card); border-color:var(--mc-accent)}
.mj-game .mc-chip[aria-pressed="true"]{background:var(--mc-accent); color:#FFFFFF; border-color:var(--mc-accent)}
.mj-game .mc-levelgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.mj-game .mc-lvlbtn{font:600 14px/1.2 var(--mc-sans); color:var(--mc-heading); background:var(--mc-panel);
  border:1px solid var(--mc-line); border-radius:12px; padding:12px 10px; cursor:pointer; transition:.15s;
  display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:left}
.mj-game .mc-lvlbtn:hover{background:var(--mc-card); border-color:var(--mc-accent)}
.mj-game .mc-lvlbtn .mc-ln{font:700 13px/1 var(--mc-serif); color:var(--mc-accent)}
.mj-game .mc-lvlbtn .mc-ld{font:500 11px/1.2 var(--mc-sans); color:var(--mc-muted)}
.mj-game .mc-playbtn{font:700 16px/1 var(--mc-sans); color:#FFFFFF; background:var(--mc-strong);
  border:none; border-radius:12px; padding:15px 28px; cursor:pointer; transition:.15s;
  box-shadow:0 6px 16px var(--mc-soft)}
.mj-game .mc-playbtn:hover{background:var(--mc-heading)}
.mj-game .mc-note{font:500 13px/1.5 var(--mc-sans); color:var(--mc-muted); margin-top:14px}

.mj-game .mc-overlay{position:fixed; inset:0; z-index:300; background:rgba(10,14,18,.6);
  display:flex; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(3px)}
.mj-game .mc-overlay[hidden]{display:none}
.mj-game .mc-panel{background:var(--mc-panel); border-radius:18px; padding:28px; max-width:520px; width:100%;
  box-shadow:0 30px 70px rgba(0,0,0,.4); border:1px solid var(--mc-line); border-top:3px solid var(--mc-accent)}
.mj-game .mc-panel h2{font:700 28px/1.1 var(--mc-serif); color:var(--mc-heading); margin:0 0 10px}
.mj-game .mc-panel p{font:400 15px/1.55 var(--mc-sans); color:var(--mc-fg); margin:0 0 16px}
.mj-game .mc-panel .mc-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.mj-game .mc-bigbtn{font:700 15px/1 var(--mc-sans); color:#FFFFFF; background:var(--mc-strong);
  border:none; border-radius:11px; padding:13px 22px; cursor:pointer; transition:.15s}
.mj-game .mc-bigbtn:hover{background:var(--mc-heading)}
.mj-game .mc-ghostbtn{font:600 15px/1 var(--mc-sans); color:var(--mc-heading); background:var(--mc-card);
  border:1px solid var(--mc-line); border-radius:11px; padding:13px 22px; cursor:pointer; transition:.15s}
.mj-game .mc-ghostbtn:hover{border-color:var(--mc-accent)}

.mj-game .mc-clearbanner{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:160;
  background:var(--mc-panel); border:2px solid var(--mc-accent); border-radius:16px; padding:18px 26px;
  text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.4); pointer-events:none}
.mj-game .mc-clearbanner .mc-cb-rule{height:2px; background:var(--mc-accent); margin:8px auto; width:60%}
.mj-game .mc-clearbanner h3{font:700 24px/1 var(--mc-serif); color:var(--mc-heading); margin:0}
.mj-game .mc-clearbanner .mc-cb-sub{font:600 14px/1.2 var(--mc-sans); color:var(--mc-accent-dk); margin-top:6px}

/* ---------- Help overlay (opened by the top-right "?") ---------- */
.mj-game .mc-help{ position:fixed; inset:0; z-index:92; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(10,14,18,.52); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .18s ease; }
.mj-game .mc-help[hidden]{ display:none; }
.mj-game .mc-help.show{ opacity:1; }
.mj-game .mc-help-card{ position:relative; width:min(560px,94vw); max-height:86vh; overflow:auto;
  padding:26px 26px 28px; border-radius:16px;
  background:linear-gradient(180deg, var(--mc-card), var(--mc-panel));
  border:1px solid var(--mc-accent-edge);
  box-shadow:0 0 0 4px var(--mc-accent-soft), var(--mc-shadow-lg), inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateY(8px); transition:transform .18s ease; }
.mj-game .mc-help.show .mc-help-card{ transform:translateY(0); }
.mj-game .mc-help-card h2{ font-family:var(--mc-serif,Georgia,serif); font-size:24px; color:var(--mc-heading); margin:0 0 12px; }
.mj-game .mc-help-card h3{ font-family:var(--mc-serif,Georgia,serif); font-size:16px; color:var(--mc-heading); margin:18px 0 6px; }
.mj-game .mc-help-lead{ max-width:62ch; font-size:14px; line-height:1.66; color:var(--mc-fg); margin:0 0 4px; }
.mj-game .mc-help-card p{ max-width:64ch; font-size:13.5px; line-height:1.72; color:var(--mc-muted); margin:8px 0 0; }
.mj-game .mc-help-note{ border-top:1px solid var(--mc-line); padding-top:10px; margin-top:16px !important;
  font-size:12px; opacity:.85; }
.mj-game .mc-help-x{ position:absolute; top:12px; right:12px; width:34px; height:34px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font:inherit;
  font-size:22px; line-height:1; color:var(--mc-strong);
  background:linear-gradient(180deg, var(--mc-card), var(--mc-panel));
  border:1px solid var(--mc-line); border-radius:50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--mc-shadow-sm);
  transition:border-color .15s, color .15s, transform .12s; }
.mj-game .mc-help-x:hover{ border-color:var(--mc-accent); color:var(--mc-accent); transform:translateY(-1px); }
.mj-game .mc-help-x:focus-visible{ outline:2px solid var(--mc-accent); outline-offset:2px; }

@media(max-width:880px){
  .mj-game .mc-levelgrid{grid-template-columns:repeat(2,1fr)}
}
/* Narrow phones: the HUD must not push the level, clock, "Left" counter and
   buttons past the right edge. Drop the auto margin, shrink the fixed bits
   and let every group wrap onto its own line. */
@media(max-width:600px){
  .mj-game .mc-hud{gap:8px 10px; padding:10px 12px}
  .mj-game .mc-level .mc-no{font-size:19px}
  .mj-game .mc-level .mc-slash{font-size:13px}
  .mj-game .mc-level .mc-name{font-size:12px; margin-left:2px}
  .mj-game .mc-pips{gap:5px}
  .mj-game .mc-pip{width:8px; height:8px}
  .mj-game .mc-timer{margin-left:0; gap:7px}
  .mj-game .mc-timer-num{font-size:17px}
  .mj-game .mc-timerbar{width:54px}
  .mj-game .mc-left b{font-size:17px}
  .mj-game .mc-newbtn{padding:8px 13px; font-size:12px}
}