/* Zıpkın: Volkana Yolculuk — ortak sayfa kabuğu korunur; oyun dünyası kendi canvas'ında çizilir. */
body[data-game='platform-macera'] { --frame: #09152d; --title: #ff7a2f; --title-shadow: #8f2d0c; --accent: #43d4ff; --accent-deep: #273fa0; --accent-soft: #e1f7ff; }

/* Başlığın altındaki "Volkana Yolculuk" satırı */
body[data-game='platform-macera'] .title-art .title-sub { display: block; margin-top: 6px; color: #10183a; font-size: .34em; letter-spacing: .02em; text-shadow: none; }
@media (max-width: 760px) { body[data-game='platform-macera'] .title-art .title-sub { font-size: .38em; } }

.play-panel {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid rgb(137 173 245 / .35);
  background: radial-gradient(ellipse at 50% -24%, rgb(65 114 211 / .32), transparent 58%), linear-gradient(145deg, #10264b 0%, #08152d 76%);
  box-shadow: 0 22px 54px rgb(15 31 74 / .32), inset 0 1px 0 rgb(255 255 255 / .08);
}
.play-panel .play-panel-labels strong { color: #f5f8ff; letter-spacing: .025em; }
.play-panel .play-panel-labels span { border-color: rgb(76 234 177 / .32); background: rgb(38 217 154 / .12); color: #6df0b4; }
.play-panel .actions { flex-wrap: wrap; justify-content: flex-end; }
.play-panel .actions .play-button { min-height: 44px; padding-inline: 14px; font-size: 16px; }
.play-panel .actions .play-new { border: 1px solid #ffdf69; background: linear-gradient(135deg, #ffe36f, #ffb936); color: #101f49; box-shadow: 0 5px 18px rgb(255 192 56 / .24); }
.play-panel .actions .play-undo { border-color: rgb(197 216 255 / .34); background: linear-gradient(145deg, #f9fbff, #dce8ff); color: #16336f; }
.play-panel-footer .score-card > strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.play-panel-footer .status { color: #9eafd0; font-size: 13px; }

.board-frame { display: grid; gap: 10px; padding: 10px; border: 1px solid rgb(155 190 255 / .12); border-radius: 20px; background: linear-gradient(145deg, rgb(118 157 224 / .1), rgb(31 53 99 / .2)); }
.game-stage { position: relative; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid rgb(140 190 255 / .35); border-radius: 14px; background: #09152d; box-shadow: 0 10px 28px rgb(0 0 0 / .3); }
.game-stage[hidden] { display: none; }
.game-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.game-stage .game-overlay { z-index: 3; background: rgb(4 9 22 / .55); backdrop-filter: blur(3px); }
.game-stage .game-overlay { padding: 10px; border-radius: 0; container-type: size; }
.game-stage .overlay-card { width: min(100%, 420px); max-height: 100%; overflow: auto; animation: card-in .28s cubic-bezier(.2, 1.4, .4, 1); }
.game-stage .overlay-card > p#overlay-copy { margin-bottom: 14px; font-size: 15px; }
.game-stage .overlay-actions { flex-wrap: wrap; justify-content: center; }
.game-stage .overlay-card > .overlay-stars { display: flex; justify-content: center; gap: 6px; margin: 2px 0 4px; font: 700 42px / 1 'Fredoka', sans-serif; }
.overlay-stars span { color: rgb(160 170 200 / .35); transform: scale(.6); animation: star-pop .4s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.overlay-stars span:nth-child(2) { animation-delay: .12s; }
.overlay-stars span:nth-child(3) { animation-delay: .24s; }
.overlay-stars span.on { color: #ffd84a; text-shadow: 0 0 18px rgb(255 216 74 / .55); }
.overlay-settings { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.overlay-settings[hidden] { display: none; }
.overlay-settings button { min-height: 36px; padding: 6px 12px; border: 1px solid rgb(22 51 111 / .2); border-radius: 10px; background: rgb(22 51 111 / .06); color: #16336f; font-weight: 700; cursor: pointer; }
.overlay-settings button[aria-pressed='true'] { border-color: #2a9bd8; background: #dff4ff; }
@container (max-height: 360px) {
  .game-stage .overlay-card { padding: 12px 16px; }
  .game-stage .overlay-card h2 { margin-bottom: 2px; font-size: 22px; }
  .game-stage .overlay-card > .overlay-stars { margin: 0; font-size: 30px; }
  .game-stage .overlay-card > p#overlay-copy { margin-bottom: 8px; font-size: 13px; line-height: 1.35; }
  .game-stage .overlay-actions .play-button { min-height: 38px; padding: 6px 12px; font-size: 14px; }
  .overlay-settings { margin-top: 8px; }
}
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes star-pop { to { transform: scale(1); } }

.level-map { display: grid; gap: 12px; min-height: 280px; padding: clamp(12px, 2vw, 22px); border: 1px solid rgb(139 176 248 / .22); border-radius: 16px; background: radial-gradient(ellipse at 90% 0%, rgb(59 99 187 / .3), transparent 45%), linear-gradient(145deg, #10264b, #09152d); color: #fff; }
.level-map[hidden] { display: none; }
.map-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.map-heading h2 { color: #fff; font: 700 clamp(20px, 3vw, 28px) / 1.1 'Fredoka', sans-serif; }
.map-heading .overlay-kicker { margin-bottom: 3px; color: #fecf40; font-size: 11px; }
.map-story { max-width: 46ch; margin-top: 6px; color: rgb(255 255 255 / .8); font-size: 14px; line-height: 1.45; }
.map-total { color: #ffd84a; font: 700 20px 'Fredoka', sans-serif; white-space: nowrap; }
.world-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.world-tabs button { min-height: 40px; padding: 7px 14px; border: 1px solid rgb(168 197 255 / .2); border-radius: 12px; background: linear-gradient(145deg, rgb(97 127 190 / .2), rgb(30 50 94 / .3)); color: #eef4ff; font-weight: 700; cursor: pointer; transition: border-color .18s, transform .18s; }
.world-tabs button:hover:not(:disabled) { border-color: rgb(106 222 255 / .7); transform: translateY(-1px); }
.world-tabs button:disabled { opacity: .4; cursor: not-allowed; }
.world-tabs button[aria-selected='true'] { border-color: #62e5ff; background: linear-gradient(135deg, #69e6ff, #6c9eff); color: #10234b; }
.world-description { color: rgb(255 255 255 / .82); font-size: 14px; }
.level-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.level-choice { display: grid; gap: 2px; min-height: 64px; place-items: center; align-content: center; border: 1px solid rgb(166 195 255 / .25); border-radius: 14px; background: linear-gradient(145deg, rgb(92 122 183 / .3), rgb(30 51 95 / .5)); color: #f5f8ff; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.level-choice b { font: 700 20px / 1 'Fredoka', sans-serif; }
.level-choice small { display: flex; gap: 1px; min-height: 15px; font-size: 13px; }
.level-choice small i { color: rgb(255 255 255 / .22); font-style: normal; }
.level-choice small i.on { color: #ffd84a; }
.level-choice:not(:disabled):hover { transform: translateY(-2px); border-color: #7deaff; box-shadow: 0 8px 20px rgb(55 147 255 / .18); }
.level-choice[aria-pressed='true'] { border-color: #ffe27b; background: linear-gradient(145deg, #ffe879, #ffb84b); color: #142450; box-shadow: 0 0 0 2px rgb(255 218 96 / .2), 0 7px 18px rgb(255 177 64 / .16); }
.level-choice[aria-pressed='true'] small i { color: rgb(20 36 80 / .25); }
.level-choice[aria-pressed='true'] small i.on { color: #7a4a00; }
.level-choice:disabled { opacity: .42; cursor: not-allowed; }
.level-selection { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid rgb(255 255 255 / .18); }
.level-selection p { color: rgb(255 255 255 / .86); font-size: 14px; }
.level-selection .play-button { min-width: 120px; }

/* Dokunmatik kontroller: solda yön çubuğu, sağda Dash + Zıpla */
.touch-pad { display: none; align-items: center; justify-content: space-between; gap: 12px; user-select: none; -webkit-user-select: none; }
.board-frame:has(.game-stage[hidden]) .touch-pad { display: none !important; }
.touch-stick { position: relative; display: grid; width: 118px; height: 118px; flex: none; place-items: center; border: 1px solid rgb(166 198 255 / .3); border-radius: 50%; background: radial-gradient(circle, rgb(106 141 204 / .28), rgb(20 36 72 / .5)); touch-action: none; }
.touch-stick::before { position: absolute; inset: 10px; border: 1px dashed rgb(166 198 255 / .18); border-radius: 50%; content: ''; }
.stick-knob { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(145deg, #eaf3ff, #9fb7e6); box-shadow: 0 4px 12px rgb(0 0 0 / .35); transition: transform .06s; pointer-events: none; }
.touch-stick.active .stick-knob { transition: none; background: linear-gradient(145deg, #ffffff, #7fe0ff); }
.touch-buttons { display: flex; align-items: flex-end; gap: 12px; }
.touch-buttons button { display: grid; width: 78px; height: 78px; place-items: center; border: 1px solid rgb(166 198 255 / .3); border-radius: 50%; color: #fff; font: 700 16px 'Fredoka', sans-serif; box-shadow: inset 0 1px 0 rgb(255 255 255 / .15), 0 6px 14px rgb(0 0 0 / .3); touch-action: none; -webkit-touch-callout: none; }
.touch-buttons [data-action='jump'] { width: 88px; height: 88px; background: linear-gradient(145deg, #4fd9ff, #2a7de0); }
.touch-buttons [data-action='dash'] { margin-bottom: 26px; background: linear-gradient(145deg, #b69bff, #6a4de0); }
.touch-buttons button.pressed { transform: scale(.92); filter: brightness(1.2); }

@media (pointer: coarse) {
  .touch-pad { display: flex; }
  body[data-game='platform-macera'] { -webkit-tap-highlight-color: transparent; }
}
@media (max-width: 760px) {
  .play-panel .actions .play-button { flex: 1; min-width: 0; white-space: normal; }
  .level-choice { min-height: 56px; }
  .level-selection { align-items: stretch; flex-direction: column; }
}
@media (max-width: 420px) {
  .level-grid { gap: 6px; }
  .world-tabs button { flex: 1; padding-inline: 7px; font-size: 12px; }
  .touch-stick { width: 104px; height: 104px; }
  .touch-buttons button { width: 70px; height: 70px; }
  .touch-buttons [data-action='jump'] { width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-stage .overlay-card, .overlay-stars span { animation: none; transform: none; }
}

/* Tam ekran (game-shell.js ortak sistemi): oyun alanı çerçeve genişliğini doldurur; dokunmatik cihazda yatay
   ekranda kontroller oyun alanının üstüne biner, dikey ekranda altında kalır. */
.play-panel.is-fullscreen .board-frame { padding: 0; border: 0; background: none; }
.play-panel.is-fullscreen .level-map { max-height: calc(100dvh - 130px); overflow: auto; }
@media (pointer: coarse) and (orientation: landscape) {
  .play-panel.is-fullscreen .board-frame { position: relative; }
  .play-panel.is-fullscreen .touch-pad { position: absolute; z-index: 2; right: 10px; bottom: 10px; left: 10px; pointer-events: none; }
  .play-panel.is-fullscreen .touch-pad > * { pointer-events: auto; opacity: .72; }
}