/* ============================================================
   Tileborne Spot the Difference — game styles (unified shell)
   Scoped under .mj-game so the shared shell's appearance system
   (background x accent, day/night) drives the whole board.
   The felt stays green like a real mahjong table; the accent
   follows the theme you pick in the menu.
   ============================================================ */
.mj-game .spotdiff{
  /* felt is fixed green like a real table; accent follows the shell theme */
  --felt-1:#1B4332; --felt-2:#0E241C;
  --brass:var(--g-accent); --brass-lt:var(--g-accent-lt, #C9A96A);
  --copper:var(--g-accent-dk, #B5713C); --copper-lt:var(--g-accent-lt, #D08A4E);
  --copper-soft:var(--g-accent-soft, rgba(176,141,87,.18));
  --slate:#2F5D6E; --aubergine:#6E4A7A;
  --ink:var(--g-fg, #14261F); --cream:var(--g-card, #F5F0E6); --paper:var(--g-panel, #FDFBF7);
  --muted:var(--g-muted, #68766F); --rule:var(--g-line, rgba(27,67,50,.14));
  --tag-bg:rgba(14,36,28,.55); --on-dark:var(--g-fg-on-dark, #F3EEE2);
  --bad:#F0B79A; --accent-ink:var(--g-heading, #1B4332); --heading:var(--g-heading, #1B4332);
  --on-brass:var(--g-on-accent, #FFFFFF);
  --track:var(--g-track, var(--rule));
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:var(--g-sans, 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);
  color:var(--ink); background:transparent;
  width:100%; max-width:1120px; margin:0 auto; padding:22px 16px 56px; position:relative; box-sizing:border-box;
}
.mj-game[data-night="1"] .spotdiff{ --felt-2:#06130D; }
/* The coordinated themes define --g-on-accent, but the plain background + accent
   path never did, so brass fell back to white type on gold. Brass is a light
   accent, so it takes dark ink; the other accents keep their white fallback. */
.mj-game[data-accent="brass"] .spotdiff{ --on-brass:var(--g-on-accent, #241A08); }
/* Green daytime: the setup plaque sits on the parchment stage, so the theme's
   muted grey (#6E7F72) drops to 4.11:1 on that light ground — shy of the 4.5:1
   small-text floor. Nudge it darker, scoped to the setup plaque's muted text. */
.mj-game[data-theme="green"][data-night="1"] .spotdiff .sd-setup .sd-sub,
.mj-game[data-theme="green"][data-night="1"] .spotdiff .sd-setup .sd-setmeta,
.mj-game[data-theme="green"][data-night="1"] .spotdiff .sd-setup .sd-note{ color:#65766A; }
.mj-game .spotdiff *{ box-sizing:border-box; }

.mj-game .spotdiff .sd-eyebrow{font:600 11px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--brass)}

/* HUD */
.mj-game .spotdiff .sd-hud{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--cream); border:1px solid var(--rule); border-radius:16px;
  padding:13px 18px; box-shadow:var(--g-shadow-sm, 0 6px 18px rgba(14,36,28,.12))}
.mj-game .spotdiff .sd-level{display:flex; align-items:baseline; gap:8px}
.mj-game .spotdiff .sd-level .sd-no{font:700 26px/1 var(--serif); color:var(--accent-ink)}
.mj-game .spotdiff .sd-level .sd-slash{font:600 16px/1 var(--serif); color:var(--brass)}
.mj-game .spotdiff .sd-level .sd-name{font:600 15px/1 var(--sans); color:var(--ink); margin-left:4px}
.mj-game .spotdiff .sd-lives{display:flex; align-items:center; gap:9px}
.mj-game .spotdiff .sd-pips{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.mj-game .spotdiff .sd-pip{width:10px; height:10px; border-radius:50%; border:1.5px solid var(--brass);
  background:transparent; transition:.25s}
.mj-game .spotdiff .sd-pip.done{background:var(--brass); border-color:var(--brass)}
.mj-game .spotdiff .sd-pip.current{background:transparent; border-color:var(--copper);
  box-shadow:0 0 0 3px var(--copper-soft)}
.mj-game .spotdiff .sd-timer{display:flex; align-items:center; gap:10px; margin-left:auto}
.mj-game .spotdiff .sd-timer-num{font:700 24px/1 var(--serif); color:var(--accent-ink); font-variant-numeric:tabular-nums}
.mj-game .spotdiff .sd-timer-num.warn{color:var(--copper)}
.mj-game .spotdiff .sd-timer-num .sd-unit{font-size:13px; color:var(--brass); margin-left:2px}
.mj-game .spotdiff .sd-timerbar{width:130px; height:8px; border-radius:99px; background:var(--track); overflow:hidden}
.mj-game .spotdiff .sd-timerfill{height:100%; width:100%; background:linear-gradient(90deg,var(--brass),var(--brass-lt)); transition:width 1s linear}
.mj-game .spotdiff .sd-timerfill.warn{background:linear-gradient(90deg,var(--copper),var(--copper-lt))}
.mj-game .spotdiff .sd-found{display:flex; align-items:baseline; gap:6px}
.mj-game .spotdiff .sd-found b{font:700 22px/1 var(--serif); color:var(--accent-ink)}

/* Boards */
.mj-game .spotdiff .sd-boards{display:flex; gap:16px; margin-top:18px}
.mj-game .spotdiff .sd-boardwrap{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px}
.mj-game .spotdiff .sd-boardlabel{display:flex; align-items:center; justify-content:space-between;
  font:600 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--brass)}
.mj-game .spotdiff .sd-board{position:relative; width:100%; aspect-ratio:640/480; border-radius:18px; overflow:hidden;
  cursor:crosshair; user-select:none; touch-action:manipulation;
  border:3px solid var(--brass); box-shadow:0 14px 34px rgba(14,36,28,.30), inset 0 0 60px rgba(0,0,0,.35);
  background:var(--felt-2)}
.mj-game .spotdiff .sd-board:active{border-color:var(--brass-lt)}
.mj-game .spotdiff .sd-board svg{width:100%; height:100%; display:block; pointer-events:none}
.mj-game .spotdiff .sd-felt{position:absolute; inset:0; z-index:0; pointer-events:none}
.mj-game .spotdiff .sd-items{position:absolute; inset:0; z-index:1; pointer-events:none}
.mj-game .spotdiff .sd-markers{position:absolute; inset:0; z-index:2; pointer-events:none}
.mj-game .spotdiff .sd-item{position:absolute; left:0; top:0}
.mj-game .spotdiff .sd-item svg{width:100%; height:100%; display:block}
.mj-game .spotdiff .sd-item .tl{width:100%; height:100%; margin:0}
.mj-game .spotdiff .sd-item .tl:hover{transform:none}
.mj-game .spotdiff .sd-tag{position:absolute; top:10px; left:10px; z-index:3; font:700 11px/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark); background:var(--tag-bg);
  border:1px solid rgba(201,169,106,.5); padding:5px 9px; border-radius:8px; backdrop-filter:blur(3px)}

/* popup score */
.mj-game .spotdiff .sd-pop{position:absolute; transform:translate(-50%,-50%); font:700 20px/1 var(--serif);
  pointer-events:none; z-index:5; text-shadow:0 2px 6px rgba(0,0,0,.4);
  animation:sdPop .8s ease-out forwards}
.mj-game .spotdiff .sd-pop.good{color:var(--brass-lt)}
.mj-game .spotdiff .sd-pop.bad{color:var(--bad)}
@keyframes sdPop{0%{opacity:0; transform:translate(-50%,-30%) scale(.7)}
  20%{opacity:1} 100%{opacity:0; transform:translate(-50%,-150%) scale(1.05)}}

/* Seats */
.mj-game .spotdiff .sd-seats{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.mj-game .spotdiff .sd-seat{flex:1; min-width:120px; background:var(--paper); border:1px solid var(--rule);
  border-left:5px solid var(--seat); border-radius:13px; padding:12px 14px; transition:.22s; position:relative}
.mj-game .spotdiff .sd-seat.active{border-color:var(--brass); background:var(--cream);
  box-shadow:0 0 0 2px rgba(176,141,87,.35), var(--g-shadow-md, 0 10px 24px rgba(14,36,28,.18)); transform:translateY(-3px)}
.mj-game .spotdiff .sd-seat .sd-seatname{font:600 13px/1.2 var(--sans); color:var(--ink); display:flex; align-items:center; gap:7px}
.mj-game .spotdiff .sd-seat .sd-dot{width:10px; height:10px; border-radius:50%; background:var(--seat); flex:none}
.mj-game .spotdiff .sd-seat .sd-seatval{font:700 30px/1 var(--serif); color:var(--accent-ink); font-variant-numeric:tabular-nums; margin-top:6px}
.mj-game .spotdiff .sd-seat .sd-turn{position:absolute; top:10px; right:12px; font:700 10px/1 var(--sans);
  letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--seat); padding:4px 8px; border-radius:99px; opacity:0; transition:.2s}
.mj-game .spotdiff .sd-seat.active .sd-turn{opacity:1}

/* Setup - one compact plaque instead of a form. The level list collapses to a
   numeral strip and the optional seat-name row stays folded away, so the card
   reads at a glance instead of scrolling like a settings page. */
.mj-game .spotdiff .sd-setup:not([hidden]){display:flex; justify-content:center; padding:18px 0 0}
.mj-game .spotdiff .sd-setup .sd-card{position:relative; max-width:560px; padding:34px 34px 26px; overflow:hidden;
  background-image:radial-gradient(130% 104px at 50% -38px, var(--g-accent-soft), transparent 72%);
  box-shadow:var(--g-shadow-lg, 0 24px 64px rgba(0,0,0,.5)), inset 0 0 0 1px var(--g-accent-edge)}
.mj-game .spotdiff .sd-crest{width:52px; height:52px; margin:0 auto 13px; color:var(--brass)}
.mj-game .spotdiff .sd-crest svg{width:100%; height:100%; display:block}
.mj-game .spotdiff .sd-kicker{font:700 10.5px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 9px; text-align:center}
.mj-game .spotdiff .sd-setup .sd-card h2{font:700 34px/1.06 var(--serif); letter-spacing:-.01em; margin:0 0 9px}
.mj-game .spotdiff .sd-setup .sd-card .sd-sub{font:400 14px/1.5 var(--sans); color:var(--muted); margin:0 auto 18px; max-width:44ch}
.mj-game .spotdiff .sd-rule{position:relative; height:1px; margin:0 0 18px;
  background:linear-gradient(90deg,transparent,var(--rule) 16%,var(--rule) 84%,transparent)}
.mj-game .spotdiff .sd-rule i{position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  transform:rotate(45deg); background:var(--brass)}
.mj-game .spotdiff .sd-setblock{margin:0 0 15px}
.mj-game .spotdiff .sd-setlabel{display:block; font:700 10.5px/1 var(--sans); letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:9px}
.mj-game .spotdiff .sd-levelstrip{display:flex; flex-wrap:wrap; gap:6px}
.mj-game .spotdiff .sd-lvlchip{width:31px; height:31px; padding:0; cursor:pointer; border-radius:9px;
  font:700 13px/1 var(--serif); font-variant-numeric:tabular-nums; color:var(--ink);
  background:transparent; border:1px solid var(--rule); transition:.15s}
.mj-game .spotdiff .sd-lvlchip:hover{border-color:var(--brass); color:var(--accent-ink); background:var(--g-accent-soft)}
.mj-game .spotdiff .sd-lvlchip.on{color:var(--on-brass); border-color:transparent;
  background:linear-gradient(180deg,var(--brass-lt),var(--brass));
  box-shadow:0 4px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.30)}
.mj-game .spotdiff .sd-setmeta{font:500 12px/1.45 var(--sans); color:var(--muted); margin:10px 0 0}


/* Overlay / modals */
.mj-game .spotdiff .sd-overlay{position:fixed; inset:0; z-index:130; display:none; align-items:center; justify-content:center;
  padding:22px; background:rgba(8,18,13,.74); backdrop-filter:blur(7px)}
.mj-game .spotdiff .sd-overlay.show{display:flex; animation:sdFade .22s ease}
@keyframes sdFade{from{opacity:0}to{opacity:1}}
.mj-game .spotdiff .sd-card{width:100%; max-width:440px; background:var(--paper); border:1px solid var(--brass);
  border-radius:22px; padding:30px 28px; text-align:center; box-shadow:0 24px 64px rgba(0,0,0,.5);
  animation:sdPopIn .3s cubic-bezier(.2,1.3,.5,1)}
@keyframes sdPopIn{from{transform:scale(.9); opacity:0}to{transform:scale(1); opacity:1}}
.mj-game .spotdiff .sd-card h2{font:700 30px/1.05 var(--serif); color:var(--heading); margin:0 0 6px}
.mj-game .spotdiff .sd-card .sd-sub{font:400 14px/1.6 var(--sans); color:var(--muted); margin:0 auto 18px; max-width:36ch}
.mj-game .spotdiff .sd-card .sd-sub b{color:var(--ink); font-weight:600}

.mj-game .spotdiff .sd-seg{display:flex; gap:8px; justify-content:flex-start}
.mj-game .spotdiff .sd-seg button{flex:0 1 62px; font:700 14px/1 var(--sans); padding:10px 0; cursor:pointer;
  background:var(--cream); color:var(--ink); border:1.5px solid var(--rule); border-radius:10px; transition:.16s}
.mj-game .spotdiff .sd-seg button:hover{border-color:var(--brass); background:var(--g-accent-soft)}
.mj-game .spotdiff .sd-seg button.on{color:var(--on-brass); border-color:transparent;
  background:linear-gradient(180deg,var(--brass-lt),var(--brass));
  box-shadow:0 4px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.30)}
.mj-game .spotdiff .sd-names{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 15px}
.mj-game .spotdiff .sd-names[hidden]{display:none}
.mj-game .spotdiff .sd-namepill{display:flex; align-items:center; gap:7px; flex:1 1 148px; min-width:0}
.mj-game .spotdiff .sd-namepill .sd-swatch{width:11px; height:11px; border-radius:50%; flex:none}
.mj-game .spotdiff .sd-namepill input{flex:1; min-width:0; font:500 13px/1 var(--sans); color:var(--ink); padding:8px 11px;
  border:1px solid var(--rule); border-radius:9px; background:transparent}
.mj-game .spotdiff .sd-namepill input::placeholder{color:var(--muted)}
.mj-game .spotdiff .sd-namepill input:focus{outline:2px solid var(--brass); outline-offset:1px}
.mj-game .spotdiff .sd-note{font:400 11.5px/1.5 var(--sans); color:var(--muted); margin:11px 0 0; text-align:center}


.mj-game .spotdiff .sd-cta{width:100%; margin-top:16px; font:700 16px/1 var(--sans); letter-spacing:.04em; color:var(--on-brass);
  background:linear-gradient(180deg,var(--brass-lt),var(--brass)); border:none; border-radius:13px;
  padding:15px; cursor:pointer; transition:.16s;
  box-shadow:0 8px 22px var(--copper-soft, rgba(176,141,87,.4)), inset 0 1px 0 rgba(255,255,255,.28)}
.mj-game .spotdiff .sd-cta:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(176,141,87,.5)}
.mj-game .spotdiff .sd-ghost{margin-top:10px; font:600 13px/1 var(--sans); color:var(--accent-ink); background:transparent;
  border:1px solid var(--rule); border-radius:11px; padding:11px; width:100%; cursor:pointer; transition:.15s}
.mj-game .spotdiff .sd-ghost:hover{background:var(--cream)}

/* result seal */
.mj-game .spotdiff .sd-seal{width:96px; height:96px; margin:0 auto 14px; border-radius:50%;
  border:3px double var(--brass); display:flex; align-items:center; justify-content:center;
  color:var(--brass); font:700 13px/1 var(--serif); letter-spacing:.18em; text-transform:uppercase;
  background:radial-gradient(circle,rgba(176,141,87,.10),transparent 70%); transform:rotate(-8deg)}
.mj-game .spotdiff .sd-ranklist{margin:6px 0 4px; display:flex; flex-direction:column; gap:9px}
.mj-game .spotdiff .sd-rankrow{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px;
  background:var(--cream); border:1px solid var(--rule); font:500 14px/1 var(--sans)}
.mj-game .spotdiff .sd-rankrow .sd-medal{font:700 18px/1 var(--serif); color:var(--brass); width:30px; text-align:center}
.mj-game .spotdiff .sd-rankrow .sd-rname{font-weight:600; color:var(--ink)}
.mj-game .spotdiff .sd-rankrow .sd-rscore{margin-left:auto; font:700 20px/1 var(--serif); color:var(--accent-ink); font-variant-numeric:tabular-nums}
.mj-game .spotdiff .sd-tier{font:700 20px/1 var(--serif); color:var(--copper); margin:4px 0 2px}
.mj-game .spotdiff .sd-summary{font:400 13px/1.6 var(--sans); color:var(--muted); margin-top:6px}



/* found ripple */
.mj-game .spotdiff .sd-ring{position:absolute; border:3px solid var(--brass-lt); border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; animation:sdRing .6s ease-out forwards}
@keyframes sdRing{0%{opacity:.9; width:8px; height:8px} 100%{opacity:0; width:92px; height:92px}}

/* help overlay (opened by the top-right "?") */
.mj-game .spotdiff .sd-help{position:fixed; inset:0; z-index:135; display:none; align-items:center; justify-content:center;
  padding:22px; background:rgba(8,18,13,.74); backdrop-filter:blur(7px)}
.mj-game .spotdiff .sd-help.show{display:flex; animation:sdFade .22s ease}
.mj-game .spotdiff .sd-help-card{position:relative; width:min(640px,94vw); max-height:86vh; overflow:auto;
  background:var(--paper); border:1px solid var(--brass); border-radius:22px; padding:30px 28px; box-shadow:var(--g-shadow-lg, 0 24px 64px rgba(0,0,0,.5))}
.mj-game .spotdiff .sd-help-x{position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--rule); background:var(--cream); color:var(--ink); font:700 20px/1 var(--sans); cursor:pointer}
.mj-game .spotdiff .sd-help-card h2{font:700 28px/1.05 var(--serif); color:var(--heading); margin:0 0 8px}
.mj-game .spotdiff .sd-help-card h3{font:700 16px/1.2 var(--serif); color:var(--accent-ink); margin:18px 0 6px}
.mj-game .spotdiff .sd-help-card p{font:400 14px/1.65 var(--sans); color:var(--muted); margin:0 0 8px}
.mj-game .spotdiff .sd-help-card p b{color:var(--ink); font-weight:600}
.mj-game .spotdiff .sd-help-note{font:400 12.5px/1.6 var(--sans); color:var(--muted); margin-top:14px;
  border-top:1px solid var(--rule); padding-top:12px}

@media (max-width:880px){
  .mj-game .spotdiff .sd-boards{flex-direction:column}
  .mj-game .spotdiff .sd-hud{gap:12px}
  .mj-game .spotdiff .sd-timer{margin-left:0; width:100%; justify-content:space-between}
  .mj-game .spotdiff .sd-timerbar{flex:1; max-width:none; margin-left:10px}
}
/* Fullscreen (handled by the shell on .mj-game) — let the board stretch. */
.mj-game.is-fullscreen .spotdiff{position:absolute; inset:0; width:100%; height:100%; max-width:none; margin:0; padding:12px;
  display:flex; flex-direction:column; background:transparent}
.mj-game.is-fullscreen .spotdiff #sdPlay:not([hidden]){display:flex; flex-direction:column; flex:1 1 auto; min-height:0; gap:10px}
.mj-game.is-fullscreen .spotdiff #sdSetup:not([hidden]){display:flex; align-items:center; justify-content:center; flex:1 1 auto; min-height:0; overflow:auto; padding:16px}
.mj-game.is-fullscreen .spotdiff .sd-hud{flex:0 0 auto; border-radius:14px; padding:11px 14px; gap:12px}
.mj-game.is-fullscreen .spotdiff .sd-boards{flex:1 1 auto; min-height:0; align-items:stretch; margin-top:10px}
.mj-game.is-fullscreen .spotdiff .sd-boardwrap{flex:1 1 0; min-height:0}
.mj-game.is-fullscreen .spotdiff .sd-board{aspect-ratio:auto; flex:1 1 auto; width:100%; min-height:0}
.mj-game.is-fullscreen .spotdiff .sd-seats{flex:0 0 auto; margin-top:10px}
.mj-game.is-fullscreen .spotdiff .sd-boardlabel{font-size:11px}

/* Narrow phones: the level strip is allowed to wrap and the seat switch fills
   the row, so neither forces a horizontal scroll. */
@media (max-width:560px){
  .mj-game .spotdiff .sd-setup .sd-card{padding:26px 22px 20px}
  .mj-game .spotdiff .sd-setup .sd-card h2{font-size:29px}
  .mj-game .spotdiff .sd-lvlchip{width:29px; height:29px; font-size:12.5px}
  .mj-game .spotdiff .sd-seg button{flex:1 1 0}
}

@media (prefers-reduced-motion:reduce){
  .mj-game .spotdiff .sd-pop,.mj-game .spotdiff .sd-card,.mj-game .spotdiff .sd-overlay,
  .mj-game .spotdiff .sd-ring,.mj-game .spotdiff .sd-help{animation:none !important}
}