/* SM Game Kit (P1, 20/10/2026): one skin for the in-game UI of Adventurer / Boba / Squishy / Farm / Photographer.
   Scoped to body.in-game:not(.in-city) so the city lobby is untouched. Tokens ride on pixel.css (--bp-*, --px-*); bitmaps are slices of
   media/sm/city/ui_*.png in media/sm/game_ui/. Banned in HUD: emoji. No purple. */
body.in-game:not(.in-city) {
  --gk-ink: #10233F; --gk-navy: #1A66D9; --gk-navy-edge: #1553B0; --gk-navy-2: #2B7FE6;   /* 28/10 old-art sweep: the navy kit tokens are the sky-blue glass palette now */
  --gk-blue: #199AFD; --gk-blue-lo: #0064FD; --gk-blue-hi: #8FD0FF; --gk-gold: #FDD935; --gk-coral: #FB796B;
  --gk-paper: #F4F9FF; --gk-inner: #BCD6FA; --gk-shadow: 0 6px 16px rgba(20, 70, 160, .2);
}

/* ---- 1. full bleed: no site top bar, tab bar, footer or aura while a game is on ---- */
body.in-game:not(.in-city) :is(.app-nav, .tabnav, .sidenav, .foot, .aura) { display: none !important; }
body.in-game:not(.in-city) { padding-top: 0; }
body.in-game:not(.in-city) #app.wrap { padding-top: max(6px, env(safe-area-inset-top, 0px)); padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }

/* ---- 2. one sound button: the global one, a 48 px round bitmap button, top-right, icon only ---- */
body.in-game:not(.in-city) .snd-mute {
  position: fixed; top: max(8px, env(safe-area-inset-top, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); bottom: auto; left: auto;
  z-index: 60; width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; gap: 0; justify-content: center;
  border: 0; border-radius: 0; box-shadow: none; background-color: transparent;
  image-rendering:auto;color: var(--gk-ink); }
body.in-game:not(.in-city) .snd-mute:active { transform: translateY(2px); }
body.in-game:not(.in-city) .snd-mute .hide-s, body.in-game:not(.in-city) .snd-mute .lbl { display: none; }
body.in-game:not(.in-city) .snd-mute:focus-visible { outline: 3px solid var(--gk-gold); outline-offset: 2px; }
body.in-game:not(.in-city) .ss-ibtn.snd { display: none; }      /* Photographer's own speaker: the global one replaces it */

/* ---- 3. one hint channel: .gd-hint, kit toast, fades after 6 s ---- */
body.in-game:not(.in-city) .gd-hint { background: var(--gk-paper); color: var(--gk-ink); border-radius: 0; box-shadow: inset 0 0 0 2px var(--gk-ink), 0 3px 0 rgba(1, 7, 47, .3); font-weight: 650;
  animation: gd-in .25s ease-out, gk-tip-out .4s ease-in 6s forwards; }
body.in-game:not(.in-city) .gd-hint-i { font-size: 0; width: 12px; height: 12px; flex: none; background: var(--gk-gold); box-shadow: 0 0 0 2px var(--gk-ink); }
body.in-game:not(.in-city) .gd-hint.is-bottom { animation: gk-tip-out .4s ease-in 6s forwards; }
@keyframes gk-tip-out { to { opacity: 0; visibility: hidden; } }
body.in-game:not(.in-city) .pv-tips { display: none; }          /* Boba/Squishy second tip pill: duplicate of .gd-hint */

/* ---- 4. HUD chips (all games): navy kit chips, gold numbers ---- */
body.in-game:not(.in-city) :is(.obby-pill, .ss-pill, .dg-pill, .fm-chip) {
  background: var(--gk-navy); color: #fff; border-radius: 0; border: 0; min-height: 40px; -webkit-backdrop-filter:none;backdrop-filter: none;
  box-shadow: inset 0 0 0 2px var(--gk-ink), inset 0 0 0 4px var(--gk-navy-2), var(--gk-shadow); }
body.in-game:not(.in-city) :is(.obby-pill, .ss-pill, .dg-pill) b { color: var(--gk-gold); }
body.in-game:not(.in-city) .fm-chip { font-size: 17px; }

/* ---- 5. buttons: one component, 48 px touch targets ---- */
body.in-game:not(.in-city) :is(.gd-help, .gd-help.is-adopted) {
  min-width: 48px; min-height: 48px; width: 48px; height: 48px; border-radius: 0; background: var(--gk-gold) !important; color: var(--gk-ink) !important;
  box-shadow: inset 0 0 0 3px var(--gk-ink), inset 0 -5px 0 #C99A00, var(--gk-shadow); }
body.in-game:not(.in-city) .gk-btn, body.in-game:not(.in-city) :is(.arc-start, .dg-enter) {
  min-height: 48px; border: 0; background: none; color: var(--gk-ink);
  font: 700 18px/1 var(--px-display, system-ui); -webkit-font-smoothing: none; image-rendering:auto;box-shadow: none; border-radius: 0; cursor: pointer; }
body.in-game:not(.in-city) .gk-btn:active, body.in-game:not(.in-city) :is(.arc-start, .dg-enter):active { transform: translateY(2px); }
body.in-game:not(.in-city) .gk-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { body.in-game:not(.in-city) .gd-hint { animation: gk-tip-out .01s linear 6s forwards; } }

/* keep the one sound button (top-right) clear of every HUD row */
body.in-game:not(.in-city) :is(.obby-hud, .ss-hud) { padding-right: 56px; }
@media (max-width: 560px) {
  body.in-game:not(.in-city) .ss-hud { gap: 4px; }
  body.in-game:not(.in-city) .ss-hud .ss-pill { padding: 0 6px; gap: 4px; font-size: 13px; }
  body.in-game:not(.in-city) .ss-hud .ss-pill canvas { display: none; }
  body.in-game:not(.in-city) .ss-hud .ss-pill b { font-size: 15px; }
}
@media (max-width: 560px) { body.in-game:not(.in-city) .ss-hud > .ss-pill:first-child { display: none; } }   /* the day is also in the panel title */

/* ---- journey screens (.ob-scr, body.in-city): the global sound button moves into the header gutter (top-right, icon only) so it never covers Attack (C), "I know what I want", Charge! or a footer button (22/10) ---- */
body:has(.ob-scr) .snd-mute { position: fixed; top: max(4px, env(safe-area-inset-top, 0px)); right: max(6px, env(safe-area-inset-right, 0px)); bottom: auto; left: auto; z-index: 70;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; gap: 0; justify-content: center; border-radius: 12px; }
body:has(.ob-scr) .snd-mute .hide-s, body:has(.ob-scr) .snd-mute .lbl { display: none; }

/* ---- 9. new UI icon set (media/ui_icons, js/ui/icons.js): ONE mechanism for every game. icons.js sets <html data-ui-icons="1"> only when the files load, so a missing
   file keeps the old bitmap buttons. The icon art is a finished round button (its own flat base): we draw it as the background, keep the element's click handler,
   aria-label and 48 px target. Hook: [data-ico="<name>"] on any round HUD button; .snd-mute and .gd-help are mapped below without touching their markup. ---- */
html[data-ui-icons="1"] body.in-game:not(.in-city) :is(.snd-mute, .gd-help, .gd-help.is-adopted, [data-ico]):not(.gk-btn):not(.ico-lead) {
  background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; background-image: var(--ico-img) !important;
  image-rendering: auto; box-shadow: none !important; border: 0 !important; border-radius: 50% !important; font-size: 0 !important; color: transparent !important; overflow: hidden; }
html[data-ui-icons="1"] body.in-game:not(.in-city) :is(.snd-mute, .gd-help, [data-ico]):not(.gk-btn):not(.ico-lead) > :is(svg, img, span, canvas, i, b) { display: none !important; }
html[data-ui-icons="1"] body.in-game:not(.in-city) :is(.snd-mute, .gd-help, [data-ico]):not(.gk-btn):not(.ico-lead):hover { filter: brightness(1.08); }
html[data-ui-icons="1"] body.in-game:not(.in-city) .snd-mute { --ico-img: image-set(url("../media/ui_icons/sound_on_48.png") 1x, url("../media/ui_icons/sound_on_48@2.png") 2x); }
html[data-ui-icons="1"] body.in-game:not(.in-city) .snd-mute[aria-pressed="true"] { --ico-img: image-set(url("../media/ui_icons/sound_off_48.png") 1x, url("../media/ui_icons/sound_off_48@2.png") 2x); }
html[data-ui-icons="1"] body.in-game:not(.in-city) :is(.gd-help, .gd-help.is-adopted) { --ico-img: image-set(url("../media/ui_icons/help_48.png") 1x, url("../media/ui_icons/help_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="back"] { --ico-img: image-set(url("../media/ui_icons/back_48.png") 1x, url("../media/ui_icons/back_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="help"] { --ico-img: image-set(url("../media/ui_icons/help_48.png") 1x, url("../media/ui_icons/help_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="settings"] { --ico-img: image-set(url("../media/ui_icons/settings_48.png") 1x, url("../media/ui_icons/settings_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="sound_on"] { --ico-img: image-set(url("../media/ui_icons/sound_on_48.png") 1x, url("../media/ui_icons/sound_on_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="sound_off"] { --ico-img: image-set(url("../media/ui_icons/sound_off_48.png") 1x, url("../media/ui_icons/sound_off_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="close"] { --ico-img: image-set(url("../media/ui_icons/close_48.png") 1x, url("../media/ui_icons/close_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="home"] { --ico-img: image-set(url("../media/ui_icons/home_48.png") 1x, url("../media/ui_icons/home_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="pause"] { --ico-img: image-set(url("../media/ui_icons/pause_48.png") 1x, url("../media/ui_icons/pause_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="play"] { --ico-img: image-set(url("../media/ui_icons/play_48.png") 1x, url("../media/ui_icons/play_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="menu"] { --ico-img: image-set(url("../media/ui_icons/menu_48.png") 1x, url("../media/ui_icons/menu_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="info"] { --ico-img: image-set(url("../media/ui_icons/info_48.png") 1x, url("../media/ui_icons/info_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="check"] { --ico-img: image-set(url("../media/ui_icons/check_48.png") 1x, url("../media/ui_icons/check_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="retry"] { --ico-img: image-set(url("../media/ui_icons/retry_48.png") 1x, url("../media/ui_icons/retry_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="hint"] { --ico-img: image-set(url("../media/ui_icons/hint_48.png") 1x, url("../media/ui_icons/hint_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="list"] { --ico-img: image-set(url("../media/ui_icons/list_48.png") 1x, url("../media/ui_icons/list_48@2.png") 2x); }
html[data-ui-icons="1"] [data-ico="map"] { --ico-img: image-set(url("../media/ui_icons/map_48.png") 1x, url("../media/ui_icons/map_48@2.png") 2x); }
html[data-ui-icons="1"] .shl-rb[data-ico], html[data-ui-icons="1"] .svm-rb[data-ico] { background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: var(--ico-img); image-rendering: auto; box-shadow: none; border-radius: 50%; font-size: 0; color: transparent; }
html[data-ui-icons="1"] .shl-rb[data-ico] > *, html[data-ui-icons="1"] .svm-rb[data-ico] > * { display: none; }

/* ---- 9b. .ico-btn: any glyph button (close, home, help, gear) drawn with the icon set. Works outside games too (sheets in the city / journey). Old glyph stays when the files are missing (no data-ui-icons). ---- */
html[data-ui-icons="1"] .ico-btn[data-ico] { background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; background-image: var(--ico-img) !important;
  box-shadow: none !important; border: 0 !important; border-radius: 50% !important; font-size: 0 !important; color: transparent !important; width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0 !important; overflow: hidden; }
html[data-ui-icons="1"] .ico-btn[data-ico] > * { display: none !important; }
html[data-ui-icons="1"] .ico-btn[data-ico]:hover { filter: brightness(1.08); }
html[data-ui-icons="1"] .ico-btn[data-ico="home"] { background-color: transparent !important; }
/* the floating "Music off" pill sat on top of Attack / the dock in every game; the global sound button mutes music too and Settings keeps the music toggle */
body.in-game:not(.in-city) .snd-music.float { display: none !important; }
/* city / journey (body.in-city): the global sound button is the same drawn round icon, the Music pill goes (Sound mutes both) */
html[data-ui-icons="1"] body:is(.in-city, [data-screen="games"]) .snd-mute { --ico-img: image-set(url("../media/ui_icons/sound_on_48.png") 1x, url("../media/ui_icons/sound_on_48@2.png") 2x);
  background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; background-image: var(--ico-img) !important;
  box-shadow: none !important; border: 0 !important; border-radius: 50% !important; font-size: 0 !important; color: transparent !important; width: 48px; height: 48px; min-width: 48px; padding: 0 !important; justify-content: center; gap: 0; overflow: hidden; }
html[data-ui-icons="1"] body:is(.in-city, [data-screen="games"]) .snd-mute[aria-pressed="true"] { --ico-img: image-set(url("../media/ui_icons/sound_off_48.png") 1x, url("../media/ui_icons/sound_off_48@2.png") 2x); }
html[data-ui-icons="1"] body:is(.in-city, [data-screen="games"]) .snd-mute > * { display: none !important; }
body:is(.in-city, [data-screen="games"]) .snd-music.float { display: none !important; }

/* ---- 9c. HUD chip glyphs (pxIcon): the drawn coin/gem/heart/star/flame/chest/lock/shield/sword/ticket replace the pixel SVG when the icon files load ---- */
html[data-ui-icons="1"] .px-ico[data-g] { background: no-repeat center / contain; }
html[data-ui-icons="1"] .px-ico[data-g] > svg { visibility: hidden; }
html[data-ui-icons="1"] .px-ico[data-g="coin"] { background-image: image-set(url("../media/ui_icons/coin_48.png") 1x, url("../media/ui_icons/coin_48@2.png") 2x); }
html[data-ui-icons="1"] .px-ico[data-g="gem"] { background-image: image-set(url("../media/ui_icons/gem_48.png") 1x, url("../media/ui_icons/gem_48@2.png") 2x); }
html[data-ui-icons="1"] .px-ico[data-g="heart"] { background-image: image-set(url("../media/ui_icons/heart_48.png") 1x, url("../media/ui_icons/heart_48@2.png") 2x); }
html[data-ui-icons="1"] .px-ico[data-g="star"] { background-image: image-set(url("../media/ui_icons/star_48.png") 1x, url("../media/ui_icons/star_48@2.png") 2x); }
html[data-ui-icons="1"] .px-ico[data-g="flame"] { background-image: image-set(url("../media/ui_icons/flame_48.png") 1x, url("../media/ui_icons/flame_48@2.png") 2x); }
html[data-ui-icons="1"] .px-ico[data-g="chest"] { background-image: image-set(url("../media/ui_icons/chest_48.png") 1x, url("../media/ui_icons/chest_48@2.png") 2x); }
html[data-ui-icons="1"] .px-ico[data-g="lock"] { background-image: image-set(url("../media/ui_icons/lock_48.png") 1x, url("../media/ui_icons/lock_48@2.png") 2x); }
html[data-ui-icons="1"] .px-ico[data-g="shield"] { background-image: image-set(url("../media/ui_icons/shield_48.png") 1x, url("../media/ui_icons/shield_48@2.png") 2x); }
html[data-ui-icons="1"] .px-ico[data-g="sword"] { background-image: image-set(url("../media/ui_icons/sword_48.png") 1x, url("../media/ui_icons/sword_48@2.png") 2x); }
html[data-ui-icons="1"] .px-ico[data-g="ticket"] { background-image: image-set(url("../media/ui_icons/ticket_48.png") 1x, url("../media/ui_icons/ticket_48@2.png") 2x); }

/* ---- 9d. .ico-lead: a text button that keeps its label and gets the drawn icon in front (Pause, Close early, Leave run, Skip tips, back links) ---- */
html[data-ui-icons="1"] .ico-lead[data-ico]::before { content: ""; display: inline-block; flex: none; width: 24px; height: 24px; margin-right: 6px; vertical-align: middle; background: var(--ico-img) no-repeat center / contain; }
html[data-ui-icons="1"] .ico-lead[data-ico] { display: inline-flex; align-items: center; justify-content: center; }
html[data-ui-icons="1"] .dg-hbtn.ico-lead[data-ico] .dg-shop-l { display: inline; }
@media (max-width: 1300px) { html[data-ui-icons="1"] .dg-hbtn.ico-lead[data-ico]::before { margin-right: 0; } }
/* dungeon arena pause: round icon only, 48 px on desktop too */
html[data-ui-icons="1"] .dg-ar .obby-pause[data-ico] { width: 48px; height: 48px; min-width: 48px; padding: 0; }
html[data-ui-icons="1"] body.in-city .gd-help { --ico-img: image-set(url("../media/ui_icons/help_48.png") 1x, url("../media/ui_icons/help_48@2.png") 2x);
  background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; background-image: var(--ico-img) !important;
  box-shadow: none !important; border: 0 !important; border-radius: 50% !important; font-size: 0 !important; color: transparent !important; width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0 !important; }

/* ---- 10. 22/10 old-UI sweep: the kit in the NEW look. The pixel border-image gold button (media/sm/game_ui/gold*.png) and the square navy HUD chips are retired:
   one smooth gold pill button, sky-glass chips with ink text. Same classes, same 48 px targets; a game's own skin (e.g. .bbv2) can still override. ---- */
body.in-game:not(.in-city) .gk-btn, body.in-game:not(.in-city) :is(.arc-start, .dg-enter), .shl .gk-btn, .shl .arc-start {
  border: 0; border-image: none; border-radius: 16px; background: linear-gradient(180deg, #FFE878 0%, #FDD935 55%, #F6C61C 100%); color: #10233F;
  font: 800 18px/1 var(--lg-font, system-ui); -webkit-font-smoothing: antialiased; image-rendering: auto; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 0 #C99A00, 0 10px 22px rgba(122, 90, 0, .22); padding: 0 22px; }
body.in-game:not(.in-city) .gk-btn:active, body.in-game:not(.in-city) :is(.arc-start, .dg-enter):active, .shl .gk-btn:active, .shl .arc-start:active { border-image: none; transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 0 #C99A00, 0 6px 14px rgba(122, 90, 0, .2); }
body.in-game:not(.in-city) .gk-btn:disabled, .shl .gk-btn:disabled { border-image: none; background: #E6EDF7; color: #6B7A93; box-shadow: inset 0 0 0 1px rgba(22, 54, 95, .14); }
body.in-game:not(.in-city) :is(.obby-pill, .ss-pill, .dg-pill, .fm-chip) { background: rgba(255, 255, 255, .8); color: #10233F; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(22, 54, 95, .14), 0 4px 14px rgba(22, 54, 95, .12); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
body.in-game:not(.in-city) :is(.obby-pill, .ss-pill, .dg-pill) b { color: #0F4AA8; }
body.in-game:not(.in-city) .gd-hint { border-radius: 14px; background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(22, 54, 95, .14), 0 8px 22px rgba(22, 54, 95, .16); }
body.in-game:not(.in-city) .gd-hint-i { border-radius: 50%; box-shadow: none; }
body.in-game:not(.in-city) .snd-mute { image-rendering: auto; }
/* 22/10 sweep: the last pixel-only HUD glyphs get drawn vector icons in the same style (media/ui_icons/*.svg) */
html[data-ui-icons="1"] .px-ico[data-g="scroll"] { background-image: url("../media/ui_icons/scroll.svg"); }
html[data-ui-icons="1"] .px-ico[data-g="warden"] { background-image: url("../media/ui_icons/warden.svg"); }
html[data-ui-icons="1"] .px-ico[data-g="head"] { background-image: url("../media/ui_icons/head.svg"); }
.px-ico svg { image-rendering: auto; }
/* 22/10 sweep (glass skin): the phone tab-bar gutter (v2.css body.has-shell padding-bottom 96px) must not apply while a full-bleed game is on (no tab bar there) */
body.in-game:not(.in-city).has-shell { padding-bottom: 0; }
/* ---- 11. contrast sweep 22/10 (tools/pw_contrast_sweep.py; coordinate here, not in the game files): section 10 turned the navy HUD chips into
   white glass, but the games' own child rules still paint labels light (#CFE0FF / #fff for the old navy chip). On glass every label is ink. ---- */
body.in-game:not(.in-city) :is(.obby-pill, .ss-pill, .dg-pill, .fm-chip) :is(.lbl, small, span:not(.px-ico):not(.ui-ic), em, i:not(.px-ico)) { color: #3A4A6B; }