/* =========================================================
   DERİNSU — arayüz
   Astralis görsel dili: sıcak kömür zemin · altın vurgu · serif başlıklar · hap formlar
   ========================================================= */
:root {
  --bg: #171514; --s0: #141312; --s1: #171514; --s2: #1c1a19; --s3: #211f1d; --s4: #2d2926;
  --line: #26221f; --line2: #2f2a25; --line3: #413826;
  --text: #e6dfd7; --title: #f6ecd2; --lab: #cfc8c2; --muted: #a0968f; --dim: #847b75;
  --gold: #e7c26a; --gold2: #c9a24e; --gold3: #6d5e3b;
  --good: #9bd68f; --bad: #ee9a86; --warn: #e7b25c; --danger: #e2705f;
  --sell: #ffc2a8; --buy: #c4ecb8;
  --water: #7fb3a8;
  --acc: var(--gold); --accent: var(--gold);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --dock-h: 56px; --hud-h: 72px;
  --fs: 'Alegreya SC', 'Alegreya', Georgia, serif;
  --fb: 'Alegreya', Georgia, serif;
  --fn: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --spring: cubic-bezier(.3, 1.35, .45, 1);
  --ease: cubic-bezier(.2, .9, .25, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%; overflow: hidden; color: var(--text);
  background: linear-gradient(180deg, #25211e 0%, #171514 32%, #171514 70%, #1b1816 100%) fixed var(--bg);
  font: 400 11.5px/1.35 var(--fb); overscroll-behavior: none; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
input { font: inherit; color: inherit; }
img { -webkit-user-drag: none; }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num { font-family: var(--fn); font-variant-numeric: tabular-nums; font-weight: 600; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 700 9.5px/1 var(--fs); letter-spacing: .2em; text-transform: uppercase; color: var(--gold2); }
.pin { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 7px var(--gold); flex: none; }
.coin { display: inline-block; width: 1.05em; height: 1.05em; flex: none; vertical-align: -.15em; }
.fr { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--rad, 17px); border: 1px solid var(--bd, #29241d); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 1px 0 rgba(255, 236, 210, .05); background: var(--fill, linear-gradient(180deg, var(--s2), var(--s1))); }
.sell { color: var(--sell); } .buy { color: var(--buy); } .good { color: var(--good); } .muted { color: var(--muted); }

/* ---------- Arka plan ---------- */
.bgfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bgfx::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 236, 200, .022) 0 1px, transparent 1px 10px); }
.bgfx::before { content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 0L56 28L28 56L0 28Z' fill='none' stroke='%23f5e6c4' stroke-opacity='.035' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 55%); mask-image: linear-gradient(180deg, #000, transparent 55%); }
.haze { position: absolute; border-radius: 50%; filter: blur(43px); }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55)); }

/* ---------- Uygulama ---------- */
.app { position: fixed; inset: 0; margin: 0 auto; max-width: 447px; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(var(--safe-t) + 7px) 12px 0; }

/* ---------- Dinamik ada ---------- */
.hud { position: relative; z-index: 75; height: var(--hud-h); }
.island {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: var(--iw, 250px); height: var(--ih, 42px); border-radius: var(--ir, 21px);
  background: linear-gradient(180deg, #1c1a19, #141312); overflow: hidden; cursor: pointer;
  box-shadow: 0 0 0 1.5px #413826, inset 0 1px 0 rgba(255, 240, 210, .06), 0 8.5px 22.5px -7px rgba(0, 0, 0, .85);
  transition: width .55s var(--spring), height .55s var(--spring), border-radius .55s var(--spring), box-shadow .5s;
  animation: islIn .9s var(--spring) both .1s;
}
.island::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 236, 200, .08) 50%, transparent 70%); transform: translateX(-120%); }
.island.flash::after { animation: islSheen 1s ease-out; }
.isl-compact { position: absolute; left: 0; top: 0; height: 42px; display: flex; align-items: center; padding: 0 14px 0 5px; white-space: nowrap; }
.isl-pilot { position: relative; width: 31px; height: 31px; display: grid; place-items: center; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #24211e, #141312); }
.xp-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.xr-bg { fill: none; stroke: #413826; stroke-width: 2.2; }
.xr-fg { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; transition: stroke-dashoffset .7s var(--ease); }
.isl-pilot .emb-rod { width: 25px; height: 25px; object-fit: contain; filter: brightness(1.35) drop-shadow(0 0 3px rgba(231, 194, 106, .35)); }
.isl-pilot.low .xr-fg { stroke: var(--warn); }
.isl-pilot.broken .xr-fg { stroke: var(--danger); }
.isl-pilot.broken .emb-rod { filter: grayscale(.8) brightness(.6); }
.isl-dur { display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 42px; margin: 0 2px 0 9px; text-align: left; }
.isl-dur small { font: 700 7.5px/1 var(--fs); letter-spacing: .14em; text-transform: uppercase; color: var(--gold2); }
.isl-dur b { font-size: 12px; line-height: 1; color: #e6d3a4; }
.isl-dur.low b { color: var(--warn); }
.isl-dur.broken b { color: var(--danger); animation: pulseOp 1s infinite; }
.lvl { position: absolute; right: -3.5px; bottom: -2.5px; min-width: 14.5px; height: 14px; padding: 0 3.5px; border-radius: 7px; display: grid; place-items: center; font-size: 7px; color: #241a08; background: linear-gradient(180deg, #f3d68e, #c9a24e); box-shadow: 0 0 0 2px #141312; }
.lvl.up { animation: lvlUp .9s var(--spring); }
.isl-name { font: 700 12.5px/1 var(--fs); letter-spacing: .06em; color: #e6d3a4; margin: 0 3.5px 0 9.5px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.isl-div { width: 1px; height: 15.5px; background: #413826; margin: 0 9.5px; flex: none; }
.cur { display: inline-flex; align-items: center; gap: 6px; height: 42px; font-size: 12.5px; }
.hc-coin { width: 14px; height: 14px; flex: none; }
.cur .num { display: inline-block; font-weight: 700; }
.cur.bump .num { animation: bump .45s var(--spring); }
.cur.pearl .num { color: #e9e2f2; }

/* iş satırı: adanın ikinci satırı */
.isl-act { position: absolute; left: 0; right: 0; top: 42px; height: 30px; padding: 0 12px 6px; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .45s var(--spring); pointer-events: none; }
.island.act .isl-act { opacity: 1; transform: none; }
.ia-ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; font-size: 11px; color: var(--c, var(--gold)); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c, var(--gold)) 22%, transparent), transparent 72%); }
.ia-ic.spin .ic { animation: hookBob 1.4s ease-in-out infinite; }
.ia-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ia-tx b { font: 500 10.5px/1 var(--fb); color: #e6dfd7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-tx b em { font-style: normal; color: var(--muted); }
.ia-bar { height: 3px; border-radius: 2px; background: #2a2622; overflow: hidden; }
.ia-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold2), var(--gold)); border-radius: inherit; }
.ia-bar.bite i { background: linear-gradient(90deg, #e2705f, #f3a07c); }
.ia-v { font: 600 9.5px var(--fn); color: var(--lab); flex: none; }
.ia-v.full { color: var(--danger); animation: pulseOp 1s infinite; }
.isl-grab { position: absolute; left: 50%; bottom: 4px; width: 26px; height: 3px; margin-left: -13px; border-radius: 2px; background: #413826; opacity: 0; transition: opacity .3s; }
.island.act .isl-grab, .island.det .isl-grab { opacity: .9; }

/* ada ayrıntısı (aşağı çekince / dokununca) */
.isl-det { position: absolute; left: 0; right: 0; top: var(--dt, 72px); padding: 2px 12px 16px; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .45s var(--spring); pointer-events: none; display: flex; flex-direction: column; gap: 6px; }
.island.det .isl-det { opacity: 1; transform: none; pointer-events: auto; transition-delay: .08s; }
.id-h { display: flex; align-items: center; gap: 8px; font: 700 9px/1 var(--fs); letter-spacing: .2em; color: var(--gold2); text-transform: uppercase; }
.id-h i { flex: 1; height: 1px; background: linear-gradient(90deg, #4a3f2a, transparent); }
.id-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; height: 24px; }
.id-row .ifr { width: 22px; height: 22px; }
.id-n { font: 500 10.5px/1 var(--fb); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-n small { color: var(--dim); margin-left: 5px; font-size: 9px; }
.id-row b { font: 600 10px var(--fn); color: var(--qc, var(--lab)); }
.id-row.unk .id-n { color: var(--dim); font-style: italic; }
.id-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.id-kv span { padding: 6px 8px; border-radius: 9px; background: #121110; box-shadow: inset 0 0 0 1px #262220; }
.id-kv small { display: block; font: 500 8.5px/1 var(--fb); color: var(--dim); }
.id-kv b { display: block; margin-top: 4px; font: 700 11px var(--fn); color: var(--text); }

/* ---------- Sahne ---------- */
.stage { position: relative; min-height: 0; z-index: 2; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; opacity: 0; visibility: hidden; transform: translateX(20px); transition: opacity .35s, transform .5s var(--ease), visibility 0s .5s; }
.view.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .5s var(--ease), visibility 0s; }
.view.left { transform: translateX(-20px); }
.home { overflow-y: auto; scrollbar-width: none; }
.home::-webkit-scrollbar { display: none; }

.hb-stats { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.hb-rod { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; }
.hb-rod .ifr { width: 30px; height: 30px; flex: none; }
.hb-rod span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hb-rod b { font: 600 11px/1 var(--fb); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-rod small { font: 500 9px/1 var(--fn); color: var(--muted); }
.hb-fici { flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 7px; row-gap: 4px; align-items: center; }
.hb-fici small { font: 500 9px/1 var(--fb); color: var(--dim); }
.hb-fici b { grid-column: 1 / -1; font: 600 9.5px/1 var(--fn); color: var(--lab); text-align: right; }
.cargo { height: 4.5px; border-radius: 2.5px; background: #24211e; overflow: hidden; }
.cargo i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold2), var(--gold)); box-shadow: 0 0 7px rgba(230, 195, 108, .6); transition: width .5s var(--ease); }
.cargo.full i { background: linear-gradient(90deg, #b5543f, var(--danger)); animation: pulseOp 1s infinite; }
/* ---------- Av ekranı ---------- */
.fv-float { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.flt { position: absolute; transform: translate(-50%, 0); font: 700 12px var(--fn); color: var(--c, #fff); text-shadow: 0 1px 4px rgba(0, 0, 0, .9); white-space: nowrap; animation: floatUp 1.4s var(--ease) forwards; }
.flt.big { font: 700 15px var(--fs); letter-spacing: .04em; }
.fv-combo { position: absolute; z-index: 3; right: 10px; top: 10px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 10px 5px; border-radius: 12px; background: rgba(8, 7, 5, .65); box-shadow: inset 0 0 0 1px rgba(231, 194, 106, .35); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s var(--spring); }
.fv-combo.on { opacity: 1; transform: none; }
.fv-combo b { font-size: 15px; color: var(--gold); }
.fv-combo small { font: 600 7.5px var(--fs); letter-spacing: .2em; color: var(--gold2); text-transform: uppercase; }
.fv-combo.pop b { animation: bump .45s var(--spring); }
.fv-full { position: absolute; z-index: 4; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.9); display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 18px; border-radius: 16px; background: rgba(12, 10, 8, .88); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px rgba(226, 112, 95, .45); opacity: 0; visibility: hidden; transition: opacity .3s, transform .4s var(--spring), visibility 0s .4s; }
.fv-full.on { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition: opacity .3s, transform .4s var(--spring), visibility 0s; }
.fv-full b { font: 700 16px var(--fs); color: var(--danger); }
.fv-full small { font: 500 10px var(--fb); color: var(--lab); margin-bottom: 4px; }
.fv-full .btn { height: 32px; }
.fv-tip { position: absolute; z-index: 3; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 5px 11px; border-radius: 99px; background: rgba(8, 7, 5, .7); font: 500 10px var(--fb); color: var(--lab); white-space: nowrap; opacity: 0; transition: opacity .4s; pointer-events: none; }
.fv-tip.on { opacity: 1; }

.fv-bar { flex: none; height: 74px; display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; align-items: center; gap: 4px; padding: 0 6px; border-radius: 22px; background: linear-gradient(180deg, #1f1c1a, #161413); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #2a2622; }
.fb { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #d8cfc6; transition: transform .3s var(--spring); }
.fb:active { transform: scale(.9); }
.fb small { font: 500 9px/1 var(--fb); color: var(--muted); white-space: nowrap; }
.fb .num { font-size: 8.5px; }
.fb-ic, .fb-ring { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #100e0d; box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #2a2622; font-size: 15px; }
.fb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fb-ring .r0 { fill: none; stroke: #2a2622; stroke-width: 2.4; }
.fb-ring .r1 { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: 106.8; transition: stroke-dashoffset .5s var(--ease), stroke .3s; }
.fb-ring.full .r1 { stroke: var(--danger); }
.fb.on .fb-ic { color: var(--gold); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px var(--gold3), 0 0 12px -4px var(--gold); }
.fb.stopped .fb-ic { color: var(--good); }
.pull { position: relative; width: 78px; height: 78px; margin-top: -26px; justify-self: center; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2d2926, #141312 72%); box-shadow: 0 0 0 4px #171514, 0 0 0 5.5px #413826, 0 10px 22px -6px rgba(0, 0, 0, .9); transition: transform .3s var(--spring), box-shadow .3s; }
.pull-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pull-ring .r0 { fill: none; stroke: #2a2622; stroke-width: 3; }
.pull-ring .r1 { fill: none; stroke: var(--gold2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 226.2; stroke-dashoffset: 226.2; }
.pull-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--gold2); }
.pull-in .ic { font-size: 20px; stroke-width: 2; }
.pull-in b { font: 700 11px/1 var(--fs); letter-spacing: .12em; text-transform: uppercase; }
.pull:active { transform: scale(.92); }
.pull.bite { background: radial-gradient(circle at 50% 35%, #f0d07c, #c9a24e 70%); box-shadow: 0 0 0 4px #171514, 0 0 0 5.5px var(--gold), 0 0 30px -2px rgba(231, 194, 106, .8); animation: biteShake .3s ease-in-out infinite; }
.pull.bite .pull-in { color: #1a1410; }
.pull.bite .pull-ring .r1 { stroke: #fff3d6; }
.pull.idle .pull-in { color: var(--good); }
.pull.idle .pull-ring .r1 { stroke-dashoffset: 226.2; }
.pull.hit { animation: hitPop .45s var(--spring); }
.pull.miss { animation: missShake .4s; }

/* ---------- Butonlar ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 17px; border-radius: 859px; font: 700 11.5px/1 var(--fn); letter-spacing: .01em; background: var(--s3); color: var(--text); box-shadow: inset 0 0 0 1px #413826; transition: transform .25s var(--spring), opacity .25s, filter .25s; white-space: nowrap; }
.btn .ic { font-size: 11.5px; stroke-width: 2.4; }
.btn:active { transform: scale(.96); }
.btn.primary { color: #1a1410; background: linear-gradient(180deg, #f0d07c, #e7c26a 55%, #d6af57); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 1px 0 rgba(255, 248, 225, .55), 0 5px 14px -6px rgba(231, 194, 106, .45); }
.btn.primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-130%); animation: btnSheen 6s ease-in-out infinite 1.5s; }
.btn.ghost { background: rgba(10, 8, 6, .4); }
.btn.sell-b { color: #2a1610; background: linear-gradient(180deg, #ffd2bd, #f0aa8c); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 1px 0 rgba(255, 245, 240, .6); }
.btn.danger { background: rgba(226, 112, 95, .08); color: var(--danger); box-shadow: inset 0 0 0 1px rgba(226, 112, 95, .4); }
.btn:disabled, .btn.off { opacity: .38; filter: grayscale(.7); pointer-events: none; }
.btn.wide { width: 100%; }
.btn.sm { height: 30px; padding: 0 12px; font-size: 10.5px; }
.icon-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; font-size: 14.5px; border-radius: 50%; background: #100e0d; color: #e7dccf; box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #2a2622; transition: transform .25s var(--spring); }
.icon-btn .ic { stroke-width: 2; }
.icon-btn:active { transform: scale(.9); }

/* ---------- Dok ---------- */
.dock { position: relative; z-index: 50; height: calc(var(--dock-h) + var(--safe-b)); padding: 0 8.5px var(--safe-b); margin: 0 -12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: linear-gradient(180deg, #1c1a19, #171514); border-top: 1px solid #413826; animation: dockIn .8s var(--ease) both .25s; }
.dock::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(230, 195, 108, .55), transparent); }
.cbtn { position: relative; justify-self: start; width: 44px; height: 44px; margin-left: 4px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: #d8cfc6; background: radial-gradient(circle at 50% 35%, #24211e, #141312 75%); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #3a3125; transition: transform .3s var(--spring); }
.cbtn:active { transform: scale(.9); }
.cb-n { position: absolute; right: -3px; top: -2px; min-width: 18px; height: 15px; padding: 0 4px; border-radius: 8px; font-size: 8px; display: grid; place-items: center; color: #241a08; background: linear-gradient(180deg, #f3d68e, #c9a24e); box-shadow: 0 0 0 2px #171514; }
.cb-n:empty { display: none; }
.dock:has(.nav.open) .buffs { opacity: 0; pointer-events: none; }
.buffs { transition: opacity .25s; display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 99px; background: #121110; box-shadow: inset 0 0 0 1px #2a2622; min-height: 36px; }
.bf { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; color: var(--c, var(--gold)); background: radial-gradient(circle, color-mix(in srgb, var(--c, var(--gold)) 22%, #141312), #141312 75%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--gold)) 45%, transparent); transition: transform .3s var(--spring); animation: rise .4s var(--ease) both; }
.bf img { width: 22px; height: 22px; }
.bf:active { transform: scale(.88); }
.bf small { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); font: 700 7px var(--fn); padding: 1px 3px; border-radius: 4px; background: #0d0b0a; color: var(--c, var(--gold)); white-space: nowrap; }
.bf-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); max-width: 280px; padding: 8px 12px; border-radius: 12px; background: #141210; box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #3a3125, 0 10px 24px -10px #000; font: 500 10.5px/1.35 var(--fb); color: var(--text); text-align: center; opacity: 0; visibility: hidden; transition: opacity .25s, transform .35s var(--spring), visibility 0s .35s; pointer-events: none; }
.bf-tip.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s, transform .35s var(--spring), visibility 0s; }
.bf-tip b { display: block; font: 700 11px var(--fs); color: var(--gold); letter-spacing: .04em; margin-bottom: 2px; }

.nav { position: relative; justify-self: end; width: 52px; height: 52px; margin-right: 2px; }
.menu-btn { position: absolute; right: 0; top: 2px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2d2926, #141312 72%); box-shadow: 0 0 0 4px #171514, 0 0 0 5.5px #413826, 0 8.5px 20.5px -5px rgba(0, 0, 0, .9); transition: transform .4s var(--spring); z-index: 2; }
.menu-btn:active { transform: scale(.9); }
.mb-ring { position: absolute; inset: 2.5px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px -3.5px rgba(230, 195, 108, .6); transition: box-shadow .4s; }
.menu-btn.open .mb-ring { box-shadow: inset 0 0 0 2px var(--gold), 0 0 24px -2px rgba(230, 195, 108, .8); }
.mb-lines { position: relative; width: 17px; height: 12px; transition: transform .5s var(--spring); }
.mb-lines i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--gold); transition: transform .45s var(--spring), opacity .25s, top .3s var(--ease), bottom .3s var(--ease); }
.mb-lines i:nth-child(1) { top: 0; } .mb-lines i:nth-child(2) { top: 5px; } .mb-lines i:nth-child(3) { bottom: 0; }
.menu-btn.open .mb-lines { transform: rotate(90deg); }
.menu-btn.open .mb-lines i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.menu-btn.open .mb-lines i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-btn.open .mb-lines i:nth-child(3) { bottom: 5px; transform: rotate(-45deg); }
.nav-items { position: absolute; right: 24px; top: 4px; height: 44px; display: flex; align-items: center; gap: 2px; padding: 0 34px 0 10px; border-radius: 99px; background: linear-gradient(180deg, #1f1c1a, #141312); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #3a3125, 0 10px 24px -10px #000; transform-origin: right center; transform: scaleX(.3); opacity: 0; visibility: hidden; transition: transform .45s var(--spring), opacity .25s, visibility 0s .45s; }
.nav.open .nav-items { transform: none; opacity: 1; visibility: visible; transition: transform .45s var(--spring), opacity .25s, visibility 0s; }
.nav-up { position: absolute; right: 2px; bottom: 58px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px; border-radius: 26px; background: linear-gradient(180deg, #1f1c1a, #141312); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #3a3125, 0 10px 24px -10px #000; transform-origin: center bottom; transform: translateY(14px) scaleY(.5); opacity: 0; visibility: hidden; transition: transform .45s var(--spring), opacity .25s, visibility 0s .45s; }
.nav.open .nav-up { transform: none; opacity: 1; visibility: visible; transition: transform .45s var(--spring), opacity .25s, visibility 0s; }
.nv { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 50px; padding: 4px 4px 2px; font: 600 9px/1 var(--fb); color: var(--muted); transition: color .3s, transform .3s var(--spring); }
.nv .ic { font-size: 16px; }
.nv.on { color: var(--gold); }
.nv:active { transform: scale(.9); }
.nav.open .nv { animation: rise .35s var(--ease) both; animation-delay: calc(var(--i) * 50ms + 80ms); }
.nvm-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--gold); background: radial-gradient(circle at 50% 35%, #2d2926, #141312 72%); box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px -3.5px rgba(230, 195, 108, .6); font-size: 16px; }
.nvm-ic .ic { font-size: 16px; }
.nv-dot, .bld-dot { pointer-events: none; }
.nv-dot { position: absolute; top: 2px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); display: none; }
.nv-dot.on { display: block; animation: pulseOp 1.2s infinite; }

.dev-btn { position: absolute; z-index: 55; left: 12px; bottom: calc(var(--dock-h) + var(--safe-b) + 10px); display: none; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; font: 700 9.5px var(--fn); letter-spacing: .1em; color: #1b2a16; background: linear-gradient(180deg, #a9d690, #6faa5c); box-shadow: 0 0 0 1.5px #0b0a0a, 0 6px 14px -6px #000; opacity: .85; }
.dev-btn.on { display: inline-flex; }
.dev-btn .ic { font-size: 11px; stroke-width: 2.2; }

/* ---------- Pencere ---------- */
.sheet-layer { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.sheet-layer.on { pointer-events: auto; }
.sheet-bg { position: absolute; inset: -17px; background: rgba(6, 5, 4, .74); backdrop-filter: blur(4.5px); -webkit-backdrop-filter: blur(4.5px); opacity: 0; transition: opacity .35s; }
.sheet-layer.on .sheet-bg { opacity: 1; }
.sheet { position: absolute; left: 10px; right: 10px; top: calc(var(--safe-t) + var(--hud-h) + 10px); bottom: calc(var(--dock-h) + var(--safe-b) + 10px); display: flex; flex-direction: column; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(16px) scale(.94); transition: opacity .25s, transform .45s var(--spring); }
.sheet-layer.on .sheet { opacity: 1; transform: none; }
.sheet-layer:not(.on) .sheet { visibility: hidden; transition: opacity .25s, transform .45s var(--spring), visibility 0s .45s; }
.sheet-in { --rad: 24px; --bd: transparent; --fill: linear-gradient(180deg, #333330 0%, #2b2a27 64px, #1c1a19 150px, #1a1817 100%); display: flex; flex-direction: column; min-height: 0; max-height: 100%; pointer-events: none; box-shadow: 0 0 0 2px #0b0a0a, 0 24px 60px -18px rgba(0, 0, 0, .9); }
.sheet-layer.on .sheet-in { pointer-events: auto; }
.sheet-in.tall { height: 100%; }
.sheet-in::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 103px; z-index: -1; opacity: .7; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 0L56 28L28 56L0 28Z' fill='none' stroke='%23f5e6c4' stroke-opacity='.04' stroke-width='1'/%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.sh-head { flex: none; position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 12px 11px 13px; }
.sh-ic { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 20px; color: var(--gold); overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, #24211e, #1a1817); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #453b28; }
.sh-ic img { width: 40px; height: 40px; }
.sh-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3.5px; }
.sh-t b { font: 700 19px/1 var(--fs); color: #fff3d6; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-t small { font: 400 10.5px/1.2 var(--fb); color: #b8afa9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-t small em { font-style: normal; color: var(--good); }
.sh-x { width: 32px; height: 32px; font-size: 12px; }
.sh-body { position: relative; flex: 1; padding: 2px 12px 12px; overflow-y: auto; min-height: 0; scrollbar-width: none; display: flex; flex-direction: column; gap: 8px; }
.sh-body::-webkit-scrollbar { display: none; }
.sh-body > * { animation: rise .45s var(--ease) both; }
.sh-body > *:nth-child(2) { animation-delay: .04s; } .sh-body > *:nth-child(3) { animation-delay: .08s; } .sh-body > *:nth-child(4) { animation-delay: .12s; } .sh-body > *:nth-child(5) { animation-delay: .16s; }
.sh-tabs { flex: none; display: flex; border-top: 1px solid #2a2622; }
.sh-tabs button { position: relative; flex: 1; height: 40px; font: 700 10.5px var(--fs); letter-spacing: .1em; color: var(--muted); text-align: center; transition: color .3s; }
.sh-tabs button::after { content: ''; position: absolute; left: 25%; right: 25%; bottom: 0; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transition: transform .35s var(--spring); }
.sh-tabs button.on { color: var(--gold); }
.sh-tabs button.on::after { transform: none; }
.sep { display: flex; align-items: center; gap: 8px; font: 700 9px/1 var(--fs); letter-spacing: .2em; color: var(--gold2); text-transform: uppercase; }
.sep::before { content: ''; width: 6px; height: 6px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px var(--gold2); }
.sep::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #4a3f2a, transparent); }
.sep em { font: 600 9px var(--fn); letter-spacing: 0; color: var(--muted); font-style: normal; text-transform: none; }
.box { position: relative; padding: 10px 12px; border-radius: 15px; background: #151312; box-shadow: 0 0 0 1.5px #0b0a0a; }
.kvs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kvs > span { padding: 7px 9px; border-radius: 11px; background: #121110; box-shadow: inset 0 0 0 1px #262220; min-width: 0; }
.kvs small { display: block; font: 500 9px/1 var(--fb); color: var(--dim); white-space: nowrap; }
.kvs b { display: flex; align-items: center; gap: 4px; margin-top: 5px; font: 700 12px var(--fn); color: var(--text); white-space: nowrap; }
.kvs b .coin { font-size: 11px; }

/* eşya ızgarası */
.grid { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 6px; }
.slot { position: relative; aspect-ratio: 1; border-radius: 9px; transition: transform .25s var(--spring); }
.slot.ifr-empty { background: #121110; box-shadow: inset 0 0 0 1px #221f1c; }
.slot.sel { box-shadow: 0 0 0 2px var(--gold), 0 0 12px -2px var(--gold); }
.slot:active { transform: scale(.92); }
.slot .unk { filter: brightness(0) opacity(.5); }

/* seçili eşya paneli */
.det { display: grid; grid-template-columns: 56px 1fr; gap: 6px 11px; padding: 10px; border-radius: 15px; background: #151312; box-shadow: 0 0 0 1.5px #0b0a0a; }
.det > .ifr { width: 56px; height: 56px; grid-row: span 2; }
.det-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.det-t small { font: 700 8.5px/1 var(--fs); letter-spacing: .16em; text-transform: uppercase; color: var(--qc, var(--gold2)); }
.det-t b { font: 700 15px/1.05 var(--fs); color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.det-t span { font: 500 10px/1.2 var(--fb); color: var(--muted); }
.det-a { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.det-a .btn { height: 32px; padding: 0 13px; font-size: 10.5px; }
.det-a .price { margin-right: auto; display: inline-flex; align-items: center; gap: 4px; font: 700 13px var(--fn); }
.empty-note { padding: 18px 10px; text-align: center; font: 500 11px/1.4 var(--fb); color: var(--dim); }

/* satır listesi (olta ustası, tütsühane, görevler) */
.row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: #151312; box-shadow: 0 0 0 1.5px #0b0a0a; }
.row > .ifr { width: 44px; height: 44px; flex: none; }
.row-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #1d1a18; box-shadow: inset 0 0 0 1px #2e2924; font-size: 18px; color: var(--gold); }
.row-ic img { width: 38px; height: 38px; }
.row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row-t b { font: 700 13px/1.05 var(--fs); color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-t small { font: 500 9.5px/1.25 var(--fb); color: var(--muted); }
.row-t small b { font: inherit; color: var(--good); }
.row .btn { flex: none; height: 32px; padding: 0 12px; font-size: 10.5px; }
.row.done { box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px rgba(155, 214, 143, .35); }
.row.cur { box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px var(--gold3); }
.pbar { height: 5px; border-radius: 3px; background: #24211e; overflow: hidden; margin-top: 3px; }
.pbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold2), var(--gold)); transition: width .4s var(--ease); }
.pbar.ok i { background: linear-gradient(90deg, #6faa5c, var(--good)); }
.cost { display: inline-flex; align-items: center; gap: 3px; }
.cost .coin { font-size: 10px; }
.cost.no { color: var(--danger); }

/* tütsühane siparişleri */
.orders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ord { position: relative; height: 74px; border-radius: 13px; background: #121110; box-shadow: inset 0 0 0 1px #262220; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; overflow: hidden; }
.ord .ifr { width: 34px; height: 34px; }
.ord small { font: 600 9px var(--fn); color: var(--lab); }
.ord .pbar { position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px; }
.ord.empty small { color: var(--dim); font-family: var(--fb); font-weight: 500; }
.ord button.x { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; color: var(--muted); background: #1d1a18; }
.stepper { display: inline-flex; align-items: center; gap: 2px; border-radius: 99px; background: #100e0d; box-shadow: inset 0 0 0 1px #2a2622; }
.stepper button { width: 28px; height: 28px; font: 700 13px var(--fn); color: var(--gold); text-align: center; }
.stepper b { min-width: 26px; text-align: center; font: 700 11px var(--fn); }

/* defter */
.dex-tabs { display: flex; gap: 5px; }
.dex-tabs button { flex: 1; height: 30px; border-radius: 10px; font: 700 11px var(--fs); color: var(--muted); background: #121110; box-shadow: inset 0 0 0 1px #262220; }
.dex-tabs button.on { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold3), 0 0 10px -4px var(--gold); background: linear-gradient(180deg, rgba(231, 194, 106, .1), #121110); }
.dex-tabs button.full { color: var(--good); }
.dex { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.dx { display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 12px; background: #121110; box-shadow: inset 0 0 0 1px #262220; min-width: 0; }
.dx .ifr { width: 40px; height: 40px; flex: none; }
.dx span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dx b { font: 700 11px/1.05 var(--fs); color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx small { font: 500 8.5px/1.2 var(--fn); color: var(--muted); white-space: nowrap; }
.dx.unk b { color: var(--dim); }
.dex-bonus { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #151312; box-shadow: 0 0 0 1.5px #0b0a0a; font: 500 10px var(--fb); color: var(--lab); }
.dex-bonus .ic { font-size: 14px; color: var(--gold); }
.dex-bonus.ok { box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px rgba(155, 214, 143, .35); color: var(--good); }

/* rehber */
.guide { font: 400 12px/1.5 var(--fb); color: var(--text); }
.guide h2 { font: 700 15px var(--fs); color: var(--gold); margin: 12px 0 4px; letter-spacing: .02em; }
.guide h3 { font: 700 12px var(--fs); color: var(--gold2); margin: 8px 0 3px; letter-spacing: .06em; }
.guide p { margin: 3px 0; color: var(--lab); }
.guide ul { margin: 3px 0 3px 16px; color: var(--lab); }
.guide table { width: 100%; border-collapse: collapse; margin: 6px 0; font: 500 10px var(--fn); }
.guide th { text-align: left; color: var(--gold2); font-weight: 700; padding: 4px 5px; border-bottom: 1px solid #413826; }
.guide td { padding: 4px 5px; border-bottom: 1px solid #262220; color: var(--text); }
.guide strong { color: var(--title); }
.guide blockquote { margin: 6px 0; padding: 6px 10px; border-left: 2px solid var(--gold3); background: #151312; border-radius: 0 8px 8px 0; color: var(--lab); }

/* sen yokken */
.away { display: flex; flex-direction: column; gap: 8px; }
.away-top { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 0 2px; }
.away-top span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.away-top small { font: 500 9px var(--fb); color: var(--dim); }
.away-top b { font: 700 17px var(--fn); color: var(--title); display: flex; align-items: center; gap: 5px; }

/* ---------- Ana menü ---------- */
.menu-layer { position: absolute; inset: 0; z-index: 80; pointer-events: none; }
.menu-layer.on { pointer-events: auto; }
.menu-bg { position: absolute; inset: 0; background: rgba(6, 5, 4, .6); opacity: 0; transition: opacity .35s; }
.menu-layer.on .menu-bg { opacity: 1; }
.menu-win { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 50px; background: repeating-linear-gradient(135deg, rgba(255, 236, 200, .022) 0 1px, transparent 1px 10px), linear-gradient(180deg, #25211e 0%, #171514 30%, #171514 75%, #1b1816 100%); transform: translateX(-104%); transition: transform .5s var(--ease); box-shadow: 18px 0 40px -10px rgba(0, 0, 0, .85); }
.menu-layer.on .menu-win { transform: none; }
.menu-layer:not(.on) .menu-win { visibility: hidden; transition: transform .5s var(--ease), visibility 0s .5s; }
.mw-main { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: calc(var(--safe-t) + 16px) 12px calc(var(--safe-b) + 14px) 14px; }
.mw-main > * { opacity: 0; transform: translateX(-14px); transition: opacity .35s, transform .5s var(--ease); }
.menu-layer.on .mw-main > * { opacity: 1; transform: none; }
.menu-layer.on .mw-main > *:nth-child(2) { transition-delay: .05s; } .menu-layer.on .mw-main > *:nth-child(3) { transition-delay: .1s; } .menu-layer.on .mw-main > *:nth-child(4) { transition-delay: .15s; } .menu-layer.on .mw-main > *:nth-child(5) { transition-delay: .2s; } .menu-layer.on .mw-main > *:nth-child(6) { transition-delay: .25s; }
.mw-title { display: flex; align-items: center; gap: 14px; }
.mw-title h2 { font: 700 24px/1 var(--fs); letter-spacing: .02em; color: #f6ecd2; }
.mw-title i { flex: 1; height: 1px; background: linear-gradient(90deg, #6d5e3b, transparent); }
.mw-prof { position: relative; flex: none; display: flex; align-items: center; gap: 12px; padding: 14px; overflow: hidden; border-radius: 20px; background: linear-gradient(180deg, #383126 0%, #2f2a22 45%, #27221d 100%); box-shadow: 0 0 0 2px #0b0a0a, inset 0 0 0 1px #564a33, 0 10px 24px -12px #000; }
.mp-av { position: relative; width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2d2926, #141312 72%); box-shadow: inset 0 0 0 2px var(--gold), 0 0 16px -4px rgba(230, 195, 108, .6); }
.mp-av img { width: 46px; height: 46px; }
.mp-av .lvl { font-size: 9px; min-width: 20px; height: 18px; border-radius: 9px; }
.mp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-t b { font: 700 18px/1 var(--fs); color: var(--title); letter-spacing: .03em; }
.mp-t small { font: 500 10px var(--fb); color: var(--lab); }
.mp-xp { height: 4px; border-radius: 2px; background: #1a1714; overflow: hidden; }
.mp-xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); }
.mw-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mq { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 9px; border-radius: 16px; background: linear-gradient(180deg, #24211e, #191716); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #2e2924; font: 600 10.5px/1 var(--fb); color: #e6d3a4; transition: transform .3s var(--spring); }
.mq img { width: 40px; height: 40px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }
.mq:active { transform: scale(.94); }
.mw-sep { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.mw-sep i { flex: 1; height: 1px; background: #685938; }
.mw-sep b { width: 8px; height: 8px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px var(--gold2); }
.mw-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.mw-stats span { padding: 9px 11px; border-radius: 13px; background: #151312; box-shadow: 0 0 0 1.5px #0b0a0a; }
.mw-stats small { display: block; font: 500 9px var(--fb); color: var(--dim); }
.mw-stats b { display: block; margin-top: 4px; font: 700 13px var(--fn); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-rail { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: calc(var(--safe-t) + 14px) 0 calc(var(--safe-b) + 18px); border-left: 1px solid #29241d; background: linear-gradient(180deg, #191716, #141312); }
.mw-close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: var(--gold); background: #2d2926; box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 2px #695a3a, 0 6px 14px -6px #000; transition: transform .35s var(--spring); }
.mw-close .ic { stroke-width: 2.2; }
.mw-close:active { transform: scale(.88); }
.mw-rl { width: 22px; height: 1px; background: var(--gold3); }
.mw-ico { font-size: 18.5px; color: #b8ada4; transition: color .2s, transform .3s var(--spring); }
.mw-ico:active { transform: scale(.88); color: var(--gold); }
.mw-brand { margin-top: auto; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 11.5px/1 var(--fs); letter-spacing: .5em; color: #423824; }

/* ---------- İlk giriş ---------- */
.intro { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(8, 7, 6, .92); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.intro.on { opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s; }
.in-card { --rad: 24px; --bd: #564a33; width: 100%; max-width: 380px; display: flex; flex-direction: column; animation: cardIn .8s var(--ease) both; }
.in-card canvas { display: block; width: 100%; height: 190px; }
.in-body { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 0 16px 16px; margin-top: -30px; }
.in-body h1 { font: 700 30px/1 var(--fs); color: var(--gold); letter-spacing: .03em; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.in-body p { font: 400 12px/1.45 var(--fb); color: var(--lab); }
.in-name { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 14px; background: #121110; box-shadow: inset 0 0 0 1px #2e2924; }
.in-name small { font: 700 8.5px var(--fs); letter-spacing: .16em; text-transform: uppercase; color: var(--gold2); flex: none; }
.in-name input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; text-align: right; font: 700 14px var(--fs); color: var(--title); letter-spacing: .04em; }

/* Büyük bildirim kartı: Astralis yalnız Destansı ve üstüne renk verir; Derinsu'da olta dökümü ve sandık her nadirlikte büyük kart olur */
.nb-slit .r-white { --rd: #2b2723; } .nb-slit .r-green { --rd: #10301a; } .nb-slit .r-blue { --rd: #0c2440; }
.nb-slit .r-white .gtl { --t0: #ffffff; --t1: #ece6da; --t2: #b9b2a6; }
.nb-slit .r-green .gtl { --t0: #d8ffcc; --t1: #8fe07f; --t2: #4fa843; }
.nb-slit .r-blue .gtl { --t0: #d6ecff; --t1: #82c0f7; --t2: #3c86d6; }


/* ---------- Ana ekran: şehir ve deniz kartları ---------- */
.home { gap: 10px; }
.home { padding-top: 6px; }
/* Şehir kartı: Astralis başkent kartı gibi çifte altın çerçeve, köşe elmasları, arma ve dalgalanan sancak */
.city-card { --rad: 24px; --bd: #8a7144; --fill: linear-gradient(180deg, #262321, #171514); flex: 1.3 1 0; min-height: 210px; max-height: 330px; display: block; width: calc(100% - 8px); margin: 0 4px; text-align: left;
  box-shadow: 0 0 0 1.5px #0b0a0a, 0 0 0 4px #1b1713, 0 0 0 5px #6a5634, 0 0 0 6.5px #0b0a0a, 0 18px 36px -18px rgba(0, 0, 0, .95); animation: cardIn .8s var(--ease) both .1s; transition: transform .3s var(--spring); }
.cf { position: absolute; z-index: 3; inset: 6px; border-radius: 19px; border: 1px solid rgba(231, 194, 106, .3); pointer-events: none; }
.cf i { position: absolute; width: 7px; height: 7px; transform: rotate(45deg); background: linear-gradient(135deg, #f3d68e, #a8823e); box-shadow: 0 0 0 1px #0b0a0a, 0 0 6px rgba(231, 194, 106, .45); }
.cf .tl { left: 18px; top: -4.5px; } .cf .tr { right: 18px; top: -4.5px; }
.cf .bl { left: 18px; bottom: -4.5px; } .cf .br { right: 18px; bottom: -4.5px; }
.crest { position: absolute; z-index: 4; left: 50%; top: -1px; width: 40px; height: 47px; margin-left: -20px; display: grid; place-items: center; padding-bottom: 8px; font-size: 18px; color: var(--gold);
  background: linear-gradient(180deg, #f0d48a, #7a5c2c); clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); }
.crest::before { content: ''; position: absolute; inset: 0 1.5px 2.5px; background: linear-gradient(180deg, #2e261c, #141110); clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); }
.crest .ic { position: relative; filter: drop-shadow(0 0 6px var(--gold)); }
.banner { position: absolute; z-index: 4; right: 26px; top: -1px; width: 25px; height: 52px; display: flex; justify-content: center; padding-top: 11px; font-size: 12px; color: #fff3d0;
  background: linear-gradient(180deg, #4f8a86, #24504c); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  box-shadow: inset 0 4px 0 #3a2a1a; transform-origin: top center; animation: banWave 3.4s ease-in-out infinite; }
@keyframes banWave { 0%, 100% { transform: skewX(0) scaleY(1); } 50% { transform: skewX(-5deg) scaleY(.96); } }
.city-card:active, .sea-card:active { transform: scale(.98); }
.cc-scene { position: absolute; inset: 0; z-index: 0; }
.cc-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 18, 14, 0) 25%, rgba(21, 18, 14, .78) 58%, #171514 84%); }
.cc-body, .sc-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 14px 12px; display: flex; flex-direction: column; }
.cc-body .eyebrow span { color: var(--gold); }
.cc-name { font: 700 clamp(21px, 7vw, 25px)/1 var(--fs); letter-spacing: .02em; color: var(--gold); margin-top: 5px; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.cc-desc { font: 400 11px/1.35 var(--fb); color: #cfc8c2; margin-top: 3.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.enter-btn { margin-left: auto; height: 34px; padding: 0 11px 0 15px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 99px; background: rgba(8, 7, 5, .7); box-shadow: inset 0 0 0 1px #3a3125; font: 600 9.5px var(--fn); color: var(--lab); white-space: nowrap; flex: none; }
.chip .ic { font-size: 11px; color: var(--gold); }
.chip b { color: var(--title); }
.chip-btn { height: 30px; padding: 0 12px; color: var(--gold); transition: transform .25s var(--spring); }
.chip-btn:active { transform: scale(.94); }

.sea-card { --rad: 22px; --bd: #2e4a4c; --fill: #12201f; flex: 1 1 0; min-height: 170px; max-height: 320px; display: block; width: 100%; text-align: left; box-shadow: 0 0 0 1.5px #0b0a0a, 0 12px 28px -16px rgba(0, 0, 0, .9); animation: cardIn .8s var(--ease) both .22s; transition: transform .3s var(--spring); }
.sea-card.on { --bd: #6d5e3b; }
.sc-scene { position: absolute; inset: 0; }
.sc-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 18, 18, .92) 25%, rgba(14, 18, 18, .4) 70%, rgba(14, 18, 18, .15)); }
.sc-wave { position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(170deg, transparent 0 18px, rgba(230, 240, 236, .05) 18px 19px); animation: waveSlide 6s linear infinite; }
.sc-body { right: 110px; padding-bottom: 14px; }
.sc-name { font: 700 24px/1 var(--fs); color: #cfe6dc; letter-spacing: .02em; margin-top: 5px; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.sc-sub { font: 400 11px/1.3 var(--fb); color: #b8c4bf; margin-top: 4px; }
.sc-sub b { color: var(--title); font-weight: 700; }
.sc-go { position: absolute; z-index: 2; right: 12px; bottom: 12px; height: 32px; padding: 0 10px 0 14px; font-size: 10.5px; color: #cfe6dc; box-shadow: inset 0 0 0 1px rgba(127, 179, 168, .45); }
.sc-hex { position: absolute; z-index: 2; right: 18px; top: 16px; width: 78px; height: 64px; transform: scale(1.15); transform-origin: top right; }
.sc-hex i { position: absolute; width: 24px; height: 27px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(207, 230, 220, .14); box-shadow: inset 0 0 0 1px rgba(207, 230, 220, .3); animation: hexPulse 3s ease-in-out infinite; }
.sc-hex i:nth-child(1) { left: 0; top: 0; } .sc-hex i:nth-child(2) { left: 26px; top: 0; animation-delay: .4s; } .sc-hex i:nth-child(3) { left: 52px; top: 0; animation-delay: .8s; }
.sc-hex i:nth-child(4) { left: 13px; top: 21px; animation-delay: 1.2s; background: rgba(231, 194, 106, .35); } .sc-hex i:nth-child(5) { left: 39px; top: 21px; animation-delay: 1.6s; }
.sc-hex i:nth-child(6) { left: 0; top: 42px; animation-delay: 2s; } .sc-hex i:nth-child(7) { left: 26px; top: 42px; animation-delay: 2.4s; }
.home-stats { flex: none; padding: 10px 12px; border-radius: 16px; background: #151312; box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #24201d; animation: cardIn .8s var(--ease) both .3s; }

/* ---------- Harita görünümleri ---------- */
.city-view, .sea-view, .areas-view { gap: 8px; }
.bv-top { flex: none; display: flex; align-items: center; gap: 9px; min-width: 0; height: 36px; }
.bv-top .icon-btn { width: 32px; height: 32px; font-size: 12.5px; }
.bv-name { flex: 1; min-width: 0; font: 700 16px/1 var(--fs); letter-spacing: .03em; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sv-tier { font: 600 9px/1 var(--fn); color: var(--qc, var(--lab)); letter-spacing: .04em; }
.bv-map { --rad: 20px; --bd: #29241d; --fill: #0d0c0b; flex: 1; min-height: 0; }
.mv { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; overflow: hidden; }
.mv.drag { cursor: grabbing; }
.bv-map.mv::after, .sea-stage::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(10, 9, 8, .55)); }
.mv-world { position: absolute; left: 0; top: 0; will-change: transform; }
.mv-bg { position: absolute; inset: 0; }
.mv-canvas { display: block; width: 100%; height: 100%; }
.mv-marks { position: absolute; inset: 0; }
.mv-fx { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.mv-center { position: absolute; z-index: 5; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: var(--gold); background: rgba(14, 12, 10, .85); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #4a3f2a; opacity: 0; transform: scale(.8); pointer-events: none; transition: opacity .25s, transform .35s var(--spring); }
.mv-center.on { opacity: 1; transform: none; pointer-events: auto; }
.mv-me { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.mv-me.hero::before { content: ''; position: absolute; left: -13px; top: -2px; width: 26px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(231, 194, 106, .8); box-shadow: 0 0 8px rgba(231, 194, 106, .45); animation: meRing 2.2s ease-in-out infinite; }
.mv-hero { position: absolute; left: -16px; top: -38px; width: 32px; height: 42px; overflow: visible; }
.mv-me.flip .mv-hero { scale: -1 1; }
.mv-me.walk .mv-body { animation: heroBob .3s ease-in-out infinite alternate; }
.mv-leg { transform-box: fill-box; transform-origin: top center; }
.mv-me.walk .mv-leg.l { animation: legSw .3s ease-in-out infinite alternate; }
.mv-me.walk .mv-leg.r { animation: legSw .3s ease-in-out infinite alternate-reverse; }
.mv-boat { position: absolute; left: -20px; top: -32px; width: 40px; height: 64px; overflow: visible; filter: drop-shadow(0 0 6px rgba(231, 194, 106, .25)); }
.mv-me.boat::before { content: ''; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(231, 194, 106, .55); animation: meRing 2.2s ease-in-out infinite; }
.mv-me.boat.walk .mv-boat { animation: boatRock .9s ease-in-out infinite alternate; }

/* şehir yapılarının levhaları */
.mk { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 1200; animation: wnIn .5s var(--spring) both; }
.mk-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; color: var(--gold); background: radial-gradient(circle at 50% 35%, #2d2926, #141312 72%); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1.5px #6d5e3b, 0 6px 10px -4px rgba(0, 0, 0, .85); transition: transform .25s var(--spring); }
.mk small { padding: 0 7px; border-radius: 99px; font: 600 9.5px var(--fb); line-height: 16px; color: #f2ead8; background: rgba(10, 9, 8, .84); box-shadow: inset 0 0 0 1px #3a3125; white-space: nowrap; }
.mk:active .mk-ic { transform: scale(.88); }
.mk.grand .mk-ic { width: 36px; height: 36px; font-size: 16px; box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 2px var(--gold), 0 0 16px -4px var(--gold); }
.mk.sea .mk-ic { width: 40px; height: 40px; font-size: 18px; color: #1a1410; background: linear-gradient(180deg, #f0d07c, #c9a24e); box-shadow: 0 0 0 1.5px #0b0a0a, 0 0 20px -2px rgba(231, 194, 106, .8); animation: midPulse 1.8s ease-in-out infinite; }
.mk.sea small { color: #1a1410; background: linear-gradient(180deg, #f0d07c, #d6af57); box-shadow: 0 0 0 1px #0b0a0a; font-weight: 700; font-family: var(--fs); letter-spacing: .06em; }

/* balık sürüleri */
.sm { position: absolute; transform: translate(-50%, calc(-100% + 17px)); display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; z-index: 1100; animation: wnIn .5s var(--spring) both; }
.sm-core { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: var(--qc); background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--qc) 30%, #10161a), rgba(10, 14, 16, .9) 75%); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1.5px color-mix(in srgb, var(--qc) 70%, transparent), 0 6px 10px -4px rgba(0, 0, 0, .85); transition: transform .25s var(--spring); }
.sm-ring { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--qc) 45%, transparent); opacity: .7; pointer-events: none; }
.sm.q2 .sm-ring { animation: ndPulse 2.6s ease-out infinite; }
.sm.q3 .sm-ring { border-color: var(--qc); animation: ndPulse 1.6s ease-out infinite; }
.sm.q3 .sm-core { box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 2px var(--qc), 0 0 22px -2px var(--qc); }
.sm small { padding: 0 6px; border-radius: 99px; font: 500 9px var(--fn); line-height: 15px; color: #f2ead8; background: rgba(10, 9, 8, .82); box-shadow: inset 0 0 0 1px #2e2925; white-space: nowrap; }
.sm.on .sm-ring { border: 1.5px dashed var(--gold); opacity: 1; animation: spin 6s linear infinite; }
.sm.on small { color: #f3d68e; box-shadow: inset 0 0 0 1px #665738; }
.sm:active .sm-core { transform: scale(.88); }

/* deniz sahnesi */
.sea-stage { --rad: 20px; --bd: #29241d; --fill: #0d1214; flex: 1; min-height: 0; }
.sea-stage > .mv { position: absolute; inset: 0; }
.sv-chip { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 99px; background: rgba(8, 7, 5, .78); box-shadow: inset 0 0 0 1px #3a3125; font: 600 9.5px var(--fn); color: var(--lab); pointer-events: none; white-space: nowrap; }
.sv-chip .ic { font-size: 11px; color: var(--gold); }
.sv-chip b { color: var(--title); }
.sv-chip i { width: 6px; height: 6px; transform: rotate(45deg); }
.sv-permit { left: 10px; top: 10px; }
.sv-info { left: 10px; top: 40px; }
.fv-float { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }

/* ---------- Denizler: 8 hex ---------- */
.areas-view { overflow-y: auto; scrollbar-width: none; }
.areas-view::-webkit-scrollbar { display: none; }
.ar-head { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 2px 6px 0; }
.ar-title { display: flex; align-items: center; gap: 9px; width: 100%; }
.ar-title i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #6d5e3b); }
.ar-title i:last-child { background: linear-gradient(90deg, #6d5e3b, transparent); }
.ar-title b { font: 700 13px/1 var(--fs); letter-spacing: .1em; color: var(--gold); text-transform: uppercase; white-space: nowrap; }
.ar-head small { font: 400 10.5px/1.35 var(--fb); color: var(--muted); max-width: 320px; }
.hexes { position: relative; flex: none; width: 100%; }
.hx { position: absolute; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 70%, #e7c26a), color-mix(in srgb, var(--tc) 35%, #2a2420)); animation: hexIn .6s var(--spring) both; animation-delay: calc(var(--i) * 55ms + 80ms); transition: transform .3s var(--spring), filter .3s; }
.hx:active { transform: scale(.95); }
.hx-in { position: absolute; inset: 2px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.hx-in canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-sh { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(14, 12, 10, .45), rgba(14, 12, 10, .88) 75%); }
.hx-t { position: absolute; top: 13%; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 700 10.5px/1 var(--fs); color: var(--tc); background: rgba(12, 10, 8, .85); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 60%, transparent); }
.hx-tx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 0 12%; margin-top: 10%; }
.hx-tx b { font: 700 12px/1.05 var(--fs); color: var(--title); letter-spacing: .02em; text-shadow: 0 1px 6px #000; }
.hx-tx small { font: 500 9px/1 var(--fb); color: var(--lab); }
.hx-time { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--gold); padding: 2px 7px; border-radius: 99px; background: rgba(10, 9, 8, .8); white-space: nowrap; }
.hx.lock { filter: grayscale(.75) brightness(.7); }
.hx-lock { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 15%; gap: 4px; font-size: 11px; color: var(--danger); background: rgba(10, 8, 6, .35); }
.hx-lock .ic { margin-bottom: 1px; }
.hx-lock small { font: 600 8.5px var(--fn); color: #f0b8a8; }
.hx.lock .hx-time { display: none; }
.hx.here { animation: hexIn .6s var(--spring) both, hexHere 1.8s ease-in-out infinite .7s; }
.hx-here { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%); z-index: 2; font: 700 7.5px/1 var(--fs); letter-spacing: .14em; color: #1a1410; padding: 3px 7px; border-radius: 99px; background: var(--gold); }
.hx.here .hx-time { bottom: 25%; }
.tier { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 700 12px/1 var(--fs); color: var(--tc, var(--gold)); background: radial-gradient(circle at 50% 35%, #2a2622, #121110); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1.5px color-mix(in srgb, var(--tc, var(--gold)) 55%, #2a2622); }
.ar-here { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; text-align: left; background: linear-gradient(90deg, rgba(231, 194, 106, .12), #151312 70%); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #6d5e3b; animation: rise .45s var(--ease) both; }
.ar-here[hidden] { display: none; }
.ar-here .tier { width: 32px; height: 32px; font-size: 11px; }
.ar-here > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ar-here b { font: 700 13px/1 var(--fs); color: var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-here small { font: 500 9.5px var(--fb); color: var(--muted); }
.ar-rod { flex: none; padding: 10px 12px; border-radius: 16px; background: #151312; box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #24201d; }
.ar-rod small { white-space: normal; line-height: 1.35; }
.ar-rod small em { font-style: normal; color: var(--gold); }

/* ---------- Yolculuk ---------- */
.trip { position: absolute; inset: 0; z-index: 58; display: grid; place-items: center; pointer-events: none; }
.trip::before { content: ''; position: absolute; inset: -12px; background: rgba(8, 7, 6, .74); opacity: 0; transition: opacity .35s; }
.trip.on { pointer-events: auto; }
.trip.on::before { opacity: 1; }
.tp-card { --rad: 22px; --bd: #3a3125; position: relative; width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 14px 14px; opacity: 0; transform: translateY(14px) scale(.95); transition: opacity .3s, transform .45s var(--spring); }
.trip.on .tp-card { opacity: 1; transform: none; }
.trip:not(.on) .tp-card { visibility: hidden; transition: opacity .3s, transform .45s var(--spring), visibility 0s .45s; }
.tp-road { width: 100%; display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; align-items: center; gap: 2px; }
.tp-pt { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.tp-pt i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 16px; font-style: normal; color: var(--c); background: radial-gradient(circle at 50% 35%, #2a2622, #121110); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent); }
.tp-pt:last-child i { animation: midPulse 1.6s ease-in-out infinite; }
.tp-pt b { font: 700 10.5px/1.1 var(--fs); color: var(--title); max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-pt small { font: 500 8.5px/1 var(--fn); color: var(--muted); white-space: nowrap; }
.tp-rom { font: 700 12px var(--fs); }
.tp-svg { width: 100%; height: auto; overflow: visible; }
.tp-sea { fill: none; stroke: rgba(127, 179, 168, .14); stroke-width: 14; stroke-linecap: round; }
.tp-base { fill: none; stroke: #3a3125; stroke-width: 1.5; stroke-dasharray: 3 4; }
.tp-fill { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; }
.tp-foot { display: flex; align-items: baseline; gap: 4px; }
.tp-foot b { font-size: 20px; color: var(--gold); }
.tp-foot small { font: 500 10px var(--fb); color: var(--muted); }
.tp-x { margin-left: 14px; height: 30px; padding: 0 14px; font-size: 10.5px; align-self: center; }

@keyframes meRing { 50% { opacity: .45; transform: scale(.9); } }
@keyframes heroBob { to { transform: translateY(-1.5px); } }
@keyframes legSw { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes boatRock { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes wnIn { from { opacity: 0; scale: .6; } }
@keyframes ndPulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes midPulse { 50% { filter: brightness(1.18); } }
@keyframes hexIn { from { opacity: 0; transform: scale(.7); } }
@keyframes hexHere { 50% { filter: brightness(1.25) drop-shadow(0 0 8px var(--gold)); } }
@keyframes hexPulse { 50% { opacity: .5; } }
@keyframes waveSlide { to { background-position: 0 38px; } }

/* ---------- Animasyonlar ---------- */
@keyframes islIn { from { opacity: 0; transform: translate(-50%, -14px) scale(.85); } }
@keyframes islSheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes dockIn { from { opacity: 0; transform: translateY(20px); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes bump { 40% { transform: scale(1.22); } }
@keyframes lvlUp { 30% { transform: scale(1.7); } 60% { transform: scale(.9); } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }
@keyframes pulseOp { 50% { opacity: .4; } }
@keyframes btnSheen { 0%, 70% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
@keyframes biteShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.04); } 75% { transform: rotate(4deg) scale(1.04); } }
@keyframes hitPop { 40% { transform: scale(1.14); } }
@keyframes missShake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes hookBob { 50% { transform: translateY(2px) rotate(-8deg); } }
@keyframes ringGlow { 50% { box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1.5px var(--gold), 0 0 14px -2px var(--gold); } }

@media (max-height: 700px) {
  .fv-bar { height: 66px; }
  .pull { width: 70px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }