:root {
    --bg1:#fff7df;
    --bg2:#ffd88a;
    --ink:#3a2408;
    --accent:#ff9f1c;
    --danger:#ff4d4d;
    --panel:rgba(255,255,255,.82);
  }
  * { box-sizing:border-box; }
  html, body {
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(circle at 20% 15%, rgba(255,255,255,.9), transparent 28%),
      linear-gradient(180deg,var(--bg1),var(--bg2));
    touch-action:none;
    user-select:none;
  }
  .game-wrap {
    position:relative;
    width:100vw;
    height:100dvh;
    min-height:560px;
    overflow:hidden;
  }
  canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }
  .hud {
    position:absolute;
    top:env(safe-area-inset-top, 0);
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px;
    pointer-events:none;
    z-index:5;
  }
  .chip {
    min-width:86px;
    padding:9px 12px;
    border:2px solid rgba(58,36,8,.12);
    border-radius:999px;
    background:var(--panel);
    box-shadow:0 8px 24px rgba(100,55,0,.12);
    font-weight:800;
    line-height:1;
    backdrop-filter: blur(8px);
  }
  .chip small {
    display:block;
    font-size:10px;
    opacity:.62;
    margin-bottom:5px;
    letter-spacing:.08em;
  }
  .chip strong {
    font-size:20px;
  }
  .heart {
    color:var(--danger);
    text-shadow:0 1px 0 #fff;
    letter-spacing:2px;
    font-size:18px;
  }
  .controls {
    position:absolute;
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom, 0));
    display:flex;
    gap:10px;
    z-index:6;
  }
  button {
    border:0;
    border-radius:16px;
    padding:12px 14px;
    color:#2a1904;
    background:rgba(255,255,255,.86);
    font-weight:900;
    box-shadow:0 10px 26px rgba(100,55,0,.18);
    cursor:pointer;
    backdrop-filter:blur(8px);
  }
  button:active { transform:translateY(1px) scale(.98); }
  .center {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    padding:22px;
    z-index:10;
    background:linear-gradient(180deg,rgba(255,247,223,.62),rgba(255,216,138,.48));
  }
  .card {
    width:min(560px, 92vw);
    padding:28px;
    border-radius:28px;
    background:rgba(255,255,255,.88);
    box-shadow:0 20px 60px rgba(100,55,0,.22);
    border:2px solid rgba(58,36,8,.1);
    text-align:center;
    backdrop-filter:blur(10px);
  }
  h1 {
    margin:0 0 8px;
    font-size:clamp(30px, 8vw, 54px);
    line-height:1;
  }
  .sub {
    margin:0 auto 18px;
    max-width:34em;
    line-height:1.7;
    font-weight:700;
    opacity:.78;
  }
  .start {
    font-size:18px;
    padding:15px 26px;
    background:linear-gradient(180deg,#ffd36b,#ff9f1c);
    border:2px solid rgba(58,36,8,.18);
  }
  .how {
    margin-top:18px;
    font-size:13px;
    line-height:1.7;
    opacity:.72;
  }
  .hidden { display:none; }
  .toast {
    position:absolute;
    left:50%;
    top:22%;
    transform:translateX(-50%);
    padding:10px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.9);
    font-weight:900;
    box-shadow:0 12px 30px rgba(100,55,0,.18);
    opacity:0;
    pointer-events:none;
    z-index:8;
  }
  .toast.show {
    animation:pop .65s ease-out;
  }
  @keyframes pop {
    0% { opacity:0; transform:translateX(-50%) translateY(16px) scale(.9); }
    25% { opacity:1; transform:translateX(-50%) translateY(0) scale(1.05); }
    100% { opacity:0; transform:translateX(-50%) translateY(-22px) scale(1); }
  }
  @media (max-width:640px) {
    .hud { padding:10px; gap:6px; }
    .chip { min-width:auto; padding:8px 10px; }
    .chip strong { font-size:17px; }
    .controls { left:14px; right:14px; justify-content:center; }
  }