#game-menu, #modern-sideboard, #modern-reveal, #rewind-dialog {
  color: #eee4cf; background: #0d1922; border: 2px solid #aa8545;
  border-radius: 12px; padding: 24px; width: min(680px, 90vw);
  max-height: 85dvh; overflow: auto; font: 18px var(--ui, sans-serif);
  box-shadow: 0 12px 70px #000c;
}
#rewind-dialog::backdrop { background: transparent; }
#devbar:has(#rewind-dialog[open]) { flex-wrap: wrap; }
#devbar #rewind-dialog {
  position: static; order: 20; flex: 1 0 100%; width: 100%; max-width: none;
  margin: 0; padding: 8px 12px; border: 1px solid #806739; border-radius: 8px;
  box-shadow: inset 0 1px 0 #ffffff0d; max-height: 30dvh; overflow: auto;
}
#devbar #rewind-dialog[open] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
#devbar #rewind-dialog header { gap: 12px; }
#devbar #rewind-dialog h2 { font-size: 16px; }
#devbar #rewind-dialog label { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 240px; }
#devbar #rewind-dialog select { padding: 6px 8px; font-size: 12px; }
#devbar #rewind-dialog button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
#devbar #rewind-dialog .rewind-actions { gap: 6px; }
#devbar #rewind-dialog p { margin: 0; font-size: 12px; }
#devbar #rewind-dialog .rewind-help { flex-basis: 100%; order: 5; color: #b8c5cd; }
#devbar #rewind-dialog [data-control="detail"] { flex: 1 1 320px; }
#devbar #rewind-dialog [data-control="notice"]:empty { display: none; }
#rewind-dialog header, .rewind-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#rewind-dialog header { justify-content: space-between; }
#rewind-dialog h2 { color: #ecd293; margin: 0; font-family: var(--display, serif); }
#rewind-dialog label { display: grid; gap: 8px; margin-bottom: 16px; }
#rewind-dialog select { width: 100%; min-width: 0; color: #eee4cf; background: #142632; padding: 12px; border: 1px solid #907747; border-radius: 5px; font: inherit; }
#rewind-dialog button { color: #fff0ce; background: #22323b; border: 1px solid #a88949; border-radius: 5px; padding: 10px 14px; min-height: 44px; font: inherit; cursor: pointer; }
#rewind-dialog button:disabled, #open-rewind:disabled { opacity: .45; cursor: default; }
#rewind-dialog button:hover:not(:disabled) { background: #344952; }
#rewind-dialog :focus-visible, #open-rewind:focus-visible { outline: 3px solid #71d7ec; outline-offset: 3px; }
#rewind-dialog .rewind-primary { background: #3d351f; border-color: #ecd293; }
#rewind-dialog [data-control="detail"] { overflow-wrap: anywhere; }
#rewind-dialog [data-control="notice"] { color: #eac774; }
#open-rewind, #rewind-dialog .rewind-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#open-rewind img, #rewind-dialog button img { width: 22px; height: 22px; }
@media (max-width: 480px) { #rewind-dialog { padding: 16px; } .rewind-actions button { flex: 1 1 auto; } }
#game-menu::backdrop, #modern-sideboard::backdrop, #modern-reveal::backdrop { background: #0009; }
#game-menu header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#game-menu h2, #modern-sideboard h2, #modern-reveal h2 { color: #ecd293; font-family: var(--display, serif); }
#game-menu details { border-top: 1px solid #695534; padding: 12px 0; }
#game-menu summary { cursor: pointer; color: #ecd293; font-size: 20px; }
/* In-match menu follows the table settings drawer, with workshop tools separate. */
#game-menu.table-menu {
  width: min(540px, 94vw); padding: 22px; font: 14px/1.5 var(--ui);
  background: radial-gradient(ellipse at top left, #263640, transparent 65%), #0d171f;
  border: 1px solid #a88b54; box-shadow: 0 24px 90px #000b, inset 0 1px 0 #f9e1a61a;
}
#game-menu.table-menu h2 { margin: 0; font-size: 24px; }
#game-menu.table-menu header { padding-bottom: 12px; }
#game-menu.table-menu #menu-room { color: #a8bdc9; margin: 0 0 16px; font-size: 12px; }
#game-menu.table-menu #menu-notice:empty { display: none; }
#game-menu.table-menu .menu-shortcuts { display: flex; gap: 8px; margin-bottom: 18px; }
#game-menu.table-menu .menu-shortcuts button { flex: 1; }
#game-menu.table-menu details { border: 1px solid #38454c; border-radius: 8px; padding: 0; margin-top: 8px; background: #13212b99; }
#game-menu.table-menu summary { padding: 12px 14px; font: 600 14px var(--ui); color: #e4d2ad; }
#game-menu.table-menu .menu-section { padding: 4px 14px 14px; gap: 10px; }
#game-menu.table-menu button { min-height: 38px; font: 500 13px var(--ui); border-color: #766242; border-radius: 6px; background: linear-gradient(#2c3b45, #1a2831); }
#game-menu.table-menu button:hover:not(:disabled) { border-color: #d2b577; background: #324550; }
#game-menu.table-menu .menu-danger { color: #edb1a7; border-color: #734943; background: #312326; }
#game-menu.table-menu :focus-visible { outline: 2px solid #80d5e7; outline-offset: 3px; }
#game-menu.table-menu input, #game-menu.table-menu select { min-height: 36px; font: inherit; border-color: #52616a; background: #0d1a23; }
#game-menu.table-menu:not(.menu-workshop) .menu-workshop-only { display: none; }
#game-menu.table-menu.menu-workshop { width: min(760px, 94vw); }
.menu-section { display: flex; flex-wrap: wrap; align-items: start; gap: 12px; padding: 16px 0; }
.menu-section > details { width: 100%; }
.menu-section label { display: flex; flex-direction: column; gap: 5px; min-width: 160px; flex: 1; }
#game-menu input, #game-menu select, #game-menu textarea { color: #eee; background: #142632; padding: 8px; border: 1px solid #907747; border-radius: 4px; max-width: 100%; }
#game-menu button, #modern-sideboard button, #modern-reveal button { color: #fff0ce; background: #22323b; border: 1px solid #a88949; border-radius: 5px; padding: 8px 14px; cursor: pointer; }
#game-menu button:disabled, #modern-sideboard button:disabled { opacity: .45; cursor: default; }
#game-menu button:hover:not(:disabled) { background: #344952; }
#menu-notice { color: #eac774; white-space: pre-wrap; }
#menu-log, #menu-messages { width: 100%; max-height: 220px; overflow: auto; }
#menu-log p, #menu-messages p { margin: 4px 0; }
#menu-deck-json { width: 100%; box-sizing: border-box; font: 13px monospace; }
#game-menu .audioctl { margin: 0; }
#modern-sideboard p { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
#modern-reveal img { width: 150px; max-width: 35vw; margin: 6px; vertical-align: top; }
body.is-replaying #stage::after { content: 'REPLAY · READ ONLY'; position: absolute; top: 0; left: 42%; color: #ffe5a6; background: #10212eee; padding: 4px 16px; z-index: 100; pointer-events: none; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
html[data-motion="fast"] #stage * { transition-duration: .1s; }
#group-move { position: absolute; left: 30%; bottom: 19%; width: 39%; z-index: 120; color: #ffe3a5; background: #102533f5; border: 1px solid #cfb26b; padding: 10px; font: 16px var(--ui); }
#group-move[hidden] { display: none; }
.unit.is-group-selected { outline: 3px solid #59e5ff; outline-offset: -4px; }
.menu-card-list { max-height: 340px; overflow: auto; width: 100%; }
.menu-card-list > div { padding: 10px 0; border-bottom: 1px solid #564931; }
.menu-card-list button { margin: 4px; font-size: 14px; }
.shelf__mat { position: absolute; inset: 19% 5% 14%; width: 90%; height: 67%; object-fit: cover; opacity: .45; z-index: -1; pointer-events: none; border-radius: 20%; }
[data-sleeve="ember"] .pile__back, [data-sleeve="ember"] .opcard img, .unit--facedown[data-sleeve="ember"] .unit__art img { filter: sepia(.6) hue-rotate(155deg) saturate(1.7); }
[data-sleeve="ocean"] .pile__back, [data-sleeve="ocean"] .opcard img, .unit--facedown[data-sleeve="ocean"] .unit__art img { filter: hue-rotate(325deg) saturate(1.5); }
[data-sleeve="void"] .pile__back, [data-sleeve="void"] .opcard img, .unit--facedown[data-sleeve="void"] .unit__art img { filter: hue-rotate(50deg) saturate(1.4); }
#target-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 75; overflow: hidden; }
#target-arrows path { fill: none; stroke: #55dcff; stroke-width: 2.5; filter: drop-shadow(0 1px 3px #000); }
#target-arrows .target-arrow--rival { stroke: #ffaf67; }
#target-arrows circle { fill: #ffe0a0; stroke: #182733; stroke-width: 2; }

#menu-planner > ol, #menu-planner > div, #menu-planner > select { width: 100%; }
#menu-planner li { margin: 10px 0; overflow-wrap: anywhere; }
#menu-planner button { margin: 4px; }

#open-action-log { white-space: nowrap; flex-shrink: 0; }
#action-log {
  box-sizing: border-box; width: min(700px, 94vw); max-height: 90dvh;
  padding: 20px; color: #eee4cf; background: #0d1922;
  border: 2px solid #aa8545; border-radius: 12px;
  box-shadow: 0 12px 70px #000c; font: 16px/1.5 var(--ui, sans-serif);
}
#action-log[open] { display: flex; flex-direction: column; gap: 10px; }
#action-log::backdrop { background: #0009; }
#action-log header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#action-log h2, #action-log p { margin: 0; }
#action-log h2 { color: #ecd293; font-family: var(--display, serif); }
#action-log > p { color: #c4c8cb; font-size: 14px; }
#action-log button {
  color: #fff0ce; background: #22323b; border: 1px solid #a88949;
  border-radius: 5px; padding: 9px 14px; min-height: 44px; cursor: pointer; flex-shrink: 0;
}
#action-log button:hover { background: #344952; }
#action-log :focus-visible { outline: 2px solid #70d9ef; outline-offset: 2px; }
.action-log__list { min-height: 0; height: 52dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 8px; }
.action-log__list h3 { position: sticky; top: 0; margin: 0; padding: 10px 0; color: #ecd293; background: #0d1922; font-size: 16px; }
.action-log__list ol { list-style: none; margin: 0; padding: 0; }
.action-log__list li { padding: 10px 12px; margin-bottom: 6px; background: #162732; border-left: 2px solid #a88949; border-radius: 4px; overflow-wrap: anywhere; }
.action-log__list li > span { display: block; color: #8dd2e5; font-size: 12px; font-weight: 700; margin-bottom: 3px; }
@media (max-height: 500px) { #action-log { padding: 10px 16px; gap: 5px; } #action-log > p { font-size: 12px; } }

/* Shared navigation controls: compact metal panels with warm gold details. */
#devbar :is(.devbar__legacy, #open-game-menu, #open-action-log, #open-rewind) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 0 0 auto; min-height: 36px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid #665437; border-radius: 7px;
  background: linear-gradient(180deg, #263039, #141c23);
  box-shadow: inset 0 1px 0 #ffffff12, 0 2px 4px #0005;
  color: #ead9b5; font: 600 12px/1.2 var(--body, sans-serif);
  letter-spacing: .025em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}
#devbar :is(.devbar__legacy, #open-game-menu, #open-action-log, #open-rewind)::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px;
  background: #cfac69; mask: var(--toolbar-icon) center / contain no-repeat;
}
#devbar :is(.devbar__legacy, #open-game-menu, #open-action-log, #open-rewind):hover:not(:disabled) {
  border-color: #c5a363; color: #fff0cf;
  background: linear-gradient(180deg, #34414a, #202b33);
  box-shadow: inset 0 1px 0 #ffffff18, 0 0 12px #cfac6915;
}
#devbar :is(.devbar__legacy, #open-game-menu, #open-action-log, #open-rewind):active:not(:disabled) {
  background: #111b22; box-shadow: inset 0 2px 4px #0006;
}
#devbar :is(.devbar__legacy, #open-game-menu, #open-action-log, #open-rewind):focus-visible {
  outline: 2px solid #80d5e7; outline-offset: 3px;
}
#devbar #open-rewind:disabled { opacity: .45; cursor: default; box-shadow: none; }
@media (max-width: 600px) {
  #devbar { gap: 6px; }
  #devbar :is(.devbar__legacy, #open-game-menu, #open-action-log, #open-rewind) { padding: 0 9px; gap: 6px; }
}
@media (pointer: coarse) {
  #devbar :is(.devbar__legacy, #open-game-menu, #open-action-log, #open-rewind) { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #devbar :is(.devbar__legacy, #open-game-menu, #open-action-log, #open-rewind) { transition: none; }
}
#devbar .devbar__legacy { --toolbar-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010%2012%203l9%207M5%209v12h5v-7h4v7h5V9%22%2F%3E%3C%2Fsvg%3E"); }
#devbar #open-game-menu { --toolbar-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2012h16M4%2018h16%22%2F%3E%3C%2Fsvg%3E"); }
#devbar #open-action-log { --toolbar-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%205h11M9%2012h11M9%2019h11M4%205h.01M4%2012h.01M4%2019h.01%22%2F%3E%3C%2Fsvg%3E"); }
#devbar #open-rewind { --toolbar-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010a9%209%200%201%201%201%209M3%204v6h6M12%207v6l4%202%22%2F%3E%3C%2Fsvg%3E"); }