:root{
    /* default skin: Greater Pflum (memo-paper text on green-black ink) */
    --sand:#7aa85a; --stone:#4a6a8a; --oasis:#3d86b8; --paper:#f0ead6; --coral:#d96b4b;
    --gold:#e7c95c; --gold-deep:#b89a3c; --coral-soft:#e89a7a;
    --ink-rgb:29,38,32; --paper-rgb:240,234,214; --coral-rgb:217,107,75;
    --ink:rgb(var(--ink-rgb));
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
  html,body{height:100%;overflow:hidden;background:var(--ink);touch-action:none}
  body{font-family:'Trebuchet MS',Verdana,sans-serif;color:var(--paper)}
  #wrap{position:relative;width:100%;height:100%}
  canvas{display:block;width:100%;height:100%}
  /* HUD */
  #hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;pointer-events:none}
  .bar{height:12px;border-radius:6px;background:rgba(var(--ink-rgb),.65);border:2px solid rgba(var(--paper-rgb),.5);overflow:hidden;margin-bottom:5px}
  .bar>div{height:100%;border-radius:4px;transition:width .15s}
  #hpFill{background:linear-gradient(90deg,var(--coral),var(--coral-soft))}
  #xpFill{background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
  #hpBar{width:min(46vw,210px)} #xpBar{width:min(34vw,150px);height:8px}
  #statline{font-size:clamp(.72rem,1.6vmin,1.05rem);letter-spacing:.12em;text-shadow:0 1px 2px rgba(0,0,0,.6)}
  #quest{position:absolute;top:max(10px,env(safe-area-inset-top));right:12px;text-align:right;font-size:clamp(.7rem,1.6vmin,1rem);
         letter-spacing:.1em;color:var(--paper);text-shadow:0 1px 3px rgba(0,0,0,.7);max-width:46vw;pointer-events:none}
  #quest b{color:var(--gold)}
  /* controls */
  #stickBase{position:absolute;width:96px;height:96px;border-radius:50%;border:2px solid rgba(var(--paper-rgb),.4);
             background:rgba(var(--ink-rgb),.25);display:none;pointer-events:none}
  #stickKnob{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(var(--paper-rgb),.55);
             display:none;pointer-events:none}
  .btn{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;
       font-size:clamp(.72rem,1.6vmin,1rem);font-weight:bold;letter-spacing:.08em;color:var(--paper);
       background:rgba(var(--ink-rgb),.5);border:2px solid rgba(var(--paper-rgb),.55);touch-action:none}
  .btn:active,.btn.on{background:rgba(var(--coral-rgb),.55)}
  #btnA{right:18px;bottom:max(22px,env(safe-area-inset-bottom));width:84px;height:84px;font-size:clamp(.85rem,1.9vmin,1.15rem)}
  #btnP{right:118px;bottom:max(34px,env(safe-area-inset-bottom));width:58px;height:58px}
  /* dialogue */
  #dlg{position:absolute;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));
       width:min(92vw,540px);background:rgba(var(--ink-rgb),.92);border:3px solid var(--paper);border-radius:10px;
       padding:14px 16px;display:none}
  #dlgName{color:var(--gold);font-size:clamp(.75rem,1.7vmin,1.05rem);letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}
  #dlgText{font-size:clamp(.95rem,2.2vmin,1.4rem);line-height:1.5}
  #dlgHint{font-size:clamp(.62rem,1.4vmin,.9rem);opacity:.6;margin-top:8px;letter-spacing:.15em}
  #dlgBtns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  #dlgBtns button{flex:1;min-width:120px;padding:10px;border-radius:8px;border:2px solid var(--paper);
       background:rgba(var(--paper-rgb),.12);color:var(--paper);font-family:inherit;font-size:clamp(.8rem,1.8vmin,1.15rem);letter-spacing:.08em}
  #dlgBtns button:active{background:rgba(var(--coral-rgb),.5)}
  /* overlays */
  .ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
      text-align:center;background:rgba(var(--ink-rgb),.78);transition:opacity .35s;padding:20px}
  .ui.hidden{opacity:0;pointer-events:none}
  h1{font-size:clamp(1.9rem,8.5vw,3.2rem);font-weight:normal;letter-spacing:.1em;color:var(--gold);
     text-shadow:0 2px 0 var(--stone),0 6px 18px rgba(0,0,0,.5)}
  .sub{font-size:clamp(.78rem,1.8vmin,1.1rem);letter-spacing:.28em;text-transform:uppercase;color:var(--coral);margin-top:.9rem}
  .tip{white-space:pre-line;font-size:clamp(.78rem,1.8vmin,1.1rem);color:var(--paper);opacity:.85;margin-top:1.6rem;line-height:1.9;max-width:34ch}
  .pulse{animation:pulse 1.6s ease-in-out infinite}
  #toast{position:absolute;left:50%;transform:translateX(-50%);bottom:130px;background:rgba(var(--ink-rgb),.85);
         border:2px solid rgba(var(--paper-rgb),.6);border-radius:8px;padding:8px 16px;font-size:clamp(.85rem,2vmin,1.3rem);
         letter-spacing:.08em;color:var(--paper);opacity:0;transition:opacity .3s;pointer-events:none;
         max-width:80vw;text-align:center}
  @keyframes pulse{0%,100%{opacity:.5}50%{opacity:.95}}
  @media (prefers-reduced-motion:reduce){.pulse{animation:none;opacity:.85}}
  /* cheat / playtest panel (only built when ?cheats or ?test) */
  #muteBtn{position:absolute;left:84px;top:70px;z-index:11;display:flex;align-items:center;justify-content:center;
       width:28px;height:26px;border-radius:6px;font-size:.75rem;
       color:var(--paper);background:rgba(var(--ink-rgb),.55);border:1px solid rgba(var(--paper-rgb),.4);
       cursor:pointer;opacity:.75}
  #cheatBtn{position:absolute;left:12px;top:70px;z-index:6;display:flex;align-items:center;justify-content:center;
       width:64px;height:26px;border-radius:6px;font-size:.6rem;font-weight:bold;letter-spacing:.14em;
       color:var(--paper);background:rgba(var(--ink-rgb),.55);border:1px solid rgba(var(--paper-rgb),.4);
       cursor:pointer;opacity:.75}
  #cheatPanel{position:absolute;left:12px;top:102px;z-index:6;width:min(46vw,250px);max-height:70vh;overflow-y:auto;
       background:rgba(var(--ink-rgb),.94);border:2px solid rgba(var(--paper-rgb),.5);border-radius:10px;
       padding:10px 12px}
  .cheatHead{font-size:.6rem;letter-spacing:.22em;color:var(--gold);margin:8px 0 4px}
  .cheatHead:first-child{margin-top:0}
  .cheatRow{display:flex;gap:5px;flex-wrap:wrap}
  .cheatRow button{flex:1;min-width:68px;padding:7px 6px;border-radius:6px;border:1px solid rgba(var(--paper-rgb),.5);
       background:rgba(var(--paper-rgb),.1);color:var(--paper);font-family:inherit;font-size:.62rem;letter-spacing:.04em}
  .cheatRow button:active{background:rgba(var(--coral-rgb),.5)}
  .cheatFoot{font-size:.58rem;opacity:.55;margin-top:10px;letter-spacing:.06em}

  /* ---- skin overrides (the :root values above are the default skin's) ---- */
  body.skin-desert{
    --sand:#e8c27a; --stone:#b06a4a; --oasis:#2e9e8f; --paper:#f6e7c8; --coral:#e0644b;
    --gold:#f2d27a; --gold-deep:#d8a93f; --coral-soft:#f0936f;
    --ink-rgb:42,28,20; --paper-rgb:246,231,200; --coral-rgb:224,100,75;
  }