/* 365 Games - the arcade look (3 Oct 2026), loaded after table.css: the same bar and sheets, on a night sky instead of
 * baize, with the game screen in the middle and big touch buttons under it on a tablet. */
body.arcade-sky {
  --felt-a: #0d1430; --felt-b: #000; --bar: rgba(0, 0, 0, .6); --bar-line: rgba(63, 224, 255, .18); --primary: #1f8a3b; --gold: #ffd84a;
  background: radial-gradient(120% 80% at 50% 0%, #101a3c 0%, #04060f 55%, #000 100%); background-color: #000;
}
body.arcade-sky::before {   /* a few faint stars round the screen */
  opacity: .9; mix-blend-mode: normal;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(200, 215, 255, .7), transparent 60%), radial-gradient(1px 1px at 82% 14%, rgba(200, 215, 255, .6), transparent 60%),
    radial-gradient(1px 1px at 68% 74%, rgba(200, 215, 255, .5), transparent 60%), radial-gradient(1.5px 1.5px at 24% 84%, rgba(200, 215, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 92% 58%, rgba(200, 215, 255, .5), transparent 60%), radial-gradient(1px 1px at 6% 52%, rgba(200, 215, 255, .45), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 6%, rgba(200, 215, 255, .5), transparent 60%), radial-gradient(1px 1px at 56% 92%, rgba(200, 215, 255, .4), transparent 60%);
}
.arcade .info .chip span { color: #fff; }
#stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px; }
#screenwrap { position: relative; flex: none; }
#screen {
  display: block; width: 100%; height: 100%; background: #000; image-rendering: pixelated; touch-action: none; cursor: crosshair; outline: none;
  border-radius: 6px; box-shadow: 0 0 0 1px rgba(63, 224, 255, .25), 0 0 40px rgba(63, 224, 255, .12), 0 20px 60px rgba(0, 0, 0, .6);
}

/* the title, paused and game-over cards sit on the game screen */
.ov { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; z-index: 5; }
.ov[hidden] { display: none; }
.ovbox {
  width: min(400px, 100%); max-height: 100%; overflow: auto; padding: 18px 20px 16px; border-radius: 16px; text-align: center;
  background: rgba(2, 6, 18, .86); border: 2px solid rgba(63, 224, 255, .55); box-shadow: 0 0 30px rgba(63, 224, 255, .25); color: #eef4ff;
}
.ovbox h1, .ovbox h2 { margin: 0 0 8px; font: 600 clamp(26px, 5vw, 38px)/1.05 "Clash Display", Archivo, sans-serif; letter-spacing: .02em; color: #ffd84a; text-shadow: 0 0 18px rgba(255, 216, 74, .45); text-wrap: balance; }
.ovbox h2 { font-size: clamp(24px, 4.5vw, 32px); }
.ovbox p { margin: 8px 0; font-size: 16px; line-height: 1.4; }
.ovbox .soft { color: #a9b7d6; font-size: 14px; }
.ovbox .btn.big { min-height: 58px; padding: 0 30px; font-size: 20px; margin: 6px 0 4px; }
.ovbox .btn svg { width: 22px; height: 22px; }
.ovbox .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
/* the title screen's Play and Hall of Fame side by side; the Hall of Fame's gold (hof.js draws its own sheets) */
.ovbox .trow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 4px; }
.ovbox .trow .btn.big { margin: 0; }
#app .btn.hofb, .scrim .btn.hofb { border-color: rgba(255, 210, 87, .6); color: #ffd257; }
#app .btn.hofb:hover, .scrim .btn.hofb:hover { background: rgba(255, 210, 87, .12); }
#oHof { margin-top: 4px; }
.ovbox .ttop { margin: 8px 0 2px; color: #ffe8a3; font-size: 14.5px; }
.ovbox .ttop b { color: #ffd257; font-variant-numeric: tabular-nums; }
#oHof .hf-res { margin-top: 8px; padding: 12px; }
#oHof .hf-res .big { font-size: 38px; }
.ovbox .tiles { margin: 10px 0 2px; }
.ovbox .tile { background: rgba(255, 255, 255, .08); }
.ovbox .tile span { color: #a9b7d6; }
.ovbox .btn:not(.go) { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #eef4ff; }
.legend { list-style: none; margin: 4px auto 6px; padding: 0; display: inline-grid; gap: 6px; text-align: left; font: 700 15px/1 Archivo, sans-serif; letter-spacing: .03em; }
.legend li { display: flex; align-items: center; gap: 12px; }
.legend .lg { display: inline-flex; justify-content: center; width: 50px; }
.legend canvas { image-rendering: pixelated; }
.k-touch { display: none; }
body.touchy .k-touch { display: block; }
body.touchy .k-keys { display: none; }
.btn.danger { background: #a3242f; border-color: #a3242f; }
/* the game's own messages, when it draws them on the screen itself: still read out by a screen reader, not shown twice */
#toast.quiet { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* big buttons for a tablet or phone */
.pad { display: none; flex: none; gap: 12px; width: min(560px, 100%); padding-bottom: env(safe-area-inset-bottom, 0px); }
body.touchy .pad { display: flex; }
.pad button {
  flex: 1; min-height: 72px; border: 2px solid rgba(63, 224, 255, .4); border-radius: 18px; background: rgba(63, 224, 255, .1); color: #eef4ff;
  font: 700 26px/1 Archivo, sans-serif; touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer;
}
.pad button.fire { flex: 1.4; background: rgba(255, 64, 64, .22); border-color: rgba(255, 90, 90, .6); font-size: 22px; letter-spacing: .06em; text-transform: uppercase; }
.pad button.on { background: rgba(63, 224, 255, .35); }
.pad button.fire.on { background: rgba(255, 64, 64, .5); }
/* the score is drawn on the game screen, so the bar keeps to one row and the screen gets the height; the chips stay
   for screen readers */
.arcade .info { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) { .ovbox { padding: 14px 14px 12px; } .ovbox p { font-size: 15px; } .legend { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }
/* a choice on the title card (365 Eclipse's ships): big buttons with a line under each */
.picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.picker button { display: flex; flex-direction: column; gap: 3px; padding: 8px 6px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06); color: #eef4ff; cursor: pointer; font: 700 15px/1.1 Archivo, sans-serif; text-align: center; }
.picker button small { font: 500 12px/1.25 Archivo, sans-serif; color: #a9b7d6; }
.picker button[aria-pressed="true"] { border-color: #7fe8ff; background: rgba(127, 232, 255, .16); box-shadow: 0 0 14px rgba(127, 232, 255, .35); }
.pad button.alt { flex: 1.2; background: rgba(255, 180, 60, .2); border-color: rgba(255, 190, 90, .6); font-size: 20px; text-transform: uppercase; letter-spacing: .04em; }

/* full screen on a phone (11 Oct 2026; arcade.js immersive()): Play takes the game over the whole screen. The bar goes;
   in a game where the screen is the whole controller (a finger anywhere steers, held down it fires) the buttons go too;
   a pause button floats in the top corner, clear of the picture. */
body.immersive .bar { display: none; }
body.immersive.padless .pad { display: none !important; }
body.immersive #stage {
  padding: max(8px, env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
  touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none;
}
body.immersive #screenwrap { z-index: 1; }
body.immersive #screen { border-radius: 3px; }
.imx { display: none; }
body.immersive .imx {
  display: grid; place-items: center; position: fixed; z-index: 3100; top: max(10px, env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px));
  width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 2px solid rgba(110, 230, 255, .6); background: rgba(6, 8, 30, .6); color: #dff6ff;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
body.immersive .imx svg { width: 22px; height: 22px; }
/* a phone on its side (or any short or narrow touch screen), in a game tried full screen on phones: no buttons until a game is
   going, and the title card down to its name, Play and how to steer - the description no longer pushes Play off the card */
body.phonefull.padidle .pad { display: none !important; }
@media (pointer: coarse) and (max-height: 520px), (pointer: coarse) and (max-width: 330px) {   /* (a narrow screen too: big text on a phone) */
  body.phonefull .ovbox .legend, body.phonefull #ov_title .ovbox > p:not(.ttop):not(.k-touch), body.phonefull #ov_paused .ovbox > p { display: none; }
  body.phonefull .ovbox h1 { font-size: 24px; margin-bottom: 4px; }
  body.phonefull .ovbox .btn.big { min-height: 46px; font-size: 17px; padding: 0 14px; }
  body.phonefull .ovbox .trow { flex-direction: column; align-items: stretch; gap: 8px; }
  body.phonefull .ovbox .trow .btn.big { width: 100%; }
}
/* full screen held upright: a strip along the top kept clear for the pause button, so it never covers the scores */
@media (orientation: portrait) { body.immersive #stage { padding-top: calc(max(8px, env(safe-area-inset-top, 0px)) + 54px); } }