/* =============================================
   Cleanup Game – 3ピース徳島  |  cleanup-game.css
   v1.1.2 Responsive + calmer palette + mobile viewport height tuning
   ============================================= */

/* ---------- CSS カスタムプロパティ ---------- */
.cg-wrap {
  --cg-primary:   #355f73;
  --cg-primary-h: #274757;
  --cg-green:     #5f8f68;
  --cg-green-h:   #496f51;
  --cg-line:      #4e7f74;
  --cg-red:       #9f6254;
  --cg-gold:      #c49335;
  --cg-bg:        #f5f8f6;
  --cg-shadow:    rgba(26, 42, 52, 0.14);
  --cg-font:      'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --cg-radius:    16px;
  --cg-edge-gap:  10px;
}

/* ---------- ラッパー ---------- */
.cg-wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  font-family: var(--cg-font);
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
}

.cg-wrap * {
  box-sizing: border-box;
}

/* ---------- アスペクト比コンテナ (4:3) ---------- */
.cg-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%;   /* 4:3 */
  background: var(--cg-bg);
  border-radius: var(--cg-radius);
  box-shadow: 0 12px 34px var(--cg-shadow);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

/* ---------- Canvas ---------- */
.cg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

/* ---------- UI レイヤー ---------- */
.cg-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- 共通スクリーン ---------- */
.cg-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(245, 248, 246, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  pointer-events: none;
  padding: clamp(12px, 2.2vw, 18px) clamp(14px, 2.8vw, 24px);
  gap: clamp(8px, 1.8vw, 12px);
}
.cg-screen.cg-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* HUD は背景なし */
#cg-hud-screen {
  background: transparent;
}
#cg-hud-screen.cg-active {
  pointer-events: none;
}

/* ---------- ミュートボタン ---------- */
.cg-mute-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
  width: clamp(40px, 5vw, 44px);
  height: clamp(40px, 5vw, 44px);
  border-radius: 50%;
  border: 1px solid rgba(53, 95, 115, 0.18);
  background: rgba(255, 255, 255, 0.95);
  font-size: clamp(16px, 2.4vw, 18px);
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 3px 10px rgba(26, 42, 52, 0.16);
  transition: transform 0.1s, box-shadow 0.15s;
}
.cg-mute-btn:active {
  transform: scale(0.92);
}

/* ---------- スタート画面 ---------- */
.cg-start-logo {
  font-size: clamp(1.08rem, 3.5vw, 1.45rem);
  font-weight: 900;
  color: var(--cg-primary);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(53, 95, 115, 0.18);
  border-radius: 999px;
  padding: 6px 14px;
  letter-spacing: 0.04em;
  box-shadow: 0 3px 10px rgba(26, 42, 52, 0.08);
}
.cg-logo-sub {
  font-size: 0.64em;
  font-weight: 700;
  color: #5d6b72;
  margin-left: 4px;
}
.cg-title {
  font-size: clamp(1.25rem, 4.3vw, 1.85rem);
  color: var(--cg-primary);
  text-align: center;
  margin: 0;
  line-height: 1.28;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.85);
}
.cg-title-sub {
  display: block;
  font-size: clamp(0.54em, 1.8vw, 0.6em);
  color: #58656c;
  margin-top: 4px;
  font-weight: 700;
}
.cg-lead {
  font-size: clamp(0.84rem, 2.5vw, 1rem);
  color: #566168;
  text-align: center;
  margin: 0;
  line-height: 1.55;
}
.cg-how {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
  align-items: stretch;
}
.cg-how-item {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(53, 95, 115, 0.16);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: clamp(0.74rem, 2.2vw, 0.9rem);
  text-align: center;
  line-height: 1.5;
  color: #4a565d;
  box-shadow: 0 3px 12px rgba(26, 42, 52, 0.06);
}

/* ---------- ボタン共通 ---------- */
.cg-btn {
  display: block;
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-radius: 999px;
  font-family: var(--cg-font);
  font-size: clamp(0.85rem, 2.8vw, 1.02rem);
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(26, 42, 52, 0.14);
  transition: transform 0.1s, box-shadow 0.1s, filter 0.15s;
}
.cg-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 6px rgba(26, 42, 52, 0.14);
}
.cg-btn-primary {
  background: linear-gradient(135deg, var(--cg-primary) 0%, var(--cg-primary-h) 100%);
}
.cg-btn-primary:hover {
  filter: brightness(1.06);
}
.cg-btn-secondary {
  background: linear-gradient(135deg, #7d8c93 0%, #64737a 100%);
}
.cg-btn-secondary:hover {
  filter: brightness(1.06);
}
.cg-btn-line {
  background: linear-gradient(135deg, var(--cg-line) 0%, #3f6b61 100%);
}
.cg-btn-line:hover {
  filter: brightness(1.06);
}
.cg-btn-tel {
  background: linear-gradient(135deg, var(--cg-red) 0%, #865144 100%);
}
.cg-btn-tel:hover {
  filter: brightness(1.06);
}

/* パルスアニメ */
@keyframes cg-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(53, 95, 115, 0.34); }
  50%     { box-shadow: 0 0 0 10px rgba(53, 95, 115, 0); }
}
.cg-pulse {
  animation: cg-pulse 1.8s infinite;
}

/* ---------- HUD ---------- */
.cg-top-bar {
  position: absolute;
  top: 10px;
  left: 12px;
  pointer-events: none;
}
.cg-score,
.cg-time {
  font-size: clamp(1rem, 3.1vw, 1.35rem);
  font-weight: 700;
  text-shadow:
     2px  2px 0 rgba(255,255,255,0.92),
    -1px -1px 0 rgba(255,255,255,0.92),
     1px -1px 0 rgba(255,255,255,0.92),
    -1px  1px 0 rgba(255,255,255,0.92);
  line-height: 1.38;
}
.cg-score { color: var(--cg-primary); }
.cg-time  { color: var(--cg-red); }

/* ツールバー */
.cg-tools-bar {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.cg-tool-btn {
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid rgba(93, 107, 114, 0.28);
  border-radius: 12px;
  font-family: var(--cg-font);
  font-size: clamp(0.72rem, 2.1vw, 0.9rem);
  font-weight: 700;
  color: #4f5c63;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(26, 42, 52, 0.12);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.cg-tool-btn.cg-tool-active {
  border-color: var(--cg-primary);
  background: #edf4f6;
  color: var(--cg-primary);
}

/* ステージメッセージ */
.cg-stage-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(49, 66, 75, 0.88);
  color: #fff;
  padding: 16px 22px;
  border-radius: 14px;
  text-align: center;
  font-size: clamp(1rem, 3.4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.5;
  pointer-events: none;
  animation: cg-fadeout 3s forwards;
}
@keyframes cg-fadeout {
  0%,65% { opacity: 1; }
  100%   { opacity: 0; }
}

/* ---------- リザルト画面 ---------- */
.cg-result-title {
  font-size: clamp(1.35rem, 4.7vw, 2.1rem);
  color: var(--cg-primary);
  margin: 0;
  text-align: center;
}
.cg-result-score {
  font-size: clamp(1.2rem, 4vw, 1.9rem);
  font-weight: 700;
  color: #334047;
}
.cg-result-msg {
  font-size: clamp(0.82rem, 2.5vw, 1.02rem);
  font-weight: 700;
  text-align: center;
  padding: 0 12px;
  line-height: 1.58;
}

/* クーポン */
.cg-coupon {
  width: 90%;
  max-width: 320px;
}
.cg-coupon-inner {
  background: linear-gradient(135deg, #d5ad59 0%, #b9822f 100%);
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  text-align: center;
  font-size: clamp(0.82rem, 2.5vw, 1rem);
  border: 2px dashed rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 18px rgba(185, 130, 47, 0.26);
  animation: cg-popin 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
  line-height: 1.5;
}
.cg-coupon-title {
  display: block;
  font-size: clamp(1.05rem, 3.6vw, 1.55rem);
  margin: 5px 0 4px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.18);
}
.cg-coupon-note {
  display: block;
  font-size: 0.78em;
  opacity: 0.92;
}
@keyframes cg-popin {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* アクションボタン群 */
.cg-action-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 85%;
  max-width: 300px;
}

/* ---------- ユーティリティ ---------- */
.cg-hidden {
  display: none !important;
}


/* ---------- 768px以下: ビューポート基準で高さ確保 ---------- */
@media (max-width: 768px) {
  .cg-container {
    aspect-ratio: auto;
    padding-bottom: 0;
    height: clamp(680px, 82vh, 960px);
  }

  #cg-start-screen,
  #cg-result-screen {
    justify-content: space-evenly;
  }
}

/* ---------- タブレット以下 ---------- */
@media (max-width: 640px) {
  .cg-wrap {
    width: calc(100vw - (var(--cg-edge-gap) * 2));
    max-width: calc(100vw - (var(--cg-edge-gap) * 2));
    margin-left: calc(50% - 50vw + var(--cg-edge-gap));
    margin-right: calc(50% - 50vw + var(--cg-edge-gap));
  }

  .cg-container {
    height: max(720px, 84vh);
    min-height: 720px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(26, 42, 52, 0.12);
  }

  .cg-screen {
    padding: 12px 12px 14px;
    gap: 8px;
  }

  #cg-start-screen,
  #cg-result-screen {
    justify-content: space-evenly;
  }

  #cg-start-screen {
    padding-top: 52px;
    padding-bottom: 18px;
  }

  .cg-how {
    gap: 8px;
    flex-wrap: wrap;
  }

  .cg-how-item {
    flex: 1 1 calc(50% - 4px);
    min-width: 132px;
    padding: 8px 10px;
  }

  .cg-top-bar {
    top: 8px;
    left: 9px;
  }

  .cg-tools-bar {
    bottom: 10px;
    width: calc(100% - 20px);
    justify-content: center;
    gap: 6px;
  }

  .cg-tool-btn {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    padding: 8px 10px;
  }

  .cg-stage-msg {
    width: calc(100% - 22px);
    padding: 14px 16px;
  }

  .cg-action-btns {
    width: 100%;
    max-width: none;
  }
}

/* ---------- スマホ ---------- */
@media (max-width: 480px) {
  .cg-wrap {
    --cg-edge-gap: 8px;
  }

  .cg-container {
    height: max(780px, 88vh);
    min-height: 780px;
    border-radius: 12px;
  }

  .cg-screen {
    padding: 10px 10px 14px;
    gap: 7px;
  }

  .cg-mute-btn {
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
  }

  .cg-start-logo {
    padding: 5px 12px;
  }

  .cg-title {
    font-size: clamp(1.06rem, 5.9vw, 1.4rem);
  }

  .cg-title-sub {
    margin-top: 2px;
  }

  .cg-lead {
    font-size: clamp(0.78rem, 3.8vw, 0.92rem);
    line-height: 1.46;
  }

  .cg-how-item {
    font-size: clamp(0.68rem, 3.25vw, 0.82rem);
    line-height: 1.42;
  }

  .cg-btn {
    padding: 11px 16px;
    font-size: clamp(0.82rem, 3.8vw, 0.95rem);
  }

  .cg-score,
  .cg-time {
    font-size: clamp(0.9rem, 3.8vw, 1.05rem);
  }

  .cg-tool-btn {
    font-size: clamp(0.66rem, 3.1vw, 0.8rem);
  }

  .cg-stage-msg {
    font-size: clamp(0.92rem, 4vw, 1.08rem);
    line-height: 1.45;
  }

  .cg-result-msg {
    padding: 0 4px;
  }
}

/* ---------- 極小スマホ ---------- */
@media (max-width: 360px) {
  .cg-container {
    height: max(840px, 92vh);
    min-height: 840px;
  }

  .cg-screen {
    padding: 8px 8px 12px;
    gap: 6px;
  }

  .cg-start-logo {
    font-size: clamp(0.96rem, 4.6vw, 1.06rem);
    padding: 4px 10px;
  }

  .cg-title {
    font-size: clamp(0.98rem, 6.2vw, 1.15rem);
  }

  .cg-lead {
    font-size: clamp(0.74rem, 3.8vw, 0.82rem);
  }

  .cg-how {
    gap: 6px;
  }

  .cg-how-item {
    min-width: 0;
    padding: 7px 8px;
  }

  .cg-btn {
    padding: 10px 14px;
  }

  .cg-tools-bar {
    bottom: 8px;
    width: calc(100% - 16px);
  }

  .cg-tool-btn {
    padding: 7px 8px;
  }
}