:root {
    --bg-color: #fff9db;
    --border-color: #ffe066;
    --text-color: #5c4300;
  }
  * { box-sizing: border-box; user-select: none; -webkit-user-select: none; }
  body {
    margin: 0; padding: 0; overflow: hidden;
    background-color: var(--bg-color); color: var(--text-color);
    font-family: 'Comic Sans MS', 'Hiragino Maru Gothic ProN', 'Arial Rounded MT Bold', sans-serif;
    display: flex; justify-content: center; align-items: center;
    width: 100vw; height: 100dvh;
  }
  #app-container {
    width: 100%; height: 100%; max-width: 480px;
    background: #ffffff; border-left: 4px solid var(--border-color); border-right: 4px solid var(--border-color);
    display: flex; flex-direction: column; position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.06);
    padding-top: env(safe-area-inset-top, 12px);
  }
  .screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; flex-direction: column; }
  .screen.active { display: flex; }

  /* タイトル */
  #title-screen {
    background: radial-gradient(circle at 50% 40%, #fffde6 0%, #fff9c4 100%);
    align-items: center; justify-content: center; text-align: center; padding: 20px;
  }
  .title-logo {
    font-size: 42px; font-weight: bold; color: #ff9200;
    text-shadow: 3px 3px 0 #fff, -3px -3px 0 #fff, 0 6px 10px rgba(255,146,0,0.2);
    margin-bottom: 30px; line-height: 1.3;
  }
  .btn-big {
    padding: 16px 50px; font-size: 26px; font-weight: bold; color: #fff;
    background: linear-gradient(to bottom, #ffae19, #ff8c00);
    border: 4px solid #fff; border-radius: 40px; cursor: pointer;
    box-shadow: 0 6px 0 #b36200, 0 8px 15px rgba(0,0,0,0.12);
    transition: transform 0.05s; outline: none;
  }
  .btn-big:active { transform: translateY(4px); box-shadow: 0 2px 0 #b36200; }

  /* ミュート */
  .mute-btn {
    position: absolute; top: 15px; right: 15px;
    width: 50px; height: 50px; border-radius: 50%;
    background: #fff; border: 3px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; cursor: pointer; z-index: 100;
  }
  #hud-bgm-btn:active, #hud-se-btn:active, #back-title-btn:active {
    transform: scale(0.9);
  }
  #back-title-btn {
    min-height: 44px; background: #ffffff; border: 3px solid var(--border-color); border-radius: 22px;
    padding: 0 12px; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: bold; color: var(--text-color); cursor: pointer;
    box-shadow: 0 3px 0 var(--border-color); user-select: none; outline: none;
    transition: transform 0.08s; gap: 4px;
  }

  /* ゲームがめん */
  #game-screen { background-color: #fffde6; justify-content: space-between; }
  #canvas-container { flex: 1; position: relative; display: flex; justify-content: center; align-items: center; }
  #game-canvas { display: block; background: #fffde6; touch-action: none; }

  /* コントロール・ショップ */
  #shop-panel {
    background: #fffbe6; border-top: 4px solid var(--border-color);
    padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; z-index: 10;
    height: 125px; flex: 0 0 125px;
  }
  .shop-title { font-size: 12px; font-weight: bold; color: #cc7a00; margin-left: 2px; line-height: 1.2; }
  .shop-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .shop-row::-webkit-scrollbar { display: none; }
  
  .shop-item {
    flex: 0 0 98px; height: 80px; background: #fff; border: 3px solid var(--border-color);
    border-radius: 14px; padding: 4px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 3px 0 var(--border-color); position: relative;
  }
  .shop-item.bought { background: #e6ffed; border-color: #52c41a; box-shadow: 0 3px 0 #52c41a; cursor: default; }
  .shop-item.locked { background: #f5f5f5; border-color: #d9d9d9; box-shadow: 0 3px 0 #d9d9d9; opacity: 0.85; cursor: not-allowed; }
  .shop-item:active:not(.bought):not(.locked) { transform: translateY(2px); box-shadow: 0 1px 0 var(--border-color); }
  .item-emoji { font-size: 22px; line-height: 1; }
  .item-label { font-size: 9px; font-weight: bold; margin-top: 1px; text-align: center; }
  .item-price { font-size: 10px; font-weight: bold; color: #ff9200; margin-top: 1px; }
  .item-lock-text { font-size: 9px; font-weight: bold; color: #8c8c8c; margin-top: 1px; }