/* buttons.css - ONE video-game button look for every Cruise Craze(TM) game-page control (CRUISE button-style card; features/button_style.feature).
 * pxicons.js adds .gbtn + data-gb (primary | secondary | danger) to every button-like control and a pixel arrow (.pxi[data-dir]) where the button goes somewhere.
 * Chunky rectangle, 3 px bevel (light top-left, dark bottom-right), 2 px ink outline, flat palette face, pixel-font label, NO text-shadow, no gradient, no rounded corner.
 * Pressed: face drops 2 px and the bevel inverts. Focus: a gold ring outside the outline. Disabled: dimmed, flat. Size: 56 px tall (72 px primary / touch pad). Palette = pause menu / harbor / boot. */
.gbtn {
  --hi: #5a5ad0; --lo: #0a0a22; --face: #1a1a4e; --ink: #ffe066; --edge: #040305;
  box-sizing: border-box !important; min-height: var(--tap, 56px) !important; min-width: var(--tap, 56px); padding: 6px 12px !important;
  display: inline-flex; align-items: center !important; justify-content: center !important; gap: 12px !important; white-space: nowrap;
  background: var(--face) !important; color: var(--ink) !important; border: 0 !important; border-radius: 0 !important; background-image: none !important; text-shadow: none !important;
  box-shadow: inset 3px 3px 0 var(--hi), inset -3px -3px 0 var(--lo), 0 0 0 2px var(--edge) !important; margin-top: 2px; margin-bottom: 2px;
  font-family: "DotGothic16 Sub", "Courier New", monospace; font-weight: bold; letter-spacing: 2px; cursor: pointer; text-decoration: none; -webkit-appearance: none; appearance: none;
  transform: translateY(0); transition: none !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent; outline: none; overflow: visible;
}
.gbtn[data-gb=primary] { --face: #ffe066; --hi: #fff6b8; --lo: #a8801a; --ink: #14141f; }
li.gbtn[data-gb=primary], #boot .gbtn[data-gb=primary], .ccbtn.gbtn[data-gb=primary] { min-height: calc(var(--tap, 56px) * 1.286) !important; min-width: 120px; }
.gbtn[data-gb=danger]  { --face: #ff8f8f; --hi: #ffd0d0; --lo: #901818; --ink: #14141f; }
.gbtn[data-gbpad] { min-height: calc(var(--tap, 56px) * 1.286) !important; }
.gbtn:hover, html[data-hover] .gbtn:hover { --face: #24246e; filter: none; }
.gbtn[data-gb=primary]:hover { --face: #fff08a; } .gbtn[data-gb=danger]:hover { --face: #ffa8a8; }
.gbtn:active, .gbtn.gb-down { transform: translateY(var(--press, 2px)); box-shadow: inset 3px 3px 0 var(--lo), inset -3px -3px 0 var(--hi), 0 0 0 2px var(--edge) !important; }
.gbtn:focus-visible, .gbtn.sel { box-shadow: inset 3px 3px 0 var(--hi), inset -3px -3px 0 var(--lo), 0 0 0 2px var(--edge), 0 0 0 5px #ffe260 !important; }
.gbtn:disabled, .gbtn[aria-disabled=true], .gbtn.off { --face: #2a2a38; --hi: #3a3a4c; --lo: #1a1a24; --ink: #8a8a98; cursor: default; transform: none; }
.gbtn.sel::before, .gbtn.sel::after { content: none !important; }
.gbtn small { text-shadow: none !important; }
.pxi { pointer-events: none; display: inline-block; flex: 0 0 auto; width: calc(var(--tap, 56px) * 0.6); height: calc(var(--tap, 56px) * 0.6); background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; vertical-align: middle; }
.gbtn[data-gb=secondary] .pxi { opacity: 1; }
li.gbtn { display: flex; width: max-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; white-space: normal; text-align: center; }
.gbtn .pxw::before, .gbtn .pxw { text-shadow: none !important; -webkit-text-stroke: 0 !important; color: var(--ink) !important; }
.gbtn { gap: 0 !important; } .gbtn > .pxi { margin: 0 8px; }
.gbtn[data-gbpad] { margin: 0 !important; padding: 4px 8px !important; flex-wrap: wrap !important; flex-direction: row !important; align-content: center; letter-spacing: 1px; min-width: 0; }
.gbtn[data-gbpad] > .pxi { width: 22px; height: 22px; margin: 0 5px; }
.gbtn[data-gbpad] small { flex: 0 0 100%; text-align: center; margin: 0; }
/* words the game converts to .pxw are separate flex items: innerText would break a flex button into one line per word, so plain buttons centre by line-height instead of flex */
.gbtn:not(li):not([data-gbpad]) { display: inline-block; text-align: center; line-height: calc(var(--tap, 56px) - 14px) !important; vertical-align: middle; }
.ccbtn.gbtn[data-gb=primary], #boot .gbtn[data-gb=primary] { line-height: calc(var(--tap, 56px) * 1.286 - 14px) !important; }
.gbtn:not(li):not([data-gbpad]) > .pxi { vertical-align: middle; }
.gbtn[data-icononly] { padding: 0 !important; } .gbtn[data-icononly] > .pxi { margin: 0; }
/* a narrow window draws the 1024x768 frame at ~0.38: a 56 px SCREEN target is ~147 frame px, so the pause and Settings rows sit two to a row instead of one tall column */
/* landscape phone (844x390, the founder's first priority): four stacked rows ran to y 408 in a 390 px viewport, so SETTINGS sat below the fold under #racer; two columns put all four rows inside the frame (same grid the narrow-width rule uses) */
@media (max-height: 480px) and (min-width: 701px) {
  #pmenu { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 4px !important; padding: 0 calc(var(--tap, 56px) + 28px) 0 12px !important; }
  #pmenu li.gbtn { width: auto; margin: 0 !important; font-size: 30px !important; flex-wrap: wrap; column-gap: 0; row-gap: 0; text-align: center; padding-top: 2px !important; padding-bottom: 2px !important; }
}
@media (max-width: 700px) {
  #pmenu, #smenu { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 4px !important; padding: 0 calc(var(--tap, 56px) + 28px) 0 12px !important; }   /* leave the bottom-right X its own column */
  #pmenu li.gbtn, #smenu li.gbtn { width: auto; margin: 0 !important; } #smenu li.mixrow { grid-column: 1 / -1; }
  #pmenu li.gbtn { font-size: 30px !important; flex-wrap: wrap; column-gap: 0; row-gap: 0; text-align: center; padding-top: 2px !important; padding-bottom: 2px !important; }   /* print pass 3: the words are 16 css px of cap now, so RESTART THIS RUN wraps to two lines inside its button instead of clipping */
  #confirm { padding-top: 40px !important; background: rgba(8,8,32,0.97) !important; } #confirm h1 { margin: 0 0 4px !important; } #confirm p { margin-top: 4px !important; margin-bottom: 4px !important; } #confirm .cf_btns { margin-top: 8px !important; gap: 8px 12px !important; }   /* print pass 3 made the ask's words 16 css px of cap (4 lines of note + two wrapped buttons): the 250 px top gap pushed NO out of the frame; the dim 0.88 veil covers the HUD boxes the pause menu clears */
  #paused { padding-top: 250px !important; }   /* print pass 3: start the menu under the HUD boxes */
}
/* CRUISE-0669: a landscape phone (844x390) draws the frame at ~0.49 too, so the six Settings rows (MUSIC, RALPH, SOUND, MIX, RESET GAME, BACK) overflowed one tall column and clipped BACK: same two-to-a-row grid as the narrow window */
@media (min-width: 701px) and (max-height: 480px) {
  #smenu { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 4px !important; padding: 0 calc(var(--tap, 56px) + 28px) 0 12px !important; }
  #smenu li.gbtn { width: auto; margin: 0 !important; } #smenu li.mixrow { grid-column: 1 / -1; }
}
.hbr-panel .gbtn { letter-spacing: 0; padding: 6px 8px !important; }
@media (max-width: 480px) { .gbtn:not([data-gbpad]) { padding: 6px 8px !important; letter-spacing: 0; margin-left: 0; margin-right: 0; } }
.hbr-panel .gbtn { white-space: normal; line-height: 1.2 !important; text-align: left; }
.gbtn[hidden] { display: none !important; }   /* a hidden control stays hidden (exitbar.js hides by inline style, others by the hidden attribute) */
/* long choice lines wrap instead of clipping */
#choices .gbtn { display: block; width: 100%; text-align: left; white-space: normal; line-height: 1.35 !important; padding: 10px 12px !important; }
/* the fixed exit cell is narrow (the dev dock sits right of it): arrow over word */
#cc-exit.gbtn.gbtn, [data-cc-exit].gbtn.gbtn { display: inline-flex; flex-direction: column; line-height: 1.1 !important; padding: 4px 6px !important; letter-spacing: 0; min-width: 0; gap: 2px !important; }
#cc-exit.gbtn > .pxi, [data-cc-exit].gbtn > .pxi { width: 22px; height: 22px; margin: 0; }
/* a close X is just the X bitmap, square */
.gbtn[data-closer] { min-width: var(--tap, 56px); padding: 0 !important; } .gbtn[data-closer] > .pxi { margin: 0; }
.gbtn[data-closer] { font-size: 0 !important; } .gbtn[data-closer] .pxw { display: none; }
#errandopts .gbtn, #shop .gbtn, #choices .gbtn { white-space: normal; line-height: 1.3 !important; padding: calc((var(--tap, 56px) - 1.3em) / 2 - 2px) 10px !important; }
/* harbor panels: the 56 px (screen) target is ~147 frame px on a phone, so the buttons go 3 / 4 across and drop their margins */
.hbr-panel .gbtn { margin: 0; min-width: 0; }
@media (max-width: 700px) { .hbr-btns { grid-template-columns: repeat(auto-fit, minmax(calc(var(--tap, 56px) * 1.25), 1fr)) !important; gap: 4px !important; } .hbr-panel .gbtn { font-size: 12px; letter-spacing: 0; padding: 2px 3px !important; } }
@media (max-width: 700px) and (orientation: portrait) { .hbr-foot { max-height: none !important; } .hbr-btns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }   /* print pass 3: the harbor place panel words are 16 css px of cap on an upright phone, so the buttons sit two to a row */
@media (max-height: 500px) { .hbr-btns { grid-template-columns: repeat(auto-fit, minmax(calc(var(--tap, 56px) * 1.25), 1fr)) !important; gap: 4px !important; } }
@media (max-width: 700px), (max-height: 500px) { .hbr-panel { inset: 0 !important; justify-content: flex-start; gap: 0 !important; padding: 2px 6px !important; } #carplay .hbr-panel h3 { margin: 0 !important; } #carplay .hbr-say { margin: 0 !important; } .hbr-panel .gbtn.gbtn:not(li):not([data-gbpad]) { line-height: 1.05 !important; } }
/* a phone draws the frame at ~0.38 and the 56 px (screen) MORE / job buttons are ~147 frame px: take the slack from the message line so the job board (11 lines + MORE) stays inside the frame (play_fit jobboard @390x844) */
@media (max-width: 700px) { #carplay[data-stage=hub] .msg { min-height: 0; margin: 0; } #carplay[data-stage=hub] .menu p { margin: 1px 0; } }
/* touch pad: touch.js sizes the pad in SCREEN px (56 portrait, 44 floor in the landscape side columns); the 72 px primary/pad height ate the phone's screen on 9-button screens (play_phone_fit plan) */
#touchpad .gbtn[data-gbpad] { min-height: 56px !important; } @media (orientation: landscape) { #touchpad .col .gbtn[data-gbpad] { min-height: 44px !important; } }
/* the tycoon "PRESS ENTER ..." line is a .press button: it wraps inside the panel instead of running off the side (play_phone_fit welcome) */
#tycoon .press.gbtn, #carplay .press.gbtn, #typlay .press.gbtn { white-space: normal; max-width: 100%; }
/* CRUISE-0653: key wording (ENTER / ESC / 1-9 / ? HELP) is for a keyboard; on a touch or narrow device the line is not shown, the buttons say it */
@media (hover: none), (pointer: coarse), (max-width: 700px) { .keyonly, #foot { display: none !important; } }
/* playtest 2026-10-20 (844x390 / 360x640): harbor panel labels were cut mid-word ('W SURF MISSION(S)', '5 HOUSEKEE(PING)') and the arrow icons sat on the words. Small screens: two columns (each ~170 px, a whole word fits),
   no arrow icon in a panel button (the label says where it goes), buttons grow to fit their wrapped label; the key-letter prefix is .keyonly (hidden on touch, rule above). Caught by geometry_sweep harbor-<place> states. */
@media (max-width: 700px), (max-height: 500px) {
  .hbr-btns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: min-content; align-items: stretch; }
  .hbr-panel .gbtn > .pxi { display: none !important; }
  .hbr-panel .gbtn.gbtn:not(li):not([data-gbpad]) { display: flex; align-items: center; justify-content: center; text-align: center; overflow-wrap: anywhere; hyphens: none; min-height: 46px !important; padding: 2px 6px !important; }
}
/* playtest 2 (HIGH): a panel button is display:flex and every .pxw word is a flex item; .pxw is overflow:hidden (min-width 0), so the flex row SHRANK each word below its letters and clipped them off its end
   ('BUIL A BUSINE'). Words never shrink; the line wraps between words instead (geometry_sweep rule 'glyphs'). */
.hbr-panel .gbtn { flex-wrap: wrap; column-gap: 0; row-gap: 0; }
.hbr-panel .gbtn > .pxw, .hbr-panel .gbtn > .pxsp, .hbr-panel .gbtn .pxw { flex: 0 0 auto; }
@media (max-width: 700px), (max-height: 500px) { .hbr-panel .gbtn.gbtn:not(li):not([data-gbpad]) { row-gap: 8px !important; padding: 14px 6px !important; min-height: 56px !important; } }   /* wrapped lines keep a gap so STEWARD does not touch SHIFT */
@media (max-height: 500px) and (orientation: landscape) { .hbr-panel .gbtn.gbtn:not(li):not([data-gbpad]) { row-gap: 5px !important; padding: 6px 6px !important; min-height: 46px !important; } }   /* landscape phone: the panel is only ~250 px tall, keep BACK inside */