@import url('./shell.css');

:root {
  color-scheme: dark;
  --page-bg: #07100f;
  --surface: #111b1a;
  --surface-raised: #172321;
  --text: #edf5f0;
  --muted: #91a8a1;
  --line: rgba(191, 218, 207, .14);
  --line-strong: rgba(191, 218, 207, .24);
  --accent: #4fe0aa;
  --accent-soft: rgba(79, 224, 170, .12);
  --gold: #e6bd68;
  --felt: #0f4c3d;
  --felt-dark: #082e27;
  --danger: #ff8d87;
}

body.game-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% -10%, rgba(40, 112, 89, .2), transparent 34rem),
    linear-gradient(145deg, #081311 0%, #07100f 50%, #091514 100%);
}

.game-page .site-nav { width: min(1420px, calc(100% - 32px)); margin-top: 16px; }
.game-page .site-brand { color: var(--text); }
.game-page .site-links a:hover { background: rgba(255,255,255,.06); }
.game-page .site-links a[aria-current="page"] { background: var(--accent-soft); color: #84f0c6; }

main { width: min(1420px, calc(100% - 32px)); margin: 22px auto 48px; }
h1, h2 { letter-spacing: -.02em; }
h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1; margin: 5px 0 0; }
h2 { font-size: 16px; margin: 2px 0 0; }
button, select, input { color: var(--text); }

.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.title-block { display:flex; flex-direction:column; }
.eyebrow, .section-kicker { color: var(--accent); font-size:10px; font-weight:800; letter-spacing:.18em; }
.top-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

section, .panel, details.panel {
  background: linear-gradient(155deg, rgba(25,38,36,.98), rgba(14,24,23,.98));
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
}

.board { display:grid; grid-template-columns:minmax(0, 1fr) minmax(310px, 370px); gap:16px; align-items:start; }
.left, .right { display:flex; flex-direction:column; gap:16px; min-width:0; }
.right { position:sticky; top:16px; }

.table-stage {
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:18px;
  border-color:var(--line);
  background:linear-gradient(155deg, #16211f, #0e1716);
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.table-hud { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.table-state { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.live-indicator { display:inline-flex; align-items:center; gap:7px; color:#c9ded6; font-size:12px; font-weight:700; }
.live-indicator i { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(79,224,170,.12), 0 0 12px var(--accent); }
.model-chip { border:1px solid rgba(79,224,170,.24); border-radius:999px; padding:3px 7px; color:#91d9bd; background:rgba(79,224,170,.07); font-size:10px; font-weight:750; }
.model-chip.error { border-color:rgba(255,141,135,.28); color:#ffaaa5; background:rgba(255,141,135,.07); }
#river-mini { color:rgba(230,244,237,.68); font-size:12px; display:flex; justify-content:flex-end; gap:12px; text-align:right; }

.player-zone { position:relative; z-index:2; margin-top:14px; padding:14px 14px 12px; border-radius:14px; background:#0a1211; border:1px solid rgba(255,255,255,.07); }
.hand-caption { margin-bottom:4px; color:rgba(230,244,237,.62); font-size:10px; font-weight:800; letter-spacing:.13em; }
.hand-main { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:end; gap:14px; min-width:0; overflow:visible; }
#hand { display:flex; flex-wrap:nowrap; align-items:flex-end; gap:2px; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:10px 2px 6px; }
#hand::-webkit-scrollbar { display:none; }
#tsumo { flex:0 0 auto; padding:10px 2px 6px 14px; border-left:1px solid rgba(230,244,237,.24); min-width:54px; }

.tile-btn { border:0; background:transparent; padding:0; margin:0 -4px 0 0; cursor:pointer; border-radius:5px; transition:transform .14s ease, filter .14s ease; }
.tile-btn:disabled { cursor:not-allowed; opacity:.52; }
.tile-img { display:block; width:44px; height:auto; filter:drop-shadow(0 5px 3px rgba(0,0,0,.28)); transition:transform .14s ease, filter .14s ease; }
:root[data-tile-theme="fluffy"] .tile-img {
  padding:3px 2px 4px;
  border:1px solid rgba(77, 75, 66, .18);
  border-bottom:3px solid #c5d2cc;
  border-radius:7px 7px 5px 5px;
  background:linear-gradient(145deg, #fffdf6 0%, #eee9df 100%);
}
:root[data-tile-theme="fluffy"] .tile-back {
  padding:0;
  border-color:rgba(77, 75, 66, .28);
  filter:hue-rotate(105deg) saturate(.7) brightness(.58) drop-shadow(0 5px 3px rgba(0,0,0,.28));
}
.tile-btn:hover:not(:disabled), .tile-btn:focus-visible { transform:translateY(-8px); filter:brightness(1.06); outline:none; }
.tile-btn:focus-visible .tile-img { outline:3px solid var(--accent); outline-offset:2px; border-radius:5px; }
.tile-choice .tile-img { outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }
.tile-efficiency .tile-img { outline:3px solid #5eb5ff; outline-offset:2px; border-radius:4px; filter:drop-shadow(0 0 8px rgba(94,181,255,.42)); }
.tile-forced .tile-img { outline:2px dashed #b7cbc4; outline-offset:2px; border-radius:4px; }

.tile-row, .dora-row, .ankan-area { display:flex; flex-wrap:wrap; align-items:flex-end; gap:3px; }
.river-row { flex-wrap:nowrap; margin-bottom:3px; }
.river-tile-wrap { width:42px; height:64px; display:flex; align-items:center; justify-content:center; position:relative; overflow:visible; }
.river-tile-wrap.tsumogiri::after { content:""; position:absolute; left:50%; bottom:0; width:14px; height:3px; transform:translateX(-50%); border-radius:99px; background:var(--accent); box-shadow:0 0 8px rgba(79,224,170,.45); }
#river .tile-riichi { transform:rotate(90deg); }
#river { min-height:68px; padding-top:10px; overflow-x:auto; }

.dora-row { gap:0; }
.dora-row + .dora-row { margin-top:5px; opacity:.58; }
.dora-slot { width:38px; overflow:visible; }
.dora-slot .tile-img { width:38px; }

.controls { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center; }
.controls button, .top-actions button, .settings button, select, input {
  min-height:38px;
  border:1px solid var(--line-strong);
  background:rgba(8,20,18,.62);
  border-radius:10px;
  padding:7px 12px;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.controls button:hover:not(:disabled), .top-actions button:hover:not(:disabled), .settings button:hover:not(:disabled) { border-color:rgba(79,224,170,.55); background:rgba(31,64,54,.74); }
.primary-button { color:#06251d; border-color:#71edbd !important; background:linear-gradient(135deg, #7af2c3, #43c995) !important; font-weight:800; box-shadow:0 8px 24px rgba(34,187,132,.18); }
input { width:150px; }
input::placeholder { color:#718780; }
select { color-scheme:dark; }
.action-win { outline:3px solid #6aecad !important; outline-offset:2px; font-weight:800; }
.action-riichi { outline:2px solid #6cbcff !important; outline-offset:2px; }
.action-locked { opacity:.78; }
.quiet-button { color:#b8cbc4; }
.quiet-button.active { border-color:#5b756d; background:#21312e; color:#fff; }
.seed-chip { min-height:32px !important; padding:5px 9px !important; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:10px; color:#89a098; border-style:dashed !important; }
.seed-chip.copied { background:rgba(39,148,104,.18) !important; color:#91f2c9; }

.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.section-heading.compact { margin-bottom:12px; }
.section-note { color:var(--muted); font-size:11px; }
.status { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); color:#b4c8c0; font-size:12px; line-height:1.55; }
#message { margin-top:8px; color:#91f2c9; font-weight:700; }
#message.ok { color:#91f2c9; }
#message.error { color:var(--danger); }

details.efficiency-panel > summary { list-style:none; cursor:pointer; user-select:none; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
details.efficiency-panel > summary::-webkit-details-marker { display:none; }
details.efficiency-panel > summary::after { content:"＋"; color:var(--muted); font-size:18px; line-height:1; }
details.efficiency-panel[open] > summary::after { content:"−"; }
.efficiency-summary { max-width:180px; margin-left:auto; color:#c3d7cf; font-size:11px; text-align:right; }
.efficiency-body { margin-top:14px; }
.efficiency-list { display:flex; flex-direction:column; gap:8px; }
.efficiency-item { border:1px solid var(--line); border-radius:11px; padding:10px 11px; background:rgba(6,16,15,.4); }
.efficiency-item.best { border-color:rgba(79,224,170,.45); background:linear-gradient(135deg, rgba(79,224,170,.12), rgba(26,59,50,.25)); }
.efficiency-head { color:#e8f3ee; font-weight:750; font-size:13px; }
.efficiency-detail { color:#8fa8a0; font-size:11px; margin-top:4px; line-height:1.55; }
.efficiency-empty { color:var(--muted); font-size:12px; }
.efficiency-note { margin-top:10px; font-size:10px; color:#748b84; line-height:1.5; }

details.efficiency-panel:not([open]) .efficiency-summary { display:none; }
.board:has(#efficiency-panel:not([open])) .tile-efficiency .tile-img,
.board:has(#efficiency-panel:not([open])) .tile-forced .tile-img { outline:none; filter:drop-shadow(0 5px 3px rgba(0,0,0,.28)); }
.board:has(#efficiency-panel:not([open])) .action-win,
.board:has(#efficiency-panel:not([open])) .action-riichi,
.board:has(#efficiency-panel:not([open])) .action-locked { outline:none !important; font-weight:inherit; opacity:1; }

.review-feedback { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:34px; margin-top:10px; padding:6px 9px; border-radius:9px; color:#b9cec6; font-size:11px; background:rgba(5,19,16,.54); border:1px solid var(--line); }
.review-feedback[hidden] { display:none; }
.review-feedback.correct { border-color:rgba(94,234,164,.4); background:rgba(39,148,104,.12); }
.review-feedback.wrong { border-color:rgba(255,174,110,.4); background:rgba(178,95,36,.12); }
.review-icon { font-weight:800; }
.review-tile { width:24px; height:auto; display:block; }
.review-tile.tiny { width:20px; }
.review-meta { color:#8ca39b; white-space:nowrap; }
.review-log { margin-top:10px; color:var(--muted); font-size:11px; }
.review-log > summary { cursor:pointer; width:max-content; }
.review-log-row { display:flex; align-items:center; gap:5px; margin-top:6px; }
.review-turn { min-width:30px; color:var(--muted); }
.review-clear { margin-top:8px; min-height:28px !important; padding:3px 8px !important; font-size:11px; }

.settings { display:grid; grid-template-columns:auto 1fr; gap:9px 10px; align-items:center; color:#a9beb6; font-size:11px; }
#orientation-tip { position:fixed; left:50%; top:12px; transform:translateX(-50%); background:rgba(5,15,13,.92); color:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:12px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:30; }
#orientation-tip.show { opacity:1; pointer-events:auto; }

@media (max-width: 1080px) {
  .board { grid-template-columns:1fr; }
  .right { position:static; display:grid; grid-template-columns:1.25fr .75fr; align-items:start; }
  .efficiency-panel { grid-row:span 2; }
}

@media (max-width: 760px) {
  .game-page .site-nav, main { width:min(100% - 18px, 700px); }
  main { margin-top:14px; }
  .topbar { align-items:flex-start; }
  .right { display:flex; align-items:stretch; }
  .table-stage { padding:13px; }
  .tile-img { width:38px; }
  #tsumo .tile-img { width:40px; }
  .river-tile-wrap { width:36px; height:56px; }
  .river-tile-wrap .tile-img { width:36px; }
  .top-actions { max-width:58%; }
  .section-note { display:none; }
}

@media (max-width: 480px) and (orientation: portrait) {
  .eyebrow { font-size:8px; }
  .top-actions { max-width:65%; gap:5px; }
  .top-actions button { min-height:32px; padding:5px 8px; font-size:11px; }
  .seed-chip { max-width:105px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .table-hud { align-items:flex-start; }
  #river-mini { flex-direction:column; gap:2px; }
  .player-zone { padding:10px 8px 8px; }
  .hand-main { gap:8px; }
  .tile-img { width:34px; }
  #tsumo { padding-left:9px; min-width:44px; }
  #tsumo .tile-img { width:36px; }
  .controls { gap:6px; }
  .controls button, .settings button, select, input { min-height:34px; padding:5px 8px; font-size:11px; }
  input { width:124px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; }
}