/* css/modes/capsize.css — capsize recovery mini-game (dom mode) */
.capsize-root { position: absolute; inset: 0; overflow: hidden; background: #2b4d7a; }
.capsize-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }
.capsize-top { position: absolute; z-index: 5; top: calc(var(--safe-t) + 10px); left: calc(var(--safe-l) + 12px); right: calc(var(--safe-r) + 70px); display: flex; gap: 8px; align-items: center; pointer-events: none; }
.capsize-title { flex: 0 1 auto; max-width: 560px; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 16px;
  background: rgba(13, 19, 33, .62); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.capsize-title > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.capsize-title b { font-size: 1.05rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capsize-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #3a1d0b; background: linear-gradient(180deg, var(--primary-hi), var(--primary-2)); }
.capsize-ico .ico { width: 26px; height: 26px; }
.capsize-steps { display: flex; gap: 4px; }
.capsize-steps i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 900; background: rgba(255,255,255,.12); color: var(--text-dim); transition: transform .3s var(--ease-pop), background .3s; }
.capsize-steps i.cur { background: var(--primary); color: #3a1d0b; transform: scale(1.18); }
.capsize-steps i.done { background: var(--good); color: #05341c; }
.capsize-stats { display: flex; gap: 6px; margin-left: auto; }
.capsize-stat { display: flex; flex-direction: column; line-height: 1.05; padding: 6px 12px; border-radius: 14px; background: rgba(13, 19, 33, .62); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.capsize-stat span { font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.capsize-stat b { font-size: 1.1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cp-stat-m b { color: #ffb3bb; }
.capsize-stat.bump { animation: cpBump .45s var(--ease-pop); }
@keyframes cpBump { 40% { transform: scale(1.15); background: rgba(255, 77, 94, .35); } }

.capsize-panel {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 12px); width: min(calc(100% - 24px), 560px);
  display: flex; flex-direction: column; gap: 10px; align-items: stretch; padding: 12px 14px 14px; border-radius: 20px;
  background: rgba(13, 19, 33, .72); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow);
}
.capsize-text { font-weight: 900; font-size: 1.05rem; line-height: 1.25; text-align: center; }
.capsize-text.pop { animation: cpTxt .45s var(--ease-pop); }
@keyframes cpTxt { from { transform: translateY(6px); opacity: 0; } }
.capsize-meter { display: flex; justify-content: center; min-height: 0; }
.capsize-meter:empty { display: none; }
.capsize-meter .stars { display: flex; gap: 8px; }
.capsize-meter .stars svg { width: 46px; height: 46px; }
.capsize-btn { min-height: 64px; font-size: 1.3rem; border-radius: 20px; gap: 10px; touch-action: none; user-select: none; -webkit-user-select: none; }
.capsize-btn .cp-btn-ico .ico { width: 28px; height: 28px; }
.capsize-btn.is-hold { background: linear-gradient(180deg, #8ff0c0, #2fcf83); box-shadow: 0 6px 0 #138150, 0 10px 22px rgba(62,224,143,.35), inset 0 2px 0 rgba(255,255,255,.4); color: #05341c; }
.capsize-btn.is-hold.pressed { transform: translateY(4px); box-shadow: 0 2px 0 #138150, inset 0 2px 0 rgba(255,255,255,.4); }

/* meters */
.cp-mash { display: flex; gap: 6px; width: 100%; }
.cp-mash i { flex: 1; height: 12px; border-radius: 6px; background: rgba(255,255,255,.12); transition: background .2s, transform .25s var(--ease-pop); }
.cp-mash i.on { background: linear-gradient(90deg, var(--primary-hi), var(--primary-2)); transform: scaleY(1.4); }
.cp-timing { position: relative; width: 100%; height: 26px; border-radius: 13px; background: linear-gradient(90deg, rgba(255,77,94,.35), rgba(255,255,255,.08) 30%, rgba(255,255,255,.08) 70%, rgba(255,77,94,.35)); overflow: hidden; }
.cp-zone { position: absolute; top: 0; bottom: 0; background: rgba(62,224,143,.55); box-shadow: inset 0 0 0 2px var(--good); border-radius: 10px; }
.cp-needle { position: absolute; top: -2px; bottom: -2px; width: 6px; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.9); }
.cp-lean { display: flex; align-items: center; gap: 12px; width: 100%; }
.cp-gauge { width: 130px; height: 72px; flex: none; }
.cp-gzone { animation: cpZone 1s ease-in-out infinite; }
@keyframes cpZone { 50% { opacity: .55; } }
.capsize-meter.in-zone .cp-gneedle { stroke: var(--good); }
.capsize-meter.in-zone .cp-gauge { filter: drop-shadow(0 0 8px rgba(62,224,143,.8)); }
.cp-leanbar { flex: 1; height: 14px; border-radius: 7px; background: rgba(255,255,255,.12); overflow: hidden; }
.cp-leanbar i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #8ff0c0, #2fcf83); }
.cp-water { display: flex; align-items: center; gap: 10px; width: 100%; font-weight: 800; font-size: .8rem; color: var(--text-dim); }
.cp-water div { flex: 1; height: 14px; border-radius: 7px; background: rgba(255,255,255,.12); overflow: hidden; }
.cp-water i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, #49c6f2, #2b6cb0); }

/* floating texts */
.capsize-floats { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.capsize-float { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-weight: 900; font-size: 1.3rem; text-shadow: 0 3px 0 rgba(0,0,0,.4); animation: cpFloat 1.1s ease-out both; }
.capsize-float-good { color: var(--good); }
.capsize-float-bad { color: #ff9aa6; }
.capsize-float-perfect { color: #ffd25e; font-size: 1.7rem; }
.capsize-float-splash { font-size: 2.2rem; color: #e9f8ff; -webkit-text-stroke: 2px #1f5d9a; text-shadow: 0 4px 0 #1f5d9a; letter-spacing: .04em; animation: cpSplash 1.2s var(--ease-pop) both; }
@keyframes cpFloat { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -70%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -180%); } }
@keyframes cpSplash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-12deg); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.25) rotate(4deg); } 70% { opacity: 1; transform: translate(-50%, -70%) scale(1) rotate(-3deg); } 100% { opacity: 0; transform: translate(-50%, -100%) scale(.9); } }

@media (max-width: 520px) {
  .capsize-top { right: calc(var(--safe-r) + 64px); flex-wrap: wrap; }
  .capsize-title { flex-basis: 100%; }
  .capsize-stat { padding: 4px 9px; }
  .capsize-text { font-size: .98rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .capsize-top { top: calc(var(--safe-t) + 6px); }
  .capsize-panel { left: auto; right: calc(var(--safe-r) + 12px); transform: none; width: min(46%, 400px); padding: 8px 10px 10px; gap: 6px; }
  .capsize-text { font-size: .9rem; }
  .capsize-btn { min-height: 52px; font-size: 1.1rem; }
}