/* Game Station house style: casual illustrated games. One look shared by every page.
   Display type is Jua (rounded Korean), body is Gothic A1. Surfaces are cream panels with a thick
   cocoa outline and a soft drop; buttons are chunky "jelly" buttons that press down.
   Pages load this file and the fonts, then set their own --scene background image. */
:root {
  --ink: #3b2416;          /* text and outlines */
  --ink-2: #7a5a44;        /* secondary text */
  --cream: #fff8ec;        /* panel surface */
  --cream-2: #ffefd6;      /* inset surface */
  --outline: #4a2e1c;
  --sun: #ffc93c;          /* primary action */
  --sun-d: #e09a12;
  --berry: #ff5f7e;
  --berry-d: #d43a5a;
  --sky: #4fb8ff;
  --sky-d: #2b86d6;
  --leaf: #5fcf5a;
  --leaf-d: #3a9a38;
  --grape: #9b6bff;
  --grape-d: #6c45d1;
  --font-display: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --r: 22px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0; color: var(--ink); font-family: var(--font-body); font-size: 15px;
  background: var(--scene-color, #8fd3ff) var(--scene, none) center / cover no-repeat fixed;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

/* ---- top bar: a home pill on the left, the game title as a sticker in the middle, tools right */
.gs-top { display: flex; align-items: center; gap: 10px; padding: max(10px, var(--safe-area-inset-top, env(safe-area-inset-top))) 14px 6px; position: relative; z-index: 5; }
.gs-home {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; border-radius: 999px;
  background: var(--cream); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 16px;
  border: 3px solid var(--outline); box-shadow: 0 4px 0 var(--outline); white-space: nowrap; transition: transform 0.08s;
}
.gs-home::before { content: ""; width: 9px; height: 9px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); margin-left: 4px; }
.gs-home:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--outline); }
.gs-title {
  margin: 0 auto; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 6vw, 38px); line-height: 1;
  color: #fff; letter-spacing: 0.01em; white-space: nowrap;
  -webkit-text-stroke: 6px var(--outline); paint-order: stroke fill; text-shadow: 0 5px 0 var(--outline);
}
.gs-tools { display: flex; gap: 8px; }

/* ---- jelly buttons */
.gs-btn {
  --c: var(--sun); --d: var(--sun-d);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 20px; border-radius: 16px; border: 3px solid var(--outline);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 55%, #fff) 0%, var(--c) 55%, var(--c) 100%);
  box-shadow: inset 0 -5px 0 var(--d), 0 5px 0 var(--outline); color: var(--ink);
  font-family: var(--font-display); font-size: 19px; line-height: 1; white-space: nowrap;
  transition: transform 0.08s, box-shadow 0.08s; isolation: isolate;
}
/* the gloss sits behind the label (negative z inside the button's own stacking context) */
.gs-btn::after { content: ""; position: absolute; z-index: -1; left: 8px; right: 8px; top: 4px; height: 26%; border-radius: 10px; background: rgba(255, 255, 255, 0.4); pointer-events: none; }
.gs-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 -3px 0 var(--d), 0 1px 0 var(--outline); }
.gs-btn:disabled { filter: grayscale(0.7) brightness(0.95); opacity: 0.6; cursor: default; }
.gs-btn.berry { --c: var(--berry); --d: var(--berry-d); color: #fff; }
.gs-btn.sky { --c: var(--sky); --d: var(--sky-d); color: #fff; }
.gs-btn.leaf { --c: var(--leaf); --d: var(--leaf-d); color: #fff; }
.gs-btn.grape { --c: var(--grape); --d: var(--grape-d); color: #fff; }
.gs-btn.cream { --c: var(--cream); --d: #e8d3b4; }
.gs-btn.big { min-height: 60px; font-size: 24px; padding: 0 30px; border-radius: 20px; }
.gs-btn.small { min-height: 40px; font-size: 16px; padding: 0 14px; border-radius: 14px; }
.gs-btn.icon { width: 44px; min-height: 44px; padding: 0; border-radius: 14px; font-size: 18px; }
.gs-btn.berry, .gs-btn.sky, .gs-btn.leaf, .gs-btn.grape { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.gs-btn[aria-pressed="true"] { --c: var(--leaf); --d: var(--leaf-d); color: #fff; }

/* ---- panels and stat chips */
.gs-panel { background: var(--cream); border: 3px solid var(--outline); border-radius: var(--r); box-shadow: 0 6px 0 var(--outline), 0 18px 40px rgba(40, 20, 0, 0.25); }
.gs-stats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.gs-stat { min-width: 86px; padding: 6px 14px 7px; text-align: center; background: var(--cream); border: 3px solid var(--outline); border-radius: 16px; box-shadow: 0 4px 0 var(--outline); }
.gs-stat small { display: block; font-size: 11px; font-weight: 800; color: var(--ink-2); letter-spacing: 0.04em; }
.gs-stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.05; font-variant-numeric: tabular-nums; }

/* ---- segmented choice */
.gs-seg { display: flex; padding: 4px; gap: 4px; background: var(--cream-2); border: 3px solid var(--outline); border-radius: 16px; }
.gs-seg button { flex: 1; min-height: 40px; border: none; border-radius: 11px; background: transparent; font-family: var(--font-display); font-size: 16px; color: var(--ink-2); }
.gs-seg button[aria-pressed="true"] { background: var(--sun); color: var(--ink); box-shadow: inset 0 -3px 0 var(--sun-d); }

/* ---- form bits */
.gs-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.gs-field > label, .gs-field > .lab { font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.gs-input, .gs-field input[type="text"], .gs-field input[type="number"], .gs-field textarea {
  width: 100%; min-width: 0; border: 3px solid var(--outline); background: #fff; border-radius: 14px; padding: 10px 12px; color: var(--ink);
}
.gs-hint { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }

/* ---- modal: dimmed scene, a cream card with a ribbon title */
/* the dim layer scrolls, not the card, so the ribbon above the card is never clipped */
.gs-modal { position: fixed; inset: 0; z-index: 40; display: flex; overflow-y: auto; padding: 34px 16px 16px; background: rgba(40, 22, 8, 0.55); }  /* no backdrop blur: it costs whole frames over a running game */
.gs-card { position: relative; width: min(420px, 100%); margin: auto; padding: 34px 20px 20px; background: var(--cream); border: 3px solid var(--outline); border-radius: 26px; box-shadow: 0 8px 0 var(--outline), 0 30px 70px rgba(40, 20, 0, 0.45); animation: gs-pop 0.42s cubic-bezier(.2, 1.5, .4, 1); }
.gs-ribbon {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -55%); padding: 8px 26px 10px; white-space: nowrap;
  font-family: var(--font-display); font-size: 24px; color: #fff; background: var(--berry); border: 3px solid var(--outline); border-radius: 14px;
  box-shadow: inset 0 -4px 0 var(--berry-d), 0 4px 0 var(--outline); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.gs-card .gs-big { font-family: var(--font-display); font-size: 56px; line-height: 1; text-align: center; margin: 8px 0 10px; color: var(--ink); }
.gs-card p { color: var(--ink-2); line-height: 1.55; }
.gs-row { display: flex; gap: 10px; margin-top: 10px; }
.gs-row > * { flex: 1; }
@keyframes gs-pop { from { transform: scale(0.7) rotate(-2deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes gs-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

/* floating "+10" style score pops */
.gs-float { position: fixed; z-index: 45; pointer-events: none; font-family: var(--font-display); font-size: 28px; color: #fff; -webkit-text-stroke: 5px var(--outline); paint-order: stroke fill; animation: gs-float 0.9s ease-out forwards; }
@keyframes gs-float { from { transform: translate(-50%, 0) scale(0.6); opacity: 0; } 20% { transform: translate(-50%, -10px) scale(1.15); opacity: 1; } to { transform: translate(-50%, -60px) scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .gs-card { animation: none; } }
@media (max-width: 420px) {
  .gs-home { height: 36px; font-size: 14px; padding: 0 10px 0 8px; }
  .gs-btn { min-height: 44px; font-size: 17px; padding: 0 14px; }
  .gs-stat { min-width: 72px; padding: 5px 10px 6px; }
  .gs-stat b { font-size: 22px; }
}
/* a narrow upright phone: the home pill, the title and up to four tool buttons (the music button, the voice button and
   the points chip come from the shared scripts) must share one row. The tools get small, the music button shows only its
   icon (its label stays for screen readers), the title gives way (shrinks, then clips with an ellipsis) instead of
   pushing the last tool off the screen, and as a last resort the tools scroll sideways rather than overflow. */
@media (max-width: 460px) {
  .gs-top { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .gs-top .gs-home { height: 34px; font-size: 13px; padding: 0 8px 0 6px; gap: 4px; }
  .gs-top .gs-title { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 22px; -webkit-text-stroke-width: 5px; padding: 2px 2px 6px; }
  .gs-tools { flex: 0 1 auto; min-width: 0; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 5px; }
  .gs-tools::-webkit-scrollbar { display: none; }
  .gs-tools .gs-btn.small, .gs-tools .gs-btn { flex: none; min-height: 34px; font-size: 13px; padding: 0 8px; border-radius: 12px; box-shadow: 0 3px 0 var(--outline); }
  .gs-tools .gs-music-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 380px) {
  .gs-tools .gs-btn.small, .gs-tools .gs-btn { font-size: 12px; padding: 0 6px; }
}

/* ---- way back: every screen and every overlay shows one of these, always in the same place.
   .gs-back  = fixed pill at the top-left of a full-screen overlay ("뒤로"), above everything.
   .gs-close = pill at the top-right corner inside a card ("닫기"). */
.gs-back, .gs-close {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; border-radius: 999px;
  background: #fff; color: var(--ink); border: 3px solid var(--outline); box-shadow: 0 4px 0 var(--outline);
  font-family: var(--font-display); font-size: 16px; line-height: 1; cursor: pointer; white-space: nowrap;
}
.gs-back::before { content: ""; width: 9px; height: 9px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); margin-left: 4px; }
.gs-close::before { content: ""; width: 12px; height: 12px; margin-left: 2px; flex: none;
  background: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, currentColor 42% 58%, transparent 58%); }
.gs-back { position: fixed; z-index: 60; left: max(14px, var(--safe-area-inset-left, env(safe-area-inset-left))); top: max(12px, var(--safe-area-inset-top, env(safe-area-inset-top))); }
.gs-close { position: absolute; z-index: 2; top: 12px; right: 12px; height: 36px; font-size: 15px; padding: 0 12px 0 10px; }
.gs-back:active, .gs-close:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--outline); }

/* ---- touch controls laid OVER the game view (phones). The game fills the screen; the pad floats
   on top, translucent, and firms up while pressed. Wrap the pad in .gs-pad-layer (covers the view,
   lets touches through except on controls). A page may offer "조작키 아래로" by toggling
   body.gs-pad-below, which puts the layer back under the view as a normal block. */
.gs-pad-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; padding: 0 max(12px, var(--safe-area-inset-right, env(safe-area-inset-right))) max(12px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom))) max(12px, var(--safe-area-inset-left, env(safe-area-inset-left))); }
.gs-pad-layer > *, .gs-pad-layer button, .gs-pad-layer .gs-stick { pointer-events: auto; }
.gs-pad-btn {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255, 248, 236, 0.32); border: 3px solid rgba(74, 46, 28, 0.55); color: rgba(59, 36, 22, 0.9);
  font-family: var(--font-display); font-size: 16px; line-height: 1.05; text-align: center; padding: 4px;
  box-shadow: 0 3px 0 rgba(74, 46, 28, 0.35); -webkit-user-select: none; user-select: none; touch-action: none;
  transition: background 0.08s, transform 0.08s;
}
.gs-pad-btn.big { width: 84px; height: 84px; font-size: 19px; }
.gs-pad-btn.berry { background: rgba(255, 95, 126, 0.42); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.gs-pad-btn.sky { background: rgba(79, 184, 255, 0.42); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.gs-pad-btn.leaf { background: rgba(95, 207, 90, 0.42); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.gs-pad-btn.grape { background: rgba(155, 107, 255, 0.42); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.gs-pad-btn.on, .gs-pad-btn:active { background-color: rgba(255, 248, 236, 0.85); transform: scale(0.94); }
.gs-pad-btn.berry.on, .gs-pad-btn.berry:active { background-color: rgba(255, 95, 126, 0.9); }
.gs-pad-btn.sky.on, .gs-pad-btn.sky:active { background-color: rgba(79, 184, 255, 0.9); }
.gs-pad-btn.leaf.on, .gs-pad-btn.leaf:active { background-color: rgba(95, 207, 90, 0.9); }
.gs-pad-btn.grape.on, .gs-pad-btn.grape:active { background-color: rgba(155, 107, 255, 0.9); }
.gs-stick { position: relative; width: 132px; height: 132px; border-radius: 50%; background: rgba(255, 248, 236, 0.22); border: 3px solid rgba(74, 46, 28, 0.45); touch-action: none; }
.gs-stick > i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255, 201, 60, 0.7); border: 3px solid rgba(74, 46, 28, 0.6); }
body.gs-pad-below .gs-pad-layer { position: static; padding-top: 10px; }

/* nothing may push the page sideways on a phone (a few pages measured 7-26 px of horizontal scroll) */
html, body { overflow-x: clip; max-width: 100%; }

/* ---- painted interface skin, opt-in with body.ui-skin while it is tried on a few games (art/make_prompts_ui.py).
   The pictures are 9-sliced with border-image; the slice numbers are measured on the pictures themselves (pixels of the
   720 px wide source): ui_panel corners end 44 px in, ui_panel_glass 112 (sliced at 116), the tabs 95 at the top and 33 at the bottom,
   the gauge frame's round ends 60, the ribbon's tails 150 a side. Each picture carries its own outline and lip, so the
   drawn border, radius and shadow go. A picture that fails to load leaves the plain fill colour behind it. */
body.ui-skin .gs-card {
  border-style: solid; border-width: 24px; border-radius: 0; box-shadow: none; background: transparent; padding: 32px 0 0; /* room under the taller painted ribbon */
  border-image: url("assets/ui_panel.webp") 56 fill / 24px stretch;
}
body.ui-skin .gs-panel {
  border-style: solid; border-width: 20px; border-radius: 0; box-shadow: none; background: transparent;
  border-image: url("assets/ui_panel.webp") 56 fill / 20px stretch;
}
body.ui-skin .gs-panel-glass {
  border-style: solid; border-width: 22px; border-radius: 0; box-shadow: none; background: transparent; color: #fff;
  border-image: url("assets/ui_panel_glass.webp") 116 fill / 22px stretch;
}
body.ui-skin .gs-ribbon { /* !important: pages colour their ribbons inline (style="background: ...") */
  border-style: solid; border-width: 0 34px; border-radius: 0; box-shadow: none !important; background: transparent !important; padding: 9px 4px 22px;
  border-image: url("assets/ui_ribbon.webp") 0 150 fill / 0 34px stretch;
}
body.ui-skin .gs-close {
  width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: 50%; box-shadow: none; font-size: 0; color: #fff8ec;
  background: url("assets/ui_close.webp") center / contain no-repeat;
}
body.ui-skin .gs-close::before { width: 14px; height: 14px; margin: 0; }
body.ui-skin .gs-seg { background: transparent; border: 0; padding: 0; gap: 6px; }
body.ui-skin .gs-seg button, body.ui-skin .gs-tab {
  border-style: solid; border-width: 12px 12px 5px; border-radius: 0; background: transparent; box-shadow: none;
  border-image: url("assets/ui_tab_off.webp") 96 96 34 fill / 12px 12px 5px stretch;
}
body.ui-skin .gs-seg button[aria-pressed="true"], body.ui-skin .gs-tab[aria-pressed="true"] { border-image-source: url("assets/ui_tab_on.webp"); box-shadow: none; }
body.ui-skin .gs-gauge { border-style: solid; border-width: 7px 12px; border-radius: 0; background: transparent; border-image: url("assets/ui_bar_frame.webp") 40 60 fill / 7px 12px stretch; }

/* ---- playing with the top bar over the game (GSInplay in gs-guard.js): the bar leaves the layout, its title hides (the
   title and result screens still show it), the arcade button stays small at the top left and the tools at the top right,
   both translucent until touched. The game below gets the bar's height back. Buttons reach 46 px down (GSInplay.BAND). */
body.inplay-overlay .gs-top { position: fixed; left: 0; right: 0; top: 0; z-index: 50; pointer-events: none; background: none;
  padding: max(6px, var(--safe-area-inset-top, env(safe-area-inset-top))) max(8px, var(--safe-area-inset-right, env(safe-area-inset-right))) 0 max(8px, var(--safe-area-inset-left, env(safe-area-inset-left))); }
body.inplay-overlay .gs-top .gs-title { display: none; }
body.inplay-overlay .gs-top .gs-home, body.inplay-overlay .gs-top .gs-tools { pointer-events: auto; opacity: 0.8; transition: opacity 0.15s; }
body.inplay-overlay .gs-top .gs-home:hover, body.inplay-overlay .gs-top .gs-tools:hover, body.inplay-overlay .gs-top .gs-home:focus-visible { opacity: 1; }
body.inplay-overlay .gs-top .gs-home { height: 34px; padding: 0 10px 0 8px; font-size: 13px; box-shadow: 0 2px 0 var(--outline); }
body.inplay-overlay .gs-top .gs-tools { margin-left: auto; gap: 6px; }
body.inplay-overlay .gs-top .gs-tools .gs-btn { min-height: 34px; font-size: 13px; padding: 0 9px; border-radius: 12px; box-shadow: 0 2px 0 var(--outline); }
/* buttons: the painted plate of their colour (ui_btn_*, round corners end 46-66 px in, sliced at 70); the plate carries its
   own outline, gloss and lip, so the drawn gradient, gloss and shadow go; pressed, it sinks 2 px. The top bar's buttons
   keep their drawn look: their colour is their state (music and sound on are green), which a plate would hide. In a
   dense row (.gs-dense: a number pad, a tool strip) the rim is thinner, so nine keys still fit a phone's width */
body.ui-skin .gs-btn:not(.gs-top *) { border-style: solid; border-width: 14px 16px; border-radius: 0; background: transparent; box-shadow: none; padding: 0 6px 3px;
  border-image: url("assets/ui_btn_sun.webp") 70 fill / 14px 16px stretch; }
body.ui-skin .gs-btn:not(.gs-top *)::after { display: none; }
body.ui-skin .gs-btn:not(.gs-top *):active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
body.ui-skin .gs-btn.berry:not(.gs-top *) { border-image-source: url("assets/ui_btn_berry.webp"); }
body.ui-skin .gs-btn.sky:not(.gs-top *) { border-image-source: url("assets/ui_btn_sky.webp"); }
body.ui-skin .gs-btn.leaf:not(.gs-top *) { border-image-source: url("assets/ui_btn_leaf.webp"); }
body.ui-skin .gs-btn.grape:not(.gs-top *) { border-image-source: url("assets/ui_btn_grape.webp"); }
body.ui-skin .gs-btn.cream:not(.gs-top *) { border-image-source: url("assets/ui_btn_cream.webp"); }
body.ui-skin .gs-btn[aria-pressed="true"]:not(.gs-top *) { border-image-source: url("assets/ui_btn_leaf.webp"); } /* a toggle that is on: green, as drawn */
body.ui-skin .gs-btn.small:not(.gs-top *) { border-width: 11px 13px; border-image-width: 11px 13px; padding: 0 4px 2px; }
body.ui-skin .gs-btn.big:not(.gs-top *) { border-width: 18px 20px; border-image-width: 18px 20px; padding: 0 10px 4px; }
body.ui-skin .gs-dense .gs-btn:not(.gs-top *) { border-width: 7px 8px; border-image-width: 7px 8px; padding: 0; min-width: 0; }
body.ui-skin .gs-btn.icon:not(.gs-top *) { border: 0; border-image: none; background: url("assets/ui_btn_round.webp") center / contain no-repeat; padding: 0; }


/* a title card with its big picture (.titleArt) on a short landscape screen (10-06, the user: in landscape the picture
   filled the card and the buttons were below the fold): picture on the left, title, text and buttons on the right */
@media (orientation: landscape) and (max-height: 560px) {
  .gs-modal > .gs-card:has(> :is(.titleArt, #titleArt)) {
    width: min(860px, 94vw); display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: 18px;
    align-items: start; padding-top: 30px;
  }
  .gs-card:has(> :is(.titleArt, #titleArt)) > :is(.titleArt, #titleArt) { grid-column: 1; grid-row: 1 / span 12; align-self: center; margin: 0; }
  .gs-card:has(> :is(.titleArt, #titleArt)) > :not(.titleArt, #titleArt):not(.gs-ribbon):not(.gs-close) { grid-column: 2; min-width: 0; }
  /* keep every button above the fold: a smaller logo and text, the first button full width, the rest two by two */
  .gs-card:has(> :is(.titleArt, #titleArt)) > .logo { font-size: clamp(26px, 6vh, 40px); margin: 0 0 4px; line-height: 1.1; }
  .gs-card:has(> :is(.titleArt, #titleArt)) > p { font-size: 13px; line-height: 1.4; margin: 4px 0 8px; }
  .gs-card:has(> :is(.titleArt, #titleArt)) > p:first-of-type { padding-right: 44px; } /* clear of the close button */
  .gs-card:has(> :is(.titleArt, #titleArt)) > .menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
  .gs-card:has(> :is(.titleArt, #titleArt)) > .menu > :first-child { grid-column: 1 / -1; }
  .gs-card:has(> :is(.titleArt, #titleArt)) > .menu > .gs-btn { width: auto; min-width: 0; margin: 0; }
  /* the same for a result card wearing its story picture (gs-story.js .gss-cardimg; 10-06, the user: the delivery
     result showed the picture full width and the place and buttons below the fold): picture left, the rest right */
  .gs-modal > .gs-card:has(> .gss-cardimg) {
    width: min(880px, 94vw); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px;
    align-items: start; padding-top: 30px;
  }
  .gs-card:has(> .gss-cardimg) > .gss-cardimg { grid-column: 1; grid-row: 1 / span 20; align-self: center; margin: 0; }
  .gs-card:has(> .gss-cardimg) > :not(.gss-cardimg):not(.gs-ribbon):not(.gs-close) { grid-column: 2; min-width: 0; }
  .gs-card:has(> .gss-cardimg) > .final { font-size: clamp(40px, 11vh, 64px); margin: 0; line-height: 1.05; }
  .gs-card:has(> .gss-cardimg) > p { font-size: 13px; line-height: 1.4; margin: 4px 0 6px; }
  /* a tall right column (stars, score, the leaderboard strip, the buttons - 10-07, the slingshot's result cut its
     buttons off): everything sized by the screen height so the column fits without scrolling; the card itself does
     not scroll, which would clip the ribbon above it */
  .gs-card:has(> .gss-cardimg) > :is(.big, .gs-big) { font-size: clamp(28px, 9vh, 52px); margin: 0; line-height: 1.05; }
  .gs-card:has(> .gss-cardimg) > .stars { font-size: clamp(20px, 7vh, 36px); margin: 0; line-height: 1.1; }
  .gs-card:has(> .gss-cardimg) > .sub { margin: 0; font-size: 12px; }
  .gs-card:has(> .gss-cardimg) .gsb-strip { margin: 4px 0 2px; padding: 6px 10px; }
  .gs-card:has(> .gss-cardimg) .gsb-strip .gsb-msg { font-size: 13px; line-height: 1.3; }
  .gs-card:has(> .gss-cardimg) .gsb-strip input { padding: 5px 8px; }
  .gs-card:has(> .gss-cardimg) .gsb-strip .gs-btn { min-height: 38px; }
  .gs-card:has(> .gss-cardimg) > .gs-row { margin-top: 4px; }
  .gs-card:has(> .gss-cardimg) > .gs-row .gs-btn { min-height: 44px; }
}

/* ---- a card taller than a short screen (10-10 device sweep: on a sideways phone and on a PC zoomed to 150% the start
   cards of sudoku, snake, hexa and the prince pushed their start button below the screen). The dim layer still scrolls
   (the ribbon above the card is never clipped), the card gets tighter, and the card's primary action - its first big
   button, or the .col / .gs-row that holds one - sticks to the bottom of the screen while the rest scrolls under it.
   Sticky only moves an element whose own place is below the fold, so a card that fits looks exactly as before. */
@media (max-height: 760px) {
  .gs-modal { padding-top: 30px; padding-bottom: 10px; }
  .gs-modal .gs-card > .gs-btn.big:not(.gs-btn.big ~ .gs-btn.big),
  .gs-modal .gs-card > :is(.col, .gs-row):has(> .gs-btn.big) {
    position: sticky; bottom: 6px; z-index: 3;
  }
  /* a cream shelf around it, so text scrolling underneath does not show through around the edges */
  body:not(.ui-skin) .gs-modal .gs-card > .gs-btn.big:not(.gs-btn.big ~ .gs-btn.big) { box-shadow: inset 0 -5px 0 var(--d), 0 5px 0 var(--outline), 0 0 0 9px var(--cream); }
  body:not(.ui-skin) .gs-modal .gs-card > .gs-btn.big:not(.gs-btn.big ~ .gs-btn.big):active:not(:disabled) { box-shadow: inset 0 -3px 0 var(--d), 0 1px 0 var(--outline), 0 0 0 9px var(--cream); }
  /* a painted button (ui-skin) carries its own lip; a square cream outline is its shelf, the focus ring wins when focused */
  body.ui-skin .gs-modal .gs-card > .gs-btn.big:not(.gs-btn.big ~ .gs-btn.big):not(:focus-visible) { outline: 8px solid var(--cream); outline-offset: 0; }
  .gs-modal .gs-card > :is(.col, .gs-row):has(> .gs-btn.big) { background: var(--cream); box-shadow: 0 0 0 8px var(--cream); border-radius: 12px; }
  .gs-modal .gs-card { padding: 30px 18px 16px; }
  .gs-modal .gs-card p { line-height: 1.45; }
  .gs-modal .gs-card :is(.rules, .howto) { font-size: 13px; line-height: 1.45; }
}
@media (max-height: 520px) {
  .gs-modal { padding-top: 26px; }
  .gs-modal .gs-card { padding: 26px 14px 12px; }
  .gs-modal .gs-card p { font-size: 13px; line-height: 1.4; margin-block: 6px; }
  .gs-modal .gs-card :is(.rules, .howto) { font-size: 12px; }
  .gs-modal .gs-card .gs-field { gap: 4px; margin-bottom: 8px; }
  .gs-modal .gs-card .gs-seg button { min-height: 34px; }
  .gs-modal .gs-card .gs-btn.big { min-height: 50px; font-size: 21px; }
  .gs-modal .gs-card .gs-big { font-size: 42px; margin: 4px 0 6px; }
  .gs-modal .gs-ribbon { font-size: 20px; padding: 6px 20px 8px; }
  /* the small pictures at the head of a card (snake's fruit, the hexa legend) give their height to the buttons */
  .gs-modal .gs-card > :is(.hero-art, .legend) { zoom: 0.7; }
}