@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400; font-display: block; src: url('./assets/fonts/cairo-400.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 700; font-display: block; src: url('./assets/fonts/cairo-700.ttf') format('truetype'); }
:root {
  --ink: #102f28;
  --ink-soft: #24483f;
  --felt: #0f5a47;
  --felt-deep: #084234;
  --felt-light: #176d55;
  --cream: #f4f0e6;
  --cream-dark: #e6e0d1;
  --paper: #fffdf8;
  --lime: #dcf274;
  --lime-dark: #bdde56;
  --coral: #ef8159;
  --gold: #e8bd64;
  --muted: #78928a;
  --shadow: 0 18px 46px rgba(4, 28, 22, .22);
  /* Master UI reference tokens: extracted from the existing 1.5x MASTER_MODE rules below. */
  --master-ui-scale: 1.5;
  --master-ui-title: clamp(calc(21px * var(--master-ui-scale)), calc(3vw * var(--master-ui-scale)), calc(30px * var(--master-ui-scale)));
  --master-ui-section-title: calc(13px * var(--master-ui-scale));
  --master-ui-body: calc(9px * var(--master-ui-scale));
  --master-ui-caption: calc(8px * var(--master-ui-scale));
  --master-ui-control-font: calc(9px * var(--master-ui-scale));
  --master-ui-control-padding-y: calc(7px * var(--master-ui-scale));
  --master-ui-control-padding-x: calc(9px * var(--master-ui-scale));
  --master-ui-control-gap: calc(6px * var(--master-ui-scale));
  --master-ui-icon: calc(24px * var(--master-ui-scale));
  --master-ui-card-padding: calc(11px * var(--master-ui-scale));
  --master-ui-card-gap: calc(9px * var(--master-ui-scale));
  --master-ui-check-size: 18px;
}
* { box-sizing: border-box; }

/* Game surfaces behave like controls, not like selectable documents. Text-entry fields explicitly opt back in below. */
.app-shell,
.app-shell :where(button, summary, select, [role='button'], [role='tab'], [role='option'], [data-analysis-element-id], [data-analysis-mark-id], .domino-tile, .hand-tile, .chain-tile, .analysis-layer-overlay, .analysis-layer-svg, .analysis-mark),
.app-shell button,
.app-shell summary,
.app-shell select,
.app-shell [role='button'],
.app-shell [role='tab'],
.app-shell [role='option'],
.app-shell [data-analysis-element-id],
.app-shell [data-analysis-mark-id],
.app-shell .domino-tile,
.app-shell .hand-tile,
.app-shell .chain-tile,
.app-shell .analysis-layer-overlay,
.app-shell .analysis-layer-svg,
.app-shell .analysis-mark {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.app-shell {
  cursor: default;
}
.app-shell :where(button:not(:disabled), summary, select, [role='button'], [role='tab'], [role='option']) {
  cursor: pointer;
}
.app-shell :where(button:disabled, select:disabled) {
  cursor: default;
}
.app-shell :where(input:not([type='checkbox']):not([type='range']):not([type='file']), textarea, [contenteditable='true']) {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: text;
}
.app-shell :where(input[type='checkbox'], input[type='range'], input[type='file']) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

/* Dialogs and education surfaces live beside .app-shell; keep the same game-like interaction contract there too. */
body,
body :where(button, summary, select, [role='button'], [role='tab'], [role='option'], [data-analysis-element-id], [data-analysis-mark-id], .domino-tile, .hand-tile, .chain-tile, .analysis-layer-overlay, .analysis-layer-svg, .analysis-mark),
body button,
body summary,
body select,
body [role='button'],
body [role='tab'],
body [role='option'],
body [data-analysis-element-id],
body [data-analysis-mark-id],
body .domino-tile,
body .hand-tile,
body .chain-tile,
body .analysis-layer-overlay,
body .analysis-layer-svg,
body .analysis-mark {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body {
  cursor: default;
}
body :where(button:not(:disabled), summary, select, [role='button'], [role='tab'], [role='option']) {
  cursor: pointer;
}
body :where(button:disabled, select:disabled) {
  cursor: default;
}
body :where(input:not([type='checkbox']):not([type='range']):not([type='file']), textarea, [contenteditable='true']),
body [contenteditable='true'] * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: text;
}
body :where(input[type='checkbox'], input[type='range'], input[type='file']) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

html { min-width: 0; background: var(--ink); overflow-x: clip; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: 'Cairo', 'DejaVu Sans', sans-serif; background: radial-gradient(circle at 20% 0%, #1b6350 0, #123e34 38%, #0c2d25 100%); }
button { font: inherit; }
.app-shell { max-width: 1500px; margin: 0 auto; padding: 12px clamp(14px, 3vw, 42px) 18px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; color: var(--paper); margin-bottom: 10px; }
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 44px; height: 34px; border: 2px solid var(--lime); border-radius: 9px; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; transform: rotate(-8deg); }
.brand-mark i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); margin: auto; }
.brand-mark i:nth-child(2) { grid-column: 2; grid-row: 1; }
.brand-mark i:nth-child(3) { grid-column: 1; grid-row: 2; }
.brand-mark i:nth-child(4) { grid-column: 2; grid-row: 2; }
.eyebrow, .section-kicker { margin: 0; color: #a8c2b9; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.topbar h1 { margin: 0; font-size: clamp(21px, 2.5vw, 30px); line-height: 1.1; font-weight: 800; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.round-badge { padding: 8px 13px; border-radius: 999px; color: var(--lime); border: 1px solid rgba(220,242,116,.34); background: rgba(9,42,34,.46); font-size: 12px; font-weight: 700; }
.speed-control { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: #e8f0e8; background: rgba(9,42,34,.4); font-size: 10px; font-weight: 700; }
.speed-control select { max-width: 150px; padding: 4px 7px; border: 1px solid rgba(220,242,116,.38); border-radius: 7px; color: var(--paper); background: #124b3c; font: inherit; cursor: pointer; }
.speed-control select:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.settings-menu { position: relative; color: #e8f0e8; font-size: 10px; font-weight: 700; }
.settings-menu summary { list-style: none; padding: 8px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(9,42,34,.4); cursor: pointer; user-select: none; }
.settings-menu summary::-webkit-details-marker { display: none; }
.settings-menu summary::after { content: '⌄'; margin-inline-start: 5px; color: var(--lime); }
.settings-menu[open] summary { border-color: rgba(220,242,116,.55); color: var(--lime); }
.settings-menu:not([open]) .settings-popover { display: none; }
.sound-toggle, .sound-volume { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; }
.sound-toggle input { width: 15px; height: 15px; accent-color: var(--lime); }
.sound-toggle small, .sound-volume small { grid-column: 2 / -1; color: #a9c5b7; font-size: 8px; font-weight: 600; }
.sound-volume { grid-template-columns: 1fr auto; margin-top: 12px; }
.sound-volume input[type='range'] { grid-column: 1 / -1; width: 100%; accent-color: var(--lime); cursor: pointer; }
.sound-volume output { color: var(--lime); font-variant-numeric: tabular-nums; }
.sound-volume small { grid-column: 1 / -1; }
.ghost-button { border: 1px solid rgba(255,255,255,.24); color: white; background: transparent; padding: 8px 14px; border-radius: 10px; cursor: pointer; transition: .18s ease; font-size: 12px; font-weight: 700; }
.ghost-button:hover { border-color: var(--lime); color: var(--lime); background: rgba(255,255,255,.06); }
.score-strip { display: grid; grid-template-columns: 1fr 180px 1fr; align-items: center; gap: 14px; padding: 10px 15px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(246,244,235,.96); box-shadow: 0 8px 26px rgba(4,27,21,.13); }
.team-score { min-width: 0; }
.score-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.score-label small { color: #738880; font-size: 10px; font-weight: 600; margin-inline-start: 3px; }
.team-dot { flex: 0 0 9px; height: 9px; border-radius: 50%; background: var(--felt); box-shadow: 0 0 0 4px rgba(15,90,71,.12); }
.team-b .team-dot { background: var(--coral); box-shadow: 0 0 0 4px rgba(239,129,89,.13); }
.score-value { display: flex; align-items: baseline; gap: 8px; margin-top: 1px; }
.score-value strong { font-size: 27px; line-height: 1; color: var(--ink); }
.score-value span { font-size: 10px; color: #879890; }
.score-track { height: 5px; overflow: hidden; margin-top: 7px; border-radius: 6px; background: #e4e8dd; }
.score-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--felt); transition: width .35s; }
.team-b .score-track i { background: var(--coral); }
.score-center { text-align: center; padding: 0 12px; border-inline: 1px solid #e1e1d6; }
.score-center .versus { display: block; color: #82948b; font-size: 10px; font-weight: 700; }
.score-center strong { display: block; color: var(--ink); font-size: 24px; line-height: 1.08; }
.score-open-status { display: block; margin-top: 2px; color: #8a7760; font-size: 8px; font-weight: 700; }
.score-open-status.score-opened { color: #426d32; }
.bant-line { display: block; color: #82948b; font-size: 10px; margin-top: 4px; }
.bant-line b { color: #31564c; margin-inline-start: 3px; }

main { display: block; }
.table-layout { min-height: clamp(390px, calc(100svh - 185px), 720px); height: auto; display: grid; grid-template-columns: minmax(130px, 178px) minmax(450px, 1fr) minmax(130px, 178px); grid-template-rows: auto minmax(320px, auto) auto; grid-template-areas: ". top ." "right board left" ". bottom ."; align-items: stretch; gap: 10px 12px; padding: 12px; border-radius: 26px; background: linear-gradient(140deg, rgba(250,249,239,.97), rgba(232,228,212,.97)); box-shadow: var(--shadow); position: relative; overflow: visible; }
.table-layout::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(16,47,40,.07); border-radius: 20px; pointer-events: none; }
.seat-top { grid-area: top; }
.seat-left { grid-area: left; }
.seat-right { grid-area: right; }
.seat-bottom { grid-area: bottom; }
.player-seat { position: relative; z-index: 1; min-width: 0; border: 1px solid #d8ddcf; background: rgba(255,253,248,.83); border-radius: 15px; padding: 7px 9px; box-shadow: 0 5px 12px rgba(26,56,45,.06); transition: .2s; }
.player-seat.active-seat { border-color: var(--felt); box-shadow: 0 0 0 2px rgba(15,90,71,.13), 0 7px 15px rgba(26,56,45,.1); }
.player-seat.just-played-seat { border-color: #c18f3a; box-shadow: 0 0 0 2px rgba(232,189,100,.28), 0 7px 15px rgba(26,56,45,.1); }
.seat-bottom.active-seat { border-color: #a8c844; box-shadow: 0 0 0 3px rgba(189,222,86,.22), 0 8px 18px rgba(26,56,45,.13); }
.seat-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.seat-name-wrap { min-width: 0; display: flex; align-items: center; gap: 7px; }
.round-start-marker { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 22px; border: 1px solid #b7d345; border-radius: 50%; color: #203c22; background: #d9f17b; box-shadow: 0 0 0 2px rgba(189,222,86,.2); font-size: 10px; font-weight: 900; }
.round-start-marker[hidden] { display: none; }
.seat-avatar { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 26px; border-radius: 9px; color: #f8f5eb; background: var(--felt); font-size: 10px; font-weight: 800; }
.seat-1 .seat-avatar, .seat-3 .seat-avatar { background: var(--coral); }
.seat-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 11px; font-weight: 800; }
.seat-team { display: block; color: #91a099; font-size: 9px; line-height: 1.2; }
.seat-meta { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-top: 8px; }
.hand-count { color: #55736a; font-size: 10px; font-weight: 700; }
.turn-tag, .seat-badge { color: #315e4c; background: #e7efd3; border-radius: 999px; padding: 3px 7px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.turn-tag[hidden], .seat-badge[hidden] { display: none; }
.seat-badge.white-owner { color: #685021; background: #f6e6ad; }
.seat-badge.six-challenger { color: #55330f; background: #f3d19c; }
.back-tiles { display: flex; align-items: center; justify-content: flex-start; gap: 3px; margin-top: 7px; min-height: 18px; direction: ltr; }
.mini-back { width: 13px; height: 18px; border: 1px solid rgba(15,90,71,.38); border-radius: 3px; background: repeating-linear-gradient(135deg,#e4ebcf,#e4ebcf 3px,#c9d6ae 3px,#c9d6ae 5px); box-shadow: 0 1px 1px rgba(13,44,34,.12); }
.public-white { display: flex; align-items: center; justify-content: flex-start; gap: 5px; margin-top: 7px; color: #786026; font-size: 9px; font-weight: 700; }
.public-white[hidden] { display: none; }
.public-white .public-domino { display: inline-flex; overflow: hidden; border: 1px solid #c8b36d; border-radius: 4px; background: #fffaf0; box-shadow: 0 1px 2px rgba(50,40,16,.12); }
.public-domino i { width: 13px; height: 17px; display: grid; place-items: center; font-style: normal; color: #b29849; font-size: 8px; }
.public-domino i + i { border-inline-start: 1px solid #dfd1a7; }

.seat-top, .seat-bottom { width: min(100%, 560px); justify-self: center; }
.seat-top .back-tiles, .seat-top .public-white { justify-content: center; }
.seat-bottom .seat-hand { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding: 9px 1px 2px; direction: ltr; scrollbar-width: none; }
.seat-bottom .seat-hand::-webkit-scrollbar { display: none; width: 0; height: 0; }
.seat-bottom .seat-hand:empty { display: none; }
.seat-bottom .seat-meta { margin-top: 5px; }
.seat-bottom .hand-count { color: var(--ink); }

.board-panel { grid-area: board; align-self: stretch; min-width: 0; min-height: 0; padding: 10px 14px 8px; border-radius: 20px; background: radial-gradient(ellipse at 50% 46%, #1c765c 0, #0e5a47 55%, #084435 100%); box-shadow: inset 0 0 0 7px rgba(232,228,212,.11), inset 0 0 0 8px rgba(231,242,214,.11), 0 10px 18px rgba(4,38,27,.18); color: #f7f5e9; display: flex; flex-direction: column; position: relative; overflow: visible; }
.board-panel::after { content: ''; position: absolute; width: 290px; height: 290px; border: 1px solid rgba(229,242,211,.055); border-radius: 50%; inset: 50% auto auto 50%; transform: translate(-50%,-50%); pointer-events: none; }
.board-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.board-topline .section-kicker { color: #a8c7b5; }
.board-topline h2 { margin: 1px 0 0; font-size: 17px; line-height: 1.2; color: white; }
.deal-controls { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 5px; min-height: 22px; }
.deal-controls[hidden] { display: none; }
.deal-announcement { position: relative; z-index: 1; align-self: center; margin: 0; padding: 3px 10px; border: 1px solid rgba(242,220,157,.55); border-radius: 999px; color: #ffefb0; background: rgba(35,34,19,.34); font-size: 9px; font-weight: 800; }
.deal-announcement[hidden] { display: none; }
.redeal-button { padding: 4px 12px; border: 1px solid rgba(220,242,116,.7); border-radius: 999px; color: #123d30; background: var(--lime); box-shadow: 0 2px 6px rgba(0,0,0,.15); cursor: pointer; font-size: 9px; font-weight: 900; white-space: nowrap; }
.redeal-button:hover { background: #d0ed5f; }
.redeal-button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.redeal-button[hidden] { display: none; }
.deal-in { opacity: 0; animation: domino-deal-in 460ms cubic-bezier(.2,.75,.25,1) var(--deal-delay,0ms) both; }
.seat-bottom .deal-in { --deal-x: 0px; --deal-y: -120px; }
.seat-top .deal-in { --deal-x: 0px; --deal-y: 120px; }
.seat-right .deal-in { --deal-x: -120px; --deal-y: 0px; }
.seat-left .deal-in { --deal-x: 120px; --deal-y: 0px; }
@keyframes domino-deal-in {
  from { opacity: 0; transform: translate3d(var(--deal-x,0px),var(--deal-y,0px),0) scale(.68) rotate(-5deg); }
  72% { opacity: 1; transform: translate3d(0,0,0) scale(1.05) rotate(0); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1) rotate(0); }
}
.redeal-reveal-seat { border-color: #c69a42; background: rgba(255,250,232,.97); box-shadow: 0 0 0 2px rgba(198,154,66,.22), 0 7px 18px rgba(26,56,45,.12); }
.redeal-reveal-seat .seat-hand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; overflow: visible; margin-top: 6px; direction: ltr; }
.redeal-reveal-seat .hand-tile { width: 38px; height: 24px; flex: 0 0 38px; padding: 1px; border-width: 1px; border-radius: 4px; opacity: 1; pointer-events: none; }
.redeal-reveal-seat .hand-tile.double-tile { width: 24px; height: 38px; flex-basis: 24px; }
.redeal-reveal-seat .hand-tile .pip { width: 2.8px; height: 2.8px; }
.white-chip { display: flex; align-items: center; gap: 8px; padding: 6px 9px; color: #f0e2ab; background: rgba(22,38,26,.28); border: 1px solid rgba(242,220,157,.28); border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.white-gem { display: grid; place-items: center; width: 27px; height: 21px; color: #614c1e; background: #f7e8b9; border-radius: 5px; font-size: 8px; font-weight: 800; direction: ltr; }
.endpoints { z-index: 1; display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 6px 0 5px; color: #b7d0c2; font-size: 10px; direction: ltr; }
.endpoint { min-width: 85px; padding: 4px 8px; border-radius: 999px; text-align: center; border: 1px solid rgba(230,245,223,.15); background: rgba(2,41,30,.24); }
.endpoint:first-child { text-align: left; direction: rtl; }
.endpoint:last-child { text-align: right; direction: rtl; }
.chain-count { color: #90b7a5; font-size: 9px; }
.chain-window { --chain-tile-w: 68px; --chain-tile-h: 44px; --chain-gap-x: 2px; --chain-gap-y: 2px; --chain-wrap-gap-x: 12px; --chain-padding: 12px; --chain-pip-base-size: 5px; --chain-grid-max-width-base: 30px; --chain-grid-max-height-base: 30px; --chain-tile-padding-base: 2px; --chain-tile-border-base: 1.5px; --chain-tile-radius-base: 6px; --chain-divider-base: 1px; z-index: 1; position: relative; display: block; flex: 1 1 auto; min-height: 120px; max-height: none; overflow: visible; border-block: 1px solid rgba(229,245,224,.13); direction: ltr; scrollbar-width: none; overscroll-behavior: none; }
.chain-window::-webkit-scrollbar { display: none; width: 0; height: 0; }
.chain-window:focus-visible { outline: 2px solid var(--lime); outline-offset: -3px; }
.chain-row { position: relative; min-width: 100%; min-height: 100%; margin: 0; }
.chain-empty { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #bed6c8; pointer-events: none; }
.chain-empty[hidden] { display: none; }
.chain-empty strong { font-size: 12px; }
.chain-empty small { color: #8eb5a1; font-size: 9px; }
.opening-dots { width: 45px; height: 23px; display: flex; justify-content: center; align-items: center; gap: 9px; border: 1px dashed rgba(226,244,214,.44); border-radius: 5px; margin-bottom: 8px; }
.opening-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.board-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 32px; padding-top: 5px; }
.turn-message { flex: 1 1 auto; min-width: 100px; margin: 0; color: white; font-size: 11px; line-height: 1.55; font-weight: 700; }
.turn-message.thinking-state { color: #e7f3a7; animation: think-pulse 1.2s ease-in-out infinite alternate; }
@keyframes think-pulse { from { opacity: .72; } to { opacity: 1; } }
.board-footer-meta { display: flex; align-items: center; gap: 5px; }
.continue-button { flex: 0 0 auto; padding: 6px 11px; border: 1px solid rgba(220,242,116,.6); border-radius: 9px; color: #123d30; background: var(--lime); cursor: pointer; font-size: 10px; font-weight: 800; white-space: nowrap; }
.continue-button:hover { background: #d0ed5f; }
.continue-button:focus-visible { outline: 3px solid white; outline-offset: 2px; }
.continue-button[hidden] { display: none; }
.rule-pill, .pass-pill { padding: 4px 7px; border-radius: 999px; color: #bed7c9; background: rgba(3,39,28,.3); font-size: 8px; white-space: nowrap; }
.rule-pill { color: #e2edb4; border: 1px solid rgba(220,242,116,.19); }

.domino-tile { box-sizing: border-box; transform-origin: center; }
.hand-tile { position: relative; width: 66px; height: 39px; flex: 0 0 66px; display: flex; align-items: stretch; padding: 3px; overflow: hidden; border: 1.5px solid #d2caa9; border-radius: 7px; color: #243b31; background: linear-gradient(145deg,#fffef7,#eee9d9); box-shadow: 0 3px 6px rgba(12,43,32,.17); cursor: default; transition: transform .14s, box-shadow .14s, border-color .14s, opacity .14s; direction: ltr; }
.hand-tile.legal { border-color: #729d32; box-shadow: 0 0 0 2px rgba(190,223,86,.3), 0 4px 9px rgba(12,43,32,.17); cursor: pointer; }
.hand-tile.legal.white-route-tile { border-color: #c47a29; box-shadow: 0 0 0 2px rgba(243,187,91,.45), 0 4px 9px rgba(12,43,32,.17); }
.hand-tile.legal:hover { transform: translateY(-5px); border-color: #4f7c19; }
.hand-tile:not(.legal) { opacity: .47; }
.hand-tile:disabled { cursor: not-allowed; }
.hand-tile:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.seat-hand:focus-visible { outline: 2px solid var(--lime-dark); outline-offset: 2px; border-radius: 6px; }
.hand-tile.forced { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(239,129,89,.23), 0 4px 9px rgba(12,43,32,.17); }
.hand-tile.double-tile { width: 39px; height: 66px; flex-basis: 39px; align-self: flex-end; }
.hand-tile .tile-inner { display: flex; width: 100%; height: 100%; align-items: stretch; }
.hand-tile .tile-inner .pip-half { flex: 1; }
.hand-tile .tile-inner .pip-half + .pip-half { border-inline-start: 1px solid #cfc7ad; }
.hand-tile .tile-inner.domino-double { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.hand-tile .tile-inner.domino-double .pip-half + .pip-half { border-inline-start: 0; border-block-start: 1px solid #cfc7ad; }
.chain-tile { position: absolute; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding: var(--chain-tile-padding,2px); border: var(--chain-tile-border,1.5px) solid #c5bb91; border-radius: var(--chain-tile-radius,6px); background: linear-gradient(145deg,#fffef5,#eee9d8); box-shadow: 0 2px 3px rgba(1,36,26,.23); transform-origin: center; }
.chain-tile.vertical-tile { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.chain-tile .pip-grid { width: 100%; height: 100%; max-width: var(--chain-grid-max-width,28px); max-height: var(--chain-grid-max-height,28px); align-self: center; justify-self: center; }
.chain-tile .pip-grid + .pip-grid { border-inline-start: var(--chain-divider-width,1px) solid #cfc7ad; }
.chain-tile.vertical-tile .pip-grid + .pip-grid { border-inline-start: 0; border-block-start: var(--chain-divider-width,1px) solid #cfc7ad; }
.chain-tile.latest-tile, .review-domino.latest-tile { border-color: #f0d16a; box-shadow: 0 0 0 3px rgba(240,209,106,.7), 0 0 18px rgba(240,209,106,.8), 0 4px 8px rgba(1,36,26,.3); animation: latest-stone-pulse 1.2s ease-in-out infinite alternate; }
@keyframes latest-stone-pulse { from { filter: brightness(1); } to { filter: brightness(1.18); } }
.chain-tile.move-arrival-motion { animation: none !important; transition: none !important; will-change: transform; }
.event-animation-banner { position: absolute; inset: 0; z-index: 12; display: grid; place-content: center; gap: 6px; padding: 18px; color: #fffdf0; background: rgba(2,30,23,.2); text-align: center; pointer-events: none; animation: event-banner-in .42s ease-out both; }
.event-animation-banner[hidden] { display: none; }
.event-animation-banner > span { font-size: 30px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.event-animation-banner > strong { font-size: clamp(20px,3vw,30px); text-shadow: 0 3px 10px rgba(0,0,0,.32); }
.event-animation-banner > small { color: #e6f0d3; font-size: 10px; font-weight: 700; }
.event-animation-banner.event-winner { background: radial-gradient(circle,rgba(65,116,39,.72),rgba(4,49,36,.35) 62%,transparent); }
.event-animation-banner.event-closure { background: radial-gradient(circle,rgba(18,48,43,.82),rgba(4,32,28,.35) 64%,transparent); }
.event-animation-banner.event-dramatic-free-domino { background: radial-gradient(circle,rgba(145,103,35,.76),rgba(4,49,36,.34) 64%,transparent); }
.event-animation-banner.event-dramatic-lock { background: radial-gradient(circle,rgba(30,66,58,.86),rgba(4,32,28,.3) 65%,transparent); }
.app-shell.event-dramatic-free-domino .chain-window { animation: dramatic-fire-pulse .9s ease-in-out infinite alternate; }
.app-shell.event-dramatic-lock .chain-window { animation: dramatic-lock-pulse .62s ease-in-out infinite alternate; }
@keyframes dramatic-fire-pulse { from { filter: saturate(1) brightness(1); } to { filter: saturate(1.12) brightness(1.14); } }
@keyframes dramatic-lock-pulse { from { transform: translateX(0); filter: brightness(1); } to { transform: translateX(2px); filter: brightness(1.14); } }
.predeal-hand { display: flex; align-items: center; justify-content: center; min-height: 24px; margin-top: 7px; color: #8aa39a; font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.match-opening-banner { position: absolute; inset: 0; z-index: 14; display: grid; place-content: center; justify-items: center; gap: 4px; color: #fff8df; background: radial-gradient(circle at 50% 46%, rgba(27,104,78,.84), rgba(4,44,34,.76) 68%, rgba(2,30,23,.35)); text-align: center; pointer-events: none; animation: match-opening-in .62s cubic-bezier(.2,.8,.25,1) both; }
.match-opening-banner[hidden] { display: none; }
.match-opening-banner > span { color: var(--lime); font-size: 25px; filter: drop-shadow(0 0 12px rgba(220,242,116,.55)); animation: match-opening-star 1.2s ease-in-out infinite alternate; }
.match-opening-banner > strong { font-size: clamp(24px, 4vw, 38px); line-height: 1.1; letter-spacing: .02em; text-shadow: 0 4px 18px rgba(0,0,0,.35); }
.match-opening-banner > small { color: #bfd8c2; font-size: 10px; font-weight: 700; }
@keyframes match-opening-in { from { opacity: 0; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes match-opening-star { from { opacity: .62; transform: scale(.92); } to { opacity: 1; transform: scale(1.12); } }
.five-bab-seat { border-color: #c39538; box-shadow: 0 0 0 2px rgba(213,168,73,.38), 0 0 24px rgba(213,168,73,.42), 0 7px 18px rgba(26,56,45,.12); animation: five-bab-seat-glow 1.35s ease-in-out infinite alternate; }
.five-bab-seat .seat-head { position: relative; }
.five-bab-seat .seat-avatar { color: #fff8dd; background: linear-gradient(145deg, #c89535, #806022); box-shadow: 0 0 0 3px rgba(221,183,83,.2), 0 0 14px rgba(221,183,83,.44); }
.five-bab-badge { position: absolute; inset-inline-start: 0; bottom: calc(100% + 5px); z-index: 3; display: inline-flex; align-items: center; gap: 4px; max-width: min(145px, 70%); padding: 4px 8px; border: 1px solid rgba(214,170,61,.8); border-radius: 999px; color: #674b16; background: linear-gradient(135deg, #fff8cf, #e5bd5a); box-shadow: 0 0 0 3px rgba(223,187,91,.12), 0 0 16px rgba(223,187,91,.45), 0 4px 10px rgba(129,89,19,.18); font-size: 9px; font-weight: 900; white-space: nowrap; animation: five-bab-badge-in .48s cubic-bezier(.2,.8,.25,1) both; }
.five-bab-badge > span { color: #fffdf0; font-size: 12px; line-height: 1; text-shadow: 0 0 7px rgba(255,255,255,.9); }
.five-bab-badge strong { overflow: hidden; text-overflow: ellipsis; }
.seat-top .five-bab-badge { position: static; flex: 0 0 auto; }
.five-bab-announcement { display: flex; align-items: center; gap: 6px; width: fit-content; margin: 7px auto 0; padding: 5px 10px; border: 1px solid rgba(223,187,91,.65); border-radius: 999px; color: #72531d; background: linear-gradient(135deg, #fff3bf, #e6c36f); box-shadow: 0 0 0 3px rgba(223,187,91,.13), 0 5px 15px rgba(129,89,19,.16); animation: five-bab-badge-in .48s cubic-bezier(.2,.8,.25,1) both; }
.five-bab-announcement span { color: #fff9d7; font-size: 14px; text-shadow: 0 0 8px rgba(255,255,255,.8); }
.five-bab-announcement strong { font-size: 11px; font-weight: 900; }
.five-bab-announcement small { color: #85692b; font-size: 8px; font-weight: 800; }
.five-bab-highlight-tile { border-color: #d6a943 !important; box-shadow: 0 0 0 2px rgba(224,181,78,.43), 0 0 17px rgba(224,181,78,.55), 0 4px 9px rgba(12,43,32,.17) !important; animation: five-bab-tile-glow 1.1s ease-in-out infinite alternate; }
.five-bab-hidden-hand .mini-back { border-color: #c59a3e; box-shadow: 0 0 0 1px rgba(223,183,82,.32), 0 0 9px rgba(223,183,82,.42); }
@keyframes five-bab-seat-glow { from { box-shadow: 0 0 0 2px rgba(213,168,73,.28), 0 0 13px rgba(213,168,73,.28), 0 7px 18px rgba(26,56,45,.12); } to { box-shadow: 0 0 0 3px rgba(238,204,108,.52), 0 0 30px rgba(213,168,73,.6), 0 7px 18px rgba(26,56,45,.12); } }
@keyframes five-bab-badge-in { from { opacity: 0; transform: translateY(5px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes five-bab-tile-glow { from { filter: brightness(1); transform: translateY(0); } to { filter: brightness(1.1); transform: translateY(-2px); } }
.round-scoring-overlay { position: absolute; inset: 8px; z-index: 13; display: grid; place-items: center; padding: 12px; overflow: hidden; border-radius: 20px; color: #f8f4e4; background: linear-gradient(145deg, rgba(4,42,32,.77), rgba(7,76,57,.68)); backdrop-filter: blur(2px); pointer-events: none; animation: scoring-overlay-in .35s ease-out both; }
.round-scoring-overlay[hidden] { display: none; }
.round-scoring-panel { width: min(100%, 560px); max-height: 100%; overflow: hidden; padding: 10px 12px 12px; border: 1px solid rgba(231,244,210,.3); border-radius: 16px; background: rgba(6,47,36,.62); box-shadow: 0 12px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1); }
.round-scoring-topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.round-scoring-kicker { display: block; color: #bdd7bc; font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.round-scoring-topline > div:first-child > strong { display: block; margin-top: 2px; color: #fff9e9; font-size: 12px; line-height: 1.3; }
.round-scoring-countdown { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border: 2px solid rgba(220,242,116,.8); border-radius: 50%; color: var(--lime); background: rgba(15,90,71,.72); box-shadow: 0 0 0 4px rgba(220,242,116,.1), 0 0 20px rgba(220,242,116,.2); font-size: 22px; font-weight: 900; line-height: 1; direction: ltr; animation: scoring-countdown-pop .35s ease-out both; }
.round-scoring-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 9px; }
.round-scoring-player { min-width: 0; padding: 5px 6px; border: 1px solid rgba(232,241,218,.16); border-radius: 9px; background: rgba(239,241,218,.08); opacity: .6; transform: translateY(3px); transition: opacity .3s, transform .3s, border-color .3s, background .3s; }
.round-scoring-player.is-revealed { opacity: 1; transform: translateY(0); background: rgba(247,247,226,.14); }
.round-scoring-player.is-active { border-color: rgba(220,242,116,.8); background: rgba(220,242,116,.16); box-shadow: 0 0 0 2px rgba(220,242,116,.09); }
.round-scoring-player-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #f8f4e4; font-size: 8px; }
.round-scoring-player-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round-scoring-player-head span { color: #d4e2ca; white-space: nowrap; font-size: 8px; font-variant-numeric: tabular-nums; }
.round-scoring-tiles { min-height: 31px; display: flex; align-items: center; gap: 3px; margin-top: 4px; overflow: hidden; direction: ltr; }
.score-tile, .score-tile-back { width: 31px; height: 20px; flex: 0 0 31px; display: flex; align-items: stretch; padding: 1px; border: 1px solid #d6cca6; border-radius: 4px; background: linear-gradient(145deg,#fffef7,#eee9d9); box-shadow: 0 2px 4px rgba(0,0,0,.2); animation: scoring-tile-in .28s ease-out both; }
.score-tile.domino-double { width: 20px; height: 31px; flex-basis: 20px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.score-tile .pip-half { flex: 1; }
.score-tile .pip-half + .pip-half { border-inline-start: 1px solid #cfc7ad; }
.score-tile.domino-double .pip-half + .pip-half { border-inline-start: 0; border-block-start: 1px solid #cfc7ad; }
.score-tile .pip-grid { max-width: 13px; max-height: 15px; }
.score-tile .pip { width: 2px; height: 2px; }
.score-tile-back { border-color: rgba(220,242,116,.38); background: repeating-linear-gradient(135deg, rgba(220,242,116,.24), rgba(220,242,116,.24) 3px, rgba(4,50,37,.35) 3px, rgba(4,50,37,.35) 6px); box-shadow: none; animation: none; }
.score-empty { color: #c3d4c2; font-size: 8px; }
.round-scoring-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.round-scoring-summary > div { min-width: 0; padding: 5px 6px; border: 1px solid rgba(232,241,218,.18); border-radius: 8px; background: rgba(255,252,230,.1); text-align: center; animation: scoring-summary-in .38s ease-out both; }
.round-scoring-summary span { display: block; overflow: hidden; color: #c4d8c3; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.round-scoring-summary strong { display: block; margin-top: 2px; color: #fff6c6; font-size: 12px; line-height: 1.15; }
.round-scoring-points { border-color: rgba(220,242,116,.5) !important; background: rgba(220,242,116,.16) !important; }
.round-scoring-points strong { color: var(--lime); font-size: 15px; }
.round-scoring-match { grid-column: 1 / -1; border-color: rgba(239,129,89,.5) !important; background: rgba(239,129,89,.13) !important; }
.round-scoring-match strong { color: #ffe4b5; font-size: 14px; }
@keyframes scoring-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scoring-countdown-pop { from { opacity: .35; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes scoring-tile-in { from { opacity: 0; transform: translateY(5px) scale(.82); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes scoring-summary-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.app-shell.event-closure .chain-window { animation: closure-lock .72s ease-in-out; }
.app-shell.event-closure .chain-tile { filter: saturate(.75) brightness(1.08); }
.app-shell.event-white-dead #white-chip { animation: white-dead-flash .72s ease-in-out; }
.app-shell.event-white-challenge #white-chip { animation: white-challenge-flash .82s ease-in-out; }
.winner-animation-seat { animation: winner-seat-pulse .65s ease-in-out; }
@keyframes closure-lock { 0%,100% { transform: translateX(0); } 18% { transform: translateX(-3px); } 36% { transform: translateX(3px); } 54% { transform: translateX(-2px); } 72% { transform: translateX(1px); } }
@keyframes white-dead-flash { 0%,100% { filter: brightness(1); } 40% { filter: brightness(1.5); box-shadow: 0 0 0 5px rgba(245,228,161,.35); } }
@keyframes white-challenge-flash { 0%,100% { filter: brightness(1); } 40% { filter: brightness(1.55); box-shadow: 0 0 0 5px rgba(245,228,161,.4); } }
@keyframes winner-seat-pulse { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-7px) scale(1.025); } }
.chain-tile .pip { width: var(--chain-pip-size,5px); height: var(--chain-pip-size,5px); }
.pip-half { display: grid; place-items: center; min-width: 0; min-height: 0; }
.pip-grid { width: 100%; height: 100%; max-width: 28px; max-height: 28px; display: grid; grid-template: repeat(3,1fr)/repeat(3,1fr); align-items: center; justify-items: center; }
.pip { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.pip.on { background: #203e32; box-shadow: 0 0 1px rgba(21,46,37,.3); }
.chain-tile .pip { width: var(--chain-pip-size,5px); height: var(--chain-pip-size,5px); }
.playable-badge { position: absolute; top: -5px; inset-inline-end: 3px; display: none; padding: 1px 4px; border-radius: 5px; color: white; background: #5b821c; font-size: 7px; line-height: 1.25; }
.hand-tile.legal.white-route-tile .playable-badge { background: #aa6421; }
.hand-tile.legal .playable-badge { display: block; }

.play-status-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 13px; }
.status-card { display: flex; align-items: flex-start; gap: 9px; min-height: 63px; padding: 10px 12px; color: #e9eee3; background: rgba(248,247,235,.08); border: 1px solid rgba(248,247,235,.14); border-radius: 14px; }
.status-icon { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: var(--ink); background: var(--lime); font-size: 12px; font-weight: 900; }
.status-icon.white-icon { background: #f0d88f; }
.status-icon.closure-icon { color: var(--ink); background: #d77757; }
.status-card strong { display: block; font-size: 10px; }
.status-card p { margin: 2px 0 0; color: #b6cbc0; font-size: 9px; line-height: 1.5; }
.round-info { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 10px; }
.round-info > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 12px; border-radius: 11px; color: #d7e7dc; background: rgba(5,28,23,.27); border: 1px solid rgba(255,255,255,.09); }
.round-info span { color: #9ebbae; font-size: 9px; }
.round-info strong { color: #f4f5e9; font-size: 10px; text-align: left; }
.prototype-note { margin: 12px 2px 0; color: #a8c0b5; font-size: 9px; text-align: center; }

.auth-loading-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; background: #102f28; color: #fffdf4; }
.auth-loading-backdrop[hidden] { display: none; }
.auth-loading-dialog { width: min(420px, 100%); padding: 34px 26px; border: 1px solid rgba(211,177,101,.65); border-radius: 22px; text-align: center; background: linear-gradient(145deg, #174b3a, #0d2c23); box-shadow: 0 22px 80px rgba(0,0,0,.24); }
.auth-loading-mark { font-size: 42px; line-height: 1; }
.auth-loading-dialog h2 { margin: 14px 0 8px; font-size: clamp(28px, 6vw, 38px); }
.auth-loading-dialog p { margin: 0; color: #dce9df; font-size: 15px; }
.audio-start-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(3,19,16,.72); backdrop-filter: blur(8px); animation: audio-gate-in .35s ease-out both; }
.audio-start-backdrop[hidden] { display: none; }
.audio-start-dialog { width: min(430px, 100%); padding: 28px 24px 24px; border: 1px solid rgba(220,242,116,.38); border-radius: 22px; color: #f6f4e9; background: linear-gradient(145deg, rgba(12,69,53,.98), rgba(5,42,33,.98)); box-shadow: 0 22px 70px rgba(0,0,0,.4), 0 0 0 5px rgba(220,242,116,.08); text-align: center; }
.audio-start-symbol { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 12px; border: 1px solid rgba(220,242,116,.65); border-radius: 50%; color: var(--lime); background: rgba(220,242,116,.12); box-shadow: 0 0 0 6px rgba(220,242,116,.07), 0 0 26px rgba(220,242,116,.18); font-size: 25px; animation: audio-gate-pulse 1.25s ease-in-out infinite alternate; }
.audio-start-dialog .section-kicker { display: block; color: #b9d4a4; }
.audio-start-dialog h2 { margin: 8px 0; color: #fff9e8; font-size: clamp(20px, 4vw, 27px); line-height: 1.3; }
.audio-start-dialog p { margin: 0 auto 18px; color: #c6d9ca; font-size: 11px; line-height: 1.8; }
.audio-start-dialog .primary-button { width: auto; min-width: 210px; }
.audio-start-dialog small { display: block; margin-top: 14px; color: #8fb2a1; font-size: 8px; line-height: 1.6; }
@keyframes audio-gate-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes audio-gate-pulse { from { transform: scale(.96); opacity: .78; } to { transform: scale(1.04); opacity: 1; } }
.move-backdrop, .result-backdrop, .match-backdrop, .dramatic-endgame-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(3,19,16,.63); backdrop-filter: blur(6px); }
.dramatic-endgame-backdrop { z-index: 80; background: rgba(3,19,16,.7); }
.six-challenge-backdrop { background: rgba(3,19,16,.05); backdrop-filter: none; }
.six-challenge-backdrop .challenge-choice-dialog { transform: translateY(-clamp(18px, 4vh, 32px)); }
.challenge-hand-visible .hand-tile:not(.legal) { opacity: 1; }
.challenge-hand-visible {
  position: fixed;
  z-index: 31;
  left: 0;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  width: min(calc(100vw - 20px), 560px);
  margin-left: auto;
  margin-right: auto;
  transition: none;
}
.result-backdrop { background: rgba(3,19,16,.38); backdrop-filter: blur(2px); }
.move-backdrop[hidden], .result-backdrop[hidden], .match-backdrop[hidden], .dramatic-endgame-backdrop[hidden] { display: none; }
.move-dialog, .result-dialog, .match-dialog { position: relative; width: min(100%, 470px); border: 1px solid #d7ddce; border-radius: 23px; padding: 27px; color: var(--ink); background: var(--paper); box-shadow: 0 22px 80px rgba(0,0,0,.32); text-align: center; }
.move-dialog { width: min(100%, 390px); }
.dramatic-endgame-dialog { width: min(100%, 500px); border-color: #d6af55; background: linear-gradient(145deg, #fffdf1, #f4f1dd); box-shadow: 0 22px 80px rgba(0,0,0,.4), 0 0 0 4px rgba(214,175,85,.12); }
.dramatic-endgame-dialog #dramatic-endgame-title { color: #72541d; }
.dramatic-endgame-dialog #dramatic-endgame-message { max-width: 42ch; margin: 0 auto; color: #52685b; font-size: 12px; line-height: 1.8; }
.dramatic-endgame-actions { display: flex; gap: 9px; margin-top: 19px; }
.dramatic-endgame-actions > button { flex: 1; width: auto; margin: 0; }
.dramatic-endgame-dialog .primary-button { color: #fff8dc; background: linear-gradient(135deg, #be8429, #77551e); box-shadow: 0 6px 16px rgba(116,82,26,.25); }
@media (max-width: 520px) { .dramatic-endgame-actions { flex-direction: column-reverse; } }
.challenge-choice-actions { display: flex; gap: 9px; margin-top: 16px; }
.challenge-choice-actions > button { flex: 1; width: auto; margin: 0; }
.challenge-choice-actions .primary-button, .challenge-choice-actions .secondary-button { margin: 0; }
.move-dialog .section-kicker, .result-dialog .section-kicker, .match-dialog .section-kicker { color: #7d968b; }
.move-dialog h2, .result-dialog h2, .match-dialog h2 { margin: 5px 0 8px; font-size: 23px; line-height: 1.3; }
.dialog-close { position: absolute; inset-inline-start: 12px; top: 10px; border: 0; background: transparent; color: #70877d; cursor: pointer; font-size: 24px; }
.move-options { display: flex; justify-content: center; gap: 10px; margin-top: 16px; direction: ltr; }
.move-choice { min-width: 116px; padding: 11px 12px; border: 1px solid #b5c6a4; border-radius: 12px; color: var(--ink); background: #eef4df; cursor: pointer; font-size: 12px; font-weight: 800; }
.move-choice:hover { border-color: var(--felt); background: #e1eecb; }
.move-choice small { display: block; margin-top: 3px; color: #6b8973; font-size: 9px; }
.result-symbol { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 16px; color: var(--ink); background: var(--lime); font-size: 22px; font-weight: 900; }
.result-dialog > p, .match-dialog > p { color: #61776e; font-size: 12px; line-height: 1.75; }
.result-dialog > .round-duration-result, .match-dialog > .round-duration-result { margin: 9px 0 13px; padding: 8px 12px; border-radius: 10px; color: #62766b; background: #f1f3e9; font-size: 11px; }
.round-duration-result strong, #round-duration { color: #284b3a; font-variant-numeric: tabular-nums; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 16px 0 10px; }
.result-stats > div { padding: 10px 5px; border-radius: 12px; background: #f1f3e9; }
.result-stats span, .result-next span { display: block; color: #809087; font-size: 9px; }
.result-stats strong { display: block; margin-top: 2px; color: var(--ink); font-size: 16px; }
.result-next { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 9px 0 13px; padding: 10px 12px; border-radius: 12px; background: #e6efcf; }
.result-next span { color: #6d846f; }
.result-next strong { color: #2a563e; font-size: 12px; }
.threshold-note { padding: 8px 10px; border-radius: 10px; color: #725a24 !important; background: #f7edcb; }
.deal-note { padding: 8px 10px; border-radius: 10px; color: #6e5116 !important; background: #f7edcb; font-weight: 800; }
.six-challenge-note { padding: 8px 10px; border-radius: 10px; color: #55330f !important; background: #f6e2bd; font-weight: 800; }
.threshold-note[hidden], .deal-note[hidden], .six-challenge-note[hidden] { display: none; }
.primary-button, .secondary-button { width: 100%; padding: 11px 15px; border: 0; border-radius: 12px; cursor: pointer; font-size: 12px; font-weight: 800; }
.primary-button { color: #172e22; background: var(--lime); box-shadow: inset 0 -2px 0 rgba(79,111,19,.14); }
.primary-button:hover { background: #d0ed5f; }
.secondary-button { margin-top: 8px; color: #61766b; background: transparent; }
.secondary-button:hover { background: #f2f3eb; }
.result-dialog, .match-dialog { max-height: calc(100vh - 32px); overflow-y: auto; }
.closure-reveal { margin: 12px 0 14px; padding: 10px; border: 1px solid #dbe3cf; border-radius: 13px; background: #f7f8f1; text-align: right; }
.closure-reveal[hidden] { display: none; }
.closure-title { margin: 0 0 8px; color: #39594a; font-size: 12px; }
.closure-player-list { display: grid; gap: 6px; overflow: visible; }
.closure-player { min-width: 0; padding: 7px 8px; border: 1px solid #e2e6d8; border-radius: 9px; background: #fffef8; }
.closure-player-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #304b3e; font-size: 9px; }
.closure-player-head strong { min-width: 0; overflow-wrap: anywhere; font-size: 9px; }
.closure-player-head span { flex: 0 0 auto; color: #6d8173; white-space: nowrap; }
.closure-tiles { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 3px; margin-top: 6px; direction: ltr; }
.closure-tile { width: 39px; height: 25px; flex: 0 0 39px; display: flex; align-items: stretch; padding: 1px; border: 1px solid #c7c0a8; border-radius: 4px; background: linear-gradient(145deg,#fffef7,#eee9d9); }
.closure-tile .pip-half { flex: 1; }
.closure-tile .pip-half + .pip-half { border-inline-start: 1px solid #cfc7ad; }
.closure-tile.domino-double { width: 25px; height: 39px; flex-basis: 25px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.closure-tile.domino-double .pip-half + .pip-half { border-inline-start: 0; border-block-start: 1px solid #cfc7ad; }
.closure-tile .pip-grid { max-width: 17px; max-height: 21px; }
.closure-tile .pip { width: 2.8px; height: 2.8px; }
.closure-empty { color: #809087; font-size: 9px; }
.closure-tile .tile-inner { display: flex; width: 100%; height: 100%; align-items: stretch; }
.closure-tile .tile-inner .pip-half { flex: 1; }
.closure-tile .tile-inner .pip-half + .pip-half { border-inline-start: 1px solid #cfc7ad; }
.closure-tile .tile-inner.domino-double { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.closure-tile .tile-inner.domino-double .pip-half + .pip-half { border-inline-start: 0; border-block-start: 1px solid #cfc7ad; }
.round-finisher { border-color: #d5a546; box-shadow: inset 3px 0 0 #d5a546; }
.winner-burst { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 13px; border: 4px solid var(--lime); border-radius: 50%; color: var(--ink); background: #edf4cc; font-size: 24px; font-weight: 900; }

@media (max-width: 980px) {
  .table-layout { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; grid-template-areas: "top top" "right left" "board board" "bottom bottom"; min-height: 500px; height: auto; }
  .seat-top { max-width: 560px; }
  .seat-left, .seat-right { width: 100%; }
  .seat-left .back-tiles, .seat-right .back-tiles { justify-content: center; }
  .seat-left .public-white, .seat-right .public-white { justify-content: center; }
  .board-panel { min-height: 0; }
}
@media (max-width: 680px) {
  .round-scoring-overlay { padding: 7px; }
  .round-scoring-panel { padding: 7px 8px 8px; border-radius: 12px; }
  .round-scoring-kicker { font-size: 7px; }
  .round-scoring-topline > div:first-child > strong { font-size: 10px; }
  .round-scoring-countdown { width: 34px; height: 34px; flex-basis: 34px; font-size: 18px; }
  .round-scoring-players { gap: 3px; margin-top: 5px; }
  .round-scoring-player { padding: 4px; border-radius: 7px; }
  .round-scoring-player-head, .round-scoring-player-head span { font-size: 7px; }
  .round-scoring-tiles { min-height: 24px; gap: 2px; margin-top: 2px; }
  .score-tile, .score-tile-back { width: 25px; height: 16px; flex-basis: 25px; border-radius: 3px; }
  .score-tile.domino-double { width: 16px; height: 25px; flex-basis: 16px; }
  .score-tile .pip-grid { max-width: 10px; max-height: 12px; }
  .score-tile .pip { width: 1.7px; height: 1.7px; }
  .score-empty { font-size: 7px; }
  .round-scoring-summary { gap: 3px; margin-top: 5px; }
  .round-scoring-summary > div { padding: 4px; }
  .round-scoring-summary span { font-size: 6px; }
  .round-scoring-summary strong { font-size: 10px; }
  .round-scoring-points strong, .round-scoring-match strong { font-size: 12px; }


  .topbar { margin-bottom: 6px; flex-wrap: wrap; align-items: center; gap: 5px; }
  .brand-lockup { flex: 1 1 100%; gap: 8px; }
  .brand-mark { width: 30px; height: 23px; padding: 3px; }
  .topbar h1 { font-size: 16px; }
  .eyebrow { display: none; }
  .topbar-actions { gap: 3px; width: 100%; flex-wrap: wrap; justify-content: flex-start; row-gap: 3px; }
  .speed-control { gap: 0; padding: 3px; font-size: 0; }
  .speed-control span { display: none; }
  .speed-control select { width: 83px; max-width: 83px; padding: 3px; font-size: 8px; }
  .settings-menu summary { padding: 5px 6px; font-size: 0; }
  .settings-menu summary::before { content: '⚙'; font-size: 13px; }
  .settings-menu summary::after { display: none; }
  .settings-popover { position: fixed !important; top: 72px !important; right: 10px !important; left: auto !important; bottom: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; width: min(255px, calc(100vw - 20px)); }
  .round-badge { font-size: 8px; padding: 4px 5px; }
  .ghost-button { font-size: 8px; padding: 4px 5px; }
  .score-strip { grid-template-columns: 1fr 82px 1fr; gap: 5px; padding: 6px 7px; border-radius: 15px; margin-bottom: 6px; }
  .score-label { font-size: 8px; gap: 4px; flex-wrap: nowrap; }
  .score-label small { display: none; }
  .score-value strong { font-size: 19px; }
  .score-value span, .bant-line { font-size: 7px; }
  .score-center { padding: 0 4px; }
  .score-center strong { font-size: 16px; }
  .score-open-status, .score-track { display: none; }
  .table-layout { gap: 7px; padding: 8px; border-radius: 20px; grid-template-rows: auto auto auto auto; min-height: 360px; height: auto; }
  .player-seat { padding: 5px 6px; border-radius: 10px; }
  .seat-meta { margin-top: 3px; }
  .back-tiles { display: none; }
  .deal-animation-active .back-tiles { display: flex; }
  .public-white { margin-top: 3px; font-size: 7px; }
  .seat-avatar { width: 19px; height: 19px; flex-basis: 19px; border-radius: 6px; }
  .seat-name { font-size: 9px; }
  .seat-team, .hand-count { font-size: 8px; }
  .table-layout::before { inset: 5px; }
  .board-panel { min-height: 0; padding: 8px 10px 6px; border-radius: 16px; }
  .back-tiles { gap: 2px; }
  .mini-back { width: 9px; height: 14px; }
  .board-panel { min-height: 0; padding: 8px 10px 6px; border-radius: 16px; }
  .board-topline h2 { font-size: 14px; }
  .white-chip { padding: 4px 6px; gap: 5px; font-size: 8px; }
  .white-gem { width: 23px; height: 18px; font-size: 7px; }
  .chain-window { --chain-tile-w: 68px; --chain-tile-h: 44px; --chain-gap-x: 2px; --chain-gap-y: 2px; --chain-wrap-gap-x: 12px; --chain-padding: 12px; --chain-pip-base-size: 5px; --chain-grid-max-width-base: 30px; --chain-grid-max-height-base: 30px; --chain-tile-padding-base: 2px; --chain-tile-border-base: 1.5px; --chain-tile-radius-base: 6px; --chain-divider-base: 1px; flex: 0 0 auto; height: auto; min-height: 150px; max-height: none; }
  .chain-tile { border-radius: 6px; padding: var(--chain-tile-padding,2px); }
.chain-tile .pip-grid { max-width: var(--chain-grid-max-width,30px); max-height: var(--chain-grid-max-height,30px); }
.chain-tile .pip { width: var(--chain-pip-size,5px); height: var(--chain-pip-size,5px); }
  .endpoints { font-size: 8px; }
  .endpoint { min-width: 65px; padding: 4px 5px; }
  .chain-count { font-size: 8px; }
  .board-footer { align-items: flex-start; flex-wrap: wrap; gap: 6px; }
  .turn-message { flex: 1 1 100%; font-size: 9px; }
  .continue-button { font-size: 9px; padding: 5px 8px; }
  .board-footer-meta { margin-inline-start: auto; }
  .rule-pill, .pass-pill { font-size: 7px; padding: 4px 5px; }
  .seat-bottom .seat-hand { gap: 3px; padding: 5px 1px 1px; }
  .hand-tile { width: 44px; height: 28px; flex-basis: 44px; padding: 2px; }
  .hand-tile.double-tile { width: 28px; height: 44px; flex-basis: 28px; }
  .pip-grid { max-width: 24px; max-height: 24px; }
  .pip { width: 3.5px; height: 3.5px; }
  .play-status-row { grid-template-columns: 1fr; gap: 6px; margin-top: 9px; }
  .status-card { min-height: 0; padding: 8px 10px; }
  .status-card p { font-size: 8px; }
  .round-info { grid-template-columns: 1fr; gap: 5px; margin-top: 8px; }
  .round-info > div { padding: 7px 10px; }
  .prototype-note { font-size: 8px; }
  .result-dialog, .match-dialog, .move-dialog { padding: 22px 17px; }
  .closure-reveal { padding: 8px; }
  .closure-tile { width: 34px; height: 23px; flex-basis: 34px; }
  .closure-tile.domino-double { width: 23px; height: 34px; flex-basis: 23px; }
  .closure-tile .pip { width: 2.4px; height: 2.4px; }
  .result-dialog h2, .match-dialog h2 { font-size: 20px; }
}

@media (max-height: 700px) and (max-width: 680px) {
  .app-shell { padding-top: 6px; padding-bottom: 10px; }
  .topbar { margin-bottom: 5px; }
  .score-strip { padding: 6px 8px; margin-bottom: 6px; }
  .score-track, .score-open-status { display: none; }
  .table-layout { height: clamp(330px, calc(100svh - 80px), 600px); gap: 5px; padding: 6px; }
  .player-seat { padding: 4px 5px; }
  .board-panel { padding: 6px 8px 5px; }
  .chain-window { min-height: 90px; }
  .seat-bottom .seat-hand { padding-top: 3px; }
}

@media (max-width: 360px) {
  .challenge-hand-visible .seat-hand { flex-wrap: wrap; justify-content: center; overflow: visible; }
}
@media (max-width: 680px) and (max-height: 520px) {
  .six-challenge-backdrop { place-items: start center; padding: max(8px, env(safe-area-inset-top)) 12px 12px; }
  .six-challenge-backdrop .challenge-choice-dialog { transform: none; }
}

.app-shell.redeal-reveal-active main > :not(.table-layout) { display: none; }
.app-shell.redeal-reveal-active .table-layout { height: clamp(390px, calc(100svh - 280px), 620px); overflow: visible; }
.app-shell.redeal-reveal-active .seat-left,
.app-shell.redeal-reveal-active .seat-right { align-self: start; }

@media (max-width: 680px) {
  .app-shell.redeal-reveal-active main > :not(.table-layout) { display: none; }
  .app-shell.redeal-reveal-active .table-layout {
    height: auto; min-height: 0; overflow: visible; gap: 5px; padding: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 34px;
    grid-template-areas: "top right" "left bottom" "board board";
  }
  .app-shell.redeal-reveal-active .player-seat { width: 100%; min-width: 0; padding: 4px; border-radius: 8px; }
  .app-shell.redeal-reveal-active .seat-top,
  .app-shell.redeal-reveal-active .seat-bottom { max-width: none; justify-self: stretch; }
  .app-shell.redeal-reveal-active .seat-head { gap: 2px; }
  .app-shell.redeal-reveal-active .seat-name-wrap { gap: 3px; }
  .app-shell.redeal-reveal-active .seat-avatar { width: 16px; height: 16px; flex-basis: 16px; font-size: 8px; }
  .app-shell.redeal-reveal-active .seat-name { font-size: 8px; }
  .app-shell.redeal-reveal-active .seat-team,
  .app-shell.redeal-reveal-active .hand-count { font-size: 7px; }
  .app-shell.redeal-reveal-active .seat-meta { margin-top: 2px; }
  .app-shell.redeal-reveal-active .revealed-hand { gap: 2px; margin-top: 3px; }
  .app-shell.redeal-reveal-active .hand-tile { width: 30px; height: 19px; flex-basis: 30px; padding: 1px; border-radius: 3px; }
  .app-shell.redeal-reveal-active .hand-tile.double-tile { width: 19px; height: 30px; flex-basis: 19px; }
  .app-shell.redeal-reveal-active .hand-tile .pip { width: 2px; height: 2px; }
  .app-shell.redeal-reveal-active .board-panel { min-height: 34px; height: 34px; padding: 0; border-radius: 8px; }
  .app-shell.redeal-reveal-active .board-panel::after,
  .app-shell.redeal-reveal-active .board-panel > :not(.deal-controls) { display: none !important; }
  .app-shell.redeal-reveal-active .deal-controls { display: flex; gap: 4px; margin: 0; min-height: 0; }
  .app-shell.redeal-reveal-active .deal-announcement { padding: 3px 7px; font-size: 7px; }
  .app-shell.redeal-reveal-active .redeal-button { padding: 4px 8px; font-size: 8px; }
}

/* Choice clock and visible pass signal */
.choice-timer { flex: 0 0 122px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; color: #f4f3e7; font-size: 8px; font-weight: 700; }
.choice-timer[hidden], .pass-indicator[hidden] { display: none; }
.choice-timer strong { color: var(--lime); font-size: 15px; line-height: 1; direction: ltr; }
.choice-track { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.2); }
.choice-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--lime); transition: width .18s linear; }
.choice-timer.choice-urgent strong { color: #ffb19a; }
.choice-timer.choice-urgent .choice-track i { background: var(--coral); }
.pass-indicator { padding: 5px 9px; border: 1px solid rgba(255,225,163,.7); border-radius: 999px; color: #2e3523; background: #f2dc9d; font-size: 9px; font-weight: 900; white-space: nowrap; animation: pass-signal .75s ease-out 2; }
.pass-flash { animation: pass-pill-flash .75s ease-out 2; }
.passed-seat { border-color: #d9ad57 !important; box-shadow: 0 0 0 3px rgba(232,189,100,.34), 0 0 22px rgba(232,189,100,.5) !important; animation: pass-seat-glow .72s ease-out 2; }
@keyframes pass-signal { 0% { transform: scale(.84); opacity: .45; } 55% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pass-pill-flash { 0%,100% { background-color: rgba(3,39,28,.3); } 45% { background-color: rgba(232,189,100,.55); } }
@keyframes pass-seat-glow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }

/* Closure reveal highlights without affecting the team scoring rule */
.closure-title small { display: block; margin-top: 3px; color: #78887f; font-size: 8px; font-weight: 600; }
.closure-lowest { border-color: #75a346; background: #f2f7e6; }
.closure-last-passer { box-shadow: inset 3px 0 0 #e0ad50; }
.closure-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.closure-badge { padding: 2px 6px; border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 800; }
.lowest-badge { color: #315a25; background: #e1efc5; }
.passer-badge { color: #6a4b18; background: #f6e5b4; }

/* Step-by-step match review */
.review-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(3,19,16,.76); backdrop-filter: blur(6px); }
.review-backdrop[hidden] { display: none; }
.review-dialog { width: min(1120px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border: 1px solid #d7ddce; border-radius: 22px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 90px rgba(0,0,0,.38); }
.review-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.tactical-duplicate-backdrop, .tactical-viewer-backdrop { z-index: 70; }
.tactical-sent-backdrop { z-index: 75; }
.tactical-sent-dialog { width: min(100%, 520px); }
.tactical-duplicate-dialog { width: min(100%, 460px); }
.tactical-viewer-dialog { position: relative; width: min(100%, 920px); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border: 1px solid #d7ddce; border-radius: 22px; color: var(--ink); background: var(--paper); box-shadow: 0 22px 80px rgba(0,0,0,.32); }
.tactical-viewer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 11px; border-bottom: 1px solid #e5e8dd; }
.tactical-viewer-header h2 { margin: 3px 0 0; color: var(--ink); font-size: 22px; }
.tactical-viewer-header .dialog-close { position: static; font-size: 26px; }
.tactical-viewer-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 13px; }
.tactical-viewer-summary > div { display: grid; gap: 3px; padding: 8px; border: 1px solid #e0e5d8; border-radius: 9px; background: #fbfcf7; }
.tactical-viewer-summary span { color: #7a897d; font-size: 8px; }
.tactical-viewer-summary strong { color: #355447; font-size: 10px; overflow-wrap: anywhere; }
.tactical-viewer-section { margin-top: 13px; padding: 11px; border: 1px solid #dfe5d7; border-radius: 12px; background: #fbfcf7; }
.tactical-viewer-section h3 { margin: 0 0 7px; color: #355447; font-size: 12px; }
.tactical-pattern-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tactical-pattern-chip { padding: 4px 7px; border-radius: 999px; color: #6f5b22; background: #f5e7b7; font-size: 8px; font-weight: 800; }
.tactical-move-list { display: grid; gap: 4px; margin: 0; padding-inline-start: 20px; color: #596e63; font-size: 9px; line-height: 1.55; }
.tactical-decision-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 7px; }
.tactical-decision-card { padding: 8px; border: 1px solid #e0e5d8; border-radius: 9px; background: #fff; color: #596e63; font-size: 9px; line-height: 1.55; }
.tactical-decision-card header { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.tactical-decision-card header strong { color: #355447; font-size: 9px; }
.tactical-decision-card p { margin: 4px 0; }
.tactical-decision-card small, .tactical-viewer-note { color: #7d8d84; font-size: 8px; }
.tactical-viewer-actions { display: flex; gap: 7px; margin-top: 13px; }
.tactical-viewer-actions button { width: auto; margin: 0; }
.cloud-tactical-list { display: grid; gap: 10px; }
.cloud-tactical-card { padding: 13px; border: 1px solid #dce7da; border-radius: 13px; background: #fff; }
.cloud-tactical-card p { margin: 6px 0 0; color: #536b5e; font-size: 10px; }
.cloud-tactical-card small { color: #778579; font-size: 9px; }
@media (max-width: 680px) { .review-tactical-rounds-heading, .review-tactical-round-card { align-items: stretch; flex-direction: column; } .review-tactical-rounds-heading button, .review-tactical-round-actions { width: 100%; } .review-tactical-round-actions button { flex: 1 1 0; } .tactical-viewer-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tactical-viewer-dialog { padding: 15px; } .tactical-viewer-actions { flex-direction: column; } .tactical-viewer-actions button { width: 100%; } }
.review-header h2 { margin: 2px 0 0; font-size: 22px; }
.review-header .section-kicker { color: #71887e; }
.review-actions { display: flex; align-items: center; gap: 8px; padding-inline-end: 32px; }
.review-save-group { display: grid; gap: 3px; justify-items: end; }
.review-save-label { color: #71887e; font-size: 8px; font-weight: 900; }
.review-save-buttons { display: flex; align-items: center; gap: 5px; }
.review-save-buttons .secondary-button { width: auto; margin: 0; white-space: nowrap; }
.review-actions .secondary-button { width: auto; margin: 0; white-space: nowrap; }
.review-actions .dialog-close { position: static; font-size: 25px; }
.review-tactical-rounds { margin: 9px 0 11px; padding: 11px; border: 1px solid #dfe5d7; border-radius: 14px; background: #fbfcf7; }
.review-tactical-rounds-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.review-tactical-rounds-heading h3 { margin: 2px 0 3px; color: #355447; font-size: 13px; }
.review-tactical-rounds-heading p { margin: 0; color: #7d8d84; font-size: 9px; line-height: 1.6; }
.review-tactical-rounds-heading button { width: auto; margin: 0; padding: 7px 9px; white-space: nowrap; }
.review-tactical-round-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 7px; margin-top: 9px; }
.review-tactical-round-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid #e0e5d8; border-radius: 10px; background: #fff; }
.review-tactical-round-card.is-current { border-color: #d6a84c; box-shadow: inset 3px 0 0 #d6a84c; }
.review-tactical-round-card > div:first-child { min-width: 0; display: grid; gap: 2px; }
.review-tactical-round-card strong { color: #355447; font-size: 10px; }
.review-tactical-round-card span, .review-tactical-round-card small { color: #7a897d; font-size: 8px; line-height: 1.4; }
.review-tactical-round-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.review-tactical-round-actions button { width: auto; margin: 0; padding: 6px 7px; font-size: 8px; }
.review-tactical-rounds + .review-controls { margin-top: 8px; }
.review-round-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 14px 0 8px; padding: 9px 10px; border: 1px solid #dfe5d7; border-radius: 12px; background: #f7f9f1; }
.review-round-controls .secondary-button { width: auto; margin: 0; padding: 7px 10px; white-space: nowrap; }
.review-round-controls .secondary-button:disabled { opacity: .42; cursor: default; }
.review-round-indicator { min-width: 112px; padding: 7px 12px; border: 1px solid #d9c47b; border-radius: 999px; color: #6e551d; background: #fff6d6; font-size: 10px; font-weight: 900; text-align: center; white-space: nowrap; }
.review-controls .secondary-button { width: auto; margin: 0; padding: 7px 10px; white-space: nowrap; }
.review-controls .secondary-button:disabled { opacity: .42; cursor: default; }
.review-range-wrap { display: grid; gap: 3px; min-width: 0; color: #51675d; font-size: 10px; font-weight: 700; text-align: center; }
.review-range-wrap input { width: 100%; accent-color: var(--felt); }
.review-reveal { display: flex; align-items: center; gap: 4px; color: #465c51; font-size: 9px; font-weight: 800; white-space: nowrap; }
.review-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr); gap: 12px; }
.review-board-block, .review-hands-block, .review-analysis-log, .review-analysis { min-width: 0; padding: 13px; border: 1px solid #dfe5d7; border-radius: 14px; background: #fbfcf7; }
.review-board-block h3, .review-hands-block h3, .review-analysis-log h3, .review-analysis h3 { margin: 0 0 8px; color: #355447; font-size: 13px; }
.review-board-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; color: #6c8076; font-size: 9px; }
.review-chain { position: relative; min-height: 180px; max-height: none; margin-top: 8px; overflow: visible; padding: 10px; border-radius: 10px; background: #e7f0e8; direction: ltr; }
.review-chain-row { position: relative; min-width: 100%; min-height: 100%; margin: 0; }
.review-chain-item { position: absolute; display: block; }
.review-domino, .review-hand-tile { width: 50px; height: 30px; display: flex; padding: 2px; border: 1px solid #bfb797; border-radius: 5px; background: linear-gradient(145deg,#fffef7,#eee9d9); }
.review-domino .pip-half, .review-hand-tile .pip-half { flex: 1; }
.review-domino .pip-half + .pip-half, .review-hand-tile .pip-half + .pip-half { border-inline-start: 1px solid #cfc7ad; }
.review-domino.domino-double, .review-hand-tile.domino-double { width: 30px; height: 50px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.review-hand-tile.domino-double { width: 26px; height: 43px; }
.review-domino.domino-double .pip-half + .pip-half, .review-hand-tile.domino-double .pip-half + .pip-half { border-inline-start: 0; border-block-start: 1px solid #cfc7ad; }
.review-domino .pip-grid, .review-hand-tile .pip-grid { max-width: 20px; max-height: 22px; }
.review-domino .pip, .review-hand-tile .pip { width: 3px; height: 3px; }
.review-chain-item small { position: absolute; top: -6px; inset-inline-start: -4px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; color: white; background: #315e4c; font-size: 7px; font-weight: 800; }
.review-empty-board, .review-empty-hand { color: #7d8c83; font-size: 10px; }
.review-state-note { margin-top: 8px; color: #60776b; font-size: 9px; line-height: 1.6; }
.review-hands { display: grid; gap: 6px; }
.review-player-hand { padding: 7px 8px; border: 1px solid #e0e5d8; border-radius: 9px; background: white; }
.review-player-hand header { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #395548; font-size: 9px; }
.review-player-hand header span { color: #74877d; white-space: nowrap; }
.review-hand-tiles { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; direction: ltr; }
.review-hand-tile { width: 43px; height: 26px; }
.review-hand-tile .pip-grid { max-width: 17px; max-height: 19px; }
.review-hand-tile .pip { width: 2.6px; height: 2.6px; }
.review-hand-back { width: 12px; height: 20px; border: 1px solid #b5c4a3; border-radius: 3px; background: repeating-linear-gradient(135deg,#e4ebcf,#e4ebcf 3px,#c9d6ae 3px,#c9d6ae 5px); }
.review-analysis-log { grid-column: 1 / -1; }
.review-analysis-log-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.review-analysis-log-header p { margin: -3px 0 8px; color: #7b8c82; font-size: 9px; }
.review-analysis-log-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; }
.review-analysis-log-empty { margin: 0; color: #7d8c83; font-size: 10px; }
.review-analysis-log-item { min-width: 0; display: grid; gap: 3px; padding: 8px 9px; border: 1px solid #dfe5d7; border-radius: 9px; color: #496756; background: #f4f7ef; text-align: start; font: inherit; cursor: pointer; }
.review-analysis-log-item:hover, .review-analysis-log-item:focus-visible { border-color: #b9cba8; background: #e8f1e0; outline: none; }
.review-analysis-log-item.is-selected { border-color: #d6a84c; background: #fff4c9; box-shadow: inset 3px 0 0 #d6a84c; }
.review-analysis-log-move { color: #8c7338; font-size: 9px; font-weight: 900; }
.review-analysis-log-type { color: #355447; font-size: 10px; font-weight: 900; }
.review-analysis-log-detail { min-width: 0; overflow: hidden; color: #6b7d73; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.review-analysis-results-open { width: auto; margin: 0; padding: 7px 9px; white-space: nowrap; }
.review-analysis-results-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(3,19,16,.72); backdrop-filter: blur(5px); }
.review-analysis-results-backdrop[hidden] { display: none; }
.review-analysis-results-dialog { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 19px; border: 1px solid #d7ddce; border-radius: 18px; color: var(--ink); background: var(--paper); box-shadow: 0 22px 80px rgba(0,0,0,.35); }
.review-analysis-results-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid #e5e8dd; }
.review-analysis-results-header h2 { margin: 3px 0 0; color: var(--ink); font-size: 20px; }
.review-analysis-results-header .dialog-close { position: static; font-size: 25px; }
.review-analysis-results-summary { display: grid; gap: 0; margin-top: 12px; padding: 0; border-top: 1px solid #e5e8dd; border-bottom: 1px solid #e5e8dd; }
.review-analysis-summary-section, .review-analysis-insight-section { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid #e5e8dd; }
.review-analysis-results-summary h3, .review-analysis-insight-section h3 { margin: 0; color: #355447; font-size: 14px; }
.review-analysis-results-summary-heading { color: #355447; font-size: 13px; font-weight: 900; }
.review-analysis-results-summary-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #52685b; font-size: 12px; font-weight: 900; }
.review-analysis-results-summary-total strong { color: #355447; font-size: 16px; }
.review-analysis-results-summary-breakdown { display: flex; flex-wrap: wrap; gap: 6px 12px; color: #52685b; font-size: 10px; font-weight: 900; }
.review-analysis-results-summary-breakdown .is-confirmed { color: #2d7042; }
.review-analysis-results-summary-breakdown .is-incorrect { color: #9a453a; }
.review-analysis-results-summary-breakdown .is-unresolved { color: #8b702c; }
.review-analysis-results-summary-pending { color: #718078; }
.review-analysis-results-summary-accuracy { color: #355447; font-size: 12px; font-weight: 900; }
.review-analysis-results-summary-note { margin: 0; color: #6b7d73; font-size: 10px; line-height: 1.6; }
.review-analysis-insight-section:last-child { border-bottom: 0; }
.review-analysis-insight-count { margin: 0; color: #6b7d73; font-size: 10px; font-weight: 800; }
.review-analysis-insight-empty { margin: 0; padding: 9px; border: 1px dashed #cdd8c8; border-radius: 9px; color: #718078; background: #fbfcf7; font-size: 9px; }
.review-analysis-insight-list { display: grid; gap: 7px; }
.review-analysis-insight-item { display: grid; gap: 6px; padding: 10px; border: 1px solid #dfe5d7; border-radius: 11px; color: #496756; background: #fff; cursor: pointer; outline: none; }
.review-analysis-insight-item:hover, .review-analysis-insight-item:focus-visible { border-color: #b9cba8; background: #f6faef; box-shadow: 0 3px 12px rgba(53,84,71,.08); }
.review-analysis-insight-item header { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.review-analysis-insight-move { color: #8c7338; font-size: 9px; font-weight: 900; }
.review-analysis-insight-label { color: #355447; font-size: 11px; font-weight: 900; line-height: 1.6; }
.review-analysis-insight-detail { margin: 0; color: #687a70; font-size: 9px; line-height: 1.6; }
.review-analysis-insight-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.review-analysis-insight-actions button { width: auto; margin: 0; padding: 6px 8px; font-size: 8px; }
.review-analysis-type-stats, .review-analysis-strength-list { display: grid; gap: 6px; }
.review-analysis-type-stat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; border: 1px solid #dfe5d7; border-radius: 9px; background: #fbfcf7; }
.review-analysis-type-stat strong { color: #355447; font-size: 10px; }
.review-analysis-type-stat div { display: flex; flex-wrap: wrap; gap: 5px 9px; color: #6b7d73; font-size: 9px; font-weight: 800; }
.review-analysis-type-stat .is-confirmed { color: #2d7042; }
.review-analysis-type-stat .is-incorrect { color: #9a453a; }
.review-analysis-type-stat .is-accuracy { color: #355447; }
.review-analysis-tool-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.review-analysis-tool-stat { display: grid; gap: 4px; padding: 9px; border: 1px solid #dfe5d7; border-radius: 9px; background: #f8fbf4; color: #6b7d73; font-size: 9px; font-weight: 800; }
.review-analysis-tool-stat strong { color: #355447; font-size: 10px; }
.review-analysis-tool-summary { border-bottom: 1px solid #e5e8dd; }
.review-analysis-strength-list > div { display: flex; justify-content: space-between; gap: 10px; color: #355447; font-size: 10px; font-weight: 900; }
.review-analysis-strength-list span { color: #2d7042; }
.review-analysis-weakness-item { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 9px; border: 1px solid #ead7c8; border-radius: 9px; color: #8a5843; background: #fff8f1; font-size: 9px; font-weight: 800; }
.review-analysis-weakness-item strong { flex-basis: 100%; color: #7e4938; font-size: 10px; }
.review-analysis-results-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.review-analysis-results-stat { display: grid; gap: 3px; min-width: 0; padding: 8px 6px; border: 1px solid #e0e5d8; border-radius: 9px; background: #fbfcf7; text-align: center; }
.review-analysis-results-stat span { color: #7a897d; font-size: 8px; }
.review-analysis-results-stat strong { color: #355447; font-size: 15px; }
.review-analysis-results-stat.is-confirmed strong { color: #2d7042; }
.review-analysis-results-stat.is-incorrect strong { color: #9a453a; }
.review-analysis-results-stat.is-unresolved strong { color: #8b702c; }
.review-analysis-results-stat.is-pending strong { color: #718078; }
.review-analysis-results-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 13px; padding: 9px; border: 1px solid #dfe5d7; border-radius: 11px; background: #f7f9f1; }
.review-analysis-results-controls label { color: #52685b; font-size: 10px; font-weight: 800; }
.review-analysis-results-controls select { min-width: 150px; padding: 7px 9px; border: 1px solid #cfd9c8; border-radius: 8px; color: #355447; background: #fff; font: inherit; font-size: 10px; }
.review-analysis-results-controls button { width: auto; margin: 0; padding: 7px 10px; white-space: nowrap; }
.review-analysis-results-list { display: grid; gap: 7px; margin-top: 10px; }
.review-analysis-results-empty { margin: 2px 0; padding: 12px; border: 1px dashed #cdd8c8; border-radius: 10px; color: #718078; background: #fbfcf7; font-size: 10px; text-align: center; }
.review-analysis-result-item { display: grid; gap: 6px; padding: 10px; border: 1px solid #dfe5d7; border-radius: 11px; color: #496756; background: #fff; cursor: pointer; outline: none; }
.review-analysis-result-item:hover, .review-analysis-result-item:focus-visible { border-color: #b9cba8; background: #f6faef; box-shadow: 0 3px 12px rgba(53,84,71,.08); }
.review-analysis-result-item header { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.review-analysis-result-move { color: #8c7338; font-size: 9px; font-weight: 900; }
.review-analysis-result-status { padding: 3px 7px; border-radius: 999px; font-size: 8px; font-weight: 900; white-space: nowrap; }
.review-analysis-result-status.confirmed { color: #2d7042; background: #e5f3e5; }
.review-analysis-result-status.incorrect { color: #9a453a; background: #f9e4df; }
.review-analysis-result-status.unresolved { color: #8b702c; background: #fff2c6; }
.review-analysis-result-status.pending, .review-analysis-result-status.neutral { color: #718078; background: #edf1eb; }
.review-analysis-result-label { color: #355447; font-size: 11px; font-weight: 900; line-height: 1.6; }
.review-analysis-result-detail { margin: 0; color: #687a70; font-size: 9px; line-height: 1.6; }
.review-analysis-result-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.review-analysis-result-actions button { width: auto; margin: 0; padding: 6px 8px; font-size: 8px; }
.review-analysis-result-item.is-nonprediction { background: #fbfcf7; }
.review-analysis + .review-save-note { margin-top: 10px; }
.review-analysis { margin-top: 11px; color: #596e63; font-size: 10px; line-height: 1.65; }
.review-analysis p { margin: 4px 0; }
.review-analysis time { color: #89968f; font-size: 8px; }
.review-move-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 3px 12px; margin: 3px 0 8px; padding-inline-start: 20px; }
.review-selected { color: #315e30; }
.review-recommended { color: #92702e; }
.review-advice { padding: 7px 9px; border-radius: 8px; background: #eef3e2; }
.review-save-note { margin: 10px 2px 0; color: #7e8e84; font-size: 9px; }
@media (max-width: 720px) {
  .review-dialog { padding: 14px; }
  .review-header { align-items: flex-start; }
  .review-header h2 { font-size: 18px; }
  .review-actions { padding-inline-end: 28px; }
  .review-actions .secondary-button { padding: 7px 9px; font-size: 9px; }
  .review-round-controls { gap: 4px; padding: 7px; }
  .review-round-controls .secondary-button { padding: 6px 7px; font-size: 9px; }
  .review-round-indicator { min-width: 100px; padding: 6px 8px; font-size: 9px; }
  .review-reveal { grid-column: 1 / -1; justify-content: center; }
  .review-controls .secondary-button { padding: 6px 7px; font-size: 9px; }
  .review-layout { grid-template-columns: 1fr; }
  .review-analysis-results-dialog { padding: 15px; }
  .review-analysis-results-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-analysis-results-controls { align-items: stretch; }
  .review-analysis-results-controls label { width: 100%; }
  .review-analysis-results-controls select, .review-analysis-results-controls button { flex: 1 1 0; }
}
@media (max-width: 420px) {
  .review-round-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .review-round-indicator { grid-column: 1 / -1; grid-row: 1; }
  .review-round-controls #review-round-first { grid-column: 1; grid-row: 2; }
  .review-round-controls #review-round-prev { grid-column: 2; grid-row: 2; }
  .review-round-controls #review-round-next { grid-column: 1; grid-row: 3; }
  .review-round-controls #review-round-last { grid-column: 2; grid-row: 3; }
  .review-range-wrap { grid-column: 1 / -1; grid-row: 2; }
  .review-reveal { grid-row: 3; }
  .review-actions { padding-inline-end: 27px; }
  .review-actions .secondary-button { white-space: normal; }
  .choice-timer { flex-basis: 104px; font-size: 7px; }
  .pass-indicator { padding: 4px 6px; font-size: 8px; }
}

/* Full match-review workspace */
.review-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.review-controls .review-range-wrap { flex: 1 1 150px; min-width: 120px; }
.review-controls .review-play-button, .review-controls .review-pause-button { min-width: 82px; }
.review-controls .review-pause-button:disabled, .review-controls .review-play-button:disabled { opacity: .38; }
.review-layout { grid-template-columns: minmax(0,1.2fr) minmax(245px,.8fr); align-items: start; }
.review-moves-block { min-width: 0; max-height: 310px; padding: 13px; border: 1px solid #dfe5d7; border-radius: 14px; background: #fbfcf7; overflow: auto; }
.review-moves-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.review-moves-heading h3 { margin: 0; color: #355447; font-size: 13px; }
#review-move-count { color: #7b8c82; font-size: 9px; font-weight: 700; }
.review-history-list { display: grid; gap: 4px; margin: 9px 0 0; padding: 0; list-style: none; }
.review-history-list li { margin: 0; }
.review-history-item { width: 100%; display: flex; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; color: #4f6559; background: #f0f4eb; text-align: start; font: inherit; cursor: pointer; }
.review-history-item:hover { border-color: #b9cba8; background: #e8f1e0; }
.review-history-item.current { border-color: #d6a84c; color: #3b4e35; background: #fff4c9; box-shadow: inset 3px 0 0 #d6a84c; }
.review-history-item .review-history-number { flex: 0 0 24px; color: #809188; font-size: 9px; font-weight: 800; text-align: center; }
.review-history-item.current .review-history-number { color: #8d6721; }
.review-history-item .review-history-text { min-width: 0; overflow: hidden; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.review-history-item .review-history-kind { margin-inline-start: auto; padding: 2px 5px; border-radius: 999px; color: #557363; background: #dce9d7; font-size: 7px; font-weight: 800; white-space: nowrap; }
.review-history-item.current .review-history-kind { color: #7d5b19; background: #f1dda0; }
.review-game-board { grid-area: auto; grid-column: 1 / -1; align-self: stretch; min-height: 0; padding: 10px 14px 8px; border: 0; border-radius: 20px; background: radial-gradient(ellipse at 50% 46%, #1c765c 0, #0e5a47 55%, #084435 100%); box-shadow: inset 0 0 0 7px rgba(232,228,212,.11), inset 0 0 0 8px rgba(231,242,214,.11), 0 10px 18px rgba(4,38,27,.18); color: #f7f5e9; display: flex; flex-direction: column; position: relative; overflow: visible; }
.review-game-board::after { content: ''; position: absolute; width: 290px; height: 290px; border: 1px solid rgba(229,242,211,.055); border-radius: 50%; inset: 50% auto auto 50%; transform: translate(-50%,-50%); pointer-events: none; }
.review-analysis-toolbar { position: relative; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 29px; margin: -1px 0 7px; padding: 0 1px 7px; border-bottom: 1px solid rgba(231,242,214,.16); }
.review-analysis-toolbar .review-analysis-tools { width: auto; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.review-board-stack .review-analysis-tools > .secondary-button, .review-board-stack .review-analysis-tools .review-analysis-key-button { border: 1px solid rgba(231,242,214,.3); color: #f5f7e9; background: rgba(3,48,36,.34); }
.review-board-stack .review-analysis-tools > .secondary-button:hover, .review-board-stack .review-analysis-tools .review-analysis-key-button:hover { color: #fff; border-color: rgba(220,242,116,.72); background: rgba(220,242,116,.12); }
.review-board-stack .review-analysis-tools #review-analysis-toggle.is-active { border-color: #efd477; color: #fff7d0; background: rgba(216,167,67,.3); box-shadow: 0 0 0 2px rgba(216,167,67,.18); }
.review-analysis-toolbar .analysis-key-popover { inset-inline-start: 0; inset-inline-end: auto; }
.analysis-layer-overlay { position: absolute; inset: 0; z-index: 8; overflow: visible; pointer-events: none; }
.analysis-layer-overlay[hidden] { display: none; }
.analysis-layer-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.analysis-mark { vector-effect: non-scaling-stroke; pointer-events: visiblePainted; cursor: pointer; }
.analysis-mark.is-analysis-log-highlight { filter: drop-shadow(0 0 5px rgba(255,244,183,.98)); stroke-width: 4; }
.analysis-arrow { filter: drop-shadow(0 1px 2px rgba(0,0,0,.28)); vector-effect: non-scaling-stroke; pointer-events: stroke; }
.analysis-arrow.is-analysis-log-highlight { filter: drop-shadow(0 0 5px rgba(255,244,183,.98)); stroke-width: 8; }
.analysis-arrow-preview { opacity: .82; vector-effect: non-scaling-stroke; pointer-events: none; }
.review-prediction-panel { position: absolute; z-index: 35; width: min(282px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow: auto; padding: 10px; border: 1px solid rgba(221,231,207,.92); border-radius: 13px; color: #365547; background: rgba(255,254,244,.98); box-shadow: 0 13px 30px rgba(3,35,26,.3); direction: rtl; }
.review-prediction-panel[hidden] { display: none; }
.review-prediction-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid #e5eadb; cursor: move; user-select: none; touch-action: none; }
.review-prediction-heading strong { color: #304e40; font-size: 12px; }
.review-prediction-heading button { touch-action: manipulation; }
.review-analysis-edit-open { flex: 1 1 auto; min-width: 0; margin: 0; padding: 5px 8px; border-color: #b8d348; color: #40521a; background: #e6f77b; font-size: 9px; font-weight: 900; }
.review-analysis-edit-open:hover, .review-analysis-edit-open:focus-visible { border-color: #8ea92b; color: #30420e; background: #d7ed62; outline: 2px solid rgba(142,169,43,.22); }
.review-prediction-panel.is-dragging { user-select: none; }
.review-prediction-close { width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 50%; color: #6d8478; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; }
.review-prediction-close:hover, .review-prediction-close:focus-visible { color: #355447; background: #edf3e7; outline: none; }
.review-prediction-group { min-width: 0; margin: 8px 0 0; padding: 0; border: 0; }
.review-prediction-group legend { margin-bottom: 5px; color: #6a8074; font-size: 9px; font-weight: 900; }
.review-prediction-options { display: flex; flex-wrap: wrap; gap: 4px; }
.review-prediction-option { flex: 1 1 auto; min-width: 60px; margin: 0; padding: 5px 7px; border: 1px solid #d5dfcf; border-radius: 8px; color: #557263; background: #f6f9ef; cursor: pointer; font: inherit; font-size: 9px; font-weight: 800; white-space: nowrap; }
.review-prediction-options-wide .review-prediction-option { flex-basis: calc(50% - 4px); white-space: normal; }
.review-prediction-option:hover, .review-prediction-option:focus-visible { border-color: #a9c38c; color: #365a45; background: #edf5df; outline: none; }
.review-prediction-option.is-selected { border-color: #b68c38; color: #634d1f; background: #fff1bf; box-shadow: inset 0 0 0 1px rgba(182,140,56,.16); }
.review-prediction-panel .review-prediction-options-wide { gap: 4px; }
.review-question-text-wrap { margin-top: 7px; }
.review-question-text-wrap[hidden] { display: none; }
.review-question-text-wrap label { display: block; margin-bottom: 4px; color: #6a8074; font-size: 9px; font-weight: 900; }
.review-question-text-wrap textarea { width: 100%; box-sizing: border-box; min-height: 56px; margin: 0; padding: 7px; border: 1px solid #d5dfcf; border-radius: 8px; color: #304e40; background: #fff; font: inherit; font-size: 10px; line-height: 1.55; resize: vertical; }
.review-question-text-wrap textarea:focus { border-color: #a9c38c; outline: 2px solid rgba(169,195,140,.25); }
.review-analysis-edit-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #e5eadb; }
.review-analysis-edit-actions[hidden] { display: none; }
.review-analysis-edit-actions button { flex: 1 1 auto; margin: 0; padding: 6px 8px; font-size: 9px; }
.review-analysis-delete-backdrop { z-index: 60; }
.review-analysis-delete-dialog { width: min(100%, 360px); }
.review-analysis-delete-dialog p { margin: 8px 0 12px; color: #657b70; font-size: 11px; line-height: 1.8; }
.review-prediction-panel .review-prediction-options-wide { gap: 4px; }
.review-analysis-tools { display: flex; align-items: center; gap: 5px; }
.review-analysis-tools button { width: auto; margin: 0; padding: 7px 9px; white-space: nowrap; }
.review-analysis-key-wrap { position: relative; }
.review-analysis-key-button { border-color: #cbd9c6 !important; color: #4f6d5d !important; background: #f7faf2 !important; font-size: 9px; }
.analysis-key-popover { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 50; width: min(266px, calc(100vw - 32px)); padding: 9px; border: 1px solid #d6dfcf; border-radius: 12px; color: #3f5b4d; background: #fffefa; box-shadow: 0 12px 28px rgba(26,58,42,.2); }
.analysis-key-popover[hidden] { display: none; }
.analysis-key-row { display: flex; align-items: flex-start; gap: 7px; padding: 5px 4px; border-bottom: 1px solid #eef1e9; }
.analysis-key-row:last-child { border-bottom: 0; }
.analysis-key-row > span { flex: 0 0 18px; font-size: 14px; line-height: 1.2; }
.analysis-key-row div { display: grid; gap: 1px; min-width: 0; }
.analysis-key-row strong { color: #355447; font-size: 10px; }
.analysis-key-row small { color: #708379; font-size: 8px; line-height: 1.45; }
.review-board-stack { position: relative; grid-column: 1 / -1; min-width: 0; display: grid; align-content: start; gap: 8px; }
.review-board-stack > .review-analysis-toolbar { grid-column: 1 / -1; width: 100%; margin: 0; }
.review-board-stack > .review-analysis-toolbar .review-analysis-tools { justify-content: flex-start; }
.review-board-stack > .review-game-board { grid-column: auto; }
.review-analysis-toolbar .review-analysis-feedback { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 48px; min-height: 26px; margin: 0; padding: 4px 9px; border: 1px solid #d6dfcf; border-radius: 999px; color: #496756; background: #f5f8ed; font-size: 9px; font-weight: 900; opacity: 0; transform: translateY(-2px); transition: opacity .18s ease, transform .18s ease; white-space: nowrap; }
.review-analysis-toolbar .review-analysis-feedback[hidden] { display: none; }
.review-analysis-toolbar .review-analysis-feedback.is-visible { opacity: 1; transform: translateY(0); }
.review-prediction-tile-picker { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e5eadb; }
.review-prediction-tile-picker[hidden] { display: none; }
.review-prediction-tile-picker > strong { display: block; margin-bottom: 5px; color: #6a8074; font-size: 9px; font-weight: 900; }
.review-prediction-tile-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; gap: 4px; direction: ltr; }
.review-prediction-number-picker { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e5eadb; }
.review-prediction-number-picker[hidden] { display: none; }
.review-prediction-number-picker > strong { display: block; margin-bottom: 5px; color: #6a8074; font-size: 9px; font-weight: 900; }
.review-prediction-number-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; direction: ltr; }
.review-prediction-number-option { min-height: 26px; padding: 4px 5px; border: 1px solid #d5dfcf; border-radius: 7px; color: #557263; background: #f6f9ef; cursor: pointer; font: inherit; font-size: 10px; font-weight: 900; }
.review-prediction-number-option:hover, .review-prediction-number-option:focus-visible, .review-prediction-number-option.is-selected { border-color: #b68c38; color: #634d1f; background: #fff1bf; outline: none; }
.review-analysis-prediction-tooltip { position: absolute; z-index: 45; max-width: min(230px, calc(100% - 16px)); padding: 8px 10px; border: 1px solid rgba(59,130,246,.38); border-radius: 10px; color: #234e78; background: rgba(239,248,255,.98); box-shadow: 0 10px 22px rgba(5,44,78,.22); direction: rtl; font-size: 10px; font-weight: 800; line-height: 1.65; pointer-events: none; white-space: pre-line; }
.review-analysis-prediction-tooltip[hidden] { display: none; }
.review-prediction-tile-option { width: 100%; min-width: 0; height: 28px; flex: 0 0 auto; display: flex; align-items: stretch; margin: 0; padding: 2px; border: 1.5px solid #d2caa9; border-radius: 5px; color: #243b31; background: linear-gradient(145deg,#fffef7,#eee9d9); box-shadow: 0 2px 4px rgba(12,43,32,.17); cursor: pointer; }
.review-prediction-tile-option.domino-double { width: 100%; height: 34px; }
.review-prediction-tile-option:hover, .review-prediction-tile-option:focus-visible, .review-prediction-tile-option[aria-pressed="true"] { border-color: #b68c38; background: #fff1bf; outline: none; box-shadow: 0 0 0 2px rgba(182,140,56,.16); }
.review-prediction-tile-option .pip { width: 2.6px; height: 2.6px; }
.review-analysis-tools #review-analysis-toggle.is-active { border-color: #d8a743; color: #5b4318; background: #fff0bc; box-shadow: 0 0 0 2px rgba(216,167,67,.18); }
.review-game-board { position: relative; }
.review-game-board > .review-analysis-clear-backdrop { position: absolute; inset: 0; z-index: 50; }
.review-game-board > .review-analysis-clear-backdrop[hidden] { display: none; }
.review-analysis-clear-dialog { width: min(100%, 430px); color: #1d3027; background: #fffdf7; }
.review-analysis-clear-dialog h2 { margin: 0 0 8px; color: #172d23; font-size: 18px; font-weight: 900; }
.review-analysis-clear-dialog p { margin: 0; color: #2e493a; font-size: 11px; font-weight: 700; line-height: 1.65; }
.review-analysis-clear-dialog .move-actions { display: flex; gap: 8px; margin-top: 16px; }
.review-analysis-clear-dialog .move-actions button { width: auto; flex: 1 1 0; margin: 0; border: 1px solid transparent; font-weight: 900; }
.review-analysis-clear-dialog .move-actions .secondary-button { color: #263f32; background: #edf3e8; border-color: #a9b9a7; }
.review-analysis-clear-dialog .move-actions .secondary-button:hover, .review-analysis-clear-dialog .move-actions .secondary-button:focus-visible { color: #172d23; background: #dfead9; border-color: #789579; outline: 2px solid rgba(120,149,121,.24); }
.review-analysis-clear-dialog .move-actions .primary-button { color: #fffdf8; background: #a23e32; border-color: #7c2d25; box-shadow: 0 4px 10px rgba(124,45,37,.2); }
.review-analysis-clear-dialog .move-actions .primary-button:hover, .review-analysis-clear-dialog .move-actions .primary-button:focus-visible { color: #fff; background: #862e27; border-color: #68221d; outline: 2px solid rgba(162,62,50,.24); }
.review-game-board .chain-window { min-height: 180px; max-height: none; overflow: visible; }
.review-game-board .review-board-meta { position: relative; z-index: 1; margin-top: 8px; color: #d2e2cf; }
.review-game-board .review-state-note { position: relative; z-index: 1; color: #d2e2cf; }
.review-hands-block { grid-column: 1 / -1; }
.review-chain-item > .chain-tile { position: absolute; inset: 0; }
.review-chain-item.current-review-tile .chain-tile { border-color: #e1ad43; box-shadow: 0 0 0 3px rgba(225,173,67,.72), 0 0 18px rgba(225,173,67,.56); }
.review-chain-item.current-review-tile small { color: #3d2a0a; background: #e8b74b; }
.review-analysis { grid-column: 1 / -1; }
.review-analysis-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.review-analysis-header h3 { margin-bottom: 2px; }
.review-analysis-subtitle { margin: 0; color: #7d8d84; font-size: 9px; }
.review-analysis-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.review-analysis-actions button { width: auto; margin: 0; padding: 7px 9px; font-size: 9px; white-space: nowrap; }
.review-analysis-actions button:disabled { opacity: .42; cursor: default; }
.review-analysis-result { display: grid; gap: 7px; }
.review-assessment { display: inline-flex; width: fit-content; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; }
.review-assessment.good { color: #2f672f; background: #dff0cf; }
.review-assessment.missed { color: #8a3e24; background: #f8d8c8; }
.review-assessment.alternative { color: #6f5b22; background: #f5e7b7; }
.review-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.review-comparison-card { padding: 8px 9px; border: 1px solid #dce6d5; border-radius: 9px; background: #fff; }
.review-comparison-card strong { display: block; color: #355447; font-size: 11px; }
.review-comparison-card span { color: #73857b; font-size: 9px; }
.review-best-card { border-color: #e7c568; background: #fff9e1; }
.review-move-list { grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); }
.review-move-list li { line-height: 1.55; }
@media (max-width: 720px) {
  .review-layout { grid-template-columns: 1fr; }
  .review-moves-block { max-height: 240px; }
  .review-analysis-header { flex-direction: column; }
  .review-analysis-actions { width: 100%; }
  .review-analysis-actions button { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .review-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .review-controls .review-range-wrap { grid-column: 1 / -1; grid-row: 1; }
  .review-controls .review-reveal { grid-column: 1 / -1; grid-row: 5; justify-content: center; }
  .review-controls .review-play-button, .review-controls .review-pause-button { min-width: 0; }
  .review-comparison { grid-template-columns: 1fr; }
}

.education-button { padding: 8px 11px; border: 1px solid rgba(220,242,116,.34); border-radius: 10px; color: #f6f7e9; background: rgba(9,42,34,.46); cursor: pointer; font-size: 10px; font-weight: 800; white-space: nowrap; transition: .18s ease; }
.education-button:hover, .education-button:focus-visible { border-color: var(--lime); color: var(--lime); background: rgba(220,242,116,.09); outline: none; }
.move-backdrop.is-training-side-picker { z-index: 70; }
.rules-backdrop, .training-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(3,19,16,.78); backdrop-filter: blur(7px); }
.rules-backdrop[hidden], .training-backdrop[hidden] { display: none; }
.rules-dialog, .training-dialog { width: min(1180px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border: 1px solid #d7ddce; border-radius: 24px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 90px rgba(0,0,0,.38); }
.rules-dialog { width: min(1040px, 100%); }
.education-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid #e5e8dd; }
.education-header h2 { margin: 4px 0 5px; color: var(--ink); font-size: clamp(22px, 3vw, 31px); line-height: 1.2; }
.education-header p { max-width: 720px; margin: 0; color: #6b7e73; font-size: 11px; line-height: 1.8; }
.education-header .section-kicker { color: #78978a; }
.education-header .dialog-close { position: static; flex: 0 0 auto; font-size: 29px; }
.education-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.education-header-actions .primary-button { width: auto; margin: 0; padding: 9px 13px; white-space: nowrap; }
.education-header-actions .secondary-button { width: auto; margin: 0; padding: 9px 11px; white-space: nowrap; font-size: 10px; }
.rules-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 10px; }
.rules-nav a { padding: 6px 9px; border: 1px solid #dfe6d7; border-radius: 999px; color: #42695a; background: #f4f7ed; font-size: 9px; font-weight: 800; text-decoration: none; }
.rules-nav a:hover, .rules-nav a:focus-visible { border-color: var(--lime-dark); color: var(--ink); background: #eaf4c8; outline: none; }
.rules-content { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.rules-section { scroll-margin-top: 14px; padding: 14px 15px 13px; border: 1px solid #e2e7db; border-radius: 15px; background: linear-gradient(145deg,#fffefa,#f6f7ef); box-shadow: 0 5px 14px rgba(25,55,41,.045); }
.rules-section:first-child, .rules-section:nth-child(12), .rules-section:nth-child(13) { grid-column: 1 / -1; }
.rules-section h3 { display: flex; align-items: baseline; gap: 7px; margin: 0 0 7px; color: var(--ink); font-size: 15px; }
.rules-section h3 span { color: #a07a2a; font-size: 12px; }
.rules-section p { margin: 5px 0; color: #5e7469; font-size: 10px; line-height: 1.85; }
.rules-section ul { display: grid; gap: 4px; margin: 7px 0 0; padding: 0 18px 0 0; color: #526b5f; font-size: 10px; line-height: 1.75; }
.rules-section li::marker { color: #b38a32; }
.rules-example { margin-top: 9px; padding: 8px 10px; border-inline-start: 3px solid #d6ad50; border-radius: 8px; color: #715925; background: #fff7d9; font-size: 10px; font-weight: 800; line-height: 1.8; }
.rules-callout { margin-top: 9px; padding: 9px 11px; border: 1px solid #d7e59f; border-radius: 10px; color: #3e5f38; background: #f3f8d9; font-size: 10px; font-weight: 700; line-height: 1.75; }
.training-categories-heading { margin: 12px 0 0; color: var(--ink); font-size: 12px; }
.training-category { padding: 6px 10px; border: 1px solid #dfe6d7; border-radius: 999px; color: #577469; background: #f4f7ed; cursor: pointer; font-size: 9px; font-weight: 800; }
.training-category.is-active, .training-category:hover, .training-category:focus-visible { border-color: #c19a42; color: #614d22; background: #fff3c5; outline: none; }
.training-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; padding: 7px 9px; border: 1px solid #dfe6d7; border-radius: 10px; color: #6e8479; background: #f7f9f1; font-size: 9px; }
.training-shortcut { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.training-shortcut kbd { min-width: 42px; padding: 3px 6px; border: 1px solid #c5d2be; border-bottom-width: 2px; border-radius: 5px; color: #365e4c; background: #fffefa; font-family: inherit; font-size: 8px; font-weight: 900; text-align: center; }
.training-shortcut span { font-weight: 800; }
.training-content { min-height: 420px; }
.training-kicker-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.training-kicker-row strong { color: var(--ink); font-size: 15px; }
.training-kicker-row span { padding: 5px 8px; border-radius: 999px; color: #6f5a25; background: #fff3c5; font-size: 9px; font-weight: 800; }
.training-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 12px; align-items: start; }
.training-table { min-width: 0; padding: 13px; border: 1px solid #d8dfd1; border-radius: 20px; background: linear-gradient(145deg,#f9faf1,#e9eee1); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.training-generation-settings { margin-bottom: 10px; padding: 12px; border: 1px solid #d5dfcf; border-radius: 14px; background: linear-gradient(135deg, #fffef5, #f2f8ee); }
.training-generation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.training-generation-heading h3 { margin: 2px 0 3px; color: var(--ink); font-size: 14px; }
.training-generation-heading p { margin: 0; color: #6e8479; font-size: 9px; line-height: 1.65; }
.training-count-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.training-count-row { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 7px; border: 1px solid #d4e0d1; border-radius: 9px; background: rgba(255,255,255,.82); }
.training-count-row strong { color: var(--ink); font-size: 9px; }
.training-count-control { display: flex; align-items: center; gap: 4px; direction: ltr; }
.training-count-control button { width: 24px; height: 24px; border: 1px solid #b6d0bf; border-radius: 7px; color: #3e6954; background: #eef6e9; cursor: pointer; font-size: 16px; font-weight: 900; line-height: 1; }
.training-count-control button:hover:not(:disabled), .training-count-control button:focus-visible { border-color: #b78b38; background: #fff4c9; outline: none; }
.training-count-control button:disabled { opacity: .38; cursor: not-allowed; }
.training-count-control output { min-width: 18px; color: var(--ink); font-size: 12px; font-weight: 900; text-align: center; }
.training-generation-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; color: #60786d; font-size: 9px; }
.training-generation-summary span { padding: 5px 7px; border-radius: 7px; background: #edf5e8; }
.training-generation-settings h4 { margin: 11px 0 6px; color: var(--ink); font-size: 10px; }
.training-generation-categories { display: flex; flex-wrap: wrap; gap: 5px; }
.training-generation-categories .training-category { min-height: 28px; padding: 5px 8px; font-size: 8px; }
.training-create-button { width: 100%; margin-top: 10px; padding: 9px 11px; border: 1px solid #9ebd78; border-radius: 9px; color: #2f583e; background: #e4f0c9; cursor: pointer; font-size: 10px; font-weight: 900; }
.training-create-button:hover:not(:disabled), .training-create-button:focus-visible { border-color: #b78b38; background: #fff2ba; outline: none; }
.training-create-button:disabled { opacity: .45; cursor: not-allowed; }
.training-board .board-topline h2 { color: white; }
.training-board .section-kicker { color: #a8c7b5; }
.training-board .white-chip { color: #f0e2ab; background: rgba(22,38,26,.28); border-color: rgba(242,220,157,.28); }
.training-board .endpoints { margin-top: 6px; }
.training-board .chain-window { flex: 1 1 auto; min-height: 190px; overflow: visible; }
.training-board .board-footer { min-height: 36px; }
.training-target-end { border-color: #f0d16a !important; color: #fff4bc !important; background: rgba(198,151,34,.34) !important; box-shadow: 0 0 0 2px rgba(240,209,106,.55), 0 0 12px rgba(240,209,106,.3); }
.training-hand .practice-hand-tile { flex: 0 0 66px; }
.training-hand .practice-hand-tile.double-tile { flex-basis: 39px; }
.practice-hand-tile.latest-tile { border-color: #f0d16a; box-shadow: 0 0 0 2px rgba(240,209,106,.52), 0 0 14px rgba(240,209,106,.35); }
.training-illegal-notice { margin: 8px 0 0; padding: 8px 10px; border: 1px solid #e2bf61; border-radius: 9px; color: #7b5a1c; background: #fff4c5; font-size: 9px; font-weight: 800; line-height: 1.7; }
.training-side-choice { margin-bottom: 10px; padding: 14px; border: 2px solid #c19a42; border-radius: 14px; color: var(--ink); background: #fff8dc; box-shadow: 0 8px 22px rgba(91,72,26,.12); }
.training-side-choice h3 { margin: 0 0 5px; color: #614d22; font-size: 15px; }
.training-side-choice p { margin: 0; color: #6b5a32; font-size: 10px; line-height: 1.7; }
.training-side-choice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.training-side-choice-button { flex: 1 1 180px; padding: 10px 12px; border: 1px solid #b38a32; border-radius: 10px; color: #5d491d; background: #fff1bd; cursor: pointer; font-size: 11px; font-weight: 900; }
.training-side-choice-button:hover, .training-side-choice-button:focus-visible { color: #fff; background: #8b6c29; outline: none; }
.training-transition { padding: 10px 12px; border: 1px solid #c4d8ca; border-radius: 10px; color: #456d5a; background: #edf6eb; font-size: 10px; font-weight: 800; line-height: 1.7; }
.training-why { margin-top: 8px; padding: 8px 9px; border-inline-start: 3px solid #c19a42; border-radius: 7px; color: #735a26; background: rgba(255,247,211,.72); }
.training-why p { margin-top: 3px; }
.training-analysis-actions { display: flex; gap: 6px; margin-top: 8px; }
.training-analysis-actions .training-solution-button { flex: 1 1 0; margin-top: 0; }
.training-empty-options { margin: 0; color: #7d6a35; font-size: 9px; line-height: 1.7; }
.training-seat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.training-seat { min-width: 0; padding: 7px; border: 1px solid #d5ddcf; border-radius: 10px; background: rgba(255,255,255,.72); text-align: center; }
.training-seat.is-current { border-color: #c39a42; background: #fff7dc; box-shadow: 0 0 0 2px rgba(220,185,91,.16); }
.training-seat strong { display: block; overflow: hidden; color: var(--ink); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.training-seat span { display: block; margin-top: 2px; color: #789085; font-size: 8px; }
.training-hand-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 13px; color: #4f6d60; font-size: 10px; font-weight: 800; }
.training-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 7px; padding: 10px; border: 1px dashed #c9d6c5; border-radius: 12px; background: rgba(255,255,255,.62); direction: ltr; }
.training-remaining-panel { margin-top: 10px; padding: 11px; border: 1px solid #d5dfcf; border-radius: 14px; background: rgba(255,255,255,.82); }
.training-remaining-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.training-remaining-heading h3 { margin: 0; color: var(--ink); font-size: 13px; }
.training-remaining-heading p { margin: 3px 0 0; color: #6e8479; font-size: 9px; }
.training-remaining-heading .training-solution-button { flex: 0 0 auto; width: auto; margin-top: 0; }
.training-remaining-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.training-remaining-actions .training-solution-button { flex: 0 0 auto; }
.training-remaining-grid.is-hidden, .training-board.is-hidden { display: none; }
.training-played-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-top: 8px; color: #62796e; font-size: 9px; line-height: 1.7; }
.training-played-summary > span { display: flex; flex-wrap: wrap; gap: 4px; }
.training-played-chip { padding: 2px 5px; border: 1px solid #bdd0c0; border-radius: 999px; color: #416453; background: #edf5e9; direction: ltr; font-size: 8px; font-weight: 800; }
.training-no-played { color: #8a9b8f; }
.training-remaining-grid { display: grid; grid-template-columns: repeat(7, minmax(42px, 1fr)); gap: 6px; max-height: 252px; margin-top: 8px; padding: 7px; overflow: auto; border: 1px solid #e0e8d9; border-radius: 10px; background: #f7faf3; direction: ltr; }
.training-remaining-tile { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: 1px solid transparent; border-radius: 8px; color: #5f766a; background: transparent; text-align: center; }
.training-remaining-grid.is-empty { display: flex; min-height: 62px; align-items: center; justify-content: center; }
.training-no-remaining { color: #72877a; font-size: 10px; font-weight: 800; }
.training-remaining-tile.is-white { border-color: #c8b45e; background: #fff9df; }
.training-remaining-tile.is-important { border-color: #e0bf59; background: #fff7d5; box-shadow: 0 0 0 1px rgba(224,191,89,.2); }
.training-remaining-tile b { direction: ltr; color: #365e4c; font-size: 8px; }
.training-remaining-tile small { min-height: 19px; color: #85978c; font-size: 7px; line-height: 1.3; }
.remaining-tile-face { display: flex; width: 42px; height: 25px; align-items: stretch; padding: 2px; border: 1px solid #c7c0a8; border-radius: 5px; color: #243b31; background: linear-gradient(145deg,#fffef7,#eee9d9); box-shadow: 0 1px 3px rgba(12,43,32,.13); direction: ltr; }
.remaining-tile-face .pip-half { flex: 1; }
.remaining-tile-face .pip-grid { max-width: 17px; max-height: 17px; }
.remaining-tile-face .pip-half + .pip-half { border-inline-start: 1px solid #cfc7ad; }
.remaining-tile-face.domino-double { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; width: 25px; height: 42px; }
.remaining-tile-face.domino-double .pip-half + .pip-half { border-inline-start: 0; border-block-start: 1px solid #cfc7ad; }
.training-known-specials { display: grid; gap: 4px; margin-top: 8px; }
.training-known-line { margin: 0; padding: 6px 8px; border-radius: 8px; font-size: 9px; font-weight: 800; }
.training-known-line strong { color: var(--ink); }
.white-line { color: #856a29; background: #fff7d5; }
.challenge-line { color: #5a547d; background: #eeebfa; }
.training-review-panel { margin-top: 8px; padding: 8px; border: 1px dashed #b9cbb8; border-radius: 9px; color: #5f766a; background: #f2f7ee; }
.training-review-panel h4 { margin: 0 0 4px; color: var(--ink); font-size: 10px; }
.training-review-panel p { margin: 3px 0; font-size: 8px; line-height: 1.65; }
.training-review-panel .training-solution-button { width: auto; }
.training-review-hands { padding-top: 3px; border-top: 1px solid #d8e3d6; }
.training-review-note { color: #8a6a2f !important; }
.training-info-analysis { margin-top: 8px; padding: 8px 9px; border-inline-start: 3px solid #6d9b6d; border-radius: 7px; color: #416653; background: rgba(231,245,226,.72); }
.training-info-analysis p { margin-top: 3px; }
.training-validation-error { margin: 8px 0 0; padding: 7px 8px; border: 1px solid #d99982; border-radius: 8px; color: #8b3f2e; background: #fff0eb; font-size: 9px; font-weight: 800; line-height: 1.6; }
.training-side { display: grid; gap: 9px; }
.training-prompt, .training-facts, .training-feedback, .training-solution { padding: 12px; border: 1px solid #e0e6d9; border-radius: 14px; background: #fffefa; }
.training-prompt { border-color: #e4ca80; background: #fff8dc; }
.training-prompt h3, .training-facts h3, .training-feedback h3, .training-solution h3 { margin: 0 0 7px; color: var(--ink); font-size: 13px; }
.training-prompt p, .training-facts p, .training-feedback p, .training-solution p { margin: 0; color: #5e7469; font-size: 10px; line-height: 1.8; }
.training-facts ul { display: grid; gap: 4px; margin: 0; padding: 0 16px 0 0; color: #60786d; font-size: 9px; line-height: 1.7; }
.training-facts li::marker { color: #be9135; }
.training-option-grid { display: grid; gap: 6px; margin-top: 10px; }
.training-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid #d9e2d3; border-radius: 9px; color: #355d4d; background: #f7f9f1; cursor: pointer; text-align: start; font-size: 10px; font-weight: 800; }
.training-option:hover, .training-option:focus-visible { border-color: #c19a42; background: #fff4c8; outline: none; }
.training-option small { color: #8a9f92; font-size: 8px; font-weight: 600; }
.training-feedback { margin-top: 10px; }
.training-feedback.is-correct { border-color: #b8d47b; background: #f3f9df; }
.training-feedback.is-warning { border-color: #e2bf61; background: #fff7d8; }
.training-feedback.is-neutral { border-color: #cddbd1; background: #f4f8f1; }
.training-feedback strong { display: block; margin-bottom: 4px; color: #4c6a3f; font-size: 12px; }
.training-feedback.is-warning strong { color: #836322; }
.training-solution { margin-top: 10px; border-color: #cdded4; background: #f3f8f2; }
.training-solution[hidden], .training-feedback[hidden] { display: none; }
.training-solution ol { display: grid; gap: 4px; margin: 0; padding: 0 17px 0 0; color: #5e7469; font-size: 9px; line-height: 1.75; }
.training-solution-button { width: 100%; margin-top: 8px; padding: 7px 9px; border: 1px solid #b7d1c2; border-radius: 8px; color: #3f6755; background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; }
.training-solution-button:hover { background: #e7f1e4; }
.training-progress { color: #789086; font-size: 9px; font-weight: 800; }
@media (max-width: 880px) {
  .education-button { font-size: 9px; padding: 6px 8px; }
  .rules-content { grid-template-columns: 1fr; }
  .rules-section:first-child, .rules-section:nth-child(12), .rules-section:nth-child(13) { grid-column: auto; }
  .training-layout { grid-template-columns: 1fr; }
  .training-side { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .training-prompt { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .rules-dialog, .training-dialog { max-height: calc(100vh - 14px); padding: 14px; border-radius: 17px; }
  .education-header { gap: 8px; }
  .education-header h2 { font-size: 21px; }
  .education-header p { font-size: 9px; }
  .education-header-actions { flex-direction: column-reverse; align-items: stretch; }
  .education-header-actions .primary-button, .education-header-actions .secondary-button { font-size: 9px; }
  .training-seat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .training-categories-heading { margin-top: 8px; font-size: 11px; }
  .training-count-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .training-generation-summary { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .training-side { grid-template-columns: 1fr; }
  .training-remaining-grid { grid-template-columns: repeat(5, minmax(42px, 1fr)); }
}

.idle-timeout-backdrop { position: fixed; inset: 0; z-index: 115; display: grid; place-items: center; padding: 18px; background: rgba(3,19,16,.76); backdrop-filter: blur(7px); }
.idle-timeout-backdrop[hidden] { display: none; }
.idle-timeout-dialog { width: min(540px, 100%); padding: 30px 26px 24px; border: 1px solid #d3b165; border-radius: 20px; color: #294c3c; background: #fffdf4; box-shadow: 0 20px 75px rgba(17,38,29,.28); text-align: center; }
.idle-timeout-dialog h2 { margin: 8px 0 10px; font-size: clamp(24px, 5vw, 34px); }
.idle-timeout-dialog p { margin: 0; color: #6a7b70; line-height: 1.8; }
.idle-timeout-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.main-menu-dialog { width: min(440px, 100%); padding: 30px 26px 24px; }
.main-menu-brand { display: flex; justify-content: center; align-items: center; gap: 4px; width: 84px; height: 54px; margin: 0 auto 13px; border: 2px solid var(--lime); border-radius: 17px; color: var(--lime); background: rgba(220,242,116,.1); transform: rotate(-5deg); box-shadow: 0 0 0 6px rgba(220,242,116,.06); }
.main-menu-brand span { font-size: 16px; }
.main-menu-brand span:nth-child(2) { font-size: 25px; }
.main-menu-dialog h2 { margin: 7px 0 1px; font-size: clamp(28px, 6vw, 38px); }
.main-menu-question { margin: 0 auto 18px !important; color: #d4e3d6 !important; font-size: 13px !important; font-weight: 800; }
.main-menu-actions { display: grid; gap: 8px; }
.main-menu-button { display: flex; align-items: center; justify-content: center; min-height: 47px; margin: 0 !important; border: 1px solid rgba(220,242,116,.3); font-size: 13px; }
.main-menu-continue-card { display: grid; gap: 3px; margin: 0; }
.main-menu-continue-card[hidden] { display: none; }
.main-menu-continue-card small { display: block; margin: 0; color: #c9dccb; font-size: 9px; line-height: 1.45; text-align: center; }
.main-menu-actions .secondary-button { color: #ecf2e6; background: rgba(255,255,255,.08); }
.main-menu-actions .secondary-button:hover { color: #1d382b; background: var(--lime); }
.main-menu-exit-divider { height: 1px; margin: 5px 16px 2px; background: rgba(220,242,116,.22); }
.main-menu-exit-button { border-color: rgba(239,129,89,.62); color: #ffd3c6 !important; background: rgba(120,39,27,.3) !important; }
.main-menu-exit-button:hover, .main-menu-exit-button:focus-visible { color: #fff5e9 !important; background: rgba(168,58,38,.66) !important; outline: none; }
.main-menu-exit-dialog { width: min(100%, 440px); }
.main-menu-exit-dialog p { margin: 8px 0 4px; color: #657b70; font-size: 11px; line-height: 1.8; }
.audio-setup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; padding: 8px 10px; border: 1px solid rgba(220,242,116,.2); border-radius: 10px; color: #bad0be; background: rgba(4,35,27,.32); text-align: start; }
.audio-setup-row span { font-size: 9px; line-height: 1.55; }
.audio-setup-button { flex: 0 0 auto; padding: 7px 9px; border: 1px solid rgba(220,242,116,.4); border-radius: 8px; color: var(--lime); background: rgba(220,242,116,.08); cursor: pointer; font-size: 9px; font-weight: 800; }
.audio-setup-button:hover, .audio-setup-button:focus-visible { color: #172e22; background: var(--lime); outline: none; }
.main-menu-dialog small { margin-top: 15px; }
.exit-match-button { padding: 7px 10px; border: 1px solid rgba(239,129,89,.62); border-radius: 10px; color: #ffd3c6; background: rgba(120,39,27,.36); cursor: pointer; font-size: 10px; font-weight: 800; }
.exit-match-button:hover, .exit-match-button:focus-visible { color: #fff5e9; background: rgba(168,58,38,.66); outline: none; }

.master-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 14px; background: rgba(3,19,16,.82); backdrop-filter: blur(7px); }
.master-backdrop[hidden], .master-exit-confirm-backdrop[hidden] { display: none; }
.master-dialog { width: min(1240px, 100%); max-height: calc(100vh - 24px); overflow: auto; padding: 18px; border: 1px solid #d7ddce; border-radius: 24px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 90px rgba(0,0,0,.42); }
.master-exit-confirm-backdrop { z-index: 90; }
.master-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid #dfe6d8; }
.master-header h2 { margin: 3px 0 4px; color: var(--ink); font-size: clamp(21px, 3vw, 30px); }
.master-header p { margin: 0; color: #668074; font-size: 10px; line-height: 1.7; }
.master-header-actions { display: flex; gap: 7px; }
.master-toolbar, .master-action-toolbar, .master-board-actions, .master-setup-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.master-toolbar { justify-content: flex-end; padding: 8px; border: 1px solid #dce4d5; border-radius: 12px; background: #f5f8ef; }
.master-toolbar .secondary-button, .master-action-toolbar .secondary-button, .master-board-actions .secondary-button { width: auto; margin: 0; padding: 7px 9px; font-size: 9px; }
.master-setup-panel, .master-stock-panel, .master-current-panel, .master-history-panel, .master-explanation-panel { padding: 11px; border: 1px solid #dce5d5; border-radius: 14px; background: #fbfcf7; }
.master-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.master-panel-heading h3, .master-current-panel h3, .master-history-panel h3, .master-explanation-panel h3 { margin: 0 0 5px; color: var(--ink); font-size: 13px; }
.master-panel-heading p, .master-stock-panel p, .master-explanation-panel small { margin: 0; color: #6b8175; font-size: 9px; line-height: 1.65; }
.master-panel-heading > span { padding: 5px 8px; border-radius: 999px; color: #6e5822; background: #fff3c4; font-size: 8px; font-weight: 800; white-space: nowrap; }
.master-notice { margin: 8px 0; padding: 7px 9px; border-radius: 8px; color: #536d5f; background: #edf5e8; font-size: 9px; font-weight: 800; line-height: 1.65; }
.master-hands-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.master-hand-panel { min-width: 0; padding: 8px; border: 1px solid #dce5d6; border-radius: 11px; background: #fff; }
.master-hand-panel.is-current { border-color: #c29b43; background: #fff9df; box-shadow: 0 0 0 2px rgba(194,155,67,.16); }
.master-hand-panel[data-master-hand-drop] { cursor: copy; }
.master-hand-panel header { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; }
.master-hand-panel header strong { color: var(--ink); font-size: 9px; }
.master-hand-panel header span, .master-hand-panel small { color: #7a8f84; font-size: 8px; }
.master-hand-panel small { display: block; margin-top: 5px; }
.master-player-pass { display: block; width: 100%; margin-top: 7px; padding: 6px 7px; border: 1px solid #d7bd67; border-radius: 8px; color: #654f22; background: #fff4c8; cursor: pointer; font-size: 8px; font-weight: 800; }
.master-player-pass:hover:not(:disabled), .master-player-pass:focus-visible { border-color: #a77c24; background: #ffed9d; outline: none; }
.master-player-pass:disabled { border-color: #e1e8e1; color: #a1ada4; background: #f3f6f1; cursor: not-allowed; opacity: .75; }
.master-hand-tiles, .master-stock-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; align-items: flex-start; direction: ltr; }
.master-tile-button { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 43px; padding: 3px; border: 1px solid #d4dfd0; border-radius: 7px; color: #456658; background: #f7faf3; cursor: grab; }
.master-tile-button:hover, .master-tile-button:focus-visible, .master-tile-button.is-selected { border-color: #c39a43; background: #fff1bb; outline: none; box-shadow: 0 0 0 2px rgba(195,154,67,.16); }
.master-tile-button:active { cursor: grabbing; }
.master-tile-button strong { direction: ltr; font-size: 8px; }
.master-tile-button .master-hand-tile { pointer-events: none; }
.master-hand-tile { display: flex; width: 38px; height: 24px; padding: 2px; border: 1px solid #c6bea4; border-radius: 4px; background: linear-gradient(145deg,#fffef7,#eee9d9); direction: ltr; }
.master-hand-tile .pip-half { flex: 1; }
.master-hand-tile .pip-grid { max-width: 16px; max-height: 17px; }
.master-hand-tile .pip { width: 2.5px; height: 2.5px; }
.master-hand-tile .pip-half + .pip-half { border-inline-start: 1px solid #cfc7ad; }
.master-hand-tile.domino-double { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; width: 25px; height: 40px; }
.master-hand-tile.domino-double .pip-half + .pip-half { border-inline-start: 0; border-block-start: 1px solid #cfc7ad; }
.master-stock-grid { max-height: 185px; overflow: auto; padding: 6px; border: 1px dashed #cfdcc9; border-radius: 9px; background: #f3f8ef; }
.master-empty-stock, .master-empty-hand, .master-empty-history { color: #7b9084; font-size: 9px; }
.master-start-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.master-start-controls label { display: grid; gap: 4px; min-width: 190px; color: #4f6d60; font-size: 9px; font-weight: 800; }
.master-start-controls select { padding: 7px 8px; border: 1px solid #cfdccc; border-radius: 8px; color: var(--ink); background: white; font-size: 10px; }
.master-setup-actions .primary-button, .master-setup-actions .secondary-button { width: auto; margin: 0; padding: 8px 11px; font-size: 10px; }
.master-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 10px; align-items: start; }
.master-table { grid-area: auto; display: flex; flex-direction: column; position: relative; min-width: 0; padding: 10px 13px 8px; border: 0; border-radius: 18px; color: #f7f5e9; background: radial-gradient(ellipse at 50% 46%, #1c765c 0, #0e5a47 55%, #084435 100%); box-shadow: inset 0 0 0 7px rgba(232,228,212,.11), inset 0 0 0 8px rgba(231,242,214,.11), 0 10px 18px rgba(4,38,27,.18); overflow: visible; }
.master-table .board-topline h2 { color: white; }
.master-table .section-kicker { color: #a8c7b5; }
.master-table .white-chip { color: #f0e2ab; background: rgba(22,38,26,.28); border-color: rgba(242,220,157,.28); }
.master-table .chain-window { min-height: 190px; overflow: visible; }
.master-table .board-footer { min-height: 34px; }
.master-sidebar { display: grid; gap: 9px; min-width: 0; }
.master-current-panel p { margin: 0; color: #60776a; font-size: 9px; line-height: 1.7; }
.master-current-panel > .secondary-button { width: 100%; margin-top: 8px; padding: 7px; font-size: 9px; }
.master-pending-moves { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 8px; }
.master-pending-moves strong { width: 100%; color: #6c5521; font-size: 9px; }
.master-pending-moves .secondary-button { width: auto; margin: 0; padding: 6px 8px; font-size: 9px; }
.master-history-list { display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.master-history-item { display: grid; gap: 2px; width: 100%; padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; color: #4d685a; background: #f0f5eb; cursor: pointer; text-align: start; }
.master-history-item:hover, .master-history-item.current { border-color: #d1a84e; background: #fff4c9; }
.master-history-item strong { font-size: 9px; }
.master-history-item small { color: #7b8e83; font-size: 8px; line-height: 1.45; }
.master-explanation-panel textarea { width: 100%; margin: 3px 0 5px; padding: 7px; border: 1px solid #d2dfcf; border-radius: 8px; color: var(--ink); background: white; font: inherit; font-size: 10px; line-height: 1.6; resize: vertical; }
.master-hands-grid + .master-stock-panel { margin-top: 10px; }
.master-exit-dialog { width: min(500px, calc(100% - 24px)); }
@media (max-width: 900px) { .master-layout { grid-template-columns: 1fr; } .master-sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .master-current-panel { grid-column: 1 / -1; } }
@media (max-width: 620px) { .master-dialog { padding: 12px; border-radius: 17px; } .master-hands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .master-sidebar { grid-template-columns: 1fr; } .master-toolbar, .master-action-toolbar, .master-board-actions { justify-content: stretch; } .master-toolbar button, .master-action-toolbar button, .master-board-actions button { flex: 1 1 auto; } .master-tactical-round-row { align-items: stretch; flex-direction: column; } .master-tactical-round-row-actions { justify-content: stretch; } .master-tactical-round-row-actions button { flex: 1 1 auto; } .master-start-controls label { min-width: 100%; } }
#master-dialog, #master-content, .master-exit-dialog { --master-ui-scale: 1.5; }
#master-dialog { padding: calc(18px * var(--master-ui-scale)); overflow-x: hidden; }
#master-content .master-header { gap: calc(14px * var(--master-ui-scale)); padding-bottom: calc(12px * var(--master-ui-scale)); }
#master-content .master-header h2 { margin: calc(3px * var(--master-ui-scale)) 0 calc(4px * var(--master-ui-scale)); font-size: clamp(calc(21px * var(--master-ui-scale)), calc(3vw * var(--master-ui-scale)), calc(30px * var(--master-ui-scale))); }
#master-content .master-header p { font-size: calc(10px * var(--master-ui-scale)); }
#master-content .section-kicker { font-size: calc(11px * var(--master-ui-scale)); }
#master-content .master-header-actions { gap: calc(7px * var(--master-ui-scale)); }
#master-content .dialog-close { top: calc(10px * var(--master-ui-scale)); inset-inline-start: calc(12px * var(--master-ui-scale)); font-size: calc(24px * var(--master-ui-scale)); }
#master-content .master-toolbar, #master-content .master-action-toolbar, #master-content .master-board-actions, #master-content .master-setup-actions { gap: calc(6px * var(--master-ui-scale)); margin: calc(10px * var(--master-ui-scale)) 0; }
#master-content .master-toolbar { padding: calc(8px * var(--master-ui-scale)); }
#master-content .master-toolbar .secondary-button, #master-content .master-action-toolbar .secondary-button, #master-content .master-board-actions .secondary-button { padding: calc(7px * var(--master-ui-scale)) calc(9px * var(--master-ui-scale)); font-size: calc(9px * var(--master-ui-scale)); line-height: 1.35; }
#master-content .master-setup-panel, #master-content .master-stock-panel, #master-content .master-current-panel, #master-content .master-history-panel, #master-content .master-explanation-panel { padding: calc(11px * var(--master-ui-scale)); }
#master-content .master-panel-heading { gap: calc(10px * var(--master-ui-scale)); }
#master-content .master-panel-heading h3, #master-content .master-current-panel h3, #master-content .master-history-panel h3, #master-content .master-explanation-panel h3 { margin-bottom: calc(5px * var(--master-ui-scale)); font-size: calc(13px * var(--master-ui-scale)); }
#master-content .master-panel-heading p, #master-content .master-stock-panel p, #master-content .master-explanation-panel small { font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-panel-heading > span { padding: calc(5px * var(--master-ui-scale)) calc(8px * var(--master-ui-scale)); font-size: calc(8px * var(--master-ui-scale)); }
#master-content .master-notice { margin: calc(8px * var(--master-ui-scale)) 0; padding: calc(7px * var(--master-ui-scale)) calc(9px * var(--master-ui-scale)); font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-hands-grid { gap: calc(8px * var(--master-ui-scale)); margin-top: calc(10px * var(--master-ui-scale)); }
#master-content .master-hand-panel { padding: calc(8px * var(--master-ui-scale)); }
#master-content .master-hand-panel header { gap: calc(5px * var(--master-ui-scale)); }
#master-content .master-hand-panel header strong { font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-hand-panel header span, #master-content .master-hand-panel small { font-size: calc(8px * var(--master-ui-scale)); }
#master-content .master-hand-panel small { margin-top: calc(5px * var(--master-ui-scale)); }
#master-content .master-player-pass { margin-top: calc(7px * var(--master-ui-scale)); padding: calc(6px * var(--master-ui-scale)) calc(7px * var(--master-ui-scale)); border-radius: calc(8px * var(--master-ui-scale)); font-size: calc(8px * var(--master-ui-scale)); }
#master-content .master-hand-tiles, #master-content .master-stock-grid { gap: calc(4px * var(--master-ui-scale)); margin-top: calc(7px * var(--master-ui-scale)); }
#master-content .master-tile-button { gap: calc(2px * var(--master-ui-scale)); min-width: calc(43px * var(--master-ui-scale)); padding: calc(3px * var(--master-ui-scale)); }
#master-content .master-tile-button strong { font-size: calc(8px * var(--master-ui-scale)); }
/* Domino tiles and their pip geometry intentionally remain at the original size. */
#master-content .master-hand-tile, #master-content .master-hand-tile.domino-double { flex: 0 0 auto; }
#master-content .master-stock-grid { max-height: calc(185px * var(--master-ui-scale)); padding: calc(6px * var(--master-ui-scale)); }
#master-content .master-empty-stock, #master-content .master-empty-hand, #master-content .master-empty-history { font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-start-controls { gap: calc(8px * var(--master-ui-scale)); margin-top: calc(11px * var(--master-ui-scale)); }
#master-content .master-start-controls label { gap: calc(4px * var(--master-ui-scale)); min-width: calc(190px * var(--master-ui-scale)); font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-start-controls select { padding: calc(7px * var(--master-ui-scale)) calc(8px * var(--master-ui-scale)); font-size: calc(10px * var(--master-ui-scale)); }
#master-content .master-setup-actions .primary-button, #master-content .master-setup-actions .secondary-button { padding: calc(8px * var(--master-ui-scale)) calc(11px * var(--master-ui-scale)); font-size: calc(10px * var(--master-ui-scale)); }
#master-content .master-layout { gap: calc(10px * var(--master-ui-scale)); }
#master-content .master-table .board-topline { gap: calc(12px * var(--master-ui-scale)); }
#master-content .master-table .board-topline h2 { font-size: calc(17px * var(--master-ui-scale)); }
#master-content .master-table .white-chip { gap: calc(8px * var(--master-ui-scale)); padding: calc(6px * var(--master-ui-scale)) calc(9px * var(--master-ui-scale)); font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-table .white-gem { width: calc(27px * var(--master-ui-scale)); height: calc(21px * var(--master-ui-scale)); font-size: calc(8px * var(--master-ui-scale)); }
#master-content .master-table .endpoints { padding: calc(6px * var(--master-ui-scale)) 0 calc(5px * var(--master-ui-scale)); font-size: calc(10px * var(--master-ui-scale)); }
#master-content .master-table .endpoint { min-width: calc(85px * var(--master-ui-scale)); padding: calc(4px * var(--master-ui-scale)) calc(8px * var(--master-ui-scale)); }
#master-content .master-table .chain-count { font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-table .chain-empty { gap: calc(1px * var(--master-ui-scale)); }
#master-content .master-table .chain-empty strong { font-size: calc(12px * var(--master-ui-scale)); }
#master-content .master-table .chain-empty small { font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-sidebar { gap: calc(9px * var(--master-ui-scale)); }
#master-content .master-current-panel p { font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-current-panel > .secondary-button { margin-top: calc(8px * var(--master-ui-scale)); padding: calc(7px * var(--master-ui-scale)); font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-pending-moves { gap: calc(5px * var(--master-ui-scale)); margin-top: calc(8px * var(--master-ui-scale)); }
#master-content .master-pending-moves strong { font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-pending-moves .secondary-button { padding: calc(6px * var(--master-ui-scale)) calc(8px * var(--master-ui-scale)); font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-history-list { gap: calc(4px * var(--master-ui-scale)); max-height: calc(260px * var(--master-ui-scale)); }
#master-content .master-history-item { gap: calc(2px * var(--master-ui-scale)); padding: calc(7px * var(--master-ui-scale)) calc(8px * var(--master-ui-scale)); }
#master-content .master-history-item strong { font-size: calc(9px * var(--master-ui-scale)); }
#master-content .master-history-item small { font-size: calc(8px * var(--master-ui-scale)); }
#master-content .master-explanation-panel textarea { margin: calc(3px * var(--master-ui-scale)) 0 calc(5px * var(--master-ui-scale)); padding: calc(7px * var(--master-ui-scale)); font-size: calc(10px * var(--master-ui-scale)); }
#master-content .master-table .board-footer-meta { gap: calc(5px * var(--master-ui-scale)); }
#master-content .master-table .turn-message { font-size: calc(11px * var(--master-ui-scale)); }
#master-content .master-table .rule-pill, #master-content .master-table .pass-pill { padding: calc(4px * var(--master-ui-scale)) calc(7px * var(--master-ui-scale)); font-size: calc(8px * var(--master-ui-scale)); }
.master-exit-dialog { padding: calc(27px * var(--master-ui-scale)); }
.master-exit-dialog .section-kicker { font-size: calc(11px * var(--master-ui-scale)); }
.master-exit-dialog h2 { margin: calc(5px * var(--master-ui-scale)) 0 calc(8px * var(--master-ui-scale)); font-size: calc(23px * var(--master-ui-scale)); }
.master-exit-dialog .exit-match-actions { flex-wrap: wrap; gap: calc(9px * var(--master-ui-scale)); margin-top: calc(16px * var(--master-ui-scale)); }
.master-exit-dialog .exit-match-actions button { flex: 1 1 calc(140px * var(--master-ui-scale)); padding: calc(11px * var(--master-ui-scale)) calc(15px * var(--master-ui-scale)); font-size: calc(12px * var(--master-ui-scale)); }
@media (max-width: 900px) {
  #master-content .master-toolbar button, #master-content .master-action-toolbar button, #master-content .master-board-actions button { flex: 1 1 calc(180px * var(--master-ui-scale)); }
}
@media (max-width: 620px) {
  #master-dialog { padding: calc(12px * var(--master-ui-scale)); }
  #master-content .master-hands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #master-content .master-toolbar, #master-content .master-action-toolbar, #master-content .master-board-actions { justify-content: stretch; }
  #master-content .master-start-controls label { min-width: 100%; }
  #master-content .master-table .board-topline { display: grid; grid-template-columns: minmax(0, 1fr); }
  #master-content .master-table .board-topline > div:first-child { min-width: 0; }
  #master-content .master-table .white-chip { justify-self: end; max-width: 100%; min-width: 0; margin: 0; white-space: normal; overflow-wrap: anywhere; }
}
.master-side-choice { position: absolute; inset: 8px; z-index: 14; display: grid; place-items: center; padding: 12px; border-radius: 17px; background: rgba(4,34,27,.58); backdrop-filter: blur(3px); }
.master-side-choice-card { width: min(360px, 100%); padding: 16px; border: 1px solid rgba(242,220,157,.55); border-radius: 15px; color: #f8f4e4; background: linear-gradient(145deg, rgba(9,65,49,.96), rgba(5,43,34,.97)); box-shadow: 0 16px 40px rgba(0,0,0,.28); text-align: center; }
.master-side-choice-card .section-kicker { color: #d9e7c5; }
.master-side-choice-card h3 { margin: 7px 0 13px; color: #fff9dd; font-size: 17px; }
.master-side-choice-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; direction: ltr; }
.master-side-choice-button { flex: 1 1 120px; margin: 0; padding: 9px 10px; color: #294c3c; background: #fff7d7; direction: rtl; }
.master-side-choice-button strong, .master-side-choice-button small { display: block; }
.master-side-choice-button strong { font-size: 11px; }
.master-side-choice-button small { margin-top: 3px; color: #6c7658; font-size: 8px; }
.master-side-choice-cancel { margin: 12px 0 0; padding: 7px 11px; color: #ecf2e6; background: rgba(255,255,255,.08); }
#master-content .master-side-choice { inset: calc(8px * var(--master-ui-scale)); padding: calc(12px * var(--master-ui-scale)); }
#master-content .master-side-choice-card { padding: calc(16px * var(--master-ui-scale)); }
#master-content .master-side-choice-card h3 { margin: calc(7px * var(--master-ui-scale)) 0 calc(13px * var(--master-ui-scale)); font-size: calc(17px * var(--master-ui-scale)); }
#master-content .master-side-choice-actions { gap: calc(8px * var(--master-ui-scale)); }
#master-content .master-side-choice-button { padding: calc(9px * var(--master-ui-scale)) calc(10px * var(--master-ui-scale)); }
#master-content .master-side-choice-button strong { font-size: calc(11px * var(--master-ui-scale)); }
#master-content .master-side-choice-button small { margin-top: calc(3px * var(--master-ui-scale)); font-size: calc(8px * var(--master-ui-scale)); }
#master-content .master-side-choice-cancel { margin-top: calc(12px * var(--master-ui-scale)); padding: calc(7px * var(--master-ui-scale)) calc(11px * var(--master-ui-scale)); }
.education-back-button { order: -1; flex: 0 0 auto; padding: 7px 10px; border: 1px solid #d8e3d2; border-radius: 9px; color: #53766a; background: #f4f7ed; cursor: pointer; font-size: 9px; font-weight: 800; }
.education-back-button:hover, .education-back-button:focus-visible { border-color: #bf9b45; color: #654f22; background: #fff5cf; outline: none; }
.education-header > .education-back-button { margin-inline-start: auto; }
.education-header-actions .education-back-button { margin-inline-start: 0; }
.exit-match-dialog { width: min(100%, 440px); }
.exit-match-dialog p { margin: 8px 0 4px; color: #657b70; font-size: 11px; line-height: 1.8; }
.exit-match-actions { display: flex; gap: 9px; margin-top: 16px; }
.result-exit-match-button { border-color: rgba(170,85,62,.45); color: #8b4b3d; }
.result-exit-match-button:hover, .result-exit-match-button:focus-visible { border-color: #a84c37; color: #fff8ef; background: #a84c37; outline: none; }
.result-exit-match-dialog { width: min(100%, 440px); }
.result-exit-match-dialog h2 { color: #314f41; }
.result-exit-match-dialog .exit-match-actions { margin-top: 18px; }
.master-tactical-rounds { margin: 16px 0; padding: 15px; border: 1px solid rgba(191,155,69,.35); border-radius: 16px; background: rgba(255,255,255,.88); color: #294c3c; box-shadow: 0 8px 24px rgba(42,74,59,.08); }
.master-tactical-round-list { display: grid; gap: 8px; margin-top: 11px; }
.master-tactical-round-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid #dce7da; border-radius: 11px; background: #fbfcf7; }
.master-tactical-round-row > div { min-width: 0; display: grid; gap: 3px; }
.master-tactical-round-row strong { color: #294c3c; font-size: 10px; }
.master-tactical-round-row span, .master-tactical-round-row small { color: #748375; font-size: 8px; line-height: 1.5; }
.master-tactical-round-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.master-tactical-round-row button { width: auto; margin: 0; white-space: nowrap; }
.master-strategy-library { margin: 16px 0; padding: 15px; border: 1px solid rgba(191,155,69,.35); border-radius: 16px; background: rgba(255,255,255,.88); color: #294c3c; box-shadow: 0 8px 24px rgba(42,74,59,.08); }
.master-panel-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.master-panel-heading h3 { margin: 0; font-size: 15px; }
.master-panel-heading p { margin: 5px 0 0; color: #6c7b70; font-size: 10px; line-height: 1.7; }
.master-panel-heading > span { white-space: nowrap; color: #9a7531; font-size: 10px; font-weight: 800; }
.master-strategy-library-actions, .master-strategy-row-actions, .master-learning-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.master-strategy-library-actions button, .master-strategy-row-actions button { margin: 0; width: auto; }
.master-strategy-weight { display: flex; align-items: center; gap: 9px; margin: 13px 0 4px; color: #617466; font-size: 10px; font-weight: 800; }
.master-strategy-weight input { flex: 1; accent-color: #b58a35; }
.master-strategy-weight output { min-width: 25px; color: #9a7531; }
.master-strategy-list { display: grid; gap: 9px; margin-top: 12px; }
.master-strategy-row { padding: 11px; border: 1px solid #dce7da; border-radius: 12px; background: #fbfcf7; }
.master-strategy-row.is-disabled { opacity: .6; background: #f3f4ef; }
.master-strategy-row-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.master-strategy-row-head strong { display: block; font-size: 11px; }
.master-strategy-row-head span { display: block; margin-top: 3px; color: #748375; font-size: 9px; }
.master-strategy-row p { margin: 8px 0 0; color: #52685d; font-size: 10px; line-height: 1.8; }
.master-strategy-state { min-width: 46px; margin: 0; padding: 5px 8px; border: 1px solid #bd9b50; border-radius: 99px; color: #765d24; background: #fff5d1; cursor: pointer; font-size: 9px; font-weight: 900; }
.master-strategy-row.is-disabled .master-strategy-state { color: #7c8580; background: #e8ebe6; border-color: #bdc7bf; }
.master-strategy-examples { margin: 10px 0 0; padding-inline-start: 19px; color: #65786d; font-size: 9px; line-height: 1.8; }
.master-strategy-edit-field, .master-learning-dialog label { display: grid; gap: 5px; margin-top: 9px; color: #607265; font-size: 10px; font-weight: 800; }
.master-strategy-edit-field input, .master-strategy-edit-field textarea, .master-learning-dialog input, .master-learning-dialog textarea, .master-learning-dialog select { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #cddbcf; border-radius: 8px; color: #294c3c; background: #fff; font: inherit; }
.danger-button { color: #8a413a !important; border-color: #e0b6ad !important; background: #fff3ef !important; }
.master-learning-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(25,45,35,.54); }
.master-learning-dialog { width: min(720px, 100%); max-height: min(82vh, 720px); overflow: auto; padding: 22px; border: 1px solid #d4b568; border-radius: 18px; color: #294c3c; background: #fffdf4; box-shadow: 0 20px 70px rgba(25,45,35,.27); }
.master-learning-dialog h3 { margin: 5px 0 14px; font-size: 19px; }
.master-learning-dialog p { margin: 8px 0; color: #536a5d; font-size: 11px; line-height: 1.9; }
.master-learning-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.master-learning-columns > div { padding: 11px; border: 1px solid #e3e4cf; border-radius: 12px; background: #fff; font-size: 10px; }
.master-learning-columns ul { margin: 8px 0 0; padding-inline-start: 17px; color: #64776c; line-height: 1.8; }
.account-chip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-backdrop, .cloud-data-backdrop, .guest-save-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(18,43,34,.58); }
.cloud-data-backdrop { z-index: 60; }
.account-backdrop[hidden], .cloud-data-backdrop[hidden], .guest-save-backdrop[hidden] { display: none; }
.account-dialog, .cloud-data-dialog, .guest-save-dialog { position: relative; width: min(720px, 100%); max-height: min(86vh, 760px); overflow: auto; padding: 26px; border: 1px solid #d3b165; border-radius: 20px; color: #294c3c; background: #fffdf4; box-shadow: 0 20px 75px rgba(17,38,29,.28); }
.account-dialog > .dialog-close, .cloud-data-dialog > .dialog-close { position: absolute; inset-inline-end: 14px; top: 12px; }
.account-form { display: grid; gap: 11px; max-width: 480px; margin: 0 auto; }
.account-form h2, .cloud-data-dialog h2, .guest-save-dialog h2 { margin: 4px 0 14px; font-size: 20px; }
.account-form label { display: grid; gap: 5px; color: #617466; font-size: 11px; font-weight: 800; }
.account-form input { width: 100%; box-sizing: border-box; padding: 10px 11px; border: 1px solid #cddbcf; border-radius: 9px; color: #294c3c; background: #fff; font: inherit; }
.password-input-wrap { position: relative; display: block; width: 100%; }
.password-input-wrap input { padding-inline-end: 43px; direction: ltr; text-align: right; }
.password-toggle { position: absolute; inset-inline-end: 7px; top: 50%; width: 31px !important; min-height: 31px; margin: 0 !important; padding: 0 !important; transform: translateY(-50%); border: 0 !important; color: #657b6d; background: transparent !important; cursor: pointer; font-size: 16px !important; line-height: 1; }
.password-toggle:hover, .password-toggle:focus-visible { color: #96712e; }
.account-login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 2px; }
.account-login-options .remember-row { display: inline-flex; grid-template-columns: auto 1fr; align-items: center; gap: 7px; color: #617466; font-size: 11px; cursor: pointer; }
.account-login-options .remember-row input { width: 16px; height: 16px; margin: 0; accent-color: #96712e; }
.account-auth-divider { display: flex; align-items: center; gap: 10px; margin: 5px 0 0; color: #8b998d; font-size: 10px; }
.account-auth-divider::before, .account-auth-divider::after { content: ''; flex: 1; height: 1px; background: #dce5d9; }
.account-auth-divider span { padding: 0 4px; }
.google-auth-button { border: 1px solid #cddbcf !important; color: #294c3c !important; background: #fff !important; }
.google-auth-button:hover, .google-auth-button:focus-visible { border-color: #b99547 !important; background: #fffaf0 !important; }
.account-loading { margin: 0; padding: 8px 10px; border-radius: 9px; color: #6d5b2c !important; background: #fff7dc; text-align: center; font-size: 10px !important; }
.account-form small, .account-form p, .account-dialog p, .cloud-data-dialog p, .guest-save-dialog p { color: #6a7b70; font-size: 10px; line-height: 1.85; }
.account-form button { width: 100%; margin: 0; }
.link-button { border: 0; padding: 3px; color: #96712e; background: transparent; cursor: pointer; font: inherit; font-weight: 800; }
.account-switch { text-align: center; }
.account-config-note { margin-bottom: 15px; padding: 11px 13px; border: 1px solid #e3c47c; border-radius: 11px; background: #fff6d9; color: #765d24; }
.account-config-note strong { display: block; font-size: 11px; }
.account-config-note p, .account-config-note small { display: block; margin: 4px 0 0; color: #806d43; }
.account-error, .account-notice { margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; color: #8b433d !important; background: #fff1ed; font-size: 10px; line-height: 1.8; }
.analysis-load-error { margin: 16px 0; padding: 16px; border: 1px solid rgba(139, 67, 61, 0.2); border-radius: 14px; color: #8b433d; background: #fff7f4; line-height: 1.8; }
.analysis-load-error strong { display: block; font-size: 13px; }
.analysis-load-error p { margin: 6px 0 12px; color: #6f514b; }
.account-notice { color: #536d5f !important; background: #edf6ed; }
.account-profile-card { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 15px; border: 1px solid #dce7da; border-radius: 13px; background: #fbfcf7; }
.account-profile-card > div { display: grid; gap: 5px; }
.account-avatar { display: block; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.account-avatar-fallback { display: grid; place-items: center; color: #96712e; background: #fff1c9; font-size: 23px; }
.account-profile-card strong { font-size: 16px; }
.account-profile-card span, .account-profile-card small { color: #6d7e72; font-size: 10px; }
.account-mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 15px; }
.account-mini-stats div { display: grid; gap: 4px; padding: 10px 7px; border: 1px solid #e2e5d4; border-radius: 10px; text-align: center; background: #fff; }
.account-mini-stats strong { color: #9b752d; font-size: 18px; }
.account-mini-stats span { color: #708074; font-size: 9px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.account-actions button { flex: 1 1 170px; width: auto; margin: 0; }
.cloud-data-owner { margin: -6px 0 14px; color: #7a897d !important; }
.cloud-data-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #e2e5d4; }
.cloud-data-tabs button { margin: 0; padding: 8px 11px; border: 1px solid #ccdaca; border-radius: 9px; color: #557164; background: #f5f8ef; cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; }
.cloud-data-tabs button.is-active { border-color: #ba9543; color: #765d24; background: #fff3c9; }
.cloud-match-list { display: grid; gap: 10px; }
.cloud-match-card { padding: 13px; border: 1px solid #dce7da; border-radius: 13px; background: #fff; }
.cloud-match-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.cloud-match-head strong { color: #294c3c; font-size: 11px; }
.cloud-match-head span, .cloud-match-card small { color: #778579; font-size: 9px; }
.cloud-match-card p { margin: 6px 0 0; color: #536b5e; font-size: 10px; }
.cloud-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cloud-card-actions button { width: auto; margin: 0; }
.cloud-empty { padding: 20px; border: 1px dashed #cbd8ca; border-radius: 12px; text-align: center; }
.account-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.account-stat-grid div { display: grid; gap: 6px; padding: 11px 8px; border: 1px solid #e1e6d8; border-radius: 11px; background: #fff; }
.account-stat-grid span { color: #738276; font-size: 9px; line-height: 1.5; }
.account-stat-grid strong { color: #9a752f; font-size: 17px; }
.analysis-profile-stack { display: grid; gap: 16px; }
.analysis-profile-section { display: grid; gap: 9px; padding-top: 4px; }
.analysis-profile-section h3 { margin: 0; color: #294c3c; font-size: 13px; }
.analysis-profile-note { margin: 0 !important; color: #718177 !important; }
.analysis-profile-type-counts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.analysis-profile-type-grid, .analysis-profile-tool-grid, .analysis-profile-insight-grid, .analysis-profile-progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.analysis-profile-type-card, .analysis-profile-tool-card, .analysis-profile-insight-card, .analysis-profile-progress-card, .analysis-profile-comparison { display: grid; gap: 4px; padding: 11px; border: 1px solid #dce7da; border-radius: 11px; background: #fff; }
.analysis-profile-type-card strong, .analysis-profile-tool-card strong, .analysis-profile-insight-card strong, .analysis-profile-progress-card strong, .analysis-profile-comparison strong { color: #294c3c; font-size: 11px; }
.analysis-profile-type-card span, .analysis-profile-type-card p, .analysis-profile-tool-card span, .analysis-profile-tool-card small, .analysis-profile-insight-card span, .analysis-profile-insight-card small, .analysis-profile-progress-card span, .analysis-profile-progress-card small, .analysis-profile-comparison span { margin: 0; color: #738276; font-size: 9px; line-height: 1.7; }
.analysis-profile-type-card p { color: #536b5e; }
.analysis-profile-results { display: grid; gap: 8px; max-height: 420px; overflow: auto; }
.analysis-profile-result-card { padding: 0; border: 1px solid #dce7da; border-radius: 11px; background: #fff; }
.analysis-profile-result-link { display: grid; gap: 5px; width: 100%; padding: 11px; border: 0; color: inherit; background: transparent; text-align: start; cursor: pointer; font: inherit; }
.analysis-profile-result-link:hover, .analysis-profile-result-link:focus-visible { background: #f7fbf3; }
.analysis-profile-result-link header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.analysis-profile-result-link header strong { color: #294c3c; font-size: 11px; }
.analysis-profile-result-link p, .analysis-profile-result-link small { margin: 0; color: #738276; font-size: 9px; line-height: 1.7; }
.analysis-profile-status { flex: 0 0 auto; padding: 3px 6px; border-radius: 99px; font-size: 9px; font-weight: 800; }
.analysis-profile-status.confirmed { color: #176b43; background: #e2f5e8; }
.analysis-profile-status.incorrect { color: #a9362f; background: #fbe7e5; }
.analysis-profile-status.unresolved { color: #806221; background: #fff2cf; }
.analysis-profile-status.pending { color: #536b5e; background: #eef3ee; }
.cloud-strategy-summary > strong { color: #9a752f; font-size: 13px; }
.cloud-strategy-summary article { padding: 11px; border: 1px solid #dce7da; border-radius: 11px; background: #fff; }
.cloud-strategy-summary article strong, .cloud-strategy-summary article span { display: block; }
.cloud-strategy-summary article span { margin-top: 3px; color: #7a897d; font-size: 9px; }
.cloud-strategy-summary article p { margin: 6px 0 0; }
.guest-save-dialog { width: min(500px, 100%); }
.guest-save-dialog p { margin: 0; }
@media (max-width: 680px) { .account-mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .account-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .analysis-profile-type-counts, .analysis-profile-type-grid, .analysis-profile-tool-grid, .analysis-profile-insight-grid, .analysis-profile-progress-grid { grid-template-columns: 1fr; } .review-analysis-tool-stats { grid-template-columns: 1fr; } .account-dialog, .cloud-data-dialog, .guest-save-dialog { padding: 22px 16px; } }
@media (max-width: 680px) { .master-learning-columns { grid-template-columns: 1fr; } .master-strategy-library-actions button { flex: 1 1 140px; } }
@media (max-width: 680px) {
  .exit-match-button { font-size: 8px; padding: 4px 5px; }
  .main-menu-dialog { padding: 24px 18px 20px; }
  .main-menu-button { min-height: 43px; font-size: 11px; }
  .audio-setup-row { align-items: flex-start; flex-direction: column; }
  .audio-setup-button { width: 100%; }
  .education-back-button { font-size: 8px; padding: 6px 8px; }
}

/* Shared Master UI sizing for the seven navigation surfaces. MASTER_MODE remains unchanged. */
.main-menu-dialog h2 { font-size: var(--master-ui-title); }
.main-menu-question { font-size: var(--master-ui-body) !important; }
.main-menu-actions { gap: var(--master-ui-control-gap); }
.main-menu-button { min-height: calc((var(--master-ui-control-font) * 1.35) + (var(--master-ui-control-padding-y) * 2) + 2px); padding: var(--master-ui-control-padding-y) var(--master-ui-control-padding-x); font-size: var(--master-ui-control-font); line-height: 1.35; white-space: normal; }

.rules-dialog, .training-dialog { padding: calc(18px * var(--master-ui-scale)); }
.education-header { gap: calc(14px * var(--master-ui-scale)); padding-bottom: calc(12px * var(--master-ui-scale)); }
.education-header h2 { font-size: var(--master-ui-title); }
.education-header p { font-size: var(--master-ui-body); }
.education-header .dialog-close { font-size: var(--master-ui-icon); }
.education-header-actions { gap: calc(7px * var(--master-ui-scale)); flex-wrap: wrap; }
.education-header-actions .primary-button, .education-header-actions .secondary-button, .education-back-button { min-height: calc((var(--master-ui-control-font) * 1.35) + (var(--master-ui-control-padding-y) * 2) + 2px); padding: var(--master-ui-control-padding-y) var(--master-ui-control-padding-x); font-size: var(--master-ui-control-font); line-height: 1.35; white-space: normal; }
.education-back-button { margin: 0; }
.rules-nav { gap: var(--master-ui-control-gap); padding: calc(10px * var(--master-ui-scale)) 0 calc(7px * var(--master-ui-scale)); }
.rules-nav a { padding: calc(6px * var(--master-ui-scale)) calc(9px * var(--master-ui-scale)); font-size: var(--master-ui-control-font); line-height: 1.35; }
.rules-content { gap: calc(7px * var(--master-ui-scale)); }
.rules-section { padding: var(--master-ui-card-padding) var(--master-ui-card-padding) calc(9px * var(--master-ui-scale)); }
.rules-section h3 { gap: calc(5px * var(--master-ui-scale)); margin-bottom: calc(5px * var(--master-ui-scale)); font-size: var(--master-ui-section-title); }
.rules-section h3 span { font-size: var(--master-ui-control-font); }
.rules-section p, .rules-section ul, .rules-example, .rules-callout { font-size: var(--master-ui-body); }
.rules-section p { line-height: 1.7; }
.rules-section ul { line-height: 1.65; }

.training-categories-heading { font-size: var(--master-ui-body); }
.training-category, .training-option, .training-side-choice-button, .training-solution-button, .training-create-button { padding: var(--master-ui-control-padding-y) var(--master-ui-control-padding-x); font-size: var(--master-ui-control-font); line-height: 1.35; }
.training-categories { gap: var(--master-ui-control-gap); }
.training-kicker-row { gap: calc(10px * var(--master-ui-scale)); }
.training-kicker-row strong, .training-side-choice h3, .training-prompt h3, .training-facts h3, .training-feedback h3, .training-solution h3 { font-size: var(--master-ui-section-title); }
.training-kicker-row span, .training-progress { font-size: var(--master-ui-caption); }
.training-layout { gap: calc(8px * var(--master-ui-scale)); }
.training-table, .training-prompt, .training-facts, .training-feedback, .training-solution { padding: var(--master-ui-card-padding); }
.training-generation-heading h3, .training-remaining-heading h3 { font-size: var(--master-ui-section-title); }
.training-generation-heading p, .training-remaining-heading p, .training-prompt p, .training-facts p, .training-feedback p, .training-solution p, .training-option small, .training-seat span, .training-hand-label, .training-transition, .training-illegal-notice { font-size: var(--master-ui-body); }
.training-count-control { gap: var(--master-ui-control-gap); }
.training-count-control button { width: calc(var(--master-ui-control-font) * 1.35 + 2 * var(--master-ui-control-padding-y)); height: calc(var(--master-ui-control-font) * 1.35 + 2 * var(--master-ui-control-padding-y)); font-size: var(--master-ui-section-title); }
.training-count-control output { font-size: var(--master-ui-control-font); }
.training-side-choice-actions, .training-analysis-actions { gap: var(--master-ui-control-gap); }

.account-dialog h2, .cloud-data-dialog h2, .guest-save-dialog h2 { font-size: var(--master-ui-title); }
.account-dialog > .dialog-close, .cloud-data-dialog > .dialog-close { font-size: var(--master-ui-icon); width: auto; inset-inline-start: auto; }
.account-form { gap: var(--master-ui-card-gap); }
.account-form label, .account-form input, .account-form small, .account-form p, .account-dialog p, .cloud-data-dialog p, .guest-save-dialog p { font-size: var(--master-ui-body); }
.account-form input { padding: var(--master-ui-control-padding-y) var(--master-ui-control-padding-x); }
.account-form button:not(.link-button), .account-actions button, .cloud-data-tabs button, .cloud-card-actions button, .google-auth-button { min-height: calc((var(--master-ui-control-font) * 1.35) + (var(--master-ui-control-padding-y) * 2) + 2px); padding: var(--master-ui-control-padding-y) var(--master-ui-control-padding-x); font-size: var(--master-ui-control-font); line-height: 1.35; white-space: normal; }
.account-form button.link-button { font-size: var(--master-ui-body); }
.password-toggle { width: calc(var(--master-ui-control-font) * 1.35 + 2 * var(--master-ui-control-padding-y)) !important; min-height: calc(var(--master-ui-control-font) * 1.35 + 2 * var(--master-ui-control-padding-y)); padding: 0 !important; font-size: var(--master-ui-control-font) !important; }
.account-login-options { gap: var(--master-ui-control-gap); }
.account-login-options .remember-row { gap: var(--master-ui-control-gap); font-size: var(--master-ui-control-font); }
.account-login-options .remember-row input { width: var(--master-ui-check-size); height: var(--master-ui-check-size); }
.account-auth-divider { gap: var(--master-ui-control-gap); font-size: var(--master-ui-caption); }
.account-loading, .account-error, .account-notice { font-size: var(--master-ui-body) !important; }
.account-profile-card, .account-mini-stats, .account-actions { gap: var(--master-ui-card-gap); }
.account-profile-card { padding: var(--master-ui-card-padding); }
.account-profile-card strong { font-size: var(--master-ui-section-title); }
.account-profile-card span, .account-profile-card small, .account-mini-stats span { font-size: var(--master-ui-caption); }
.account-mini-stats div { padding: calc(7px * var(--master-ui-scale)); }
.account-mini-stats strong { font-size: var(--master-ui-section-title); }
.account-actions { margin-top: calc(10px * var(--master-ui-scale)); }

.cloud-data-tabs { gap: var(--master-ui-control-gap); }
.cloud-data-tabs button { margin: 0; }
.cloud-match-list, .cloud-strategy-summary { gap: var(--master-ui-card-gap); }
.cloud-match-card, .cloud-strategy-summary article { padding: var(--master-ui-card-padding); }
.cloud-match-head strong, .cloud-match-card p, .cloud-strategy-summary article p, .cloud-strategy-summary > strong { font-size: var(--master-ui-body); }
.cloud-match-head span, .cloud-match-card small, .cloud-strategy-summary article span { font-size: var(--master-ui-caption); }
.cloud-card-actions { gap: var(--master-ui-control-gap); }
.account-stat-grid { gap: var(--master-ui-card-gap); }
.account-stat-grid div { gap: var(--master-ui-control-gap); padding: var(--master-ui-card-padding); }
.account-stat-grid span, .account-stat-grid strong { font-size: var(--master-ui-body); }

@media (max-width: 680px) {
  .main-menu-dialog h2, .education-header h2, .account-dialog h2, .cloud-data-dialog h2, .guest-save-dialog h2 { font-size: var(--master-ui-title); }
  .education-header-actions { align-items: stretch; }
  .education-header-actions .primary-button, .education-header-actions .secondary-button, .education-back-button { width: auto; }
  .account-actions button, .cloud-card-actions button { flex: 1 1 100%; }
}

/* Canonical DominoTile renderer: every face shares the GAME_ACTIVE body, divider, depth, and pip geometry. */
.domino-tile { box-sizing: border-box; position: relative; display: flex; align-items: stretch; overflow: hidden; padding: 3px; border: 1.5px solid #d2caa9; border-radius: 7px; color: #243b31; background: linear-gradient(145deg,#fffef7,#eee9d9); box-shadow: 0 3px 6px rgba(12,43,32,.17); direction: ltr; }
.domino-tile .tile-inner { display: flex; width: 100%; height: 100%; align-items: stretch; }
.domino-tile .tile-inner .pip-half { flex: 1; }
.domino-tile .tile-inner .pip-half + .pip-half { border-inline-start: 1px solid #cfc7ad; }
.domino-tile.tile-orientation-vertical .tile-inner { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.domino-tile.tile-orientation-vertical .tile-inner .pip-half + .pip-half { border-inline-start: 0; border-block-start: 1px solid #cfc7ad; }
.domino-tile.domino-double .tile-inner { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.domino-tile.domino-double .tile-inner .pip-half + .pip-half { border-inline-start: 0; border-block-start: 1px solid #cfc7ad; }
.domino-tile .pip-grid { width: 100%; height: 100%; max-width: 28px; max-height: 28px; display: grid; grid-template: repeat(3,1fr)/repeat(3,1fr); align-items: center; justify-items: center; }
.domino-tile .pip { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.domino-tile .pip.on { background: #203e32; box-shadow: 0 0 1px rgba(21,46,37,.3); }
.domino-tile.score-tile { width: 31px; height: 20px; flex: 0 0 31px; padding: 2px; border-radius: 5px; box-shadow: 0 2px 4px rgba(12,43,32,.17); animation: scoring-tile-in .28s ease-out both; }
.domino-tile.score-tile.domino-double { width: 20px; height: 31px; flex-basis: 20px; }
.domino-tile.score-tile .pip-grid { max-width: 13px; max-height: 15px; }
.domino-tile.score-tile .pip { width: 2px; height: 2px; }
.domino-tile.closure-tile { width: 39px; height: 25px; flex: 0 0 39px; padding: 2px; border-radius: 5px; box-shadow: 0 2px 4px rgba(12,43,32,.17); }
.domino-tile.closure-tile.domino-double { width: 25px; height: 39px; flex-basis: 25px; }
.domino-tile.closure-tile .pip-grid { max-width: 17px; max-height: 21px; }
.domino-tile.closure-tile .pip { width: 2.8px; height: 2.8px; }
.domino-tile.review-domino { width: 50px; height: 30px; padding: 2px; border-radius: 6px; box-shadow: 0 2px 5px rgba(12,43,32,.17); }
.domino-tile.review-domino.domino-double { width: 30px; height: 50px; }
.domino-tile.review-domino .pip-grid { max-width: 20px; max-height: 22px; }
.domino-tile.review-domino .pip { width: 3px; height: 3px; }
.domino-tile.review-hand-tile { width: 43px; height: 26px; flex: 0 0 43px; padding: 2px; border-radius: 5px; box-shadow: 0 2px 5px rgba(12,43,32,.17); }
.domino-tile.review-hand-tile.domino-double { width: 26px; height: 43px; flex-basis: 26px; }
.domino-tile.review-hand-tile .pip-grid { max-width: 17px; max-height: 19px; }
.domino-tile.review-hand-tile .pip { width: 2.6px; height: 2.6px; }
.domino-tile.remaining-tile-face { width: 42px; height: 25px; padding: 2px; border-radius: 5px; box-shadow: 0 2px 4px rgba(12,43,32,.17); }
.domino-tile.remaining-tile-face.domino-double { width: 25px; height: 42px; }
.domino-tile.remaining-tile-face .pip-grid { max-width: 17px; max-height: 17px; }
.domino-tile.remaining-tile-face .pip { width: 2.8px; height: 2.8px; }
.domino-tile.master-hand-tile { width: 38px; height: 24px; flex: 0 0 38px; padding: 2px; border-radius: 5px; box-shadow: 0 2px 4px rgba(12,43,32,.17); }
.domino-tile.master-hand-tile.domino-double { width: 25px; height: 40px; flex-basis: 25px; }
.domino-tile.master-hand-tile .pip-grid { max-width: 16px; max-height: 17px; }
.domino-tile.master-hand-tile .pip { width: 2.5px; height: 2.5px; }
.domino-tile.chain-tile { position: absolute; z-index: 1; width: auto; height: auto; padding: var(--chain-tile-padding,2px); border: var(--chain-tile-border,1.5px) solid #d2caa9; border-radius: var(--chain-tile-radius,7px); background: linear-gradient(145deg,#fffef7,#eee9d9); box-shadow: 0 3px 6px rgba(12,43,32,.17); overflow: hidden; }
.domino-tile.chain-tile .tile-inner { display: flex; }
.domino-tile.chain-tile.vertical-tile .tile-inner { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.domino-tile.chain-tile .pip-grid { max-width: var(--chain-grid-max-width,28px); max-height: var(--chain-grid-max-height,28px); }
.domino-tile.chain-tile .pip { width: var(--chain-pip-size,5px); height: var(--chain-pip-size,5px); }
.domino-tile.chain-tile.latest-tile { border-color: #f0d16a; box-shadow: 0 0 0 3px rgba(240,209,106,.7), 0 0 18px rgba(240,209,106,.8), 0 4px 8px rgba(12,43,32,.3); }
#master-content .domino-tile.master-tile-button { min-width: 38px; width: 38px; gap: 0; padding: 2px; border: 1.5px solid #d2caa9; }
#master-content .domino-tile.master-tile-button.domino-double { min-width: 25px; width: 25px; height: 40px; flex-basis: 25px; }
.domino-tile.master-tile-button.domino-double { min-width: 25px; width: 25px; height: 40px; flex-basis: 25px; }
.domino-tile.master-tile-button:hover, .domino-tile.master-tile-button:focus-visible, .domino-tile.master-tile-button.is-selected { border-color: #c39a43; background: #fff1bb; outline: none; box-shadow: 0 0 0 2px rgba(195,154,67,.16); }
.domino-tile.master-tile-button:active { cursor: grabbing; }
.domino-tile.master-tile-button:disabled { cursor: default; }
.domino-tile.hand-tile, .domino-tile.practice-hand-tile { cursor: default; }
.domino-tile.hand-tile.legal, .domino-tile.practice-hand-tile.legal { cursor: pointer; }
.domino-tile.hand-tile.legal:hover, .domino-tile.practice-hand-tile.legal:hover { transform: translateY(-5px); border-color: #4f7c19; }
.domino-tile.hand-tile:not(.legal), .domino-tile.practice-hand-tile:not(.legal) { opacity: .47; }
.domino-tile.hand-tile:disabled, .domino-tile.practice-hand-tile:disabled { cursor: not-allowed; }
.domino-tile.hand-tile .playable-badge { display: none; }
.domino-tile.hand-tile.legal .playable-badge, .domino-tile.practice-hand-tile.legal .playable-badge { display: block; }
/* Final face-system parity: all secondary surfaces keep the GAME_ACTIVE body, divider, pip scale, and aspect ratio. */
.domino-tile.score-tile,
.domino-tile.closure-tile,
.domino-tile.review-domino,
.domino-tile.review-hand-tile,
.domino-tile.remaining-tile-face,
.domino-tile.master-hand-tile {
  border: 1.5px solid #d2caa9;
  border-radius: 7px;
  background: linear-gradient(145deg,#fffef7,#eee9d9);
  box-shadow: 0 3px 6px rgba(12,43,32,.17);
}
.domino-tile.score-tile { width: 39px; height: 23px; flex-basis: 39px; }
.domino-tile.score-tile.domino-double { width: 23px; height: 39px; flex-basis: 23px; }
.domino-tile.closure-tile { width: 39px; height: 23px; flex-basis: 39px; }
.domino-tile.closure-tile.domino-double { width: 23px; height: 39px; flex-basis: 23px; }
.domino-tile.review-domino { width: 52px; height: 31px; }
.domino-tile.review-domino.domino-double { width: 31px; height: 52px; }
.domino-tile.review-hand-tile { width: 44px; height: 26px; flex-basis: 44px; }
.domino-tile.review-hand-tile.domino-double { width: 26px; height: 44px; flex-basis: 26px; }
.domino-tile.remaining-tile-face { width: 42px; height: 25px; }
.domino-tile.remaining-tile-face.domino-double { width: 25px; height: 42px; }
#master-content .domino-tile.master-hand-tile { width: 39px; height: 23px; flex-basis: 39px; }
#master-content .domino-tile.master-hand-tile.domino-double { width: 23px; height: 39px; flex-basis: 23px; }
.domino-tile.score-tile .pip,
.domino-tile.closure-tile .pip,
.domino-tile.review-domino .pip,
.domino-tile.review-hand-tile .pip,
.domino-tile.remaining-tile-face .pip,
.domino-tile.master-hand-tile .pip { width: 4px; height: 4px; }

.analysis-training-category-note { margin: .4rem 0; padding: .6rem .8rem; color: #0f766e; background: rgba(20, 184, 166, .1); border: 1px solid rgba(20, 184, 166, .24); border-radius: 12px; font-size: .86rem; }
.analysis-training-shell { display: grid; gap: 1rem; }
.analysis-training-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 1rem; align-items: start; }
.analysis-training-position, .analysis-training-question { padding: 1rem; border: 1px solid var(--line, rgba(148, 163, 184, .25)); border-radius: 18px; background: var(--panel, rgba(15, 23, 42, .55)); box-shadow: 0 12px 34px rgba(2, 6, 23, .12); }
.analysis-training-chain { min-height: 90px; display: flex; align-items: center; justify-content: center; gap: .35rem; overflow-x: auto; padding: 1rem; margin: .8rem 0; border-radius: 14px; background: rgba(2, 6, 23, .2); }
.analysis-training-chain .domino-tile { width: 44px; height: 26px; flex: 0 0 44px; }
.analysis-training-chain .domino-tile.domino-double { width: 26px; height: 44px; flex-basis: 26px; }
.analysis-training-hand { display: grid; gap: .5rem; padding-top: .8rem; border-top: 1px solid var(--line, rgba(148, 163, 184, .2)); }
.analysis-training-hand > div { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.analysis-training-hand .domino-tile { width: 48px; height: 28px; }
.analysis-training-hand .domino-tile.domino-double { width: 28px; height: 48px; }
.analysis-training-hidden-note, .analysis-training-source { margin: .85rem 0 0; color: var(--muted, #94a3b8); font-size: .84rem; }
.analysis-training-question h2 { margin: .35rem 0 .6rem; line-height: 1.5; }
.analysis-training-answer, .analysis-training-reveal { margin-top: 1rem; padding: .9rem; border-radius: 14px; background: rgba(59, 130, 246, .08); }
.analysis-training-answer-grid, .analysis-training-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .8rem; }
.analysis-training-answer-grid button { flex: 1 1 150px; }
.analysis-training-evidence { direction: ltr; text-align: left; overflow-wrap: anywhere; padding: .65rem; border-radius: 10px; background: rgba(2, 6, 23, .22); font-size: .78rem; }
.analysis-training-source { display: grid; gap: .35rem; padding-top: .8rem; border-top: 1px solid var(--line, rgba(148, 163, 184, .2)); }
.analysis-training-source button { justify-self: start; }
.analysis-profile-insight-card .analysis-practice-button { margin-top: .65rem; }
@media (max-width: 760px) {
  .analysis-training-grid { grid-template-columns: 1fr; }
  .analysis-training-position, .analysis-training-question { padding: .8rem; }
}