@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
@import url('../shared/catalog-theme.css');

:root { --ink:#172025; --muted:#6f7e80; --paper:#f4f1e9; --paper-2:#ebe7dc; --line:#d7d1c4; --light:#f8f4e9; --light-deep:#cbbd9d; --dark:#283a3e; --accent:#cf654c; --gate:#d8a949; --shadow:0 22px 50px rgba(37,48,47,.1); }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:'Manrope','Noto Sans JP',sans-serif; }
button { font:inherit; color:inherit; }
button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
.screen { min-height:100vh; }
.topbar { min-height:92px; padding:22px 5vw; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.brand-lockup { display:flex; align-items:center; gap:14px; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; background:var(--dark); color:var(--paper); font-weight:900; font-size:22px; transform:rotate(45deg); }
.brand-mark::first-letter { transform:rotate(-45deg); }
.brand-lockup h1 { margin:2px 0 0; font-size:20px; letter-spacing:.04em; }
.brand-lockup h1 span { color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.16em; }
.eyebrow { margin:0; color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.16em; }
.definition-pill, .turn-chip { color:var(--accent); font:500 10px 'DM Mono',monospace; letter-spacing:.1em; border:1px solid rgba(207,101,76,.35); padding:8px 11px; }
.home-main { max-width:1240px; margin:0 auto; padding:74px 5vw 30px; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 440px; align-items:center; gap:80px; }
.hero-kicker { color:var(--accent); }
.hero h2 { max-width:680px; margin:18px 0 20px; font-size:clamp(34px, 5vw, 68px); line-height:1.1; letter-spacing:-.06em; }
.hero h2 em { color:var(--accent); font-style:normal; }
.hero-lead { max-width:570px; color:#556364; font-size:16px; line-height:2; }
.hero-actions { display:flex; gap:12px; margin:32px 0 28px; flex-wrap:wrap; }
.primary-button, .secondary-button { min-height:46px; padding:0 19px; border:1px solid var(--dark); border-radius:2px; cursor:pointer; transition:.18s ease; }
.primary-button { background:var(--dark); color:var(--paper); }
.primary-button:hover { background:#3d5557; transform:translateY(-2px); }
.secondary-button { background:transparent; border-color:var(--line); }
.secondary-button:hover { border-color:var(--dark); background:var(--paper-2); }
.secondary-button.warning { color:var(--accent); }
.large { min-height:54px; padding:0 24px; }
.large span { margin-left:24px; font-size:20px; }
.condition-row { display:flex; gap:22px; color:var(--muted); font:500 11px 'DM Mono',monospace; }
.condition-row span { display:flex; align-items:center; gap:5px; }
.condition-row b { color:var(--ink); font-size:14px; }
.hero-board { position:relative; aspect-ratio:1; padding:45px; background:#203438; box-shadow:var(--shadow); transform:rotate(2deg); }
.hero-board::before { content:''; position:absolute; inset:24px; border:1px solid rgba(244,241,233,.22); }
.mini-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(7,1fr); width:100%; height:100%; background:#f0e8d7; border:6px solid #d9b86b; }
.mini-grid i { border:1px solid rgba(32,52,56,.12); position:relative; }
.mini-grid i.gate { background:rgba(216,169,73,.36); }
.mini-grid i.gate::after { content:'✦'; position:absolute; inset:0; display:grid; place-items:center; color:#a77825; font-style:normal; font-size:14px; }
.mini-piece::after { content:'●'; position:absolute; inset:15%; display:grid; place-items:center; border-radius:50%; font-size:20px; font-style:normal; box-shadow:0 5px 8px rgba(0,0,0,.16); }
.mini-piece.light::after { background:#faf5e8; color:#d7c7a6; }
.mini-piece.dark::after { background:#293d40; color:#9cb0a9; }
.mini-piece.flag::after { content:'◆'; }
.hero-board-label { position:absolute; bottom:14px; left:28px; right:28px; z-index:2; display:flex; justify-content:space-between; color:#f4f1e9; font:500 9px 'DM Mono',monospace; letter-spacing:.14em; }
.hero-board-label b { color:#e4bb61; }
.home-panels { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; margin-top:86px; }
.info-panel { padding:28px 30px; border-top:1px solid var(--ink); background:rgba(255,255,255,.28); }
.info-panel h3 { margin:12px 0 23px; font-size:22px; letter-spacing:-.03em; }
.loop-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.loop-steps div { border-left:2px solid var(--line); padding-left:13px; }
.loop-steps span { display:block; color:var(--accent); font:500 10px 'DM Mono',monospace; }
.loop-steps b { display:block; margin-top:8px; font-size:14px; }
.loop-steps small, .definition-panel p { color:var(--muted); font-size:12px; line-height:1.7; }
.definition-panel { background:var(--dark); color:var(--paper); border-top:0; }
.definition-panel .eyebrow { color:#9cb0a9; }
.definition-panel p { color:#b7c2bd; }
.definition-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.definition-tags span { border:1px solid rgba(244,241,233,.25); color:#e7ddc9; padding:6px 9px; font:500 10px 'DM Mono',monospace; }
.footer-note { display:flex; justify-content:space-between; gap:18px; padding:18px 5vw 25px; color:var(--muted); font:500 10px 'DM Mono',monospace; letter-spacing:.04em; }

.game-screen { background:#e9e5db; }
.game-topbar { background:var(--paper); }
.back-link { padding:8px 0; border:0; background:none; color:var(--muted); cursor:pointer; font-size:12px; }
.back-link:hover { color:var(--ink); }
.compact { margin-right:auto; }
.compact .brand-mark { width:36px; height:36px; font-size:18px; }
.top-actions { display:flex; gap:9px; }
.top-actions .secondary-button { min-height:38px; padding:0 13px; font-size:12px; }
.game-main { max-width:1180px; margin:0 auto; padding:28px 5vw 18px; }
.match-bar { display:grid; grid-template-columns:150px minmax(180px,1fr) 200px; align-items:end; gap:35px; padding:16px 0 23px; border-bottom:1px solid var(--line); }
.match-stat strong { display:block; margin-top:6px; font:700 26px 'DM Mono',monospace; }
.match-stat strong small { color:var(--muted); font-size:11px; font-weight:400; }
.align-right { text-align:right; }
.match-stat i { margin:0 10px; color:var(--line); font-style:normal; }
.light-text { color:#9a8660; }.dark-text { color:#334d50; }
.turn-line { text-align:center; color:var(--muted); font-size:12px; }
.turn-track { height:5px; margin:10px 0 7px; background:var(--line); overflow:hidden; }
.turn-track span { display:block; height:100%; width:0; background:var(--accent); transition:width .2s ease; }
.turn-line small { font:500 9px 'DM Mono',monospace; }
.play-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:34px; padding-top:30px; }
.board-heading, .section-heading, .turn-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.board-heading h2 { margin:7px 0 0; font-size:23px; }
.board-heading > p { margin:0; color:var(--muted); font-size:11px; }
.board-wrap { position:relative; margin:28px auto 0; width:min(100%, 660px); padding:25px; background:#22383b; box-shadow:var(--shadow); }
.board-wrap::before { content:''; position:absolute; inset:12px; border:1px solid rgba(244,241,233,.18); pointer-events:none; }
.board { position:relative; z-index:1; display:grid; grid-template-columns:repeat(7,1fr); aspect-ratio:1; border:7px solid #d3ad5c; overflow:hidden; }
.cell { position:relative; min-width:0; border:0; border-right:1px solid rgba(38,60,61,.16); border-bottom:1px solid rgba(38,60,61,.16); background:#f1ead9; cursor:default; padding:0; }
.cell.shade { background:#e7deca; }
.cell.gate { background:#eddbab; }
.cell.gate .gate-mark { color:#bb8b32; }
.gate-mark { position:absolute; inset:0; display:grid; place-items:center; color:rgba(187,139,50,.3); font-size:17px; }
.cell:has(.piece) { cursor:pointer; }
.cell.legal-target { cursor:pointer; background:#d9e3cc; }
.cell.capture-target { cursor:pointer; background:#e8c0ae; }
.cell.selected-cell { background:#d0ddd5; }
.cell.legal-target:hover, .cell.capture-target:hover { filter:brightness(.96); }
.piece { position:absolute; z-index:2; inset:13%; display:grid; place-items:center; border-radius:50%; font-size:clamp(19px, 4vw, 35px); line-height:1; box-shadow:0 7px 10px rgba(33,44,43,.18), inset 0 1px rgba(255,255,255,.7); pointer-events:none; }
.piece-light { background:#fffaf0; color:#b49d6c; border:2px solid #d0bf9d; }
.piece-dark { background:#2b4346; color:#a6bbb2; border:2px solid #182d31; }
.piece.flag { font-size:clamp(17px, 3.7vw, 32px); }
.selected-cell .piece { box-shadow:0 0 0 4px var(--accent), 0 8px 13px rgba(33,44,43,.25); }
.move-marker { position:absolute; z-index:3; width:13px; height:13px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:#738d70; border:3px solid rgba(244,241,233,.8); pointer-events:none; }
.capture-target .move-marker { width:20px; height:20px; background:transparent; border:3px solid var(--accent); }
.axis { position:absolute; z-index:2; display:flex; color:#d9c891; font:500 9px 'DM Mono',monospace; pointer-events:none; }
.axis span { display:grid; place-items:center; }
.axis-top { top:8px; left:25px; right:25px; height:13px; }.axis-top span { width:calc(100% / 7); }
.axis-left { top:25px; left:8px; bottom:25px; width:13px; flex-direction:column; }.axis-left span { height:calc(100% / 7); }
.board-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:17px; margin-top:17px; color:var(--muted); font-size:10px; }
.board-legend span { display:flex; align-items:center; gap:5px; }
.legend-dot { width:9px; height:9px; display:inline-block; border-radius:50%; }.gate-dot { background:var(--gate); }.light-dot { background:var(--light); border:1px solid #bdac87; }.dark-dot { background:var(--dark); }.move-dot { background:#738d70; }
.control-column { display:flex; flex-direction:column; gap:16px; }
.turn-card, .pieces-card, .log-card { background:var(--paper); border:1px solid var(--line); }
.turn-card { padding:20px; border-top:3px solid var(--accent); }
.turn-card-top { align-items:center; }.turn-chip { padding:5px 7px; font-size:9px; }.turn-card h2 { margin:19px 0 7px; font-size:23px; }.turn-card p { min-height:40px; margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.selected-piece { display:flex; align-items:center; gap:11px; min-height:58px; margin:18px 0; padding:9px 11px; background:var(--paper-2); }.selected-symbol { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--muted); font-size:21px; }.selected-symbol.piece-light { color:#a58e61; border:1px solid #cdbd9d; background:#fffaf0; }.selected-symbol.piece-dark { color:#a6bbb2; border:1px solid #182d31; background:#2b4346; }.selected-piece b, .selected-piece small { display:block; }.selected-piece b { font-size:12px; }.selected-piece small { margin-top:3px; color:var(--muted); font-size:10px; }
.pass-button { width:100%; min-height:39px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:11px; }.pass-button:not(:disabled) { color:var(--accent); border-color:rgba(207,101,76,.55); cursor:pointer; }.pass-button:disabled { opacity:.55; cursor:not-allowed; }
.pieces-card, .log-card { padding:17px; }.section-heading { align-items:center; }.section-heading > span { color:var(--muted); font:500 9px 'DM Mono',monospace; }.piece-roster { margin-top:14px; }.roster-group + .roster-group { margin-top:12px; }.roster-title { display:flex; align-items:center; gap:6px; font-size:11px; }.roster-title span:last-child { margin-left:auto; color:var(--muted); font:500 9px 'DM Mono',monospace; }.roster-dot { width:8px; height:8px; border-radius:50%; }.roster-dot.light { background:#cbbd9d; border:1px solid #9b895f; }.roster-dot.dark { background:var(--dark); }.roster-pieces { display:flex; gap:6px; padding:9px 0 0 14px; }.roster-piece { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; font-size:13px; }.roster-piece.piece-light { background:#fffaf0; border:1px solid #cdbd9d; color:#a58e61; }.roster-piece.piece-dark { background:#2b4346; border:1px solid #182d31; color:#a6bbb2; }.roster-piece.captured { opacity:.18; filter:grayscale(1); }.roster-piece.flag { font-size:12px; }.roster-note { margin:14px 0 0; color:var(--muted); font-size:10px; line-height:1.7; }
.log-card { min-height:190px; }.log-list { margin-top:11px; }.log-item { padding:8px 0; border-top:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.5; }.log-item.latest { color:var(--ink); font-weight:700; }

.modal-backdrop { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:25px; background:rgba(23,32,37,.52); backdrop-filter:blur(5px); }.modal { position:relative; width:min(100%, 760px); max-height:90vh; overflow:auto; padding:32px; background:var(--paper); box-shadow:0 25px 80px rgba(0,0,0,.25); }.modal-close { position:absolute; top:13px; right:15px; border:0; background:none; color:var(--muted); font-size:27px; cursor:pointer; }.modal h2 { margin:10px 0 10px; font-size:30px; }.modal-lead { color:var(--muted); line-height:1.8; }.tutorial-modal { width:min(100%, 820px); }.tutorial-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:25px; }.tutorial-step { padding:17px; border:1px solid var(--line); }.tutorial-step > span { color:var(--accent); font:500 10px 'DM Mono',monospace; }.tutorial-step h3 { margin:10px 0 7px; font-size:14px; }.tutorial-step p { margin:0; color:var(--muted); font-size:11px; line-height:1.75; }.tutorial-tip { display:flex; gap:14px; align-items:baseline; margin-top:18px; padding:16px; border-left:3px solid var(--accent); background:var(--paper-2); font-size:11px; line-height:1.7; }.tutorial-tip b { white-space:nowrap; }.tutorial-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }.rule-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:25px; }.rule-grid article { padding:17px; border:1px solid var(--line); }.rule-grid article > span { color:var(--accent); font:500 10px 'DM Mono',monospace; }.rule-grid h3 { margin:10px 0 7px; font-size:14px; }.rule-grid p { margin:0; color:var(--muted); font-size:11px; line-height:1.75; }.theory-box { margin-top:18px; padding:18px; background:var(--dark); color:var(--paper); }.theory-box h3 { margin:0 0 14px; font-size:14px; }.theory-box > div { display:grid; grid-template-columns:88px 1fr; gap:9px 13px; font-size:11px; }.theory-box b { color:#e3bc67; }.theory-box span { color:#c0cbc5; line-height:1.5; }.result-backdrop { z-index:30; }.result-modal { width:min(100%, 480px); text-align:center; padding:43px 35px 35px; }.result-mark { color:var(--accent); font-size:60px; line-height:1; }.result-modal h2 { margin:12px 0 9px; }.result-modal > p:not(.eyebrow) { color:var(--muted); font-size:12px; }.result-score { display:flex; justify-content:center; gap:17px; margin:25px 0; font:700 13px 'DM Mono',monospace; }.result-score b { color:var(--line); }.result-actions { display:flex; justify-content:center; gap:10px; }
@media (max-width: 900px) { .hero { grid-template-columns:1fr 330px; gap:35px; }.play-layout { grid-template-columns:1fr; }.control-column { display:grid; grid-template-columns:1fr 1fr; align-items:start; }.turn-card { grid-row:span 2; }.log-card { min-height:0; } }
@media (max-width: 650px) { .topbar { min-height:76px; padding:16px 20px; }.brand-lockup h1 { font-size:16px; }.brand-mark { width:36px; height:36px; font-size:17px; }.brand-lockup h1 span { display:none; }.definition-pill { display:none; }.home-main { padding:45px 20px 18px; }.hero { display:flex; flex-direction:column; align-items:stretch; gap:38px; }.hero h2 { font-size:39px; }.hero-lead { font-size:14px; }.hero-board { width:82%; align-self:center; }.home-panels { grid-template-columns:1fr; margin-top:55px; }.loop-steps { grid-template-columns:1fr; gap:14px; }.footer-note { padding:17px 20px 22px; flex-direction:column; }.game-topbar { flex-wrap:wrap; gap:12px; }.compact { order:-1; width:calc(100% - 120px); }.top-actions { margin-left:auto; }.top-actions .secondary-button { padding:0 9px; font-size:10px; }.game-main { padding:18px 14px; }.match-bar { grid-template-columns:1fr 1fr; gap:16px; }.turn-line { grid-column:1 / -1; grid-row:1; text-align:center; }.match-stat { grid-row:2; }.match-stat.align-right { grid-column:2; }.play-layout { gap:20px; padding-top:22px; }.board-wrap { padding:21px; }.axis-top { left:21px; right:21px; }.axis-left { top:21px; bottom:21px; }.board-heading > p { display:none; }.control-column { display:flex; }.turn-card { padding:17px; }.tutorial-grid, .rule-grid { grid-template-columns:1fr; }.tutorial-tip { display:block; }.tutorial-tip b { display:block; margin-bottom:5px; }.modal { padding:28px 20px; }.tutorial-actions { flex-direction:column-reverse; }.tutorial-actions button { width:100%; }.theory-box > div { grid-template-columns:70px 1fr; }.result-actions { flex-direction:column; }.result-actions button { width:100%; } }

/* Keep interface annotations readable after the moonlight theme is applied. */
@media (min-width: 651px) {
  .condition-row, .hero-board-label, .turn-line small, .axis, .board-legend,
  .section-heading > span, .roster-title, .roster-title span:last-child,
  .roster-note, .log-item, .pass-button, .selected-piece small,
  .tutorial-step > span, .tutorial-step p, .tutorial-tip, .rule-grid article > span,
  .rule-grid p, .theory-box > div { font-size: 12px !important; }
}

.first-player-select { display:flex; align-items:stretch; flex-wrap:wrap; gap:7px; margin-top:12px; }
.first-player-select .mode-select-label { align-self:center; font-size:12px; }
.first-player-choice, .result-difficulty-choice { padding:7px 10px; color:var(--muted); border:1px solid var(--line); background:transparent; cursor:pointer; font-size:12px; transition:.2s ease; }
.first-player-choice b, .first-player-choice small, .result-difficulty-choice b, .result-difficulty-choice small { display:block; }
.first-player-choice small, .result-difficulty-choice small { color:var(--faint); font-size:12px; margin-top:3px; }
.first-player-choice:hover, .first-player-choice.selected, .result-difficulty-choice:hover, .result-difficulty-choice.selected { border-color:var(--accent); color:var(--accent); background:var(--p1-dim); }
.result-rematch { margin:18px 0 14px; padding:13px; border:1px solid var(--line); background:var(--p1-dim); text-align:left; }
.result-rematch-label { margin:0 0 8px; color:var(--muted); font:500 12px 'DM Mono',monospace; }
.result-rematch-choices { display:flex; gap:7px; }
.result-rematch-choices .result-difficulty-choice { flex:1; min-width:0; }
.result-rematch-button { width:100%; margin-top:9px; min-height:40px; }
@media (max-width: 650px) {
  .first-player-select .mode-select-label, .result-rematch-label { font-size:10px; }
  .first-player-choice, .result-difficulty-choice { font-size:10px; }
  .first-player-choice small, .result-difficulty-choice small { font-size:10px; }
}
@media (max-width: 650px) {
  .condition-row, .hero-board-label, .turn-line small, .axis, .board-legend,
  .section-heading > span, .roster-title, .roster-title span:last-child,
  .roster-note, .log-item, .pass-button, .selected-piece small,
  .tutorial-step > span, .tutorial-step p, .tutorial-tip, .rule-grid article > span,
  .rule-grid p, .theory-box > div { font-size: 10px !important; }
}