/* ============================================================
   Tileborne Blocks — game visuals on the shared shell.
   Everything reads the shell's --g-* tokens so the board, the
   frame and the chrome all move together with the chosen theme.
   No hard-coded colors here.
   ============================================================ */
.mj-game .mb-wrap{
  width:100%; max-width:760px; margin:auto;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color:var(--g-fg);
}
.mj-game .mb-wrap h2{ font:700 22px/1.2 var(--serif,Georgia,serif); color:var(--g-heading); margin:0 0 8px; }
.mj-game .mb-wrap h3{ margin:0 0 9px; font:600 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--g-accent); }

/* ---------- HUD chips ---------- */
.mj-game .mb-hud{ width:100%; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mj-game .mb-lvchip{ display:flex; align-items:baseline; gap:6px;
  background:var(--g-card); border:1px solid var(--g-line); border-radius:12px;
  padding:8px 14px; box-shadow:var(--g-shadow-sm); }
.mj-game .mb-lvchip b{ font:700 26px/1 var(--serif); color:var(--g-heading); }
.mj-game .mb-lvchip span{ font-size:13px; color:var(--g-muted); }
.mj-game .mb-lvchip em{ font-style:normal; font-size:13px; color:var(--g-muted); margin-left:4px; }
.mj-game .mb-stats{ display:flex; gap:16px; flex-wrap:wrap; }
.mj-game .mb-stat{ display:flex; flex-direction:column; }
.mj-game .mb-stat i{ font-style:normal; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--g-muted); }
.mj-game .mb-stat b{ font:700 19px/1.2 var(--sans); color:var(--g-fg); font-variant-numeric:tabular-nums; }
.mj-game .mb-dots{ display:flex; gap:5px; margin-left:auto; }
.mj-game .mb-dot{ width:16px; height:5px; border-radius:3px; background:var(--g-line); transition:.2s; }
.mj-game .mb-dot.done{ background:var(--g-accent); }
.mj-game .mb-dot.now{ background:var(--g-accent-lt); box-shadow:0 0 0 2px var(--g-accent-soft); }

/* ---------- play field ---------- */
.mj-game .mb-boardwrap{ position:relative; width:100%; max-width:460px; margin:0 auto; }
.mj-game .mb-well{
  position:relative; flex:0 0 auto; padding:12px;
  background:linear-gradient(180deg, var(--g-card), var(--g-bg));
  border:3px solid var(--g-accent-edge); border-radius:16px;
  box-shadow:var(--g-shadow-lg), inset 0 0 60px rgba(0,0,0,.22);
}
.mj-game .mb-grid{ display:grid; gap:var(--mb-gap,3px); position:relative; z-index:2;
  grid-template-columns:repeat(10, var(--cs,30px)); }
.mj-game .mb-cell{ width:var(--cs,30px); height:var(--cs,30px); border-radius:5px;
  background:transparent; box-shadow:inset 0 0 0 1px var(--g-line); }
.mj-game .mb-cell.filled{ background:none; box-shadow:none; display:flex; align-items:center; justify-content:center; }
.mj-game .mb-cell.filled .tl{ width:100%; height:100%; border-radius:6px; overflow:hidden;
  box-shadow:0 2px 5px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.14); }
.mj-game .mb-cell.filled .tl svg{ width:100%; height:100%; display:block; }

/* active piece rides above the settled grid */
.mj-game .mb-piece{ position:absolute; top:0; left:0; z-index:5; pointer-events:none; display:grid; gap:var(--mb-gap,3px); }
.mj-game .mb-piece .pb{ width:var(--cs,30px); height:var(--cs,30px); display:flex; align-items:center; justify-content:center; }
.mj-game .mb-piece .pb.empty{ background:none; }
.mj-game .mb-piece .pb .tl{ width:100%; height:100%; border-radius:6px; overflow:hidden;
  box-shadow:0 3px 8px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.16); }
.mj-game .mb-piece .pb .tl svg{ width:100%; height:100%; display:block; }

/* ---------- on-screen controls ---------- */
.mj-game .mb-ctrl{ width:100%; max-width:460px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.mj-game .mb-ctrlbtn{
  flex:1 1 0; min-width:46px; min-height:52px; cursor:pointer;
  font:700 20px/1 var(--sans); color:var(--g-fg);
  background:linear-gradient(180deg, rgba(255,255,255,.28), var(--g-card));
  border:1px solid var(--g-line); border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--g-shadow-sm);
  transition:transform .08s, box-shadow .15s, border-color .15s, background .15s, color .15s;
  touch-action:none; -webkit-user-select:none; user-select:none;
}
.mj-game .mb-ctrlbtn:hover{ border-color:var(--g-accent); }
.mj-game .mb-ctrlbtn:active{ transform:translateY(1px); background:linear-gradient(180deg, var(--g-accent-lt), var(--g-accent)); color:var(--g-on-accent,#fff); border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--g-shadow-md); }
.mj-game .mb-ctrlbtn.mb-ghost{ flex:0 0 auto; min-width:84px; font-size:14px; }
.mj-game .mb-ctrlbtn.is-on{ background:linear-gradient(180deg, var(--g-accent-lt), var(--g-accent)); color:var(--g-on-accent,#fff); border-color:transparent; }

/* ---------- below the board: next + clears ---------- */
.mj-game .mb-below{ width:100%; max-width:460px; display:flex; gap:12px; flex-wrap:wrap; }
.mj-game .mb-card{ flex:1 1 180px; background:var(--g-card); border:1px solid var(--g-line);
  border-radius:14px; padding:12px 14px; box-shadow:var(--g-shadow-sm); }
.mj-game .mb-next{ display:flex; align-items:center; justify-content:flex-start; gap:10px; min-height:64px; flex-wrap:wrap; }
.mj-game .mb-next-box{ display:grid; gap:2px; }
.mj-game .mb-next-cell{ width:20px; height:20px; border-radius:4px; overflow:hidden;
  background:transparent; box-shadow:inset 0 0 0 1px var(--g-line); }
.mj-game .mb-next-cell .tl{ width:100%; height:100%; display:flex; }
.mj-game .mb-next-cell .tl svg{ width:100%; height:100%; display:block; }

/* compact next-piece strip in the HUD (narrow screens only). The box keeps a
   fixed 4x4 footprint, so the HUD height does not move with the shape of the
   next piece — the board is sized from that height. */
.mj-game .mb-nextmini{ display:none; align-items:center; gap:4px; margin-left:auto; }
.mj-game .mb-nextmini .mb-next-box{ display:grid; gap:1px; }
.mj-game .mb-nextmini .mb-next-cell{ width:11px; height:11px; border-radius:3px; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--g-line); }
.mj-game .mb-nextmini .mb-next-cell.empty{ box-shadow:none; }
.mj-game .mb-nextmini .mb-next-cell .tl{ width:100%; height:100%; display:flex; }
.mj-game .mb-nextmini .mb-next-cell .tl svg{ width:100%; height:100%; display:block; }
.mj-game .mb-log{ margin:0; padding:0; list-style:none; font-size:12.5px; color:var(--g-muted); max-height:92px; overflow:auto; }
.mj-game .mb-log li{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; border-bottom:1px dashed var(--g-line); }
.mj-game .mb-log li:last-child{ border-bottom:0; }
.mj-game .mb-log b{ color:var(--g-fg); font-variant-numeric:tabular-nums; }

/* ---------- about ---------- */
.mj-game .mb-about{ width:100%; max-width:460px; color:var(--g-muted); font-size:14px; line-height:1.65; }
.mj-game .mb-about p{ margin:0 0 12px; }
.mj-game .mb-about ul{ margin:0 0 4px; padding-left:18px; }
.mj-game .mb-about li{ margin:0 0 4px; }

/* ---------- overlays (level select + help) ---------- */
.mj-game .mb-modal{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:var(--g-glass); backdrop-filter:blur(8px); padding:18px; border-radius:18px; }
.mj-game .mb-modal-card{ position:relative; width:min(560px, 94%); max-height:90%; overflow:auto;
  background:var(--g-panel); color:var(--g-fg); border:1px solid var(--g-line); border-top:3px solid var(--g-accent);
  border-radius:18px; padding:24px 22px; box-shadow:var(--g-shadow-lg); }
.mj-game .mb-modal-x{ position:absolute; top:10px; right:12px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--g-line); background:var(--g-card); color:var(--g-fg); font-size:20px; line-height:1; cursor:pointer; }
.mj-game .mb-modal-x:hover{ border-color:var(--g-accent); color:var(--g-accent); }
.mj-game .mb-modal-sub{ color:var(--g-muted); font-size:13.5px; margin:0 0 16px; }
.mj-game .mb-help-lead{ color:var(--g-fg); font-size:14px; line-height:1.65; margin:0 0 14px; }
.mj-game .mb-modal-card h3{ font:600 12px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--g-accent); margin:18px 0 8px; }
.mj-game .mb-modal-card p{ color:var(--g-muted); font-size:13.5px; line-height:1.65; margin:0 0 10px; }
.mj-game .mb-modal-card kbd{ display:inline-block; min-width:20px; text-align:center; background:var(--g-card);
  border:1px solid var(--g-line); border-bottom-width:2px; border-radius:5px; padding:1px 6px; font:600 11px/1.5 var(--sans); color:var(--g-fg); }

.mj-game .mb-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; }
.mj-game .mb-lvcard{ text-align:left; cursor:pointer; background:var(--g-card); border:1px solid var(--g-line);
  border-radius:12px; padding:12px 14px; box-shadow:var(--g-shadow-sm); transition:transform .1s, border-color .15s, box-shadow .15s; }
.mj-game .mb-lvcard:hover:not(.locked){ transform:translateY(-2px); border-color:var(--g-accent); box-shadow:var(--g-shadow-md); }
.mj-game .mb-lvcard .mb-lvno{ font:700 13px/1 var(--sans); color:var(--g-accent); letter-spacing:.04em; }
.mj-game .mb-lvcard .mb-lvname{ font:700 17px/1.25 var(--serif); color:var(--g-heading); margin:4px 0 2px; }
.mj-game .mb-lvcard .mb-lvmeta{ font-size:12px; color:var(--g-muted); }
.mj-game .mb-lvcard.locked{ opacity:.5; cursor:not-allowed; }
.mj-game .mb-lvcard.locked .mb-lvname::after{ content:' 🔒'; font-size:13px; }

/* ---------- in-well result / pause overlay ---------- */
.mj-game .mb-ov{ position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:rgba(6,18,12,.82); border-radius:16px; padding:20px; text-align:center; }
.mj-game .mb-ovin{ max-width:380px; }
.mj-game .mb-ovin h2{ font:700 26px/1.2 var(--serif); color:var(--g-accent-lt); margin:0 0 8px; }
.mj-game .mb-ovin p{ color:var(--g-fg); font-size:14px; line-height:1.6; margin:0 0 16px; }
.mj-game .mb-ov-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.mj-game .mb-ov-btns button{ min-width:120px; }

/* ---------- fx layers (recolored to the live theme) ---------- */
.mj-game .mb-fx{ position:absolute; inset:0; z-index:14; pointer-events:none; overflow:hidden; border-radius:16px; }
.mj-game .mb-flash{ position:absolute; left:0; right:0; pointer-events:none; border-radius:4px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
  mix-blend-mode:screen; animation:mbFlash .42s ease-out forwards; }
@keyframes mbFlash{0%{opacity:0;transform:scaleX(.72)}35%{opacity:1;transform:scaleX(1.03)}100%{opacity:0;transform:scaleX(1.14)}}
.mj-game .mb-spark{ position:absolute; width:7px; height:7px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,#FFF8E2,var(--g-accent-lt)); animation:mbSpark .62s ease-out forwards; }
@keyframes mbSpark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
.mj-game .mb-pop{ position:absolute; font:700 24px/1 var(--serif); color:var(--g-accent-lt); pointer-events:none;
  text-shadow:0 2px 12px rgba(0,0,0,.6); animation:mbPop 1s ease-out forwards; }
@keyframes mbPop{0%{opacity:0;transform:translateY(6px) scale(.8)}22%{opacity:1;transform:translateY(-4px) scale(1.12)}
  100%{opacity:0;transform:translateY(-40px) scale(1)}}
.mj-game .mb-ring{ position:absolute; border-radius:50%; pointer-events:none; border:3px solid var(--g-accent-lt);
  animation:mbRing .7s ease-out forwards; }
@keyframes mbRing{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}}
.mj-game .mb-beam{ position:absolute; top:-6%; width:44px; height:112%; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, var(--g-accent-soft), transparent);
  animation:mbBeam .95s ease-out forwards; }
@keyframes mbBeam{0%{opacity:0;transform:translateX(0) skewX(-14deg)}25%{opacity:.85}
  100%{opacity:0;transform:translateX(-120px) skewX(-14deg)}}
.mj-game .mb-shard{ position:absolute; width:16px; height:21px; border-radius:3px; pointer-events:none;
  background:linear-gradient(150deg, var(--g-accent-lt), var(--g-accent)); box-shadow:0 0 10px var(--g-accent-soft);
  animation:mbShard 1.25s cubic-bezier(.25,.6,.3,1) forwards; }
@keyframes mbShard{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;
  transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
.mj-game .mb-wave{ position:absolute; left:0; right:0; height:3px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--g-accent-lt), transparent); }
@keyframes mbWave{0%{opacity:.9;transform:scaleY(1)}100%{opacity:0;transform:scaleY(6)}}
.mj-game .mb-float{ position:absolute; pointer-events:none; font:700 15px/1 var(--sans); color:var(--g-accent-lt);
  text-shadow:0 2px 10px rgba(0,0,0,.65); animation:mbFloat 1.05s ease-out forwards; }
@keyframes mbFloat{0%{opacity:0;transform:translateY(4px)}18%{opacity:1}100%{opacity:0;transform:translateY(-34px)}}

/* ---------- fullscreen: widen the board ---------- */
.mj-game.is-fullscreen .mb-boardwrap{ width:100%; max-width:820px; }
.mj-game.is-fullscreen .mb-below,
.mj-game.is-fullscreen .mb-ctrl,
.mj-game.is-fullscreen .mb-about{ max-width:820px; }

/* ---------- wide screens: board on the left, next/clears beside it ----------
   The stage is a fixed-height scroll box, so a single tall column drops "Coming
   up" under the fold. Two columns keep the next pieces in sight next to the
   board and let the board use the full height. */
@media (min-width:900px){
  .mj-game .mb-wrap{
    display:grid; max-width:1000px;
    grid-template-columns:auto minmax(220px, 290px);
    grid-template-areas:
      "hud   side"
      "board side"
      "ctrl  side"
      "about about";
    align-items:start; justify-content:center; column-gap:26px; row-gap:14px;
  }
  .mj-game .mb-hud{ grid-area:hud; }
  .mj-game .mb-boardwrap{ grid-area:board; }
  .mj-game .mb-ctrl{ grid-area:ctrl; }
  .mj-game .mb-below{ grid-area:side; flex-direction:column; max-width:none; }
  .mj-game .mb-below .mb-card{ flex:0 0 auto; }
  .mj-game .mb-about{ grid-area:about; max-width:none; }
}

/* ---------- phones and tablets: one compact HUD row above a full-height board ---------- */
@media (max-width:899px){
  .mj-game .mb-wrap{ gap:12px; }
  /* one-line HUD: level chip, the key stats and a compact next-piece strip.
     min-height reserves the row so the HUD height is the same before and after
     the first deal — the board fit is measured from it. */
  .mj-game .mb-hud{ gap:10px; min-height:52px; }
  .mj-game .mb-lvchip{ padding:5px 10px; border-radius:10px; }
  .mj-game .mb-lvchip b{ font-size:20px; }
  .mj-game .mb-lvchip span,
  .mj-game .mb-lvchip em{ font-size:11px; }
  .mj-game .mb-stats{ gap:11px; }
  .mj-game .mb-stat i{ font-size:9px; }
  .mj-game .mb-stat b{ font-size:15px; }
  .mj-game .mb-stat.mb-opt,
  .mj-game .mb-dots{ display:none; }
  .mj-game .mb-nextmini{ display:flex; }
  /* The full "Coming up" / "Clears" cards would push the board behind a scroll,
     and the clears log duplicates the Lines counter on a phone. The next piece
     moves into the HUD strip, so the board and controls both stay in view. */
  .mj-game .mb-below{ display:none; }
}

@media (max-width:560px){
  .mj-game .mb-well{ padding:8px; border-width:2px; }
  .mj-game .mb-grid{ gap:2px; }
  .mj-game .mb-piece{ gap:2px; }
  .mj-game .mb-ctrlbtn{ min-height:48px; }
}
@media (max-width:380px){
  .mj-game .mb-ctrlbtn.mb-ghost{ min-width:72px; }
}