@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url(../vendor/fonts/baloo2-devanagari.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
  @font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url(../vendor/fonts/baloo2-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url(../vendor/fonts/baloo2-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: "Yatra One"; font-style: normal; font-weight: 400; font-display: swap;
    src: url(../vendor/fonts/yatraone-devanagari.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
  @font-face { font-family: "Yatra One"; font-style: normal; font-weight: 400; font-display: swap;
    src: url(../vendor/fonts/yatraone-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "Yatra One"; font-style: normal; font-weight: 400; font-display: swap;
    src: url(../vendor/fonts/yatraone-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  :root {
    --deep: #302822; --bg: #302822; --panel: #302822; --flame: #d9c7ac; --gold: #ffd23c;
    --bronze: #b48b5b; --cream: #f5ecdd; --tamra: #d9844a; --rajat: #d4dde6; --swarna: #ffc93c;
    /* The material of the screens, "Modern Relic" (2026-10-13), the same on the page as in
       the game (MAT and INK in src/ui.js): smoked glass with rounded corners and one thin
       line of bronze; cream words; one terracotta button; a little teal. */
    --stone: #302822; --cut: #302822; --raised: #473c33; --edge: #b48b5b; --edge-low: #6e5638;
    --terracotta: #a94726; --teal: #2a7175; --body: #e9dcc6; --soft: #d9c7ac; --muted: #d0bea5;
    --foot: rgba(48,40,34,.12);
  }
  /* A panel. */
  .card, .well, .fb-box, .side, .rotate-box {
    position: relative; border: 1px solid rgba(180,139,91,.42); border-radius: 1.1em;
    background: rgba(48,40,34,.8); box-shadow: 0 2px 3px rgba(36,30,25,.12);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .well { background: rgba(48,40,34,.82); border-color: rgba(180,139,91,.32); box-shadow: none; }   /* set in, where the card stands out */
  html, body {
    margin: 0; padding: 0; background: var(--deep);
    height: 100%; width: 100%; overflow: hidden;
    font-family: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  /* The engine centres the game in this box itself (Scale.CENTER_BOTH), by its margins. The
     box used to centre it as well, and the two added up: on a wide screen the game stood a
     quarter of the spare room right of the middle, and on a phone a quarter of it low. */
  #game-container {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
  }
  /* Reserve space only during failed durability: never cover a fight control or toast. */
  body.save-warning #game-container { height: calc(100% - 88px - env(safe-area-inset-bottom)); }
  #save-warning {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; box-sizing: border-box;
    height: calc(88px + env(safe-area-inset-bottom)); padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: center; gap: 12px;
    color: var(--cream); background: var(--panel); border-top: 1px solid var(--bronze);
    font: 400 14px/1.25 "Baloo 2", system-ui, sans-serif;
  }
  #save-warning[hidden] { display: none; }
  #save-warning p { margin: 0; max-width: 36em; flex: 1; }
  #save-retry {
    flex: none; min-height: 44px; min-width: 72px; padding: 8px; border: 1px solid var(--bronze);
    border-radius: 12px; color: var(--cream); background: var(--raised); cursor: pointer;
    font: 700 14px/1.2 "Baloo 2", system-ui, sans-serif;
  }
  #save-retry:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

  /* ---------- The page round the game on a wide screen (requirements 2.54) ---------- */
  /* The level's floor or the title picture, blurred and darkened beforehand
     (tools/make-backdrops.py), stretched over the screen behind the game. It reaches past
     the edges so that the blur has no rim, and darkens toward them so the game stands out. */
  #backdrop {
    position: fixed; inset: -2%; z-index: 0;
    background: var(--deep) center / cover no-repeat;
  }
  #backdrop::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 55% 75% at 50% 50%, transparent 40%, rgba(48,40,34,.6) 100%);
  }
  /* On a computer, beside the game: the controls on the left, the goal on the right
     (boot.js shows them when the bands have room). Sized off the screen's height. */
  .side {
    position: fixed; z-index: 2; top: 50%; transform: translateY(-50%); box-sizing: border-box;
    padding: 1.2em 1.35em; color: var(--cream);
    font-size: clamp(14px, 1.65vh, 20px); line-height: 1.4;
    overflow-y: auto; overscroll-behavior: contain; background: rgba(48,40,34,.94);
  }
  .side[hidden] { display: none; }
  .side h2 { font-family: "Yatra One", "Baloo 2", serif; font-weight: 400; font-size: 1.55em; line-height: 1.1; color: var(--cream); margin: 0 0 .55em; }
  .side dl { display: grid; grid-template-columns: auto 1fr; gap: .5em .75em; margin: 0; align-items: baseline; }
  .side dt { text-align: right; white-space: nowrap; }
  .side dd { margin: 0; color: var(--body); }
  .side kbd {
    display: inline-block; min-width: 1.1em; text-align: center; margin: 0 0 .15em .15em; padding: .05em .4em;
    font: 700 .85em "Baloo 2", system-ui, sans-serif; color: var(--cream);
    background: var(--raised); border: 1px solid rgba(180,139,91,.42); border-radius: .35em;
  }
  .side p { margin: 0 0 .65em; color: var(--body); }
  .side p:last-child { margin-bottom: 0; }
  .side b { color: var(--cream); font-weight: 700; }
  .side h3 { font: 700 1em/1.3 "Baloo 2", system-ui, sans-serif; margin: 1em 0 .35em; color: var(--cream); }
  .side .side-tip { border-left: 2px solid var(--teal); padding-left: .75em; color: var(--soft); }
  .side-compact { padding: 1em; }
  .side-compact dl { grid-template-columns: 1fr; gap: .15em; }
  .side-compact dt { text-align: left; margin-top: .5em; font-weight: 700; }
  .side-compact dt:first-child { margin-top: 0; }
  .side-compact dd { margin-bottom: .35em; }
  /* A phone held sideways: the game would be a sliver, so it asks to be turned (the fight
     waits: boot.js pauses it). Tablets are taller than this and keep the game with its bands. */
  #rotate { display: none; }
  @media (orientation: landscape) and (pointer: coarse) and (max-height: 520px) {
    #rotate {
      display: flex; position: fixed; inset: 0; z-index: 30; align-items: center; justify-content: center;
      padding: 1em; box-sizing: border-box; background: rgba(48,40,34,.94); color: var(--cream); text-align: center;
      font-size: clamp(13px, 4.2vh, 20px);
    }
  }
  .rotate-box { padding: 1.6em; max-width: 26em; border-radius: 20px; background: rgba(48,40,34,.96); }
  .rotate-box h2 { font-family: "Yatra One", "Baloo 2", serif; font-weight: 400; font-size: 1.6em; color: var(--cream); margin: .3em 0 .2em; }
  .rotate-box p { margin: 0; color: var(--body); line-height: 1.35; }
  .rotate-phone { width: 2.2em; height: 3.5em; fill: none; stroke: var(--bronze); stroke-width: 3; stroke-linecap: round; animation: turn-upright 2.4s ease-in-out infinite; }
  @keyframes turn-upright { 0%, 25% { transform: rotate(-90deg); } 55%, 100% { transform: rotate(0); } }
  #game-container canvas { box-shadow: 0 0 40px rgba(15,11,8,0.45); border-radius: 8px; }

  /* ---------- Loading screen: one glossary card per load (requirements 2.19) ---------- */
  #loader {
    position: fixed; inset: 0; z-index: 10; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.2em; padding: 1.2em 1.2em calc(1.2em + env(safe-area-inset-bottom));
    /* Every size below is in em off this one value, so the whole screen scales with the
       smaller of the viewport's height and width - it has to fit a phone held sideways. */
    font-size: clamp(8px, min(2.3vh, 4.2vw), 22px);
    color: var(--cream); text-align: center;
    background: radial-gradient(ellipse at 30% 24%, #645044 0%, #473c33 45%, #302822 100%);
    transition: opacity .45s ease;
  }
  #loader.done { opacity: 0; pointer-events: none; }
  #loader > * { opacity: 0; transition: opacity .35s ease; }      /* held back until the fonts land */
  #loader.show > * { opacity: 1; }

  .ldr-title {
    font-family: "Yatra One", "Baloo 2", serif; font-weight: 400;
    font-size: 3.5em; line-height: 1.05; margin: 0; color: var(--cream);
    text-shadow: 0 2px 3px rgba(36,30,25,.12);
  }
  .ldr-tag { margin: -.6em 0 0; font-size: .78em; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }

  .card {
    width: 21em; max-width: 100%; box-sizing: border-box; padding: 1.2em 1.3em 1em;
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .card:focus-visible { outline: .14em solid var(--cream); outline-offset: .12em; }
  .card.in > * { animation: card-in .4s ease both; }
  @keyframes card-in { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
  .card-kind { font-size: .7em; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--soft); }
  .card-dev  { font-family: "Yatra One", "Baloo 2", serif; font-size: 3.4em; line-height: 1.35; color: var(--cream); }
  .card-name { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 700; font-size: 1.6em; line-height: 1.15; color: var(--cream); }
  .card-meaning { font-size: .95em; font-style: italic; color: var(--soft); margin-top: .15em; }
  .card-rule { display: flex; align-items: center; gap: .6em; margin: .55em auto .5em; width: 60%; color: var(--soft); font-size: .6em; }
  .card-rule::before, .card-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--bronze)); }
  .card-rule::after { transform: scaleX(-1); }
  .card-role { margin: 0; font-size: .95em; line-height: 1.4; color: var(--body); min-height: 4.2em; }
  .card-hint { margin-top: .5em; font-size: .68em; letter-spacing: .06em; color: var(--muted); }

  /* How full the well is (requirements 2.19): the goal, on screen before the game loads. */
  .well {
    width: 21em; max-width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 1em;
    padding: .55em 1em; text-align: left;
  }
  .well-art { flex: none; width: 5.2em; height: 6.2em; }
  .well-wall { fill: #302822; stroke: var(--bronze); stroke-width: 1.6; stroke-linejoin: round; }
  .well-water { fill: #1f8f80; }
  .well-surface { stroke: #bff5ea; stroke-width: 1.6; }
  .well-kind { font-size: .7em; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--soft); }
  .well-line { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 700; font-size: 1.35em; line-height: 1.2; color: var(--cream); }
  .well-sub { font-size: .85em; line-height: 1.3; color: #9fe8d8; }
  .well-legend { font-size: .72em; line-height: 1.3; color: var(--soft); }
  .well-after { margin-top: .3em; font-size: .78em; line-height: 1.3; color: var(--body); }

  .ldr-foot { width: 21em; max-width: 100%; min-height: 3.4em; display: flex; flex-direction: column; align-items: center; gap: .45em; }
  .bar { width: 100%; height: .85em; box-sizing: border-box; border-radius: .5em; background: var(--cut); border: 1px solid rgba(180,139,91,.4); overflow: hidden; }
  /* Copper, then silver, then gold - the rarity ladder. The gradient is pinned to the
     full track, so the growing fill reveals each metal in turn. */
  .bar-fill {
    height: 100%; width: 0; transition: width .25s ease;
    background: linear-gradient(90deg, var(--tamra) 0%, var(--tamra) 26%, var(--rajat) 46%, var(--rajat) 60%, var(--swarna) 82%, #ffe9a0 100%) 0 0 / 21em 100% no-repeat;
  }
  .bar-label { font-size: .72em; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); }
  .ldr-note { margin: 0; font-size: max(12px, .8em); line-height: 1.35; color: var(--body); }
  .ldr-note[hidden] { display: none; }
  .begin {
    display: none; font: 800 1.35em/1 "Baloo 2", system-ui, sans-serif; letter-spacing: .06em;
    color: var(--cream); background: var(--terracotta); border: 0; border-radius: .55em;
    padding: .65em 2.2em .6em; cursor: pointer; -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 3px rgba(36,30,25,.12); min-height: 40px;

  }
  .begin:active { background: #913b20; }
  .begin:focus-visible { outline: .13em solid var(--cream); outline-offset: .13em; }
  #loader.ready .bar, #loader.ready .bar-label { display: none; }
  #loader.ready .begin { display: inline-block; }
  #loader.failed .bar { display: none; }
  #loader.failed .bar-label { color: #ff9a80; letter-spacing: .04em; text-transform: none; font-size: .85em; }
  @media (prefers-reduced-motion: reduce) { .card.in > *, .begin { animation: none; } }

  /* ---------- Feedback dialog (requirements 2.21) ---------- */
  #feedback, #namer {
    position: fixed; inset: 0; z-index: 20; box-sizing: border-box; padding: 16px;
    display: grid; place-items: center; background: rgba(48,40,34,.8); color: var(--cream);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  }
  #feedback[hidden], #namer[hidden] { display: none; }
  .fb-box {
    width: min(400px, 100%); box-sizing: border-box; padding: 24px; text-align: left; border-radius: 20px;
    max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: rgba(48,40,34,.96);
  }
  .fb-title { font-family: "Yatra One", "Baloo 2", serif; font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--cream); margin: 0 0 4px; }
  .fb-sub { margin: 0 0 12px; font-size: 14px; line-height: 1.35; color: var(--body); }
  .fb-label { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
  .fb-label span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
  /* 16px on the fields: anything smaller makes iOS zoom the page when one is focused. */
  #fb-text, #fb-email, #nm-text {
    width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 9px 10px; font: 16px/1.35 "Baloo 2", system-ui, sans-serif;
    color: var(--cream); background: var(--cut); border: 1px solid rgba(180,139,91,.4); border-radius: 9px;
  }
  #fb-text { resize: vertical; min-height: 110px; max-height: 40vh; }
  #fb-text:focus, #fb-email:focus, #nm-text:focus { outline: 2px solid var(--cream); outline-offset: 1px; border-color: transparent; }
  #fb-text::placeholder, #fb-email::placeholder, #nm-text::placeholder { color: var(--muted); }
  #nm-text { font-size: 20px; font-weight: 700; }
  .fb-note { margin: 0 0 14px; font-size: 12px; line-height: 1.35; color: var(--muted); min-height: 2.7em; }
  .fb-note.fb-good { color: #5fe08a; font-size: 15px; }
  .fb-note.fb-bad { color: #ff9a80; font-size: 13px; }
  .fb-note a { color: var(--cream); }
  .fb-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
  .fb-btn { font: 700 15px "Baloo 2", system-ui, sans-serif; border: 0; border-radius: 12px; min-height: 44px; padding: 12px 24px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .fb-cancel { color: var(--cream); background: var(--raised); border: 1px solid rgba(180,139,91,.35); }
  .fb-send { color: var(--cream); background: var(--terracotta); }
  .fb-send:disabled { opacity: 1; background: #28221d; color: var(--muted); cursor: default; }
  /* Beta 0.22 robot field: invisible, not focusable, and outside the screen. */
  .fb-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .fb-send:active { background: #913b20; }
  .fb-cancel:active { background: #3b322b; }
  .fb-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }