/* "Coming to Steam" wishlist sign-up on the game's home screen (wishlist.js has the behaviour).
   Drawn to docs/art/ui/UI-STYLE-GUIDE.md: compact 45-degree chamfers (no pills or rounded cards),
   graphite-glass ink #10151C with a thin edge highlight, warm-white live text, one gold identity
   rule, green #3DDC84 for the primary action, coral #FF5A6A for errors, no glow. Interim layout:
   the title's design is Astra's. Fonts are Latin subsets of the game's Chakra Petch (SIL OFL 1.1,
   licence kept in the font files), under their own family name so the loading screen's other
   text stays as it was. */
@font-face { font-family: "KEA Chakra Petch"; font-weight: 500; font-display: swap;
  src: url("ChakraPetch-Medium-latin.woff2") format("woff2"); }
@font-face { font-family: "KEA Chakra Petch"; font-weight: 700; font-display: swap;
  src: url("ChakraPetch-Bold-latin.woff2") format("woff2"); }

#kw {
  position: fixed; z-index: 12;   /* over the loading screen (10), under the error line (20) */
  top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
  font-family: "KEA Chakra Petch", "Helvetica Neue", Arial, sans-serif; color: #F3F4F1;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  transition: opacity .25s ease, visibility .25s;
}
#kw.kw-off, #kw.kw-bye { opacity: 0; visibility: hidden; pointer-events: none; }
#kw.kw-bye { transition-duration: .4s; }
#kw *, #kw *::before, #kw *::after { box-sizing: border-box; }

/* chamfered corners: the frame's light background shows as a 1 px edge round the inner fill */
.kw-cut { clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
  calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.kw-frame { --c: 10px; padding: 1px; background: rgba(243, 244, 241, 0.2); }
.kw-body { --c: 9.6px; position: relative; background: rgba(16, 21, 28, 0.88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* identity rule, drawn in code (gold; green once signed up) */
.kw-body::before { content: ""; position: absolute; left: 14px; top: 0; width: 40px; height: 2px; background: #FFD37A; }
#kw.kw-done-mode .kw-body::before { background: #3DDC84; }

.kw-open, .kw-done { position: relative; width: 272px; max-width: calc(100vw - 24px); padding: 14px 14px 12px; }
.kw-chip, .kw-open, .kw-done { display: none; }
#kw.kw-chip-mode .kw-chip { display: flex; }
#kw.kw-open-mode .kw-open { display: block; }
#kw.kw-done-mode .kw-done { display: block; }

.kw-h { margin: 0 0 6px; padding-right: 22px; font-size: 15px; line-height: 1.15; font-weight: 700; letter-spacing: 0.16em; }
.kw-p { margin: 0 0 11px; font-size: 13px; line-height: 1.35; font-weight: 500; color: rgba(243, 244, 241, 0.74); }
.kw-done .kw-p { margin-bottom: 2px; }

.kw-f { display: flex; gap: 6px; margin: 0; }
.kw-field { --c: 5px; flex: 1; min-width: 0; padding: 1px; background: rgba(116, 129, 139, 0.6); transition: background .15s; }
.kw-field:focus-within { background: #FFD37A; }
.kw-field input { --c: 4.6px; display: block; width: 100%; height: 34px; margin: 0; padding: 0 10px; border: 0; border-radius: 0;
  outline: none; background: #0B0F15; color: #F3F4F1; font: 500 14px/34px "KEA Chakra Petch", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.02em; -webkit-appearance: none; appearance: none; }
.kw-field input::placeholder { color: rgba(243, 244, 241, 0.36); }
#kw.kw-bad .kw-field { background: #FF5A6A; }
.kw-b { --c: 5px; flex: none; height: 36px; margin: 0; padding: 0 14px; border: 0; border-radius: 0; cursor: pointer;
  background: #3DDC84; color: #07080C; font: 700 13px/36px "KEA Chakra Petch", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.14em; -webkit-appearance: none; appearance: none; transition: background .15s; }
.kw-b:hover { background: #5FE69C; }
.kw-b:active { background: #2FC673; }
.kw-b:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #07080C, inset 0 0 0 3px #F3F4F1; }
.kw-b:disabled { cursor: default; opacity: 0.6; }
/* bots fill every field they find; people never see this one */
.kw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.kw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kw-m { margin: 8px 0 0; min-height: 14px; font-size: 11px; line-height: 1.3; font-weight: 500; letter-spacing: 0.02em; color: rgba(243, 244, 241, 0.5); }
#kw.kw-bad .kw-m { color: #FF5A6A; }

.kw-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; cursor: pointer;
  background: transparent; color: rgba(243, 244, 241, 0.5); font: 500 20px/28px "KEA Chakra Petch", "Helvetica Neue", Arial, sans-serif; }
.kw-x:hover, .kw-x:focus-visible { outline: none; color: #F3F4F1; }

/* folded: a two-line badge that opens the form (narrow screens start here) */
.kw-chip { flex-direction: column; align-items: flex-start; gap: 3px; margin: 0; padding: 9px 13px 8px 14px; border: 0; cursor: pointer;
  background: transparent; color: #F3F4F1; text-align: left; font-family: inherit; }
.kw-chip-t { font-size: 12px; line-height: 1.1; font-weight: 700; letter-spacing: 0.16em; }
.kw-chip-a { font-size: 10.5px; line-height: 1.1; font-weight: 700; letter-spacing: 0.12em; color: #3DDC84; }
.kw-chip:hover .kw-chip-a, .kw-chip:focus-visible .kw-chip-a { color: #5FE69C; }
.kw-chip:focus-visible { outline: none; }
#kw.kw-chip-mode .kw-frame:has(.kw-chip:focus-visible) { background: #FFD37A; }

/* phones: 16 px keeps iOS from zooming the page when the field takes focus */
@media (pointer: coarse) { .kw-field input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { #kw, .kw-field, .kw-b { transition: none; } }