/* ============================================================
   base.css — リセット / デザイントークン / ステージ
   Figma: 420 × 880 を基準
============================================================ */
:root{
  /* brand */
  --pink:#F72BA3;
  --purple:#6F2BF7;
  --red:#F03316;
  --green:#00C878;
  --dark:#4E4149;

  /* bins */
  --organik:#36AA25;
  --anorganik:#18A8D0;
  --residu:#F03316;
  --b3:#AB47CC;

  /* text */
  --brown:#7A3E10;
  --brown-num:#6B3811;
  --copyright:#BD794F;

  /* surfaces */
  --cream:#FCF3E1;
  --sand-top:#FFE3AA;
  --hint:#FFF9CE;
  --pc-blue:#1479C5;

  /* shadows */
  --shadow-card: 0 5px 0 rgba(93,72,32,.30);
  --shadow-btn:  2px 5px 0 rgba(230,206,157,.80);
  --shadow-btn-flat: 0 4px 0 rgba(230,206,157,.80);
  --shadow-inner: inset 0 8px 0 rgba(255,255,255,.28), inset 0 -10px 0 rgba(0,0,0,.18);

  /* fonts */
  --font-display:'Luckiest Guy','Arial Rounded MT Bold','Hiragino Maru Gothic ProN',sans-serif;
  --font-body:'Nunito','Hiragino Maru Gothic ProN','Arial Rounded MT Bold',sans-serif;
  /* 数字（タイマー・スコア・カウント）は言語によらず Luckiest Guy */
  --font-num:'Luckiest Guy','Arial Rounded MT Bold',sans-serif;
  --font-ja-display:'Dela Gothic One','Hiragino Sans','Hiragino Kaku Gothic ProN',sans-serif;

  /* layout */
  --stage-max:430px;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

/* 日本語（Figma JP 151:2992）: 見出し・ボタン = Dela Gothic One、本文 = LINE Seed JP ExtraBold */
html[lang="ja"]{
  --font-display:var(--font-ja-display);
  --font-body:'LINE Seed JP','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; overscroll-behavior:none; }
body{
  font-family:var(--font-body);
  background:var(--cream);
  display:flex; justify-content:center; align-items:stretch;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  touch-action:manipulation;
  overflow:hidden;
  color:var(--brown);
}
img{ display:block; pointer-events:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; touch-action:manipulation; }

#stage{
  position:relative;
  width:100%; max-width:var(--stage-max);
  height:100vh; height:100dvh;
  background:var(--cream);
  overflow:hidden;
}

/* ---------- screens ---------- */
.screen{
  position:absolute; inset:0;
  display:none; flex-direction:column;
  z-index:5;
}
.screen.active{ display:flex; }
.screen.overlay{ background:rgba(0,0,0,.70); z-index:30; align-items:center; justify-content:center; }

/* ---------- typography helpers ---------- */
.font-display{ font-family:var(--font-display); font-weight:400; }
.font-body{ font-family:var(--font-body); font-weight:900; }

/* 白フチ付きの文字（ステッカー風） */
.outline-white{
  text-shadow:
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    0 -3px 0 #fff, 0 3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff,
    0 5px 0 rgba(230,206,157,.8);
}

/* 分類チップ */
.cat{
  display:inline-block; padding:2px 6px 0; border-radius:6px;
  color:#fff; font-weight:900; text-transform:uppercase; line-height:1.3;
}
.cat.organik{ background:var(--organik); }
.cat.anorganik{ background:var(--anorganik); }
.cat.residu{ background:var(--residu); }
.cat.b3{ background:var(--b3); }