/* Go Kindi! — styles. The map is a full-screen canvas; the HUD, the + and the board float on top.
   --u is one map pixel in CSS px (set by src/view.js): all pixel-art UI is sized in it, so it matches the map's zoom.
   Panel colours are tokens with a dark set; the map itself is art and stays as drawn. */
:root{
  --u: 2px;
  --edge: #d9d2c3; --panel: #fbf7ee; --panel-2: #efe7d6; --ink: #2a2116; --muted: #7a6a52; --line: #b9a888;
  --accent: #2f6fb3; --gold: #c98a1e; --danger: #b3122e; --shadow: rgba(42, 33, 22, .28);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --panel: #221d16; --panel-2: #2e271e; --ink: #f3ead8; --muted: #b7a787; --line: #6b5c44;
    --accent: #8dbbf0; --gold: #f0b54a; --danger: #ff6b81; --shadow: rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"]{
  --panel: #221d16; --panel-2: #2e271e; --ink: #f3ead8; --muted: #b7a787; --line: #6b5c44;
  --accent: #8dbbf0; --gold: #f0b54a; --danger: #ff6b81; --shadow: rgba(0, 0, 0, .5);
}
*{ box-sizing: border-box; }
html, body{ margin: 0; height: 100%; overflow: hidden; background: var(--edge); color: var(--ink); font: 15px/1.5 var(--font);
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
button{ font: inherit; color: inherit; touch-action: manipulation; }

.gk_root{ position: fixed; inset: 0; overflow: hidden; }
.gk_map{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; image-rendering: pixelated; }

/* Pixel art and pixel text: whole pixels only. */
.gk_pix{ display: inline-flex; flex: none; }
.gk_pix svg{ display: block; shape-rendering: crispEdges; }
.gk_pix path{ fill: var(--ink); }
.gk_icon{ display: block; flex: none; width: calc(var(--u) * 20); height: calc(var(--u) * 20); image-rendering: pixelated; }
.gk_out{ opacity: 0; transition: opacity .8s ease; }

.gk_iconbtn{ display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.gk_iconbtn:hover{ background: var(--panel-2); }
.gk_iconbtn:hover .gk_pix path{ fill: var(--accent); }
.gk_iconbtn:focus-visible, .gk_plus:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* "Turn your phone": only once the game has started (the start screen and its sheets work in portrait). */
.gk_rotate{ position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column; gap: 12px; align-items: center; justify-content: center;
  background: var(--edge); color: #2a2116; text-align: center; padding: 24px; font-weight: 600; }
.gk_rotate img{ image-rendering: pixelated; }
@media (orientation: portrait) and (pointer: coarse){ .gk--playing .gk_rotate{ display: flex; } }
/* Before the game starts, the + and HUD wait under the start screen. */
.gk_root:not(.gk--playing) .gk_plus{ visibility: hidden; }

/* Buttons and links shared by the start screen, board and sheets. */
.gk_btn{ display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3); min-height: 44px;
  padding: calc(var(--u) * 3) calc(var(--u) * 7); border: var(--u) solid var(--ink); background: var(--panel-2); cursor: pointer;
  box-shadow: inset calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--line), var(--u) var(--u) 0 var(--shadow); }
.gk_btn:hover .gk_pix path{ fill: var(--accent); }
.gk_btn:active:not(:disabled){ box-shadow: inset var(--u) var(--u) 0 var(--line); transform: translate(var(--u), var(--u)); }
.gk_btn:disabled{ opacity: .55; cursor: default; }
.gk_btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.gk_btn--go{ min-height: 56px; background: var(--gold); padding-inline: calc(var(--u) * 12); }
.gk_btn--go .gk_pix path{ fill: #2a2116; }
.gk_btn--go:hover .gk_pix path{ fill: #2a2116; }
.gk_btn--small{ min-height: 36px; padding: calc(var(--u) * 2) calc(var(--u) * 6); }
.gk_btn--quiet{ background: var(--panel); box-shadow: none; border-color: var(--line); }
.gk_btn--quiet .gk_pix path{ fill: var(--muted); }

/* Support links: plain links styled as buttons (no third-party widget). Their own colours, so they stay light in dark mode. */
.gk_support{ display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 calc(var(--u) * 6);
  border: var(--u) solid #000; box-shadow: var(--u) var(--u) 0 var(--shadow); text-decoration: none; }
.gk_support:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.gk_support:active{ transform: translate(var(--u), var(--u)); box-shadow: none; }
.gk_support--bmc{ background: #FFDD00; }
.gk_support--bmc .gk_pix path{ fill: #000; }
.gk_support--soda{ background: #fff; padding: 0 calc(var(--u) * 4); }
.gk_support--soda img{ display: block; height: 26px; width: auto; }

/* The start screen: over everything, works either way up. In landscape the map shows faintly behind it. */
.gk_start{ position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; overflow: auto;
  padding: max(12px, var(--safe-t)) max(12px, var(--safe-r)) max(12px, var(--safe-b)) max(12px, var(--safe-l));
  background: color-mix(in srgb, var(--edge) 72%, transparent); transition: opacity .45s ease; }
.gk_start_card{ display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 520px; margin: auto;
  padding: 20px 24px; border: var(--u) solid var(--ink); background: var(--panel); box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--shadow); }
.gk_start_row, .gk_start_support{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gk_start_support{ margin-top: 4px; padding-top: 12px; border-top: var(--u) dashed var(--line); align-self: stretch; }
.gk_start_msg{ margin: 0; max-width: 26em; text-align: center; font-size: 14px; color: var(--danger); }
.gk_start_msg[hidden]{ display: none; }
.gk_install{ max-width: 24em; padding: 10px 12px; border: var(--u) dashed var(--line); text-align: center; font-size: 14px; }
.gk_install p{ margin: 0 0 8px; }
.gk_install_steps{ font-weight: 600; }
.gk_install_row{ display: flex; justify-content: center; align-items: center; gap: 8px; }
.gk_install[hidden]{ display: none; }
@media (orientation: portrait){ .gk_start{ background: var(--edge); } }
@media (orientation: landscape) and (max-height: 430px){
  .gk_start_card{ padding: 12px 18px; gap: 8px; }
  .gk_install{ padding: 6px 10px; }
  .gk_install p{ margin-bottom: 4px; }
}

/* Sheets (How to play, Privacy & Terms): a scrolling panel over a dimmed backdrop. */
.gk_sheet{ position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center;
  padding: max(10px, var(--safe-t)) max(10px, var(--safe-r)) max(10px, var(--safe-b)) max(10px, var(--safe-l));
  background: rgba(42, 33, 22, .45); transition: opacity .35s ease; -webkit-user-select: text; user-select: text; }
.gk_sheet_panel{ display: flex; flex-direction: column; width: min(640px, 100%); max-height: 100%;
  border: var(--u) solid var(--ink); background: var(--panel); box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--shadow); }
.gk_sheet_head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-bottom: var(--u) solid var(--line); }
.gk_sheet_body{ overflow: auto; padding: 4px 18px 18px; font-size: 15px; line-height: 1.55; -webkit-overflow-scrolling: touch; }
.gk_sheet_body h2{ margin: 18px 0 4px; font-size: 18px; }
.gk_sheet_body h3{ margin: 14px 0 2px; font-size: 15px; }
.gk_sheet_body p{ margin: 8px 0; }
.gk_sheet_meta{ color: var(--muted); font-size: 13px; }

/* The HUD, bottom left (a free corner of this map): acorns over Kindis left, with × to stop. */
.gk_hud{
  position: absolute; left: calc(var(--safe-l) + 10px); bottom: calc(var(--safe-b) + 10px); z-index: 4;
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 3) calc(var(--u) * 16) calc(var(--u) * 3) calc(var(--u) * 4);
  background: color-mix(in srgb, var(--panel) 88%, transparent); border: var(--u) solid var(--ink); border-radius: 0;
  box-shadow: var(--u) var(--u) 0 var(--shadow); transition: opacity .8s ease;
}
.gk_hud_row{ display: flex; align-items: center; gap: calc(var(--u) * 4); }
.gk_hud_row [data-acorns]{ min-width: calc(var(--u) * 42); }           /* room for "x9,999k": the box keeps its width */
.gk_hud_x{ position: absolute; top: 2px; right: 2px; }
.gk_hud--over [data-left] path{ fill: var(--danger); animation: gk_blink_fill .5s steps(1) infinite; }
@keyframes gk_blink_fill{ 50%{ fill: transparent; } }

/* The +: an arcade key on the right edge, where a thumb rests in landscape. 1 u frame with notched corners and a
   shade bottom right; pressed, it drops. With one Kindi left it blinks red in hard steps. */
.gk_plus{
  position: absolute; right: calc(var(--safe-r) + 14px); bottom: calc(var(--safe-b) + 24%); z-index: 6;
  width: max(56px, calc(var(--u) * 28)); height: max(56px, calc(var(--u) * 28)); padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border: var(--u) solid var(--ink); border-radius: 0;
  background: var(--panel); box-shadow: inset calc(var(--u) * -1.5) calc(var(--u) * -1.5) 0 var(--line), var(--u) var(--u) 0 var(--shadow);
  clip-path: polygon(var(--u) 0, calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u), 100% calc(100% - var(--u)),
    calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u)) 100%, var(--u) 100%, var(--u) calc(100% - var(--u)),
    0 calc(100% - var(--u)), 0 var(--u), var(--u) var(--u));
  transition: opacity .3s ease;
}
.gk_plus:hover .gk_pix path{ fill: var(--accent); }
.gk_plus:active:not(:disabled){ box-shadow: inset calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 var(--line); }
.gk_plus:active:not(:disabled) .gk_pix{ transform: translate(var(--u), var(--u)); }
.gk_plus:disabled, .gk_plus--wait{ opacity: .5; cursor: default; }
.gk_plus--alert, .gk_plus--alert:hover{ border-color: var(--danger); animation: gk_blink_bg .5s steps(1) infinite; }
.gk_plus--alert .gk_pix path, .gk_plus--alert:hover .gk_pix path{ fill: var(--danger); animation: gk_blink_glyph .5s steps(1) infinite; }
@keyframes gk_blink_bg{ 50%{ background: var(--danger); } }
@keyframes gk_blink_glyph{ 50%{ fill: var(--panel); } }

/* The board: an arcade panel centred over the map. */
.gk_board{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 11;   /* above the start screen */
  width: min(calc(var(--u) * 150), calc(100% - var(--safe-l) - var(--safe-r) - 2 * 72px)); max-height: calc(100% - 16px); overflow: auto;
  padding: calc(var(--u) * 4 + 30px) calc(var(--u) * 10) calc(var(--u) * 4);   /* room above the title for ? and × */
  border: var(--u) solid var(--ink); background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--shadow); transition: opacity .4s ease;
  display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 4);
}
.gk_board--modal{ background: var(--panel); box-shadow: 0 0 0 200vmax rgba(42, 33, 22, .45), calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--shadow); }
.gk_board_title, .gk_board_sub, .gk_board_note{ display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 5); flex-wrap: wrap; }
.gk_board_sub .gk_pix path{ fill: var(--gold); }
.gk_board_rows{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.gk_board_rows[hidden], .gk_board_text[hidden], .gk_board_sub[hidden], .gk_board_note[hidden]{ display: none; }
.gk_board_row{ display: grid; grid-template-columns: calc(var(--u) * 14) 1fr auto; align-items: center; min-height: calc(var(--u) * 9); }
.gk_board_row--empty{ display: flex; justify-content: center; }
.gk_board_row--empty .gk_pix path{ fill: var(--muted); }
.gk_board_score{ justify-self: end; }
.gk_board_row--new path, .gk_board_row--entry > .gk_pix path, .gk_board_row--entry .gk_board_score path{ fill: var(--accent); }
.gk_board_row--new path{ animation: gk_blink_fill .5s steps(1) infinite; }
.gk_board_text{ font-size: 14px; line-height: 1.5; }
.gk_board_text p{ margin: 0 0 8px; }
.gk_board_x{ position: absolute; top: 4px; right: 4px; }
.gk_board_help{ position: absolute; top: 4px; left: 4px; }
.gk_board_help[aria-expanded="true"] .gk_pix path{ fill: var(--accent); }
.gk_blink{ display: inline-flex; animation: gk_blink_op 1s steps(1) infinite; }
@keyframes gk_blink_op{ 50%{ opacity: 0; } }

/* The chase along the bottom: a Kindi with a Simba behind, from the sprite sheets (sized in --u). */
.gk_board_chase{ position: relative; height: calc(var(--u) * 11); overflow: hidden; border-top: var(--u) dashed var(--line); margin-top: calc(var(--u) * 1); }
.gk_sprite{ position: absolute; bottom: 0; left: 0; width: calc(var(--u) * 20); height: calc(var(--u) * 10); image-rendering: pixelated;
  background-size: calc(var(--u) * 80) 100%; animation: gk_legs .36s steps(4) infinite, gk_chase 6s linear infinite; }
.gk_sprite--kindi{ background-image: url("assets/sheets/kindi_run_right.png"); }
.gk_sprite--simba{ background-image: url("assets/sheets/simba_run_right.png"); animation-delay: 0s, -0.75s; }
@keyframes gk_legs{ to{ background-position-x: calc(var(--u) * -80); } }
@keyframes gk_chase{ from{ transform: translateX(calc(var(--u) * -24)); } to{ transform: translateX(calc(var(--u) * 160)); } }

/* The name field: a real input (for the phone's keyboard), invisible, over a pixel-font echo. */
.gk_name{ position: relative; display: flex; align-items: center; min-height: calc(var(--u) * 9); cursor: text; }
.gk_name_input{ position: absolute; inset: -6px -4px; width: calc(100% + 8px); opacity: 0; font-size: 16px; /* ≥16px: iOS doesn't zoom */
  border: 0; padding: 0; background: transparent; color: transparent; caret-color: transparent; }
.gk_name_echo{ display: inline-flex; align-items: flex-end; gap: var(--u); padding-bottom: calc(var(--u) * 0.5); border-bottom: var(--u) solid var(--accent); }
.gk_name_echo .gk_pix path{ fill: var(--accent); }
.gk_name_hint .gk_pix path{ fill: var(--muted); }
.gk_name_hint{ display: inline-flex; }
.gk_caret{ display: inline-flex; animation: gk_blink_op 1s steps(1) infinite; }
.gk_name_input:not(:focus) ~ .gk_name_echo .gk_caret{ visibility: hidden; }
.gk_shake{ animation: gk_shake .4s steps(4); }
@keyframes gk_shake{ 25%{ transform: translateX(calc(var(--u) * -2)); } 75%{ transform: translateX(calc(var(--u) * 2)); } }
@media (prefers-reduced-motion: reduce){
  .gk_plus--alert, .gk_plus--alert .gk_pix path, .gk_hud--over [data-left] path, .gk_board_row--new path, .gk_blink, .gk_caret, .gk_sprite{ animation: none; }
}