/* Shared web / iOS / Android WebView layout. Existing button artwork is retained. */
:root {
  --sheet-ink: #172b42;
  --sheet-muted: #50647b;
  --sheet-accent: #087c63;
  --control-height: 46px;
}
button { touch-action: manipulation; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible { outline: 3px solid #6ad8ff; outline-offset: 3px; }
input { -webkit-user-select: text; user-select: text; }
.screen-bezel {
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}
header { height: 62px; padding: 6px 12px; gap: 12px; }
.hud-main-title { font-size: 21px; letter-spacing: 0; }
.current-hand-timer { font-size: 18px; padding: 6px 9px; }
.account-chip { min-height: var(--control-height); max-width: 160px; font-size: 16px; padding: 8px; }
.hud-tools { gap: 8px; }
.btn-tool-large { min-height: var(--control-height); font-size: 17px; padding: 8px 14px; }
.led-board { grid-template-columns: minmax(0, 1fr) minmax(190px, 23%) minmax(0, 1fr); gap: 10px; margin-top: 8px; }
.team-box { min-width: 0; min-height: 0; }
.team-status-row { flex-shrink: 0; }
.team-main-body { height: auto; flex: 1 1 0; min-height: 0; gap: 8px; }
.vertical-actions { width: calc(var(--action-size, 72px) + 8px); height: 100%; gap: 6px; justify-content: space-evenly; }
.btn-circle { flex: 0 0 auto; width: var(--action-size, 72px); height: var(--action-size, 72px); font-size: clamp(17px, calc(var(--action-size, 72px) * .29), 30px); }
.level-container-sharp { align-self: stretch; min-height: 0; height: auto; }
.led-level-sharp, .led-level-sharp.is-ten {
  /* Font size is fitted to the actual container after font load and rotation. */
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  flex: none;
}
.team-tag-huge { flex-shrink: 0; font-size: 18px; line-height: 1.25; letter-spacing: 2px; padding: 5px 8px; }
.team-box.score-changed .led-level-sharp { animation: score-pulse .45s ease-out; }
@keyframes score-pulse { 0% { opacity: .55; } 50% { filter: brightness(1.35); } 100% { opacity: 1; } }
.center-hud { padding: 14px 10px; gap: 12px; justify-content: flex-start; min-height: 0; }
.hud-section { flex: 0 0 auto; }
.wildcard-section { order: 0; }
.grand-score-container { order: 1; padding: 12px 0; border-top: 1px solid #273344; border-bottom: 1px solid #273344; }
.hud-label-large { color: #b2c2d4; font-size: clamp(15px, 1.25vw, 20px); line-height: 1.3; letter-spacing: 0; }
.wildcard-led-sharp, .grand-score-led-sharp { font-size: clamp(44px, 5vw, 72px); line-height: 1.1; margin: 4px 0; }
.grand-score-led-sharp { display: flex; justify-content: center; align-items: center; gap: .24em; letter-spacing: 0; width: 100%; min-width: 0; }
.grand-score-led-sharp > span { flex-shrink: 0; }
#grandRed { color: #ff627c; }
#grandBlue { color: #37d9ff; }
.score-colon { color: #d7e1ed; }
.first-round-tip { font-size: 14px; margin: 0; line-height: 1.2; }
.multiplier-badge-large { font-size: 14px; margin: 0; padding: 3px 10px; }
.history-log-box { order: 2; flex: 1 1 0; min-height: 0; max-height: none; padding: 10px 8px; margin: 0; overflow: hidden; gap: 8px; }
.history-log-title { color: #b2c2d4; font-size: 16px; padding-bottom: 8px; }
#historyRowsContainer { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.history-empty { color: #99aabe; font-size: 15px; padding: 10px 0; }
.history-row { flex-wrap: wrap; gap: 4px 8px; font-size: 15px; padding: 7px; margin-bottom: 6px; }
.history-duration { color: #aabbd0; font-size: 13px; }

/* Settings and account sheets: distinct light cards, visible primary footer. */
.modal {
  top: var(--visual-top, 0px);
  left: var(--visual-left, 0px);
  width: var(--visual-width, 100vw);
  height: var(--visual-height, 100dvh);
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: rgba(1, 6, 13, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.modal-box { max-width: 100%; max-height: 100%; overflow-y: auto; }
.sheet-panel {
  width: min(880px, 100%);
  max-height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--sheet-ink);
  background: #f3f6fa;
  border: 1px solid #dce5ed;
  border-radius: 20px;
  box-shadow: 0 24px 80px #0008;
  text-align: left;
}
.sheet-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 24px 16px; }
.settings-title, .account-title { color: var(--sheet-ink); font-size: 24px; margin: 0; text-align: left; line-height: 1.3; }
.sheet-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex-shrink: 0; padding: 16px 24px; background: #fff; border-top: 1px solid #dbe4ed; }
.sheet-footer button { min-height: 50px; padding: 10px 14px; border-radius: 12px; font-size: 18px; font-weight: 800; line-height: 1.2; cursor: pointer; }
.sheet-primary { color: #fff; background: var(--sheet-accent); border: 1px solid var(--sheet-accent); box-shadow: 0 3px 8px #087c6326; }
.sheet-secondary { color: #334a62; background: #f3f6fa; border: 1px solid #c6d3e0; }
.sheet-footer button:active { filter: brightness(.92); }
.settings-groups { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-group { padding: 14px; border: 1px solid #dce5ed; background: #fff; border-radius: 14px; }
.settings-group-title { color: var(--sheet-muted); font-size: 17px; line-height: 1.25; margin-bottom: 10px; text-align: left; }
.rule-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rule-choice { color: #3d5269; background: #f2f5f9; border: 1.5px solid #ced9e5; border-radius: 10px; min-height: 50px; font-size: 18px; font-weight: 800; padding: 8px 4px; }
.rule-choice.active { color: #05614d; background: #dbf5ec; border-color: #078568; box-shadow: inset 0 0 0 1px #078568; }
.rule-choice.active::before { content: '✓'; display: inline-block; font-size: .8em; margin-right: 4px; }
.settings-message { color: #a62c41; font-size: 15px; padding: 0 24px 10px; }
.settings-message:empty { display: none; }
.account-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 16px; -webkit-overflow-scrolling: touch; }
.account-identities { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.account-identity, .account-identity + .account-identity { margin: 0; padding: 12px; text-align: left; background: #e8eff7; border: 1px solid #d4dfeb; border-radius: 12px; font-size: 15px; min-width: 0; }
.account-identity span { display: block; color: var(--sheet-muted); margin-bottom: 4px; }
.account-identity strong { display: block; color: #1d334c; letter-spacing: 0; font-size: 18px; overflow-wrap: anywhere; }
.account-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.password-field { min-width: 0; }
.account-form .auth-label { color: #3d5269; font-size: 16px; margin: 0 0 8px; }
.account-form .auth-input { color: #172b42; background: #fff; border: 1px solid #bdcddd; border-radius: 10px; min-height: 48px; font-size: 17px; }
.account-form .auth-input:focus { border-color: #087c63; box-shadow: 0 0 0 3px #087c631a; }
.account-form .auth-message { grid-column: 1 / -1; color: #b22c45; min-height: 0; margin: 0; text-align: left; font-size: 15px; }
.account-form .auth-message:empty { display: none; }
.account-danger { color: #a63349; background: #fff; border-color: #e3b9c3; min-height: 44px; font-size: 15px; padding: 8px 12px; }
.auth-gate { top: var(--visual-top, 0px); height: var(--visual-height, 100dvh); bottom: auto; overflow-y: auto; }
.auth-card { max-height: 100%; overflow-y: auto; }
.auth-card { width: min(460px, 100%); border: 1px solid #29435b; padding: 28px; border-radius: 20px; }
.auth-title { font-size: 28px; margin: 0 0 10px; }
.auth-title:focus { outline: none; }
.auth-subtitle { margin: 0 0 20px; font-size: 16px; color: #b8c8d8; }
.login-terms { margin: 0 0 20px; padding: 12px 14px; background: #131f2b; border: 1px solid #263b4c; border-radius: 12px; }
.login-terms p { margin: 0; font-size: 14px; line-height: 1.65; color: #b8c8d8; }
.login-terms p + p { margin-top: 6px; }
.login-terms strong { color: #86efd3; font-family: inherit; }
.login-fields { min-width: 0; }
.login-fields .auth-label { font-size: 16px; }
.login-fields .auth-label:first-child { margin-top: 0; }
.login-fields .auth-input { min-height: 48px; font-size: 17px; }
.login-fields .auth-submit { min-height: 48px; font-size: 18px; margin-top: 20px; }
.login-fields .auth-message:empty { display: none; }
@media (min-width: 600px) and (max-height: 520px) and (orientation: landscape) {
  .auth-gate { padding: 12px; }
  .auth-card { width: min(740px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px; align-items: center; }
  .auth-title { font-size: 26px; }
  .auth-subtitle { margin-bottom: 14px; }
  .login-terms { margin-bottom: 0; }
  .login-fields .auth-submit { margin-top: 14px; }
}

/* Feedback never covers the six scoring targets or steals a tap. */
.match-feedback { position: fixed; top: var(--feedback-top, 76px); left: 50%; transform: translate(-50%, -5px); z-index: 80; max-width: min(680px, calc(100vw - 28px)); width: max-content; display: flex; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid #37556b; border-radius: 12px; color: #f0f7ff; background: #142737f5; box-shadow: 0 8px 26px #0005; font-size: 16px; line-height: 1.4; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s; }
.match-feedback.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
#btnReplay { flex: 0 0 auto; min-height: 44px; padding: 6px 12px; color: #8ff5d7; background: #183f42; border: 1px solid #477c7c; border-radius: 8px; font-size: 16px; pointer-events: auto; cursor: pointer; }
#btnReplay[hidden] { display: none; }
.voice-wave { display: none; height: 17px; gap: 2px; align-items: center; margin-left: 4px; }
.voice-wave i { width: 3px; height: 8px; background: #62edc9; border-radius: 2px; animation: voice-wave .65s ease-in-out infinite alternate; }
.voice-wave i:nth-child(2) { animation-delay: -.35s; }
.voice-wave i:nth-child(3) { animation-delay: -.2s; }
#btnVoice.is-speaking { border-color: #35b99a; color: #a5f8e2; }
#btnVoice.is-speaking .voice-wave { display: inline-flex; }
#btnVoice.is-speaking .voice-icon { display: none; }
@keyframes voice-wave { to { height: 17px; } }
.connection-notice { top: var(--feedback-top, 76px); font-size: 15px; }

@media (orientation: landscape) and (max-width: 1100px) {
  header { height: 54px; padding: 4px 8px; gap: 6px; }
  .hud-main-title { font-size: 17px; }
  .current-hand-timer { font-size: 16px; padding: 5px 6px; }
  .account-chip { max-width: 120px; font-size: 15px; }
  .hud-title-box { gap: 6px; }
  .btn-tool-large { font-size: 16px; padding: 6px 8px; }
  .hud-tools { gap: 5px; }
  .center-hud { padding: 8px; gap: 6px; }
  .grand-score-container { padding: 6px 0; }
  .hud-label-large { font-size: 14px; }
  .wildcard-led-sharp, .grand-score-led-sharp { font-size: 40px; margin: 1px 0; }
  .history-log-title { font-size: 14px; padding-bottom: 4px; }
  .history-log-box { padding: 5px; gap: 4px; }
  .history-empty { font-size: 13px; padding: 4px 0; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .sheet-panel { border-radius: 14px; }
  .sheet-header { padding: 10px 18px; }
  .settings-title, .account-title { font-size: 21px; }
  .settings-groups { padding: 0 18px 10px; gap: 8px; }
  .settings-group { padding: 8px 10px; border-radius: 10px; }
  .settings-group-title { font-size: 16px; margin-bottom: 6px; }
  .rule-choice { min-height: 44px; font-size: 17px; padding: 6px 4px; }
  .sheet-footer { padding: 10px 18px; gap: 10px; }
  .sheet-footer button { min-height: 44px; font-size: 17px; padding: 8px; }
  .account-scroll { padding: 0 18px 12px; }
  .account-identities { margin-bottom: 10px; }
  .account-identity { padding: 8px 12px; }
  .account-identity span { margin-bottom: 2px; }
  .account-form .auth-input { min-height: 44px; }
}
@media (orientation: portrait) {
  header { height: 110px; min-height: 110px; padding: 6px 8px; display: grid; grid-template-columns: 1fr; grid-template-rows: 44px 46px; gap: 6px; }
  .hud-title-box { width: 100%; gap: 6px; justify-content: space-between; }
  .hud-main-title { font-size: 19px; }
  .current-hand-timer { font-size: 17px; }
  .account-chip { font-size: 15px; max-width: 118px; min-height: 44px; padding: 6px; }
  .hud-tools { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .btn-tool-large { width: 100%; min-width: 0; font-size: 17px; min-height: 46px; padding: 6px 2px; }
  .led-board { gap: 6px; margin-top: 6px; }
  .team-box { padding: 4px 10px 6px; flex: 1 1 0; }
  .team-main-body { gap: 8px; }
  .team-tag-huge { font-size: 17px; padding: 4px 6px; }
  .center-hud { height: 106px; min-height: 106px; flex: 0 0 106px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; padding: 8px 12px; gap: 10px; overflow: hidden; }
  .center-hud .hud-section { display: grid; grid-template-rows: 20px 40px 22px; row-gap: 2px; justify-content: stretch; align-items: center; justify-items: center; height: 100%; width: 100%; padding: 0; border: 0; }
  .center-hud .grand-score-container { border-left: 1px solid #273344; }
  .center-hud .hud-label-large { grid-row: 1; font-size: 15px; line-height: 20px; }
  .wildcard-led-sharp, .grand-score-led-sharp { grid-row: 2; font-size: 38px; line-height: 40px; height: 40px; margin: 0; }
  .first-round-tip, .multiplier-badge-large { grid-row: 3; font-size: 13px; margin: 0; padding: 1px 7px; }
  .history-log-box { display: none; }
  .sheet-panel { width: min(600px, 100%); border-radius: 18px; }
  .sheet-header { padding: 18px 18px 14px; }
  .settings-title, .account-title { font-size: 23px; }
  .settings-groups { grid-template-columns: 1fr; padding: 0 16px 16px; gap: 10px; }
  .settings-group { padding: 12px; }
  .settings-group-title { font-size: 17px; margin-bottom: 8px; }
  .rule-options { grid-template-columns: 1fr 1fr; }
  .rule-choice { min-height: 50px; font-size: 18px; }
  .sheet-footer { padding: 14px 16px; gap: 10px; }
  .sheet-footer button { min-height: 50px; font-size: 18px; }
  .account-scroll { padding: 0 18px 18px; }
  .account-form { grid-template-columns: 1fr; gap: 14px; }
  .account-identities { grid-template-columns: 1fr; gap: 8px; }
  .account-identity { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; align-items: center; }
  .account-identity span { flex-shrink: 0; margin: 0; }
  .account-identity strong { font-size: 17px; }
  .match-feedback { font-size: 15px; }
}
@media (orientation: portrait) and (max-width: 380px) {
  .hud-main-title { font-size: 17px; }
  .current-hand-timer { font-size: 16px; padding: 5px; }
  .account-chip { max-width: 96px; font-size: 14px; }
  .btn-tool-large { font-size: 16px; }
  .sheet-header { padding: 14px; }
  .settings-groups { padding: 0 12px 12px; gap: 8px; }
  .settings-group { padding: 10px; }
  .rule-choice { font-size: 17px; min-height: 48px; }
}
@media (orientation: portrait) and (max-height: 690px) {
  .screen-bezel { overflow-y: auto; }
  .led-board { flex-shrink: 0; min-height: 510px; }
}
@media (orientation: portrait) and (min-width: 600px) {
  header { grid-template-rows: 46px 48px; height: 116px; min-height: 116px; padding-left: 16px; padding-right: 16px; }
  .hud-main-title { font-size: 24px; }
  .account-chip { max-width: 200px; font-size: 18px; }
  .current-hand-timer, .btn-tool-large { font-size: 20px; }
  .center-hud { height: 126px; min-height: 126px; flex-basis: 126px; }
  .center-hud .hud-section { grid-template-rows: 24px 52px 24px; }
  .center-hud .hud-label-large { font-size: 19px; }
  .wildcard-led-sharp, .grand-score-led-sharp { font-size: 48px; line-height: 52px; height: 52px; }
  .team-tag-huge { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-box.score-changed .led-level-sharp, .voice-wave i { animation: none; }
  .match-feedback { transition: none; }
}
/* Near-square folding screens: two teams side by side, shared HUD below. */
@media (orientation: portrait) and (min-width: 600px) and (min-aspect-ratio: 9/10) {
  .led-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) 126px; min-height: 0; }
  .box-red { grid-column: 1; grid-row: 1; }
  .box-blue { grid-column: 2; grid-row: 1; }
  .center-hud { grid-column: 1 / -1; grid-row: 2; }
}
.compact-viewport .modal { padding-top: 4px; padding-bottom: 4px; }
.compact-viewport .sheet-header { padding: 6px 14px; }
.compact-viewport .sheet-header .account-danger { min-height: 36px; padding: 4px 8px; }
.compact-viewport .sheet-footer { padding: 6px 14px; }
.compact-viewport .sheet-footer button { min-height: 42px; }
@media (orientation: landscape) and (max-width: 760px) {
  header { height: 102px; display: grid; grid-template-columns: 1fr; grid-template-rows: 44px 44px; gap: 4px; }
  .hud-title-box { justify-content: space-between; }
  .hud-tools { display: grid; grid-template-columns: repeat(4, 1fr); }
  .btn-tool-large { min-height: 44px; }
  .led-board { grid-template-columns: minmax(0, 1fr) minmax(150px, 24%) minmax(0, 1fr); gap: 6px; }
  .center-hud { gap: 4px; padding: 4px; }
  .wildcard-led-sharp, .grand-score-led-sharp { font-size: 32px; }
  .grand-score-container { padding: 3px 0; }
  .history-log-box { padding: 3px; }
  .history-log-title, .history-empty { font-size: 12px; }
  .history-empty { min-height: 0; }
}