:root{
    --ink:#22323b;
    --ink-soft:#4d6270;
    --paper:rgba(255,252,245,.82);
    --paper-strong:rgba(255,252,245,.94);
    --line:rgba(34,50,59,.12);
    --shadow:0 10px 30px rgba(24,46,58,.14);
    --green:#4c9a62;
    --yellow:#d7a536;
    --red:#c8604f;
    --water:#3d7f9b;
    --accent:#c9773f;
    --radius:18px;
    font-family: ui-rounded, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
    color-scheme: light;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;height:100%;overflow:hidden;background:#bfd9ec;}
  body{color:var(--ink);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;}
  #stage{position:fixed;inset:0;}
  #stage canvas{display:block;width:100%;height:100%;touch-action:none;}

  /* ---------- HUD ---------- */
  #hud{
    position:fixed;inset:0;pointer-events:none;z-index:5;
    padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    display:flex;justify-content:flex-end;align-items:flex-start;gap:16px;
  }
  .status{pointer-events:auto;pointer-events:auto;
    width:min(300px, 36vw);display:flex;flex-direction:column;gap:10px;
    padding:13px 15px 12px;border-radius:var(--radius);
    background:var(--paper);border:1px solid rgba(255,255,255,.55);
    box-shadow:var(--shadow);backdrop-filter:blur(10px) saturate(1.1);
  }
  .status-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
  .status-label{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:650;}
  .status-value{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;}
  .meter{height:9px;border-radius:99px;background:rgba(34,50,59,.10);overflow:hidden;}
  .meter-fill{height:100%;width:60%;border-radius:99px;background:var(--green);transition:width .35s ease, background .35s ease;}
  .counts{display:flex;flex-wrap:wrap;gap:5px 10px;font-size:12px;color:var(--ink-soft);font-weight:600;font-variant-numeric:tabular-nums;}
  .counts span{white-space:nowrap;}

  /* ---------- hint + food bar ---------- */
  #bottom{
    position:fixed;left:0;right:0;bottom:0;z-index:6;pointer-events:none;
    padding:0 12px max(14px, env(safe-area-inset-bottom));
    display:flex;flex-direction:column;align-items:center;gap:9px;
  }
  #hint{
    max-width:min(600px, 92vw);text-align:center;font-size:12.5px;line-height:1.4;
    color:#334d59;background:rgba(255,252,245,.72);border:1px solid rgba(255,255,255,.5);
    padding:7px 13px;border-radius:99px;box-shadow:0 4px 16px rgba(24,46,58,.08);
    backdrop-filter:blur(8px);transition:opacity .3s ease;
  }
  #hint b{color:#1e3039;}
  #foodbar{display:flex;gap:8px;align-items:stretch;pointer-events:auto;}
  .food-btn{
    appearance:none;border:1px solid rgba(255,255,255,.62);cursor:pointer;
    background:var(--paper);border-radius:16px;padding:9px 13px 8px;min-width:92px;
    display:flex;flex-direction:column;align-items:center;gap:2px;
    box-shadow:0 5px 18px rgba(24,46,58,.10);backdrop-filter:blur(10px) saturate(1.15);
    color:var(--ink);font-family:inherit;transition:transform .15s ease, background .15s ease, box-shadow .15s ease, opacity .2s ease;
    position:relative;overflow:hidden;
  }
  .food-btn:hover{transform:translateY(-2px);background:var(--paper-strong);}
  .food-btn:active{transform:translateY(0) scale(.985);}
  .food-btn .emoji{font-size:22px;line-height:1.05;filter:saturate(.95);}
  .food-btn .name{font-size:11.5px;font-weight:700;line-height:1.1;}
  .food-btn .key{
    position:absolute;top:5px;right:7px;font-size:9px;font-weight:700;
    color:rgba(34,50,59,.45);border:1px solid rgba(34,50,59,.16);border-radius:5px;
    padding:0 3px;line-height:1.35;
  }
  .food-btn[aria-pressed="true"]{
    background:rgba(255,249,235,.98);box-shadow:0 0 0 2px rgba(201,119,63,.62), 0 8px 22px rgba(96,60,26,.16);
    transform:translateY(-2px);
  }
  .food-btn[aria-pressed="true"] .name{color:#8d4b1e;}
  .food-btn:disabled{cursor:not-allowed;opacity:.62;transform:none;}
  .food-btn .cd{
    font-size:10.5px;font-weight:750;color:#a55b32;font-variant-numeric:tabular-nums;line-height:1;
  }

  /* ---------- toasts + tooltip ---------- */
  #toasts{
    position:fixed;right:max(16px, env(safe-area-inset-right));top:132px;z-index:8;
    display:flex;flex-direction:column;align-items:flex-end;gap:7px;
    pointer-events:none;max-width:min(330px, 70vw);
  }
  .toast{
    background:rgba(255,252,245,.94);border:1px solid rgba(255,255,255,.6);
    box-shadow:0 8px 24px rgba(24,46,58,.14);border-radius:13px;
    padding:9px 12px;font-size:12.5px;line-height:1.35;color:#2c414c;
    animation:toastIn .35s cubic-bezier(.2,.8,.2,1) both;
    transition:opacity .45s ease, transform .45s ease;
  }
  .toast.out{opacity:0;transform:translateY(-4px);}
  @keyframes toastIn{from{opacity:0;transform:translateY(-7px) scale(.98);}to{opacity:1;transform:none;}}

  #tip{
    position:fixed;z-index:9;pointer-events:none;min-width:172px;max-width:250px;
    background:rgba(255,252,245,.97);border:1px solid rgba(255,255,255,.65);
    box-shadow:0 12px 34px rgba(20,38,48,.20);border-radius:13px;padding:10px 12px;
    font-size:12px;line-height:1.45;color:#2c414c;opacity:0;transform:translateY(4px);
    transition:opacity .12s ease, transform .12s ease;
  }
  #tip.show{opacity:1;transform:none;}
  #tip .tip-head{font-size:13px;font-weight:750;color:#1e3039;margin-bottom:3px;display:flex;justify-content:space-between;gap:10px;}
  #tip .tip-status{font-weight:700;}
  #tip .tip-status.good{color:#3d8451;}
  #tip .tip-status.warn{color:#b48224;}
  #tip .tip-status.bad{color:#b64d3d;}
  #tip .tip-row{color:#546873;}
  #tip .tip-bar{height:5px;border-radius:99px;background:rgba(34,50,59,.1);margin-top:7px;overflow:hidden;}
  #tip .tip-bar i{display:block;height:100%;border-radius:99px;background:#4c9a62;}

  /* ---------- loading ---------- */
  #loading{
    position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
    background:linear-gradient(180deg,#cfe4f3 0%, #bfd9ec 52%, #a9c9dd 100%);
    color:#2c4a58;transition:opacity .7s ease;text-align:center;padding:24px;
  }
  #loading.hide{opacity:0;pointer-events:none;}
  #loading h2{font-size:clamp(26px,5vw,40px);margin:0;letter-spacing:-.03em;font-weight:760;}
  #loading p{margin:0;font-size:13.5px;color:#4b6a79;max-width:330px;line-height:1.5;}
  .loader{width:38px;height:38px;border-radius:50%;border:3px solid rgba(44,74,88,.18);border-top-color:#3d7f9b;animation:spin 1s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  #loading .err{color:#8e3d31;font-weight:650;max-width:420px;}

  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

  @media (max-width: 720px){
    #hud{padding:10px 10px 0;gap:8px;}
    .brand{padding:9px 12px 10px;border-radius:14px;max-width:56vw;}
    .brand h1{font-size:20px;}
    .brand p{display:none;}
    .status{pointer-events:auto;pointer-events:auto;width:min(205px,42vw);padding:9px 11px;gap:7px;border-radius:14px;}
    .status-label{font-size:9.5px;}
    .status-value{font-size:11.5px;}
    .counts{font-size:10.5px;gap:3px 7px;}
    #toasts{top:104px;right:10px;max-width:64vw;}
    .toast{font-size:11.5px;padding:7px 10px;}
    #hint{font-size:11.5px;padding:6px 10px;max-width:94vw;}
    #foodbar{gap:6px;width:100%;justify-content:center;}
    .food-btn{flex:1 1 0;min-width:0;max-width:100px;padding:7px 4px 6px;border-radius:13px;}
    .food-btn .emoji{font-size:20px;}
    .food-btn .name{font-size:10px;}
    .food-btn .key{display:none;}
    #tip{max-width:210px;}
  }
  @media (max-height: 520px){
    .brand p{display:none;}
    .status{pointer-events:auto;pointer-events:auto;gap:5px;}
    #hint{display:none;}
  }
.hud-mini{appearance:none;border:1px solid rgba(34,50,59,.18);background:rgba(255,255,255,.6);border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:700;color:#22323b;cursor:pointer;pointer-events:auto;}