/* Рагнарёк — шахматы. Оформление PAVOS: латунь на тёмно-зелёном. Шрифты Unbounded и Manrope лежат в fonts/ (OFL). */
@font-face{font-family:"Unbounded";src:url("fonts/unbounded.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/manrope.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
:root{
  color-scheme:dark;
  --bg:#13261E;--deep:#0E1D16;--raised:#1B3429;--line:#2C4A3C;--line-in:#3B5A4A;--code:#0A1611;
  --brass:#CFAE62;--brass-hover:#DCC07A;--on-brass:#13261E;--copper:#C4733F;
  --cream:#EFE6D2;--muted:#A9B8A8;--faint:#6F8176;--ok:#8CC49A;--err:#E07A5A;
  --f-head:"Unbounded","Segoe UI",system-ui,sans-serif;--f-body:"Manrope","Segoe UI",system-ui,sans-serif;--f-glyph:"Segoe UI Symbol","Noto Sans Symbols","Noto Sans Runic",Georgia,serif;
  --side:340px
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:#13261E radial-gradient(120% 120% at 30% 20%,#1D3A2D 0%,#13261E 55%,#0E1D16 100%) fixed;color:var(--cream);font:400 14px/1.45 var(--f-body);-webkit-text-size-adjust:100%}
button,select{font-family:var(--f-body)}
a{color:inherit}

/* ===== каркас: вся игра на одном экране ===== */
.app{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;height:100vh;height:100dvh;max-width:1720px;margin:0 auto;padding:10px 20px 8px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.topbar{display:flex;align-items:center;gap:18px;min-height:46px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none}
.brand-mark{display:block;width:30px;height:30px}
.brand-word{font:600 17px/1 var(--f-head);color:var(--cream);letter-spacing:.01em}
.brand-word em{font-style:normal;color:var(--faint)}
.title-block{flex:none;padding-left:18px;border-left:1px solid var(--line)}
.eyebrow{margin:0;color:var(--copper);font:600 11px/1.2 var(--f-body);letter-spacing:.22em;text-transform:uppercase}
.title-block h1{margin:3px 0 0;color:var(--brass);font:700 22px/1.05 var(--f-head);letter-spacing:.01em}
.tagline{flex:1;min-width:0;margin:0;color:var(--muted);font-size:13px;line-height:1.4;text-wrap:balance}
.home-link{flex:none;margin-left:auto;padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:var(--deep);color:var(--cream);font-size:13px;font-weight:600;text-decoration:none;transition:.18s}
.tagline+.home-link{margin-left:0}
.home-link:hover{border-color:var(--brass);color:var(--brass)}

.game-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:16px;min-height:0}
.board-column{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.side-panel{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-in) transparent}
.side-panel>*{flex:none}

/* ===== игроки ===== */
.player-card{display:flex;align-items:center;gap:10px;min-height:42px;padding:4px 12px;background:var(--deep);border:1px solid var(--line);border-radius:12px;transition:border-color .2s,box-shadow .2s}
.player-avatar{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;font:20px/1 var(--f-glyph);border:1px solid #CFAE6270}
.dark-avatar{background:var(--code);color:var(--muted)}
.light-avatar{background:var(--cream);color:var(--bg)}
.player-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.player-name{font:700 13px/1.1 var(--f-body);color:var(--cream)}
.player-role{font-size:9.5px;font-weight:600;letter-spacing:.14em;color:var(--faint)}
.captured{display:flex;flex:1;justify-content:flex-end;overflow:hidden;white-space:nowrap;color:var(--muted);font:20px/1 var(--f-glyph);letter-spacing:-5px}
.turn-indicator{flex:none;width:7px;height:7px;border-radius:50%;background:transparent}
.player-card.active{border-color:var(--brass);box-shadow:inset 0 0 18px #CFAE6218}
.player-card.active .turn-indicator{background:var(--brass);box-shadow:0 0 9px var(--brass)}

/* ===== сцена ===== */
.board-frame{position:relative;container-type:size;flex:1 1 auto;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:radial-gradient(120% 120% at 30% 20%,#1D3A2D 0%,#13261E 55%,#0E1D16 100%);box-shadow:0 18px 40px #0008}
.board-frame::after{content:"";position:absolute;inset:6px;border:1px solid #CFAE6224;border-radius:15px;pointer-events:none}
#gameCanvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#gameCanvas.dragging{cursor:grabbing}
.scene-tools{position:absolute;top:12px;right:12px;z-index:5;display:flex;gap:8px}
.scene-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:40px;padding:0 14px;border:1px solid var(--line-in);border-radius:12px;background:#0E1D16d9;color:var(--cream);font:700 13px/1 var(--f-body);cursor:pointer;backdrop-filter:blur(6px);transition:.18s}
.scene-button:hover{border-color:var(--brass);color:var(--brass)}
.scene-button.primary{border-color:transparent;background:var(--brass);color:var(--on-brass)}
.scene-button.primary:hover{background:var(--brass-hover);color:var(--on-brass)}
.scene-icon{font:17px/1 var(--f-glyph)}
.canvas-help{position:absolute;left:18px;top:20px;z-index:2;max-width:calc(100% - 330px);color:#A9B8A8c0;font-size:10px;font-weight:600;line-height:1.5;letter-spacing:.16em;pointer-events:none}
.canvas-loading{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:28px;background:#13261Ee8;color:var(--brass);font:600 14px/1.5 var(--f-head);letter-spacing:.04em;text-align:center;transition:opacity .5s}
.canvas-loading.hidden{opacity:0;pointer-events:none}
.sweep-fab{position:absolute;left:18px;bottom:16px;z-index:5;display:none;align-items:center;gap:7px;padding:10px 16px;border:1px solid var(--line-in);border-radius:12px;background:#0E1D16e6;color:var(--cream);font:700 13px var(--f-body);cursor:pointer;box-shadow:0 6px 18px #0006;transition:.18s}
.sweep-fab:hover:not(:disabled){border-color:var(--brass);color:var(--brass);transform:translateY(-1px)}
.sweep-fab:disabled{opacity:.45;cursor:default}

/* ===== боковая панель ===== */
.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--deep)}
.mode-option{min-height:38px;padding:6px 6px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;transition:.18s}
.mode-option.active{background:var(--brass);color:var(--on-brass)}
.mode-option:not(.active):hover{background:var(--raised);color:var(--cream)}
.difficulty-picker{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 8px 7px 14px;border:1px solid var(--line);border-radius:12px;background:var(--deep);color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.14em}
.difficulty-picker[hidden]{display:none}
.difficulty-picker select{min-width:124px;padding:8px 10px;border:1px solid var(--line-in);border-radius:10px;background:var(--deep);color:var(--cream);font:600 13px var(--f-body);cursor:pointer}
.difficulty-picker select:focus,.mode-option:focus-visible,.scene-button:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible,.home-link:focus-visible,.sweep-fab:focus-visible,summary:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.status-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--raised);border:1px solid var(--line);border-radius:16px}
.status-orb{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid var(--brass);border-radius:50%;background:var(--deep);color:var(--brass)}
.status-orb span{font:22px/1 var(--f-glyph)}
.status-text{min-width:0}
.status-card .eyebrow{font-size:10px}
.status-card h2{margin:3px 0 0;color:var(--cream);font:600 18px/1.1 var(--f-head)}
.status-line{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.35}
.panel-block{padding:12px 14px;background:var(--deep);border:1px solid var(--line);border-radius:16px}
.block-heading{display:flex;align-items:center;gap:8px}
.block-icon{color:var(--brass);font:16px/1 var(--f-glyph)}
.block-heading h3{flex:1;margin:0;color:var(--cream);font:600 12px/1.2 var(--f-head)}
.last-move{display:flex;align-items:center;gap:9px;min-height:36px;margin-top:9px;padding:8px 10px;border-radius:10px;background:var(--code);color:var(--cream);font-size:13px;font-weight:600}
.move-glyph{color:var(--copper);font-size:16px}
.move-count{color:var(--faint);font-size:11px;font-weight:600}
.history-block{display:flex;flex-direction:column;flex:1 1 150px;min-height:112px}
.move-list{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;gap:0 10px;flex:1;min-height:0;margin-top:8px;overflow:auto;scrollbar-color:var(--line-in) transparent;scrollbar-width:thin}
.move-row{display:grid;grid-template-columns:24px 1fr 1fr;gap:4px;padding:4px 5px;border-bottom:1px solid var(--line);font-size:12px}
.move-number{color:var(--faint)}
.empty-history{grid-column:1/-1;margin:4px 0;color:var(--faint);font-size:13px}
.panel-actions{display:grid;grid-template-columns:1.2fr 1fr;gap:8px}
.game-note{grid-column:1/-1;margin:0;color:var(--faint);font-size:11.5px;text-align:center}
.primary-button{width:100%;padding:12px 12px;border:0;border-radius:12px;background:var(--brass);color:var(--on-brass);font:700 13px/1.2 var(--f-body);cursor:pointer;transition:.18s}
.primary-button span{margin-right:6px;opacity:.7}
.primary-button:hover{background:var(--brass-hover);transform:translateY(-1px)}
.secondary-button{width:100%;padding:12px 12px;border:1px solid var(--line-in);border-radius:12px;background:var(--raised);color:var(--cream);font:700 13px/1.2 var(--f-body);cursor:pointer;transition:.18s}
.secondary-button span{margin-right:6px}
.secondary-button:hover:not(:disabled){border-color:var(--brass);color:var(--brass);transform:translateY(-1px)}
.secondary-button:disabled{opacity:.45;cursor:default}
.about{padding:0}
.about summary{display:flex;align-items:center;gap:8px;padding:12px 14px;color:var(--cream);font:600 12px/1.2 var(--f-head);cursor:pointer;list-style:none}
.about summary::-webkit-details-marker{display:none}
.about summary::after{content:"+";margin-left:auto;color:var(--brass);font:700 16px/1 var(--f-body)}
.about[open] summary::after{content:"–"}
.about p,.about ul{margin:0;padding:0 14px 12px;color:var(--muted);font-size:12.5px;line-height:1.55}
.about ul{padding-left:30px}
.about li+li{margin-top:3px}
.about .stat-note{padding-top:2px;color:var(--faint);font-size:11px}
.page-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:8px;border-top:1px solid var(--line);color:var(--faint);font-size:11px;line-height:1.4}
.page-foot a{flex:none;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-in)}
.page-foot a:hover{color:var(--brass);border-color:var(--brass)}
.foot-short{display:none}

/* ===== подсказки и окно превращения ===== */
.toast{position:fixed;left:50%;bottom:20px;z-index:7;max-width:min(88vw,560px);transform:translate(-50%,20px);opacity:0;padding:10px 18px;border:1px solid var(--brass);border-radius:30px;background:var(--deep);color:var(--cream);font:600 14px/1.35 var(--f-body);text-align:center;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.promotion-modal{position:fixed;inset:0;z-index:8;display:none;place-items:center;background:#0A1611e6;backdrop-filter:blur(5px)}
.promotion-modal.open{display:grid}
.promotion-card{width:min(440px,calc(100vw - 32px));padding:24px;border:1px solid var(--line-in);border-radius:20px;background:var(--bg);text-align:center;box-shadow:0 24px 90px #000b}
.promotion-card h2{margin:6px 0 18px;color:var(--brass);font:700 21px/1.15 var(--f-head)}
.promotion-options{display:flex;justify-content:center;gap:10px}
.promotion-options button{width:66px;height:70px;border:1px solid var(--line-in);border-radius:12px;background:var(--deep);color:var(--brass);font:30px var(--f-glyph);cursor:pointer;transition:.18s}
.promotion-options button:hover{border-color:var(--brass);background:var(--raised)}

/* ===== шах и мат ===== */
.alert-banner{position:absolute;left:50%;top:62px;z-index:4;display:flex;flex-direction:column;gap:4px;max-width:92%;padding:10px 26px 12px;border:1px solid var(--err);border-radius:16px;background:#0E1D16ee;box-shadow:0 0 34px #E07A5A66,inset 0 0 18px #E07A5A2e;text-align:center;opacity:0;transform:translate(-50%,-12px) scale(.9);pointer-events:none}
.alert-banner:empty{display:none}
.alert-banner strong{font:700 clamp(20px,3.4vw,38px)/1 var(--f-head);letter-spacing:.08em;color:var(--cream);text-shadow:0 0 18px var(--err)}
.alert-banner span{font-size:clamp(12px,1.4vw,15px);font-weight:600;color:var(--muted)}
.alert-banner.show{opacity:1;transform:translate(-50%,0) scale(1);animation:alertPop .5s cubic-bezier(.2,1.4,.4,1)}
.alert-banner.check strong{color:var(--err);text-shadow:0 0 18px #E07A5A99}
.alert-banner.mate{border-color:var(--brass);box-shadow:0 0 44px #CFAE6277,inset 0 0 18px #CFAE6233}
.alert-banner.mate strong{color:var(--brass);text-shadow:0 0 22px #CFAE62aa}
.board-frame.is-check::before,.board-frame.is-mate::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 64px 10px #E07A5A80;animation:dangerPulse 1.1s ease-in-out infinite}
.board-frame.is-mate::before{box-shadow:inset 0 0 70px 12px #CFAE6270;animation-duration:2.2s}
@keyframes alertPop{0%{opacity:0;transform:translate(-50%,-16px) scale(.7)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes dangerPulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ===== запасная 2D-доска ===== */
.fallback-board{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:80%;width:min(94cqw,82cqh);aspect-ratio:1;display:none;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);overflow:hidden;border:7px solid var(--brass);border-radius:6px;box-shadow:0 10px 25px #0009}
.fallback-board.visible{display:grid}
.fallback-square{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;cursor:pointer;touch-action:manipulation}
.fallback-square.light{background:linear-gradient(145deg,#E4DAC0,#C9BD9A)}
.fallback-square.dark{background:linear-gradient(145deg,#3A5E4B,#2C4A3C)}
.fallback-piece{position:relative;z-index:1;font:700 clamp(22px,5vw,57px)/1 var(--f-glyph);transform:translateY(-2px);user-select:none}
.fallback-piece.white{color:var(--cream);text-shadow:0 2px 0 #8A6E2F,0 5px 2px #0A1611,0 8px 9px #000b}
.fallback-piece.black{color:var(--code);text-shadow:0 1px 0 #A9B8A8,0 4px 1px #0A1611,0 7px 8px #000b}
.fallback-square.legal:after{content:"";position:absolute;width:22%;height:22%;border-radius:50%;background:#CFAE62c0}
.fallback-square.capture-target:after{content:"";position:absolute;inset:5%;border:3px solid var(--copper);border-radius:50%;box-shadow:0 0 12px #C4733F90}
.fallback-square.selected{box-shadow:inset 0 0 0 4px var(--brass),inset 0 0 18px #CFAE6288}
.fallback-square.last-to{background-image:linear-gradient(#CFAE6266,#CFAE6266)}
.fallback-square.impact{animation:impact .48s ease-out}
.fallback-square.king-check{box-shadow:inset 0 0 0 4px var(--err),inset 0 0 24px #E07A5A}
.fallback-coord{position:absolute;z-index:2;font:700 clamp(8px,1.5vw,12px)/1 var(--f-body);font-style:normal;color:var(--brass);text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
.fallback-coord.file{right:4px;bottom:3px}
.fallback-coord.rank{left:4px;top:3px}
.fallback-burst{position:absolute;z-index:6;width:0;height:0;pointer-events:none}
.fallback-shard{position:absolute;left:0;top:0;width:8px;height:5px;clip-path:polygon(50% 0,100% 80%,15% 100%);animation:shatter .82s cubic-bezier(.17,.67,.35,1) forwards}
.fallback-shard.ivory{background:linear-gradient(135deg,#EFE6D2,#CFAE62);box-shadow:0 0 8px #DCC07A}
.fallback-shard.copper{background:linear-gradient(135deg,#C4733F,#13261E);box-shadow:0 0 9px #C4733F}
.fallback-debris-bit{position:absolute;z-index:4;width:10px;height:7px;border:1px solid #fff4;border-radius:2px 2px 4px 2px;box-shadow:1px 2px 2px #0009;pointer-events:none}
.fallback-debris-bit.ivory{background:linear-gradient(135deg,#EFE6D2,#CFAE62)}
.fallback-debris-bit.copper{background:linear-gradient(135deg,#C4733F,#13261E)}
@keyframes impact{0%{filter:brightness(3) saturate(1.7);transform:scale(1.08)}100%{filter:brightness(1);transform:scale(1)}}
@keyframes shatter{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2) rotate(var(--spin))}}

/* ===== полный экран: показывается только сцена, всё нужное лежит внутри неё ===== */
.board-frame:fullscreen{flex:none;width:100vw;height:100vh;max-width:none;border:0;border-radius:0;background:var(--bg)}
.board-frame:fullscreen #gameCanvas{width:100%;height:100%}
.board-frame:fullscreen::after{display:none}
.board-frame:fullscreen .fallback-board{width:min(94cqw,84cqh);border-width:10px}
.board-frame:fullscreen .canvas-help{font-size:11px;left:22px;top:26px}
.board-frame:fullscreen .scene-tools{top:16px;right:16px}
.board-frame:fullscreen .sweep-fab{display:inline-flex}
.board-frame:fullscreen .alert-banner{top:72px}

/* ===== средние окна ===== */
@media (max-width:1100px){:root{--side:300px}.tagline{font-size:12px}}
@media (max-width:900px){.home-link{display:none}}
@media (max-width:820px){:root{--side:260px}.app{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.tagline{display:none}.title-block{margin-right:auto}}

/* ===== узкие и портретные окна: доска сверху, панель компактно под ней ===== */
@media (orientation:portrait),(max-width:560px){
  .app{gap:8px;padding-top:8px;padding-bottom:6px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .topbar{min-height:38px;gap:12px;padding-bottom:7px}
  .brand-mark{width:26px;height:26px}.brand-word{font-size:15px}
  .title-block{padding-left:12px}.title-block h1{font-size:18px}.eyebrow{font-size:10px}
  .game-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:8px}
  .board-column{gap:6px}
  .player-card{min-height:36px;padding:3px 10px;border-radius:10px}
  .player-avatar{width:26px;height:26px;font-size:17px}
  .player-role{display:none}
  .side-panel{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:7px;max-height:44vh;max-height:44dvh}
  .mode-picker,.difficulty-picker,.status-card,.panel-actions,.history-block,.about{grid-column:1/-1}
  .spell-block,.game-note{display:none}
  .mode-option{min-height:34px;font-size:12px}
  .difficulty-picker{padding:5px 8px 5px 12px}
  .difficulty-picker select{padding:6px 8px}
  .status-card{padding:8px 12px;border-radius:14px}
  .status-orb{width:34px;height:34px}.status-orb span{font-size:18px}
  .status-card h2{font-size:16px}.status-line{margin-top:3px}
  .primary-button,.secondary-button{padding:10px 10px}
  .history-block{min-height:0;flex:none}
  .move-list{max-height:74px}
  .canvas-help{display:none}
  .scene-tools{top:8px;right:8px}
  .scene-button{height:38px}
  .alert-banner{top:54px}
  .foot-long{display:none}.foot-short{display:inline}
  .page-foot{padding-top:6px;font-size:10px}
}
/* планшет в портрете: панель в два столбца, чтобы доске осталось больше высоты */
@media (orientation:portrait) and (min-width:561px){
  .side-panel{max-height:34vh;max-height:34dvh}
  .mode-picker,.difficulty-picker,.status-card,.panel-actions,.history-block,.about{grid-column:auto}
  .mode-picker:has(+ .difficulty-picker[hidden]){grid-column:1/-1}
  .history-block,.about{grid-column:1/-1}
  .about{align-self:start}
}
/* телефон: история ходов только на высоких экранах, на низких режим и сложность в одну строку, статус в одну строку */
@media (orientation:portrait) and (max-width:560px){.history-block{display:none}.about{display:none}}
@media (orientation:portrait) and (max-width:560px) and (min-height:860px){.about{display:block}}
@media (orientation:portrait) and (max-width:560px) and (max-height:760px){
  .side-panel{grid-template-columns:3fr 2fr}
  .mode-picker{grid-column:1}
  .mode-picker:has(+ .difficulty-picker[hidden]){grid-column:1/-1}
  .difficulty-picker{grid-column:2;padding:3px;gap:0}
  .difficulty-picker span{display:none}
  .difficulty-picker select{width:100%;min-width:0;height:100%}
  .status-card{padding:6px 12px}.status-orb,.status-card .eyebrow{display:none}
  .status-text{display:flex;align-items:baseline;gap:10px}
  .status-card h2{margin:0;font-size:15px}.status-line{margin:0}
}
@media (max-width:420px){.scene-button:not(.primary) .scene-label{display:none}.scene-button:not(.primary){padding:0}}

/* ===== низкие окна (телефон на боку): подписи игроков поверх углов сцены ===== */
@media (max-height:560px) and (orientation:landscape){
  .app{gap:6px;padding-top:6px;padding-bottom:4px}
  .topbar{min-height:32px;padding-bottom:5px}
  .brand-mark{width:22px;height:22px}.brand-word{font-size:14px}
  .title-block{padding-left:12px}.title-block .eyebrow{display:none}.title-block h1{margin:0;font-size:16px}
  .tagline,.home-link,.page-foot{display:none}
  .board-column{position:relative}
  .player-card{position:absolute;left:8px;z-index:4;gap:7px;min-height:0;max-width:46%;padding:3px 9px 3px 4px;background:#0E1D16d9}
  #blackPlayer{top:8px}.bottom-player{bottom:8px}
  .player-role,.captured{display:none}
  .player-avatar{width:22px;height:22px;font-size:14px}
  .player-name{font-size:12px}
  .canvas-help{display:none}
  .scene-tools{top:8px;right:8px}.scene-button{height:34px;padding:0 11px}
  .alert-banner{top:50px}
  .side-panel{gap:6px}
  .mode-option{min-height:32px;font-size:11px}
  .difficulty-picker{padding:4px 6px 4px 10px}.difficulty-picker select{min-width:96px;padding:5px 6px;font-size:12px}
  .status-card{padding:7px 10px}.status-orb{width:30px;height:30px}.status-card h2{font-size:14px}.status-line{display:none}
  .primary-button,.secondary-button{padding:8px 8px;font-size:12px}
  .spell-block,.about,.game-note{display:none}
  .history-block{min-height:80px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}