/* Base + shared styles: loading screen, theme variables and background themes, page/base layout, buttons, top bar, pause/overlay panels, toggle switch, toast, coin HUD. */

/* ---------- LOADING SCREEN ----------
     Shown by default the instant the HTML parses (no JS needed to reveal it),
     and hidden by hideLoadingScreen() once startApp() actually finishes —
     see the INIT section near the bottom of the script. Always uses the
     "yellowed paper" look regardless of whichever background theme the
     player last had equipped, since nothing about their save has loaded yet
     at this point. */
  #loadingScreen{
    position:fixed; inset:0; z-index:99999;
    background: #e6d9b4 url(../assets/images/loading-paper.jpg) repeat 0 0/320px 320px;
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    transition: opacity .45s ease;
  }

  #loadingScreen.loading-hidden{ opacity:0; pointer-events:none; }

  .loading-content{
    display:flex; flex-direction:column; align-items:center; gap:14px;
    width:100%; max-width:380px;
  }

  .loading-scene-img{ width:78%; max-width:280px; height:auto; }

  .loading-title{
    font-family:'Caveat',cursive; font-weight:700; font-size:34px; line-height:1.05;
    color:#1c3358; text-align:center;
  }

  .loading-bar-track{
    width:78%; max-width:260px; height:18px; border:2.5px solid #1c3358; border-radius:999px;
    background:#fbfaf5; overflow:hidden; flex-shrink:0;
  }

  .loading-bar-fill{
    height:100%; width:0%; background:#1c3358; border-radius:999px;
    transition:width .15s ease-out;
  }

  .loading-pct{
    font-family:'Caveat',cursive; font-weight:700; font-size:19px; color:#1c3358;
  }

  
  :root{
    --ink: #1c3358;
    --ink-soft: #2e4a78;
    --paper: #f4f2ea;
    --grid: #d7dbe6;
    --red: #c0392b;
    --green: #2f7d4f;
    --gold: #b8862f;
    --card: #fbfaf5;
  }

  /* "Пожелтевший лист" background theme — the actual uploaded photo of yellowed graph
     paper, tiled as a real texture (stains, grid lines and all) instead of a flat color */
  body.theme-agedPaper{
    --paper: #e6d9b4;
    --grid: #b3a17d;
    --card: #f2e7cc;
  }

  body.theme-agedPaper #bgLayer{
    background: url(../assets/images/loading-paper.jpg) repeat 0 0/320px 320px;
  }

  /* "В линейку" background theme — classic ruled notebook paper: horizontal rule lines only,
     plus a red margin line, colors sampled from the reference notebook photo */
  body.theme-linedPaper{
    --paper: #f4f6fb;
    --grid: #bcc8d6;
    --card: #ffffff;
  }

  body.theme-linedPaper #bgLayer{
    background:
      linear-gradient(90deg, transparent 0, transparent 50px, #bf5468 50px, #bf5468 52px, transparent 52px),
      linear-gradient(var(--grid) 1px, transparent 1px) 0 0/100% 28px,
      var(--paper);
  }

  /* "Темница" (Dungeon) background theme — a dim stone dungeon cell photo/illustration,
     tiled behind the paper card so the app reads like it's set inside the cell. */
  body.theme-dungeon{
    --paper: #cfd6dc;
    --grid: #8a97a3;
    --card: #e9ecef;
  }

  /* Mobile default: vertical dungeon photo */
  body.theme-dungeon #bgLayer{
    background: url(../assets/images/bg-dungeon-mobile.jpg) no-repeat center center/cover;
  }

  /* Desktop / wide screens: horizontal dungeon photo */
  @media (min-width: 700px){
    body.theme-dungeon #bgLayer{
      background: url(../assets/images/bg-dungeon-desktop.jpg) no-repeat center center/cover;
    }
  }

  /* "Одичалые пустоши" (Wildling Wastes) background theme — a soft illustrated
     meadow/forest landscape with a fox, tiled behind the paper card. */
  body.theme-wildlands{
    --paper: #dfe8dc;
    --grid: #a9bfa2;
    --card: #eef3ea;
  }

  /* Mobile default: narrow landscape crop */
  body.theme-wildlands #bgLayer{
    background: url(../assets/images/bg-wildlands-mobile.jpg) no-repeat center center/cover;
  }

  /* Desktop / wide screens: full-width landscape */
  @media (min-width: 700px){
    body.theme-wildlands #bgLayer{
      background: url(../assets/images/bg-wildlands-desktop.jpg) no-repeat center center/cover;
    }
  }

  /* "Закат оригами" (Origami Sunset) background theme — a paper-craft coastal
     village at sunset with a sailboat, tiled behind the paper card. */
  body.theme-origamiSunset{
    --paper: #ecdccb;
    --grid: #c9a98d;
    --card: #f5ebe0;
  }

  /* Mobile default: narrow landscape crop */
  body.theme-origamiSunset #bgLayer{
    background: url(../assets/images/bg-origami-sunset-mobile.jpg) no-repeat center center/cover;
  }

  /* Desktop / wide screens: full-width landscape */
  @media (min-width: 700px){
    body.theme-origamiSunset #bgLayer{
      background: url(../assets/images/bg-origami-sunset-desktop.jpg) no-repeat center center/cover;
    }
  }

  /* "Городок у стен" (Town by the Walls) background theme — a walled medieval
     town with a fox watching from the meadow. Wheel-of-Fortune exclusive prize. */
  body.theme-medievalTown{
    --paper: #e9e2ce;
    --grid: #bcae8c;
    --card: #f4efe1;
  }

  /* Mobile default: portrait crop */
  body.theme-medievalTown #bgLayer{
    background: url(../assets/images/bg-medieval-town-mobile.jpg) no-repeat center center/cover;
  }

  /* Desktop / wide screens: full-width landscape */
  @media (min-width: 700px){
    body.theme-medievalTown #bgLayer{
      background: url(../assets/images/bg-medieval-town-desktop.jpg) no-repeat center center/cover;
    }
  }

  /* "Сердца" (Hearts) background theme — "В слепую" achievement reward: a real grid-paper
     photo with little hearts pinned to it, tiled as a texture (same approach as "Пожелтевший
     лист" above) — repeating works the same on any device, no separate phone/desktop crop needed. */
  body.theme-hearts{
    --paper: #fff6f7;
    --grid: #eeb7c0;
    --card: #fffbfb;
  }

  body.theme-hearts #bgLayer{
    background: url(../assets/images/bg-hearts-paper.jpg) repeat 0 0/350px 500px;
  }

  *{ box-sizing: border-box; }

  html, body{
    margin:0; padding:0;
    min-height:100%;
    font-family: 'Patrick Hand', cursive;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    overflow-x:hidden;
  }

  /* Fixed background layer: pinned behind everything at viewport size, independent of
     how tall the page/body becomes (e.g. long lists on the word-packs or settings screens).
     This is what keeps the background identical everywhere instead of stretching/tiling
     differently depending on content length. */
  #bgLayer{
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(var(--grid) 1px, transparent 1px) 0 0/28px 28px,
      linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/28px 28px,
      var(--paper);
  }

  .app{
    max-width: 560px;
    margin: 0 auto;
    min-height: 100vh;
    display:flex;
    flex-direction:column;
    padding: 58px 11px 20px;
    position:relative;
  }

  .screen{ display:none; flex-direction:column; flex:1; }

  .screen.active{ display:flex; }

  h1, h2, h3{ font-family:'Caveat', cursive; margin:0; }

  /* ---------- BUTTONS ---------- */
  .btn{
    border: 3px solid var(--ink);
    background: var(--card);
    border-radius: 14px;
    padding: 12px 22px;
    font-family:'Caveat', cursive;
    font-weight:700;
    font-size: 24px;
    color: var(--ink);
    cursor:pointer;
    text-align:center;
  }

  .btn:active{ transform: scale(0.96); }

  .btn.primary{ background: var(--ink); color: var(--paper); }

  .btn.block{ width:100%; }

  .btn.small{ font-size:18px; padding:8px 14px; border-width:2.5px; }

  .btn.gold{ border-color: var(--gold); color: var(--gold); }

  .btn.gold.owned{ background: var(--gold); color: var(--card); }

  .btn:disabled{ opacity:.45; pointer-events:none; }

  .btn.iconed{ display:flex; align-items:center; justify-content:center; gap:10px; }

  .btn .btn-icon{ width:32px; height:32px; object-fit:contain; flex-shrink:0; }

  .btn .btn-icon-inline{ display:flex; align-items:center; flex-shrink:0; }

  /* ---------- TOP BAR (shared) ---------- */
  .topbar{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }

  .icon-btn{
    width:46px; height:46px; border-radius:50%;
    border:3px solid var(--ink); background:var(--card);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0;
  }

  .icon-btn:active{ transform: scale(0.92); }

  .icon-btn svg{ width:22px; height:22px; }

  .topbar h2{ flex:1; text-align:center; font-size:28px; }

  .topbar .spacer{ width:46px; }

  /* ---------- MENU OVERLAY (in-game pause) ---------- */
  .overlay{
    position: fixed; inset:0; background: rgba(28,51,88,0.35);
    opacity:0; pointer-events:none; transition: opacity .2s ease; z-index: 20;
    display:flex; align-items:center; justify-content:center;
  }

  .overlay.open{ opacity:1; pointer-events:auto; }

  .pause-panel{
    width: min(300px, 84vw); background: var(--paper);
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 26px 26px; border: 3px solid var(--ink); border-radius:16px;
    padding: 20px; display:flex; flex-direction:column; gap:10px;
  }

  .pause-panel h2{ text-align:center; font-size:28px; margin-bottom:6px; }

  .confirm-exit-desc{ text-align:center; margin-bottom:14px; font-size:15px; }

  /* ---------- TOGGLE SWITCH ---------- */
  .switch{
    position:relative; width:44px; height:25px; flex-shrink:0;
    border:2.3px solid var(--ink); border-radius:999px; background: var(--card);
    cursor:pointer;
  }

  .switch .knob{
    position:absolute; top:1.5px; left:2px; width:16.5px; height:16.5px;
    border-radius:50%; background: var(--ink); transition: left .16s ease, background .16s ease;
  }

  .switch.on{ background: rgba(139,195,74,0.3); }

  .switch.disabled{ opacity:.35; pointer-events:none; cursor:default; }

  .switch.on .knob{ left: 22.5px; background: var(--green); }

  .toggle-row{ display:flex; align-items:center; gap:12px; }

  .toggle-row .toggle-row-text{ flex:1; }

  .progress-track{
    width:100%; height:8px; border-radius:6px; background:var(--grid);
    overflow:hidden; margin-top:6px;
  }

  .progress-fill{ height:100%; background:var(--gold); border-radius:6px; transition: width .3s ease; }

  /* ---------- TOAST ---------- */
  .toast-wrap{
    position:fixed; top:16px; left:50%; transform:translateX(-50%);
    z-index:50; display:flex; flex-direction:column; gap:8px; align-items:center;
    pointer-events:none; width:min(340px, 90vw);
  }

  .toast{
    background: var(--ink); color: var(--paper); border-radius:14px;
    padding:12px 18px; font-family:'Caveat',cursive; font-weight:700; font-size:19px;
    text-align:center; box-shadow:0 4px 14px rgba(28,51,88,.35);
    opacity:0; transform: translateY(-10px); transition: opacity .3s ease, transform .3s ease;
  }

  .toast.show{ opacity:1; transform: translateY(0); }

  /* ---------- COIN COUNTER (HUD) ---------- */
  .coin-hud{
    position: fixed; top: 12px; right: 12px;
    z-index: 15; display:none; align-items:center; gap:7px;
    background: var(--card); border: 2.5px solid var(--ink); border-radius: 999px;
    padding: 5px 14px 5px 6px; box-shadow: 0 3px 8px rgba(28,51,88,.18);
  }

  .coin-hud.visible{ display:flex; }

  .coin-hud .coin-icon-wrap{ display:flex; align-items:center; justify-content:center; flex-shrink:0; }

  .coin-hud .coin-icon-wrap svg{ display:block; }

  .coin-hud .coin-count{
    font-family:'Caveat',cursive; font-weight:700; font-size:25px; color: var(--ink);
    min-width: 14px; text-align:left;
  }

  .coin-hud.bump{ animation: coinBump .35s ease; }