/* Opt-in only. Default layout remains the existing responsive table. */
#openBattleLayout { justify-self:start;min-height:38px }
.layout-shortcut { display:none }
body.screen-game #battleLayoutShortcut { display:block;position:fixed;right:max(8px,env(safe-area-inset-right));bottom:max(6px,env(safe-area-inset-bottom));z-index:190;padding:5px 10px;min-height:30px;font-size:12px;box-shadow:0 2px 8px #0002 }
.layout-editor { width:min(1320px,calc(100vw - 24px));height:min(900px,calc(100dvh - 24px));max-width:none;max-height:none;margin:auto;padding:18px;border:1px solid #aaa;border-radius:8px;background:#f2f2ef;color:#252525;font:13px/1.6 var(--font-ui,"Microsoft YaHei",sans-serif);overflow:hidden }
.layout-editor[open] { display:flex;flex-direction:column;gap:12px }
.layout-editor::backdrop { background:#1515158c;backdrop-filter:blur(3px) }
.layout-editor button,.layout-editor select,.layout-editor input { font:inherit }
.layout-editor button { min-height:34px;padding:5px 12px;white-space:normal }
.layout-editor-head,.layout-editor-toolbar,.layout-editor-foot { display:flex;align-items:center;gap:12px;flex:none }
.layout-editor-head { justify-content:space-between;border-bottom:1px solid #ccc;padding-bottom:10px }
.layout-editor h2 { margin:0;font:400 25px/1.3 'Songti SC','SimSun',serif }
.layout-editor h3 { font-size:14px;margin:0 }
.layout-editor p { margin:4px 0;color:#62625d }
.layout-editor-toolbar { flex-wrap:wrap }
.layout-editor-toolbar label { display:flex;align-items:center;gap:7px }
.layout-editor-toolbar input { width:16px;height:16px;margin:0 }
.layout-editor select { padding:6px;min-height:34px;max-width:100% }
.layout-editor-body { display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:16px;flex:1;min-height:0;overflow:hidden }
.layout-preview-viewport { min-height:0;overflow:auto;overscroll-behavior:contain;background:#e6e6e1;border:1px solid #ccc;padding:14px;display:flex;align-items:flex-start;justify-content:center }
.layout-preview { position:relative;width:100%;flex:none;background:#f0f0ed;box-shadow:0 3px 20px #0002;background-image:linear-gradient(#22208 1px,transparent 1px),linear-gradient(90deg,#22208 1px,transparent 1px);background-size:5% 5%;container-type:inline-size }
.layout-preview-portrait { width:min(100%,340px) }
.layout-tile { position:absolute;min-width:0;min-height:0;margin:0;padding:0;border:1px solid #9c9c94;border-radius:2px;cursor:grab;touch-action:none;user-select:none;color:#222;outline:none;background:#f3f3ef88 }
.layout-tile.selected { outline:2px solid #242422;outline-offset:1px;box-shadow:0 2px 8px #0003 }
.layout-tile:focus-visible { outline:3px solid #242422 }
.layout-tile-label { position:absolute;top:0;left:0;max-width:100%;font-size:clamp(8px,1.4cqw,12px);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#f2f2efed;color:#222;padding:1px 3px;pointer-events:none }
.layout-tile-sample { width:100%;height:100%;display:flex;gap:3px;align-items:center;justify-content:center;overflow:hidden;font-size:clamp(7px,1.2cqw,11px);line-height:1.7;white-space:pre-line;background:#f4f4ef;background-position:center;background-size:100% 100%;pointer-events:none }
.layout-kind-mat .layout-tile-sample { background-color:#29434a }
.layout-kind-mat { background:none }
.layout-kind-hand .layout-tile-sample { align-items:start }
.layout-tile-sample img { height:85%;max-width:30%;width:auto;object-fit:contain }
.layout-kind-hand img { height:190% }.layout-kind-single img { max-width:100% }.layout-kind-hp img,.layout-kind-judgment img { transform:rotate(90deg);height:100%;max-width:100% }
.layout-resize-handle { position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:22px;height:22px;background:#292927;color:white;border:2px solid #f4f4ef;border-radius:3px;cursor:nwse-resize;font-size:12px;touch-action:none }
.layout-tile:not(.selected) .layout-resize-handle { display:none }
.layout-inspector { min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:2px 4px }
.layout-property { display:grid;grid-template-columns:minmax(0,1fr) 58px 12px;gap:5px;align-items:center }
.layout-property>span { grid-column:1/-1 }
.layout-property input[type=range] { width:100%;min-width:0;accent-color:#292927 }
.layout-property input[type=number] { width:100%;padding:3px }
.layout-layer-buttons { display:flex;gap:6px }.layout-layer-buttons button { flex:1;padding:5px }
.layout-help { font-size:12px }
.layout-editor-foot { border-top:1px solid #ccc;padding-top:10px;justify-content:space-between }
.layout-save-status { flex:1;font-size:12px }
@media(max-width:700px) {
  .layout-editor { width:calc(100vw - 10px);height:calc(100dvh - 10px);padding:10px;gap:8px }
  .layout-editor h2 { font-size:20px }.layout-editor-head p { font-size:11px }
  .layout-editor-toolbar { gap:8px }.layout-editor-body { grid-template-columns:1fr;grid-template-rows:minmax(180px,1fr) minmax(130px,.65fr);gap:8px }
  .layout-preview-viewport { padding:10px }.layout-preview-portrait { width:min(100%,230px) }
  .layout-inspector { display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:8px }
  .layout-inspector>h3,.layout-inspector>select,.layout-help { grid-column:1/-1 }
  .layout-editor-foot { flex-wrap:wrap;gap:6px }.layout-save-status { order:2;flex-basis:100% }
}
@media(max-height:500px) and (min-width:701px) {
  .layout-editor { padding:8px;gap:6px;height:calc(100dvh - 8px) }.layout-editor-head p { display:none }.layout-editor h2 { font-size:20px }
  .layout-editor-body { grid-template-columns:minmax(0,1fr) 235px }.layout-editor-head,.layout-editor-foot { padding:4px 0 }
}

.layout-availability { font-size:12px;color:#666;margin:0 }
.layout-kind-board .layout-tile-sample { display:flex;flex-direction:column;background:none }
.layout-board-sample { flex:1;width:100%;background-size:100% 100%;display:grid;place-items:center;color:#f2ebcc;font:14px 'SimSun',serif;border:1px solid #d9ccb6 }
.layout-board-sample:first-child { rotate:180deg }
.layout-editor input:disabled { opacity:.4 }
body.screen-game #battleLayoutShortcut[hidden] { display:none }
/* Fixed outer modules; the two playmats retain their complete original subtree,
   internal card geometry, targeting handlers, artwork, and orientation. */
body.screen-game.battle-layout-custom .game-layout,
body.screen-game.battle-layout-custom .hand-column,
body.screen-game.battle-layout-custom .side-column,
body.screen-game.battle-layout-custom .table-status,
body.screen-game.battle-layout-custom .table-status .info-strip {
  display:contents!important;transform:none!important;rotate:none!important;filter:none!important;contain:none!important;container-type:normal!important;overflow:visible!important
}
body.screen-game.battle-layout-custom .tool-rail,
body.screen-game.battle-layout-custom .mobile-toolbar,
body.screen-game.battle-layout-custom .mobile-drawer-close,
body.screen-game.battle-layout-custom #toggleTableTools { display:none!important }
body.screen-game.battle-layout-custom .layout-module {
  position:fixed!important;inset:auto!important;left:var(--layout-x)!important;top:var(--layout-y)!important;width:var(--layout-w)!important;height:var(--layout-h)!important;
  min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;box-sizing:border-box!important;margin:0!important;aspect-ratio:auto!important;
  transform:none!important;rotate:none!important;translate:none!important;opacity:var(--layout-opacity)!important;z-index:var(--layout-z)!important;
  scrollbar-width:thin;overscroll-behavior:contain
}
body.screen-game.battle-layout-custom .layout-module:not([hidden]) { display:block!important }
body.screen-game.battle-layout-custom .layout-module[hidden] { display:none!important }
body.screen-game.battle-layout-custom .layout-module:not(.field-column):not(.hand-panel):not(.opponent-hand-tray) { padding:7px!important;background:#f0f0ed!important;overflow:auto!important;color:#252525;border:1px solid #ccc;border-radius:4px }
body.screen-game.battle-layout-custom .field-column.layout-module { display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:start!important;gap:0!important;padding:0!important;overflow:auto!important;container-type:inline-size!important }
body.screen-game.battle-layout-custom .field-column>.player-zone { margin:0!important;padding:0!important;width:100%!important;border:0!important }
body.screen-game.battle-layout-custom .field-column .zone-head { display:none!important }
body.screen-game.battle-layout-custom .field-column .playmat { width:100%!important;height:auto!important;aspect-ratio:600/350!important;border-radius:0!important }
body.screen-game.battle-layout-custom .hand-panel,body.screen-game.battle-layout-custom .opponent-hand-tray { padding:0!important;overflow:hidden!important;--battle-card-width:var(--layout-card,62px);--battle-card-height:calc(var(--battle-card-width) * 87 / 62);--battle-hand-height:calc(var(--battle-card-height) / 2) }
body.screen-game.battle-layout-custom .hand-panel>.panel-head,body.screen-game.battle-layout-custom .opponent-hand-tray>.panel-head { display:none!important }
body.screen-game.battle-layout-custom .hand-panel #hand,body.screen-game.battle-layout-custom .opponent-hand-tray #opponentHand { height:100%!important;max-height:none!important;width:100%;padding:0 0 8px!important }
body.screen-game.battle-layout-custom .hand-panel #hand>.hand-card,body.screen-game.battle-layout-custom .opponent-hand-tray #opponentHand>.hand-card { width:var(--battle-card-width)!important;min-width:var(--battle-card-width)!important;max-width:var(--battle-card-width)!important;flex-basis:var(--battle-card-width)!important;height:var(--battle-hand-height)!important }
body.screen-game.battle-layout-custom .hand-panel #hand .public-card-face,body.screen-game.battle-layout-custom .opponent-hand-tray #opponentHand .public-card-face,body.screen-game.battle-layout-custom .opponent-hand-tray #opponentHand>.hand-card>.card-art { width:var(--battle-card-width)!important;height:var(--battle-card-height)!important }
body.screen-game.battle-layout-custom #actionsPanel { overflow:auto!important }
body.screen-game.battle-layout-custom #actionsPanel>summary { display:block!important;height:auto!important;min-height:24px!important;padding:0 0 6px!important;font-size:13px!important }
body.screen-game.battle-layout-custom #actionsPanel .panel-head { padding:7px!important;margin-bottom:6px!important }
body.screen-game.battle-layout-custom #actionHint { max-height:none!important;font-size:13px!important;line-height:1.6!important }
body.screen-game.battle-layout-custom #actionsPanel #actions { display:flex!important;flex-wrap:wrap!important;max-height:none!important;min-height:0!important;overflow:visible!important;gap:6px!important }
body.screen-game.battle-layout-custom #actionsPanel .action-button { font-size:13px!important;min-height:32px!important;padding:6px 9px!important }
body.screen-game.battle-layout-custom #logPanel>.panel-content { position:absolute!important;inset:32px 7px 7px!important;height:auto!important;display:flex;flex-direction:column;padding:0!important }
body.screen-game.battle-layout-custom #logPanel .log-list { flex:1;min-height:0;overflow:auto!important }
body.screen-game.battle-layout-custom #logPanel>summary { height:24px!important }
body.screen-game.battle-layout-custom #logPanel:not([open])>.panel-content { display:none }
body.screen-game.battle-layout-custom .ink-turn-context { display:block!important;padding:6px!important }
body.screen-game.battle-layout-custom #phaseValue { font-size:clamp(12px,1.5vw,23px)!important;line-height:1.4!important }
body.screen-game.battle-layout-custom .ink-identity-rail { font-size:12px }
body.screen-game.battle-layout-custom .ink-rail-player { margin:0!important;padding:5px 0!important }
body.screen-game.battle-layout-custom .ink-rail-identity>strong { font-size:20px!important }
body.screen-game.battle-layout-custom [data-layout-region=controls] { display:flex!important;flex-wrap:wrap;align-content:start;gap:4px }
body.screen-game.battle-layout-custom [data-layout-region=controls] button { font-size:12px;min-height:30px;padding:4px 7px }
body.screen-game.battle-layout-custom .ink-settings-panel { padding:7px!important }

/* The action panel alone folds to a compact four-character button. */
body.screen-game #actionsPanel:not([open]):not([hidden]) {
  display:block!important;width:max-content!important;height:auto!important;
  min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;
  padding:0!important;margin:0!important;flex:0 0 auto!important;align-self:flex-start!important;justify-self:start!important;
  overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important
}
body.screen-game #actionsPanel:not([open])>summary {
  display:block!important;width:max-content!important;min-height:30px!important;height:auto!important;
  padding:5px 10px!important;margin:0!important;border:1px solid #b8b8b2;border-radius:3px;
  background:#f0f0ed;color:#282826;font:12px/1.5 var(--font-ui,"Microsoft YaHei",sans-serif);list-style:none;cursor:pointer
}
body.screen-game #actionsPanel:not([open])>summary::before,
body.screen-game #actionsPanel:not([open])>summary::after,
body.screen-game #actionsPanel:not([open])>summary>.fold-label,
body.screen-game #actionsPanel:not([open])>.panel-content { display:none!important }
body.screen-game #actionsPanel:not([open])>summary::-webkit-details-marker { display:none }
body.screen-game .hand-panel>.panel-head h2,body.screen-game .opponent-hand-tray>.panel-head h2 { display:none!important }
/* Edit the actual rendered table. The separate overlays catch drag/clicks;
   gameScreen is inert until save/cancel so moving a card cannot play it. */
.layout-live-layer { position:fixed;inset:0;z-index:5500;pointer-events:none }
.layout-live-layer[hidden],.layout-live-panel[hidden] { display:none!important }
.layout-live-region { position:absolute;box-sizing:border-box;border:1px dashed #333;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;background:transparent }
.layout-live-region.selected { outline:2px solid #252525;outline-offset:1px;box-shadow:0 0 0 3px #f5f5ef88 }
.layout-live-region>span:first-child { position:absolute;left:0;top:0;max-width:100%;padding:1px 5px;background:#f4f4efed;color:#222;font:11px/1.5 sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none }
.layout-live-region:not(.selected)>.layout-resize-handle { display:none }
.layout-live-panel { position:fixed;right:12px;top:12px;z-index:5501;width:272px;max-height:calc(100dvh - 24px);display:flex;flex-direction:column;gap:8px;padding:12px;box-sizing:border-box;overflow:auto;background:#f0f0edf5;color:#252525;border:1px solid #999;border-radius:6px;box-shadow:0 8px 28px #0003;font:12px/1.55 var(--font-ui,"Microsoft YaHei",sans-serif) }
.layout-live-panel.dock-left { right:auto;left:12px }
.layout-live-panel h2 { margin:0;font:19px/1.4 'SimSun',serif }.layout-live-help { margin:0;color:#62625d }
.layout-live-tools { display:flex;flex-wrap:wrap;gap:5px;flex:none }
.layout-live-panel button,.layout-live-panel select,.layout-live-panel input { font:inherit }
.layout-live-panel button { padding:5px 8px;min-height:30px }
.layout-live-panel .layout-inspector { overflow:visible;flex:none;gap:7px }.layout-live-panel .layout-editor-foot { flex-wrap:wrap;gap:5px;position:sticky;bottom:-12px;background:#f0f0ed;padding-bottom:8px;flex:none }
.layout-live-panel .layout-save-status { flex-basis:100%;margin:0 }.layout-live-panel .layout-help { margin:0;font-size:11px }
.layout-live-panel.minimized .layout-inspector,.layout-live-panel.minimized .layout-live-help { display:none }
body.battle-layout-editing #battleLayoutShortcut { visibility:hidden }