.mode-picker { margin-bottom: 28px; }
.mode-picker button { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 157px; min-height: 56px; }
.bolt-icon { width: 22px; height: 29px; flex-shrink: 0; }
#mode-blitz:not([aria-pressed="true"]) .bolt-icon { color: #ab7c20; }
.blitz-banner { display: none; }
body[data-mode="blitz"] {
  --paper: #101b24;
  --ink: #f3f7ed;
  --muted: #a5b7bb;
  --coral: #ff665e;
  --coral-dark: #ff8a80;
  --teal: #50ddd0;
  --teal-dark: #50ddd0;
  --yellow: #defa53;
  --tray: #263943;
  --display: 'Barlow Condensed', sans-serif;
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 7% 10%, #defa531a, transparent 43%), radial-gradient(ellipse at 100% 35%, #22d7d416, transparent 50%);
}
body[data-mode="blitz"]::before, body[data-mode="blitz"]::after {
  content: ''; position: fixed; pointer-events: none; width: 150px; height: 390px;
  clip-path: polygon(45% 0, 0 58%, 40% 58%, 15% 100%, 100% 32%, 56% 32%, 78% 0);
  background: var(--yellow); opacity: .065; left: calc(50% - 600px); top: 210px;
}
body[data-mode="blitz"]::after { left: auto; right: calc(50% - 600px); top: 370px; transform: rotate(180deg); background: var(--teal); }
body[data-mode="blitz"] .shell { position: relative; }
body[data-mode="blitz"] header { padding: 20px 0 22px; }
body[data-mode="blitz"] h1 { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 43px; }
body[data-mode="blitz"] h1 b { color: var(--yellow); }
body[data-mode="blitz"] .brand p { font-size: 12px; letter-spacing: 1px; }
body[data-mode="blitz"] .mode-picker { background: #24343e; border-radius: 10px; padding: 5px; box-shadow: 0 0 0 1px #88aaa826; }
body[data-mode="blitz"] .mode-picker button { border-radius: 6px; text-transform: uppercase; font-size: 24px; font-weight: 700; letter-spacing: .8px; }
body[data-mode="blitz"] .mode-picker small { text-transform: none; letter-spacing: 0; }
body[data-mode="blitz"] #mode-blitz[aria-pressed="true"] { background: var(--yellow); color: #182414; box-shadow: 0 3px 0 #8aab35, 0 0 22px #defa5326; }
body[data-mode="blitz"] .blitz-banner { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 0 auto 29px; color: var(--yellow); animation: power-on .25s ease-out; }
.blitz-banner>div { text-align: center; }
.blitz-banner strong { display: block; font: 800 53px/.95 var(--display); letter-spacing: 3px; font-style: italic; }
.blitz-banner span { display: block; font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: 2.5px; margin-top: 10px; color: #c0cbbb; }
.blitz-banner .bolt-icon { width: 29px; height: 43px; transform: rotate(9deg); }
body[data-mode="blitz"] .player strong { font-size: 26px; text-transform: uppercase; font-weight: 600; letter-spacing: .5px; }
body[data-mode="blitz"] .player-tile { border-radius: 8px; }
body[data-mode="blitz"] .player-tile.human { box-shadow: 0 4px 0 #a83a35; }
body[data-mode="blitz"] .player-tile.machine { box-shadow: 0 4px 0 #238d85; }
body[data-mode="blitz"] .player-tile.machine svg { color: #103d3a; }
body[data-mode="blitz"] #status { font-size: 31px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
body[data-mode="blitz"] .turn-clock { color: var(--yellow); width: 58px; height: 58px; filter: drop-shadow(0 0 8px #defa5326); }
body[data-mode="blitz"] #clock-value { font-size: 21px; font-weight: 600; }
body[data-mode="blitz"] .turn-clock.urgent { color: #ff7564; }
body[data-mode="blitz"] .board { --radius: 20px; background: #25363f; box-shadow: inset 0 3px 0 #0d141a, 0 7px 0 #071218, 0 0 0 1px #8cb5a82b, 0 0 35px #defa5308; }
body[data-mode="blitz"] .cell { border-radius: 8px; background: #344b54; box-shadow: inset 0 3px 0 #152c35; }
body[data-mode="blitz"] .cell small { color: #a8c0bc; }
body[data-mode="blitz"] .cell.human { background: #ff665e; box-shadow: 0 6px 0 #a33a37, inset 0 2px 0 #ff9e84; }
body[data-mode="blitz"] .cell.machine { background: #50d6c9; box-shadow: 0 6px 0 #26857e, inset 0 2px 0 #a2f4db; }
body[data-mode="blitz"] .cell.machine small { color: #144a43; }
body[data-mode="blitz"] .machine .mark::before { border-color: #123e3a; }
body[data-mode="blitz"] .cell.win { background: var(--yellow); box-shadow: 0 6px 0 #859f35, 0 0 18px #defa5340; }
body[data-mode="blitz"] .cell.win .mark::before, body[data-mode="blitz"] .cell.win .mark::after { border-color: #35471b; }
body[data-mode="blitz"] .cell.win.human .mark::before, body[data-mode="blitz"] .cell.win.human .mark::after { background: #35471b; }
body[data-mode="blitz"] .board-wrap::before, body[data-mode="blitz"] .board-wrap::after { content: ''; }
body[data-mode="blitz"] .button { color: #202e0e; background: var(--yellow); box-shadow: 0 4px 0 #8baf30, 0 0 18px #defa531a; border-radius: 9px; font-size: 24px; text-transform: uppercase; font-weight: 700; letter-spacing: .5px; padding: 8px 24px; }
body[data-mode="blitz"] .help-button { background: #2b414a; color: #d7eadf; box-shadow: 0 3px 0 #0c141d; }
body[data-mode="blitz"] .journal-heading h2 { font-size: 25px; text-transform: uppercase; letter-spacing: .7px; }
body[data-mode="blitz"] .decision h3 { font-size: 25px; }
body[data-mode="blitz"] .feed { border-color: #8fafaa35; background-image: repeating-linear-gradient(transparent 0, transparent 29px, #87b4b008 29px, #87b4b008 30px); }
body[data-mode="blitz"] .decision { border-color: #8fafaa35; }
body[data-mode="blitz"] .track { background: #30474e; }
body[data-mode="blitz"] .bar { background: #708f83; }
body[data-mode="blitz"] .probability.selected, body[data-mode="blitz"] .decision-options summary { color: #d7ed93; }
body[data-mode="blitz"] .probability.selected .bar { background: var(--yellow); }
body[data-mode="blitz"] .waiting-tiles span { background: #673f3b; color: #ff9c87; box-shadow: 0 4px 0 #402c2e; }
body[data-mode="blitz"] .waiting-tiles span:nth-child(2) { background: #58632f; color: var(--yellow); box-shadow: 0 4px 0 #30391e; }
body[data-mode="blitz"] .waiting-tiles span:nth-child(3) { background: #2d5e5b; color: #66e6ce; box-shadow: 0 4px 0 #193d3f; }
body[data-mode="blitz"] .rule { border-color: #8fafaa35; }
body[data-mode="blitz"] .world-heading h2 { text-transform: uppercase; font-size: 25px; letter-spacing: .8px; }
body[data-mode="blitz"] .stat { border-color: #8fafaa24; }
body[data-mode="blitz"] .stat strong { font-size: 41px; font-weight: 600; }
body[data-mode="blitz"] .recent-game { background: #253943; }
body[data-mode="blitz"] .mini span { background: #14262e; }
body[data-mode="blitz"] dialog { box-shadow: 0 10px 0 #081319, 0 20px 60px #0008; }
body[data-mode="blitz"] button:focus-visible, body[data-mode="blitz"] a:focus-visible, body[data-mode="blitz"] summary:focus-visible { outline-color: var(--yellow); }
@media(hover:hover) and (pointer:fine){
  body[data-mode="blitz"] .cell:not(:disabled):hover { background: #426066; }
  body[data-mode="blitz"] .cell:not(:disabled):hover::after { color: #9ebca6; }
  body[data-mode="blitz"] .button:hover { background: #eaff89; }
}
@keyframes power-on { from { transform: translateY(5px) scale(.97); opacity: .5; } to { transform: translateY(0) scale(1); opacity: 1; } }
@media(max-width:760px){
 .mode-picker { width: 100%; margin-bottom: 24px; }
 .mode-picker button { min-width: 0; flex: 1; gap: 6px; padding: 9px 10px; }
 .mode-picker .bolt-icon { width: 16px; height: 24px; }
 body[data-mode="blitz"]::before { left: -80px; top: 100px; }
 body[data-mode="blitz"]::after { right: -90px; top: 620px; }
 body[data-mode="blitz"] header { padding: 20px 0; }
 body[data-mode="blitz"] .blitz-banner { gap: 14px; margin-bottom: 25px; }
 .blitz-banner strong { font-size: 42px; }
 .blitz-banner span { font-size: 8px; letter-spacing: 2px; }
 .blitz-banner .bolt-icon { width: 22px; height: 32px; }
 body[data-mode="blitz"] #status { font-size: 26px; }
 body[data-mode="blitz"] .turn-status:has(.turn-clock:not([hidden])) #status { font-size: 27px; }
 body[data-mode="blitz"] .turn-clock { width: 52px; height: 52px; }
 body[data-mode="blitz"] .world-heading h2 { font-size: 21px; }
 body[data-mode="blitz"] .stat strong { font-size: 35px; }
}
@media(prefers-reduced-motion:reduce){body[data-mode="blitz"] .blitz-banner{animation:none}}
