:root {
  color-scheme: dark;
  --bg: #100a24; --panel: #1c1239; --line: #443060; --text: #fbf6ff;
  --muted: #b4a4ce; --cyan: #48dfff; --pink: #ff52c6; --purple: #9e6bff;
  --yellow: #ffcf55; --mono: Consolas, 'SFMono-Regular', monospace;
  --sans: 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--text); font: 14px var(--sans); overflow-x: hidden; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: var(--text); }
button:disabled { cursor: not-allowed; opacity: .43; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
[hidden] { display: none !important; }
.arcade-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at 8% 25%, #15376f66, transparent 45%), radial-gradient(ellipse at 90% 20%, #6a167c55, transparent 45%), radial-gradient(ellipse at 50% 110%, #47278099, transparent 65%), #100a24; }
.arcade-backdrop::after { content: ''; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(#dacbff 1px, transparent 1px); background-size: 27px 27px; mask-image: linear-gradient(transparent, black); }
.floating-piece { position: absolute; display: grid; grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(2, 26px); gap: 3px; opacity: .28; transform: rotate(-14deg); filter: drop-shadow(0 0 20px currentColor); animation: float 10s ease-in-out infinite; }
.floating-piece i { display: block; border: 2px solid currentColor; background: currentColor; opacity: .5; border-radius: 4px; box-shadow: inset 0 3px #ffffff44, inset 0 -4px #0004; }
.piece-t { left: -15px; top: 150px; color: var(--cyan); }
.piece-t i:first-child { grid-column: 2; }.piece-t i:nth-child(2) { grid-column: 1; }
.piece-l { right: -13px; top: 280px; color: var(--pink); animation-delay: -3s; transform: rotate(18deg); }
.piece-l i:first-child { grid-column: 3; }.piece-l i:nth-child(2) { grid-column: 1; }
.piece-s { bottom: 5%; left: 25%; color: var(--purple); opacity: .13; animation-delay: -6s; }
.piece-s i:first-child { grid-column: 2; }.piece-s i:nth-child(3) { grid-column: 1; }
.orbit { position: absolute; width: 700px; height: 700px; border: 1px solid #a170ff16; border-radius: 50%; transform: rotate(-20deg) scaleY(.5); }
.orbit-one { left: -200px; top: 200px; }.orbit-two { right: -300px; top: -200px; }
.topbar { height: 64px; padding: 0 max(4vw, calc((100vw - 1320px)/2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #725c9c33; background: #0c081cc2; }
.brand { display: flex; align-items: center; gap: 13px; font-size: 15px; font-weight: 900; letter-spacing: 1.8px; }
.brand b { font-weight: 500; color: #c4ace6; font-size: 11px; margin-left: 8px; letter-spacing: 2px; }
.brand-icon { display: grid; grid-template-columns: repeat(3, 9px); grid-template-rows: repeat(2, 9px); gap: 2px; transform: rotate(-8deg); }
.brand-icon i { border-radius: 2px; background: var(--purple); box-shadow: inset 0 1px #fff8; }.brand-icon i:first-child { grid-column: 2; background: var(--pink); }.brand-icon i:nth-child(2) { grid-column: 1; background: var(--cyan); }.brand-icon i:last-child { background: var(--yellow); }
.top-right { display: flex; align-items: center; gap: 19px; }
.host-status { display: flex; gap: 8px; align-items: center; font-size: 11px; color: #c5b6dc; }
.host-status i { width: 6px; height: 6px; border-radius: 50%; background: #bd90e8; }
.host-status i.ready { background: #70ffaf; box-shadow: 0 0 12px #70ffafaa; }
.text-button { border: 0; background: none; padding: 10px 2px; font-size: 12px; font-weight: 600; color: #d6c7eb; }
.text-button:hover { color: #fff; }
.icon-button { border: 1px solid #5c447a; border-radius: 8px; background: #281942; font-size: 17px; padding: 6px 10px; }
.icon-button span { font-size: 10px; vertical-align: 2px; margin-left: 5px; }.icon-button[aria-pressed=true] { border-color: var(--cyan); color: var(--cyan); }
main { max-width: 1320px; margin: auto; padding: 25px 4vw 0; }
.intro { display: flex; justify-content: space-between; align-items: center; margin: 0 0 22px; gap: 16px; }
.eyebrow { font: 9px var(--mono); letter-spacing: 2.6px; color: #c9b3ef; }
h1 { font: italic 900 clamp(36px, 4vw, 55px)/1.06 'Arial Black', 'Segoe UI', sans-serif; letter-spacing: -2.6px; margin: 7px 0 7px; white-space: nowrap; text-shadow: 0 4px #080414, 0 7px 20px #0006; }
.rainbow-word { display: inline-flex; gap: 1px; }.rainbow-word i { font-style: inherit; color: var(--cyan); -webkit-text-stroke: .5px #ffffff55; }.rainbow-word i:nth-child(1) { color: #ff5a94; }.rainbow-word i:nth-child(2) { color: #ffac46; }.rainbow-word i:nth-child(3) { color: #ffe567; }.rainbow-word i:nth-child(4) { color: #67efa7; }.rainbow-word i:nth-child(5) { color: #52d4ff; }
h1 em { font-style: inherit; color: #eee3ff; -webkit-text-stroke: .6px #ffffff99; }
.intro p { color: #a99ac2; font-size: 12px; margin: 0; }.intro p strong { color: #d1c2e9; font-weight: 500; }
.round-readout { display: grid; gap: 5px; text-align: center; padding: 11px 19px; background: #26163c80; border: 1px solid #66417b80; border-radius: 12px; min-width: 143px; box-shadow: inset 0 1px #ffffff0b; }
.round-readout span { font: 8px var(--mono); letter-spacing: 1px; color: #cdb6e2; }.round-readout strong { font: 800 28px/1.1 var(--mono); color: #ffde80; text-shadow: 0 0 20px #ffc25b33; }.round-readout span:last-child { font-size: 8px; color: #a28bb9; letter-spacing: 0; }
.arena-layout { display: grid; grid-template-columns: minmax(0,1fr) 284px; gap: 24px; align-items: start; }
.play-area { min-width: 0; background: linear-gradient(155deg,#27204cbb,#170f2ed9 60%); border: 1px solid #69558775; border-radius: 20px; box-shadow: 0 20px 60px #06021366, inset 0 1px #ffffff15; position: relative; overflow: hidden; }
.arena-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #71589344; font: 9px var(--mono); color: #cbb6e7; letter-spacing: 1px; background: #4f376226; }
.signal { display: inline-block; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; margin-right: 7px; box-shadow: 0 0 9px #48dfff66; }
.boards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 34px; padding: 18px 27px 15px; position: relative; max-width: 650px; margin: auto; }
.boards::after { content: 'VS'; position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%) rotate(-8deg); font: italic 900 25px 'Arial Black',sans-serif; color: #f4d4ff; text-shadow: 0 0 25px #ff47edaa; pointer-events: none; }
.board-card { --player-color: var(--cyan); --player-rgb: 72,223,255; width: min(100%,clamp(170px,calc((100svh - 348px)/2),252px)); margin: 0 auto; min-width: 0; position: relative; }
.board-card.ai { --player-color: var(--pink); --player-rgb: 255,82,198; }
.board-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 1px 10px; }
.player-identity { display: flex; align-items: center; gap: 8px; min-width: 0; }.player-avatar { width: 31px; height: 31px; border-radius: 9px; background: rgba(var(--player-rgb),.12); border: 1px solid rgba(var(--player-rgb),.38); color: var(--player-color); display: grid; place-items: center; flex-shrink: 0; }.player-avatar svg { width: 21px; height: 21px; }
.player-name { font-size: 12px; font-weight: 900; letter-spacing: .6px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.player-kicker { font: 7px var(--mono); color: #ac9bc5; letter-spacing: 1px; display: block; margin-top: 3px; }
.player-tag { color: var(--player-color); background: rgba(var(--player-rgb),.09); border: 1px solid rgba(var(--player-rgb),.26); border-radius: 5px; font: 7px var(--mono); padding: 4px 5px; letter-spacing: .5px; }
.board-frame { border: 2px solid rgba(var(--player-rgb),.75); border-radius: 8px; background: #070b22; position: relative; line-height: 0; padding: 4px; box-shadow: 0 0 0 4px rgba(var(--player-rgb),.07),0 0 28px rgba(var(--player-rgb),.09),inset 0 0 20px #0008; }
.board-frame::before { content: ''; position: absolute; width: 45%; height: 2px; background: white; opacity: .6; top: -2px; left: 27%; box-shadow: 0 0 12px var(--player-color); }
.board-frame canvas { width: 100%; display: block; aspect-ratio: 1/2; border-radius: 3px; }
.board-cover { position: absolute; inset: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; line-height: 1.3; text-align: center; background: linear-gradient(transparent,#0d0a28d9 30%,#0d0a28dd 65%,transparent); padding: 12px; }
.board-cover strong { font-size: 20px; font-weight: 800; max-width: 170px; letter-spacing: -.7px; text-shadow: 0 2px 8px #000; }.board-cover>span:last-child { font: 8px/1.8 var(--mono); color: #c6b6df; letter-spacing: .5px; max-width: 170px; }.cover-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(var(--player-rgb),.5); border-radius: 16px; background: rgba(var(--player-rgb),.1); box-shadow: 0 0 30px rgba(var(--player-rgb),.15); color: var(--player-color); font-size: 30px; transform: rotate(-7deg); }.cover-icon svg { width: 34px; height: 34px; transform: rotate(7deg); }
.next-row { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 31px; font: 7px var(--mono); color: #b5a1ce; letter-spacing: 1px; border-bottom: 1px solid #6f568344; margin-top: 6px; }.next-row canvas { width: 89px; height: 30px; }
.board-metrics { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 6px; padding-top: 9px; }.board-metrics>div:first-child { border-right: 1px solid #6f568344; }.board-metrics span { display: block; font: 7px var(--mono); color: #ad96c6; letter-spacing: 1px; margin-bottom: 4px; }.board-metrics strong { font: 800 22px/1.1 var(--mono); color: #fff; }.board-metrics>div:first-child strong { color: var(--player-color); text-shadow: 0 0 15px rgba(var(--player-rgb),.22); }
.player-status { display: flex; justify-content: space-between; gap: 4px; color: #b6a2cb; font-size: 8px; height: 18px; margin-top: 9px; }.player-status span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.player-status b { color: var(--player-color); font: 8px var(--mono); white-space: nowrap; }
.game-toolbar { display: flex; align-items: center; gap: 15px; padding: 14px 24px; background: #0c081e50; border-bottom: 1px solid #71589344; }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg,#ffdf65,#ffb939); border: 1px solid #ffe995; border-bottom: 3px solid #c77a13; color: #3b1d0a; border-radius: 10px; padding: 12px 20px; min-height: 45px; font-weight: 900; font-size: 13px; box-shadow: 0 4px 0 #7b390c66,0 0 25px #ffb13416,inset 0 1px #ffffcf; transition: transform .14s,filter .14s; }
.primary:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); }.primary:active:not(:disabled) { transform: translateY(2px); }.play-triangle { font-size: 11px; }
.secondary { background: linear-gradient(#453060,#2c1c43); border: 1px solid #77578c; border-bottom-width: 3px; border-radius: 9px; padding: 11px 15px; font-size: 11px; min-height: 42px; }.secondary:hover { border-color: #b184de; }
#match-hint { margin-left: auto; color: #a998bd; font-size: 9px; line-height: 1.7; }#match-hint strong { color: #c9b8de; font-weight: 500; }
.keyboard-help { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 11px 8px; color: #9f89ba; font-size: 8px; border-top: 1px solid #71589322; }kbd { display: inline-block; background: #342248; border: 1px solid #63477b; border-bottom-width: 2px; border-radius: 4px; min-width: 17px; padding: 2px 4px; margin-right: 3px; font: 8px var(--mono); color: #d7c5ef; }
.control-deck { display: grid; gap: 16px; }
.setup-section, .decision-section { border: 1px solid #59417480; border-radius: 16px; padding: 18px; background: linear-gradient(150deg,#2b1c47b3,#1b112fa6); box-shadow: inset 0 1px #ffffff08; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 15px; }.section-heading h2 { font-size: 14px; font-weight: 750; margin: 0; letter-spacing: -.3px; }.section-icon { color: var(--yellow); font-size: 17px; margin-right: 4px; }.section-heading>span { font: 9px var(--mono); color: #bca4d6; }
.opponent-editor { padding: 11px 12px; border: 1px solid #6b458180; border-radius: 10px; background: #150c2680; margin-bottom: 9px; }
.opponent-title { display: flex; align-items: center; justify-content: space-between; font: 8px var(--mono); letter-spacing: 1px; color: #e3a6fa; margin-bottom: 9px; }.remove-opponent { border: 0; background: none; font-size: 18px; line-height: 1; padding: 0 3px; color: #d6afd9; }
.opponent-editor label, .setup-options label, dialog label { display: block; font-size: 10px; color: #b6a0ce; margin-top: 9px; }
select, input { display: block; width: 100%; min-height: 40px; border: 1px solid #6e4a8c; border-radius: 7px; background: #28193d; color: #f8efff; padding: 10px; margin-top: 6px; font-size: 11px; }select { padding-right: 4px; }input::placeholder { color: #a18ab9; }
.provider-note { color: #c0abd2; font-size: 10px; line-height: 1.65; margin: 9px 0 0; }
.add-button { width: 100%; min-height: 36px; padding: 9px 11px; border: 1px dashed #8054a3; border-radius: 8px; color: #d9baef; background: #6b3b9612; text-align: left; font-size: 10px; }.add-button:hover { background: #6b3b9630; border-color: #ba7be9; }
.setup-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 8px; }.setup-options select { font-size: 9px; padding: 7px 3px; min-height: 35px; }
.setup-footnote { color: #a18ab9; font-size: 9px; line-height: 1.6; margin: 12px 0 0; }
.consent { display: flex; align-items: flex-start; gap: 8px; font-size: 10px; line-height: 1.7; color: #ffdf94; margin-top: 13px; }.consent input { width: 16px; min-height: 16px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--yellow); }
.engine-notice { border: 1px solid #a6724266; border-radius: 8px; padding: 10px; background: #62402222; margin: 0 0 10px; }.engine-notice strong { color: #ffd89d; font-size: 10px; }.engine-notice p { color: #cbb6ce; font-size: 9px; line-height: 1.7; margin: 6px 0; }.inline-button { background: none; border: none; padding: 4px 0; font-size: 10px; font-weight: 700; color: #ffdf88; }
.tag { color: #83f3d9 !important; background: #369b8626; border: 1px solid #5ad1b84a; border-radius: 5px; padding: 3px 5px; font-size: 7px !important; letter-spacing: .5px; }
.decision-summary { font-size: 15px; font-weight: 600; letter-spacing: -.3px; line-height: 1.4; margin-bottom: 12px; }.decision-log { display: grid; gap: 8px; max-height: 160px; overflow-y: auto; }.empty-log { font-size: 10px; color: #ac96c3; line-height: 1.8; margin: 0; }.decision-entry { border-left: 2px solid var(--pink); padding: 7px 8px; background: #b252d00d; border-radius: 0 5px 5px 0; font: 9px/1.6 var(--mono); }.decision-entry small { display: block; color: #b9a0cd; font: 8px/1.7 var(--mono); margin-top: 2px; }
.method { border-top: 1px solid #6f4e8b55; padding-top: 13px; margin-top: 16px; }.method summary { cursor: pointer; display: flex; justify-content: space-between; list-style: none; font-size: 10px; color: #ceafe6; }.method p { font-size: 10px; line-height: 1.8; color: #b39cc7; }
footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 21px 0; font: 7px var(--mono); letter-spacing: 1px; color: #9780b0; }footer a { color: #c5ace2; }.footer-divider { margin: 0 10px; color: #634e80; }
.touch-controls { display: none; gap: 7px; padding: 0 15px 15px; }.touch-controls button { min-height: 46px; flex: 1; background: linear-gradient(#49376b,#2d2048); border: 1px solid #7d61a1; border-bottom-width: 3px; border-radius: 10px; font-size: 20px; color: #e7d3ff; touch-action: manipulation; user-select: none; }.touch-controls .drop-button { flex: 1.6; color: #1a3150; background: linear-gradient(#84edff,#39bce8); border-color: #a2f4ff; border-bottom-color: #2780a9; font-size: 12px; font-weight: 800; }
.announcement { padding: 11px 15px; margin-bottom: 15px; border: 1px solid #8170b180; border-radius: 10px; background: #332451; color: #ebdcff; font-size: 12px; line-height: 1.65; }.announcement.error { border-color: #d77a8180; background: #40243a; color: #ffcad0; }
.multi .boards { max-width: none; gap: 18px; padding-left: 18px; padding-right: 18px; }.multi .boards::after { display: none; }.multi .board-card { width: 100%; max-width: 230px; }.multi .player-tag { display: none; }
.board-feedback { position: absolute; left: -10%; right: -10%; top: 42%; pointer-events: none; text-align: center; line-height: 1.3; color: #fff7aa; text-shadow: 0 3px #653080,0 0 20px #ff7cec; z-index: 3; font: italic 900 23px 'Arial Black',sans-serif; opacity: 0; transform: scale(.8) rotate(-6deg); }.board-feedback small { display: block; font: 800 11px var(--sans); color: #fff; margin-top: 6px; }.board-feedback.show { animation: score-pop 950ms ease-out forwards; }.drop-impact .board-frame { animation: impact 160ms ease-out; }.line-burst .board-frame { animation: clear-flash 650ms ease-out; }.winner .board-frame { border-color: var(--yellow); box-shadow: 0 0 45px #ffca4544; }
dialog { width: min(450px,calc(100vw - 28px)); color: #f5eaff; background: linear-gradient(150deg,#30204d,#1a102f); padding: 31px; border: 1px solid #a56ec7; border-radius: 18px; box-shadow: 0 25px 100px #000b,0 0 60px #bd5cff22; }dialog::backdrop { background: #080319c4; backdrop-filter: blur(6px); }dialog h2 { font-size: 26px; letter-spacing: -.6px; margin: 14px 0; }dialog p { font-size: 12px; line-height: 1.8; color: #c5b0d8; }dialog .primary { width: 100%; margin-top: 18px; }.dialog-close { position: absolute; right: 13px; top: 10px; font-size: 25px; color: #ceb2e6; background: none; border: none; }#local-code { display: block; overflow-wrap: anywhere; font: 12px var(--mono); padding: 12px; margin-top: 12px; background: #10091f; border-radius: 8px; color: var(--cyan); user-select: all; }#connect-message { color: #8df1d1; }.connection-path { display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1px solid #82609e66; border-radius: 8px; padding: 12px 9px; font-size: 10px; color: var(--cyan); }.connection-path b { color: #a27cbb; }.connection-help { font-size: 10px !important; }
@keyframes float { 0%,100% { translate: 0 0; }50% { translate: 0 -16px; } }
@keyframes impact { 0%,100% { transform: translateY(0); }45% { transform: translateY(3px); } }
@keyframes clear-flash { 0% { box-shadow: 0 0 45px #fff9,inset 0 0 45px #fff5; }100% { box-shadow: 0 0 22px rgba(var(--player-rgb),.1); } }
@keyframes score-pop { 0% { opacity: 0; transform: scale(.6) rotate(-6deg); }18% { opacity: 1; transform: scale(1.08) rotate(-6deg); }30%,75% { opacity: 1; transform: scale(1) rotate(-6deg); }100% { opacity: 0; transform: translateY(-20px) scale(.95) rotate(-6deg); } }
@media(min-width:1000px) { [data-players='3'] .boards { grid-template-columns: repeat(3,minmax(0,1fr)); }[data-players='4'] .boards { grid-template-columns: repeat(4,minmax(0,1fr)); }[data-players='4'] .player-avatar { display: none; }[data-players='4'] .board-metrics strong { font-size: 17px; } }
@media(max-width:1100px) { .arena-layout { grid-template-columns: minmax(0,1fr) 265px; gap: 19px; }main { padding-left: 3vw; padding-right: 3vw; }.boards { padding-left: 19px; padding-right: 19px; gap: 28px; }.setup-section,.decision-section { padding: 15px; }.topbar { padding: 0 3vw; }#match-hint { display: none; }.game-toolbar { justify-content: center; } }
@media(max-width:760px) { .topbar { height: 57px; padding: 0 16px; }.brand { font-size: 13px; gap: 9px; letter-spacing: 1.3px; }.brand b { display: none; }.top-right { gap: 11px; }.host-status { font-size: 9px; }.icon-button { min-width: 32px; padding: 4px 7px; }.icon-button span { display: none; }.text-button { font-size: 10px; }main { padding: 20px 16px 0; }.intro { margin-bottom: 18px; }h1 { font-size: 39px; letter-spacing: -2px; }.eyebrow { font-size: 7px; letter-spacing: 1.3px; }.intro p { font-size: 10px; }.round-readout { padding: 9px; min-width: 90px; }.round-readout strong { font-size: 24px; }.round-readout span { font-size: 6px; }.round-readout span:last-child { display: none; }.arena-layout { grid-template-columns: 1fr; gap: 20px; }.boards { padding: 15px 22px 10px; gap: 36px; }.board-card { width: 100%; max-width: 230px; }.game-toolbar { padding: 12px 18px; }.keyboard-help { display: none; }.touch-controls { display: flex; }.control-deck { grid-template-columns: 1fr 1fr; gap: 15px; align-items: start; }.board-cover strong { font-size: 18px; }.board-cover>span:last-child { font-size: 7px; }.primary { padding: 11px 18px; }.section-heading h2 { font-size: 13px; }.setup-options { grid-template-columns: 1fr; }footer { line-height: 1.8; }.floating-piece { opacity: .15; } }
@media(max-width:480px) { .topbar { padding: 0 12px; }.host-status { max-width: 100px; font-size: 8px; gap: 5px; }.top-right { gap: 9px; }.brand { font-size: 12px; }.brand-icon { grid-template-columns: repeat(3,7px); grid-template-rows: repeat(2,7px); }.text-button { font-size: 9px; }main { padding: 17px 11px 0; }.intro { gap: 8px; margin-bottom: 16px; }h1 { font-size: clamp(27px,8.1vw,36px); letter-spacing: -1.8px; margin-top: 5px; }.eyebrow { font-size: 6px; letter-spacing: 1px; }.intro p { font-size: 9px; }.intro p strong { display: inline; }.round-readout { min-width: 72px; border-radius: 9px; padding: 8px 6px; }.round-readout strong { font-size: 20px; }.round-readout span { font-size: 5px; letter-spacing: .7px; }.play-area { border-radius: 14px; }.arena-bar { padding: 11px 13px; font-size: 7px; letter-spacing: .4px; }.boards { padding: 13px 12px 10px; gap: 27px; }.boards::after { font-size: 17px; }.board-frame { padding: 3px; border-radius: 6px; }.player-avatar { width: 25px; height: 25px; border-radius: 7px; }.player-avatar svg { width: 18px; height: 18px; }.player-identity { gap: 6px; }.player-name { font-size: 10px; letter-spacing: .3px; }.player-kicker { font-size: 6px; letter-spacing: .5px; }.player-tag { display: none; }.board-heading { padding-bottom: 9px; }.board-cover { gap: 10px; padding: 7px; }.cover-icon { width: 44px; height: 44px; border-radius: 12px; }.cover-icon svg { width: 27px; height: 27px; }.board-cover strong { font-size: 15px; letter-spacing: -.4px; }.board-cover>span:last-child { font-size: 6px; }.next-row { font-size: 6px; letter-spacing: .4px; min-height: 29px; }.next-row canvas { width: 77px; height: 26px; }.board-metrics { padding-top: 8px; }.board-metrics strong { font-size: 18px; }.board-metrics span { font-size: 6px; letter-spacing: .6px; }.player-status { font-size: 7px; height: 15px; margin-top: 7px; }.player-status b { font-size: 7px; }.game-toolbar { padding: 11px 12px 12px; gap: 16px; }.primary { font-size: 12px; min-height: 42px; padding: 10px 16px; }.secondary { font-size: 10px; min-height: 39px; padding: 9px 13px; }.touch-controls { padding: 0 12px 13px; gap: 7px; }.control-deck { grid-template-columns: 1fr; }.setup-section,.decision-section { padding: 18px; }.setup-options { grid-template-columns: 1fr 1fr; }.setup-options select { font-size: 10px; }.setup-footnote { font-size: 10px; }.provider-note { font-size: 11px; }.board-feedback { font-size: 17px; }.announcement { font-size: 11px; }.multi .boards { gap: 16px; padding-left: 12px; padding-right: 12px; } }
@media(min-width:761px) and (max-height:800px) { .topbar { height: 53px; }main { padding-top: 17px; }.intro { margin-bottom: 16px; }h1 { font-size: 42px; }.board-card { width: min(100%,clamp(160px,calc((100svh - 315px)/2),230px)); }.boards { padding-top: 13px; padding-bottom: 9px; }.board-heading { padding-bottom: 8px; }.game-toolbar { padding-top: 10px; padding-bottom: 10px; }.board-metrics strong { font-size: 20px; }.next-row { min-height: 28px; }.player-status { margin-top: 7px; }.decision-log { max-height: 122px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }.board-feedback.show { opacity: 1; transform: none; } }

.speed-note { color: #f2d69a; font-size: 10px; line-height: 1.65; margin: 12px 0 0; }
#session-connect a { color: var(--cyan); text-decoration: underline; }
.player-status .latency { flex-shrink: 0; }