/* Commands belong to the lower edge; leave enough room for the last card. */
:root{--dock-height:90px;--table-header-height:86px}
.inGame main{padding-bottom:calc(var(--dock-height) + 36px + env(safe-area-inset-bottom))}
#table .tableHeader .turn{border-radius:12px}.tableHeader{margin-bottom:14px}
#commandDock{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom));left:18px;right:18px;z-index:24;border:1px solid #95805a;border-radius:12px;background:linear-gradient(110deg,#242018f7,#171611fa);box-shadow:0 -12px 35px #0006,0 6px 20px #0006;backdrop-filter:blur(16px);padding:12px 16px;min-height:82px;gap:18px;flex-wrap:nowrap}
#commandDock .commandSummary{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}#commandDock .commandState{font-size:12px}#commandDock #commandHint{max-width:650px;font-size:11px;line-height:1.5;color:#bcad93}.dockReadout{display:flex;gap:9px;align-items:center;font-size:9px;line-height:1.5;flex-wrap:wrap}.dockReadout #dockOwner{color:#a7d7bb;font-weight:750;letter-spacing:.8px}.dockReadout #dockPhase{color:#d2ba8d}#table[data-turn=opponent] #dockOwner{color:#edb79a}
#commandDock .controls{width:auto;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0;max-width:55%;gap:7px}#commandDock .controls>button{min-height:42px;font-size:12px;padding:10px 16px}#commandDock .controls>.gold{min-width:198px;background:linear-gradient(160deg,#e9cc8e,#b99554);color:#241e13;font-weight:800;border-color:#e6ce9e;box-shadow:0 3px 0 #66512f,0 0 18px #c7a46716;transition:filter .16s,transform .16s}#commandDock .controls>.gold:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}#commandDock .controls>.gold:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 #66512f}#commandDock .controls>.gold:disabled{box-shadow:none;background:#3d3527;color:#988b71}
#advancedControls>summary::after{content:' ▴'}#advancedControls .advancedActions{top:auto;bottom:calc(100% + 14px);max-height:calc(100dvh - var(--dock-height) - 36px);overflow:auto;overscroll-behavior:contain;box-shadow:0 -14px 42px #000a}
.turnRail,.gameAside{top:calc(var(--table-header-height) + 12px);max-height:calc(100dvh - var(--table-header-height) - var(--dock-height) - 40px)}
.inGame #status:not(:empty){bottom:calc(var(--dock-height) + 24px + env(safe-area-inset-bottom))}
/* Effects are decoration only; they never accept input or delay a command. */
#duelEffects{position:fixed;inset:0;z-index:23;pointer-events:none;overflow:hidden;contain:strict}#duelEffects *{pointer-events:none!important}.duelEffect{position:absolute;will-change:transform,opacity}.fxCard{border:1px solid #e6cb88;border-radius:7px;overflow:hidden;background:#241f17;box-shadow:0 12px 26px #0008,0 0 15px #d6b77055}.fxCard img{width:100%;height:100%;object-fit:cover;display:block}.fxCard .cardBack{width:100%;height:100%;margin:0}.fxCardLabel{position:absolute;bottom:0;left:0;right:0;background:#15110deb;color:#eacb89;text-align:center;padding:4px;font-size:8px}
.fxNumber{font-size:27px;font-weight:850;color:#ffad94;text-shadow:0 3px 10px #000;white-space:nowrap}.fxNumber.gain{color:#a9e6ba}.fxNumber.mana{font-size:19px;color:#eed392}.phaseAnnouncement{padding:12px 22px;border:1px solid #bc9f64;border-radius:10px;background:linear-gradient(140deg,#292319f5,#151810f2);box-shadow:0 10px 36px #0008;text-align:center;max-width:calc(100vw - 34px);color:#ebd8ad}.phaseAnnouncement small{display:block;font-size:10px;font-weight:800;letter-spacing:1.5px;color:#aeddbb}.phaseAnnouncement strong{display:block;font:20px/1.3 Georgia,serif;margin-top:4px}.phaseAnnouncement.opponent{border-color:#b27e59}.phaseAnnouncement.opponent small{color:#eeb19a}
.spellWindow{animation:castReveal .32s cubic-bezier(.15,.75,.25,1)}@keyframes castReveal{from{opacity:0;transform:perspective(900px) translateY(24px) rotateX(7deg) scale(.93)}to{opacity:1;transform:perspective(900px) translateY(0) rotateX(0) scale(1)}}
.board .tile.enter{animation:tableCardEnter .32s ease-out}@keyframes tableCardEnter{from{opacity:.2;filter:brightness(1.6)}to{opacity:1;filter:brightness(1)}}
@media(max-width:850px){#commandDock{left:10px;right:10px;bottom:calc(9px + env(safe-area-inset-bottom));padding:10px 12px;gap:10px}#commandDock #commandHint{font-size:10px;max-width:350px}#commandDock .controls{max-width:55%}#commandDock .controls>.gold{min-width:155px;font-size:11px}#commandDock .controls>button{font-size:10px;padding:9px 10px}.turnRail{position:static;max-height:none}.gameAside{position:static;max-height:none}.dockReadout{font-size:8px;gap:6px}.phaseAnnouncement strong{font-size:18px}}
@media(max-width:560px){#commandDock{left:8px;right:8px;flex-direction:column;align-items:stretch;gap:8px;padding:9px 11px;min-height:110px}#commandDock .commandSummary{width:100%;gap:2px}#commandDock #commandHint{max-width:none;font-size:10px}#commandDock .commandState{font-size:11px}#commandDock .controls{width:100%;max-width:none;flex-wrap:wrap;justify-content:flex-start;gap:6px}#commandDock .controls>.gold{flex:1;min-width:135px;min-height:40px}#commandDock .controls>button{min-height:38px;padding:9px 10px}#advancedControls>summary{min-height:38px;padding:10px;font-size:11px}#commandDock .dockReadout{font-size:8px}#advancedControls .advancedActions{width:min(340px,calc(100vw - 38px))}.phaseAnnouncement{padding:10px 15px}.phaseAnnouncement strong{font-size:17px}.fxNumber{font-size:23px}}
@media(prefers-reduced-motion:reduce){#commandDock{backdrop-filter:none}.spellWindow,.board .tile.enter{animation:none!important}#duelEffects{display:none}}
.noMotion #duelEffects{display:none}

/* Reserve the visible lower area for mana, hand and commands. The whole field remains scrollable. */
:root{--board-top:156px;--lower-table-height:266px}
.battlefieldViewport{max-height:max(180px,calc(100dvh - var(--board-top) - var(--dock-height) - var(--lower-table-height)));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8d7651 #172119;border-radius:10px;scroll-padding:12px}
.battlefieldViewport:focus-visible{outline:2px solid #e0c082;outline-offset:3px}.battlefieldViewport[data-scrollable=true]{border-right:1px solid #87734455}
#table .board>.sectionTitle{margin-top:8px}.board>#myBar{background:linear-gradient(90deg,#24382d,#19271f);border-radius:0 0 8px 8px;padding:8px 10px}
@media(min-width:851px){.battlefieldViewport .field{padding:7px 6px;gap:3px}.battlefieldViewport .cardRow{padding:12px 4px 4px;min-height:122px}.battlefieldViewport .landRow{padding:12px 4px 4px;min-height:106px}}
@media(max-width:560px){.battlefieldViewport{max-height:max(90px,calc(100dvh - var(--board-top) - var(--dock-height) - var(--lower-table-height)))}}
@media(max-width:560px){#advancedControls{position:static}#advancedControls .advancedActions{left:8px;right:8px;bottom:calc(100% + 12px);width:auto}}
#sideboardDialog{width:min(1050px,96vw);max-height:92dvh;padding:22px}.sideboardSearch{max-width:380px;margin:15px 0}.sideboardColumns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sideboardColumns>section{background:#19170f;border:1px solid #5c4c32;border-radius:9px;padding:12px;min-width:0}.sideboardColumns h3{font-size:11px;letter-spacing:1px;margin:0 0 12px;color:#e2ca95}.sideboardColumns h3 span{float:right;letter-spacing:0;font-size:11px;color:#b7a582}.sideboardColumns>section>div{display:grid;gap:6px;max-height:48dvh;overflow:auto;scrollbar-width:thin}.sideboardCard{display:flex;gap:9px;align-items:center;padding:6px;border:1px solid #3e3423;border-radius:6px;background:#252015}.sideboardThumb{padding:0;border:0;width:42px;height:59px;flex:0 0 42px;overflow:hidden;border-radius:4px}.sideboardThumb img{width:100%;height:100%;object-fit:cover}.sideboardCardName{flex:1;min-width:0;line-height:1.4}.sideboardCardName strong{display:block;font-size:11px;font-weight:650}.sideboardCardName small{font-size:9px;color:#b9a789}.sideboardMove{padding:8px;font-size:10px;flex-shrink:0}.sideboardFooter{position:sticky;bottom:-22px;background:#201b14;border-top:1px solid #786341;padding:13px 0 17px;margin-top:15px}.sideboardFooter #sideboardSummary{font-size:12px;color:#e8cd96}.sideboardFooter #sideboardError{font-size:12px;color:#f0ac97;margin:6px 0}.sideboardFooter .buttons{justify-content:flex-end;margin:9px 0 0}.sideboardFooter .gold{font-size:12px;padding:10px 16px}#sideboardDialog>.muted{font-size:12px;margin-bottom:0}
@media(max-width:650px){#sideboardDialog{padding:14px;width:96vw}.sideboardColumns{grid-template-columns:1fr;gap:10px}.sideboardColumns>section>div{max-height:26dvh}.sideboardFooter{bottom:-14px}.sideboardCardName strong{font-size:12px}.sideboardThumb{width:38px;height:53px;flex-basis:38px}.sideboardMove{padding:9px;font-size:11px}#closeSideboard{font-size:10px;padding:7px}.sideboardFooter .buttons{gap:7px}.sideboardFooter .gold{flex:1}}

.board>#enemyBar{border-radius:8px 8px 0 0;margin-bottom:5px;padding:8px 10px}

/* Brief accents follow real events and leave cards and controls clickable. */
.fxCard{border-color:#dfd2a8;box-shadow:0 18px 30px #0007,0 0 16px #dacc9b22;backface-visibility:hidden}
.fxCard::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 25%,#fff8 48%,transparent 67%);opacity:.2;pointer-events:none}
.fxCard[data-event=cast]{box-shadow:0 18px 30px #0007,0 0 22px #e4cd9744}
.fxImpact{border:1px solid var(--impact-color);border-radius:50%;box-shadow:0 0 16px color-mix(in srgb,var(--impact-color) 30%,transparent),inset 0 0 10px color-mix(in srgb,var(--impact-color) 18%,transparent)}
.fxImpact::before{content:'';position:absolute;inset:8px;border:1px solid var(--impact-color);border-radius:50%;opacity:.32}
.fxSpark{width:3px;height:3px;background:var(--impact-color);border-radius:50%;box-shadow:0 0 5px var(--impact-color)}
.phaseAnnouncement{background:linear-gradient(120deg,#29402ef5,#16261ef2);border-color:#a7b78b;box-shadow:0 12px 32px #0005,inset 0 1px #eff3c51a;overflow:hidden;backdrop-filter:blur(8px)}
.phaseAnnouncement::before{content:'';position:absolute;left:10%;right:10%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#e8dab0,transparent)}
.spellWindow{animation:spellLift .45s cubic-bezier(.16,.75,.25,1)}
@keyframes spellLift{from{opacity:0;transform:perspective(900px) translateY(18px) rotateX(5deg) scale(.96)}to{opacity:1;transform:perspective(900px) translateY(0) rotateX(0) scale(1)}}
.board .tile.enter{animation:cardSettle .4s cubic-bezier(.16,.75,.25,1)}
@keyframes cardSettle{from{opacity:.2;filter:brightness(1.2)}to{opacity:1;filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.phaseAnnouncement{backdrop-filter:none}}