:root { color-scheme: dark; font-family: system-ui, sans-serif; background:#0c211d; color:#f7f4dc; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 20% 0,#315a43 0,transparent 32rem),#0c211d; }
button { font:inherit; cursor:pointer; }
.game-shell { width:min(1180px,100%); margin:auto; padding:clamp(12px,2vw,26px); }
.hero { display:flex; justify-content:space-between; align-items:center; gap:12px; }
h1 { margin:0; font-size:clamp(1.45rem,4vw,2.35rem); } .eyebrow { margin:0 0 2px; color:#ead47e; text-transform:uppercase; letter-spacing:.12em; font-size:.73rem; }
.status { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin:16px 0 10px; }
.status div { background:#14382e; border:1px solid #4f8063; padding:9px 11px; border-radius:12px; } .status span { display:block; color:#b9cfb8; font-size:.76rem; } .status strong { font-size:1.07rem; }
.message { min-height:1.5em; margin:8px 0 14px; color:#f4df8b; }
.play-area { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:18px; align-items:start; }
.board-wrap { overflow:auto; border-radius:18px; background:#173f31; padding:clamp(7px,1.2vw,13px); box-shadow:0 14px 35px #0007; }
.board { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); grid-template-rows:repeat(10,minmax(0,1fr)); gap:4px; width:100%; min-width:0; aspect-ratio:1; }
.cell { border:1px solid #b9b4a6; border-radius:7px; background:#faf8f0; color:#171717; font:700 clamp(1rem,2.4vw,1.65rem) Georgia,serif; position:relative; min-height:43px; touch-action:manipulation; overflow:hidden; }
.cell:hover:not(:disabled),.cell:focus-visible:not(:disabled) { outline:3px solid #fff0a5; transform:translateY(-1px); }
.red { color:#c3262d!important; } .black { color:#171717!important; }.cell.red .card-index,.cell.red .number-design,.cell.red .face-figure,.card.red .card-index,.card.red .number-design,.card.red .face-figure { color:#c3262d!important; -webkit-text-fill-color:#c3262d; }.cell.black .card-index,.cell.black .number-design,.cell.black .face-figure,.card.black .card-index,.card.black .number-design,.card.black .face-figure { color:#171717!important; -webkit-text-fill-color:#171717; }
.suit-icon { width:1em; height:1em; display:inline-block; vertical-align:-.12em; }.suit-icon.suit-red { fill:#c3262d; }.suit-icon.suit-black { fill:#171717; }
.card-index { position:absolute; top:4px; left:5px; display:grid; justify-items:center; line-height:.78; font-size:.62em; z-index:1; }.card-index b { font-size:1.15em; }.card-index i { font-style:normal; font-size:1.05em; }.card-index.reverse { top:auto; left:auto; right:5px; bottom:4px; rotate:180deg; }
.number-design { position:absolute; inset:24% 17% 18%; display:grid; place-items:center; align-content:center; line-height:.78; opacity:.86; }.number-design b { font-size:1.55em; letter-spacing:-.06em; }.number-design i { margin-top:.08em; font-style:normal; font-size:1.05em; }
.face-figure { position:absolute; inset:18% 19%; display:grid; place-items:center; align-content:center; line-height:.72; border:1px solid currentColor; background:linear-gradient(135deg,#f9e8b8 0 48%,#fffdf6 48% 52%,#d9e7dd 52%); overflow:hidden; }.face-crown { font-size:.9em; z-index:1; }.face-person { font-size:1.45em; margin-top:-.25em; z-index:1; }.face-figure em { font:700 .27em system-ui,sans-serif; letter-spacing:.04em; margin-top:.15em; z-index:1; }.face-figure.queen { background:linear-gradient(135deg,#f5d7df 0 48%,#fffdf6 48% 52%,#e3d5ed 52%); }
.piece { position:absolute; top:50%; left:50%; width:70%; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; font-size:0; transform:translate(-50%,-50%); box-shadow:0 2px 4px #0008,inset 0 0 0 3px #ffffff55; }
.light-piece { background:#e4b72f; border:3px solid #fff0a0; } .opponent-piece { background:#347348; border:3px solid #85bd74; }.opponent-piece.recent-opponent-move { z-index:3; animation:opponent-placement 2s ease-in-out both; }
@keyframes opponent-placement { 0% { scale:.35; box-shadow:0 0 0 0 #ffe37a00; } 15%,82% { scale:1.42; box-shadow:0 0 0 5px #ffe37a,0 0 20px 8px #ffe37aaa; } 100% { scale:1; box-shadow:0 2px 4px #0008,inset 0 0 0 3px #ffffff55; } }
.cell.lit,.cell.opponent { background:#ece8dc; } .cell.corner { background:#e4b72f; color:#fff6bd!important; border-color:#ffe989; }
.corner-star { font-size:1.3em; text-shadow:0 1px 2px #5d461c; }
.cell.selected-target { background:#1d4b3d!important; border:3px solid #ffe37a; box-shadow:inset 0 0 0 2px #fff7c5,0 0 0 2px #173f31; }.cell.selected-target.black { color:#fff!important; }.cell.selected-target.red { color:#ffd1d1!important; }
.side-panel { background:#14382e; border:1px solid #4f8063; border-radius:18px; padding:14px; } .side-panel h2 { margin:0 0 12px; font-size:1.1rem; }
.hand { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.card { min-height:108px; padding:7px; background:#fffdf6; color:#171717; border:3px solid #c9c3b4; border-radius:10px; font:700 1.65rem Georgia,serif; box-shadow:0 2px 4px #0004; position:relative; overflow:hidden; }.card small { position:absolute; inset:auto 0 7px; display:block; text-align:center; font:600 .68rem system-ui,sans-serif; color:#687069; }.card .card-index { font-size:.76em; }.card .number-design { inset:23% 22% 20%; }.card .number-design b { font-size:1.95em; }.card .number-design i { font-size:1.25em; }.card .face-figure { inset:15% 22% 18%; font-size:1.55em; }.card.special { color:#315c49; }.special-sigil { display:grid; min-height:75px; place-items:center; font-size:2.1em; }.card.selected { background:#173f31; border-color:#ffe37a; transform:translateY(-3px); box-shadow:0 0 0 3px #f0b83e,0 8px 14px #0008; }.card.selected.black { color:#fff!important; -webkit-text-fill-color:#fff; }.card.selected.red { color:#ffd1d1!important; -webkit-text-fill-color:#ffd1d1; }.card.selected small { color:#fff0b5; -webkit-text-fill-color:#fff0b5; }.card:disabled { opacity:.52; cursor:not-allowed; }
.secondary { background:#285544; color:#fbf4d5; border:1px solid #6ba27d; border-radius:10px; padding:9px 12px; }.special-actions { display:grid; gap:8px; margin-top:12px; }.hint { font-size:.82rem; line-height:1.35; color:#c2d7ba; }
dialog { max-width:500px; color:#173529; background:#f6efcf; border:3px solid #d4a933; border-radius:16px; padding:22px; } dialog::backdrop { background:#001b14bb; }.close { float:right; border:0; background:transparent; font-size:1.8rem; color:#173529; }
.mode-dialog { width:min(720px,calc(100% - 24px)); max-width:720px; padding:clamp(18px,4vw,30px); }.mode-dialog h2 { margin:0; font-size:clamp(1.45rem,4vw,2rem); }.mode-dialog > p { margin:7px 0 18px; line-height:1.4; }.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.mode-grid button { min-height:110px; padding:15px; border:2px solid #315c49; border-radius:12px; color:#173529; background:#fffdf6; text-align:left; box-shadow:0 3px 0 #9daf99; }.mode-grid button:hover,.mode-grid button:focus-visible { border-color:#d49a18; background:#fff1b6; transform:translateY(-2px); }.mode-grid strong,.mode-grid span { display:block; }.mode-grid strong { font-size:1.08rem; }.mode-grid span { margin-top:6px; color:#456152; font-size:.84rem; line-height:1.3; }
.result-dialog { width:min(390px,calc(100% - 30px)); padding:28px; text-align:center; overflow:hidden; }.result-dialog::before { content:""; position:absolute; inset:-45%; background:conic-gradient(from 0deg,transparent 0 8%,#f2c74e66 8% 12%,transparent 12% 20%); animation:result-rays 9s linear infinite; }.result-dialog > * { position:relative; }.result-icon { font-size:4.8rem; line-height:1; filter:drop-shadow(0 5px 2px #72581966); animation:result-bounce .75s ease-out both; }.result-dialog h2 { margin:12px 0 5px; font-size:1.8rem; }.result-dialog p { margin:0 0 20px; line-height:1.4; }.result-dialog .secondary { min-width:190px; font-weight:700; }.result-dialog.loss { border-color:#8f3d3d; background:#f8e6d6; }.result-dialog.loss::before { background:conic-gradient(from 0deg,transparent 0 8%,#ba665566 8% 12%,transparent 12% 20%); }.result-dialog.loss .result-icon { filter:drop-shadow(0 5px 2px #7d413966); } @keyframes result-rays { to { rotate:360deg; } } @keyframes result-bounce { 0% { scale:.2; opacity:0; } 65% { scale:1.18; } 100% { scale:1; opacity:1; } }
@media (max-width:1020px) { .play-area { grid-template-columns:1fr; }.side-panel { display:grid; grid-template-columns:1fr auto; column-gap:12px; }.side-panel h2,.hint { grid-column:1/-1; }.hand { grid-template-columns:repeat(4,1fr); } }
@media (max-width:760px) { .game-shell { padding:10px; }.play-area { display:flex; flex-direction:column; gap:10px; }.side-panel { order:-1; display:block; padding:10px; border-radius:12px; }.side-panel h2 { margin-bottom:7px; font-size:1rem; }.board-wrap { padding:5px; border-radius:12px; }.board { gap:2px; }.cell { min-height:0; border-radius:4px; font-size:clamp(.95rem,4.5vw,1.08rem); }.cell .card-index { top:2px; left:3px; font-size:.82em; }.cell .card-index.reverse { display:none; }.cell .number-design,.cell .face-figure { display:none; }.piece { border-width:2px; }.hand { grid-template-columns:repeat(4,1fr); gap:5px; }.card { min-height:56px; padding:4px; border-width:2px; border-radius:7px; font-size:1rem; }.card .card-index { font-size:.62em; }.card .card-index.reverse { display:none; }.card .number-design { inset:17% 12% 10%; }.card .number-design b { font-size:1.55em; }.card .number-design i { font-size:1em; }.card .face-figure { inset:17% 17% 12%; font-size:.78em; }.card .face-figure em { display:none; }.special-sigil { min-height:43px; font-size:1.45em; }.card small { inset:auto 0 3px; font-size:.56rem; }.special-actions { display:flex; gap:6px; margin-top:8px; }.special-actions .secondary { flex:1; padding:7px 6px; font-size:.82rem; }.hint { margin:8px 0 0; font-size:.73rem; }.status { grid-template-columns:repeat(2,1fr); }.hero { align-items:flex-start; } }
@media (max-width:520px) { .mode-grid { grid-template-columns:1fr; }.mode-grid button { min-height:72px; padding:11px 13px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }