/* Compact duel layout; persistent hero HUD stays outside scrolling content. */
:root { --card-w: 88px; --card-h: 128px; --muted: #b1bbad; }
body { padding-bottom: 150px; }
.ambient { background: radial-gradient(ellipse at 40% 30%,#31544755,transparent 70%),#101b18; }
.masthead { height: 58px; max-width: 1600px; padding: 0 24px; }
.brand { font-size: 21px; }.brand-mark { font-size: 30px; }.brand small { display:none; }
.chapter { letter-spacing: 2px; font-size: 8px; }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:18px; max-width:1600px; padding:0 24px; margin:16px auto 0; }
.arena { grid-column:1; grid-row:1; }.arena:before { display:none; }
.sidebar { grid-column:2; grid-row:1; padding:0; display:flex; gap:14px; }
.sidebar-footer,.page-footer,.deck-object,.table-corner { display:none; }
.turn-card { padding:14px 16px; display:grid; grid-template-columns:1fr auto; gap:8px; border-radius:8px; }
.turn-card .eyebrow { grid-column:1/-1; }.turn-card h2 { font-size:23px; margin:0; }
.action-gems { align-items:center; gap:10px; }.action-gems i { width:12px; height:12px; }
.turn-card p { grid-column:1/-1; margin:0; font-size:11px; }
.combatant { grid-template-columns:48px minmax(100px,1fr) repeat(4,minmax(55px,85px)); min-height:0; padding:9px 16px; gap:5px 10px; border-radius:10px; }
.combatant:after { display:none; }.portrait { width:48px; height:52px; }.portrait img { width:120px; height:120px; left:-35px; top:-26px; }
.identity h2 { font-size:23px; }.identity .eyebrow { font-size:8px; letter-spacing:1px; }
.stat-icon { width:49px; height:45px; }.stat-icon strong { font-size:26px; font-weight:bold; }.stat>small { font-size:8px; letter-spacing:.5px; margin-top:2px; }
.combat-statuses { border:0; padding:0; gap:5px; }.status-info { font-size:10px; padding:3px 7px; gap:5px; }.status-icon { width:16px; height:16px; }.status-info b { font-size:11px; }
.status-summary { display:none; }
#heroPanel { position:fixed; bottom:12px; left:24px; right:24px; max-width:1552px; margin:0 auto; z-index:100; padding:14px 22px; grid-template-columns:58px minmax(120px,1fr) repeat(4,minmax(85px,140px)); background:linear-gradient(100deg,#234d3b,#142e25 65%); border:1px solid #83ba8270; box-shadow:0 -12px 45px #07110dde,0 6px 20px #0006; }
#heroPanel .stat-icon { width:62px; height:54px; }#heroPanel .stat-icon strong { font-size:32px; }#heroPanel .stat>small { color:#d1dacb; font-size:9px; }
#heroPanel .combat-statuses { padding-top:5px; }#heroPanel .identity h2 { color:#ccebbd; }
.enemy-cards-row { min-height:60px; padding:7px 12px; gap:14px; }.enemy-caption { min-width:135px; }.enemy-caption small { margin-top:2px; }
.compact { --card-w:30px; --card-h:44px; }.tiny { --card-w:23px; --card-h:33px; }
.combat-readout { margin:0; padding:13px; border-radius:8px; }.readout-top { flex-wrap:wrap; gap:10px; }.readout-top .eyebrow { font-size:8px; letter-spacing:1px; }
.pace-controls { gap:5px; font-size:10px; }.pace-controls .quiet { min-width:55px; }.readout-content { gap:9px; align-items:flex-start; }.readout-content h2 { font-size:19px; }.readout-content p { font-size:11px; line-height:1.6; }.combat-result { font-size:11px; line-height:1.6; }
.journal { margin:0; padding:12px; border:1px solid var(--line); border-radius:8px; }#log { height:140px; mask-image:none; }.log-entry { font-size:11px; }
.table-surface { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:8px 18px; padding:14px 18px; border-radius:12px; background:radial-gradient(ellipse at 45% 0,#345c4260,transparent 80%),#19342a; box-shadow:inset 0 0 45px #0003; }
.table-surface:before { display:none; }.play-area { grid-column:1/-1; grid-template-columns:minmax(0,1fr) 135px; min-height:110px; gap:14px; }
.use-zone { height:110px; border:1px dashed #b7c49a65; border-radius:8px; background:#10291f55; }.ritual { width:96px; height:96px; opacity:.55; }.use-copy strong { font-size:28px; }.use-copy small { color:#bbc9ad; }
.battle-controls { display:grid; grid-template-columns:1fr; gap:6px; }.attack-button { padding:8px; border-radius:5px; }.attack-button .crossed { display:none; }.attack-button strong { font-size:16px; }.attack-button small { font-size:10px; }.skip-button { padding:6px; border-radius:5px; font-size:11px; }.skip-button small { display:none; }
.table-message { grid-column:1/-1; min-height:20px; margin:0; font-size:11px; }
.deal-section { min-width:0; border:0; padding:0; }.section-heading h2 { font-size:12px; }.helper { display:none; }.player-deal { min-height:151px; padding:12px 0 8px; gap:12px!important; }
.reserve-row { display:grid; grid-template-columns:1fr 54px; gap:8px; min-width:0; margin:0; }.save-zone { display:flex; flex-direction:column; justify-content:center; padding:9px; gap:7px; min-height:0; border-radius:6px; }.reserve-title { display:flex; align-items:center; justify-content:space-between; width:100%; gap:6px; min-width:0; }.reserve-title h2 { font-size:13px; margin:0; letter-spacing:1px; }.reserve-title h2 span { font-size:9px; margin-left:4px; }.reserve-title small { font-size:9px; }
.hand { --card-w:43px; --card-h:63px; padding:4px 0 23px; gap:8px; }.hand .empty-slot { width:43px; height:63px; }.discard-zone { border-radius:6px; }.discard-zone h2 { font-size:10px; }.discard-zone small { font-size:8px; }
@media(min-width:1500px) and (min-height:850px) { :root { --card-w:108px; --card-h:157px; }.play-area,.use-zone { min-height:145px; height:145px; }.player-deal { min-height:187px; }.table-surface { padding:22px; }.layout { margin-top:22px; }.hand { --card-w:52px; --card-h:76px; }.hand .empty-slot { width:52px; height:76px; } }
@media(max-width:1100px) { .layout { grid-template-columns:minmax(0,1fr) 225px; gap:12px; padding:0 12px; }.table-surface { grid-template-columns:1fr; padding:12px; }.reserve-row { grid-template-columns:1fr 90px; }.save-zone { flex-direction:row; }.reserve-title { width:auto; flex-direction:column; }.player-deal { min-height:145px; }.hand { padding-top:0; }.combatant { grid-template-columns:35px minmax(65px,1fr) repeat(4,52px); padding:8px; gap:4px; }.portrait { width:35px; }.identity h2 { font-size:19px; }.stat>small { font-size:7px; } }
@media(max-width:760px) { body { padding-bottom:165px; }.masthead { height:52px; padding:0 12px; }.brand { font-size:17px; }.chapter { display:none; }.layout { display:flex; flex-direction:column; margin-top:10px; gap:12px; }.arena { order:0; }.sidebar { display:flex; order:1; gap:10px; }.sidebar>.turn-card,.sidebar>.combat-readout { display:grid; }.sidebar>.combat-readout { display:block; }.table-surface { gap:6px; }.play-area { grid-template-columns:1fr 100px; }.enemy-cards-row { gap:8px; }.enemy-caption { min-width:95px; }.enemy-caption .eyebrow { font-size:7px; }.enemy-reserve { gap:4px; }.combat-statuses { gap:3px; }.status-info { font-size:8px; padding:3px 4px; }.status-info .status-icon { width:14px; height:14px; }.stat-icon { width:42px; height:40px; }.stat-icon strong { font-size:23px; }.identity .eyebrow { font-size:6px; }.reserve-row { grid-template-columns:1fr 68px; }.player-deal { min-height:140px; }.hand { --card-w:43px; --card-h:63px; }.hand .empty-slot { width:43px; height:63px; }
 #heroPanel { left:8px; right:8px; bottom:8px; padding:10px; grid-template-columns:repeat(4,1fr); gap:5px; }#heroPanel .portrait { display:none; }#heroPanel .identity { grid-column:1/-1; }#heroPanel .identity h2 { font:12px var(--text); margin:0; }#heroPanel .identity .eyebrow { display:none; }#heroPanel .stat-icon { width:47px; height:42px; }#heroPanel .stat-icon strong { font-size:27px; }#heroPanel .stat>small { font-size:8px; }#heroPanel .combat-statuses { justify-content:center; padding:0; }#heroPanel .protections { position:absolute; right:12px; top:8px; margin:0; }.journal { margin:0; }.version { display:inline; }
}
@media(max-width:420px) { :root { --card-w:65px; --card-h:95px; }.player-deal { gap:9px!important; min-height:120px; }.combatant { grid-template-columns:29px minmax(50px,1fr) repeat(4,43px); }.identity h2 { font-size:16px; }.stat>small { font-size:6px; }.enemy-caption { min-width:83px; }.compact { --card-w:25px; --card-h:36px; }.enemy-reserve>span { display:none; } }
.coin-tray{position:absolute;left:30px;top:25px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none}.coin-tray button{pointer-events:auto;position:relative;background:none;padding:0;perspective:300px}.coin-face{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font:26px Georgia,serif;color:#6b4110;border:3px double #ffe5a1;background:radial-gradient(circle at 35% 25%,#fff0ad,#ce9c3e 60%,#98631f);box-shadow:0 3px 0 #76511f,0 5px 12px #0006}.coin-tray b{position:absolute;right:-5px;bottom:-4px;border-radius:50%;background:#12261f;border:1px solid #bb9c54;min-width:20px;font-size:11px}.coin-tray>span{max-width:110px;font-size:8px;text-align:center;color:#dec898}.available .coin-face{animation:coin-glow 2.5s infinite}.tossing .coin-face{animation:coin-toss .65s ease-in-out}.late-game .player-deal{--card-w:72px;--card-h:105px;gap:8px!important;flex-wrap:wrap}.late-game .table-surface{min-width:0}@keyframes coin-glow{50%{box-shadow:0 3px 0 #76511f,0 0 18px #e7bb5d77}}@keyframes coin-toss{50%{transform:translateY(-28px) rotateY(540deg) scale(1.2)}100%{transform:rotateY(1080deg);opacity:.2}}@media(max-width:760px){.coin-tray{left:22px;top:22px}.coin-face{width:29px;height:29px;font-size:18px}.coin-tray>span{display:none}.late-game .player-deal{--card-w:43px;--card-h:63px;gap:5px!important;min-height:105px}}@media(prefers-reduced-motion:reduce){.available .coin-face,.tossing .coin-face{animation:none}}