/* Shared responsive layout above the legacy interaction layer. Theme files own decoration. */
:root {
  --simple-bg:#090c0b;--simple-surface:#111615;--simple-surface-2:#111615;
  --simple-felt:#0b211c;--simple-line:#35423c;--simple-line-strong:#69736e;
  --simple-text:#f2f3ef;--simple-muted:#bec5c0;--simple-accent:#d9dedc;
  --simple-green:#283c32;--simple-red:#543d3d;--gold:#d9dedc;
}
html,body {margin:0;width:100%;height:100%;background:#090c0b;color:#f2f3ef;font-family:'Apple SD Gothic Neo','Noto Sans KR',sans-serif;}
* {box-sizing:border-box;}
.preview-shell {display:block;padding:0;height:100dvh;min-height:0;background:#090c0b;}
.phone-frame {width:min(100%,480px);height:100%;margin:auto;padding:0;border:0;border-radius:0;background:#090c0b;box-shadow:none;}
.phone {position:relative;width:100%;height:100%;min-height:0;aspect-ratio:auto;display:block;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);overflow:hidden;border:0;border-radius:0;background:#090c0b;box-shadow:none;container-type:inline-size;}
.phone::before,.phone::after,.build-note {display:none;}
.hidden,[hidden] {display:none!important;}
button {font:inherit;color:inherit;touch-action:manipulation;}
button:focus-visible {outline:2px solid #d9dedc;outline-offset:3px;}
.main-menu-screen {position:relative;inset:auto;width:100%;height:100%;padding:0;overflow:auto;background:#090c0b;}
.lobby-artboard:not(.debug-layout) {position:relative;display:flex;flex-direction:column;align-items:center;width:100%;min-height:760px;height:100%;aspect-ratio:auto;padding:120px 24px 12px;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#141a16 0%,#090c0b 72%);transform:none;}
.sq-blossom {position:absolute;width:164px;height:auto;pointer-events:none;opacity:.8;z-index:0;}
.sq-blossom-top {top:12px;left:-15px;transform:rotate(-18deg);}
.sq-blossom-bottom {bottom:4px;right:-25px;width:138px;transform:rotate(180deg);opacity:.55;}
.sq-lobby-settings {position:absolute;top:12px;right:16px;width:48px;height:48px;padding:0;font-size:28px;background:none;border:0;z-index:2;}
.sq-hero,.sq-lobby-profile,.sq-actions,.sq-legal {position:relative;z-index:1;width:100%;text-align:center;}
.sq-hero {margin-bottom:auto;}
.sq-title {display:block;width:240px;height:154px;object-fit:contain;margin:0 auto;}
.sq-tagline {margin:12px 0 24px;color:#bec5c0;font-size:16px;line-height:28px;letter-spacing:1px;}
.sq-lobby-profile {display:flex;flex-direction:column;align-items:center;margin-bottom:26px;gap:8px;}
.sq-lobby-avatar {padding:0;width:88px;height:88px;border:1px solid #99a39d;border-radius:16px;overflow:hidden;background:#1b201f;}
.sq-lobby-avatar img {display:block;width:100%;height:100%;object-fit:cover;}
.sq-account {position:static;display:block;width:auto;max-width:100%;height:24px;min-height:24px;padding:0;border:0;background:none;box-shadow:none;font-size:18px;line-height:24px;}
#mainMemberNickname {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#mainCoins {position:static;display:block;width:auto;height:34px;margin:0;color:#f2f3ef;font-size:26px;line-height:34px;background:none;border:0;font-variant-numeric:tabular-nums;}
.sq-actions {display:grid;gap:12px;}
.sq-actions button {position:static;inset:auto;width:100%;height:52px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:12px;margin:0;padding:8px 12px;border:1px solid #69736e;border-radius:16px;background:linear-gradient(#1b201f,#101413);box-shadow:none;transform:none;color:#f2f3ef;font-size:17px;font-weight:650;}
.sq-actions button::before,.sq-actions button::after {display:none;}
.sq-actions #mainSoloButton {height:60px;border:1.5px solid #d9dedc;font-size:22px;}
.sq-arrow {font-size:28px;font-weight:400;}
.sq-secondary {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sq-actions #mainOnlineButton {height:48px;background:none;border:0;font-size:15px;color:#bec5c0;}
.sq-legal {margin:14px 0 0;color:#99a39d;font-size:11px;line-height:26px;}
.game-artboard:not(.debug-layout) {position:relative;inset:auto;display:grid;grid-template-rows:44px 154px minmax(238px,1fr) 132px 112px;width:100%;height:100%;min-height:680px;aspect-ratio:auto;padding:0;margin:0;background:#090c0b;transform:none;overflow:visible;}
.game-artboard .game-ui-art,.game-artboard>.game-hand-panel,.game-artboard>.game-footer-ornament,.game-field-label,.simple-security {display:none;}
.game-artboard:not(.debug-layout)>.app-bar,.game-artboard:not(.debug-layout)>.opponent,.game-artboard:not(.debug-layout)>.player,.game-artboard:not(.debug-layout)>.table-zone,.game-artboard:not(.debug-layout)>.hand {position:relative;inset:auto;width:100%;height:100%;min-width:0;min-height:0;margin:0;border:0;border-image:none;border-radius:0;box-shadow:none;background:#090c0b;contain:none;}
.game-artboard:not(.debug-layout)>.app-bar {display:flex;align-items:center;gap:4px;padding:0 12px;grid-row:1;}
.sq-small-brand {margin-right:auto;line-height:1.1;}
.sq-small-brand small {display:block;font-size:10px;color:#bec5c0;}
.sq-small-brand strong {font-size:18px;letter-spacing:1px;}
#homeButton,#opponentSettings {position:static;inset:auto;display:block;width:auto;min-width:48px;height:40px;padding:0 8px;font-size:14px;border:0;background:none;border-radius:8px;box-shadow:none;}
.game-artboard:not(.debug-layout)>.opponent {grid-row:2;display:grid;grid-template-rows:56px 18px 62px;gap:1px;padding:8px 16px;overflow:visible;}
.game-artboard:not(.debug-layout)>.player {grid-row:4;display:grid;grid-template-rows:56px 62px;gap:0;padding:6px 16px 8px;overflow:visible;}
.sq-player-head {display:flex;align-items:center;gap:12px;min-width:0;}
.character-avatar,#playerAvatar {position:relative;inset:auto;flex:0 0 48px;width:48px;height:48px;padding:0;margin:0;aspect-ratio:1;border:1px solid #69736e;border-radius:12px;background:#111615;box-shadow:none;overflow:visible;}
.character-avatar img {display:block;width:100%;height:100%;object-fit:cover;border-radius:11px;}
.sq-player-info {flex:1;min-width:0;}
.sq-name {display:flex;gap:5px;height:24px;min-width:0;align-items:center;}
#opponentName,#playerIdentityName {position:static;display:block;min-width:0;max-width:100%;width:auto;margin:0;font-size:18px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f2f3ef;text-shadow:none;}
.sq-metrics {display:flex;align-items:center;flex-wrap:wrap;gap:2px 12px;min-height:24px;}
#playerScore,#opponentScore {position:static;inset:auto;width:auto;height:auto;display:block;margin:0;white-space:nowrap;font-size:16px;line-height:24px;color:#f2f3ef;text-shadow:none;}
.wallet,#playerWallet,#opponentWallet {position:relative;inset:auto;display:block;width:auto;min-width:0;height:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;overflow:visible;}
.wallet i,.wallet::before,.wallet::after {display:none;}
#coins,#opponentCoins {display:block;font-size:17px;line-height:24px;font-weight:700;color:#f2f3ef;font-variant-numeric:tabular-nums;white-space:nowrap;}
#quickChatButton {position:static;flex:0 0 48px;inset:auto;width:48px;height:48px;min-height:48px;padding:0;border:1px solid #69736e;border-radius:14px;background:#111615;box-shadow:none;font-size:14px;}
.opponent-hand {position:relative;inset:auto;width:112px;height:18px;margin:0 0 0 auto;overflow:hidden;}
.mini-back {top:0;width:12px;height:18px;border:0;border-radius:2px;background:var(--sq-back) center/100% 100% no-repeat;box-shadow:none;}
.capture-strip,#opponentCaptured,#playerCaptured {position:relative;inset:auto;display:grid;width:100%;height:100%;grid-template-columns:repeat(4,1fr);gap:4px;padding:0;margin:0;background:none;border:0;box-shadow:none;}
.capture-pile {height:100%;background:transparent;border:0;border-right:1px solid #35423c;border-radius:0;box-shadow:none;}
.capture-pile:last-child {border-right:0;}
.capture-pile::before {display:none;}
.capture-pile::after {position:absolute;left:0;right:0;bottom:0;top:auto;height:18px;line-height:18px;text-align:center;font-size:12px;color:#bec5c0;background:none;border:0;text-shadow:none;}
.capture-pile.kind-bright,.capture-pile.kind-animal,.capture-pile.kind-ribbon,.capture-pile.kind-junk {background:none;}
.capture-mini-card {top:0;object-fit:contain;}
.game-artboard:not(.debug-layout)>.table-zone {grid-row:3;background:radial-gradient(ellipse at center,#102a23,#0b211c 75%);border-block:1px solid #35423c;overflow:hidden;}
.game-artboard .field {position:absolute;inset:8px 12px 32px;width:auto;height:auto;display:block;margin:0;padding:0;overflow:visible;transform:none;}
.field .game-card {position:absolute;height:auto;aspect-ratio:2/3;margin:0;}
.game-artboard .deck {position:absolute;left:50%;top:calc(50% - 12px);right:auto;bottom:auto;transform:translate(-50%,-50%);padding:0;border:0;border-radius:6px;background:var(--sq-back) center/contain no-repeat;box-shadow:0 4px 5px #0007;z-index:12;}
.game-artboard:not(.debug-layout) .deck { overflow: visible; isolation: isolate; }
.game-artboard:not(.debug-layout) .deck::before,
.game-artboard:not(.debug-layout) .deck::after {
  background: var(--sq-back) center/contain no-repeat;
  border: 0;
  z-index: 0;
}
.game-artboard:not(.debug-layout) .deck::before {
  transform: translate(-8px, -8px) rotate(-1.2deg);
}
.game-artboard:not(.debug-layout) .deck::after {
  transform: translate(-4px, -4px) rotate(-.5deg);
}
.game-deck-frame {display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.zone-title {position:absolute;top:4px;right:12px;left:auto;bottom:auto;width:auto;height:20px;padding:0;border:0;background:none;font-size:12px;color:#99a39d;z-index:13;}
.turn-status {position:absolute;top:auto;bottom:3px;left:50%;right:auto;transform:translateX(-50%);height:24px;min-height:0;max-width:90%;padding:0 12px;line-height:24px;border:0;background:transparent;box-shadow:none;font-size:14px;z-index:14;}
.turn-status strong {font-size:14px;color:#d9dedc;white-space:nowrap;}
.turn-status i {display:none;}
.game-artboard:not(.debug-layout)>.hand {grid-row:5;overflow:hidden;touch-action:manipulation;border-top:1px solid #35423c;}
.hand .game-card,.hand .game-card:nth-child(even) {top:50%;height:calc(var(--hand-card-width)*1.5);width:var(--hand-card-width);transform:translateY(-50%);border-radius:4px;}
.hand button.game-card:hover,.hand button.game-card:focus {transform:translateY(-50%);outline:none;}
.hand .game-card.pending-hand-card {transform:translateY(-50%);outline:2px solid #d9dedc;outline-offset:2px;}
.hand::after {display:none;}
.game-card {border-radius:4px;box-shadow:0 3px 5px #0008;}
.game-card.match-choice::after {
  background: conic-gradient(from var(--choice-led-angle), #ff526c, #ffbd45, #fff477, #61ee9b, #4bdfff, #7885ff, #e66bff, #ff526c);
  animation: choiceLedOrbit 2.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .game-card.match-choice::after { animation: none; }
}
.card-back,.opening-deal-back {background-image:var(--sq-back);}
.overlay {background:#000b;z-index:80;}
.dialog {max-width:360px;max-height:80dvh;overflow:auto;padding:20px;border:1px solid #69736e;border-radius:20px;background:#111615;color:#f2f3ef;box-shadow:0 20px 50px #0008;}
.dialog h2,.dialog h3,.dialog strong,.dialog p,.dialog label {color:inherit;}
.dialog button:not(.game-card):not(.character-option) {border-color:#69736e;background-color:#1b201f;color:#f2f3ef;box-shadow:none;}
.quick-chat-bubble {position:absolute;top:0;left:68px;right:64px;bottom:auto;max-width:calc(100% - 136px);z-index:25;font-size:14px;background:#28332c;border:1px solid #69736e;color:#f2f3ef;}
.player-money-delta,.opponent-money-delta {top:4px;right:16px;color:#b9e0c9;}
.game-artboard[data-size=short] {grid-template-rows:40px 120px minmax(224px,1fr) 112px 104px;min-height:600px;}
.game-artboard[data-size=compact] {grid-template-rows:40px 96px minmax(252px,1fr) 96px 84px;min-height:568px;}
.game-artboard[data-size=short]>.opponent {grid-template-rows:48px 12px 44px;padding-block:6px;}
.game-artboard[data-size=short]>.player {grid-template-rows:48px 52px;padding-block:6px;}
.game-artboard[data-size=compact]>.opponent {grid-template-rows:44px 0px 40px;padding-block:5px;}
.game-artboard[data-size=compact]>.player {grid-template-rows:44px 40px;padding-block:6px;}
.game-artboard[data-size=compact] .opponent-hand {display:none;}
.game-artboard[data-size=compact] .character-avatar,.game-artboard[data-size=short] .character-avatar {width:40px;height:40px;flex-basis:40px;}
.game-artboard[data-size=compact] .sq-player-head {gap:8px;}
.game-artboard[data-size=compact] #opponentName,.game-artboard[data-size=compact] #playerIdentityName {font-size:16px;line-height:20px;}
.game-artboard[data-size=compact] #coins,.game-artboard[data-size=compact] #opponentCoins,.game-artboard[data-size=compact] #playerScore,.game-artboard[data-size=compact] #opponentScore {font-size:14px;line-height:20px;}
.phone[data-size=compact] {overflow-y:auto;}
#scoreSummary {display:none;}
.character-avatar[data-turn-active=true] {outline:2px solid #d9dedc;outline-offset:2px;box-shadow:0 0 10px #c6dad333;border-color:#d9dedc;}
.character-avatar::before,.character-avatar::after {display:none;}
.game-artboard:not(.debug-layout)>.opponent,.game-artboard:not(.debug-layout)>.player {grid-template-columns:minmax(0,1fr);}
#coins,#opponentCoins {position:static;inset:auto;transform:none;text-align:left;}
@media(max-width:359px){.game-artboard:not(.debug-layout)>.player,.game-artboard:not(.debug-layout)>.opponent{padding-inline:12px;}.sq-metrics{gap:0 8px;}#coins,#opponentCoins{font-size:15px;}#quickChatButton{flex-basis:44px;width:44px;}}
@media(max-height:759px){.lobby-artboard:not(.debug-layout){padding-top:76px;min-height:650px;}.sq-title{height:124px;width:220px;}.sq-tagline{margin-bottom:16px;font-size:14px;}.sq-lobby-avatar{width:72px;height:72px;}.sq-lobby-profile{margin-bottom:18px;}.sq-legal{margin-top:2px;}}