:root {
  color-scheme: dark;
  --ink: #06110e;
  --felt: #0b3b30;
  --felt-light: #115141;
  --cream: #f3ead5;
  --muted: #9db3a8;
  --gold: #d6aa58;
  --gold-bright: #f1d28a;
  --gold-deep: #62431e;
  --frame-glint: rgba(255, 225, 153, .72);
  --frame-shadow: rgba(34, 20, 8, .88);
  --red: #d94f4b;
  --line: rgba(240, 210, 145, 0.25);
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-ui: "Cormorant Garamond", Georgia, serif;
  --font-jp: "Noto Serif JP", "Yu Mincho", serif;
  --card-width: clamp(130px, 8.8vw, 174px);
  font-family: var(--font-ui);
  background: var(--ink);
  color: var(--cream);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; overflow-x: hidden; background: linear-gradient(rgba(1,10,8,.27), rgba(1,8,6,.55)), url("../assets/ui/bg-castle.webp") center / cover fixed, #030b09; }
body.intro-active { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
.jp { font-family: var(--font-jp); }

.app {
  width: min(1920px, 100%);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: clamp(10px, 1.4vw, 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(6px, .8vh, 10px);
}

.app > *, .layout, .table { min-width: 0; max-width: 100%; }

.hud {
  position: relative;
  min-height: clamp(70px, 8.5vh, 94px);
  display: grid;
  grid-template-columns: 18fr 10fr 34fr 10fr 9fr 17fr;
  align-items: center;
  gap: clamp(5px, .55vw, 11px);
  padding: 14px 8px 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent 0%, rgba(2,15,12,.5) 5%, rgba(3,23,18,.86) 13%, rgba(3,23,18,.72) 50%, rgba(3,23,18,.86) 87%, rgba(2,15,12,.5) 95%, transparent 100%);
  box-shadow: inset 0 1px rgba(255,226,158,.08), inset 0 -8px 18px rgba(0,0,0,.2), 0 5px 18px rgba(0,0,0,.14);
}
.hud::before, .hud::after { content: ""; position: absolute; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 10%, var(--gold-bright) 50%, var(--gold) 90%, transparent); pointer-events: none; }
.hud::before { top: 0; }
.hud::after { bottom: 0; }
.hud-top { display: contents; }

.brand p, .brand h1, .brand span, .rank-display p, .audio-control p, .hand-label h2, .hand-label p, .center-status p, .bet-panel p, .bet-panel > span, .side-panel p, .side-panel h2 { margin: 0; }
.brand { grid-column: 3; grid-row: 1; text-align: center; }
.brand p { color: var(--muted); font-family: var(--font-display); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.22em; }
.brand h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.35vw, 4rem); font-weight: 600; letter-spacing: 0.035em; line-height: .95; text-shadow: 0 2px 8px #000, 0 0 16px rgba(226,190,117,.16); white-space: nowrap; }
.brand i { color: var(--gold); font-family: var(--font-ui); font-size: 0.55em; font-weight: 600; }
.brand > span { display: block; margin-top: 4px; color: #aebfb5; font-size: clamp(.38rem, .48vw, .55rem); letter-spacing: .28em; }

.rank-display { grid-column: 1; grid-row: 1; min-width: 0; display: grid; grid-template-columns: clamp(58px, 4.8vw, 92px) minmax(0, 1fr); align-items: center; gap: 8px; }
.rank-display img { display: block; width: min(100%, 76px); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 2px 5px #000); }
.rank-copy { min-width: 0; }
.rank-display p { color: var(--gold); font-family: var(--font-display); font-size: .48rem; font-weight: 600; letter-spacing: .2em; }
.rank-name-row { min-width: 0; display: flex; align-items: baseline; gap: clamp(5px, .45vw, 9px); overflow: hidden; }
.rank-display strong { min-width: 0; overflow: hidden; color: var(--cream); font-family: var(--font-display); font-size: clamp(.72rem, .9vw, 1rem); font-weight: 600; letter-spacing: .09em; text-overflow: ellipsis; white-space: nowrap; }
.rank-display span { flex: 0 0 auto; color: var(--gold-bright); font-family: var(--font-jp); font-size: .6rem; font-weight: 500; letter-spacing: .06em; line-height: 1.6; white-space: nowrap; }
.rank-display progress { display: block; width: 100%; height: 8px; margin: 5px 0 3px; overflow: hidden; appearance: none; -webkit-appearance: none; border: 1px solid rgba(214,170,88,.5); border-radius: 999px; background: rgba(1,13,10,.9); box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }
.rank-display progress::-webkit-progress-bar { background: rgba(1,13,10,.9); }
.rank-display progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #9f702e, var(--gold-bright)); box-shadow: 0 0 8px rgba(241,210,138,.65); }
.rank-display progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #9f702e, var(--gold-bright)); box-shadow: 0 0 8px rgba(241,210,138,.65); }
.rank-display small { display: block; overflow: hidden; color: var(--muted); font-size: .38rem; text-overflow: ellipsis; white-space: nowrap; }

.stats { display: contents; margin: 0; }
.stats > div { min-width: 0; border: 1px solid transparent; border-radius: 4px; padding: 5px clamp(6px, .8vw, 14px); display: flex; align-items: center; gap: 6px; background: linear-gradient(rgba(4,28,22,.58), rgba(1,15,12,.62)) padding-box, linear-gradient(135deg, rgba(92,61,26,.7), rgba(232,194,116,.48), rgba(76,49,20,.65)) border-box; box-shadow: inset 0 1px rgba(255,230,164,.08), inset 0 -5px 10px rgba(0,0,0,.16); }
.stats > div:nth-child(1) { grid-column: 2; grid-row: 1; }
.stats > div:nth-child(2) { grid-column: 4; grid-row: 1; }
.stats > div:nth-child(3) { grid-column: 5; grid-row: 1; }
.stats > div > img { width: clamp(27px, 2.3vw, 42px); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 2px 4px #000); }
.stats > div > span { min-width: 0; }
.stats dt { color: var(--muted); font-family: var(--font-ui); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; }
.stats dd { margin: 1px 0 0; color: var(--cream); font-family: var(--font-ui); font-size: clamp(.95rem, 1.42vw, 1.48rem); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.045em; line-height: 1; white-space: nowrap; }

.audio-control { grid-column: 6; grid-row: 1; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; border: 1px solid transparent; border-radius: 4px; padding: 7px 9px; background: linear-gradient(rgba(2,27,21,.82), rgba(1,14,11,.86)) padding-box, linear-gradient(135deg, var(--gold-deep), rgba(241,210,138,.68), #4c3116) border-box; box-shadow: inset 0 1px rgba(255,231,169,.12), inset 0 -6px 12px rgba(0,0,0,.2), 0 5px 14px rgba(0,0,0,.16); }
.audio-control > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.audio-control > div > span { color: var(--gold); font-size: 1.4rem; }
.audio-control small, .audio-control strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-control small { color: var(--muted); font-size: 0.48rem; letter-spacing: 0.15em; }
.audio-control strong { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.055em; }
.audio-control button { grid-column: 2; grid-row: 1 / 3; inline-size: 72px; min-inline-size: 72px; border: 1px solid var(--line); background: transparent; padding: 7px 6px; font-size: 0.58rem; text-align: center; cursor: pointer; }
.audio-control input { grid-column: 1; width: 100%; height: 3px; margin-top: 7px; accent-color: var(--gold); }

.layout { min-height: 0; display: grid; grid-template-columns: clamp(200px, 16vw, 320px) minmax(0, 1fr) clamp(245px, 16vw, 310px); gap: clamp(8px, .7vw, 14px); align-items: start; }
.priestess-panel { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(214,170,88,.23); background: radial-gradient(circle at 50% 40%, rgba(25,81,64,.3), rgba(1,9,7,.62)); }
.priestess-panel { height: calc(100% - clamp(24px, 3.5vh, 38px)); }
.priestess-panel img { position: absolute; z-index: 1; left: 48%; bottom: -2%; width: auto; max-width: none; height: 104%; object-fit: contain; object-position: bottom; translate: -50% 0; filter: drop-shadow(0 0 22px rgba(238,198,118,.25)); }
.priestess-panel p { position: absolute; z-index: 2; top: 8%; left: 9%; margin: 0; color: var(--gold); font-size: clamp(.45rem, .68vw, .72rem); line-height: 2.4; letter-spacing: .22em; text-align: center; text-shadow: 0 2px 4px #000; }
.table { position: relative; min-width: 0; min-height: 0; height: calc(100% - clamp(24px, 3.5vh, 38px)); overflow: hidden; border: 1px solid transparent; border-radius: 8px; background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px) padding-box, radial-gradient(ellipse, rgba(14,78,61,.97), rgba(3,37,29,.99)) padding-box, linear-gradient(135deg, #4d3216, var(--gold-bright) 22%, #765024 48%, var(--gold) 72%, #34210f) border-box; box-shadow: inset 0 0 0 4px rgba(0,0,0,.3), inset 0 1px rgba(255,233,174,.15), inset 0 -12px 24px rgba(0,0,0,.16), 0 20px 55px rgba(0,0,0,.38); padding: clamp(7px, .8vw, 15px); display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(2px, .45vh, 5px); }
.table::before { content: ""; position: absolute; z-index: 3; inset: 3px; background: linear-gradient(90deg, var(--frame-glint), transparent) left top / 30px 1px no-repeat, linear-gradient(180deg, var(--frame-glint), transparent) left top / 1px 30px no-repeat, linear-gradient(270deg, var(--frame-glint), transparent) right top / 30px 1px no-repeat, linear-gradient(180deg, var(--frame-glint), transparent) right top / 1px 30px no-repeat, linear-gradient(90deg, var(--frame-glint), transparent) left bottom / 30px 1px no-repeat, linear-gradient(0deg, var(--frame-glint), transparent) left bottom / 1px 30px no-repeat, linear-gradient(270deg, var(--frame-glint), transparent) right bottom / 30px 1px no-repeat, linear-gradient(0deg, var(--frame-glint), transparent) right bottom / 1px 30px no-repeat; pointer-events: none; }
.table::after { content: ""; position: absolute; z-index: 3; inset: 7px; border: 1px solid rgba(228,191,116,.2); border-radius: 5px; box-shadow: inset 0 0 18px rgba(0,0,0,.26); pointer-events: none; }

.hand-zone { --label-space: clamp(42px, 11vw, 200px); position: relative; z-index: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding-left: var(--label-space); }
.hand-label { position: absolute; left: 0; width: calc(var(--label-space) - 8px); text-align: right; }
.hand-label h2 { font-family: var(--font-display); font-size: clamp(1.05rem, 1.65vw, 1.85rem); font-weight: 600; letter-spacing: .11em; line-height: 1.05; }
.hand-label p { min-height: 1.2em; margin-top: 3px; overflow: hidden; color: var(--gold); font-size: clamp(.54rem, .75vw, .68rem); letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.cards { display: flex; justify-content: center; gap: clamp(6px, .55vw, 11px); }

.card { position: relative; width: var(--card-width); aspect-ratio: 5 / 7; flex: 0 0 var(--card-width); padding: 0; border: 0; border-radius: 6.5% / 4.5%; background: #e9e3d5; box-shadow: 0 7px 16px rgba(0,0,0,.32); animation: deal-in 360ms both cubic-bezier(.2,.75,.25,1); animation-delay: calc(var(--deal-index) * 55ms); }
.card img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; pointer-events: none; user-select: none; }
.card-placeholder { aspect-ratio: 5 / 7; background: rgba(1,16,12,.26); border: 1px dashed rgba(243,234,213,.2); box-shadow: none; animation: none; }
.card-button { cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease; -webkit-tap-highlight-color: transparent; }
.card-button.selected { transform: translate3d(0, -10px, 0); box-shadow: 0 0 0 4px var(--red), 0 13px 26px rgba(0,0,0,.4); filter: brightness(.72); }
.discard-marker { position: absolute; left: 50%; bottom: 8%; translate: -50% 4px; opacity: 0; border: 1px solid #fff; background: var(--red); padding: .28em .5em; font-size: clamp(.45rem, .6vw, .62rem); letter-spacing: .08em; transition: 150ms ease; }
.selected .discard-marker { translate: -50% 0; opacity: 1; }
.card-meta { display: none; }
.card-fallback { display: grid; aspect-ratio: 5 / 7; place-items: center; padding: 8px; background: #eee7d8; color: #16241f; text-align: center; font-size: .65rem; }

.center-status { position: relative; z-index: 2; justify-self: stretch; min-width: 0; min-height: clamp(92px, 13vh, 145px); border-block: 1px solid rgba(243,234,213,.2); padding: clamp(18px, 2.4vh, 28px) 20px; display: grid; align-content: center; text-align: center; isolation: isolate; }
.result-banner { width: 100%; }
.result-banner__text { display: grid; align-content: center; text-align: center; }
.center-status[data-outcome] .result-banner { position: absolute; z-index: 0; top: 50%; left: 50%; width: min(94%, 1050px); height: auto; aspect-ratio: 1654 / 338; transform: translate(-50%, -50%); background: center / contain no-repeat; opacity: .94; pointer-events: none; }
.center-status[data-outcome="WIN"] .result-banner { background-image: url("../assets/ui/result-banner-win.png"); }
.center-status[data-outcome="LOSE"] .result-banner { background-image: url("../assets/ui/result-banner-lose.png"); }
.center-status[data-outcome="DRAW"] .result-banner { background-image: url("../assets/ui/result-banner-draw.png"); }
.center-status[data-outcome] .result-banner__text { position: absolute; left: 50%; top: 55%; width: 100%; padding-inline: 12%; transform: translate(-50%, -50%); }
.phase, .sub-message { color: var(--muted); font-family: var(--font-ui); font-size: clamp(.52rem, .7vw, .68rem); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .17em; line-height: 1.35; }
.message { color: var(--cream); font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 700; letter-spacing: .14em; line-height: 1.1; text-shadow: 0 2px 5px #000; }
.center-status[data-outcome] .phase { display: none; }
.center-status[data-outcome] .message { margin: 0 0 6px; line-height: 1; }
.center-status[data-outcome] .sub-message { color: #fff; font-size: clamp(.5rem, .66vw, .64rem); font-weight: 600; letter-spacing: .14em; line-height: 1.1; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.message[data-outcome="WIN"] { color: var(--gold-bright); text-shadow: 0 0 18px rgba(241,210,138,.35); }
.message[data-outcome="LOSE"] { color: #f18a84; }

.action-dock { position: relative; z-index: 2; min-width: 0; min-height: clamp(96px, 11.5vh, 124px); margin: 0; padding: 7px clamp(255px, 17vw, 330px) 7px clamp(210px, 18vw, 350px); display: flex; justify-content: center; align-items: center; gap: clamp(12px, 1.2vw, 24px); border: 1px solid transparent; border-radius: 7px; background: linear-gradient(90deg, rgba(2,12,9,.58), rgba(9,52,40,.92) 18%, rgba(9,52,40,.92) 82%, rgba(2,12,9,.58)) padding-box, linear-gradient(90deg, transparent, #6b491f 7%, var(--gold) 24%, #725027 50%, var(--gold) 76%, #6b491f 93%, transparent) border-box; box-shadow: inset 0 0 0 4px rgba(0,0,0,.18), inset 0 1px rgba(255,231,168,.13), inset 0 -12px 24px rgba(0,0,0,.18), 0 12px 28px rgba(0,0,0,.24); translate: 0 -2.2vh; }
.action-dock::before { content: ""; position: absolute; z-index: 0; inset: 5px; border: 1px solid rgba(224,184,105,.16); border-radius: 4px; pointer-events: none; }
.action-dock::after { content: ""; position: absolute; z-index: 0; inset: 3px; background: linear-gradient(90deg, var(--frame-glint), transparent) left top / 28px 1px no-repeat, linear-gradient(180deg, var(--frame-glint), transparent) left top / 1px 20px no-repeat, linear-gradient(270deg, var(--frame-glint), transparent) right top / 28px 1px no-repeat, linear-gradient(180deg, var(--frame-glint), transparent) right top / 1px 20px no-repeat, linear-gradient(90deg, var(--frame-glint), transparent) left bottom / 28px 1px no-repeat, linear-gradient(0deg, var(--frame-glint), transparent) left bottom / 1px 20px no-repeat, linear-gradient(270deg, var(--frame-glint), transparent) right bottom / 28px 1px no-repeat, linear-gradient(0deg, var(--frame-glint), transparent) right bottom / 1px 20px no-repeat; pointer-events: none; }
.action-dock > * { position: relative; z-index: 1; }
.bet-panel { display: flex; align-items: center; gap: 7px; }
.bet-panel > span { color: var(--cream); min-width: clamp(95px, 8vw, 145px); font-family: var(--font-display); font-size: clamp(.7rem, .8vw, .88rem); font-weight: 600; letter-spacing: .1em; }
.bet-panel > span small { display: block; margin-top: 4px; color: var(--muted); font-size: .48rem; letter-spacing: .14em; }
.bet-panel.inactive { opacity: .48; }
.bet-options { display: flex; gap: 4px; }
.bet-options button { min-width: clamp(58px, 5vw, 96px); min-height: clamp(44px, 5.8vh, 64px); border: 1px solid transparent; border-radius: 4px; background: linear-gradient(rgba(5,38,30,.97), rgba(2,20,16,.98)) padding-box, linear-gradient(145deg, #5d3d1b, var(--gold-bright) 28%, #755026 56%, var(--gold) 78%, #3a260f) border-box; padding: 8px 9px; color: var(--cream); font-family: var(--font-ui); font-size: clamp(.78rem, 1vw, 1.08rem); font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0,0,0,.34), inset 0 1px rgba(255,231,169,.12), 0 4px 10px rgba(0,0,0,.2); }
.bet-options button.active { border-color: transparent; background: linear-gradient(#e2bb69, #b98637) padding-box, linear-gradient(145deg, #fff0bd, #9b6828 55%, #f1d28a) border-box; color: #142119; box-shadow: inset 0 1px rgba(255,247,210,.52), inset 0 -4px 8px rgba(91,54,13,.2), 0 0 14px rgba(214,170,88,.3); }
.bet-options button:disabled { cursor: not-allowed; opacity: .32; }
.bet-panel p { color: var(--muted); font-size: .55rem; white-space: nowrap; }
.bet-panel p strong { color: var(--cream); font-size: .78rem; font-variant-numeric: tabular-nums; }
.primary-button, .reload-button { border: 1px solid var(--gold-bright); border-radius: 2px; background: linear-gradient(#e0ba6b, #b98939); color: #102019; font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; cursor: pointer; box-shadow: 0 4px 0 #70501e; }
.primary-button { position: relative; display: inline-block; flex: 0 0 auto; width: clamp(270px, 23vw, 420px); min-width: 0; height: auto; min-height: 0; aspect-ratio: 800 / 216; border: 0; background: url("../assets/ui/next-hand-button-base.png") center / contain no-repeat; padding: 0; color: #23170a; font-family: var(--font-display); font-size: clamp(1.05rem, 1.4vw, 1.55rem); font-weight: 700; line-height: 1; box-shadow: none; text-shadow: 0 1px rgba(255,255,255,.3); white-space: nowrap; }
.primary-button > span { position: absolute; inset: 0; display: grid; place-items: center; padding-left: .12em; transform: translateY(1px); text-align: center; }
.primary-button.next-hand { width: clamp(300px, 26vw, 460px); min-width: 0; border: 0; background: url("../assets/ui/next-hand-button-base.png") center / contain no-repeat; box-shadow: none; padding: 0; }
.reload-button { display: grid; place-content: center; min-width: 220px; height: auto; aspect-ratio: 800 / 216; padding: 8px 18px; font-size: 1rem; text-align: center; }
.reload-button span { display: block; font: 600 .62rem "Cascadia Mono", monospace; }

.side-panel { position: relative; min-height: 0; height: auto; overflow: hidden; border: 1px solid transparent; border-radius: 7px; background: linear-gradient(rgba(2,16,12,.93), rgba(1,11,8,.96)) padding-box, linear-gradient(135deg, var(--gold-deep), var(--gold-bright) 24%, #765024 48%, var(--gold) 72%, #3b2813) border-box; box-shadow: inset 0 0 0 4px rgba(0,0,0,.3), inset 0 1px rgba(255,230,165,.16), 0 12px 30px rgba(0,0,0,.32); display: block; }
.side-panel::before { content: ""; position: absolute; z-index: 1; inset: 6px; border: 1px solid rgba(224,184,105,.2); border-radius: 4px; box-shadow: inset 0 0 14px rgba(0,0,0,.35); pointer-events: none; }
.side-panel::after { content: ""; position: absolute; z-index: 2; inset: 3px; background: linear-gradient(90deg, var(--frame-glint), transparent) left top / 24px 1px no-repeat, linear-gradient(180deg, var(--frame-glint), transparent) left top / 1px 24px no-repeat, linear-gradient(270deg, var(--frame-glint), transparent) right top / 24px 1px no-repeat, linear-gradient(180deg, var(--frame-glint), transparent) right top / 1px 24px no-repeat, linear-gradient(90deg, var(--frame-glint), transparent) left bottom / 24px 1px no-repeat, linear-gradient(0deg, var(--frame-glint), transparent) left bottom / 1px 24px no-repeat, linear-gradient(270deg, var(--frame-glint), transparent) right bottom / 24px 1px no-repeat, linear-gradient(0deg, var(--frame-glint), transparent) right bottom / 1px 24px no-repeat; pointer-events: none; }
.side-panel > * { position: relative; z-index: 3; }
.side-panel > section { padding: clamp(16px, 1.55vw, 28px); }
.payout-panel { min-height: 0; }
.payout-panel header p, .rank-panel > p:first-child, .record-panel > p:first-child { color: var(--muted); font-size: .52rem; letter-spacing: .18em; }
.payout-panel h2 { color: var(--gold-bright); font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 600; letter-spacing: .14em; line-height: 1.1; }
.payout-panel ol { margin: clamp(12px, 2vh, 22px) 0; padding: 0; list-style: none; display: grid; gap: clamp(6px, 1vh, 12px); }
.payout-panel li { display: flex; justify-content: space-between; border-bottom: 1px dotted rgba(243,234,213,.12); padding: 3px 4px; color: #e4e7df; font-family: var(--font-ui); font-size: clamp(.65rem, .78vw, .82rem); font-weight: 600; letter-spacing: .07em; }
.payout-panel li strong { color: var(--gold); }
.payout-panel li.current { background: var(--gold); color: #122019; }
.payout-panel li.current strong { color: #122019; }
.fine-print { color: var(--muted); font-size: .48rem; }
.rank-panel > div { display: flex; align-items: baseline; justify-content: space-between; margin-top: 7px; }
.rank-panel strong { color: var(--gold-bright); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: .08em; }
.rank-panel span { font-size: .75rem; }
.rank-panel progress { display: block; width: 100%; height: 6px; margin: 8px 0; accent-color: var(--gold); }
#rank-next { color: var(--muted); font-size: .5rem; }
#rank-progress-mobile { display: none; }
.record-panel dl { margin: 8px 0 0; display: grid; gap: 6px; }
.record-panel dl div { display: flex; justify-content: space-between; gap: 10px; }
.record-panel dt { color: var(--muted); font-size: .5rem; }
.record-panel dd { margin: 0; color: var(--gold-bright); font-size: .6rem; text-align: right; }
.mobile-info { display: none; }
.small-viewport-warning { display: none; }

.session-gate { position: fixed; z-index: 40; inset: 0; min-width: 320px; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: #080807 url("../assets/intro-bg-pc.webp") center / cover no-repeat; opacity: 1; transition: opacity 550ms ease; }
.session-gate.is-leaving { opacity: 0; pointer-events: none; }
.intro-logo { position: absolute; top: 14%; left: 50%; display: block; width: clamp(620px, 46vw, 880px); max-width: 92vw; height: auto; object-fit: contain; transform: translateX(-50%); user-select: none; }
.intro-actions { position: absolute; top: 68.5%; left: 50%; width: clamp(330px, 23.5vw, 450px); display: flex; flex-direction: column; align-items: center; gap: clamp(9px, 1.3vh, 13px); transform: translateX(-50%); }
.intro-start { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1496 / 500; flex: 0 0 auto; border: 0; background: url("../assets/intro-button-bg.webp") center / contain no-repeat; padding: 0; color: #211508; font-family: var(--font-display); font-size: clamp(1.22rem, 1.65vw, 1.9rem); font-weight: 600; letter-spacing: .035em; line-height: 1; text-shadow: 0 1px rgba(255,255,255,.34); transition: filter 160ms ease, transform 160ms ease; cursor: pointer; }
.intro-start span { position: absolute; inset: 0; display: grid; place-items: center; padding-top: .02em; }
.intro-start:disabled { cursor: default; }
.intro-start:focus-visible { outline: none; filter: brightness(1.08) drop-shadow(0 0 5px #fff4cf) drop-shadow(0 0 12px rgba(214,170,88,.75)); }
.intro-audio-notice { width: max-content; max-width: min(90vw, 620px); margin: 0; border: 1px solid rgba(232,210,164,.16); border-radius: 3px; background: rgba(0,0,0,.58); padding: 6px 18px 7px; color: rgba(255,255,255,.92); font-family: var(--font-jp); font-size: clamp(.68rem, .75vw, .82rem); font-weight: 500; line-height: 1.55; letter-spacing: .055em; text-align: center; text-shadow: 0 2px 5px rgba(0,0,0,.95); }
.intro-audio-notice span { display: block; }
.rank-up { position: fixed; z-index: 30; inset: 0; overflow: auto; padding: clamp(18px, 4vw, 56px); display: grid; place-content: safe center; justify-items: center; background: radial-gradient(circle at 50% 42%, rgba(16,69,55,.88), rgba(1,8,6,.97) 70%); text-align: center; backdrop-filter: blur(5px); }
.rank-up::before { content: ""; position: fixed; inset: clamp(10px, 2vw, 28px); border: 1px solid rgba(214,170,88,.42); box-shadow: inset 0 0 40px rgba(0,0,0,.38); pointer-events: none; }
.rank-up__panel { position: relative; width: min(620px, calc(100vw - 36px)); border: 1px solid transparent; border-radius: 8px; padding: clamp(24px, 4vh, 42px) clamp(22px, 5vw, 68px) clamp(26px, 4.5vh, 48px); background: linear-gradient(rgba(3,28,21,.97), rgba(1,13,10,.98)) padding-box, linear-gradient(145deg, #4d3216, var(--gold-bright) 26%, #765024 52%, var(--gold) 76%, #34210f) border-box; box-shadow: inset 0 0 0 5px rgba(0,0,0,.28), inset 0 1px rgba(255,233,174,.16), inset 0 -18px 35px rgba(0,0,0,.24), 0 30px 90px rgba(0,0,0,.62), 0 0 45px rgba(214,170,88,.1); animation: rank-reveal 780ms both cubic-bezier(.16,.82,.25,1); }
.rank-up__panel::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(224,184,105,.23); border-radius: 4px; box-shadow: inset 0 0 22px rgba(0,0,0,.35); pointer-events: none; }
.rank-up__panel::after { content: ""; position: absolute; inset: 3px; background: linear-gradient(90deg, var(--frame-glint), transparent) left top / 44px 1px no-repeat, linear-gradient(180deg, var(--frame-glint), transparent) left top / 1px 44px no-repeat, linear-gradient(270deg, var(--frame-glint), transparent) right top / 44px 1px no-repeat, linear-gradient(180deg, var(--frame-glint), transparent) right top / 1px 44px no-repeat, linear-gradient(90deg, var(--frame-glint), transparent) left bottom / 44px 1px no-repeat, linear-gradient(0deg, var(--frame-glint), transparent) left bottom / 1px 44px no-repeat, linear-gradient(270deg, var(--frame-glint), transparent) right bottom / 44px 1px no-repeat, linear-gradient(0deg, var(--frame-glint), transparent) right bottom / 1px 44px no-repeat; pointer-events: none; }
.rank-up__panel > * { position: relative; z-index: 1; }
.rank-up__emblem-stage { width: clamp(148px, 21vh, 220px); aspect-ratio: 1; margin: 0 auto clamp(8px, 1.5vh, 16px); display: grid; place-items: center; }
.rank-up__emblem-stage::before { content: ""; position: absolute; inset: 7%; border: 1px solid rgba(241,210,138,.36); border-radius: 50%; background: radial-gradient(circle, rgba(241,210,138,.16), transparent 67%); box-shadow: 0 0 36px rgba(214,170,88,.2), inset 0 0 28px rgba(214,170,88,.1); animation: rank-halo 1.2s 300ms both ease-out; }
.rank-up__emblem-stage img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,.55)); }
.rank-up .rank-up__eyebrow { margin: 0 0 clamp(7px, 1.2vh, 12px); color: var(--gold); font-family: var(--font-display); font-size: clamp(.66rem, 1.1vw, .82rem); font-weight: 600; letter-spacing: .34em; text-indent: .34em; }
.rank-up h2 { margin: 0; }
.rank-up h2 strong { display: block; color: var(--cream); font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 600; letter-spacing: .09em; line-height: 1; text-shadow: 0 3px 10px #000, 0 0 24px rgba(241,210,138,.15); }
.rank-up h2 span { display: block; margin-top: 8px; color: var(--gold-bright); font-family: var(--font-jp); font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 500; letter-spacing: .1em; line-height: 1.5; }
.rank-up .rank-up__description { margin: clamp(10px, 1.8vh, 18px) 0 0; color: #cbd7d0; font-size: clamp(.72rem, 1.2vw, .88rem); font-weight: 500; letter-spacing: .12em; }
.rank-up button { min-width: clamp(220px, 55%, 300px); margin-top: clamp(20px, 3.3vh, 34px); border: 1px solid var(--gold-bright); border-radius: 3px; background: linear-gradient(#e3bd6e, #b88535); padding: 13px 26px 11px; color: #142019; font-family: var(--font-display); font-size: clamp(.92rem, 1.5vw, 1.16rem); font-weight: 700; letter-spacing: .16em; cursor: pointer; box-shadow: inset 0 1px rgba(255,248,215,.58), inset 0 -5px 10px rgba(91,54,13,.2), 0 5px 0 #684617, 0 12px 24px rgba(0,0,0,.36); }
.rank-up button:active { translate: 0 2px; box-shadow: inset 0 1px rgba(255,248,215,.45), inset 0 -3px 8px rgba(91,54,13,.18), 0 3px 0 #684617, 0 8px 18px rgba(0,0,0,.32); }

button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
noscript { position: fixed; z-index: 100; inset: auto 0 0; background: #9d2f2f; padding: 12px; text-align: center; }
@keyframes deal-in { from { opacity: 0; transform: translateY(-15px) rotate(-2deg); } }
@keyframes rank-reveal { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rank-halo { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 767px) {
  .session-gate { padding-top: 24vh; display: flex; flex-direction: column; align-items: center; background-image: url("../assets/intro-bg-sp.webp"); background-position: center; }
  .intro-logo { position: static; width: min(80vw, 620px); max-width: none; transform: none; }
  .intro-actions { position: static; width: min(62vw, 360px); margin-top: clamp(18px, 2.5vh, 24px); gap: clamp(9px, 1.5vh, 13px); transform: none; }
  .intro-start { width: 100%; font-size: clamp(.9rem, 4vw, 1.3rem); }
  .intro-audio-notice { width: max-content; max-width: 88vw; padding: 6px 14px 7px; font-size: clamp(.64rem, 2.8vw, .78rem); }
}

@media (max-width: 900px) {
  :root { --card-width: min(18.5vw, 78px); }
  body { overflow-y: auto; }
  .app { height: auto; min-height: 100dvh; padding: 7px; grid-template-rows: auto auto auto auto; }
  .hud, .layout, .table, .mobile-info { width: 100%; min-width: 0; max-width: 100%; }
  .hud { grid-template-columns: minmax(112px, .85fr) minmax(0, 2fr); gap: 6px; padding: 5px; }
  .brand { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .brand p { display: none; }
  .brand h1 { font-size: 1.55rem; }
  .brand > span { display: none; }
  .rank-display { grid-column: 1; grid-row: 2; grid-template-columns: 36px minmax(0, 1fr); gap: 4px; padding-right: 5px; border-right: 1px solid var(--line); }
  .rank-display img { max-height: 48px; }
  .rank-name-row { gap: 3px; }
  .rank-display strong { font-size: .56rem; }
  .rank-display span { font-size: .52rem; }
  .rank-display progress, .rank-display small { display: none; }
  .stats { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); border: 0; padding-top: 0; }
  .stats > div:nth-child(n) { grid-column: auto; grid-row: auto; }
  .stats > div { border: 0; padding: 0 6px; background: none; box-shadow: none; text-align: center; }
  .stats > div:first-child { border-left: 0; }
  .stats > div > img { display: none; }
  .stats dd { font-size: .92rem; }
  .audio-control { grid-column: 1 / -1; grid-row: 3; grid-template-columns: 1fr auto; border-top: 1px solid var(--line); padding-top: 5px; }
  .layout { display: block; }
  .priestess-panel { display: none; }
  .side-panel { display: none; }
  .table { height: clamp(440px, calc(100dvh - 380px), 560px); min-height: 0; border-radius: 20px; padding: 12px 7px; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); }
  .hand-zone { display: grid; grid-template-columns: 1fr; gap: 6px; padding-left: 0; }
  .hand-label { position: static; width: auto; }
  .dealer-zone .hand-label, .dealer-zone .cards, .player-zone .cards, .player-zone .hand-label { grid-column: 1; justify-self: center; text-align: center; }
  .dealer-zone .hand-label { grid-row: 1; }
  .dealer-zone .cards { grid-row: 2; }
  .player-zone .cards { grid-row: 1; }
  .player-zone .hand-label { grid-row: 2; }
  .cards { gap: 0; }
  .card + .card { margin-left: -1vw; }
  .card.selected { z-index: 3; }
  .hand-label h2 { font-size: 1.25rem; }
  .center-status { min-width: 88%; padding: 5px; }
  .message { font-size: 1.25rem; }
  .action-dock { width: 100%; min-height: 0; padding: 8px; flex-direction: column; gap: 7px; translate: none; }
  .bet-panel { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 5px; }
  .bet-options { justify-content: center; }
  .bet-options button { min-width: 0; flex: 1; max-width: 58px; padding: 8px 5px; }
  .primary-button, .primary-button.next-hand, .reload-button { width: min(310px, 86vw); }
  .mobile-info { display: block; border: 1px solid var(--line); margin-top: 8px; background: rgba(2,16,12,.8); }
  .mobile-info summary { padding: 10px; color: var(--gold); font-family: var(--font-display); font-size: .62rem; font-weight: 600; letter-spacing: .1em; cursor: pointer; text-align: center; }
  #mobile-info-content { border-top: 1px solid var(--line); padding: 10px; color: var(--muted); font-size: .58rem; line-height: 1.6; }
  #mobile-info-content p { margin: 3px 0; }
  .mobile-payouts { color: #c9d4ce; }
  .rank-up { padding: 18px; }
  .rank-up::before { inset: 9px; }
  .rank-up__panel { padding-top: 22px; padding-bottom: 28px; }
  .rank-up__emblem-stage { width: min(34vw, 150px); }
}

@media (max-width: 480px) and (orientation: portrait) {
  .hud { grid-template-columns: minmax(138px, 1.15fr) minmax(0, 1.7fr); grid-template-rows: auto auto; }
  .hud-top { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "brand audio"; align-items: center; column-gap: 6px; min-width: 0; }
  .brand { grid-area: brand; width: max-content; max-width: 100%; justify-self: start; margin-right: 0; text-align: right; transform: none; }
  .brand h1 { font-size: 1rem; text-align: right; }
  .rank-display { grid-column: 1; grid-row: 2; grid-template-columns: 32px minmax(0, 1fr); gap: 4px; }
  .rank-display img { width: 32px; }
  .rank-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "label ja" "name name" "progress progress" "mobile-progress mobile-progress"; align-items: baseline; column-gap: 4px; }
  .rank-copy > p { grid-area: label; line-height: 1; }
  .rank-name-row { display: contents; }
  .rank-name-row strong { grid-area: name; overflow: visible; font-size: .58rem; line-height: 1.2; text-overflow: clip; }
  .rank-name-row .jp { grid-area: ja; justify-self: start; font-size: .48rem; line-height: 1; }
  .rank-display progress { grid-area: progress; display: block; height: 5px; margin: 3px 0 2px; }
  #rank-next { display: none; }
  #rank-progress-mobile { grid-area: mobile-progress; display: block; color: var(--muted); font-size: .42rem; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: .04em; text-overflow: clip; white-space: nowrap; }
  .stats { grid-column: 2; grid-row: 2; width: 100%; grid-template-columns: minmax(48px, .8fr) minmax(64px, 1.05fr) minmax(76px, 1.25fr); }
  .stats > div { width: 100%; justify-content: center; padding-inline: 2px; }
  .stats > div > span { width: 100%; }
  .stats dt { min-height: 1.2em; overflow: visible; font-size: .5rem; line-height: 1.2; letter-spacing: .07em; text-overflow: clip; white-space: nowrap; }
  .stats dd { min-height: 1em; font-size: .88rem; line-height: 1; }
  .audio-control { grid-area: audio; width: 100%; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 1fr; column-gap: 8px; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
  .audio-control > div { display: contents; }
  .audio-control > div > span { grid-column: 1; grid-row: 1; font-size: 1.15rem; }
  .audio-control p { display: none; }
  .audio-control input { grid-column: 2; grid-row: 1; margin-top: 0; }
  .audio-control button { grid-column: 3; grid-row: 1; }
  .center-status { min-height: clamp(70px, 9dvh, 82px); }
  .center-status[data-outcome] .result-banner { position: static; width: 100%; height: auto; aspect-ratio: auto; transform: none; background: none; opacity: 1; }
  .center-status[data-outcome] .result-banner__text { position: static; width: 100%; padding-inline: 4px; transform: none; }
  .center-status[data-outcome] .message { margin-bottom: 4px; font-size: 1.1rem; }
  .center-status[data-outcome] .sub-message { font-size: .5rem; }
  .cards { padding-bottom: 22px; }
  .card-meta { position: absolute; top: calc(100% + 3px); left: 50%; display: block; width: 100%; transform: translateX(-50%); color: var(--cream); font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.1; letter-spacing: .04em; text-align: center; text-shadow: 0 1px 3px #000; white-space: nowrap; pointer-events: none; }
  .card-meta[data-suit="dia"], .card-meta[data-suit="heart"] { color: #f2a19d; }
  .bet-panel { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 4px; row-gap: 2px; padding-inline: 6px; }
  .bet-panel > span { grid-column: 1; grid-row: 1; min-width: 0; align-self: end; font-size: clamp(.56rem, 2.4vw, .6rem); line-height: 1.15; white-space: nowrap; }
  .bet-panel > span small { margin-top: 3px; font-size: clamp(.38rem, 1.5vw, .4rem); white-space: nowrap; }
  .bet-options { grid-column: 2; grid-row: 1 / 3; width: 100%; }
  .bet-panel p { grid-column: 1; grid-row: 2; align-self: start; display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: .48rem; line-height: 1.1; }
  .bet-panel p strong { min-width: 2.5ch; font-size: .7rem; font-variant-numeric: tabular-nums; text-align: left; }
}

@media (max-width: 350px) and (orientation: portrait) {
  .hud { grid-template-columns: minmax(120px, .9fr) minmax(0, 1.6fr); }
  .rank-display { grid-template-columns: 28px minmax(0, 1fr); gap: 3px; }
  .rank-display img { width: 28px; }
  .stats { grid-template-columns: minmax(42px, .8fr) minmax(56px, 1.05fr) minmax(66px, 1.25fr); }
  .stats dt { font-size: .46rem; letter-spacing: .04em; }
  .stats dd { font-size: .82rem; }
  .table { height: clamp(399px, calc(100dvh - 351px), 440px); }
  .bet-panel { grid-template-columns: 78px minmax(0, 1fr); }
  .bet-panel > span { font-size: .54rem; }
}

@media (max-width: 374px) {
  .small-viewport-warning { position: fixed; z-index: 60; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); left: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid rgba(241,210,138,.66); border-radius: 5px; background: rgba(0,0,0,.9); padding: 10px 10px 10px 12px; color: var(--cream); box-shadow: 0 10px 28px rgba(0,0,0,.55); }
  .small-viewport-warning p { margin: 0; font-size: .68rem; line-height: 1.65; letter-spacing: .03em; }
  .small-viewport-warning button { min-width: 88px; border: 1px solid var(--gold); border-radius: 3px; background: linear-gradient(#d7af60, #a97831); padding: 8px 7px; color: #102019; font-family: var(--font-jp); font-size: .68rem; font-weight: 700; cursor: pointer; }
}

@media (min-width: 901px) and (max-width: 1199px) {
  :root { --card-width: clamp(96px, min(10.5vw, 16vh), 120px); }
  .hud { grid-template-columns: 16fr 10fr 30fr 10fr 10fr 18fr; }
  .layout { grid-template-columns: minmax(0, 1fr) 240px; }
  .priestess-panel { display: none; }
  .action-dock { padding-left: 0; padding-right: 240px; }
}

@media (min-width: 901px) {
  .app { padding-inline: clamp(6px, .55vw, 10px); }
  #rank-next { min-height: 1.2em; font-size: .7rem; font-variant-numeric: tabular-nums; }
  .center-status { height: clamp(92px, 13vh, 145px); }
  .message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .primary-button, .primary-button.next-hand, .reload-button { width: clamp(300px, 26vw, 460px); }
}

@media (min-width: 1200px) and (min-height: 701px) {
  :root { --card-width: clamp(112px, min(8.2vw, 16vh), 320px); }
  .hand-zone { --label-space: clamp(100px, 7vw, 145px); }
  .cards { gap: clamp(4px, .45vw, 9px); }
}

@media (min-width: 1200px) and (max-width: 1400px) {
  .layout { grid-template-columns: 185px minmax(0, 1fr) 240px; gap: 6px; }
  .hand-zone { --label-space: 72px; }
  .cards { gap: 3px; }
  .action-dock { padding-left: 155px; padding-right: 205px; }
}

@media (max-height: 700px) and (orientation: landscape) and (min-width: 901px) {
  :root { --card-width: clamp(72px, min(7.2vw, 15vh), 104px); }
  .app { padding-block: 7px; }
  .hud { min-height: 52px; padding-block: 5px; }
  .table { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
  .dealer-zone, .player-zone { display: flex; padding-left: var(--label-space); }
  .hand-label { position: absolute; width: calc(var(--label-space) - 8px); text-align: right; }
  .center-status { min-width: 0; padding-inline: 6px; }
  .action-dock { grid-column: 1 / -1; }
  .side-panel > section { padding-block: 8px; }
}

@media (min-width: 1100px) {
  .action-dock { height: clamp(124px, 14.9vh, 162px); min-height: clamp(124px, 14.9vh, 162px); padding: clamp(12px, 1.5vh, 18px) clamp(10px, 1.2vw, 24px); gap: clamp(12px, 1.35vw, 26px); translate: 0 -1vh; }
  .bet-panel { min-width: 0; gap: clamp(8px, .7vw, 14px); }
  .bet-panel > span { flex: 0 0 clamp(145px, 9.7vw, 185px); min-width: 0; font-family: var(--font-display); font-size: clamp(.9rem, 1.05vw, 1.15rem); font-weight: 600; line-height: 1.05; letter-spacing: .11em; }
  .bet-panel > span small { margin-top: 7px; font-family: var(--font-ui); font-size: clamp(.55rem, .62vw, .68rem); font-weight: 600; line-height: 1.1; letter-spacing: .16em; }
  .bet-options { gap: clamp(5px, .45vw, 10px); }
  .bet-options button { display: grid; place-content: center; width: clamp(90px, calc(29px + 5.55vw), 112px); min-width: 0; height: clamp(70px, 7.4vh, 80px); min-height: 0; padding: 8px 6px; font-family: var(--font-ui); font-size: clamp(1.22rem, 1.45vw, 1.65rem); font-weight: 700; line-height: .9; letter-spacing: .03em; }
  .bet-options button::before { content: "BET"; display: block; margin-bottom: 6px; color: var(--gold); font-family: var(--font-display); font-size: clamp(.5rem, .52vw, .62rem); font-weight: 600; line-height: 1; letter-spacing: .2em; }
  .bet-options button.active::before { color: #183024; }
  .bet-panel p { flex: 0 0 clamp(82px, 6vw, 116px); display: grid; justify-items: center; color: var(--muted); font-family: var(--font-display); font-size: clamp(.58rem, .62vw, .7rem); font-weight: 600; line-height: 1.1; letter-spacing: .13em; text-align: center; white-space: normal; }
  .bet-panel p strong { display: block; margin-top: 7px; color: var(--gold-bright); font-family: var(--font-ui); font-size: clamp(1.25rem, 1.45vw, 1.72rem); font-weight: 700; line-height: .9; letter-spacing: .03em; }
}

@media (min-width: 1200px) and (max-width: 1599px),
       (min-width: 901px) and (max-width: 1199px) and (orientation: landscape) {
  .hud { grid-template-columns: 18fr 10fr 32fr 10fr 11fr 19fr; }
  .brand h1 { font-size: clamp(1.75rem, 3vw, 3rem); }
  .brand h1, .rank-name-row, .stats dt, .stats dd { white-space: nowrap; }
  .stats > div { padding-inline: clamp(4px, .6vw, 9px); }
  .stats dt { font-size: clamp(.5rem, .58vw, .6rem); letter-spacing: .11em; }
  .audio-control { grid-template-columns: auto minmax(54px, 1fr) 64px; grid-template-rows: 1fr; column-gap: 7px; padding: 6px 7px; }
  .audio-control > div { display: contents; }
  .audio-control > div > span { grid-column: 1; grid-row: 1; font-size: 1.15rem; }
  .audio-control p { display: none; }
  .audio-control input { grid-column: 2; grid-row: 1; min-width: 0; margin-top: 0; }
  .audio-control button { grid-column: 3; grid-row: 1; inline-size: 64px; min-inline-size: 64px; }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  /* Compact desktop/tablet only; full desktop keeps the reference composition. */
  .layout { grid-template-columns: clamp(172px, calc(19.1vw - 87px), 280px) minmax(0, 1fr) clamp(235px, 16vw, 310px); }
}

@media (min-width: 901px) and (max-width: 1199px) and (orientation: landscape) {
  .center-status { height: clamp(76px, 10vh, 88px); min-height: clamp(76px, 10vh, 88px); padding: 6px 12px; }
  .center-status[data-outcome] .result-banner { position: static; width: 100%; height: auto; aspect-ratio: auto; transform: none; background: none; opacity: 1; }
  .center-status[data-outcome] .result-banner__text { position: static; width: 100%; padding-inline: 4px; transform: none; }
  .center-status[data-outcome] .message { margin-bottom: 4px; font-size: 1.2rem; }
  .center-status[data-outcome] .sub-message { font-size: .55rem; }
  .cards { padding-bottom: 22px; }
  .card-meta { position: absolute; top: calc(100% + 3px); left: 50%; display: block; width: 100%; transform: translateX(-50%); color: var(--cream); font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.1; letter-spacing: .04em; text-align: center; text-shadow: 0 1px 3px #000; white-space: nowrap; pointer-events: none; }
  .card-meta[data-suit="dia"], .card-meta[data-suit="heart"] { color: #f2a19d; }
  .action-dock { height: clamp(88px, 12vh, 104px); min-height: clamp(88px, 12vh, 104px); padding: 8px 12px; justify-content: center; gap: 10px; translate: none; }
  .bet-panel { flex: 0 1 auto; min-width: 0; gap: 5px; }
  .bet-panel > span { flex: 0 0 82px; min-width: 0; font-size: .7rem; line-height: 1.1; }
  .bet-panel > span small { margin-top: 4px; font-size: .44rem; line-height: 1.1; }
  .bet-options { gap: 4px; }
  .bet-options button { width: clamp(50px, 5.4vw, 58px); min-width: 0; height: 56px; min-height: 0; padding: 6px 4px; font-size: .9rem; }
  .bet-options button::before { content: none; }
  .bet-panel p { flex: 0 0 68px; display: block; font-size: .5rem; line-height: 1.1; text-align: center; white-space: normal; }
  .bet-panel p strong { display: block; margin-top: 4px; font-size: .9rem; line-height: 1; }
  .primary-button, .primary-button.next-hand, .reload-button { width: clamp(250px, 28vw, 285px); }
}

@media (min-width: 1200px) and (max-width: 1599px) and (min-height: 701px) {
  /* Scale from both axes: large 4:3 tablets gain presence without overflowing shorter desktops. */
  :root { --card-width: clamp(118px, min(11.65vw, 16.2vh), 160px); }
  .hand-zone { --label-space: clamp(72px, 5.8vw, 96px); }
  .hand-label { translate: 0; }
  .hand-label h2 { font-size: clamp(1.15rem, 1.45vw, 1.5rem); letter-spacing: .09em; }
  .hand-label p { font-size: clamp(.56rem, .68vw, .64rem); letter-spacing: .06em; }
  .cards { gap: clamp(3px, .32vw, 5px); }
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .intro-start:not(:disabled):hover { filter: brightness(1.08); transform: scale(1.015); }
  .table, .player-zone, #player-cards { overflow: visible; }
  #player-cards .card-button.is-loaded { position: relative; z-index: 1; transform: translate3d(0, 0, 0) scale(1); transform-origin: center center; transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease; backface-visibility: hidden; }
  #player-cards .card-button.is-loaded:hover { z-index: 30; transform: translate3d(0, -8px, 0) scale(1.15); box-shadow: 0 14px 28px rgba(0,0,0,.45); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}