/* ===============================
   基本設定（全要素に適用）
   =============================== */

/* paddingやborderを含めてサイズ計算する設定
   レイアウト崩れ防止の超重要設定 */
* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /*タブレット連打時の拡大防止 */
}

html {
  margin: 0;
  height: 100%;
}

body {
  margin: 0;
  height: 100vh;          /* 画面の高さを使う */

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  background: #f2f2f2;

  display: flex;          /* 中央配置 */
  justify-content: center;
  align-items: center;
}

/* ===============================
   外枠（ゲーム全体）
   高さ540px固定レイアウト
   =============================== */

.container {
  margin: 0 auto;
  max-width: 1196px;
  width: 100%;
  height: 540px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 26px;
  background: linear-gradient(160deg, #fff9e6, #fef1ff);
  box-shadow: 0 12px 0 rgba(0,0,0,.12), 0 20px 40px rgba(0,0,0,.2);
}


/* ===============================
   ヘッダー（高さ固定）
   =============================== */

.game-header {
  position: relative;
  z-index: 80;
  height: 50px;
  padding: 5px 16px;
  flex: 0 0 50px;
  display: flex;
  align-items: center;
}



/* ===============================
   情報表示エリア
   =============================== */

.info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
  width: 100%;
  font-weight: 900;
}

.header-level { color: #ff6b5b; font-size: 16px; padding: 6px 11px; border-radius: 16px; background: rgba(255,255,255,.78); white-space: nowrap; }
.header-level span { font-size: 18px; }
.header-score { color: #7a5cff; font-size: 19px; padding: 5px 13px; border-radius: 16px; background: rgba(255,255,255,.78); }
.header-title { position: absolute; left: 50%; transform: translateX(-50%); color: #ff5f9e; font-size: 23px; white-space: nowrap; }
.header-actions { display: flex; gap: 9px; margin-left: auto; }
.header-btn { height: 38px; border: 0; border-radius: 14px; color: #fff; font-size: 17px; font-weight: 900; cursor: pointer; }
.quit-btn { padding: 0 18px; background: linear-gradient(145deg,#ff8f8f,#ff5a5a); box-shadow: 0 4px 0 #cc3e3e; }
.sound-btn { min-width: 82px; padding: 0 12px; background: linear-gradient(145deg,#7fc4ff,#4a9dff); box-shadow: 0 4px 0 #2a7fc9; }
.sound-btn.off { background: linear-gradient(145deg,#aaa,#777); box-shadow: 0 4px 0 #555; }
/* トップ画面の音声ボタンを右上に表示する */
.start-sound-btn { position: absolute; top: 14px; right: 16px; z-index: 5; }


/* ===============================
   メインゲームエリア
   残り高さすべて使う
   =============================== */

.game-main {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
}


/* 画面の表示・非表示を切り替える共通クラス */
.hidden { display: none !important; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 20px; }
.floaty { position: absolute; border-radius: 50%; opacity: .5; pointer-events: none; animation: float-up 8s ease-in-out infinite; }
.floaty-one { width: 60px; height: 60px; background: #ffb3d9; top: 20px; left: 40px; }
.floaty-two { width: 40px; height: 40px; background: #b3e0ff; top: 80px; right: 60px; animation-delay: 1.5s; }
.floaty-three { width: 50px; height: 50px; background: #fff2a8; bottom: 30px; left: 80px; animation-delay: .8s; }
.floaty-four { width: 35px; height: 35px; background: #c8ffcf; bottom: 60px; right: 100px; animation-delay: 2.2s; }
@keyframes float-up { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-25px) scale(1.08); } }

.start-screen h1 { margin: 0 0 5px; color: #ff5f9e; font-size: 50px; letter-spacing: 4px; text-shadow: 3px 3px #fff,-2px -2px #fff,4px 6px 8px rgba(0,0,0,.15); }
.subtitle { margin: 0 0 17px; color: #7a5cff; font-size: 21px; font-weight: 900; }
.level-select { display: flex; gap: 20px; margin-bottom: 22px; }
.level-btn { width: 180px; height: 100px; border: 0; border-radius: 24px; color: #fff; font-size: 25px; font-weight: 900; cursor: pointer; box-shadow: 0 7px 0 rgba(0,0,0,.18); }
.level-btn[data-level="easy"] { background: linear-gradient(145deg,#7ee08b,#4bc46a); }
.level-btn[data-level="normal"] { background: linear-gradient(145deg,#7fc4ff,#4a9dff); }
.level-btn[data-level="hard"] { background: linear-gradient(145deg,#ff9a7f,#ff6b5b); }
.level-btn.selected { outline: 6px solid #fff566; transform: scale(1.05); }
.lv-face { display: block; margin-bottom: 2px; font-size: 37px; }
.start-btn { width: 250px; height: 72px; border: 0; border-radius: 38px; color: #fff; background: linear-gradient(145deg,#ffcd4b,#ffab00); box-shadow: 0 7px 0 #d68a00; font-size: 28px; font-weight: 900; cursor: pointer; }
.start-btn:disabled { opacity: .45; }

.game-screen { justify-content: flex-start; padding-top: 26px; }
.question-dots { z-index: 3; display: flex; gap: 12px; height: 27px; margin-bottom: 18px; align-items: center; }
.question-dot { width: 18px; height: 18px; border: 3px solid #a99bff; border-radius: 50%; background: #fff; transition: .25s; }
.question-dot.done { background: #55d878; border-color: #2fbf60; }
.question-dot.current { background: #fff566; border-color: #ffb300; transform: scale(1.24); }
.goal-banner { color: #ff5f9e; font-size: 20px; font-weight: 900; }
.goal-banner span { color: #ff2f7c; font-size: 29px; }
.progress-display { display: flex; gap: 22px; margin-top: 5px; }
.progress-item { min-width: 145px; padding: 5px 18px; border-radius: 17px; background: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.1); color: #555; text-align: center; font-size: 19px; font-weight: 900; }
.progress-item span { margin-left: 5px; font-size: 28px; }
.now span { color: #ff2f7c; } .remain span { color: #3f9dff; }
.slots-area { display: flex; gap: 32px; margin-top: 26px; align-items: flex-start; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.slot-window { position: relative; width: 140px; height: 140px; overflow: hidden; border-radius: 24px; box-shadow: inset 0 0 0 6px rgba(255,255,255,.5),0 7px 0 rgba(0,0,0,.15); }
.slot0 .slot-window { background: linear-gradient(145deg,#ff9fc0,#ff5f9e); }
.slot1 .slot-window { background: linear-gradient(145deg,#8fd7ff,#3fa9f5); }
.slot2 .slot-window { background: linear-gradient(145deg,#ffe08f,#ffb300); }
.slot-window::before,.slot-window::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; height: 40%; pointer-events: none; }
.slot-window::before { top: 0; background: linear-gradient(to bottom,rgba(255,255,255,.55),transparent); }
.slot-window::after { bottom: 0; background: linear-gradient(to top,rgba(0,0,0,.28),transparent); }
.reel { position: absolute; left: 0; width: 100%; will-change: transform; }
.reel-cell { width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 72px; font-weight: 900; }
.slot-window.is-spinning .reel { filter: blur(1.5px); }
.slot-window.locked { box-shadow: inset 0 0 0 6px #fff566,0 7px 0 rgba(0,0,0,.15); }
.slot-window.locked-pop { animation: locked-pop .3s ease; }
@keyframes locked-pop { 40% { transform: scale(1.1); } }
.stop-btn { width: 140px; height: 61px; border: 0; border-radius: 19px; color: #fff; background: linear-gradient(145deg,#6de08a,#2fbf60); box-shadow: 0 7px 0 #1f9448; font-size: 23px; font-weight: 900; cursor: pointer; }
.stop-btn:disabled { opacity: .48; background: linear-gradient(145deg,#ccc,#999); box-shadow: 0 7px 0 #777; }

.result-overlay { position: absolute; z-index: 50; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.18); }
.result-card { min-width: 390px; padding: 22px 60px 26px; border-radius: 32px; background: #fff; text-align: center; box-shadow: 0 14px 0 rgba(0,0,0,.18),0 20px 40px rgba(0,0,0,.25); animation: card-pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes card-pop { 0% { transform: scale(.2) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.15) rotate(2deg); } }
.result-emoji { font-size: 64px; line-height: 1; }
.result-main { font-size: 42px; font-weight: 900; }
.result-sub { margin-top: 5px; color: #888; font-size: 22px; font-weight: 900; }
.result-hint { display: inline-block; margin-top: 8px; padding: 5px 20px; border-radius: 17px; font-size: 27px; font-weight: 900; }
.result-hint span { font-size: 34px; }
.result-hint.over { color: #ff8a3d; background: #fff0e0; } .result-hint.under { color: #3f9dff; background: #e6f2ff; }
.result-overlay.ok .result-main { color: #2fbf60; } .result-overlay.ng .result-main { color: #ff5a5a; }
.end-screen h2 { margin: 0 0 10px; color: #ff5f9e; font-size: 44px; }
.stars { margin-bottom: 8px; font-size: 56px; }
.final-score { margin-bottom: 27px; color: #555; font-size: 29px; font-weight: 900; }
.final-score span { color: #ff2f7c; font-size: 42px; }
.end-buttons { display: flex; gap: 22px; }
.end-buttons button { width: 220px; height: 78px; border: 0; border-radius: 23px; color: #fff; font-size: 24px; font-weight: 900; cursor: pointer; }
#retryBtn { background: linear-gradient(145deg,#ffcd4b,#ffab00); box-shadow: 0 7px 0 #d68a00; }
#backBtn { background: linear-gradient(145deg,#8fd7ff,#3fa9f5); box-shadow: 0 7px 0 #2a7fc9; }
button:active { transform: translateY(4px); }

@media (max-width: 700px) {
  .container { border-radius: 0; }
  .start-screen h1 { font-size: 34px; }
  .level-select { gap: 8px; }
  .level-btn { width: 29vw; max-width: 150px; height: 96px; font-size: 19px; }
  .slots-area { gap: 10px; }
  .slot-window,.reel-cell { width: 105px; }
  .stop-btn { width: 105px; }
  .header-title { font-size: 17px; }
  .header-level { font-size: 13px; padding: 5px 7px; }
  .header-level span { font-size: 15px; }
  .header-score { font-size: 15px; padding: 5px 8px; }
  .header-btn { font-size: 14px; }
  .quit-btn { padding: 0 9px; }
  .sound-btn { min-width: 60px; padding: 0 5px; }
}