/* ============================================================
     TINY POST — soft pastel UI
     ============================================================ */
  :root{
    --cream:#fff8ef;
    --card:#fffdf8;
    --ink:#6b5d55;
    --ink-soft:#9c8d82;
    --coral:#f2a48c;
    --coral-deep:#e08a70;
    --mint:#bfe3cd;
    --sky:#cfe6f2;
    --lav:#d9cdf0;
    --line:#f0dfd2;
    --radius:22px;
    --shadow:0 6px 24px rgba(150,120,100,.14);
  }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body{ margin:0; padding:0; height:100%; overflow:hidden;
    font-family: ui-rounded, "Hiragino Maru Gothic ProN", "Quicksand", "Varela Round",
                 "Segoe UI", system-ui, sans-serif;
    color:var(--ink); background:#bad9f0;
  }
  #game{ position:fixed; inset:0; display:block; }
  /* soft vignette — gentle focus toward the middle of the world */
  #vignette{
    position:fixed; inset:0; z-index:10; pointer-events:none;
    background:radial-gradient(ellipse at 50% 42%,
      rgba(0,0,0,0) 55%, rgba(64,48,84,.15) 100%);
  }
  button{ font-family:inherit; color:inherit; }

  /* ---------- intro overlay ---------- */
  #intro{
    position:fixed; inset:0; z-index:50;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(170deg,#9fe3d3 0%, #5fb8ae 55%, #2c464a 100%);
    transition:opacity .8s ease;
  }
  #intro.hide{ opacity:0; pointer-events:none; }
  .intro-card{
    background:var(--card); border:2px solid var(--line);
    border-radius:30px; box-shadow:var(--shadow);
    padding:34px 38px; max-width:420px; width:calc(100% - 40px);
    text-align:center;
  }
  .intro-card h1{
    margin:0 0 6px; font-size:30px; letter-spacing:.5px; color:var(--ink);
  }
  .intro-card .sub{
    margin:0 0 18px; color:var(--ink-soft); font-size:15px;
  }
  .controls-list{
    display:inline-block; text-align:left; margin:0 0 20px;
    font-size:14px; color:var(--ink-soft); line-height:1.9;
  }
  .controls-list b{ color:var(--ink); font-weight:600;
    background:var(--cream); border:1px solid var(--line);
    border-radius:8px; padding:1px 7px; margin-right:6px; }
  .begin-btn{
    background:var(--coral); border:none; color:#fff;
    font-size:17px; font-weight:600; letter-spacing:.3px;
    padding:13px 30px; border-radius:999px; cursor:pointer;
    box-shadow:0 5px 16px rgba(226,138,112,.45);
    transition:transform .15s ease, background .15s ease;
  }
  .begin-btn:hover{ background:var(--coral-deep); transform:translateY(-2px); }
  .begin-btn:focus-visible{ outline:3px solid var(--lav); outline-offset:3px; }

  /* ---------- name + character select ---------- */
  #charselect{
    position:fixed; inset:0; z-index:50;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(170deg,#9fe3d3 0%, #5fb8ae 55%, #2c464a 100%);
    opacity:0; pointer-events:none;
    transition:opacity .6s ease;
  }
  #charselect.show{ opacity:1; pointer-events:auto; }

  /* pause / help — same card treatment as the intro, but a translucent
     scrim instead of the opaque gradient so the world stays visible behind it */
  #menu{
    position:fixed; inset:0; z-index:55;
    display:flex; align-items:center; justify-content:center;
    /* deliberately NOT backdrop-filter: the loop keeps rendering while
       paused, so a blur over a live canvas would recompute every frame —
       a real cost on iPad for what is just a static scrim. A slightly
       more opaque flat scrim reads the same and is effectively free. */
    background:rgba(44,70,74,.72);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
  }
  #menu.show{ opacity:1; pointer-events:auto; }
  #name-input{
    width:100%; max-width:280px; box-sizing:border-box;
    font-family:inherit; font-size:15px; color:var(--ink);
    background:var(--cream); border:2px solid var(--line); border-radius:999px;
    padding:10px 18px; margin:0 0 18px; text-align:center;
  }
  #name-input:focus{ outline:3px solid var(--lav); outline-offset:2px; border-color:var(--coral); }
  #name-input::placeholder{ color:var(--ink-soft); }
  .char-row{ display:flex; gap:12px; justify-content:center; margin:0 0 22px; flex-wrap:wrap; }
  .char-card{
    font-family:inherit; cursor:pointer; width:118px;
    background:var(--cream); border:2px solid var(--line); border-radius:18px;
    padding:12px 8px; text-align:center;
    transition:transform .12s ease, border-color .12s ease, background .12s ease;
  }
  .char-card:hover{ transform:translateY(-2px); }
  .char-card:focus-visible{ outline:3px solid var(--lav); outline-offset:2px; }
  .char-card.sel{ border-color:var(--coral); background:#fff; box-shadow:0 4px 14px rgba(226,138,112,.3); }
  .char-avatar{ width:64px; height:82px; margin:0 auto 8px; position:relative; }
  .ca-head{
    width:32px; height:32px; border-radius:50%; margin:0 auto; position:relative;
    background:#e5c9be; overflow:hidden;
  }
  .ca-hair{ position:absolute; top:-7px; left:1px; right:1px; height:19px; border-radius:16px 16px 4px 4px; }
  .ca-body{ width:54px; height:42px; margin:5px auto 0; border-radius:14px 14px 24px 24px; }
  .ca-label{ font-size:12px; color:var(--ink-soft); line-height:1.3; }

  /* ---------- HUD ---------- */
  .hud{ position:fixed; z-index:20; pointer-events:none; }
  #quest-card{
    top:14px; left:14px; max-width:290px;
    background:var(--card); border:2px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow);
    padding:11px 16px; font-size:14px; line-height:1.45;
    transition:opacity .4s ease;
  }
  #quest-card .label{
    font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:2px;
  }
  #topbtns{ top:14px; right:14px; display:flex; gap:8px; pointer-events:auto; }
  .round-btn{
    width:46px; height:46px; border-radius:50%;
    background:var(--card); border:2px solid var(--line);
    box-shadow:var(--shadow); font-size:20px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:transform .12s ease;
  }
  .round-btn:hover{ transform:scale(1.08); }
  .round-btn:focus-visible{ outline:3px solid var(--lav); outline-offset:2px; }

  /* ---------- interact prompt ---------- */
  #prompt{
    left:50%; bottom:120px; transform:translateX(-50%);
    background:var(--card); border:2px solid var(--line);
    border-radius:999px; box-shadow:var(--shadow);
    padding:8px 18px; font-size:14px; white-space:nowrap;
    opacity:0; transition:opacity .25s ease;
  }
  #prompt.show{ opacity:1; }
  #prompt b{ color:var(--coral-deep); }

  /* ---------- dialogue ---------- */
  #dialog{
    left:50%; bottom:26px; transform:translateX(-50%) translateY(12px);
    width:min(560px, calc(100% - 32px));
    background:var(--card); border:2px solid var(--line);
    border-radius:26px; box-shadow:var(--shadow);
    padding:16px 22px 14px; opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  #dialog.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
  #dialog .speaker{
    display:inline-block; font-size:12px; font-weight:700; letter-spacing:.8px;
    color:#fff; background:var(--coral); border-radius:999px;
    padding:3px 12px; margin-bottom:7px; text-transform:uppercase;
  }
  #dialog .text{ font-size:16px; line-height:1.5; min-height:44px; }
  #dialog .next{
    text-align:right; font-size:12px; color:var(--ink-soft); margin-top:4px;
  }

  /* ---------- customization panel ---------- */
  #wardrobe{
    top:72px; right:14px; width:230px;
    background:var(--card); border:2px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow);
    padding:14px 16px; pointer-events:auto;
    opacity:0; transform:translateY(-8px); transition:.25s ease;
    visibility:hidden;
  }
  #wardrobe.show{ opacity:1; transform:translateY(0); visibility:visible; }
  #wardrobe h3{ margin:0 0 8px; font-size:15px; }
  .ward-row{ margin-bottom:9px; }
  .ward-row .rname{ font-size:12px; color:var(--ink-soft); margin-bottom:4px; }
  .swatches{ display:flex; gap:6px; flex-wrap:wrap; }
  .sw{
    width:26px; height:26px; border-radius:50%;
    border:2px solid rgba(255,255,255,.9); cursor:pointer;
    box-shadow:0 1px 4px rgba(120,90,70,.25);
    transition:transform .12s ease;
  }
  .sw:hover{ transform:scale(1.18); }
  .sw.on{ outline:3px solid var(--coral); outline-offset:1px; }

  /* ---------- emoji wheel ---------- */
  #emoji-wheel{
    bottom:78px; right:16px; pointer-events:auto;
    display:grid; grid-template-columns:repeat(3, 52px); gap:8px;
    background:var(--card); border:2px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:10px;
    opacity:0; transform:translateY(8px); transition:.22s ease; visibility:hidden;
  }
  #emoji-wheel.show{ opacity:1; transform:translateY(0); visibility:visible; }
  .em{
    width:52px; height:52px; font-size:26px; border-radius:16px;
    background:var(--cream); border:1px solid var(--line); cursor:pointer;
    transition:transform .12s ease;
  }
  .em:hover{ transform:scale(1.12); background:#fff; }

  /* ---------- touch controls ---------- */
  #touch-ui{ display:none; }
  body.touch #touch-ui{ display:block; }
  #stick-zone{
    position:fixed; left:0; bottom:0; width:48%; height:55%;
    z-index:15; touch-action:none;
  }
  #stick-base,#stick-nub{
    position:fixed; border-radius:50%; pointer-events:none; z-index:16;
    opacity:0; transition:opacity .15s;
  }
  #stick-base{ width:96px; height:96px; margin:-48px 0 0 -48px;
    background:rgba(255,253,248,.45); border:2px solid rgba(240,223,210,.8); }
  #stick-nub{ width:44px; height:44px; margin:-22px 0 0 -22px;
    background:rgba(242,164,140,.85); box-shadow:0 3px 10px rgba(150,100,80,.3); }
  .tbtn{
    position:fixed; z-index:16; border-radius:50%;
    background:rgba(255,253,248,.85); border:2px solid var(--line);
    box-shadow:var(--shadow); font-size:22px;
    display:flex; align-items:center; justify-content:center;
    touch-action:none; user-select:none;
    transition:transform .1s ease;
  }
  .tbtn:active{ transform:scale(.92); }
  .round-btn:active{ transform:scale(.92); }
  #btn-hop{ right:22px; bottom:24px; width:64px; height:64px; }
  #btn-talk{ right:100px; bottom:60px; width:56px; height:56px; display:none; }
  body.touch #btn-talk.show{ display:flex; }

  #emoji-open{ position:fixed; bottom:24px; right:16px; z-index:20; }
  body:not(.touch) #emoji-open{ bottom:16px; }
  body.touch #emoji-open{ bottom:100px; }
  body.touch #emoji-wheel{ bottom:160px; }

  /* ---------- toast ---------- */
  #toast{
    top:70px; left:50%; transform:translateX(-50%);
    background:var(--card); border:2px solid var(--line); border-radius:999px;
    box-shadow:var(--shadow); padding:8px 20px; font-size:14px;
    opacity:0; transition:opacity .35s ease;
  }
  #toast.show{ opacity:1; }

  @media (prefers-reduced-motion: reduce){
    *{ transition-duration:.01ms !important; }
  }
  @media (max-width:520px){
    #quest-card{ max-width:210px; font-size:13px; }
    .intro-card{ padding:26px 22px; }
    .intro-card h1{ font-size:24px; }
  }