/* ===========================================================
   tema.css — SAHİBİ: CODEX
   Renk, tipografi, kart/HUD/buton görünümü.
   Kural: id ve class adlarını DEĞİŞTİRME (oyun.js onlara bağlı).
   =========================================================== */
  @font-face {
    font-family: "Boa Cizgi";
    src: url("./assets/boa-cizgi.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
  }
  :root {
    --bg: #050A12;
    --panel: #08131A;
    --ink: #0B0B0B;
    --paper: #E9E4D6;
    --white: #FFFDF4;
    --mint: #54FFB7;
    --mint-deep: #18D98D;
    --red: #FF4E70;
    --gold: #FFD84A;
    --glow-m: rgba(84, 255, 183, 0.42);
    --glow-r: rgba(255, 78, 112, 0.45);
    --glow-g: rgba(255, 216, 74, 0.42);
    --ivory: #F7E7BD;
    --honey: #F3BF55;
    --lavender: #9473CF;
    --olive: #7AB65B;
    --graphite: #272921;
    --aqua: #5CFAFF;
    --coral: #FF596D;
    --violet: #A37BFF;
    --world: #F3BF55;
    --world-soft: #F7E7BD;
    --world-deep: #7662A8;
    --display: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
    --mono: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pop: cubic-bezier(0.18, 0.85, 0.25, 1.18);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { background: var(--bg); color: var(--white); font-family: var(--sans); min-height: 100%; }
  body {
    min-height: 100dvh;
    overflow-x: hidden;
    background:
      radial-gradient(900px 560px at 50% -170px, rgba(92,250,255,0.14), transparent 66%),
      radial-gradient(760px 520px at 15% 90%, rgba(163,123,255,0.12), transparent 70%),
      var(--bg);
  }
  #stage {
    position: relative; max-width: 1180px; margin: 0 auto;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    min-height: 100vh; min-height: 100dvh;
  }
  body.game-active:not(.storybook) #stage { max-width: 640px; }
  body.game-active.storybook #stage {
    max-width: 560px;
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  body.game-active.storybook #game { width: 100%; max-width: 540px; margin: 0 auto; }

  .scr { display: none; position: relative; z-index: 1; }
  .scr.on { display: block; animation: scrIn 0.4s var(--pop); }
  .srOnly {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
  }
  @keyframes scrIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  .chip {
    display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 900;
    letter-spacing: 0.12em; padding: 5px 9px; border: 2px solid var(--mint);
    background: var(--panel); color: var(--mint);
  }
  .chip.mint { background: var(--mint); color: #06220B; box-shadow: 0 0 14px var(--glow-m); }
  .chip.gold { border-color: var(--gold); color: var(--gold); }
  .chip.dim { border-color: rgba(246, 243, 235, 0.35); color: rgba(246, 243, 235, 0.6); }
  .chip.act { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
  [role="button"]:focus-visible, a:focus-visible, #cv:focus-visible {
    outline: 3px solid var(--gold); outline-offset: 3px;
  }

  /* ---------- intro ---------- */
  #intro::before {
    content: ""; position: absolute; z-index: -1; inset: -10px 2% auto; height: 620px;
    border-radius: 50%; opacity: 0.34; pointer-events: none;
    background: radial-gradient(circle, rgba(243,191,85,0.36), rgba(142,108,255,0.16) 46%, transparent 72%);
    filter: blur(24px);
  }
  .introHero {
    position: relative; min-height: clamp(430px, 58vw, 640px); overflow: hidden;
    border-radius: 34px; background: #EFDDBA; border: 1px solid rgba(247,231,189,0.56);
    box-shadow: 0 28px 74px rgba(0,0,0,0.48), 0 0 42px rgba(74,245,210,0.12);
    isolation: isolate;
  }
  .introWorld {
    position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%;
    filter: saturate(1.14) contrast(1.07) brightness(1.02);
  }
  .introHero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(18,15,13,0.04) 30%, rgba(18,15,13,0.22) 65%, rgba(8,9,10,0.88) 100%);
  }
  .gameLockup {
    position: relative; width: min(430px, 90vw); margin: 4px auto 0; padding: 10px;
    animation: tileIn 0.55s var(--pop); filter: drop-shadow(0 18px 24px rgba(0,0,0,0.34));
  }
  .introHero .gameLockup { position: absolute; z-index: 2; top: 14px; left: 18px; width: min(360px, 42%); margin: 0; }
  .gameLockup::before {
    content: ""; position: absolute; inset: 5% -8% -3%; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, rgba(247,231,189,0.2), rgba(74,245,210,0.08) 46%, transparent 72%);
    filter: blur(8px);
  }
  .boaCrop {
    width: 100%; aspect-ratio: 1672 / 941; overflow: visible;
  }
  .boaCrop img {
    display: block; width: 100%; height: 100%; object-fit: contain;
    filter: saturate(1.06) contrast(1.01) drop-shadow(0 15px 15px rgba(22,16,11,0.34)) drop-shadow(0 0 8px rgba(74,245,210,0.2));
  }
  @keyframes tileIn { from { transform: rotate(-4deg) scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
  #intro h1 { text-align: center; font-size: 44px; font-weight: 900; letter-spacing: -0.02em; margin-top: 18px; line-height: 0.98; color: var(--white); }
  #intro h1 .u { color: var(--mint); text-shadow: 0 0 22px var(--glow-m); animation: neonFlick 1.7s var(--pop) 1; }
  @keyframes neonFlick {
    0%, 12%, 18%, 26% { opacity: 0.25; text-shadow: none; }
    8%, 15%, 22%, 100% { opacity: 1; text-shadow: 0 0 22px var(--glow-m); }
  }
  @media (prefers-reduced-motion: reduce) { #intro h1 .u { animation: none; } }
  .introHeroCopy { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 27px; max-width: 620px; }
  .introEyebrow { font-family: var(--mono); font-size: 10px; font-weight: 900; letter-spacing: 0.2em; color: var(--aqua); text-shadow: 0 0 14px rgba(74,245,210,0.34); }
  .introHeroCopy h2 { margin-top: 8px; font-family: var(--display); font-size: clamp(29px, 4vw, 48px); line-height: 1.02; letter-spacing: 0.015em; }
  .introSub { margin-top: 10px; font-size: 15px; max-width: 560px; line-height: 1.5; color: rgba(255,250,236,0.88); }
  .chooseTitle { margin: 28px auto 0; max-width: 1050px; text-align: center; }
  .chooseTitle span { font-family: var(--mono); color: var(--aqua); font-size: 10px; letter-spacing: 0.2em; }
  .chooseTitle h2 { margin-top: 6px; font-family: var(--display); font-size: clamp(25px, 3vw, 36px); letter-spacing: 0.02em; }

  .lvlWrap {
    position: relative; overflow: hidden; margin: 16px auto 0; max-width: 1050px; padding: 16px 18px 18px; text-align: center;
    border: 1px solid color-mix(in srgb, var(--world) 42%, transparent); border-radius: 22px;
    background:
      radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--world) 20%, transparent) 0 2px, transparent 3px),
      radial-gradient(circle at 84% 28%, rgba(255,255,255,.24) 0 1px, transparent 2px),
      radial-gradient(circle at 72% 78%, color-mix(in srgb, var(--world-soft) 22%, transparent) 0 1.5px, transparent 2.5px),
      linear-gradient(145deg, rgba(10,12,18,.96), color-mix(in srgb, var(--world-deep) 19%, #090B0A));
    box-shadow: inset 0 0 48px rgba(0,0,0,.24), 0 18px 42px rgba(0,0,0,.2);
  }
  .planetMapHead { display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: center; max-width: 660px; margin: 10px auto 12px; text-align: left; }
  .planetGlyph {
    position: relative; width: 72px; height: 72px; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, var(--world-soft), var(--world) 54%, var(--world-deep));
    box-shadow: inset -10px -12px 18px rgba(22,17,30,.27), 0 0 24px color-mix(in srgb, var(--world) 42%, transparent);
  }
  .planetGlyph::before { content: ""; position: absolute; inset: 29px -13px; border: 2px solid color-mix(in srgb, var(--world-soft) 72%, transparent); border-radius: 50%; transform: rotate(-14deg); }
  .planetGlyph::after { content: ""; position: absolute; width: 8px; height: 8px; left: 19px; top: 17px; border-radius: 50%; background: rgba(44,37,51,.18); box-shadow: 25px 23px 0 3px rgba(44,37,51,.12), 5px 36px 0 1px rgba(255,255,255,.18); }
  .planetMapCopy small { display: block; color: var(--world); font-family: var(--mono); font-size: 8.5px; font-weight: 900; letter-spacing: .17em; }
  .planetMapCopy strong { display: block; margin-top: 4px; color: #FFF9E9; font-family: var(--display); font-size: 21px; letter-spacing: .03em; }
  .planetMapCopy p { margin-top: 4px; max-width: 540px; color: rgba(255,249,233,.7); font-size: 11.5px; line-height: 1.45; }
  .lvlLab { font-family: var(--mono); font-size: 10px; font-weight: 900; letter-spacing: 0.16em; color: var(--mint); opacity: 0.85; }
  .lvlRow {
    position: relative; display: grid; grid-template-columns: repeat(10, 34px); gap: 12px 18px;
    justify-content: center; max-width: 660px; margin: 18px auto 2px; padding: 12px 6px;
  }
  .lvlRow::before {
    content: ""; position: absolute; inset: 27px 20px 24px; opacity: .3; pointer-events: none;
    background: repeating-linear-gradient(8deg, transparent 0 35px, color-mix(in srgb, var(--world) 50%, transparent) 36px 37px, transparent 38px 70px);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .lvlDot {
    position: relative; z-index: 1; width: 34px; height: 34px; border: 2px solid color-mix(in srgb, var(--dot, var(--world)) 36%, transparent); border-radius: 50%; background: #101310;
    font-family: var(--mono); font-size: 10px; font-weight: 900; color: rgba(246, 243, 235, 0.35);
    display: flex; align-items: center; justify-content: center; cursor: default; user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 0 0 3px rgba(7,8,8,.82), 0 0 15px color-mix(in srgb, var(--dot, var(--world)) 14%, transparent);
  }
  .lvlDot::after { content: ""; position: absolute; inset: -6px; border: 1px solid color-mix(in srgb, var(--dot, var(--world)) 28%, transparent); border-radius: 50%; transform: rotate(-18deg) scaleY(.42); }
  .lvlDot.open { border-color: var(--dot, var(--world)); color: var(--dot, var(--world)); cursor: pointer; }
  .lvlDot.cur { background: var(--dot, var(--world)); color: #08100B; box-shadow: 0 0 0 4px rgba(7,8,8,.9), 0 0 24px color-mix(in srgb, var(--dot, var(--world)) 62%, transparent); transform: scale(1.16); }
  .lvlDot:nth-child(10n + 2), .lvlDot:nth-child(10n + 7) { transform: translateY(6px); }
  .lvlDot.cur:nth-child(10n + 2), .lvlDot.cur:nth-child(10n + 7) { transform: translateY(6px) scale(1.16); }
  .mementoWrap {
    margin: 16px auto 0; max-width: 1050px; padding: 18px; text-align: left;
    border: 1px solid rgba(92,250,255,0.32); border-radius: 24px;
    background:
      radial-gradient(circle at 8% 0%, rgba(84,255,183,.13), transparent 32%),
      radial-gradient(circle at 94% 100%, rgba(163,123,255,.15), transparent 38%),
      linear-gradient(145deg, rgba(8,19,26,.98), rgba(10,9,23,.97));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 54px rgba(0,0,0,.3), 0 0 30px rgba(92,250,255,.07);
  }
  .mementoHead { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
  .mementoHead p { margin-top: 5px; color: rgba(238,247,242,.62); font-size: 11px; line-height: 1.45; }
  .mementoCount {
    flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(255,216,74,.46); border-radius: 999px;
    font-family: var(--mono); color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: 0.13em;
    background: rgba(255,216,74,.07); box-shadow: 0 0 18px rgba(255,216,74,.1);
  }
  .mementoVitrin {
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px;
    margin-top: 16px; max-height: 440px; overflow: auto; overscroll-behavior: contain;
    padding: 3px 4px 7px 3px; scrollbar-color: rgba(92,250,255,.45) transparent;
  }
  .mementoSlot {
    appearance: none; position: relative; aspect-ratio: 1; min-width: 0; overflow: hidden;
    border: 1px solid rgba(92,250,255,.25); border-radius: 15px; cursor: pointer;
    color: rgba(214,241,238,.52); background:
      linear-gradient(145deg, rgba(84,255,183,.055), rgba(163,123,255,.07)),
      rgba(5,10,18,.84);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: transform .2s var(--pop), border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .mementoSlot small { position: absolute; z-index: 2; top: 7px; left: 8px; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }
  .mementoSlot::after {
    content: ""; position: absolute; left: 50%; top: 55%; width: 36%; aspect-ratio: 1;
    border: 1px dashed rgba(215,236,231,.2); border-radius: 47% 53% 42% 58%;
    transform: translate(-50%,-50%) rotate(-10deg); opacity: .65;
  }
  .mementoSlot:hover, .mementoSlot:focus-visible { transform: translateY(-2px); border-color: var(--aqua); box-shadow: 0 0 18px rgba(92,250,255,.16); }
  .mementoSlot.filled, .mementoSlot.dolu {
    border-color: rgba(255,216,74,.66); color: #FFF4B8;
    background: radial-gradient(circle at 50% 38%, rgba(255,216,74,.16), transparent 58%), rgba(8,16,23,.94);
    box-shadow: inset 0 0 18px rgba(255,216,74,.07), 0 0 16px rgba(255,216,74,.1);
  }
  .mementoSlot.filled::after, .mementoSlot.dolu::after { display: none; }
  .mementoSlot img { width: 74%; height: 66%; object-fit: contain; margin: 14% 13% 2%; filter: saturate(1.12) drop-shadow(0 5px 7px rgba(0,0,0,.34)); }
  .mementoSlot strong { display: block; padding: 0 5px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 7px; letter-spacing: .05em; text-align: center; }
  .mementoDetail {
    display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; min-height: 74px;
    margin-top: 13px; padding: 11px 13px; border: 1px solid rgba(163,123,255,.32); border-radius: 16px;
    background: linear-gradient(90deg, rgba(163,123,255,.1), rgba(92,250,255,.045));
  }
  .mementoDetailArt { width: 50px; height: 50px; border-radius: 13px; background: url("./assets/boa-sprite-parca-cosmic-v2.webp") center/82% no-repeat, rgba(255,255,255,.035); filter: saturate(.78); opacity: .64; }
  .mementoDetail small { color: var(--aqua); font-family: var(--mono); font-size: 7.5px; font-weight: 900; letter-spacing: .16em; }
  .mementoDetail strong { display: block; margin-top: 3px; font-family: var(--display); font-size: 14px; color: #F7F4E9; }
  .mementoDetail p { margin-top: 3px; color: rgba(230,240,237,.6); font-size: 10.5px; line-height: 1.4; }
  .mementoRow { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin-top: 10px; min-height: 24px; }
  .mementoItem {
    max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 5px 8px; border: 1px solid rgba(245,214,107,0.52); color: #FFE889;
    background: rgba(13,16,14,0.88); font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em;
  }
  .mementoEmpty { color: rgba(246,243,235,0.58); font-size: 11px; }

  .modeRow { display: flex; gap: 16px; margin: 16px auto 0; max-width: 1050px; }
  .modeCard {
    flex: 1; min-width: 0; display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto;
    column-gap: 14px; align-items: center; background: linear-gradient(145deg, #FFF1C9, #E6C17C);
    color: var(--graphite); border: 1px solid rgba(74,245,210,0.7); border-radius: 22px;
    box-shadow: 0 18px 38px rgba(0,0,0,0.34), inset 0 0 34px rgba(126,98,48,0.08);
    padding: 16px; cursor: pointer; text-align: left; user-select: none;
    transition: transform 0.18s var(--pop), box-shadow 0.18s var(--pop), filter 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .modeCard:hover { transform: translateY(-3px); filter: saturate(1.08); box-shadow: 0 24px 46px rgba(0,0,0,0.4), 0 0 24px rgba(74,245,210,0.12); }
  .modeCard.fil { border-color: rgba(240,100,73,0.72); }
  .modeCard.vs { border-color: rgba(142,108,255,0.58); }
  .modeCard:active { transform: translate(3px, 3px); }
  .modeCard canvas { grid-row: 1 / 3; width: 112px; height: 76px; margin: 0; }
  .modeCard .mTitle { font-family: var(--mono); font-weight: 900; font-size: 13.5px; letter-spacing: 0.1em; }
  .modeCard .mLine { font-size: 12px; margin-top: 5px; line-height: 1.42; opacity: 0.76; color: var(--graphite); }
  .modeCard.boa .mTitle { color: #28745E; }
  .modeCard.fil .mTitle { color: #A6423C; }
  .modeCard.vs .mTitle { color: #65539A; }
  .ruleRow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
  .homage { text-align: center; font-family: var(--mono); font-size: 9.5px; font-weight: 900; letter-spacing: 0.16em; margin-top: 22px; opacity: 0.4; }
  .introLinks {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
    max-width: 1050px; margin: 16px auto 0; padding: 0 16px;
  }
  .introLinks a {
    color: rgba(246,243,235,.72); font-family: var(--mono); font-size: 9px;
    font-weight: 900; letter-spacing: .12em; text-decoration: none;
  }
  .introLinks a:hover, .introLinks a:focus-visible { color: var(--mint); }

  /* ---------- oyun ---------- */
  .hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
  .hud .left, .hud .right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  #goalChip, #scoreChip, #recChip { font-variant-numeric: tabular-nums; }
  #planetChip { border-color: var(--world); color: var(--world); box-shadow: 0 0 12px color-mix(in srgb, var(--world) 24%, transparent); }
  #powerChip { display: none; }
  #powerChip.on { display: inline-block; }
  #powerChip.used { opacity: 0.35; }
  #powerChip.cool { opacity: 0.62; border-style: dashed; box-shadow: none; }

  #comBar {
    height: 24px; display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    color: rgba(214, 240, 218, 0.85); margin-bottom: 8px; text-align: center;
  }
  #comBar.flash { animation: comIn 0.3s var(--pop); }
  @keyframes comIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  .frame {
    position: relative; background: #070806; border: 2px solid var(--mint);
    box-shadow: 0 0 26px rgba(137, 236, 145, 0.2), 0 14px 40px rgba(0, 0, 0, 0.5);
    padding: 10px;
    transform: none;
  }
  .frame.shake { animation: shakeX 0.4s ease; }
  .frame.pulse { animation: framePulse 0.28s var(--pop); }
  @keyframes framePulse { 45% { transform: scale(1.006); filter: saturate(1.16); } }
  @keyframes shakeX { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 55% { transform: translateX(3px); } 80% { transform: translateX(-2px); } }
  #cv { position: relative; z-index: 1; display: block; margin: 0 auto; background: #0B0D0B; touch-action: none; }
  #cv3d {
    position: absolute; z-index: 2; left: 10px; top: 10px; display: none;
    pointer-events: none; border: 0; background: #F7EAD0;
  }
  body.storybook.webgl3d #cv { opacity: 0; }
  body.storybook.webgl3d #cv3d { display: block; }
  .resultWash {
    position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none;
    opacity: 0; display: grid; place-items: center; border-radius: inherit;
  }
  .resultWash::before,
  .resultWash::after {
    content: ""; position: absolute; left: 50%; top: 52%; width: 82%; aspect-ratio: 1;
    border-radius: 48% 52% 45% 55% / 55% 46% 54% 45%; transform: translate(-50%, -50%) scale(0.08);
  }
  .resultWash::before { background: radial-gradient(circle, rgba(255,247,216,0.92) 0 20%, rgba(245,198,91,0.58) 38%, rgba(93,228,181,0.18) 62%, transparent 73%); }
  .resultWash::after { border: 3px solid rgba(255,219,112,0.86); box-shadow: 0 0 0 9px rgba(93,228,181,0.13), inset 0 0 34px rgba(255,240,180,0.5); }
  .resultWash.fail::before { background: radial-gradient(circle, rgba(247,232,211,0.86) 0 19%, rgba(240,100,73,0.48) 39%, rgba(142,108,255,0.25) 64%, transparent 74%); }
  .resultWash.fail::after { border-color: rgba(167,62,72,0.82); box-shadow: 0 0 0 9px rgba(142,108,255,0.14), inset 0 0 34px rgba(240,100,73,0.32); }
  .resultWash strong {
    position: relative; z-index: 2; max-width: 76%; padding: 8px 12px; text-align: center;
    color: #49351D; background: rgba(255,244,208,0.86); border: 1px solid rgba(126,98,48,0.48);
    font-family: var(--mono); font-size: 9px; line-height: 1.4; letter-spacing: 0.16em;
    opacity: 0; transform: translateY(8px) scale(0.94);
  }
  .resultWash.fail strong { color: #63333F; background: rgba(249,225,207,0.88); border-color: rgba(167,62,72,0.45); }
  .resultWash i {
    position: absolute; left: 50%; top: 52%; width: 9px; height: 9px; border-radius: 42% 58% 46% 54%;
    background: #F2BD36; opacity: 0; transform: translate(-50%, -50%);
  }
  .resultWash i:nth-of-type(2n) { background: #5DE4B5; }
  .resultWash i:nth-of-type(3n) { background: #F06449; }
  .resultWash.fail i { background: #8E6CFF; }
  .resultWash.fail i:nth-of-type(2n) { background: #F06449; }
  .resultWash.play { animation: resultWashLife 1.16s ease both; }
  .resultWash.play::before { animation: resultBloom 1.12s cubic-bezier(.16,.76,.25,1) both; }
  .resultWash.play::after { animation: resultRing 1.08s cubic-bezier(.2,.8,.2,1) both; }
  .resultWash.play strong { animation: resultLabel 1.05s ease both; }
  .resultWash.play i { animation: resultPetal 0.92s cubic-bezier(.15,.72,.28,1) both; }
  .resultWash i:nth-of-type(1) { --dx:-118px; --dy:-128px; animation-delay:.03s; }
  .resultWash i:nth-of-type(2) { --dx:112px; --dy:-104px; animation-delay:.08s; }
  .resultWash i:nth-of-type(3) { --dx:-134px; --dy:18px; animation-delay:.12s; }
  .resultWash i:nth-of-type(4) { --dx:138px; --dy:32px; animation-delay:.05s; }
  .resultWash i:nth-of-type(5) { --dx:-92px; --dy:132px; animation-delay:.1s; }
  .resultWash i:nth-of-type(6) { --dx:88px; --dy:138px; animation-delay:.16s; }
  .resultWash i:nth-of-type(7) { --dx:-34px; --dy:-156px; animation-delay:.18s; }
  .resultWash i:nth-of-type(8) { --dx:42px; --dy:158px; animation-delay:.02s; }
  @keyframes resultWashLife { 0% { opacity: 0; } 10%,76% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes resultBloom { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.08) rotate(-8deg); } 34% { opacity: .95; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.75) rotate(8deg); } }
  @keyframes resultRing { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.16); } 22% { opacity: .92; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.48); } }
  @keyframes resultLabel { 0%,16% { opacity: 0; transform: translateY(8px) scale(.94); } 30%,70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-7px) scale(1.02); } }
  @keyframes resultPetal { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(0); } 24% { opacity: .95; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.35) rotate(210deg); } }
  .frameLab {
    position: absolute; top: -13px; left: 14px; font-family: var(--mono); font-size: 9.5px;
    font-weight: 900; letter-spacing: 0.16em; background: var(--red); color: var(--white);
    border: 2px solid #070806; padding: 3px 8px; transform: rotate(-2deg);
    box-shadow: 0 0 14px var(--glow-r);
  }
  .chapterObject {
    position: absolute; z-index: 4; top: 10px; right: 12px; width: 78px; min-height: 60px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px solid rgba(255,224,92,0.84); border-radius: 13px;
    background: rgba(20,15,18,0.86); box-shadow: 0 0 18px rgba(255,224,92,0.28);
    pointer-events: none; overflow: hidden;
  }
  .chapterObject canvas { width: 62px; height: 40px; margin-top: -3px; }
  .chapterObject span {
    width: 100%; padding: 2px 4px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #FFE889; font-family: var(--mono); font-size: 6.8px; letter-spacing: 0.04em; text-align: center;
  }

  .veil {
    position: absolute; inset: 10px; display: none; align-items: center; justify-content: center;
    background: rgba(4, 6, 12, 0.8); z-index: 5;
  }
  .veil.show { display: flex; }
  .vCard {
    background: #0C0F0C; border: 2px solid var(--mint);
    box-shadow: 0 0 28px rgba(137, 236, 145, 0.25);
    padding: 20px 18px; width: min(350px, 90%); text-align: center;
    animation: tileIn 0.45s var(--pop); color: var(--white);
  }
  .vCard .kick { font-family: var(--mono); font-size: 9.5px; font-weight: 900; letter-spacing: 0.2em; color: var(--red); text-shadow: 0 0 12px var(--glow-r); }
  .vCard.win .kick, .vCard.story .kick { color: var(--mint); text-shadow: 0 0 12px var(--glow-m); }
  .vCard.story .kick { color: var(--gold); text-shadow: 0 0 12px var(--glow-g); }
  .vCard canvas { width: 92px; height: 62px; margin-top: 8px; }
  .vCard h2 { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: 0.035em; margin-top: 4px; line-height: 1.18; }
  .vCard p { font-size: 13.5px; line-height: 1.55; margin-top: 8px; opacity: 0.88; }
  .vCard .stats { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
  .vCard .stats .chip { max-width: 100%; white-space: normal; line-height: 1.35; }
  .vBtns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
  .btn {
    display: block; width: 100%; padding: 12px 14px; background: var(--panel); color: var(--mint);
    border: 2px solid var(--mint); box-shadow: 0 0 12px rgba(137, 236, 145, 0.18);
    font-family: var(--mono);
    font-weight: 900; font-size: 12.5px; letter-spacing: 0.14em; text-align: center; cursor: pointer;
    transition: transform 0.12s var(--pop), box-shadow 0.12s var(--pop); user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 24px var(--glow-m); }
  .vBtns .btn:first-child { background: var(--mint); color: #06220B; box-shadow: 0 0 18px var(--glow-m); }
  .btn.ghost { border-color: rgba(246, 243, 235, 0.65); color: var(--white); box-shadow: none; }
  a.btn { text-decoration: none; }

  .underRow { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 10px; }
  .underActions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
  .hint { font-family: var(--mono); font-size: 9.5px; font-weight: 900; letter-spacing: 0.12em; opacity: 0.45; }
  #menuBtn { cursor: pointer; }
  .hudActs, .hudBtn { pointer-events: auto; touch-action: manipulation; }
  button.hudBtn { appearance: none; -webkit-appearance: none; font-family: inherit; }
  .menuCard .vBtns button { font-family: var(--mono); }

  #pad { display: none; margin: 16px auto 0; width: 168px; }
  #pad .padRow { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
  .padBtn {
    width: 50px; height: 46px; background: var(--panel); border: 2px solid var(--mint); color: var(--mint);
    box-shadow: 0 0 10px rgba(137, 236, 145, 0.14); font-size: 17px; font-weight: 900; cursor: pointer;
    display: flex; align-items: center; justify-content: center; user-select: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .padBtn:active { transform: translate(2px, 2px); box-shadow: 0 0 20px var(--glow-m); }
  @media (any-pointer: coarse) { #pad { display: block; } .hint.keys { display: none; } }
  body.touch-ui #pad { display: block; }
  body.touch-ui .hint.keys { display: none; }

  .place { text-align: center; font-family: var(--mono); font-size: 9.5px; font-weight: 900; letter-spacing: 0.2em; margin-top: 22px; opacity: 0.45; }

  /* Tek oyunculu 40 bölüm: yaşayan suluboya 3B dünya */
  body.storybook .frame {
    background: #352B3E; border-color: rgba(74,245,210,0.88);
    box-shadow: 0 20px 48px rgba(0,0,0,0.48), 0 0 28px rgba(74,245,210,0.2), 0 0 0 1px rgba(247,231,189,0.5);
  }
  body.storybook #cv { background: var(--ivory); }
  body.storybook #comBar { color: rgba(239,230,206,0.9); }
  body.storybook .veil { background: rgba(16,15,13,0.66); backdrop-filter: blur(2px); }
  body.storybook .vCard {
    color: var(--graphite); background:
      radial-gradient(circle at 18% 12%, rgba(255,255,255,0.78), transparent 30%),
      radial-gradient(circle at 92% 88%, rgba(142,108,255,0.14), transparent 38%),
      linear-gradient(145deg, #FFF1C9, #EDC980);
    border: 1px solid rgba(240,100,73,0.7);
    box-shadow: 0 24px 58px rgba(0,0,0,0.42), 0 0 22px rgba(240,100,73,0.16), inset 0 0 38px rgba(126,98,48,0.08);
  }
  body.storybook .vCard .kick,
  body.storybook .vCard.story .kick,
  body.storybook .vCard.win .kick { color: #A73E48; text-shadow: 0 0 12px rgba(240,100,73,0.22); }
  body.storybook .vCard p { opacity: 0.94; color: #211D19; }
  body.storybook .vCard .chip { background: rgba(39,41,33,0.86); }
  body.storybook #overCard.win {
    border-color: rgba(52,125,105,0.75);
    background: radial-gradient(circle at 18% 12%, rgba(255,255,255,0.8), transparent 30%), linear-gradient(145deg, #FFF2C8, #D7D58F);
  }
  body.storybook #overCard.fail {
    border-color: rgba(167,62,72,0.76);
    background: radial-gradient(circle at 84% 12%, rgba(255,255,255,0.7), transparent 28%), linear-gradient(145deg, #F7DEC5, #D7C4D8);
  }
  #over.show #overCard { animation: resultCardIn .52s cubic-bezier(.18,.82,.22,1) both; }
  @keyframes resultCardIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
  body.storybook .vBtns .btn:first-child {
    color: #18362F; background: linear-gradient(135deg, #B8EF82, #5DE4B5); border-color: #347D69;
    box-shadow: 0 8px 22px rgba(52,125,105,0.24), 0 0 18px rgba(74,245,210,0.2);
  }
  body.storybook .btn.ghost { color: var(--graphite); border-color: rgba(39,41,33,0.42); }
  body.storybook .frameLab { background: var(--coral); box-shadow: 0 0 16px rgba(240,100,73,0.42); border-color: #352B3E; }
  body.storybook #lvlChip,
  body.storybook #scoreChip { border-color: var(--aqua); color: var(--aqua); box-shadow: 0 0 12px rgba(74,245,210,0.18); }
  body.storybook #goalChip { background: linear-gradient(135deg, #B8EF82, #5DE4B5); border-color: #5DE4B5; }
  body.storybook #powerChip.on { border-color: var(--violet); color: #E3D9FF; box-shadow: 0 0 16px rgba(142,108,255,0.28); }
  body.game-active.storybook .frame {
    width: 100%; aspect-ratio: 9 / 16; padding: 0; margin-inline: auto; overflow: hidden; border-radius: 28px; transform: none;
    border-color: rgba(82,255,215,0.92); box-shadow: 0 22px 64px rgba(0,0,0,0.62), 0 0 38px rgba(74,245,210,0.28);
  }
  body.game-active.storybook #cv3d { left: 0; top: 0; border-radius: 26px; }
  body.game-active.storybook #cv { border-radius: 26px; }
  body.game-active.storybook .veil { inset: 0; }
  body.game-active.storybook .frameLab { top: 12px; left: 14px; z-index: 6; }
  body.game-active.storybook .place { margin-top: 10px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .frame { transform: none; }
  }

  @media (max-width: 900px) {
    .modeRow { flex-direction: column; max-width: 620px; }
    .modeCard { min-height: 126px; }
  }

  @media (max-width: 600px) {
    #stage { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
    #intro h1 { font-size: 38px; }
    .introHero { width: 100%; max-width: 540px; min-height: 0; aspect-ratio: 9 / 16; margin-inline: auto; border-radius: 24px; }
    .introWorld { object-position: 53% 50%; }
    .introHero .gameLockup { top: 8px; left: 8px; width: min(240px, 60%); padding: 6px; }
    .introHeroCopy { left: 20px; right: 20px; bottom: 22px; }
    .introHeroCopy h2 { font-size: 31px; }
    .introSub { font-size: 13.5px; }
    .modeRow { flex-direction: column; max-width: 360px; }
    .planetMapHead { grid-template-columns: 62px 1fr; gap: 11px; }
    .planetGlyph { width: 58px; height: 58px; }
    .planetGlyph::before { inset: 23px -10px; }
    .planetMapCopy strong { font-size: 17px; }
    .lvlRow { grid-template-columns: repeat(8, 30px); gap: 12px 10px; padding-inline: 0; }
    .lvlDot { width: 30px; height: 30px; font-size: 9px; }
    .lvlDot:nth-child(10n + 2), .lvlDot:nth-child(10n + 7) { transform: none; }
    .lvlDot.cur:nth-child(10n + 2), .lvlDot.cur:nth-child(10n + 7) { transform: scale(1.14); }
    .modeCard { display: block; min-height: 0; padding: 18px 16px; text-align: center; }
    .modeCard canvas { display: none; }
    .modeCard .mLine { margin-top: 2px; }
    .modeCard.vs { display: none; }
    .hud { align-items: flex-start; }
    .hud .right { justify-content: flex-end; }
    .underRow { align-items: flex-start; }
    .underActions .chip { font-size: 9px; padding-inline: 7px; }
    body.game-active.storybook #stage {
      padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }
    body.game-active.storybook .hud { gap: 5px; margin-bottom: 5px; }
    body.game-active.storybook .hud .left,
    body.game-active.storybook .hud .right { gap: 5px; }
    body.game-active.storybook .hud .chip { font-size: 8px; padding: 4px 6px; }
    body.game-active.storybook #comBar { height: 18px; margin-bottom: 5px; font-size: 9px; }
    body.game-active.storybook .underRow { margin-top: 8px; }
    body.game-active.storybook #pad { margin-top: 9px; transform: scale(0.88); transform-origin: top center; }
    body.game-active.storybook .place { margin-top: 0; }
  }

  /* Mobil oyun kabuğu: HUD ve kontroller sahnenin parçasıdır, web sayfası akışının değil. */
  @media (max-width: 1024px), (any-pointer: coarse) {
    body.game-active.storybook {
      overflow: hidden; overscroll-behavior: none; touch-action: none;
      background: #070908;
    }
    body.game-active.storybook #stage {
      width: 100%; height: 100vh; height: 100svh; min-height: 0; max-width: none;
      display: grid; place-items: center;
      padding: 0;
    }
    body.game-active.storybook #game {
      position: relative; display: grid; place-items: center;
      width: 100%; height: 100%; max-width: none; overflow: hidden;
    }
    body.game-active.storybook .frame {
      position: absolute; inset: 0; width: 100% !important; height: 100% !important;
      flex: none; margin: 0; border: 0; border-radius: 0;
      box-shadow: none;
    }
    body.game-active.storybook #cv3d,
    body.game-active.storybook #cv { border-radius: 0; }

    body.game-active.storybook .hud {
      position: absolute; z-index: 18;
      top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
      right: max(152px, calc(142px + env(safe-area-inset-right)));
      display: block; margin: 0; pointer-events: none;
    }
    body.game-active.storybook .hud .left,
    body.game-active.storybook .hud .right { display: flex; gap: 4px; flex-wrap: wrap; }
    body.game-active.storybook .hud .right { margin-top: 4px; }
    body.game-active.storybook .hud .chip {
      min-height: 24px; display: inline-flex; align-items: center;
      padding: 4px 7px; border-width: 1px; border-radius: 999px;
      background: rgba(8,11,10,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 5px 16px rgba(0,0,0,.28); font-size: 7.5px; letter-spacing: .08em;
    }
    body.game-active.storybook #powerChip { pointer-events: auto; }
    body.game-active.storybook #comBar {
      position: absolute; z-index: 17;
      top: max(70px, calc(58px + env(safe-area-inset-top)));
      left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
      width: auto; height: auto; min-height: 24px; margin: 0; padding: 5px 9px;
      border-radius: 999px; background: rgba(9,12,11,.62); color: rgba(255,250,235,.9);
      backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
      font-size: 8px; line-height: 1.25; letter-spacing: .055em; pointer-events: none;
    }

    body.game-active.storybook .underRow {
      position: absolute; z-index: 20;
      top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
      width: auto; margin: 0; display: block;
    }
    body.game-active.storybook .underRow .hint { display: none; }
    body.game-active.storybook .underActions { display: flex; gap: 6px; flex-wrap: nowrap; }
    body.game-active.storybook .underActions .chip {
      width: 40px; height: 40px; min-width: 40px; padding: 0;
      display: grid; place-items: center; border-width: 1px; border-radius: 50%;
      background: rgba(8,11,10,.76); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 6px 18px rgba(0,0,0,.34); font-size: 0; line-height: 1;
    }
    body.game-active.storybook .underActions .chip::before {
      color: #F7E7BD; font-family: system-ui, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: 0;
    }
    body.game-active.storybook #soundChip::before { content: "♪"; }
    body.game-active.storybook #soundChip[aria-pressed="true"]::before { content: "×"; }
    body.game-active.storybook #pauseChip::before { content: "Ⅱ"; font-size: 15px; }
    body.game-active.storybook #pauseChip[data-paused="true"]::before { content: "▶"; font-size: 14px; }
    body.game-active.storybook #menuBtn::before { content: "☰"; font-size: 17px; }

    body.game-active.storybook #pad {
      position: absolute; z-index: 14; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
      display: block; width: 146px; margin: 0; transform: translateX(-50%); opacity: .94;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,.38));
      transition: opacity .2s ease, transform .2s ease;
    }
    body.game-active.storybook #pad .padRow { gap: 7px; margin-top: 7px; }
    body.game-active.storybook .padBtn {
      width: 44px; height: 42px; border-width: 1px; border-radius: 14px;
      background: rgba(8,13,11,.7); color: #76F0B0;
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      box-shadow: inset 0 0 0 1px rgba(118,240,176,.12), 0 6px 16px rgba(0,0,0,.26);
      font-size: 15px;
    }
    body.game-active.storybook #game:has(.veil.show) #pad {
      opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px);
    }
    body.game-active.storybook .place { display: none; }

    body.game-active.storybook .frameLab {
      top: max(102px, calc(88px + env(safe-area-inset-top))); left: max(12px, env(safe-area-inset-left)); z-index: 7; padding: 3px 7px;
      border-width: 1px; border-radius: 8px; font-size: 7.5px; transform: rotate(-1deg);
    }
    body.game-active.storybook .chapterObject {
      top: max(98px, calc(84px + env(safe-area-inset-top))); right: max(10px, env(safe-area-inset-right)); width: 66px; min-height: 50px; border-radius: 12px;
    }
    body.game-active.storybook .chapterObject canvas { width: 50px; height: 32px; }
    body.game-active.storybook .chapterObject span { font-size: 5.8px; }

    body.game-active.storybook .veil {
      inset: 0; z-index: 16;
      padding: max(96px, calc(82px + env(safe-area-inset-top))) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
      align-items: center; background: linear-gradient(180deg, rgba(8,10,9,.25), rgba(8,10,9,.78));
      backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    }
    body.game-active.storybook .vCard {
      width: min(360px, 100%); max-height: 100%; overflow: auto;
      padding: 17px 15px 14px; border-width: 1px; border-radius: 24px;
      box-shadow: 0 20px 48px rgba(0,0,0,.5), 0 0 22px rgba(240,100,73,.14);
      scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y;
    }
    body.game-active.storybook .vCard::-webkit-scrollbar { display: none; }
    body.game-active.storybook .vCard .kick { font-size: 8px; letter-spacing: .15em; }
    body.game-active.storybook .vCard canvas { width: 66px; height: 44px; margin-top: 5px; }
    body.game-active.storybook .vCard h2 { margin-top: 2px; font-size: 22px; line-height: 1.08; letter-spacing: .01em; }
    body.game-active.storybook .vCard p { margin-top: 7px; font-size: 13px; line-height: 1.38; }
    body.game-active.storybook .vCard .stats {
      display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 6px; margin-top: 10px;
    }
    body.game-active.storybook .vCard .stats .chip {
      width: 100%; min-height: 38px; padding: 6px 7px;
      display: grid; place-items: center; border-width: 1px; border-radius: 11px;
      font-size: 7.5px; line-height: 1.25; letter-spacing: .085em;
    }
    body.game-active.storybook .vBtns {
      position: sticky; bottom: -14px; z-index: 2; margin: 10px -4px -8px; padding: 7px 4px 8px;
      background: linear-gradient(180deg, rgba(255,241,201,0), rgba(255,241,201,.94) 34%);
    }
    body.game-active.storybook .vBtns .btn {
      min-height: 48px; display: grid; place-items: center; padding: 10px 12px;
      border-width: 1px; border-radius: 14px; font-size: 10px; letter-spacing: .12em;
      touch-action: manipulation;
    }
  }


/* ===========================================================
   MOBİL EK — SAHİBİ: CLAUDE
   2 kişi modunun dokunmatik kumandaları. Codex: bu bloğa
   dokunma; renk/biçim değişikliği gerekiyorsa haber ver.
   =========================================================== */
#pad2 { display: none; width: 168px; margin: 16px auto 0; }
#pad2 .padRow { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.padEtiket {
  display: none; font-family: var(--mono); font-size: 9px; font-weight: 900;
  letter-spacing: .16em; text-align: center; margin-bottom: 5px; color: var(--mint); opacity: .8;
}
@media (any-pointer: coarse) {
  body.vs-mod .padEtiket { display: block; }
  body.game-active.vs-mod #pad,
  body.game-active.vs-mod #pad2.on {
    display: block; position: fixed; z-index: 16; margin: 0; width: 150px;
    bottom: max(14px, env(safe-area-inset-bottom));
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.4));
  }
  body.game-active.vs-mod #pad2.on { left: max(10px, env(safe-area-inset-left)); }
  body.game-active.vs-mod #pad {
    right: max(10px, env(safe-area-inset-right)); left: auto; transform: none;
  }
  body.game-active.vs-mod #pad2.on .padEtiket { color: var(--mint); }
  body.game-active.vs-mod #pad .padEtiket { color: #F2B8A6; }
  body.game-active.vs-mod #game:has(.veil.show) #pad,
  body.game-active.vs-mod #game:has(.veil.show) #pad2.on { opacity: 0; pointer-events: none; }
  body.game-active.vs-mod .place { padding-bottom: 96px; }
}

/* yatay tutuşta tek kumanda: sağ başparmağın altına */
@media (any-pointer: coarse) and (orientation: landscape) {
  body.game-active.storybook #pad {
    left: auto; transform: none;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }
  body.game-active.storybook #game:has(.veil.show) #pad { transform: translateY(10px); }
}


/* ===========================================================
   MOBİL ÜST BANT + DOKUNMATİK SÜRÜŞ — SAHİBİ: CLAUDE
   HUD artık sahanın ÜZERİNE binmez: ekran üstte bilgi bandı,
   altta saha olacak şekilde ikiye bölünür. Solo modda ok
   kumandaları kalktı; sürüş dokunma + kaydırma. Codex: bu
   bloğa dokunma; bant görselini değiştirmek istersen haber ver.
   =========================================================== */
@media (max-width: 1024px), (any-pointer: coarse) {
  /* --- yerleşim: bant + saha, üst üste değil alt alta --- */
  body.game-active.storybook #game {
    display: flex; flex-direction: column;
    height: 100vh; height: 100svh;
  }
  body.game-active.storybook .hud {
    position: static; inset: auto; right: auto;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 2px 6px; flex-wrap: wrap;
    /* sağdaki yüzer ikon kümesi (ses/duraklat/menü) bandın üstünde durur;
       çipler onların altına girmesin diye sağdan pay bırakılır */
    padding: max(8px, env(safe-area-inset-top)) 150px 6px 12px;
    background:
      radial-gradient(circle at 18% -30%, rgba(255, 224, 157, 0.13), transparent 48%),
      linear-gradient(180deg, rgba(52, 40, 32, 0.97), rgba(30, 24, 21, 0.97));
    border-bottom: 1px solid rgba(230, 185, 98, 0.38);
    box-shadow: inset 0 -1px 0 rgba(255, 239, 202, 0.05), 0 7px 22px rgba(15, 10, 7, 0.24);
    font-family: "Boa Cizgi", var(--display);
  }
  body.game-active.storybook .hud .left { display: flex; flex-direction: row; align-items: center; gap: 2px; flex-wrap: wrap; margin: 0; flex: 1 1 auto; min-width: 0; }
  body.game-active.storybook .hud .right {
    display: flex; flex-direction: row; align-items: center; gap: 4px;
    flex-wrap: nowrap; margin: 0;
    flex: 1 1 100%; justify-content: flex-end; /* ikinci satır: skor ve arşiv sağda */
  }
  /* çipler: hap değil, sakin metin belirteçleri */
  body.game-active.storybook .hud .chip,
  body.game-active.storybook .hud .chip.mint,
  body.game-active.storybook .hud .chip.gold,
  body.game-active.storybook .hud .chip.dim {
    background: none; border: 0; box-shadow: none; border-radius: 0;
    display: inline-flex; align-items: center; width: auto; min-height: 0;
    flex: 0 0 auto; white-space: nowrap;
    transform: none; margin: 0;
    padding: 2px 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.045em;
    color: rgba(247, 230, 198, 0.92); text-shadow: 0 1px 0 rgba(18, 11, 7, 0.72);
    font-family: "Boa Cizgi", var(--display);
  }
  body.game-active.storybook .hud .chip + .chip { border-left: 0; }
  body.game-active.storybook .hud .chip + .chip:not(#powerChip)::before {
    content: "·"; margin-right: 5px; color: rgba(226, 185, 111, 0.5);
    font-family: var(--sans); font-weight: 800; text-shadow: none;
  }
  body.game-active.storybook .hud #planetChip {
    color: var(--world); text-shadow: 0 0 11px color-mix(in srgb, var(--world) 28%, transparent);
  }
  body.game-active.storybook .hud #lvlChip { color: #F8E7C7; }
  body.game-active.storybook .hud #goalChip {
    background: none; border: 0; box-shadow: none;
    color: #F3CD69; text-shadow: 0 0 10px rgba(243, 191, 85, 0.2);
  }
  body.game-active.storybook .hud #scoreChip { color: #E7D1AA; }
  body.game-active.storybook .hud #recChip { color: rgba(224, 206, 175, 0.48); }
  /* sağdaki yuvarlak ikonlar: küçük ve yassı */
  body.game-active.storybook .hud .right [role="button"],
  body.game-active.storybook .hud .right button {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(145deg, rgba(92, 70, 50, 0.68), rgba(35, 27, 23, 0.9));
    border: 1px solid rgba(231, 194, 123, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 239, 204, 0.08), 0 5px 14px rgba(12, 8, 6, 0.24);
  }
  /* hedef satırı: bandın ikinci satırı */
  body.game-active.storybook #comBar {
    position: static; inset: auto; transform: none;
    height: auto; min-height: 0; margin: 0;
    padding: 4px 12px calc(6px + 2px);
    background: linear-gradient(180deg, rgba(30, 24, 21, 0.97), rgba(23, 19, 17, 0.96));
    border-bottom: 1px solid rgba(230, 185, 98, 0.24);
    box-shadow: 0 7px 18px rgba(15, 10, 7, 0.18);
    font-family: "Boa Cizgi", var(--display); font-size: 10px; font-weight: 700;
    letter-spacing: 0.035em; text-align: left;
    color: rgba(238, 220, 187, 0.78); text-shadow: 0 1px 0 rgba(16, 10, 7, 0.7);
  }
  /* saha: kalan alanın tamamı */
  body.game-active.storybook .frame {
    position: relative; flex: 1 1 auto; min-height: 0;
    width: 100% !important; height: auto !important;
    margin: 0; padding: 0; border: 0; box-shadow: none; transform: none;
  }
  /* sahanın üzerine binen süsler bantta zaten temsil ediliyor */
  body.game-active.storybook .frameLab { display: none; }
  body.game-active.storybook .chapterObject { display: none; }
  /* örtüler sahayı tam kapatsın (kenarda canlı oyun şeridi kalmasın) */
  body.game-active.storybook .veil { inset: 0; }
  /* güç düğmesi: sağ altta başparmak menzilinde tek yüzer düğme */
  body.game-active.storybook #powerChip {
    position: fixed; z-index: 15;
    top: auto; left: auto;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; text-align: center;
    white-space: normal; line-height: 1.25; padding: 6px;
    font-family: "Boa Cizgi", var(--display); font-size: 8.5px; font-weight: 700; letter-spacing: 0.055em;
    background: linear-gradient(145deg, color-mix(in srgb, var(--world) 30%, #4A382B), rgba(35, 26, 22, 0.94));
    color: #FFF0CB; text-shadow: 0 1px 0 rgba(20, 11, 7, 0.7);
    border: 1.5px solid var(--world);
    box-shadow: inset 0 1px 0 rgba(255, 242, 207, 0.15), 0 7px 20px rgba(0, 0, 0, 0.42), 0 0 16px color-mix(in srgb, var(--world) 20%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  body.game-active.storybook .underActions .chip {
    background: linear-gradient(145deg, rgba(86, 64, 48, 0.88), rgba(31, 24, 21, 0.94));
    border-color: rgba(235, 201, 135, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 239, 204, 0.1), 0 6px 18px rgba(12, 8, 6, 0.34);
  }
  body.game-active.storybook .underActions .chip::before { color: #F5DEB4; }
  body.game-active.storybook .underActions #pauseChip {
    border-color: color-mix(in srgb, var(--world) 68%, #E6C27F);
    box-shadow: inset 0 1px 0 rgba(255, 239, 204, 0.12), 0 6px 18px rgba(12, 8, 6, 0.34), 0 0 12px color-mix(in srgb, var(--world) 13%, transparent);
  }
  body.game-active.storybook #powerChip.used { opacity: 0.35; }
  /* solo modda ok kumandası yok: sürüş dokunma + kaydırma */
  body.game-active.storybook #pad { display: none !important; }
  body.game-active.storybook #game:has(.veil.show) #powerChip { opacity: 0; pointer-events: none; }
}

/* =========================================================
   ÖĞRETİM KARTI — SAHİBİ: CLAUDE
   Her bölüm başında iki üç kısa cümle. Oyunu durdurmaz, sahayı kapatmaz,
   tıklamayı yutmaz; sırayla birer satır gösterip söner.
   Codex: görünümünü değiştirebilirsin (renk, tipografi, kenarlık).
   Yapıyı koru: konum sahanın altına yakın, pointer-events yok, .show ile açılır.
   ========================================================= */
#ogretimKarti {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 6px);
  z-index: 22;
  max-width: min(88%, 380px);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: "Boa Cizgi", var(--display, ui-rounded), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  color: #241a10;
  background: linear-gradient(180deg, rgba(247, 235, 208, 0.97), rgba(232, 214, 175, 0.97));
  border: 1.5px solid rgba(120, 92, 54, 0.55);
  box-shadow: 0 6px 18px rgba(24, 15, 8, 0.3), inset 0 1px 0 rgba(255, 250, 233, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
#ogretimKarti.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  #ogretimKarti { transition: none; }
}
@media (max-width: 1024px), (any-pointer: coarse) {
  #ogretimKarti { bottom: 84px; font-size: 12.5px; }  /* güç düğmesinin üstünde kalsın */
}

/* ===========================================================
   OYUNLAŞTIRMA SANAT KATMANI — SAHİBİ: CODEX
   Claude bloklarının yerleşim yapısını değiştirmeden canlı durum,
   arşiv vitrini ve soğuk zemin renk yönünü ekler.
   =========================================================== */

/* Kahverengiyi ana zemin rengi olmaktan çıkaran, düşük yoğunluklu kozmik renk katmanı. */
body.storybook.webgl3d #cv3d { filter: saturate(1.16) contrast(1.055) brightness(1.02); }
body.storybook.webgl3d .frame::before {
  content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none;
  background: linear-gradient(165deg, rgba(52,231,232,.26), rgba(109,84,224,.18) 54%, rgba(84,255,183,.20));
  mix-blend-mode: color; opacity: .10;
}

/* Canlı yönlendirme bandı: sınıfları ve .flash zamanlamasını oyun.js yönetecek. */
#comBar.bilgi {
  color: #C9FEFF; background: linear-gradient(90deg, rgba(92,250,255,.045), rgba(92,250,255,.12), rgba(92,250,255,.045));
  border-block: 1px solid rgba(92,250,255,.2); text-shadow: 0 0 12px rgba(92,250,255,.24);
}
#comBar.uyari {
  color: #FFF4F6; background: linear-gradient(90deg, rgba(255,78,112,.06), rgba(255,78,112,.25), rgba(255,78,112,.06));
  border-block: 1px solid rgba(255,78,112,.46); text-shadow: 0 0 13px rgba(255,78,112,.34);
}
#comBar.basari {
  color: #E7FFF1; background: linear-gradient(90deg, rgba(84,255,183,.05), rgba(84,255,183,.22), rgba(255,216,74,.08));
  border-block: 1px solid rgba(84,255,183,.42); text-shadow: 0 0 13px rgba(84,255,183,.3);
}

/* Claude'un konum/.show/pointer yapısı korunur; yalnız görünüm ve simge katmanı değişir. */
#ogretimKarti {
  display: flex; align-items: center; gap: 9px; min-height: 48px;
  padding: 6px 13px 6px 7px; border-radius: 17px;
  color: #F5F8F0; text-align: left;
  background: linear-gradient(105deg, rgba(5,16,26,.94), rgba(20,14,39,.92));
  border-color: rgba(92,250,255,.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 34px rgba(0,0,0,.4), 0 0 24px rgba(92,250,255,.12);
}
#ogretimKarti::before {
  content: ""; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px;
  background: url("./assets/boa-sprite-parca-cosmic-v2.webp") center/34px 34px no-repeat, radial-gradient(circle, rgba(255,216,74,.2), rgba(163,123,255,.08));
  box-shadow: inset 0 0 0 1px rgba(255,216,74,.24);
}

@media (max-width: 720px) {
  .mementoWrap { padding: 14px 12px; border-radius: 20px; }
  .mementoHead { align-items: flex-start; }
  .mementoHead p { font-size: 10px; }
  .mementoVitrin { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; max-height: 58svh; }
  .mementoSlot { border-radius: 12px; }
  .mementoSlot small { top: 5px; left: 6px; font-size: 6px; }
  .mementoDetail { grid-template-columns: 44px 1fr; padding: 9px 10px; }
  .mementoDetailArt { width: 42px; height: 42px; }
}

@media (max-width: 1024px), (any-pointer: coarse) {
  body.game-active.storybook #comBar.bilgi { background: linear-gradient(90deg, rgba(17,39,49,.98), rgba(20,55,64,.98)); border-bottom-color: rgba(92,250,255,.32); }
  body.game-active.storybook #comBar.uyari { background: linear-gradient(90deg, rgba(58,24,36,.98), rgba(91,28,48,.98)); border-bottom-color: rgba(255,78,112,.55); }
  body.game-active.storybook #comBar.basari { background: linear-gradient(90deg, rgba(16,50,44,.98), rgba(35,54,37,.98)); border-bottom-color: rgba(84,255,183,.5); }
  #ogretimKarti { width: min(86%, 390px); font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .mementoSlot { transition-duration: .01ms; }
}