:root {
  --ink: #17252d;
  --muted: #67767d;
  --night: #07151d;
  --night2: #102932;
  --gold: #d6a83e;
  --board: #d8b271;
  --line: #5d4225;
  --blue: #2c7587;
  --yellow: #ffd84e;
  --red: #ef554d;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); background:
  radial-gradient(circle at 20% 0, #193945 0, transparent 35%),
  linear-gradient(145deg, #071218, #0c222b 60%, #061116);
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  min-height: 100vh;
}
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(1440px, 96vw); margin: 0 auto; padding: 14px 0 48px; }
.topbar { display:flex; align-items:end; justify-content:space-between; color:white; gap:24px; }
.back-link { color:#f0c963; border:1px solid #8b753f; border-radius:9px; padding:10px 14px; text-decoration:none; white-space:nowrap; }
.eyebrow { margin:0 0 6px; color:#8eb3bd; letter-spacing:.14em; font-size:12px; }
.back-home{color:inherit;text-decoration:none;border-bottom:1px solid #8eb3bd77}.back-home:hover{color:#d7f2f8}
h1 { margin:0; font-size:clamp(28px,4vw,52px); font-weight:800; letter-spacing:.04em; }
h1 span { color:#87b4bf; font-size:.42em; font-weight:500; }
.mode-switch { display:flex; padding:5px; background:#061016; border:1px solid #31505a; border-radius:12px; }
.mode { color:#a8bcc2; background:transparent; border:0; padding:10px 14px; border-radius:8px; }
.mode.active { color:#07151d; background:#d8e7e9; font-weight:700; }
.review-only { display:none; }
body.reviewing .review-only { display:block; }
.status-strip {
  margin:20px 0; padding:12px 18px; display:grid; grid-template-columns:130px 160px 90px 1fr;
  gap:12px; color:white; background:rgba(12,34,43,.9); border:1px solid #31505a; border-radius:12px;
}
.status-strip div { display:flex; gap:10px; align-items:baseline; }
.status-strip span { color:#8eb3bd; font-size:12px; }
.status-strip strong { font-size:20px; }
.status-strip .status-message { justify-content:flex-end; color:#d8e7e9; }
.game-layout { display:grid; grid-template-columns:210px minmax(430px, 720px) 210px; justify-content:center; gap:28px; align-items:start; }
.side-panel { color:#dbe8eb; display:flex; flex-direction:column; gap:24px; }
.panel-block, .legend, .controls, .card {
  background:rgba(9,27,34,.92); border:1px solid #294650; border-radius:14px; padding:16px;
}
.side-panel h2, .card h2 { margin:0 0 12px; color:#f4f7f7; font-size:15px; }
.hand { height:82px; min-height:82px; box-sizing:border-box; display:flex; align-content:flex-start; flex-wrap:wrap; gap:5px; overflow-y:auto; overflow-x:hidden; padding:6px; background:#04101599; border:1px solid #294650; border-radius:8px; scrollbar-gutter:stable; }
.hand-piece { flex:0 0 auto; width:25px; height:30px; padding:0; border:0; color:#272014; background:#d7b170; clip-path:polygon(50% 0,92% 16%,100% 100%,0 100%,8% 16%); font-size:12px; font-weight:800; }
.hand-piece.opponent-hand-piece { transform:rotate(180deg); }
.hand-piece.selected { background:#ffe18a; filter:drop-shadow(0 0 7px #ffe18a); }
.legend p { font-size:12px; margin:9px 0; color:#aebfc4; }
.dot { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:8px; }
.dot.visible { background:#e8d19e; }.dot.yellow { background:var(--yellow); }.dot.red { background:var(--red); }.dot.hidden { border:1px dashed #63757b; }
.controls { display:grid; gap:9px; }
.controls button, dialog button { border:1px solid #47616a; border-radius:8px; padding:10px; background:#15333d; color:white; }
.controls .primary, dialog .primary { background:#d6a83e; border-color:#d6a83e; color:#1c1a12; font-weight:800; }
.toggle { display:flex; align-items:center; gap:9px; padding:8px 0 13px; }
.toggle span{display:grid;gap:3px}.toggle small{color:#789198;font-size:10px;line-height:1.35}
.dark-only[hidden]{display:none!important}
.game-general .dark-only,.game-general #darkRuleSwitch{display:none!important}
.board-wrap { position:relative; padding:22px 24px 0 0; }
.board {
  aspect-ratio:1; display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr);
  border:4px solid #322519; background:var(--board); box-shadow:0 22px 60px #0009;
  transform-origin:center; transition:transform .25s ease;
}
.board-wrap.perspective-gote .board { transform:rotate(180deg); }
.square {
  position:relative; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:transparent; padding:2px; display:grid; place-items:center;
}
.square:nth-child(9n) { border-right:0; }
.square:nth-last-child(-n+9) { border-bottom:0; }
.square.target::after { content:""; position:absolute; width:22%; aspect-ratio:1; border-radius:50%; background:#1b7d8dbb; }
.square.capture::after { width:72%; border:3px solid #b92d2a; background:transparent; }
.square.selected { background:#fff2a85c; }
.square.movable{box-shadow:inset 0 0 0 2px #f0d26a66}.square.movable:hover{background:#f0d26a26;box-shadow:inset 0 0 0 3px #f0d26acc}
.piece {
  width:78%; height:86%; display:grid; place-items:center; color:#241c12;
  background:linear-gradient(145deg,#f0d291,#c79850); clip-path:polygon(50% 0,92% 15%,100% 100%,0 100%,8% 15%);
  font-size:clamp(15px,3vw,29px); font-weight:900; line-height:1; z-index:1;
  filter:drop-shadow(0 2px 1px #5e3b1d88);
}
.piece.gote { transform:rotate(180deg); }
.piece.promoted { color:#a21e1e; }
.piece.hidden { visibility:hidden; }
.piece.ghost { visibility:visible; opacity:.32; filter:grayscale(.25) brightness(.8); }
.piece.threat-1 { background:linear-gradient(145deg,#ffe982,#d8a72d); box-shadow:inset 0 0 0 3px #ffdc3a; }
.piece.threat-2 { background:linear-gradient(145deg,#ff8c73,#c84136); box-shadow:inset 0 0 0 3px #ff4138; }
.files { position:absolute; top:0; left:0; right:24px; display:grid; grid-template-columns:repeat(9,1fr); color:#adc1c6; text-align:center; font-size:12px; }
.ranks { position:absolute; top:22px; right:0; bottom:0; display:grid; grid-template-rows:repeat(9,1fr); color:#adc1c6; align-items:center; font-size:12px; }
.lower-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }
.review-panel {
  margin-top:24px; padding:16px 18px; color:#dbe8eb; background:rgba(9,27,34,.96);
  border:1px solid #d6a83e; border-radius:14px; box-shadow:0 0 26px #d6a83e22;
}
.review-panel[hidden] { display:none; }
.review-panel>div:first-child { display:flex; align-items:baseline; gap:16px; margin-bottom:12px; }
.review-panel strong { color:#f0c963; font-size:18px; }
.review-panel span,.review-panel p { color:#9fb3b8; font-size:12px; }
.review-panel p { margin:10px 0 0; }
.review-controls { display:grid; grid-template-columns:auto auto minmax(160px,1fr) auto auto auto; gap:8px; align-items:center; }
.review-controls button {
  border:1px solid #47616a; border-radius:8px; padding:9px 13px; background:#15333d; color:white;
}
.review-controls .primary { background:#d6a83e; border-color:#d6a83e; color:#1c1a12; font-weight:800; }
.review-controls input { accent-color:#d6a83e; }
.review-button { border-color:#d6a83e!important; color:#f0c963!important; }
.history li.current { color:#f0c963; font-weight:800; }
.card { color:#c4d2d6; }
.card ul { padding-left:1.3em; line-height:1.9; font-size:13px; }
.history { height:260px; overflow-y:auto; overflow-x:hidden; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:min-content; align-content:start; column-gap:8px; list-style:none; line-height:1.25; font-size:12px; scrollbar-gutter:stable; }
.history li{min-width:0;margin:0;padding:5px 7px;border-bottom:1px solid #29465066;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history li:nth-child(6n+4),.history li:nth-child(6n+5),.history li:nth-child(6n+6){background:#0d252d66}
.empty { color:#71858b; }
.provisional { color:#e1bb63; font-size:12px; }

/* v0.11.5: 入室後に接続画面が残らないよう、hiddenを最優先する */
.online-lobby[hidden],.room-bar[hidden],#roomArea[hidden]{display:none!important}
.online-lobby { display:grid; grid-template-columns:repeat(2,minmax(280px,460px)); justify-content:center; gap:24px; margin-top:36px; }
.online-lobby label { display:grid; gap:6px; margin:14px 0; color:#9fb3b8; font-size:13px; }
.online-lobby input,.online-lobby select {
  width:100%; color:white; background:#07171d; border:1px solid #47616a; border-radius:8px; padding:11px;
}
.online-lobby button,.room-bar button { border:1px solid #47616a; border-radius:8px; padding:10px 14px; background:#15333d; color:white; }
.online-lobby .primary { width:100%; background:#d6a83e; border-color:#d6a83e; color:#1c1a12; font-weight:800; }
.small-note { color:#91a7ad; font-size:12px; line-height:1.8; }
.mode-suppressed{display:none!important}
.session-not-started{display:none!important}
.future-mode-content[hidden],#futureGame[hidden]{display:none!important}
.game-selector{display:grid;grid-template-columns:1.05fr .8fr 1fr .9fr 1.2fr 1.35fr;gap:9px;align-items:end;margin:10px 0;padding:9px 12px}
.game-selector>label{display:grid;gap:3px;color:#9fb3b8;font-size:11px}.game-selector select{width:100%;padding:7px 8px;color:white;background:#07171d;border:1px solid #47616a;border-radius:7px;font-size:13px}
.game-selector fieldset{display:flex;gap:10px;margin:0;padding:0 0 5px;border:0}.game-selector legend{margin-bottom:3px;color:#9fb3b8;font-size:11px}.game-selector fieldset label{color:#e2eaec;font-size:12px;white-space:nowrap}.game-selector input{accent-color:#d6a83e}
.game-selector :disabled{cursor:not-allowed;opacity:.48}
.game-selector #selectorNotice{grid-column:1/-1;margin:0}.game-selector #selectorNotice:empty{display:none}.start-controls{display:flex;gap:6px}.start-controls button{flex:1;padding:7px 8px;color:white;background:#15333d;border:1px solid #47616a;border-radius:7px;font-size:12px;white-space:nowrap}.start-controls .primary{color:#1c1a12;background:#d6a83e;border-color:#d6a83e;font-weight:800}.start-controls button:disabled{cursor:not-allowed;opacity:.4}.internal-full-rule{display:none}
.standard-session.status-strip{grid-template-columns:130px 130px 90px 80px 1fr}
.room-bar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:20px 0 12px; padding:12px 16px; color:white; background:#08181f; border:1px solid #31505a; border-radius:12px; }
.room-bar div { display:flex; gap:8px; align-items:baseline; margin-right:10px; }.room-bar span{color:#8eb3bd;font-size:11px}.room-bar strong{letter-spacing:.12em}
.online-status { grid-template-columns:120px 150px 120px 150px 1fr; margin-top:0; }
.online-layout { margin-top:20px; }
.page-links{display:flex;gap:8px}.future-setup{max-width:900px;margin:34px auto}.future-setup>div{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}
.future-setup label{display:grid;gap:6px;color:#9fb3b8;font-size:13px}.future-setup select{color:white;background:#07171d;border:1px solid #47616a;border-radius:8px;padding:11px}
.future-setup button{border:0;border-radius:8px;padding:12px 24px;background:#d6a83e;color:#1c1a12;font-weight:800}
.future-scorebar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 12px}.future-scorebar div{display:flex;flex-direction:column;gap:5px;padding:12px 16px;color:white;background:#08181f;border:1px solid #31505a;border-radius:12px}.future-scorebar span{color:#8eb3bd;font-size:11px}.future-scorebar strong{color:#f0c963;font-size:24px}
.future-scorebar .ai-single-move{color:#9fc5cc;font-size:18px}
.forecast-count{display:block;margin:10px 0;padding:8px;text-align:center;color:#ffe99f;background:#261838;border:1px solid #6b4b82;border-radius:7px;font-size:14px}
.future-status{grid-template-columns:160px 160px 120px 1fr;margin-top:0}.future-guide{background:rgba(9,27,34,.92);border:1px solid #294650;border-radius:14px;padding:16px}.future-guide h2{margin:0 0 8px;color:#f4f7f7;font-size:15px}.future-guide p{color:#91a7ad;font-size:11px;line-height:1.6}.future-guide ol{padding-left:1.6em;max-height:300px;overflow:auto;color:#dbe8eb;font-size:12px}.future-guide li{margin:8px 0}.future-guide li span{display:block;color:#d6a83e;font-size:10px}
.future-playback-current{margin:10px 0;padding:13px 11px;background:#102932;border:2px solid #f4f4f4;border-radius:10px;box-shadow:0 0 18px #ffffff22}.future-playback-current[hidden],.future-playback-current em[hidden]{display:none}.future-playback-current span,.future-playback-current strong,.future-playback-current em{display:block}.future-playback-current span{color:#aebfc4;font-size:10px}.future-playback-current strong{margin-top:5px;color:#fff;font-size:16px}.future-playback-current em{margin-top:9px;padding-top:8px;color:#ff6d64;border-top:1px solid #ffffff33;font-size:12px;font-style:normal;font-weight:800}.future-guide li.playback-done{color:#899ba0}.future-guide li.playback-current{margin-left:-5px;padding:7px;color:#fff;background:#ffffff18;border-left:3px solid #fff;border-radius:5px}.future-guide li.playback-pending{color:#65797f}
.prediction-log{height:260px;overflow-y:auto;overflow-x:hidden;padding-right:8px;scrollbar-gutter:stable}.prediction-log p{margin:7px 0;padding:8px 10px;border-radius:7px;font-size:12px}.prediction-hit{color:#d8f4df;background:#173827}.prediction-miss{color:#f1b9b6;background:#3a1b1b}
.future-page.forecast-input{background:radial-gradient(circle at 50% 18%,#17313a 0,transparent 42%),linear-gradient(145deg,#050b0e,#0d2027 58%,#020608)}.future-page.forecast-input .future-board{background:radial-gradient(circle at 50% 48%,#102932 0,#071116 58%,#02080b 100%);border-color:#36515a;box-shadow:0 22px 70px #000,0 0 45px #214d5750}.future-page.forecast-input .square{border-color:#29434c}.future-page.forecast-input .piece{background:linear-gradient(145deg,#d9ddcf,#8ea1a1);filter:drop-shadow(0 0 7px #bcdfe580) drop-shadow(0 2px 1px #000)}
.future-moving.piece-sente{animation:futureMoveSente 1s cubic-bezier(.22,.75,.2,1) both;z-index:6}.future-moving.piece-gote{animation:futureMoveGote 1s cubic-bezier(.22,.75,.2,1) both;z-index:6}.future-moving.future-drop{animation-name:futureDrop}.future-moving.future-drop.piece-gote{animation-name:futureDropGote}
.future-board .piece.forecast-white{color:#12161a;background:linear-gradient(145deg,#fff,#cfd5da);box-shadow:inset 0 0 0 2px #fff;filter:drop-shadow(0 0 12px #fffbbb) drop-shadow(0 2px 1px #000)}.future-board .piece.forecast-red{color:#fff;background:linear-gradient(145deg,#ff655c,#a70f16);box-shadow:inset 0 0 0 2px #ffaaa5;filter:drop-shadow(0 0 14px #ff3028dd) drop-shadow(0 2px 1px #000)}.future-board .forecast-ghost{opacity:.88}
@keyframes futureMoveSente{0%{opacity:.35;transform:translate(calc(var(--move-dx)*115%),calc(var(--move-dy)*115%)) scale(.86);filter:drop-shadow(0 0 16px #ffd75c)}65%{opacity:1;transform:translate(0,0) scale(1.08);filter:drop-shadow(0 0 12px #ffd75c)}100%{transform:translate(0,0) scale(1)}}
@keyframes futureMoveGote{0%{opacity:.35;transform:translate(calc(var(--move-dx)*115%),calc(var(--move-dy)*115%)) rotate(180deg) scale(.86);filter:drop-shadow(0 0 16px #ffd75c)}65%{opacity:1;transform:translate(0,0) rotate(180deg) scale(1.08);filter:drop-shadow(0 0 12px #ffd75c)}100%{transform:translate(0,0) rotate(180deg) scale(1)}}
@keyframes futureDrop{0%{opacity:0;transform:scale(1.8)}70%{opacity:1;transform:scale(.9)}100%{transform:scale(1)}}
@keyframes futureDropGote{0%{opacity:0;transform:rotate(180deg) scale(1.8)}70%{opacity:1;transform:rotate(180deg) scale(.9)}100%{transform:rotate(180deg) scale(1)}}
.forecast-mode-banner{position:absolute;z-index:8;top:-37px;left:24px;right:24px;padding:7px 14px;text-align:center;color:#f2dbff;background:#6b318ddd;border:1px solid #c98cf0;border-radius:8px 8px 0 0;font-size:13px;font-weight:800;letter-spacing:.18em}.forecast-mode-banner[hidden]{display:none}
.future-promotion-panel{position:absolute;z-index:12;top:-45px;left:24px;right:24px;display:flex;justify-content:center;align-items:center;gap:10px;padding:7px 12px;color:white;background:#102932;border:2px solid #ffd45c;border-radius:10px;box-shadow:0 0 24px #ffd45c88,0 8px 24px #0009;animation:promotionPulse .8s ease-in-out infinite alternate}.future-promotion-panel[hidden]{display:none}.future-promotion-panel strong{margin-right:12px;color:#ffe99f}.future-promotion-panel button{padding:7px 16px;color:white;background:#15333d;border:1px solid #47616a;border-radius:7px}.future-promotion-panel .primary{color:#1c1a12;background:#d6a83e;border-color:#d6a83e;font-weight:800}@keyframes promotionPulse{from{transform:scale(1)}to{transform:scale(1.015)}}
.prediction-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#010608bb;backdrop-filter:blur(5px)}.prediction-overlay[hidden]{display:none}.prediction-overlay>div{min-width:min(420px,88vw);padding:34px;text-align:center;color:white;background:radial-gradient(circle at 50% 0,#402326,#101b20 64%);border:2px solid #ef776f;border-radius:18px;box-shadow:0 0 70px #ef554d55}.prediction-overlay p{margin:0;color:#ef8881;font-size:11px;letter-spacing:.25em}.prediction-overlay h2{margin:8px 0 20px;font-size:38px}.prediction-overlay strong,.prediction-overlay span{display:block}.prediction-overlay strong{color:#f5d16d;font-size:24px}.prediction-overlay span{margin-top:7px;color:#b9c8cc}.prediction-overlay button{margin-top:24px;padding:10px 24px;color:white;background:#8f302e;border:1px solid #ef776f;border-radius:8px}
.result-overlay{background:#01060880;backdrop-filter:blur(2px)}.result-overlay>div{background:radial-gradient(circle at 50% 0,#234c36,#101b20 64%);border-color:#73d397;box-shadow:0 0 80px #48c87955}.result-overlay p{color:#83dfa5}.result-overlay button{background:#25653d;border-color:#73d397}.result-overlay.result-loss>div{background:radial-gradient(circle at 50% 0,#4a2428,#101b20 64%);border-color:#ef776f;box-shadow:0 0 80px #ef554d55}.result-overlay.result-loss p{color:#ef8881}.result-overlay.result-loss button{background:#8f302e;border-color:#ef776f}
.turn-panel-side{align-self:stretch}.turn-notice{z-index:20;width:100%;box-sizing:border-box;margin-top:auto;padding:18px 12px;text-align:center;color:#f7fff9;background:linear-gradient(145deg,#174c35ee,#0b241bee);border:2px solid #6fd69a;border-radius:14px;box-shadow:0 0 32px #4ac47c55}.turn-notice[hidden],.turn-notice em[hidden]{display:none}.turn-notice span,.turn-notice strong,.turn-notice em{display:block}.turn-notice span{margin-bottom:7px;color:#91e6b2;font-size:10px;font-weight:800;letter-spacing:.22em}.turn-notice strong{font-size:20px}.turn-notice em{margin-top:10px;padding-top:9px;color:#ff8c82;border-top:1px solid #ffffff2d;font-size:18px;font-style:normal;font-weight:900}.turn-notice.in-check{border-color:#ef776f;box-shadow:0 0 38px #ef554d77}.turn-notice.final-minute{animation:turnNoticeAlert 1.25s ease-in-out infinite alternate}@keyframes turnNoticeAlert{from{box-shadow:0 0 22px #ef554d44}to{box-shadow:0 0 46px #ff4d42cc;border-color:#ff5147}}
dialog { border:1px solid #54717b; border-radius:16px; color:white; background:#102932; padding:24px; }
dialog::backdrop { background:#02090dbb; }
dialog form div { display:flex; justify-content:flex-end; gap:10px; }
.dark-collision-dialog{max-width:min(480px,88vw);text-align:center;border:2px solid #ef776f;box-shadow:0 0 60px #ef554d55}.dark-collision-dialog h2{margin:0 0 14px;color:#ff9a92}.dark-collision-dialog p{margin:0;color:#e9f0f1;line-height:1.8}.dark-collision-dialog form div{justify-content:center}.dark-collision-dialog button{min-width:120px;margin-top:22px}
.check-warning-dialog{max-width:min(430px,88vw);text-align:center;border:2px solid #ff554b;box-shadow:0 0 70px #ff433877}.check-warning-dialog h2{margin:0 0 12px;color:#ff766c;font-size:34px}.check-warning-dialog p{margin:0;color:#f4e4e2}.check-warning-dialog form div{justify-content:center}.check-warning-dialog button{min-width:120px;margin-top:22px}
@media(max-width:1000px){
  .game-selector{grid-template-columns:repeat(3,minmax(0,1fr))}
  .game-layout{grid-template-columns:minmax(360px,650px)} .side-panel{display:grid;grid-template-columns:1fr 1fr;order:2}.side-panel.right{order:3}
  .board-wrap{order:1}.status-strip{grid-template-columns:repeat(3,1fr)}.status-message{grid-column:1/-1;justify-content:flex-start!important}
}
@media(max-width:620px){
  .topbar{align-items:start;flex-direction:column}.mode-switch{width:100%}.mode{flex:1;padding:8px 4px;font-size:12px}
  .game-layout{display:flex;flex-direction:column}.board-wrap{width:100%}.side-panel{width:100%}.lower-grid{grid-template-columns:1fr}
  .review-controls{grid-template-columns:repeat(5,1fr)}.review-controls input{grid-column:1/-1;grid-row:1}.review-controls .primary{grid-column:1/-1}
  .online-lobby{grid-template-columns:1fr}.online-status{grid-template-columns:1fr 1fr}.online-status .status-message{grid-column:1/-1}
  .future-setup>div{grid-template-columns:1fr}.future-scorebar{grid-template-columns:1fr 1fr}.future-status{grid-template-columns:1fr 1fr}.future-status .status-message{grid-column:1/-1}
  .game-selector{grid-template-columns:1fr 1fr}.game-selector fieldset,.game-selector .start-controls{grid-column:1/-1}.game-selector fieldset{padding-bottom:0}
}

/* RS monitor edition */
body{background:radial-gradient(circle at 50% 18%,#102a33 0,transparent 34%),linear-gradient(145deg,#020709,#07171d 60%,#010506)}
.rule-switch{margin:18px 0 -7px;display:flex;align-items:center;gap:8px;color:#8ea5aa}.rule-switch>span{font-size:12px}.rule-switch button{padding:7px 15px;color:#9bb0b5;background:#07171d;border:1px solid #29434c;border-radius:999px}.rule-switch button.active{color:#061116;background:#a9c4c9;border-color:#cee0e2;font-weight:800;box-shadow:0 0 15px #70a7b255}.rule-switch p{margin:0 0 0 8px;font-size:12px;color:#789198}
.board{border-color:#352313;background:linear-gradient(#23140618,#23140618),linear-gradient(90deg,#a9783e,#b9894b 48%,#9e6d36);box-shadow:0 22px 60px #000b,inset 0 0 26px #1d100655}.square{border-color:#513619}.piece{color:#160e07;background:linear-gradient(145deg,#f7dda0,#d5a759);box-shadow:inset 0 0 0 1px #fff7,0 1px 0 #6b401c;text-shadow:0 1px 0 #fff9;filter:drop-shadow(0 3px 2px #241306b8)}.piece-sente{transform:rotate(0deg)}.piece-gote{transform:rotate(180deg)}
.game-dark.standard-dark-active #board,#onlineModeContent.online-dark-active #onlineBoard{border-color:#36515a;background:radial-gradient(circle at 50% 48%,#102932 0,#071116 58%,#02080b 100%);box-shadow:0 22px 70px #000,0 0 45px #214d5750}
.game-dark.standard-dark-active #board .square,#onlineModeContent.online-dark-active #onlineBoard .square{border-color:#29434c}
.game-dark.standard-dark-active #board .piece,#onlineModeContent.online-dark-active #onlineBoard .piece{background:linear-gradient(145deg,#d9ddcf,#8ea1a1);filter:drop-shadow(0 0 7px #bcdfe580) drop-shadow(0 2px 1px #000)}
.game-dark.standard-dark-active #board .piece.threat-1,#onlineModeContent.online-dark-active #onlineBoard .piece.threat-1{background:linear-gradient(145deg,#ffe982,#d8a72d);box-shadow:inset 0 0 0 3px #ffdc3a;filter:drop-shadow(0 0 10px #ffd82aaa) drop-shadow(0 2px 1px #000)}
.game-dark.standard-dark-active #board .piece.threat-2,#onlineModeContent.online-dark-active #onlineBoard .piece.threat-2{background:linear-gradient(145deg,#ff8c73,#c84136);box-shadow:inset 0 0 0 3px #ff4138;filter:drop-shadow(0 0 12px #ff4138bb) drop-shadow(0 2px 1px #000)}
.controls button,.toggle{transition:transform .12s ease,filter .12s ease}.controls button:hover{filter:brightness(1.18)}.controls button:active,.toggle:active{transform:translateY(2px) scale(.98);filter:brightness(1.35)}
@media(max-width:620px){.rule-switch{flex-wrap:wrap}.rule-switch p{width:100%;margin:4px 0 0}}

/* v0.11.2: board-centered resignation confirmation */
.resign-confirm-dialog{width:min(440px,88vw);padding:0;text-align:center;border:2px solid #ef776f;box-shadow:0 0 80px #ef554d66;background:radial-gradient(circle at 50% 0,#4a2428,#101b20 68%)}
.resign-confirm-dialog::backdrop{background:#010608c9;backdrop-filter:blur(4px)}
.resign-confirm-dialog form{padding:30px 28px 26px}
.resign-confirm-dialog .dialog-eyebrow{margin:0;color:#ef8881;font-size:11px;font-weight:800;letter-spacing:.28em}
.resign-confirm-dialog h2{margin:8px 0 14px;color:#fff;font-size:42px;letter-spacing:.28em;text-indent:.28em}
.resign-confirm-dialog p:not(.dialog-eyebrow){margin:0;color:#e9f0f1;font-size:17px}
.resign-confirm-dialog form div{justify-content:center;margin-top:26px}
.resign-confirm-dialog button{min-width:132px;padding:11px 18px;color:#fff;background:#15333d;border:1px solid #54717b;border-radius:9px;font-weight:800}
.resign-confirm-dialog button.danger{background:#9b2f2b;border-color:#ef776f}
@media(max-width:620px){.resign-confirm-dialog form{padding:26px 18px 22px}.resign-confirm-dialog h2{font-size:36px}.resign-confirm-dialog button{min-width:0;flex:1}}

.room-bar .room-start-btn{margin-left:auto;background:#d6a83e;border-color:#d6a83e;color:#1c1a12;font-weight:800}.room-bar .room-start-btn:disabled{opacity:.45;cursor:not-allowed}

/* v0.11.4 online readiness flow */
.start-controls[hidden]{display:none!important}
.online-board-wrap{position:relative}
.online-waiting-overlay{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#02090db8;backdrop-filter:blur(2px);border-radius:6px}
.online-waiting-overlay[hidden]{display:none}
.online-waiting-panel{width:min(390px,82%);padding:28px 24px;text-align:center;color:#fff;background:radial-gradient(circle at 50% 0,#23485a,#0d2028 68%);border:2px solid #6e9da9;border-radius:16px;box-shadow:0 18px 55px #000c,0 0 40px #4a8fa055}
.online-waiting-panel p{white-space:pre-line;line-height:1.8;color:#c7d7db}.online-waiting-panel>p:first-child{margin:0;color:#8fc5d2;font-size:10px;font-weight:800;letter-spacing:.22em}.online-waiting-panel h2{margin:8px 0 12px;font-size:25px}.online-waiting-panel button{min-width:180px;margin-top:14px;padding:11px 20px;border:1px solid #d6a83e;border-radius:9px;background:#d6a83e;color:#1c1a12;font-weight:900}.online-waiting-panel button[hidden]{display:none}


/* v0.11.8: compact match screen and mobile player-first layout */
body.match-screen-active .game-selector{display:none!important}
@media(max-width:620px){
  .game-layout,.online-layout{display:flex!important;flex-direction:column}
  .game-layout>.side-panel,.online-layout>.side-panel{display:contents!important}
  .game-layout>.board-wrap,.online-layout>.board-wrap{order:1;width:100%}
  .game-layout .hand-panel,.online-layout .hand-panel,
  .game-layout .match-controls,.online-layout .match-controls,
  .game-layout .display-guide,.online-layout .display-guide,
  .game-layout .turn-notice,.online-layout .turn-notice{width:100%;box-sizing:border-box}
  body.player-sente .game-layout .hand-panel-sente,
  body.player-sente .online-layout .hand-panel-sente,
  body.player-gote .game-layout .hand-panel-gote,
  body.player-gote .online-layout .hand-panel-gote{order:2}
  .game-layout .match-controls,.online-layout .match-controls{order:3}
  body.player-sente .game-layout .hand-panel-gote,
  body.player-sente .online-layout .hand-panel-gote,
  body.player-gote .game-layout .hand-panel-sente,
  body.player-gote .online-layout .hand-panel-sente{order:4}
  .game-layout .turn-notice,.online-layout .turn-notice{order:5}
  .game-layout .display-guide,.online-layout .display-guide{order:6}
  .game-layout .hand-panel,.online-layout .hand-panel{margin:0}
  .game-layout .match-controls,.online-layout .match-controls{margin:0}
  .game-layout .display-guide,.online-layout .display-guide{margin:0}
}


/* v0.11.9: online screen stage isolation */
#onlineModeContent.online-lobby-stage #roomArea{display:none!important}
#onlineModeContent.online-lobby-stage #lobby{display:grid!important}
#onlineModeContent.online-room-stage #lobby{display:none!important}
#onlineModeContent.online-room-stage #roomArea{display:block!important}
@media(max-width:620px){
  #onlineModeContent.online-lobby-stage #lobby{display:grid!important;grid-template-columns:1fr}
}


/* v0.12.5: mobile-safe online lobby isolation */
body.online-lobby-active #roomArea,
body.online-lobby-active .online-status,
body.online-lobby-active .online-layout,
body.online-lobby-active #onlineModeContent > .lower-grid{display:none!important}
body.online-lobby-active #lobby{display:grid!important}
@media(max-width:620px){
  body.online-lobby-active #onlineModeContent{display:block!important}
  body.online-lobby-active #lobby{display:grid!important;grid-template-columns:1fr!important}
  body.online-lobby-active #roomArea,
  body.online-lobby-active #roomArea *{display:none!important}
}


/* v0.12.5: mobile rules must never revive suppressed AI panels */
.ai-mode-content.mode-suppressed,
body.online-lobby-active .ai-mode-content,
body.online-room-active .ai-mode-content{display:none!important}

@media(max-width:620px){
  .ai-mode-content.mode-suppressed,
  body.online-lobby-active .ai-mode-content,
  body.online-room-active .ai-mode-content{display:none!important}
}

/* v0.12.5: online game-set notice and post-game choices */
.online-result-overlay{position:absolute;inset:0;z-index:45;display:grid;place-items:center;background:#02090dcc;backdrop-filter:blur(3px);border-radius:6px}
.online-result-overlay[hidden]{display:none!important}
.online-result-panel{width:min(430px,86%);padding:30px 24px;text-align:center;color:#fff;background:radial-gradient(circle at 50% 0,#375267,#10232d 68%);border:2px solid #d6a83e;border-radius:16px;box-shadow:0 20px 60px #000d,0 0 42px #d6a83e44}
.online-result-panel>p{margin:0;color:#d6a83e;font-size:11px;font-weight:900;letter-spacing:.24em}
.online-result-panel h2{margin:8px 0 14px;font-size:30px}
.online-result-panel strong{display:block;font-size:22px;line-height:1.55}
.online-result-panel span{display:block;margin-top:10px;color:#c8d5d9;line-height:1.6}
.online-result-actions{display:flex;gap:12px;justify-content:center;margin-top:24px}
.online-result-actions button{min-width:150px;padding:12px 15px;border:1px solid #6e8791;border-radius:9px;background:#17323d;color:#fff;font-weight:900}
.online-result-actions button.primary{border-color:#d6a83e;background:#d6a83e;color:#1c1a12}
body.online-room-active #viewModeSwitch{display:none!important}
@media(max-width:620px){
  .online-result-panel{width:calc(100% - 28px);box-sizing:border-box;padding:26px 16px}
  .online-result-panel h2{font-size:26px}
  .online-result-panel strong{font-size:20px}
  .online-result-actions{flex-direction:column}
  .online-result-actions button{width:100%}
}

/* v0.12.5: オンライン待機中に陣営と対局条件を明示 */
.online-waiting-settings{margin:.8rem 0 1rem;padding:.65rem .9rem;border:1px solid rgba(255,255,255,.24);border-radius:.65rem;font-weight:700;line-height:1.7;white-space:pre-line}
.room-bar #roomSettings{white-space:nowrap}


/* v0.12.5: mobile turn visibility, persistent danger alerts */
.turn-notice{border:2px solid #d6a83e;background:linear-gradient(135deg,#4b160f,#8c2b18);box-shadow:0 0 24px #d6a83e66;color:#fff;text-align:center}
.turn-notice span{font-weight:900;letter-spacing:.18em;color:#ffd976}
.turn-notice strong{display:block;font-size:22px;line-height:1.35}
.piece.threat-1{background:#f0c419!important;box-shadow:0 0 0 3px #f0c419,0 0 15px #f0c419!important}
.piece.threat-2{background:#e33b2e!important;box-shadow:0 0 0 3px #e33b2e,0 0 18px #e33b2e!important;color:#fff!important}
@media(max-width:620px){
  .game-layout>.board-wrap,.online-layout>.board-wrap{order:2}
  .game-layout .turn-notice,.online-layout .turn-notice{order:1!important;margin:0 0 8px!important;padding:12px 10px!important;position:sticky;top:0;z-index:35}
  .game-layout .turn-notice strong,.online-layout .turn-notice strong{font-size:24px}
  body.player-sente .game-layout .hand-panel-sente,body.player-sente .online-layout .hand-panel-sente,body.player-gote .game-layout .hand-panel-gote,body.player-gote .online-layout .hand-panel-gote{order:3}
  .game-layout .match-controls,.online-layout .match-controls{order:4}
  body.player-sente .game-layout .hand-panel-gote,body.player-sente .online-layout .hand-panel-gote,body.player-gote .game-layout .hand-panel-sente,body.player-gote .online-layout .hand-panel-sente{order:5}
  .game-layout .display-guide,.online-layout .display-guide{order:6}
}

/* v0.12.7 PC readability */
.support-controls{margin-bottom:12px}
.support-controls .toggle{margin:0}
body.online-reviewing #onlineResultOverlay{display:none!important}

.board{background:linear-gradient(#1b10062b,#1b10062b),linear-gradient(90deg,#8f632f,#a67438 48%,#855925)!important}
.piece:not(.threat-1):not(.threat-2):not(.forecast-white):not(.forecast-red){background:linear-gradient(145deg,#d7b875,#b98c43)!important;color:#120b05!important;text-shadow:0 1px 0 #f5dea988!important}


/* v0.13.1: future forecast mode uses the same dark board treatment as dark shogi. */
body.forecast-input #futureBoard{
  border-color:#36515a!important;
  background:radial-gradient(circle at 50% 48%,#102932 0,#071116 58%,#02080b 100%)!important;
  box-shadow:0 22px 70px #000,0 0 45px #214d5750!important;
}
body.forecast-input #futureBoard .square{border-color:#29434c!important}
body.forecast-input #futureBoard .piece{
  color:#101719!important;
  background:linear-gradient(145deg,#d9ddcf,#8ea1a1)!important;
  box-shadow:inset 0 0 0 1px #ffffff55,0 1px 0 #263a40!important;
  text-shadow:0 1px 0 #ffffff55!important;
  filter:drop-shadow(0 0 7px #bcdfe580) drop-shadow(0 2px 1px #000)!important;
}
body.forecast-input #futureBoard .piece.forecast-white{
  color:#12161a!important;
  background:#ffffff!important;
  box-shadow:inset 0 0 0 2px #fff!important;
  filter:drop-shadow(0 0 12px #fffbbb) drop-shadow(0 2px 1px #000)!important;
}
body.forecast-input #futureBoard .piece.forecast-red{
  color:#fff!important;
  background:#e3262e!important;
  box-shadow:inset 0 0 0 2px #ffaaa5!important;
  filter:drop-shadow(0 0 14px #ff3028dd) drop-shadow(0 2px 1px #000)!important;
}