:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; height: 100dvh; margin: 0; overflow: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { display: grid; grid-template-rows: auto 1fr auto; color: #f6f3e8; background: #10251e; }
.toolbar { position: relative; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px; background: #1c3028; border-bottom: 1px solid #607c6d; box-shadow: 0 3px 14px #0008; z-index: 20; }
h1 { margin: 0; font-family: Georgia, serif; font-size: 25px; letter-spacing: .02em; white-space: nowrap; }
.mobile-title { display: none; }
.toolbar p { margin: 3px 0 0; color: #b7c8bd; font-size: 13px; }
nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.control-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 3px 5px; border: 1px solid #607c6d66; border-radius: 10px; background: #10251e55; }
.control-title { color: #f2d376; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.session-controls { border-color: #a97b5f88; }
.game-choice { display:flex; align-items:center; gap:6px; color:#f7d468; font-size:.82rem; font-weight:700; white-space:nowrap; }
.game-choice select { max-width:180px; min-height:34px; padding:5px 8px; border:1px solid #89ac9e; border-radius:7px; background:#17382e; color:#fffdf4; font:inherit; }
.menu-toggle { display: none; }
.room-summary { display: none; gap: 2px; min-width: 170px; color: #dce7e0; font-size: 12px; }
.room-summary strong { color: #f2d376; font-size: 15px; }
button { border: 1px solid #88a697; border-radius: 7px; padding: 7px 10px; color: #fffdf4; background: #36594a; cursor: pointer; font-weight: 650; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:hover, button:focus-visible { background: #37614f; outline: 2px solid #e2bf61; outline-offset: 1px; }
.table { position: relative; min-height: 0; overflow: hidden; touch-action: manipulation; background: radial-gradient(circle at 50% 42%, #287050 0, #18553c 46%, #103d2e 100%); }
.winner-banner { position:absolute; z-index:200; left:50%; top:18px; transform:translateX(-50%); padding:12px 20px; border:3px solid #fff1a1; border-radius:24px; background:#1a4a34; color:#fff9d8; box-shadow:0 0 28px #ffe477cc; font-weight:900; font-size:18px; text-align:center; }
.table::before { content: ""; position: absolute; inset: 16px; border: 2px solid #d8b45b66; border-radius: 42px; box-shadow: inset 0 0 80px #0006; pointer-events: none; }
.objects { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.table.is-shuffling .objects { animation: shuffle-table .7s ease-in-out both; }
.table.is-shuffling .object { animation: shuffle-card .18s linear infinite alternate; }
@keyframes shuffle-table { 0%,100% { filter: none; } 45% { filter: brightness(1.18); } }
@keyframes shuffle-card { from { transform: translateX(-5px) rotate(-2deg); } to { transform: translateX(5px) rotate(2deg); } }
.table-players { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.player-seat { position: absolute; display: flex; align-items: center; gap: 5px; min-width: 96px; padding: 4px 7px; transform: translate(-50%,-50%); border: 1px solid #d8b45b88; border-radius: 22px 10px 10px 22px; background: #0b281fdd; box-shadow: 0 4px 12px #0008; pointer-events: auto; }
.player-seat.current-turn { border: 3px solid #f2d376; box-shadow: 0 0 0 2px #fff6b5,0 0 20px #f2d376aa; }
.turn-label { position: absolute; right: -6px; top: -13px; padding: 2px 6px; border-radius: 8px; color: #17241f; background: #f2d376; font-size: 9px; font-weight: 900; }
.player-avatar { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 50%; color: #17241f; background: #f2d376; font-size: 10px; font-weight: 900; }
.seat-details { min-width: 53px; }
.seat-details strong { display: block; max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f6f3e8; font-size: 11px; }
.opponent-hand { position: relative; height: 27px; min-width: 58px; margin-top: 1px; }
.opponent-hand i { position: absolute; left: 22px; bottom: 0; width: 16px; height: 25px; border: 1px solid #e3c976; border-radius: 3px; transform: rotate(var(--fan-angle)); transform-origin: 50% 115%; background: repeating-linear-gradient(45deg,#183f70 0 3px,#2b68a7 3px 6px); box-shadow: 1px 1px 2px #0008; }
.opponent-count { position: absolute; right: -8px; bottom: -4px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 12px; color: #17241f; background: #f2d376; border: 1px solid #26362e; font-size: 12px; font-weight: 900; }
@media (min-width: 701px) {
  .toolbar { min-height: 48px; gap: 10px; padding: 5px 10px; }
  h1 { font-size: 21px; }
  .toolbar p { display: none; }
  nav { gap: 5px; }
  .control-group { gap: 4px; padding: 2px 4px; }
  .control-title { font-size: 9px; }
  .toolbar button { padding: 5px 8px; font-size: 11px; }
  .game-choice select { min-height: 29px; padding: 3px 6px; font-size: 11px; }
}
:fullscreen .toolbar { min-height: 38px; padding: 3px 7px; gap: 6px; }
:fullscreen h1 { font-size: 17px; }
:fullscreen .control-title { display: none; }
:fullscreen .control-group { gap: 3px; padding: 1px 3px; }
:fullscreen .toolbar button { padding: 4px 6px; font-size: 10px; }
:fullscreen .game-choice select { min-height: 27px; font-size: 10px; }
.private-hand { position: absolute; z-index: 12; left: 22px; right: 22px; bottom: 14px; min-height: 118px; display: flex; align-items: center; gap: 20px; padding: 10px 16px; border: 2px dashed #d8b45b99; border-radius: 18px; background: #0d291fbb; box-shadow: inset 0 0 30px #0005; }
.self-turn { position: absolute; z-index: 20; left: 50%; top: -18px; transform: translateX(-50%); border-radius: 18px; white-space: nowrap; }
.self-turn.current-turn { color: #17241f; background: #f2d376; box-shadow: 0 0 0 3px #fff6b5,0 0 18px #f2d376; }
.hand-heading { display:none; }
.hand-view-controls { position:absolute; right:8px; bottom:5px; z-index:24; display:flex; gap:3px; }
.hand-view-controls button { min-width:26px; min-height:25px; padding:2px 5px; font-size:10px; white-space:nowrap; }
.private-hand small { display: block; margin-top: 4px; color: #b9c8bf; line-height: 1.25; }
.hand-cards { display: flex; align-items: center; min-width: 0; overflow-x: auto; padding: 5px 20px 5px 5px; }
.hand-card { width:calc(62px * var(--hand-zoom,1)); height:calc(86px * var(--hand-zoom,1)); flex:0 0 calc(62px * var(--hand-zoom,1)); margin-right:calc(-6px * var(--hand-zoom,1)); position:relative; border:1px solid #202820; border-radius:6px; background:#fffdf4; color:#050505; box-shadow:0 3px 7px #0009; cursor:pointer; font:800 calc(16px * var(--hand-zoom,1)) Georgia,serif; padding:calc(7px * var(--hand-zoom,1)); touch-action:none; -webkit-user-drag:none; }
.hand-card.red { color: #bd0717; }
.hand-card:hover { transform: translateY(-8px); z-index: 5; }
.hand-drag-float { position:fixed; z-index:1000; width:62px; height:86px; pointer-events:none; filter:drop-shadow(0 10px 8px #0009); }
.hand-drag-float .card { position:absolute; inset:0; }
.object { position: absolute; width: 112px; height: 156px; transform-origin: 50% 50%; user-select: none; touch-action: manipulation; cursor: grab; filter: drop-shadow(0 6px 5px #0007); pointer-events: auto; }
.object.dragging { cursor: grabbing; filter: drop-shadow(0 12px 9px #0009); }
.object.selected::after { content: ""; position: absolute; inset: -8px; border: 3px solid #f7cc58; border-radius: 12px; box-shadow: 0 0 0 2px #1c251f, 0 0 18px #f7cc58aa; pointer-events: none; }
.card { position: absolute; inset: 0; border: 1px solid #1b211e; border-radius: 9px; overflow: hidden; background: #fffdf4; color: #151515; backface-visibility: hidden; }
.card.face-down { background: #f2ead6; }
.card.recent-ai-play { outline: 5px solid #ffe477; outline-offset: 3px; box-shadow: 0 0 28px 10px #ffe477cc; animation: ai-play-pulse .75s ease-in-out 2; }
@keyframes ai-play-pulse { 50% { outline-color: #fff; box-shadow: 0 0 36px 14px #fff3a6ee; } }
.card.face-down .face { display: none; }
.back { display: none; position: absolute; inset: 6px; border: 3px double #f4d88a; border-radius: 6px; background: repeating-linear-gradient(45deg, #183f70 0 6px, #23568f 6px 12px); box-shadow: inset 0 0 0 4px #17385e; }
.face-down .back { display: block; }
.face { position: absolute; inset: 0; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; font-family: Georgia, serif; }
.face.red { color: #b01825; }
.corner { font-weight: 800; font-size: 21px; line-height: .9; white-space: pre-line; }
.corner.bottom { transform: rotate(180deg); align-self: flex-end; }
.pip { align-self: center; font-size: 48px; line-height: 1; }
.pile .card { transform: translate(calc(var(--depth) * -1px), calc(var(--depth) * -1px)); }
.spread-pile { height: calc(156px + (var(--pile-cards) - 1) * 34px); }
.spread-pile .pile-card { position: absolute; inset: 0 0 auto; height: 156px; transform: translateY(calc(var(--card-index) * var(--fan-offset, 34px))); }
.spread-pile { pointer-events: none; }
.spread-pile .pile-card, .spread-pile .rotate-handle { pointer-events: auto; }
.spread-pile.selected::after { inset: -8px -8px auto; height: 156px; }
.spread-pile .card { transform: none; }
.pile-count { position: absolute; right: -14px; bottom: -13px; min-width: 29px; height: 29px; display: grid; place-items: center; border-radius: 15px; color: #1a211d; background: #f2d376; border: 2px solid #28372f; font-weight: 850; z-index: 70; }
.rotate-handle { display: none; position: absolute; z-index: 90; place-items: center; border: 2px solid #26362e; color: #182019; background: #f2d376; box-shadow: 0 2px 5px #0007; }
.selected .rotate-handle { display: grid; }
.rotate-handle { width: 31px; height: 31px; top: -23px; right: -23px; border-radius: 50%; cursor: alias; }
.instructions { position: absolute; right: 26px; top: 24px; z-index: 100; width: min(340px, calc(100% - 52px)); padding: 18px 20px; border: 1px solid #cbb46e; border-radius: 12px; background: #16241fee; box-shadow: 0 12px 38px #0009; }
.instructions h2 { margin: 0 0 12px; }
.setup-panel { left: 50%; right: auto; top: 24px; width: min(460px,calc(100% - 36px)); transform: translateX(-50%); }
.setup-panel p { color: #cbd8d0; line-height: 1.4; }
.setup-list { display: grid; gap: 9px; margin: 14px 0; }
.setup-choice { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px; border: 1px solid #536b5e; border-radius: 8px; }
.setup-choice small { color: #b9c8bf; }
.setup-choice button { grid-column: 2; grid-row: 1 / span 2; }
dl { display: grid; grid-template-columns: 110px 1fr; gap: 9px; margin: 0; font-size: 14px; }
dt { color: #f2d376; font-weight: 800; } dd { margin: 0; color: #d6e0da; }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 8px 18px; color: #cbd8d0; background: #17241f; border-top: 1px solid #506a5c; font-size: 13px; }
.brand { color: #8fa49a; text-align: center; }
.lobby { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 35%, #27684b, #0e2d22 70%); }
.lobby[hidden] { display: none; }
.lobby-card { width: min(760px,100%); max-height: calc(100vh - 48px); overflow: auto; padding: 28px; border: 1px solid #d8b45b88; border-radius: 18px; background: #15261fee; box-shadow: 0 20px 70px #000b; }
.lobby-card h2 { margin: 3px 0 8px; font: 700 34px Georgia,serif; }
.eyebrow { margin: 0; color: #f2d376; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; }
.lobby-flow { display: grid; gap: 12px; margin-top: 18px; }
.lobby form { padding: 18px; border: 1px solid #536b5e; border-radius: 12px; background: #0d1b16aa; }
.lobby h3 { margin: 0 0 12px; }
.lobby label { display: grid; gap: 5px; margin: 10px 0; color: #d6e0da; font-size: 13px; }
.lobby input, .lobby select { width: 100%; padding: 10px; border: 1px solid #789486; border-radius: 7px; color: #17241f; background: #f4f1e7; font: inherit; }
.lobby details { margin: 10px 0; color: #b9c8bf; font-size: 13px; }
.lobby summary { cursor: pointer; }
.quick-start { padding: 10px 14px; border: 1px solid #536b5e; border-radius: 9px; background: #0d1b1680; }
.quick-start summary { color: #f2d376; font-weight: 750; }
.quick-start ol { margin: 10px 0; padding-left: 22px; line-height: 1.45; }
.quick-start p { margin: 8px 0 0; }
.quick-create { display: grid; gap: 7px; margin: 16px 0; }
.quick-create button { min-height: 48px; font-size: 18px; }
.quick-create small { color: #b9c8bf; }
.room-list { display: grid; gap: 6px; margin-top: 12px; }
.room-actions { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.room-end { padding: 8px 10px; font-size: 12px; }
.room-choice { width: 100%; text-align: left; font-size: 12px; }
.primary-choice { padding: 12px 14px; font-size: 14px; }
.manual-join { margin-top: 12px; }
.create-choice { padding: 14px 18px; border: 1px solid #536b5e; border-radius: 12px; background: #0d1b1680; }
.create-choice > summary { color: #f2d376; font-weight: 800; cursor: pointer; }
.create-choice form { margin-top: 12px; padding: 0; border: 0; background: none; }
.lobby label.inline-check { display: flex; align-items: center; gap: 8px; }
.lobby label.inline-check input { width: auto; }
.message { min-height: 20px; color: #f2d376; }
.invite-dialog { width: min(560px,calc(100% - 28px)); padding: 24px; border: 1px solid #d8b45b88; border-radius: 16px; color: #f6f3e8; background: #15261f; box-shadow: 0 20px 70px #000c; }
.invite-dialog::backdrop { background: #06130ddd; }
.invite-dialog form { position: relative; }
.invite-dialog h2 { margin: 0 35px 8px 0; font-family: Georgia,serif; }
.invite-dialog label { display: grid; gap: 6px; margin: 18px 0; }
.invite-dialog input { width: 100%; padding: 11px; border: 1px solid #789486; border-radius: 7px; color: #17241f; background: #fffdf4; font: inherit; }
.dialog-close { position: absolute; right: 0; top: -8px; padding: 3px 10px; font-size: 24px; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.button-link { display: inline-block; border: 1px solid #789486; border-radius: 7px; padding: 9px 18px; color: #f6f3e8; background: #29483b; text-decoration: none; cursor: pointer; font-weight: 650; }
.button-link:hover, .button-link:focus-visible { background: #37614f; outline: 2px solid #e2bf61; outline-offset: 1px; }
.ai-player-choice { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; padding-top: 16px; border-top: 1px solid #536b5e; }
.ai-player-choice h3, .ai-player-choice p { margin: 0 0 5px; }
.ai-player-choice p { color: #b9c8bf; font-size: 13px; }
.ai-player-choice button { flex: 0 0 auto; }
.ai-player-list { display: grid; gap: 7px; margin-top: 10px; }
.ai-player-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 9px; border: 1px solid #536b5e; border-radius: 7px; }
.ai-player-list button { padding: 6px 10px; }
@media (max-width: 700px), (max-height: 500px) {
  body { grid-template-rows: 42px 1fr; }
  .toolbar { min-height: 42px; height: 42px; align-items: center; gap: 8px; padding: 4px 7px; }
  h1 { font-size: 17px; }
  .full-title { display: none; }
  .mobile-title { display: inline; }
  .toolbar p, .room-summary span, footer { display: none; }
  .room-summary { display: block; min-width: 0; margin-left: auto; overflow: hidden; }
  .room-summary strong { display: block; max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .menu-toggle { display: block; flex: 0 0 auto; padding: 6px 10px; }
  .toolbar nav { display: none; position: absolute; z-index: 500; right: 6px; top: 40px; width: min(250px,calc(100vw - 12px)); max-height: calc(100vh - 48px); overflow-y: auto; gap: 8px; padding: 8px; border: 1px solid #88a697; border-radius: 10px; background: #15261ff5; box-shadow: 0 12px 32px #000c; }
  .toolbar nav.open { display: grid; }
  .toolbar .control-group { display: grid; grid-template-columns: 1fr 1fr; }
  .toolbar .control-title { grid-column: 1 / -1; padding: 2px 1px 0; }
  .toolbar .game-choice { grid-column:1 / -1; justify-content:space-between; }
  .toolbar .game-choice select { width:72%; max-width:none; }
  .toolbar nav button { min-height: 42px; padding: 7px 5px; font-size: 12px; }
  button { padding: 7px 9px; font-size: 12px; }
  .table::before { inset: 5px; border-radius: 18px; }
  .private-hand { left: 6px; right: 6px; bottom: 5px; min-height: 96px; padding: 7px 8px; }
  .private-hand > div:not(.hand-cards):not(.hand-view-controls) { display:none; }
  .hand-view-controls { right:7px; bottom:4px; }
  .hand-card { width:calc(52px * var(--hand-zoom,1)); height:calc(73px * var(--hand-zoom,1)); flex-basis:calc(52px * var(--hand-zoom,1)); margin-right:calc(-4px * var(--hand-zoom,1)); font-size:calc(14px * var(--hand-zoom,1)); }
  .player-seat { min-width: 0; height: 34px; gap: 4px; padding: 3px 6px; border-radius: 17px; }
  .player-seat.current-turn { border-width: 2px; }
  .player-avatar, .opponent-hand i { display: none; }
  .seat-details { min-width: 0; display: flex; align-items: center; gap: 4px; }
  .seat-details strong { max-width: 62px; font-size: 9px; }
  .opponent-hand { position: static; min-width: 0; width: auto; height: auto; margin: 0; }
  .opponent-count { position: static; width: 22px; min-width: 22px; height: 22px; font-size: 12px; }
  .turn-label { right: -3px; top: -10px; font-size: 7px; padding: 1px 4px; }
  .instructions { top: 8px; right: 8px; width: calc(100% - 16px); max-height: calc(100% - 16px); overflow-y: auto; }
}
@media (pointer: coarse) { .rotate-handle { width: 44px; height: 44px; top: -31px; right: -31px; font-size: 22px; } }