/* Pine room: quiet surfaces, a clear play action, and comfortable touch targets. */
:root {
  --ui-bg: #f1f5f2;
  --ui-surface-soft: #e9f0eb;
  --ui-line: #d6e2da;
  --ui-accent: #246750;
  --ui-muted: #526b60;
}
.site-header { min-height: 88px; }
.game-type-tabs {
  display: flex; width: 100%; gap: 6px; padding: 6px;
  margin: 0 0 16px; border: 1px solid var(--ui-line); border-radius: 18px;
  background: var(--ui-surface); overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scroll-padding-inline: 6px;
}
.game-type-tabs button { flex: 1 0 auto; min-height: 48px; border-color: transparent; background: transparent; border-radius: 12px; white-space: nowrap; }
.game-type-tabs button.active { background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent); box-shadow: 0 3px 8px #173b3214; }
.game-type-tabs button.tab-paused { padding-top: 20px; }
.game-navigation { position: relative; margin-bottom: 16px; }
.game-navigation .game-type-tabs { margin-bottom: 0; scroll-padding-inline: 48px; }
.game-nav-arrow { position: absolute; top: 7px; bottom: 7px; width: 44px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); color: var(--ui-accent); font: 26px/1 var(--ui-font); box-shadow: 0 0 12px var(--ui-surface); }
.game-nav-previous { left: 7px; }
.game-nav-next { right: 7px; }
body:has(#game-view:not([hidden])) .game-navigation { display: none; }
.casino-entry { box-shadow: none; border-radius: 14px; }
.lobby { gap: 24px 64px; padding-top: 28px; }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 10px; letter-spacing: .12em; }
.hero-copy .eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--ui-accent); }
.hero-copy h1 { font-size: clamp(34px, 4.3vw, 52px); line-height: 1.3; }
.intro { margin-top: 12px; }
.lobby-controls { padding: 22px; border-radius: 24px; box-shadow: 0 8px 28px #173b3206; }
.mode-tabs { gap: 4px; margin-bottom: 22px; padding: 5px; background: var(--ui-surface-soft); border-radius: 15px; }
.mode-tabs button { border-color: transparent; background: transparent; border-radius: 11px; }
.mode-tabs button.active { border-color: var(--ui-line); background: var(--ui-surface); box-shadow: 0 2px 5px #173b3210; }
.panel-heading h2 { font-size: 19px; }
.small-badge { border-radius: 20px; padding: 4px 9px; }
.mode-panel > .muted { font-size: 13px; }
.lobby-rule-options { margin: 0 0 16px; border: 1px solid var(--ui-line); border-radius: 13px; }
.lobby-rule-options summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px; cursor: pointer; list-style: none; touch-action: manipulation; font-size: 13px; }
.lobby-rule-options summary::-webkit-details-marker { display: none; }
.lobby-rule-options summary::after { content: ''; width: 7px; height: 7px; flex: 0 0 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: -4px 2px 0 auto; }
.lobby-rule-options[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.rule-options-value { flex: 1; color: var(--ui-muted); text-align: right; font-size: 11px; }
.rule-options-body { padding: 16px 12px 0; border-top: 1px solid var(--ui-line); }
.rule-options-body fieldset:last-child { margin-bottom: 14px; }
.random-rules { border: 0; border-radius: 16px; }
#start-game { min-height: 56px; border-radius: 14px; font-size: 15px; box-shadow: 0 5px 12px #173b3212; }
.lobby-links { flex-wrap: wrap; gap: 4px 16px; }
.lobby-links button, .lobby-links a { min-height: 44px; }
.preview-frame { transform: rotate(-1.5deg); border-radius: 24px; box-shadow: 0 16px 36px #173b3210; }
.preview-caption { margin-top: 28px; }
.choice-row button.selected { box-shadow: inset 0 0 0 1px var(--ui-accent); font-weight: 600; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ui-accent); outline: 2px solid var(--ui-accent); outline-offset: 2px; }
button.is-pressed { transform: scale(.975); }
.dock-tool { min-height: 52px; border-radius: 14px; }
#game-view .game-hint { font-size: 12px; line-height: 1.6; }
.seat-clock time { font-variant-numeric: tabular-nums; }
dialog { border-color: var(--ui-line); box-shadow: var(--ui-shadow-dialog); }
dialog[open] { animation: room-dialog-in 160ms var(--ui-motion-ease); }
dialog::backdrop { background: #102d245c; }
.dialog-scroll { scrollbar-color: var(--ui-line) transparent; }
.room-chat-quick button { min-height: 44px; }
.dialog-heading .icon-button { min-width: 44px; min-height: 44px; }
.casino-topbar { padding-top: max(10px, env(safe-area-inset-top)); }
.casino-back, .casino-chip, .casino-nav-item { min-height: 44px; }
.casino-chip { min-width: 44px; }
.casino-sheet-card { overscroll-behavior: contain; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.casino-sheet-card button:focus-visible { outline: 3px solid var(--casino-gold); outline-offset: 3px; }
.ddz-top, .mj-top { padding-top: max(8px, env(safe-area-inset-top)); }
.table-chip, .ddz-actions button, .mj-actions button, .tut-close, .tut-foot button { min-height: 44px; }
.table-chip { height: 44px; }
.tut-dots button { width: 44px; height: 44px; border-radius: 12px; }
.tut-sheet, .ddz-rules-card, .mj-rules-card { max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.tut-head { position: sticky; top: -1px; z-index: 2; padding-block: 6px; background: #fffdf7; }
.tut-foot { position: sticky; bottom: -1px; padding-block: 8px; background: #f5eddc; }
.tut-foot button:disabled { opacity: .4; }
.tut-close { margin-left: auto; flex-shrink: 0; }
.mj-hand-wrapped { flex-wrap: wrap; row-gap: 10px; padding-top: 8px; }
.ddz-card:focus-visible, .mj-hand .mj-tile:focus-visible { outline: 3px solid #ffd98a; outline-offset: 2px; }
@media (max-width: 420px) {
  .mj-body { overflow-y: auto; overscroll-behavior: contain; }
  .mj-panel { flex: 0 0 auto; padding-block: 12px; }
  .mj-table { flex: 1 0 230px; }
  .mj-actions { flex: 0 0 auto; }
}
@keyframes room-dialog-in { from { opacity: .5; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) {
  .game-type-tabs button:not(.active):hover, .mode-tabs button:not(.active):hover { background: var(--ui-surface-soft); color: var(--ui-ink); }
  #start-game:hover { background: var(--ui-accent-hover); }
}
@media (max-width: 899px) {
  .app-shell { padding-inline: max(20px, env(safe-area-inset-left)); }
  .site-header { min-height: 76px; }
  .game-type-tabs { border-radius: 15px; margin-bottom: 12px; }
  .game-type-tabs button { flex: 1 0 auto; min-width: 74px; padding: 10px 13px; font-size: 13px; }
  #open-casino.casino-entry { min-height: 56px; padding: 12px 14px; margin-block: 0 12px; box-shadow: none; }
  .casino-entry-copy small { font-size: 11px; }
  .lobby { padding-top: 14px; gap: 18px 12px; }
  .hero-copy h1 { font-size: 34px; }
  .hero-copy .eyebrow { margin-bottom: 10px; font-size: 11px; }
  .intro { font-size: 13px; }
  .lobby-controls { padding: 18px; border-radius: 20px; }
  .mode-tabs { margin-bottom: 20px; }
  .mode-tabs button { min-height: 60px; font-size: 12px; gap: 5px; }
  .mode-panel > .muted { margin-bottom: 18px; }
  .lobby-links { gap: 4px 12px; }
  .lobby-links .link-divider { display: none; }
  .game-top-actions .icon-button { width: 44px; height: 44px; flex-basis: 44px; }
  input:not([type='checkbox']):not([type='range']), select, textarea { font-size: 16px; }
  dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  dialog.scroll-dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .dialog-scroll { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) { dialog::backdrop, .tut, .ddz-rules, .mj-rules { backdrop-filter: none; } }
@media (max-width: 360px) {
  .app-shell { padding-inline: 14px; }
  .lobby-controls { padding: 14px; }
  .mode-tabs { gap: 2px; padding: 3px; }
  .mode-tabs button { padding-inline: 3px; }
  .hero-copy h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } button.is-pressed { transform: none; } }