/* Shared by all three games (koc.html, undead.html, bball.html): the Games switcher (js/games-nav.js), the on-screen
   touch stick the 3D modes share, and the one utility class every page uses. */
.hidden { display: none !important; }
/* the switcher's lettering, so it looks the same on every page (KoC's own stylesheet loads these too) */
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/cinzel-500.woff2') format('woff2'); }
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/cinzel-700.woff2') format('woff2'); }
.b3d-stick { position: absolute; left: calc(18px + env(safe-area-inset-left)); bottom: calc(18px + env(safe-area-inset-bottom)); width: 120px; height: 120px; border-radius: 50%;
  background: rgba(15,12,8,.35); border: 2px solid rgba(214,164,92,.45); touch-action: none; z-index: 5; }
.b3d-stick i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(240,200,130,.85), rgba(160,110,50,.85)); box-shadow: 0 2px 8px rgba(0,0,0,.5); pointer-events: none; }
/* the Games button (top-left corner) and its menu */
.games-btn { position: absolute; left: 12px; top: 12px; z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font: 600 12px/1 'Cinzel', Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #f0dcae; background: linear-gradient(#3a2c1a, #24190e); border: 1px solid #a8823e; border-radius: 6px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.games-btn:hover { background: linear-gradient(#4a3820, #2e2012); color: #fff3d0; }
.games-ico { font-size: 14px; color: #d8b24a; }
.games-menu { position: absolute; left: 12px; top: 46px; z-index: 61; width: min(340px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 4px; padding: 6px; background: #1d150c; border: 1px solid #a8823e; border-radius: 8px; box-shadow: 0 12px 34px rgba(0,0,0,.6); }
.games-item { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 6px; border: 1px solid transparent; background: rgba(255,255,255,.03); color: #f0e4c8; cursor: pointer; font: inherit; }
.games-item:hover { background: rgba(216,178,74,.14); border-color: rgba(216,178,74,.4); }
.games-item b { font-family: 'Cinzel', Georgia, serif; font-size: 14px; color: #f2d48a; }
.games-item small { font-size: 12px; opacity: .78; }
.games-item.here { border-color: rgba(216,178,74,.35); }
.games-item.here b::after { content: ' · you are here'; font: 400 11px Georgia, serif; color: #a89870; }
@media (max-width: 760px) {
  .games-btn { top: 6px; left: 6px; padding: 5px 8px; font-size: 11px; }
  .games-menu { top: 38px; left: 6px; }
}
/* the menu's entries are links now (each game is its own page) */
a.games-item { text-decoration: none; }
a.games-item:focus-visible, .games-btn:focus-visible { outline: 2px solid #d8b24a; outline-offset: 2px; }
/* inside a game's own toolbar (Bball Time's header, Undead Nightmare's top bar): in the row, the menu dropping below it */
.games-nav.inline { position: relative; display: inline-block; flex: none; }
.games-nav.inline .games-btn { position: static; }
.games-nav.inline .games-menu { position: absolute; left: auto; right: 0; top: calc(100% + 6px); z-index: 9500; }
/* a game's own toolbar styles stop at the switcher: the same lettering and colours on every page */
.games-nav .games-menu .games-item b { font: 700 14px 'Cinzel', Georgia, serif; letter-spacing: .02em; color: #f2d48a; text-shadow: none; }
.games-nav .games-menu .games-item small { font: 12px/1.35 Georgia, serif; letter-spacing: 0; color: #f0e4c8; text-shadow: none; }
.games-nav .games-menu .games-item.here b::after { font: 400 11px Georgia, serif; color: #a89870; }
/* the music row at the foot of the Games menu (js/game-music.js) */
.games-music { display: flex; align-items: center; gap: 10px; padding: 8px 6px 4px; margin-top: 2px; border-top: 1px solid rgba(216,178,74,.25); }
.games-mtog { flex: none; padding: 6px 10px; border-radius: 5px; border: 1px solid rgba(216,178,74,.45); background: rgba(255,255,255,.04); color: #f0e4c8; font: 700 12px 'Cinzel', Georgia, serif; letter-spacing: .06em; cursor: pointer; text-shadow: none; }
.games-mtog.on { background: rgba(216,178,74,.18); color: #f2d48a; }
.games-music input[type=range] { flex: 1; min-width: 0; accent-color: #d8b24a; }
.games-music input[type=range]:disabled { opacity: .4; }