/* Original illustrated porch, composed from local scene/table/character layers.
   The artwork never contains dominoes, labels or game state. All inputs stay
   on the existing live DOM; decorative artwork is pointer-inert. */
body { background:#13232c url('./assets/porch/scene.webp') center center / cover no-repeat; }
body[data-table-layout] .game-card,
body[data-table-layout].hand-setup .game-card,
body[data-table-layout] .game-card:has(> .event-cue:not([hidden])) {
  background:linear-gradient(#0a18231a,#161b2422),url('./assets/porch/scene.webp') center center / cover no-repeat;
  border-color:#9c7044; box-shadow:0 8px 28px #0006;
}
.porch-character-art { display:none; visibility:hidden; pointer-events:none; user-select:none; -webkit-user-drag:none; }
body .game-card .board-surface {
  background:linear-gradient(#34261c59,#34261c59),url('./assets/porch/table.webp') center center / cover no-repeat #986335;
  border:4px solid #714321; border-radius:16px;
  box-shadow:inset 0 0 0 1px #e1b778,inset 0 4px 10px #34190855,0 5px 10px #0005;
}
body .game-card .board-empty { color:#fff3d3; text-shadow:0 1px 3px #321c0a; background:#39200ce6; border:1px solid #d8ac6d88; border-radius:8px; padding:7px 10px; }
body .game-card .toolbar-actions { background:#201b17ed; border-color:#bd8e5188; box-shadow:0 1px 4px #0005; }
body .game-card .seat-you { background:linear-gradient(#54301fe8,#2d1c14f5); border-top:2px solid #c49356; }
body .game-card .seat-you::after { background:linear-gradient(#9b6136,#4b2918); border-color:#e1b578; }
body .game-card .move-area { background:#231c17f2; border-color:#bd8e5188; }
body .game-card .play-mode-strip { background:#18262fe8; border-radius:8px; }
body .game-card .table-readout small { color:#fff3d4; background:#231b13ed; border:1px solid #c5a16b; border-radius:5px; padding:3px 7px; text-shadow:none; }
body .game-card .layout-note { text-shadow:0 1px 3px #261708; }
.home-screen {
  background:linear-gradient(90deg,#101e27ed 0%,#101e27dc 48%,#101e2788 100%),url('./assets/porch/scene.webp') center center / cover no-repeat;
  border-color:#b58b56; box-shadow:inset 0 0 0 1px #e2be7d44,0 12px 40px #0005;
}
.home-brand h1 { font-family:Georgia,'Times New Roman',serif; color:#ffe6a9; text-shadow:0 3px 2px #20170f,0 0 15px #d9a34d33; }
.home-brand h1 span { color:#f2ce85; }
.home-invitation { color:#fff1d6; }
/* Below this usable-size threshold the existing compact seating/input budget
   remains intact. Large bodies are not squeezed into tiny touch surfaces. */
@media (min-width:700px) and (min-height:700px) {
  body[data-table-layout][data-porch-scene="full"] { --porch-seat-width:clamp(112px,15vw,180px); --porch-top-height:174px; --porch-actions-height:82px; --hand-label-height:40px; --hand-dock-height:128px; }
  body[data-table-layout][data-porch-scene="full"] .game-card,
  body[data-table-layout][data-porch-scene="full"].hand-setup .game-card,
  body[data-table-layout][data-porch-scene="full"] .game-card:has(> .event-cue:not([hidden])) {
    grid-template-columns:var(--porch-seat-width) minmax(0,1fr) var(--porch-seat-width);
    grid-template-rows:48px var(--porch-top-height) minmax(0,1fr) var(--hand-dock-height) var(--porch-actions-height);
    grid-template-areas:"toolbar toolbar toolbar" "top top top" "left board right" "you you you" "actions actions actions";
    gap:0;
  }
  body[data-table-layout][data-porch-scene="full"] .game-card .toolbar-actions {
    grid-area:toolbar; align-self:stretch; height:48px; min-height:48px; padding:2px 8px;
    display:flex; flex-wrap:nowrap; gap:5px; justify-content:flex-end;
  }
  body[data-table-layout][data-porch-scene="full"] .game-card .toolbar-actions .table-title { display:flex; margin-right:auto; min-width:0; }
  body[data-table-layout][data-porch-scene="full"] .game-card .table-title-name { font-family:Georgia,'Times New Roman',serif; font-size:21px; letter-spacing:0; color:#ffdfa2; margin:0; }
  body[data-table-layout][data-porch-scene="full"] .game-card .round-badge { display:none; }
  body[data-table-layout][data-porch-scene="full"] .game-card .toolbar-actions .button,body[data-table-layout][data-porch-scene="full"] .game-card .toolbar-actions .mode-action { min-width:44px; min-height:44px; height:44px; padding:5px 9px; font-size:13px; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) {
    width:calc(var(--porch-seat-width) - 8px); height:244px; margin:0; padding:0 4px 4px;
    grid-template-columns:minmax(0,1fr) 46px;
    grid-template-rows:166px 26px 24px 20px;
    gap:0 3px; align-self:center; justify-self:center; border:0; border-radius:4px;
    background:linear-gradient(transparent 0 166px,#e9cfa0 166px,#c4a16f 100%);
    text-shadow:none; box-shadow:none;
  }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip[data-seat="1"] { grid-area:left; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip[data-seat="2"] {
    grid-area:top; width:228px; height:174px; align-self:end; justify-self:center;
    grid-template-columns:minmax(0,1fr) 48px; grid-template-rows:120px 25px 24px;
    background:linear-gradient(transparent 0 120px,#e9cfa0 120px,#c4a16f 100%);
  }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip[data-seat="3"] { grid-area:right; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .player-avatar {
    grid-column:1 / -1; grid-row:1; align-self:end; justify-self:center;
    width:82px; height:82px; margin-bottom:8px; border-radius:16px;
    border:3px solid #e9c38c; box-shadow:0 4px 8px #0006;
  }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .bot-avatar {
    width:100%; height:166px; margin:0; border:0; border-radius:0; overflow:visible;
    position:relative; background:transparent; box-shadow:none; filter:drop-shadow(0 4px 3px #0005);
  }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip[data-seat="2"] .bot-avatar { width:190px; height:120px; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .porch-character-art { display:block; position:relative; z-index:1; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .bot-avatar > svg { display:block; position:absolute; width:82px; height:82px; top:8px; left:50%; margin-left:-41px; border-radius:16px; border:3px solid #e9c38c; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .bot-avatar[data-porch-loaded="true"] > svg { display:none; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip .bot-avatar[data-porch-loaded="true"] > .porch-character-art { visibility:visible; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-name { grid-column:1; grid-row:2; align-self:center; text-align:left; padding-left:3px; font-size:15px; line-height:22px; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .name { color:#302013; font-size:15px; line-height:22px; font-weight:800; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .points { grid-column:2; grid-row:2; color:#302013; font-size:24px; line-height:26px; text-align:center; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-meta { grid-column:1 / -1; grid-row:3; height:24px; min-height:24px; display:flex; align-items:center; justify-content:center; gap:5px; color:#34291d; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-count { font-size:12px; line-height:18px; color:#34291d; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-state { display:flex; gap:3px; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-qualification { grid-column:1 / -1; grid-row:4; min-height:20px; height:20px; font-size:11px; line-height:16px; color:#302013; white-space:nowrap; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip[data-seat="2"] .rail-meta { grid-column:1; grid-row:3; justify-content:flex-start; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip[data-seat="2"] .rail-qualification { grid-column:2; grid-row:3; font-size:10px; white-space:normal; line-height:11px; height:24px; min-height:24px; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip.current:not([data-seat="0"]) { box-shadow:0 3px 0 #f6d274,0 7px 12px #0003; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .control-badge { color:#fff4d8; background:#473b2a; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-turn { background:#174e44; color:#fff7d9; }
  body[data-table-layout][data-porch-scene="full"] .game-card .play-mode-strip {
    grid-area:top; align-self:start; justify-self:start; width:calc((100% - 248px) / 2); height:auto; min-height:44px; max-height:100px; margin:10px 0 0 8px; padding:7px;
  }
  body[data-table-layout][data-porch-scene="full"] .game-card #playModeStrip[data-critical="true"] { width:calc((100% - 248px) / 2); justify-self:start; }
  body[data-table-layout][data-porch-scene="full"] .game-card .play-mode-strip strong,body[data-table-layout][data-porch-scene="full"] .game-card .play-mode-strip small { font-size:13px; line-height:16px; }
  body[data-table-layout][data-porch-scene="full"] .game-card .event-cue {
    grid-area:top; align-self:start; justify-self:end; width:calc((100% - 248px) / 2); height:auto; min-height:64px; max-height:150px; margin:10px 8px 0 0; padding:6px;
  }
  body[data-table-layout][data-porch-scene="full"] .game-card:has(> .event-cue:not([hidden])) #scoreStrip .score-chip[data-seat="2"],body[data-table-layout][data-porch-scene="full"] .game-card:has(> #playModeStrip[data-critical="true"]) #scoreStrip .score-chip[data-seat="2"] { justify-self:center; }
  body[data-table-layout][data-porch-scene="full"] .game-card .event-cue #eventCueTitle { font-size:21px; line-height:24px; }
  body[data-table-layout][data-porch-scene="full"] .game-card .move-area,body[data-table-layout][data-porch-scene="full"].hand-setup .game-card .move-area,body[data-table-layout][data-porch-scene="full"] .game-card .move-area:has(> .setup-skip:not([hidden])) {
    grid-area:actions; align-self:stretch; height:82px; min-height:82px; padding:2px 96px 2px 8px;
    grid-template-columns:minmax(0,1fr) 54px 44px; grid-template-rows:32px 44px; gap:0 4px;
  }
  body[data-table-layout][data-porch-scene="full"] .game-card .move-instruction { grid-column:1 / -1; grid-row:1; font-size:15px; line-height:16px; -webkit-line-clamp:2; }
  body[data-table-layout][data-porch-scene="full"] .game-card .move-actions { grid-column:1; grid-row:2; display:flex; height:44px; min-height:44px; grid-template-columns:none; grid-auto-rows:auto; gap:4px; }
  body[data-table-layout][data-porch-scene="full"] .game-card .move-actions .button { width:auto; min-width:44px; height:44px; min-height:44px; padding:4px 9px; font-size:13px; line-height:15px; }
  body[data-table-layout][data-porch-scene="full"] .game-card #skipSetupAnimationButton { grid-column:2; grid-row:2; justify-self:stretch; }
  body[data-table-layout][data-porch-scene="full"] .game-card #quickSoundToggle { grid-column:3; grid-row:2; justify-self:center; }
  body[data-table-layout][data-porch-scene="full"] .game-card #quickMusicToggle { grid-area:actions; align-self:end; justify-self:end; width:84px; height:44px; min-width:44px; margin:0 7px 4px 0; padding:4px; font-size:12px; line-height:14px; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip[data-seat="0"] { width:calc(100% - 120px); height:40px; grid-template-columns:36px minmax(0,1fr) 36px 44px 84px; grid-template-rows:40px; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip[data-seat="0"] .player-avatar { width:34px; height:34px; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip[data-seat="0"] .name { font-size:14px; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip[data-seat="0"] .points { font-size:21px; }
  body[data-table-layout][data-porch-scene="full"] .game-card #scoreStrip .score-chip[data-seat="0"] .rail-qualification { font-size:12px; }
  body[data-table-layout][data-porch-scene="full"] .game-card .turn-label { font-size:15px; }
}
@media (forced-colors:active) {
  body,body[data-table-layout] .game-card,.home-screen,body .game-card .board-surface { background:Canvas; }
  .porch-character-art { display:none!important; }
  body[data-table-layout] .game-card #scoreStrip .score-chip .bot-avatar > svg { display:block!important; }
  body[data-table-layout] .game-card #scoreStrip .score-chip:not([data-seat="0"]) { background:Canvas; color:CanvasText; }
  body[data-table-layout] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .name,body[data-table-layout] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .points,body[data-table-layout] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-count,body[data-table-layout] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-qualification { color:CanvasText; }
}