* { box-sizing: border-box; }
@font-face { font-family: 'GameJP'; src: url('assets/fonts/GameJP-Regular.ttf') format('truetype'); font-display: swap; }
html, body { height: 100%; margin: 0; font-family: 'GameJP', system-ui, -apple-system, 'Noto Sans JP', sans-serif; background:#0b0d10; color:#e7eef7; }
/* 横方向はレターボックス許容（スケール時のはみ出しを抑制） */
body { overflow-x: hidden; }
body.mode-game { background: #0b0d10 url('assets/images/bg_game01.png') center / cover no-repeat fixed; }
[hidden] { display: none !important; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 12px; min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 20px; }
/* scale root: transformはJSで適用（原点：左上） */
#scaleRoot { transform-origin: top left; width: 1200px; max-width: 1200px; margin: 0; }
.hud { display:grid; grid-template-columns: 1fr auto; gap:8px; padding:8px; border:1px solid #18202a; border-radius:12px; background:#10151c; align-items:center; position:relative; }
.hud.fx { border-radius:12px; }
#timeHud, #comboHud { display:none; }
#scoreHud { font-size: clamp(18px, 4.6vw, 28px); font-weight:900; }
.stage-info { display:none; }
.btn-small { padding:6px 10px; font-size:12px; }
.hud { position: relative; }
.time-top { height: 32px; background:#0f1b2a; border:1px solid #203047; border-radius: 14px; overflow:hidden; box-shadow: inset 0 0 12px #000a; position:relative; z-index:2; }
#timeTopFill { height:100%; width:0%; background: #ffd54a; transition: width .1s linear, background .2s ease; box-shadow: 0 0 16px #ffd54a99 inset; border-radius: 14px; }
.time-top-text { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); font-weight:900; font-size: clamp(18px, 4.6vw, 28px); text-shadow: 0 2px 8px #000c, 0 0 10px #000a; pointer-events:none; line-height:1; z-index:6; color:#e7eef7; }
.time-top-text { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); font-weight:900; font-size: clamp(16px, 4.5vw, 22px); text-shadow: 0 2px 8px #000c; pointer-events:none; color:#e7eef7; z-index:3; }
.controls { display:flex; justify-content:center; align-items:center; padding:8px; }
.btn { padding:10px 14px; border-radius:12px; border:1px solid #2a3545; background:#162033; color:#e7eef7; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; text-align:center; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; filter: grayscale(0.3) brightness(0.9); }
.btn.btn-small { padding:6px 10px; font-size:12px; }
.btn.btn-large { padding:12px 18px; font-size:16px; }
.btn.alert { border-color:#ff4a4a; box-shadow: 0 0 0 1px #ff4a4a inset, 0 0 12px #ff4a4a44; }
.btn:active { transform: translateY(1px); }

/* Title toggles: improve readability */
.menu-row { display:flex; gap:14px; justify-content:center; }
.menu-row label { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background:#0b0d10; border:1px solid #223146; color:#e7eef7; box-shadow: inset 0 0 0 1px #0a121f; }
.menu-row input[type="checkbox"]{ accent-color:#4cf; width:18px; height:18px; }

.game-area { display:grid; grid-template-columns: 300px 1fr 120px; gap: 16px; align-items:start; position: relative; }
.frame { border:1px solid #223146; border-radius:12px; box-shadow: inset 0 0 0 1px #0a121f; padding-top: 80px; }
.fx { position:relative; }
.fx::before { content:""; position:absolute; inset:0; padding:2px; border-radius: inherit; pointer-events:none; opacity:.9; z-index:0;
  background:
    linear-gradient(90deg, transparent 45%, #4cf 50%, transparent 55%) top left / 200% 2px no-repeat,
    linear-gradient(90deg, transparent 45%, #4cf 50%, transparent 55%) bottom left / 200% 2px no-repeat,
    linear-gradient(0deg, transparent 45%, #4cf 50%, transparent 55%) top left / 2px 200% no-repeat,
    linear-gradient(0deg, transparent 45%, #4cf 50%, transparent 55%) top right / 2px 200% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sweep-edges 6s linear infinite;
}
@keyframes sweep-edges {
  0% { background-position: 0% 0, 200% 100%, 0 0%, 100% 200%; }
  100% { background-position: 200% 0, 0% 100%, 0 200%, 100% 0; }
}

.bg { position:absolute; inset:0; z-index:0; }

/* Customer UI */
.customer{ position:relative; align-self:end; justify-self:start; margin-left:12px; margin-top:12px; margin-bottom:0; display:grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap:8px; align-items:end; width: 100%; z-index:3; min-height: clamp(220px, 36vh, 360px); background: url('assets/images/bg_chara01.png') center / cover no-repeat; border:1px solid #223146; border-radius:12px; padding:6px; --scoreH: clamp(44px, 7.2vw, 68px); --stageH: clamp(28px, 5vw, 40px); --pad: 8px; }
.hidden{ opacity:0; pointer-events:none; }
.enter{ transform:translateX(-12%); opacity:0; }
.enter.active{ transform:translateX(0); opacity:1; transition:transform .25s ease, opacity .2s; }
.exit{ transform:translateX(12%); opacity:0; transition:transform .25s ease, opacity .2s; }
.customer__img{ grid-row:2; width: 100%; height:auto; min-height: 160px; background: transparent; border:none; border-radius:12px; display:block; object-fit: contain; }
.customer__img:not([src]), .customer__img[src=""]{ display:none; }
.customer__balloon{ position:absolute; left: 100%; top: 0; transform: translate(calc(-50% + var(--balloonShiftX, -150px)), var(--balloonShiftY, -150px)); width: clamp(180px, 20vw, 280px); height: clamp(130px, 15vw, 200px); background: url('assets/images/fukidashi01.png') center / contain no-repeat; border:none; padding:0; white-space:normal; word-break:break-word; line-height:1; z-index:6; display:grid; place-items:center; background-color: transparent; pointer-events:none; opacity: .82; }
.customer__balloon .balloon-items{ display:flex; align-items:center; justify-content:center; gap:12px; line-height:1; text-shadow:0 2px 8px #000c; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); text-align:center; font-size: clamp(32px, 6vw, 56px); transform: translateY(-12px); }
.customer__name{ grid-column:1; grid-row:3; align-self:end; justify-self:stretch; margin: 0 4px 6px 4px; padding: 4px 8px; background:#0f1520cc; border:1px solid #223146; border-radius:10px; font-weight:800; font-size: clamp(14px, 2.8vw, 18px); text-align:right; color:#e7eef7; z-index:5; }
/* score panel positioned absolutely within game-area (left column) */
.score-panel { position:absolute; left: 8px; right:8px; bottom: var(--pad); top:auto; height: var(--scoreH); display:flex; align-items:center; justify-content:flex-end; padding: 0 12px; background: #0f1520cc; border:1px solid #223146; border-radius: 12px; font-weight:900; font-size: clamp(36px, 8vw, 72px); color:#e7eef7; text-shadow: 0 4px 14px #000c; backdrop-filter: blur(4px); z-index:6; text-align:right; opacity:0; transition: opacity .15s ease; }
.stage-count { position:absolute; left: 8px; right:8px; bottom: calc(var(--pad) + var(--scoreH) + 8px); top:auto; height: var(--stageH); display:flex; align-items:center; justify-content:flex-end; padding: 0 10px; background:#0f1520cc; border:1px solid #223146; border-radius: 10px; font-weight:900; font-size: clamp(18px, 3.6vw, 28px); color:#e7eef7; text-align:right; opacity:0; z-index:6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gauges-top{ position:absolute; left:6px; right:6px; top:6px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:6px; align-items:center; z-index:4; pointer-events:none; padding:6px; border-radius:10px; background:#0b0d10; }
.gauge-slot{ flex:0 0 auto; }
.gauge{ min-width: 0; display:flex; align-items:center; gap:8px; justify-content:space-between; background: linear-gradient(90deg, #4cf, #2aaeff) left/var(--pct,0%) 100% no-repeat, #0f1520cc; border:1px solid #223146; border-radius:10px; padding:16px 12px; white-space:nowrap; backdrop-filter: blur(4px); pointer-events:auto; transition: background .2s ease, color .2s ease; color:#e7eef7; }
.gauge .bar{ display:none; }
.gauge .label{ overflow:visible; text-overflow:clip; white-space:nowrap; display:block; flex:1 1 auto; min-width: 6em; font-size: clamp(16px, 2.8vw, 22px); font-weight: 800; }
.gauge span:not(.label){ font-size: clamp(16px, 3vw, 24px); font-weight: 800; }
.gauge-full .label, .gauge-full { color:#000; }

/* fly to gauge effect */
.fly-to-gauge{ position:fixed; left:0; top:0; transform: translate(-50%, -50%); pointer-events:none; color:#aef; text-shadow:0 2px 18px #9ff, 0 0 16px #9ff; filter: drop-shadow(0 0 12px #9ff); transition: transform 1.2s cubic-bezier(.19,.89,.32,1.28), opacity 1.2s linear; font-size:26px; z-index:90; }
.char-bounce { animation: jump .6s ease-out 1; }
@keyframes jump { 0% { transform: translateY(0); } 20% { transform: translateY(-12px);} 60% { transform: translateY(-4px);} 100% { transform: translateY(0);} }


/* Time add label */
.time-add { position:fixed; left:0; top:0; transform: translate(-50%, -50%); font-weight:900; text-shadow:0 2px 10px #000; z-index:90; animation: timeadd .9s ease-out forwards; pointer-events:none; }
@keyframes timeadd { 0% { opacity:1; transform: translate(-50%, -50%) scale(1);} 100% { opacity:0; transform: translate(-50%, -80%) scale(1.1);} }
.board { position:relative; min-height: 600px; background: #0d1420 url('assets/images/bg_field01.png') center / cover no-repeat; }

/* Big side LOT CHANGE button */
.side-lot-btn{ grid-column:2; justify-self:stretch; align-self:start; width: 100%; border:2px solid #06122b; border-radius:18px; box-shadow: 0 0 18px #2a5cff44, inset 0 0 0 1px #06122b; cursor:pointer; position:relative; overflow:hidden; z-index: 3; background:#0e1522; }
.side-lot-btn::before{ content:""; position:absolute; inset:0; background: center / contain no-repeat url('assets/images/bg_lotchange02.png'); pointer-events:none; }
.side-lot-btn.cooldown,
.side-lot-btn.cooldown:hover{ filter:none !important; }
.side-lot-btn:hover{ filter: brightness(1.18) saturate(1.06); box-shadow: 0 0 30px #2a5cff88, inset 0 0 0 2px #06122b; }
.side-lot-btn.flash::after{ content:""; position:absolute; inset:-30%; background: radial-gradient(circle, #fff8, transparent 60%); animation: lotflash .35s ease-out 1 forwards; pointer-events:none; }
@keyframes lotflash { 0% { transform: scale(0.6); opacity:1;} 100% { transform: scale(1.5); opacity:0;} }
.side-lot-btn:active{ transform: translateY(4px); }
/* mobile tap responsiveness */
.side-lot-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Lighter effects on coarse pointers (mobile) */
@media (pointer: coarse) {
  .card { box-shadow: 0 3px 10px #0008; }
  .score-panel { backdrop-filter: none; }
  .gauge { backdrop-filter: none; box-shadow: none; }
  .side-lot-btn { box-shadow: 0 0 12px #2a5cff44, inset 0 0 0 1px #06122b; }
  .score-pop { text-shadow: 0 2px 10px #000c, 0 0 14px #ffd54a55; }
}
/* Time bar at bottom-left in board */
.card { position:absolute; width: clamp(72px, 14vw, 112px); aspect-ratio: 1 / 1; display:flex; align-items:center; justify-content:center; background:#121922; border:1px solid #1f2a3b; border-radius:14px; font-size: clamp(32px, 7vw, 60px); cursor:pointer; user-select:none; transition: transform .12s ease, background .15s ease, border-color .15s ease, opacity .25s ease; box-shadow: 0 6px 20px #0006; z-index:1; }
.card { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.card:active { filter: brightness(0.98); }
.card.selected { 
  outline: none; 
  background:#182841; 
  border-color:#2c4e82; 
  box-shadow: 0 0 0 3px #5aa9ffcc, 0 0 16px 4px #5aa9ff66, 0 0 36px 10px #5aa9ff33, 0 6px 20px #0006;
  animation: cardGlow 1.2s ease-in-out infinite alternate;
}
.card.selected::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:16px;
  pointer-events:none;
  box-shadow: 0 0 0 2px #9fd1ffcc, 0 0 18px #5aa9ffaa;
}
@keyframes cardGlow {
  0% { box-shadow: 0 0 0 3px #5aa9ffcc, 0 0 10px 2px #5aa9ff55, 0 0 24px 6px #5aa9ff22, 0 6px 20px #0006; }
  100% { box-shadow: 0 0 0 4px #5aa9ffff, 0 0 22px 6px #5aa9ff99, 0 0 44px 14px #5aa9ff44, 0 6px 20px #0006; }
}
@media (prefers-reduced-motion: reduce) {
  .card.selected { animation: none; }
}
.card.flash { animation: flash .15s linear 1; }
@keyframes flash { 0% { filter: brightness(1.6);} 100% { filter: brightness(1);} }
.card.vanish { animation: vanish .18s ease forwards; }
@keyframes vanish { 0% { transform: scale(1) rotate(var(--rot, 0deg)); opacity:1;} 100% { transform: scale(0.8) rotate(var(--rot, 0deg)); opacity:0;} }

/* Stronger match flash */
.burst { position: fixed; left:0; top:0; transform: translate(-50%,-50%); width: 14px; height:14px; background: radial-gradient(circle, #fff, #4cf6 40%, transparent 70%); filter: blur(0.5px); animation: burst .6s ease-out forwards; pointer-events:none; z-index: 90; }
@keyframes burst { 0% { transform: translate(-50%,-50%) scale(1); opacity:1;} 100% { transform: translate(-50%,-50%) scale(6.5); opacity:0;} }

/* Big score popup on match */
.score-pop { position: fixed; left:0; top:0; transform: translate(-50%,-50%); font-weight:900; color:#ffd54a; text-shadow: 0 3px 16px #000c, 0 0 24px #ffd54a55; font-size: clamp(24px, 6.5vw, 48px); z-index: 70; pointer-events:none; animation: scorePop .8s ease-out forwards; }
@keyframes scorePop { 0% { transform: translate(-50%,-50%) scale(0.9); opacity:0;} 20% { transform: translate(-50%,-50%) scale(1.15); opacity:1;} 100% { transform: translate(-50%,-50%) scale(1.0); opacity:0;} }
.score-clear-pop { position: fixed; transform: translate(-50%,-50%); font-weight:900; color: transparent; background: linear-gradient(90deg, #f66, #ff6, #6f6, #6ff, #66f, #f6f); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; text-shadow: 0 8px 28px #000c, 0 0 26px #ffffff33; font-size: clamp(64px, 14vw, 140px); letter-spacing:.04em; z-index: 80; pointer-events:none; animation: clearPopUp 1.4s ease-out forwards, hue 2.0s linear infinite; }
@keyframes clearPopUp { 0% { transform: translate(-50%,-40%) scale(0.9); opacity:0;} 20% { transform: translate(-50%,-50%) scale(1.1); opacity:1;} 100% { transform: translate(-50%,-70%) scale(1.0); opacity:0;} }
@keyframes hue { 0% { filter:hue-rotate(0deg);} 100% { filter:hue-rotate(360deg);} }

/* Stage clear big bonus popup */
.stage-bonus-pop { position: fixed; left:50%; top: 32%; transform: translate(-50%, -50%); font-weight:900; color:#ffd54a; text-shadow: 0 6px 26px #000c, 0 0 38px #ffd54a66; font-size: clamp(36px, 10vw, 72px); z-index: 80; pointer-events:none; animation: stageBonus .9s ease-out forwards; letter-spacing: .02em; }
@keyframes stageBonus { 0% { transform: translate(-50%,-50%) scale(0.9); opacity:0;} 25% { transform: translate(-50%,-50%) scale(1.12); opacity:1;} 100% { transform: translate(-50%,-50%) scale(1.0); opacity:0;} }

/* Match effects */
.spark { position:fixed; pointer-events:none; color:#fff; font-size:26px; opacity:0.98; text-shadow: 0 2px 22px currentColor, 0 0 14px currentColor; animation: spark-fall .95s cubic-bezier(.2,.8,.2,1) forwards; z-index: 90; }
@keyframes spark-fall { 0% { transform: translate(-50%, -50%) scale(0.9) rotate(0deg); opacity:1;} 40% { transform: translate(-50%, -40%) scale(1.2) rotate(10deg);} 100% { transform: translate(-50%, 10%) scale(1.0) rotate(-8deg); opacity:0; } }
.score-float { position: fixed; left:0; top:0; transform: translate(-50%, -50%); pointer-events:none; color:#bdf; font-weight:900; font-size: clamp(24px, 5.5vw, 40px); text-shadow: 0 3px 14px currentColor; animation: float-up-slow 1.8s ease-out forwards; z-index: 90; }
@keyframes float-up-slow { 0% { transform: translate(-50%, 30px) scale(1); opacity:1;} 100% { transform: translate(-50%, -60px) scale(1.08); opacity:0; } }
/* Fly chips */
.fly-chip { position: fixed; left:0; top:0; transform: translate(-50%, -50%); color:#fff6; text-shadow: 0 2px 8px #0cf8; transition: transform .6s ease, opacity .6s ease; pointer-events:none; z-index: 90; }

/* Combo meter */

.overlay { position:fixed; inset:0; background:#000a; display:grid; place-items:center; z-index: 20; }
.modal { background:#0f1520; border:1px solid #223146; border-radius:16px; padding:20px; width:min(90vw, 420px); text-align:center; transform: translateY(-6vh); }
.modal h2{ margin-top:0; }
.result { opacity:0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.modal.show-details .result { opacity:1; transform: translateY(0); }
.result p { margin:6px 0; opacity:.95; animation: resultPop .35s ease-out both; }

/* result emphasized score */
.result .score-big { font-size: clamp(32px, 8vw, 64px); font-weight:900; text-shadow: 0 4px 18px #000a; letter-spacing:.04em; }
.result .score-big #finalScore { font-size: 1.2em; color:#ffd54a; text-shadow: 0 4px 18px #000; }

/* Hide actions until details appear */
.modal .modal-actions { display:none !important; }
.modal.show-details .modal-actions { 
  display:flex !important; 
  flex-direction: column; 
  gap: 10px; 
  margin-top: 10px;
}
.modal .modal-actions .actions-top,
.modal .modal-actions .actions-bottom {
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap: wrap;
}
.modal .modal-actions .actions-bottom .btn {
  min-width: 160px;
}
@keyframes resultPop { 0% { transform: translateY(6px); opacity:0;} 100% { transform: translateY(0); opacity:1;} }

/* Title / Ranking overlays */
.screen { position:fixed; inset:0; display:grid; place-items:center; background:linear-gradient(180deg, #0b0d10, #0f1520); z-index: 10; }
#titleScreen.screen { background: #000 url('assets/images/bg_title01.png') center / cover no-repeat; }
.title-box { text-align:center; padding:24px; }
.title-logo { width: min(80vw, 520px); height: auto; display:block; margin: 0 auto 12px; filter: drop-shadow(0 6px 20px #0cf2); }
.subtitle { opacity:.8; margin:0 0 24px; }
.menu { display:flex; flex-direction:column; gap:12px; width: min(92vw, 560px); position: relative; z-index: 12; }
.screen .title-box { position:absolute; left:0; right:0; bottom:24px; display:flex; flex-direction:column; gap:16px; align-items:center; }
.menu .btn#menuStart { border-color:#ff4a4a; box-shadow: 0 0 0 2px #ff4a4a inset, 0 0 16px #ff4a4a66; font-size: clamp(18px, 5.5vw, 28px); padding:16px 22px; font-weight:900; }
.menu .btn { font-size: 18px; }
.menu-row { display:flex; gap:16px; justify-content:center; color:#cfe4ff; }
.title-float { position:absolute; top: clamp(24px, 7vh, 80px); left:50%; transform: translateX(-50%); z-index:11; pointer-events:none; }
.title-float img { display:block; width: min(70vw, 40vh, 520px); height:auto; filter: drop-shadow(0 8px 28px #000a); animation: floaty 3.6s ease-in-out infinite; }
@keyframes floaty { 0% { transform: translateY(0); } 50% { transform: translateY(-8px);} 100% { transform: translateY(0);} }

/* Countdown (within .frame) */
#countdown { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index: 50; }
.count-num { font-size: clamp(40px, 16vw, 120px); font-weight:900; text-shadow: 0 6px 0 #08101a, 0 10px 30px #4cf6; animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(0.6); opacity:0; } 50% { transform: scale(1.15); opacity:1; } 100% { transform: scale(1); opacity:1; } }

/* Touch to Start (first title gate) */
.touch-start { 
  position:fixed; 
  left:50%; 
  top:56%; 
  transform: translate(-50%, -50%); 
  font-weight:900; 
  font-size: clamp(20px, 6vw, 36px); 
  color:#e7eef7; 
  text-shadow: 0 6px 20px #000c, 0 0 16px #0cf6; 
  animation: blinkText 1.1s ease-in-out infinite; 
  pointer-events:none; 
  z-index:12; 
}
@keyframes blinkText { 
  0% { opacity:.25; } 
  50% { opacity:1; } 
  100% { opacity:.25; } 
}

 

/* Responsive tweaks */
@media (max-width: 420px) {
  .hud { grid-template-columns: repeat(2, 1fr); }
}