/* Bakerfield Unearthed — Stakeout (the stealth game page).
   Uses the tokens in site.css. The stage is a cutout theatre: an aubergine
   box with a hard lime offset, the canvas inside it, a case-file HUD above.
   Screens (title, briefing, pause, caught, cleared) sit over the stage on
   wide screens and under it on phones, where the stage is too short to hold
   them. Motion is stepped; nothing here tweens. */

.so-intro { padding-bottom: clamp(16px, 3vw, 28px); }
.so-intro .lede { max-width: 44rem; }
.so-play { padding-bottom: clamp(32px, 5vw, 64px); }

.so {
  --so-pad: 12px;
  background: var(--aubergine);
  color: var(--mint);
  padding: var(--so-pad);
  box-shadow: -5px 8px 0 var(--lime);
  position: relative;
}
.so[hidden] { display: none; }

/* ---- HUD: a strip off an H-ED form ------------------------------------ */
.so-hud {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px;
  font-family: var(--f-form); font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 0 2px 10px;
}
.so-hud p { margin: 0; }
.so-hud-level { flex: 1 1 auto; min-width: 12em; }
.so-hud-bags, .so-hud-time { font-variant-numeric: tabular-nums; }
.so-hud-bags [data-hud-bags] { color: var(--lime); }
.so-hud-par { color: #b8a9d6; font-weight: 400; }

/* ---- the stage ---------------------------------------------------------- */
.so-screenwrap { position: relative; }
.so-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #141026;
  overflow: hidden;
  touch-action: manipulation;
}
.so-stage canvas { display: block; width: 100%; height: 100%; }
.so-stage:focus { outline: none; }
.so-stage:focus-visible { outline: 4px solid var(--pink); outline-offset: 3px; }

.so-tip {
  font-family: var(--f-form); font-size: .92rem; line-height: 1.4;
  margin: 10px 2px 0; min-height: 2.8em; color: var(--mint);
}
.so-hud p[hidden] { display: none; }
.so-tip kbd {
  font-family: var(--f-form); font-weight: 700; font-size: .85em;
  background: var(--mint); color: var(--aubergine); padding: 0 .35em; border-radius: 2px;
  box-shadow: 0 2px 0 var(--lime);
}

/* ---- controls ----------------------------------------------------------- */
.so-bar { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 12px; }
.so-bar .btn { font-size: 1rem; box-shadow: -3px 5px 0 var(--lime); }
.so-bar .btn:hover { box-shadow: -4px 7px 0 var(--lime); }
.so-bar .btn[aria-pressed="true"] { background: var(--lime); }

.so-pad { display: none; gap: 12px; }
.so-key {
  font-family: var(--f-display); font-size: 1.35rem; letter-spacing: .06em; text-transform: uppercase;
  min-width: 64px; min-height: 60px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 4px; cursor: pointer;
  background: var(--paper) var(--grain); color: var(--aubergine);
  box-shadow: -3px 5px 0 var(--lime);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.so-key.is-down { transform: translate(-2px, 3px); box-shadow: -1px 2px 0 var(--lime); background-color: var(--kraft); }
.so-key-hide.is-ready { background-color: var(--pink); }
.so-key-hide.is-hidden { background-color: var(--lime); }

/* Pad under the stage: phones, tablets and anything with a coarse pointer. */
@media (max-width: 759px), (any-pointer: coarse) {
  .so-pad-under { display: grid; grid-template-columns: 1fr 1.3fr 1fr; margin-top: 12px; }
  .so-pad-under .so-key { min-height: 64px; width: 100%; }
}

/* Pad beside the stage: landscape phones, where there is no room under it.
   The stage is letterboxed by the screen's height and centred. When the
   gutters either side can take the keys (stakeout.js adds .so-gutters), the
   arrows go in the left gutter and Hide in the right, clear of the playfield.
   When they cannot, the keys sit over the floor of the stage instead. */
.so { --so-gut: 132px; }   /* two 60px keys, a 6px gap, 6px clear of the stage */
.so-pad-over { position: absolute; inset: auto 0 0 0; padding: 10px; justify-content: space-between; pointer-events: none; }
.so-pad-over .so-key { pointer-events: auto; opacity: .82; min-width: 68px; min-height: 60px; }
.so-pad-over .so-key-hide { margin-left: auto; }
@media (any-pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  .so-play .wrap { padding: 0 8px; }
  .so { --so-pad: 8px; }
  .so-stage, .so-pad-over { max-width: calc((100svh - 64px) * 16 / 9); margin: 0 auto; }
  .so-pad-under { display: none; }
  .so-pad-over { display: flex; }
  .so.is-screen .so-pad-over { display: none; }
}

/* Full screen: fill it, keep 16:9, pad beside or over the stage on touch. */
.so:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 10px; box-shadow: none; overflow: auto; }
.so:fullscreen .so-stage, .so:fullscreen .so-pad-over { max-width: calc((100vh - 150px) * 16 / 9); margin: 0 auto; }
@media (any-pointer: coarse) {
  .so:fullscreen .so-pad-under { display: none; }
  .so:fullscreen .so-pad-over { display: flex; }
  .so:fullscreen.is-screen .so-pad-over { display: none; }
}

/* The gutters: the stage gives up a little width so the keys never cover it.
   (After the full-screen rules so it wins over them.) */
@media (any-pointer: coarse) {
  .so.so-gutters .so-screenwrap { padding: 0 var(--so-gut); }
  .so.so-gutters .so-pad-over { max-width: none; margin: 0; padding: 0; gap: 6px; align-items: flex-end; }
  .so.so-gutters .so-pad-over .so-key { opacity: 1; width: 60px; min-width: 60px; min-height: 64px; padding: 0; }
  .so.so-gutters .so-pad-over .so-key-hide { width: calc(var(--so-gut) - 6px); }
}

/* While a screen is up the pad has nothing to do. */
.so.is-screen .so-pad { visibility: hidden; }

/* ---- screens -------------------------------------------------------------- */
.so-panel { color: var(--ink); }
.so-panel[hidden] { display: none; }
.so-card {
  background: var(--paper) var(--grain);
  box-shadow: var(--shadow);
  padding: 18px 20px 20px;
  position: relative;
}
.so-card > :last-child { margin-bottom: 0; }
.so-card h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin: .1em 0 .25em; }
.so-card h2.so-big { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); }
.so-card p { margin: 0 0 .7em; }
.so-card .label { margin-bottom: .3em; }
.so-card .stamp { margin: 0 0 .5em; font-size: 1.05rem; }
.so-card .so-quote { font-style: italic; }
.so-card .so-sig { font-family: var(--f-marker); color: var(--hed-red); transform: rotate(-2deg); display: inline-block; }
.so-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 14px; }
.so-actions .btn { font-size: 1.05rem; }

.so-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--f-form); font-weight: 700; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .8em; }
.so-facts span { white-space: nowrap; }

.so-form {
  background: var(--report) var(--grain); color: #1d1d1d;
  font-family: var(--f-form); font-size: .95rem; line-height: 1.45;
  padding: 12px 14px; margin: 0 0 .8em; box-shadow: 2px 3px 0 rgba(29,10,57,.22);
}
.so-form p { margin: 0 0 .4em; }
.so-form p:last-child { margin: 0; }
.so-form strong { letter-spacing: .06em; }

.so-stars { font-size: 2rem; line-height: 1; letter-spacing: .08em; margin: 0 0 .3em; }
.so-stars .on { color: var(--pink); text-shadow: -2px 3px 0 var(--aubergine); }
.so-stars .off { color: var(--kraft-deep); opacity: .55; }
.so-score { font-family: var(--f-form); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.so-new { background: var(--lime); padding: 0 .35em; }

/* Level list on the title screen. */
.so-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.so-level {
  width: 100%; min-height: 48px; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 4px 10px;
  font: inherit; color: var(--ink);
  background: #fffaf0; border: 2px solid var(--aubergine); padding: 6px 10px;
  box-shadow: -2px 3px 0 var(--aubergine);
}
.so-level:hover:not([disabled]) { background: var(--mint); }
.so-level:active:not([disabled]) { transform: translate(-1px, 2px); box-shadow: -1px 1px 0 var(--aubergine); }
.so-level[disabled] { cursor: not-allowed; background: #e9dcc0; border-style: dashed; box-shadow: none; }
.so-level .n { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; }
.so-level .t { font-family: var(--f-display); text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; letter-spacing: .02em; }
.so-level .d { display: block; font-family: var(--f-form); font-size: .78rem; letter-spacing: .04em; color: var(--muted); text-transform: none; }
.so-level .s { font-size: 1.05rem; letter-spacing: .06em; white-space: nowrap; }
.so-level .s .on { color: var(--pink); }
.so-level .s .off { color: var(--kraft-deep); }
.so-reset { font-family: var(--f-form); font-size: .85rem; background: none; border: 0; padding: 12px 0 0; min-height: 44px; color: var(--muted); text-decoration: underline; cursor: pointer; }

.so-title-grid { display: grid; gap: 16px 22px; }
.so-keys { font-family: var(--f-form); font-size: .86rem; line-height: 1.5; margin: 0; padding: 0; list-style: none; }
.so-keys kbd { font-family: var(--f-form); font-weight: 700; background: var(--aubergine); color: var(--mint); padding: 0 .35em; border-radius: 2px; }

/* Narrow: screens flow under the stage (the stage is ~200px tall). */
@media (max-width: 759px) {
  .so-play .wrap { padding: 0; }
  .so { box-shadow: none; --so-pad: 0; padding-bottom: 14px; }
  .so-hud { padding: 10px 16px 8px; font-size: .82rem; gap: 2px 14px; }
  .so-tip, .so-bar, .so-pad-under { margin-left: 16px; margin-right: 16px; }
  .so-tip { min-height: 4.2em; }
  /* screens flow under the stage here, so the idle pad and tip give way */
  .so.is-screen .so-pad-under, .so.is-screen .so-tip { display: none; }
  .so.is-screen .so-bar { margin-top: 18px; }
  .so-panel { padding: 12px 16px 0; }
  .so-noscript { margin: 0 16px; }
}

/* Wide: screens sit over the stage on a scrim. */
@media (min-width: 760px) {
  .so-panel {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    padding: 18px; overflow: auto;
    background: rgba(13, 8, 30, .55);
  }
  .so-card { width: min(100%, 640px); max-height: 100%; overflow: auto; }
  .so-card.is-wide { width: min(100%, 860px); }
  .so-title-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .so-card { padding: 14px 16px 16px; }
  .so-card h2 { font-size: 1.8rem; }
  .so-card h2.so-big { font-size: 2.4rem; }
  .so-card p { font-size: .95rem; }
  .so-level { min-height: 44px; padding: 4px 8px; }
  .so-level .d { display: none; }
}
@media (any-pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  .so-play .wrap { padding: 0 8px; }   /* keeps the side keys off the screen's edge below 760px too */
  .so-panel { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: center; padding: 8px; overflow: auto; background: rgba(13, 8, 30, .55); }
  .so-card { width: min(100%, 720px); padding: 12px 14px; }
  .so-title-grid { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .so-level .d { display: none; }
  .so-card { font-size: .9rem; }
  .so-card h2 { font-size: 1.6rem; }
  .so-card h2.so-big { font-size: 2.1rem; margin: 0 0 .15em; }
  .so-title-grid .label { letter-spacing: .08em; }
  .so-title-grid > div:first-child > .label, .so-keys { display: none; }
  .so-levels { gap: 6px; }
  .so-level { min-height: 44px; padding: 3px 8px; }
  .so-level .n { font-size: 1.25rem; }
  .so-actions { margin-top: 8px; }
}

/* ---- the page around the game ------------------------------------------- */
.so-rules { padding-top: clamp(24px, 4vw, 48px); }
.so-rules-grid { display: grid; gap: clamp(24px, 3vw, 40px); align-items: start; }
@media (min-width: 900px) { .so-rules-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.so-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.so-dl dt { font-family: var(--f-form); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .86rem; padding-top: .25em; }
.so-dl dd { margin: 0; }
@media (max-width: 520px) { .so-dl { grid-template-columns: 1fr; gap: 2px; } .so-dl dd { margin-bottom: 10px; } }
.so-note { transform: rotate(.6deg); }
.so-note dl { grid-template-columns: max-content minmax(0, 1fr); }
@media (max-width: 420px) { .so-note dl { grid-template-columns: 1fr; } }

.so-cases-h { margin-top: clamp(40px, 6vw, 72px); }
.so-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr)); }
.so-case { background: var(--report) var(--grain); font-family: var(--f-form); color: #1d1d1d; box-shadow: var(--shadow); padding: 16px 18px; }
.so-case:nth-child(2n) { transform: rotate(-.7deg); }
.so-case:nth-child(3n) { transform: rotate(.5deg); }
.so-case h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; letter-spacing: .02em; margin: .2em 0 .35em; color: var(--aubergine); }
.so-case p { margin: 0 0 .6em; font-size: .95rem; }
.so-case .so-case-home { font-weight: 700; margin: 0; }
.so-privacy { font-family: var(--f-form); font-size: .9rem; margin-top: 22px; }