/* Bennie & Bear (bennie): the game's stage, its screens and the touch buttons. */
@font-face { font-family: "Press Start 2P"; src: url("../fonts/press-start-2p.woff2") format("woff2"); font-display: swap; }

.bn-page { background: #14112a; color: #fff; }
.bn-page .person-bar { background: #14112a; border-bottom-color: #2a2450; }
.bn-main { max-width: 1180px; margin: 0 auto; padding: 10px 12px 24px; }
.bn-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 40px rgba(66, 50, 212, .35); touch-action: none; user-select: none; -webkit-user-select: none; }
.bn-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.bn-stage:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; }

.bn-hud { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 3; }
.bn-hud:has(.is-paused) { z-index: 5; }   /* (paused: the ▶ stays on top of the pause menu, to click) */
.bn-icon { width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(27, 21, 48, .72); color: #fff; font: 700 14px "Press Start 2P", monospace; cursor: pointer; }
.bn-icon:hover { background: #4232d4; }
.bn-icon.is-off { opacity: .45; }
/* the pause / play and full-screen icons: drawn, so they sit dead centre */
.bn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.bn-icon svg { width: 16px; height: 16px; display: block; }
.bn-icon .i-pause, .bn-icon .i-play { fill: currentColor; }
.bn-icon .i-full { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bn-icon .i-play, .bn-icon.is-paused .i-pause { display: none; }
.bn-icon.is-paused .i-play { display: block; }

/* menus over the game */
/* the games box (top left of the main menu and the pause menu) */
.bn-games { position: absolute; top: 12px; left: 12px; z-index: 2; text-align: left; }
.bn-games-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; color: #150e5e; font: 700 12px "Press Start 2P", monospace; box-shadow: 0 3px 0 #9a90e8; cursor: pointer; }
.bn-games-btn:hover { background: #f1effe; }
.bn-games-caret { font-size: 10px; opacity: .7; }
.bn-games-menu { position: absolute; left: 0; top: calc(100% + 8px); min-width: 230px; display: grid; gap: 4px; padding: 8px; background: #fff; border-radius: 14px; box-shadow: 0 10px 26px rgba(10, 6, 40, .45); }
.bn-games-menu[hidden] { display: none; }
.bn-games-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid transparent; border-radius: 10px; color: #150e5e; font: 600 14px system-ui, sans-serif; text-decoration: none; }
a.bn-games-item:hover { background: #f1effe; }
.bn-games-item.is-here { border-color: #150e5e; background: #fff7cc; }
.bn-games-item.is-soon { color: #77739a; font-style: italic; }
.bn-games-icon { width: 1.4em; text-align: center; font-style: normal; }
.bn-games-check { margin-left: auto; font-weight: 800; }
.bn-screen:has(.bn-games) { padding-top: 64px; }
/* the main menu over its picture: dark behind the words and buttons, clearer at the sides and the bottom */
.bn-screen.is-title { background: radial-gradient(ellipse 34% 62% at 50% 44%, rgba(20, 17, 42, .78), rgba(20, 17, 42, .42) 70%, rgba(20, 17, 42, .12)), linear-gradient(rgba(20, 17, 42, .35), rgba(20, 17, 42, 0) 40%); }
@media (max-aspect-ratio: 4/5) { .bn-screen.is-title { background: rgba(20, 17, 42, .86); } }   /* (a phone held upright: the menu runs past the picture, so the old dark backing) */
.bn-screen:has(.bn-back) { padding-top: 56px; }
.bn-screen .bn-back { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 8px 14px; font-size: 12px; }   /* (← Back, top left, on every page opened from another) */
.bn-screen { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px; padding: 18px; overflow-y: auto; background: rgba(20, 17, 42, .86); text-align: center; font-family: system-ui, sans-serif; }
.bn-screen[hidden] { display: none; }
.bn-screen h1, .bn-screen h2 { margin: 0; font: 400 clamp(18px, 4vw, 34px)/1.3 "Press Start 2P", monospace; color: #ffd23f; text-shadow: 3px 3px 0 #4232d4; }
.bn-screen h2 { font-size: clamp(14px, 2.6vw, 22px); }
.bn-screen p { margin: 0; max-width: 620px; font-size: clamp(13px, 1.6vw, 16px); line-height: 1.5; color: #e6e2fd; }
.bn-screen .bn-small { font-size: 12px; color: #b7b0e0; }
.bn-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.bn-btn { border: 0; border-radius: 14px; padding: 12px 20px; background: #d3cdfb; color: #150e5e; font: 400 13px/1.2 "Press Start 2P", monospace; cursor: pointer; box-shadow: 0 4px 0 #8f84e6; }
.bn-btn:hover { background: #c4bcf8; }
.bn-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #8f84e6; }
.bn-btn.is-go { background: #4232d4; color: #fff; box-shadow: 0 4px 0 #21167c; }
.bn-btn.is-go:hover { background: #21167c; }
.bn-btn:disabled { opacity: .45; cursor: default; }
.bn-form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: min(560px, 100%); }
.bn-form input { flex: 1 1 260px; min-width: 0; border: 0; border-radius: 12px; padding: 12px 14px; font: 16px system-ui, sans-serif; background: #fff; color: #150e5e; }
.bn-note { min-height: 1.2em; font-size: 13px; color: #ffd23f; }

/* who you'll meet */
.bn-cast { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.bn-who { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 120px; color: #fff; text-decoration: none; font-size: 12px; line-height: 1.3; }
.bn-who img, .bn-who .bn-face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; border: 4px solid var(--ring, #8a2be2); background: #2a2450; image-rendering: auto; }
.bn-who b { font-size: 13px; }
.bn-who span { color: #b7b0e0; }

/* the map of steps */
.bn-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(820px, 100%); }
.bn-step { position: relative; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; border: 0; border-radius: 14px; padding: 12px; background: #2a2450; color: #fff; text-align: left; cursor: pointer; font: 13px/1.3 system-ui, sans-serif; }
.bn-step b { font: 400 11px/1.4 "Press Start 2P", monospace; color: #ffd23f; }
.bn-step:hover:not(:disabled) { background: #4232d4; }
.bn-step:disabled { opacity: .45; cursor: default; }
.bn-step .bn-facts { font-size: 11px; color: #b7b0e0; }
.bn-steps-list { text-align: left; margin: 0; padding-left: 22px; max-width: 640px; font-size: 14px; line-height: 1.6; color: #e6e2fd; }
.bn-steps-list a { color: #ffd23f; }
.bn-facts-list { align-self: center; width: min(720px, 100%); list-style: none; padding-left: 0; }
.bn-facts-list > li { margin-bottom: 8px; }
.bn-facts-list b { color: #ffd23f; }
.bn-facts-list ul { margin: 4px 0 0; padding-left: 18px; }

/* touch buttons: under the game on phones held upright, over it when turned sideways */
.bn-pad { display: none; justify-content: space-between; gap: 12px; margin-top: 12px; touch-action: none; user-select: none; -webkit-user-select: none; }
.bn-pad-side { display: flex; gap: 12px; }
.bn-key { width: 74px; height: 74px; border: 0; border-radius: 50%; background: #2a2450; color: #fff; font: 400 18px "Press Start 2P", monospace; box-shadow: 0 5px 0 #0c0a1c; touch-action: none; }
.bn-key.is-down { background: #4232d4; transform: translateY(3px); box-shadow: 0 2px 0 #0c0a1c; }
.bn-key-jump, .bn-key-bark { font-size: 11px; }
.bn-key-jump { background: #4232d4; }
.bn-help { margin: 12px 0 0; text-align: center; font-size: 13px; color: #b7b0e0; }
@media (pointer: coarse) {
  .bn-pad { display: flex; }
  .bn-help { display: none; }
}
@media (pointer: coarse) and (orientation: landscape) {
  .bn-main { padding: 0; max-width: none; }
  .bn-page .person-bar { display: none; }
  .bn-stage { height: 100vh; width: auto; max-width: 100vw; margin: 0 auto; border-radius: 0; }
  .bn-pad { position: fixed; inset: auto 0 10px 0; margin: 0; padding: 0 14px; pointer-events: none; z-index: 5; }
  .bn-pad-side { pointer-events: auto; }
  .bn-key { width: 64px; height: 64px; opacity: .8; }
}
@media (max-width: 640px) {
  .bn-screen { position: fixed; z-index: 50; background: #14112a; }   /* (the game is too small on a phone held upright to hold the menus) */
  .bn-icon { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }
  .bn-icon svg { width: 13px; height: 13px; }
  .bn-games { top: 8px; left: 8px; } .bn-games-btn { height: 32px; padding: 0 10px; font-size: 9px; }
  .bn-hud { top: 5px; right: 5px; gap: 4px; }
  .bn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-screen { gap: 8px; padding: 10px; }
  .bn-btn { padding: 10px 14px; font-size: 11px; }
}

/* The pixel font drawn taller (its letters are square), so it reads more easily */
.bn-screen h1, .bn-screen h2 { transform: scaleY(1.3); margin: 6px 0; }
.bn-btn, .bn-step b, .bn-icon, .bn-key { font-stretch: normal; }
.bn-btn span.bn-tall, .bn-step b { display: inline-block; transform: scaleY(1.3); transform-origin: 0 50%; }

/* The main menu and the pause menu: a column of buttons; the volume sliders */
.bn-screen h1.bn-logo { font-size: clamp(24px, 5.5vw, 46px); }
.bn-gia { display: block; width: 99px; height: 75px; margin: 0 auto -2px; image-rendering: pixelated; }   /* (Gia's logo over the title, in pixels like the game: images/brand/gia-logo-pixel.png, 33 × 25, shown at exactly 3× (2× on smaller screens) so every pixel stays square) */
@media (max-width: 900px), (max-height: 640px) { .bn-gia { width: 66px; height: 50px; } }
.bn-screen .bn-tag { max-width: 540px; font-size: clamp(12px, 1.5vw, 15px); }
.bn-menu { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: min(360px, 90%); }
.bn-menu .bn-btn { width: 100%; }
.bn-vols { display: grid; gap: 10px; width: min(380px, 92%); padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.bn-vol { display: grid; grid-template-columns: 1fr minmax(110px, 160px) 3.2em; align-items: center; gap: 10px; color: #e6e2fd; font-size: 13px; text-align: left; }
.bn-vol input[type="range"] { width: 100%; accent-color: #ffd23f; cursor: pointer; }
.bn-vol output { font: 400 10px/1 "Press Start 2P", monospace; color: #ffd23f; text-align: right; }

/* The Blueprint: Bear's bridge drawn as a blueprint; each page found inks in a piece */
.bn-blueprint { width: min(760px, 96%); border: 2px solid #e8f1ff; border-radius: 10px; overflow: hidden;
  background-color: #1f4f9c;
  background-image: linear-gradient(rgba(232, 241, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 241, 255, .13) 1px, transparent 1px);
  background-size: 16px 16px; }
.bn-blueprint svg { display: block; width: 100%; height: auto; }
.bp-part { fill: none; stroke: rgba(232, 241, 255, .38); stroke-width: 1.4; stroke-dasharray: 4 3; }
.bp-part.is-on { fill: rgba(232, 241, 255, .82); stroke: #ffffff; stroke-dasharray: none; cursor: pointer; transition: fill .15s; }
.bp-part.is-on:hover, .bp-part.is-on:focus-visible { fill: #ffd23f; outline: none; }
.bp-part .bp-hit, .bp-part.is-on:hover .bp-hit, .bp-part.is-on:focus-visible .bp-hit { fill: transparent; stroke: none; }
.bp-water { fill: rgba(232, 241, 255, .08); }
.bp-line { stroke: rgba(232, 241, 255, .6); stroke-width: 1.5; }
.bp-bank { fill: rgba(232, 241, 255, .14); stroke: rgba(232, 241, 255, .5); stroke-width: 1; }
.bp-step { fill: #e8f1ff; font: 400 11px "Press Start 2P", monospace; text-anchor: middle; }
.bp-title { fill: rgba(232, 241, 255, .75); font: 400 9px "Press Start 2P", monospace; }
.bn-screen .bn-bp-note { min-height: 3em; max-width: 640px; padding: 10px 14px; border-radius: 10px; background: rgba(31, 79, 156, .5); color: #e8f1ff; font-size: 14px; }
.bn-bp-all { max-width: 640px; color: #e6e2fd; text-align: left; font-size: 13px; }
.bn-bp-all summary { cursor: pointer; text-align: center; color: #b7b0e0; }

/* test play (for now): dashed buttons, and the steps in a grid */
.bn-btn.bn-test { border-style: dashed; }
.bn-test-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; width: min(620px, 100%); }
.bn-test-steps .bn-btn { width: 100%; }
.bn-test-steps.is-bosses { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); width: min(720px, 100%); }

/* Every word in the game in the pixel font: the menus' text (the main menu's blurb, notes, the volume
   labels, the officials, the blueprint pages, the address box, the games box) and the help line under
   it. (Its letters are wide, so a little smaller than the system font was, with room between lines.) */
.bn-screen, .bn-screen p, .bn-screen input, .bn-games-item, .bn-help, .bn-vol, .bn-who, .bn-steps-list, .bn-bp-all, .bn-screen .bn-bp-note, .bn-note { font-family: "Press Start 2P", monospace; font-weight: 400; }
.bn-screen p { font-size: clamp(9px, 1.15vw, 11px); line-height: 1.9; }
.bn-screen .bn-tag { font-size: clamp(9px, 1.1vw, 11px); line-height: 1.9; max-width: 600px; }
.bn-screen .bn-small, .bn-help { font-size: 9px; line-height: 1.9; }
.bn-vol { font-size: 10px; }
.bn-games-item { font-size: 10px; }
.bn-games-item b { font-weight: 400; }
.bn-who { font-size: 8px; line-height: 1.6; } .bn-who b { font-size: 9px; font-weight: 400; }
.bn-steps-list, .bn-bp-all { font-size: 10px; line-height: 1.9; }
.bn-screen .bn-bp-note { font-size: 10px; line-height: 1.9; }
.bn-step .bn-facts { font-size: 9px; }
.bn-note { font-size: 10px; line-height: 1.7; }
.bn-form input { font-size: 11px; }
.bn-vol { grid-template-columns: 158px minmax(110px, 1fr) 3.2em; white-space: nowrap; }   /* (the labels one width, so the two sliders line up) */
/* (the main menu fits its now-taller blurb: a little less space between things) */
.bn-screen.is-title { gap: 9px; }
.bn-screen h1.bn-logo { font-size: clamp(22px, 5vw, 40px); }
.bn-screen.is-title .bn-menu { gap: 8px; }

/* the pause menu's three small buttons side by side, each the same size */
.bn-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bn-trio .bn-btn { width: 100%; padding: 10px 6px; font-size: 10px; }

/* "Read every page", open: the pages on a light sheet of blueprint paper, dark lettering, so they read easily */
.bn-bp-all[open] { box-sizing: border-box; width: min(680px, 100%); padding: 12px 18px 16px; border-radius: 14px; background: #eef3fb; color: #14244a; box-shadow: 0 4px 0 #9fb3d8; }
.bn-bp-all[open] summary { color: #2f63b8; margin-bottom: 10px; }
.bn-bp-all[open] .bn-facts-list { width: 100%; }
.bn-bp-all[open] .bn-facts-list b { color: #1d447f; }
.bn-bp-all[open] .bn-facts-list > li { padding-bottom: 8px; border-bottom: 1px dashed #b9c8e4; }
.bn-bp-all[open] .bn-facts-list > li:last-child { border-bottom: 0; }
.bn-bp-all[open] .bn-small { color: #6f7fa3; }
.bn-bp-all[open] .bn-steps-list, .bn-bp-all[open] .bn-steps-list li { color: #14244a; }