:root {
  --felt-950: #07110f; --felt-900: #0b1c18; --felt-800: #103029; --felt-700: #17483d;
  --rail: #0b1118; --surface: #0f151d; --surface-high: #151d27;
  --paper: #f5f2ea; --paper-dim: #c3cbd3; --stone: #7f8a96;
  --brass: #c9ae72; --brass-light: #ead6a4; --accent: #72d6b3;
  --red: #bd4456; --red-light: #ed7885; --blue: #7ca7d8; --shadow: rgba(0, 0, 0, .56);
  --display: 'Segoe UI Variable Display', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --body: 'Segoe UI Variable Text', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --mono: 'Cascadia Mono', Consolas, monospace;
}
:root[data-theme="light"] {
  --felt-950: #dbece4; --felt-900: #c9e3d7; --felt-800: #acd5c3; --felt-700: #7ebca4;
  --rail: #edf1f4; --surface: #f7f9fa; --surface-high: #ffffff;
  --paper: #17212b; --paper-dim: #4e5b68; --stone: #6d7985;
  --brass: #95712e; --brass-light: #71541e; --accent: #137b68;
  --red: #b63b4e; --red-light: #a63246; --blue: #326da6; --shadow: rgba(37, 49, 58, .2);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; padding: 22px 14px; color: var(--paper); font-family: var(--body); background: radial-gradient(circle at 50% -10%, #20302e 0, #0a1015 42%, #05070a 100%); }
body.modal-open { overflow: hidden; }
button, select { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.room { width: min(980px, 100%); margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: linear-gradient(160deg, rgba(16,23,31,.98), rgba(7,10,14,.98)); box-shadow: 0 30px 80px var(--shadow); }
.site-bar { min-height: 58px; padding: 0 clamp(16px, 3vw, 28px); display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(8,12,17,.9); }
.brand-home { padding: 0; display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--paper); cursor: pointer; font-size: .88rem; font-weight: 700; letter-spacing: .02em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(114,214,179,.45); border-radius: 9px; color: var(--accent); background: rgba(114,214,179,.08); font: 700 .82rem var(--mono); }
.site-tools { display: flex; align-items: center; gap: 8px; }
.language-control { min-height: 36px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: rgba(255,255,255,.035); }
.language-icon { font-size: .85rem; line-height: 1; }
.language-select { max-width: 108px; padding: 6px 3px; border: 0; outline: 0; color: var(--paper); background: transparent; cursor: pointer; font-size: .74rem; }
.language-select option { color: var(--paper); background: var(--surface); }
.theme-btn { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; }
.theme-icon { font-size: .95rem; line-height: 1; }
.app { padding: clamp(16px, 3vw, 30px); }
.topbar { min-height: 58px; display: grid; grid-template-columns: 110px 1fr 110px; gap: 12px; align-items: center; text-align: center; }
#homeBtn { grid-column: 1; justify-self: start; }
.topbar-title { grid-column: 2; min-width: 0; }
#resetStats { grid-column: 3; justify-self: end; }
h1 { margin: 0; font: 650 clamp(1.2rem, 3.4vw, 1.75rem) var(--display); letter-spacing: -.02em; }
.ghost-btn { padding: 7px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: rgba(255,255,255,.035); cursor: pointer; font-size: .76rem; transition: border-color .15s, background .15s, color .15s; }
.ghost-btn:hover { border-color: rgba(114,214,179,.55); background: rgba(114,214,179,.08); color: var(--accent); }
.home-view { padding: 12px 0 4px; }
.home-intro { margin: -2px auto 16px; color: var(--paper-dim); text-align: center; font-size: .82rem; line-height: 1.5; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mode-card { position: relative; min-height: 180px; padding: 23px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: linear-gradient(145deg, rgba(22,30,40,.96), rgba(10,15,21,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); cursor: pointer; text-align: left; transition: transform .15s, border-color .15s, box-shadow .15s; }
.mode-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 72%); opacity: .65; }
.mode-card:hover { transform: translateY(-3px); border-color: rgba(114,214,179,.45); box-shadow: 0 14px 30px rgba(0,0,0,.34); }
.mode-card .mode-icon { padding: 4px 7px; border-radius: 999px; color: var(--accent); background: rgba(114,214,179,.09); font: 700 .76rem var(--mono); letter-spacing: .12em; }
.mode-card strong { margin-top: 10px; font: 650 1.24rem var(--display); }
.mode-card > span:not(.mode-icon) { color: var(--paper-dim); font-size: .85rem; }
.mode-card small { margin-top: auto; color: var(--stone); font: .72rem var(--mono); }
.model-note, .approx-note { color: var(--stone); font-size: .72rem; line-height: 1.5; }
.model-note { margin: 20px auto 0; max-width: 720px; text-align: center; }
.config-panel { margin: 10px 0; padding: 10px 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.025); }
.config-panel label { display: flex; align-items: center; gap: 7px; color: var(--paper-dim); font-size: .78rem; }
.config-panel select { padding: 5px 7px; color: var(--paper); border: 1px solid rgba(255,255,255,.13); border-radius: 7px; background: var(--rail); }
.hand-filters { display: contents; }
.check input { accent-color: var(--brass); }
.stats { margin: 10px 0 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 5vw, 42px); }
.stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stats b { color: var(--brass-light); font: 700 1rem var(--mono); }
.stats small { color: var(--stone); font-size: .63rem; letter-spacing: .1em; }
.stats .muted { opacity: .42; }
.scenario-panel { padding: clamp(14px, 3vw, 24px); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: radial-gradient(circle at 50% 40%, rgba(18,57,49,.4), rgba(11,16,22,.94) 64%); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.scenario-heading { margin-bottom: 10px; display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }
.pill { display: inline-block; color: var(--accent); font: .65rem var(--mono); letter-spacing: .18em; }
h2 { margin: 4px 0 0; font: 650 1.12rem var(--display); }
.tournament-info { display: flex; flex-direction: column; align-items: flex-end; color: var(--paper-dim); font-size: .7rem; }
.tournament-info b { color: var(--brass-light); }
.tournament-info span { margin-top: 3px; }
.poker-table { position: relative; width: min(680px, 96%); aspect-ratio: 2 / 1; margin: 10px auto 18px; border: 7px solid #202832; border-radius: 50%; background: radial-gradient(ellipse at 50% 42%, var(--felt-700), var(--felt-800) 56%, var(--felt-950)); box-shadow: inset 0 0 0 1px rgba(114,214,179,.22), inset 0 0 45px rgba(0,0,0,.2), 0 12px 28px rgba(0,0,0,.42); }
#seatLayer { position: absolute; inset: 0; }
.seat { --pos-accent: #9ca8b4; position: absolute; width: 82px; min-height: 55px; padding: 6px 5px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; border: 1px solid color-mix(in srgb, var(--pos-accent) 78%, #1b232c); border-radius: 10px; background: rgba(10,15,21,.96); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--pos-accent) 65%, transparent), 0 5px 12px rgba(0,0,0,.38); text-align: center; transition: opacity .15s, filter .15s, border-color .15s; }
.seat b { color: var(--pos-accent); font: 700 .72rem var(--mono); }
.seat span { color: var(--brass-light); font: .67rem var(--mono); }
.seat small { color: var(--stone); font-size: .57rem; min-height: 1em; }
.seat-status { position: absolute; top: -8px; left: -8px; z-index: 2; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid var(--rail); border-radius: 50%; color: #fff; background: #67727e; box-shadow: 0 3px 8px rgba(0,0,0,.35); font: 800 .72rem/1 var(--mono); }
.seat.action-aggressive:not(.hero):not(.folded) { border-color: #e17a61; }
.seat.action-aggressive .seat-status { background: #d45f45; }
.seat.action-call .seat-status { background: #397fb8; }
.seat.action-check .seat-status { background: #2f8d73; }
.seat.action-wait .seat-status { background: #69747f; }
.seat.action-you .seat-status { color: #312813; background: #e0bd67; }
.seat.action-fold .seat-status { background: #5d6670; }
.seat.pos-utg, .seat.pos-utg1, .seat.pos-utgplus1, .seat.pos-mp, .seat.pos-lj { --pos-accent: #b09acb; }
.seat.pos-hj { --pos-accent: #78a9cf; }
.seat.pos-co { --pos-accent: #62b9a5; }
.seat.pos-btn { --pos-accent: #e0bd67; }
.seat.pos-sb { --pos-accent: #df9370; }
.seat.pos-bb { --pos-accent: #829edf; }
.seat.hero { border-color: var(--brass-light); background: linear-gradient(155deg, #3b3320, #1d1b16); box-shadow: inset 0 2px 0 var(--pos-accent), 0 0 18px rgba(234,214,164,.22); }
.seat.aggressor:not(.hero):not(.folded) { border-color: var(--red-light); }
.seat.folded { opacity: .34; filter: grayscale(.8) saturate(.18); border-color: #4c5661; background: #070a0e; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.seat.folded b, .seat.folded span, .seat.folded small { color: #88919a; }
.table-center { position: absolute; inset: 38% 28%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--paper-dim); font: .7rem var(--mono); }
.table-center span:last-child { color: var(--brass); letter-spacing: .15em; }
.action-history { min-height: 25px; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.action-history span { padding: 4px 8px; border: 1px solid rgba(255,255,255,.055); border-radius: 999px; background: rgba(4,7,10,.55); color: var(--paper-dim); font-size: .7rem; }
.cards-area { margin: 15px 0 5px; display: flex; justify-content: center; align-items: flex-start; gap: 40px; text-align: center; }
.cards-area small { display: block; margin-bottom: 6px; color: var(--stone); font-size: .65rem; letter-spacing: .1em; }
.cards { display: flex; justify-content: center; gap: 7px; }
.playing-card { position: relative; width: 48px; height: 66px; padding: 6px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.8); border-radius: 10px; background: linear-gradient(145deg, #fffdf8, #e8e5dd); box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(0,0,0,.4); font: 750 .82rem var(--mono); }
.playing-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.5), transparent 42%); pointer-events: none; }
.playing-card b, .playing-card i { position: relative; z-index: 1; }
.playing-card i { align-self: flex-end; font-style: normal; font-size: 1.25rem; }
.playing-card.red { color: var(--red); }.playing-card.black { color: #182129; }
.board .playing-card { width: 42px; height: 58px; }
.decision-prompt { margin: 14px 0 0; color: var(--paper); text-align: center; font-size: .9rem; }
.analysis-loading { margin: 16px 0; color: var(--brass-light); text-align: center; font: .76rem var(--mono); animation: pulse 1s infinite alternate; }
@keyframes pulse { to { opacity: .4; } }
.answer-grid { margin: 16px auto 0; max-width: 660px; display: flex; justify-content: center; gap: 10px; }
.answer-btn { min-width: 110px; flex: 1; max-width: 190px; padding: 13px 12px; display: flex; justify-content: center; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: linear-gradient(145deg, var(--surface-high), var(--rail)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); cursor: pointer; }
.answer-btn:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.answer-btn.selected { border-color: var(--accent); background: rgba(114,214,179,.12); }
.answer-btn:disabled { opacity: .5; cursor: default; }
.answer-btn kbd { color: var(--stone); font: .65rem var(--mono); }
.action-stage-hint { margin: 10px auto -7px; display: flex; justify-content: center; align-items: center; gap: 12px; color: var(--paper-dim); font-size: .78rem; }
.action-stage-hint button { padding: 5px 9px; border: 1px solid rgba(201,162,75,.32); border-radius: 7px; background: transparent; color: var(--brass-light); cursor: pointer; font-size: .7rem; }
.feedback-modal { position: fixed; inset: 0; z-index: 1000; padding: 16px; display: grid; place-items: center; background: rgba(2, 10, 7, .76); backdrop-filter: blur(6px); }
.feedback { width: min(520px, 100%); max-height: min(82dvh, 720px); overflow-y: auto; padding: 20px; border: 1px solid; border-radius: 18px; text-align: center; background: linear-gradient(150deg, #102e23, #071a13); box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.feedback.correct { border-color: var(--brass); }.feedback.incorrect { border-color: var(--red-light); }
.feedback-title { color: var(--brass-light); font: 400 1.15rem var(--display); }
.incorrect .feedback-title { color: var(--red-light); }
.score-row { margin: 8px 0; display: flex; justify-content: center; gap: 8px; }
.score-row span { padding: 3px 8px; border-radius: 999px; font-size: .7rem; }.score-row .ok { background: rgba(201,162,75,.18); color: var(--brass-light); }.score-row .bad { background: rgba(182,70,70,.18); color: var(--red-light); }
.recommendations { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; align-items: center; }
.recommendations small { color: var(--stone); }.recommendations span { padding: 4px 8px; border-radius: 7px; background: rgba(201,162,75,.12); font-size: .75rem; }
.accepted-size, .reason { margin: 9px auto; color: var(--paper-dim); font-size: .8rem; line-height: 1.5; }
.feedback-details { margin-top: 10px; padding-top: 7px; border-top: 1px solid rgba(201,162,75,.16); }
.metric-grid { margin: 12px auto; max-width: 700px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.metric-grid span { min-width: 90px; padding: 7px 9px; display: flex; flex-direction: column; border-radius: 8px; background: rgba(0,0,0,.22); }
.metric-grid small { color: var(--stone); font-size: .6rem; }.metric-grid b { color: var(--paper); font: .75rem var(--mono); }
.approx-note { margin: 8px 0; }
.feedback-actions { margin-top: 12px; display: flex; justify-content: center; align-items: center; gap: 12px; }
#continueBtn { padding: 8px 15px; border: 0; border-radius: 8px; color: var(--felt-950); background: var(--brass-light); cursor: pointer; font-weight: 700; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 2px; }
:root[data-theme="light"] body { background: radial-gradient(circle at 50% -10%, #dce9e5 0, #edf2f3 44%, #dfe5e8 100%); }
:root[data-theme="light"] .room { border-color: rgba(23,33,43,.12); background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(237,242,244,.98)); }
:root[data-theme="light"] .site-bar { border-color: rgba(23,33,43,.1); background: rgba(250,252,252,.94); }
:root[data-theme="light"] .ghost-btn, :root[data-theme="light"] .language-control { border-color: rgba(23,33,43,.15); background: rgba(255,255,255,.76); }
:root[data-theme="light"] .mode-card { border-color: rgba(23,33,43,.1); background: linear-gradient(145deg, #fff, #eef3f4); box-shadow: inset 0 1px 0 #fff; }
:root[data-theme="light"] .config-panel { border-color: rgba(23,33,43,.1); background: rgba(255,255,255,.55); }
:root[data-theme="light"] .scenario-panel { border-color: rgba(23,33,43,.1); background: radial-gradient(circle at 50% 40%, rgba(126,188,164,.22), rgba(247,249,250,.96) 65%); }
:root[data-theme="light"] .poker-table { border-color: #68736f; box-shadow: inset 0 0 0 1px rgba(20,100,80,.2), inset 0 0 45px rgba(26,61,48,.12), 0 12px 28px rgba(37,49,58,.2); }
:root[data-theme="light"] .seat { border-color: color-mix(in srgb, var(--pos-accent) 78%, #78838d); background: rgba(255,255,255,.96); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--pos-accent) 65%, transparent), 0 5px 12px rgba(37,49,58,.2); }
:root[data-theme="light"] .seat.hero { background: linear-gradient(155deg, #fff7df, #f3ead1); }
:root[data-theme="light"] .seat.folded { border-color: #aab2b8; background: #dfe4e6; }
:root[data-theme="light"] .seat.folded b, :root[data-theme="light"] .seat.folded span, :root[data-theme="light"] .seat.folded small { color: #68737d; }
:root[data-theme="light"] .action-history span { border-color: rgba(23,33,43,.1); background: rgba(255,255,255,.65); }
:root[data-theme="light"] .answer-btn { border-color: rgba(23,33,43,.12); background: linear-gradient(145deg, #fff, #e8eef0); box-shadow: inset 0 1px 0 #fff; }
:root[data-theme="light"] .feedback-modal { background: rgba(37,49,45,.42); }
:root[data-theme="light"] .feedback { background: linear-gradient(150deg, #fff, #edf5f1); box-shadow: 0 24px 70px rgba(37,49,58,.3); }
:root[data-theme="light"] .metric-grid span { background: rgba(23,33,43,.06); }
@media (max-width: 700px) {
  body { padding: 5px; }
  .room { border-radius: 18px; }
  .site-bar { min-height: 50px; padding: 0 11px; }
  .brand-home { gap: 8px; font-size: .76rem; }
  .brand-mark { width: 27px; height: 27px; border-radius: 8px; font-size: .72rem; }
  .app { padding: 9px 8px 12px; }
  .topbar { min-height: 48px; grid-template-columns: 62px 1fr 76px; gap: 5px; }
  h1 { font-size: 1.16rem; }
  .site-tools { gap: 4px; }
  .language-control { min-height: 32px; padding: 0 5px; gap: 3px; }
  .language-select { max-width: 78px; padding: 5px 1px; font-size: .62rem; }
  .theme-btn { width: 32px; height: 32px; }
  .ghost-btn { padding: 6px 5px; font-size: .62rem; }
  .home-view { padding: 10px 0 2px; }
  .home-intro { margin: -2px 8px 10px; font-size: .68rem; }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mode-card { min-height: 132px; padding: 13px 12px; gap: 4px; border-radius: 13px; }
  .mode-card strong { margin-top: 7px; font-size: 1rem; }
  .mode-card > span:not(.mode-icon) { font-size: .7rem; line-height: 1.3; }
  .mode-card small { font-size: .59rem; }
  .model-note { margin-top: 10px; font-size: .62rem; }
  .config-panel { margin: 6px 0; padding: 7px 8px; gap: 6px 10px; }
  .config-panel label { font-size: .7rem; }
  .config-panel select { max-width: 145px; padding: 4px 5px; }
  .stats { margin: 5px 0 8px; gap: 20px; }
  .stats b { font-size: .88rem; }.stats small { font-size: .55rem; }
  .scenario-panel { padding: 10px 8px 11px; border-radius: 15px; }
  .scenario-heading { margin-bottom: 4px; flex-direction: row; gap: 8px; }
  h2 { font-size: 1rem; }
  .tournament-info { align-items: flex-end; font-size: .6rem; }
  .poker-table { width: 94%; aspect-ratio: 1.95 / 1; margin: 5px auto 10px; border-width: 5px; }
  .seat { width: 58px; min-height: 43px; padding: 3px 2px; border-radius: 8px; }
  .seat b { font-size: .6rem; }.seat span { font-size: .54rem; }.seat small { font-size: .5rem; }
  .seat-status { top: -6px; left: -6px; width: 16px; height: 16px; border-width: 1px; font-size: .58rem; }
  .table-center { font-size: .6rem; }
  .action-history { min-height: 19px; gap: 4px; }.action-history span { padding: 3px 7px; font-size: .62rem; }
  .cards-area { margin: 8px 0 3px; gap: 16px; }
  .cards-area small { margin-bottom: 3px; }
  .playing-card { width: 39px; height: 54px; }.board .playing-card { width: 32px; height: 45px; font-size: .62rem; }
  .playing-card i { font-size: 1rem; }
  .decision-prompt { margin-top: 8px; font-size: .78rem; }
  .analysis-loading { margin: 9px 0; }
  .answer-grid { margin-top: 8px; flex-wrap: wrap; gap: 7px; }
  .answer-btn { min-width: 82px; padding: 10px 7px; }
  .action-stage-hint { margin-top: 7px; }
  .feedback-modal { padding: 10px; }
  .feedback { padding: 17px 14px; max-height: 86dvh; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }