/* Shared controls, readable mobile forms and deliberate hand reveals. */
[hidden] { display: none !important; }
button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #74d7b0; outline-offset: 3px; }
button { touch-action: manipulation; }
html.dialog-open body { overflow: hidden; }
.modal-backdrop { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); overscroll-behavior: none; }
.live-modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #4a746b transparent; max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)); border: 1px solid #58716766; box-shadow: 0 18px 70px #00130ecc; }
@supports not (height: 100dvh) { .live-modal { max-height: calc(100vh - 24px); } }
.live-modal h2 { padding-right: 30px; line-height: 1.4; }
.live-modal h2:focus { outline: none; }
.modal-close { min-width: 40px; min-height: 40px; border-radius: 50%; }
.live-modal button:not(.modal-close):not(.reveal-card-button), .live-modal select, .live-modal input:not([type=checkbox]):not([type=range]) { min-height: 44px; }
.is-pending { position: relative; cursor: progress; }
.is-pending:after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: middle; animation: request-spin .7s linear infinite; }
@keyframes request-spin { to { transform: rotate(360deg); } }
.login-screen { gap: 12px; padding: max(24px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom)); }
.login-mark { font-size: 44px; }
.login-screen h1 { font-size: clamp(25px, 6vw, 36px); letter-spacing: -.03em; }
.login-benefits { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 6px; }
.login-benefits span { color: #bdd4c7; border: 1px solid #527f6755; padding: 5px 9px; border-radius: 20px; font-size: 11px; background: #18382b66; }
.login-card { width: min(420px,100%); padding: 22px; background: linear-gradient(150deg,#15332fed,#10242ded); box-shadow: 0 16px 55px #0004; }
.login-card h2 { margin-bottom: 16px; }
.login-card .primary-button { min-height: 48px; margin-top: 0; }
.login-card .login-divider { font-size: 12px; margin: 20px 0 16px; color: #a7c3b7; }
.remember-login { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c5dbd1; }
.remember-login input { width: 18px; height: 18px; padding: 0; accent-color: #4dc596; }
.remember-login span { margin-left: auto; font-size: 11px; color: #8ba79d; }
.account-hint { line-height: 1.7; }
.resume-table-banner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; padding: 14px 16px; text-align: left; border: 1px solid #77c29a55; border-radius: 12px; background: linear-gradient(110deg,#1f4e40,#132e35); color: #f1e3b8; }
.resume-table-banner > span { display: grid; min-width: 0; gap: 5px; }
.resume-table-banner b { font-size: 14px; }
.resume-table-banner small { font-size: 11px; color: #afc9be; }
.resume-table-banner strong { flex-shrink: 0; font-size: 12px; }
.member-search-panel { display: grid; gap: 10px; margin-bottom: 16px; padding: 14px; border: 1px solid #355749; border-radius: 12px; background: #112c2c; }
.member-search-field { display: flex; align-items: center; gap: 8px; }
.member-search-field #member-search { flex: 1; min-width: 0; width: 100%; min-height: 44px; background: #0a2027; border: 1px solid #35564f; padding: 10px 12px; border-radius: 8px; color: #e5eee6; font-size: 16px; }
.member-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.member-search-field button { min-width: 40px; min-height: 44px; }
.member-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.member-filter-row select { min-height: 40px; min-width: 138px; background: #173b37; border: 1px solid #3a6255; border-radius: 7px; color: #d3e6d9; padding: 6px 10px; font-size: 16px; }
#member-match-count { color: #aec4b8; font-size: 12px; white-space: nowrap; }
.member-row { padding: 16px 4px; }
.member-row .icon-button { width: 40px; height: 44px; flex-shrink: 0; }
.member-main > div > b { line-height: 1.55; }
.member-row[data-blocked=true] { background: #602d271a; }
.create-issue { margin: 0 0 14px; padding: 0 2px; }
.profile-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 26px; }
.profile-metrics > div { display: grid; gap: 7px; text-align: center; padding: 17px 8px; border: 1px solid #36594b; border-radius: 10px; background: #15322f; }
.profile-metrics strong { font-size: clamp(15px,3.5vw,23px); color: #edd496; overflow-wrap: anywhere; }
.profile-metrics span { font-size: 11px; color: #a8c1b5; }
.sound-state { padding: 10px 12px; color: #d6ebd9; background: #204f3b; border-radius: 8px; font-size: 13px; }
.sound-row b { font-size: 14px; }
.sound-row small { font-size: 11px; line-height: 1.5; }
.sound-row { gap: 12px; }
.voice-preview-label { margin-top: 18px; }
.reset-sound { display: block; margin: 14px auto 0; }
.reveal-card-button { position: relative; padding: 0; border: 0; border-radius: 7px; background: transparent; color: inherit; display: block; cursor: pointer; }
.reveal-card-button:not(:disabled) { box-shadow: 0 0 0 2px #6ddbaf; }
.reveal-card-button:disabled { cursor: default; opacity: 1 !important; }
.reveal-label { position: absolute; bottom: 3px; left: 2px; right: 2px; border-radius: 4px; padding: 3px 0; background: #144c3aee; color: #e9ffea; text-align: center; font: 600 10px/12px system-ui,sans-serif; pointer-events: none; }
.is-shown .reveal-label { background: #736029ed; color: #fff5cf; }
.reveal-mini .reveal-label { font-size: 8px; line-height: 10px; padding: 1px 0; bottom: 1px; }
.live-screen .my-cards.hand-folded:has(.reveal-card-button) { opacity: 1; }
.playing-card.concealed-card { display: grid; place-items: center; background: repeating-linear-gradient(40deg,#144454,#144454 4px,#245c65 4px,#245c65 6px); border: 2px solid #b9cfc6; border-radius: 4px; }
.concealed-card i { font-size: 20px; font-style: normal; color: #a6c4bc; }
.live-screen .has-revealed .seat-avatar { visibility: hidden; }
.live-screen .has-revealed .dealer, .live-screen .has-revealed .online-dot { display: none; }
.live-screen:has(.has-revealed) .board-caption { display: none; }
.live-screen .has-revealed .revealed-cards { left: 50%; right: auto; top: -5px; transform: translateX(-50%); width: max-content; }
.toast { pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.history-reveal-hint { font-size: 12px; color: #aac6b7; line-height: 1.7; margin: -6px 0 14px; }
.history-reveal-hint button { display: block; }
.history-cards .reveal-card-button { flex-shrink: 0; }
@media (max-width: 360px) { .login-card { padding: 18px; } .resume-table-banner { padding: 12px; } .member-search-panel { padding: 10px; } .profile-metrics { gap: 6px; } .live-screen .has-revealed .mini-card { width: 25px; height: 35px; } }
@media (max-width: 600px) {
  .modal-backdrop { align-items: end; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .live-modal { width: min(100%, 680px); border-radius: 12px 12px 0 0; }
}
@media (max-height: 680px) and (orientation: portrait) {
  .live-screen:has(.has-revealed):not(:has(.insurance-panel,.runout-panel)):not(.has-double-board) { grid-template-rows: 44px 20px minmax(0,1fr) 90px 132px; }
  .live-screen .has-revealed .revealed-cards { top: -15px; }
  .live-screen:has(.has-revealed) .intermission-status { padding: 2px 0; gap: 3px; }
  .live-screen:has(.has-revealed) .intermission-status b { font-size: 16px; line-height: 20px; }
  .live-screen:has(.has-revealed) .intermission-status span { line-height: 12px; }
  .live-screen:has(.has-revealed) .community { top: 49%; }
  .live-screen:has(.has-revealed) .seat-upper { transform: translate(-50%,calc(-50% + 4px)); }
}
@media (max-width: 360px) and (max-height: 680px) and (orientation: portrait) { .live-screen .has-revealed .revealed-cards { top: -10px; } }
@media (orientation: landscape) and (min-width: 600px) {
  .live-screen .has-revealed .revealed-cards { top: -11px; }
  .live-screen:has(.has-revealed) .seat-upper { transform: translate(-50%,calc(-50% + 10px)); }
}
@media (min-width: 1000px) and (min-height: 600px) { .live-screen .has-revealed .revealed-cards { top: 5px; } }
@media (max-height: 740px) { .login-screen { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .is-pending:after { animation: none; } }
/* Heads-up insurance needs a clear public-card lane on short phones. */
.live-screen[data-seat-count="2"]:has(.insurance-panel,.runout-panel) .bet-chip { left: calc(100% + 4px); right: auto; top: 30px; bottom: auto; transform: none; }
@media (max-height: 680px) and (orientation: portrait) {
  .live-screen[data-seat-count="2"]:has(.insurance-panel,.runout-panel) .community { top: 70%; }
}

/* 德扑之星风格：移动端优先的深蓝创建页和金色操作层 */
body { background: #071521; }
.page-title.compact { text-align: center; padding-top: 18px; }
.page-title.compact h1 { color: #d7e9ff; font-size: 28px; }
#room-form { background: #0d1c2b; padding: 10px 0 28px; }
#room-form .form-section { display: grid; gap: 12px; }
#room-form .field-label { color: #a9c8ee; font-size: 16px; }
#room-form input, #room-form select { background: #152b45; border: 1px solid #27476c; color: #e2efff; border-radius: 28px; min-height: 46px; }
#room-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#room-form .form-grid .field-label:first-child { grid-column: 1 / -1; }
#room-form .live-checkbox { padding: 12px 14px; border-radius: 14px; background: #152f4d; color: #9fc5ed; }
#room-form .live-checkbox input[type="checkbox"] { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; border-radius: 3px; }
#room-form .live-checkbox { min-height: 44px; border-radius: 6px; padding: 10px; line-height: 1.5; }
#room-form .room-option-section .field-label { font-size: 14px; }
#room-form .create-summary { position: sticky; bottom: 0; z-index: 3; margin: 14px -12px -28px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: #0a1724ee; }
#room-form .primary-button, .primary-button { background: linear-gradient(110deg,#eab24f,#ffdc8c); color: #152131; border: 0; border-radius: 28px; font-weight: 800; min-height: 52px; }
.game-choice { background: #132945; border-color: #294b73; }
.game-choice.holdem, .game-choice.thirteen { border-color: #d5a74d; }
@media (min-width: 700px) { #room-form { max-width: 680px; margin: auto; border-radius: 18px; padding: 20px; } }