/* Yuki — Adventures, training, duel island screens */

#adventures-screen,#training-screen,#duel-island-screen{align-items:center;flex-direction:column;overflow-y:auto}
#adventures-screen{position:relative}
.adv-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border-bottom:1px solid var(--gold-border);background:var(--bg-hud);position:relative;z-index:2}
.adv-header-spacer{width:120px}
.adv-title{font-size:1.4rem;font-weight:400;color:var(--gold);letter-spacing:3px;flex:1;text-align:center}

/* ===== ADVENTURES HUB — Seçim Zemini ===== */
.adv-backdrop{position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(154,106,186,0.08), transparent 70%),
        radial-gradient(ellipse 100% 70% at 50% 0%, rgba(200,160,40,0.05), transparent 60%),
        radial-gradient(circle at 20% 40%, rgba(90,168,216,0.04), transparent 50%)}
.adv-backdrop::before{content:'';position:absolute;inset:0;
    background-image:radial-gradient(circle at 50% 50%, rgba(232,200,64,0.4) 0.5px, transparent 1px);
    background-size:140px 140px;opacity:0.08;animation:adv-drift 60s linear infinite}
@keyframes adv-drift{0%{background-position:0 0}100%{background-position:140px 140px}}

#adventures-screen > *:not(.adv-backdrop){position:relative;z-index:1}

.adv-tagline{text-align:center;padding:40px 20px 8px}
.adv-tagline-main{font-size:2rem;color:var(--text);font-weight:300;letter-spacing:0.12em;margin-bottom:10px}
.adv-tagline-main em{color:var(--gold);font-style:normal}
.adv-tagline-sub{font-size:0.95rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase}

.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));
    gap:24px;max-width:1200px;width:100%;margin:40px auto 24px;padding:0 40px}

.mode-tile{position:relative;height:280px;border:1px solid var(--gold-border);border-radius:6px;
    overflow:hidden;cursor:pointer;background:#0a080b;
    transition:transform 0.4s cubic-bezier(.2,.8,.3,1),border-color 0.3s,box-shadow 0.3s;
    font-family:inherit;text-align:left;color:inherit;padding:0;width:100%}
.mode-tile:hover:not(.locked){transform:translateY(-6px);border-color:rgba(232,200,64,0.5);
    box-shadow:0 20px 60px -10px rgba(0,0,0,0.8),0 0 48px -8px rgba(232,200,64,0.28)}

.tile-art{position:absolute;inset:0;transition:transform 0.6s cubic-bezier(.2,.8,.3,1)}
.mode-tile:hover:not(.locked) .tile-art{transform:scale(1.06)}

.tile-overlay{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,
        rgba(10,8,11,0.96) 0%,rgba(10,8,11,0.70) 35%,rgba(10,8,11,0.15) 70%,transparent 100%)}

.tile-shine{position:absolute;top:0;left:-40%;width:30%;height:100%;pointer-events:none;
    background:linear-gradient(100deg,transparent 0%,rgba(255,230,140,0.08) 40%,
        rgba(255,230,140,0.18) 50%,rgba(255,230,140,0.08) 60%,transparent 100%);
    transform:skewX(-20deg);transition:left 0.8s cubic-bezier(.2,.8,.3,1)}
.mode-tile:hover:not(.locked) .tile-shine{left:110%}

.tile-content{position:absolute;left:32px;right:32px;bottom:28px;z-index:2}
.tile-meta{display:flex;align-items:center;gap:10px;font-size:0.72rem;color:var(--gold);
    letter-spacing:0.25em;text-transform:uppercase;margin-bottom:10px}
.tile-meta::before,.tile-meta::after{content:'';height:1px;background:var(--gold-border);flex:1;max-width:40px}
.tile-name{font-size:1.9rem;color:var(--text);font-weight:400;letter-spacing:0.06em;
    margin-bottom:10px;text-shadow:0 2px 16px rgba(0,0,0,0.9)}
.tile-desc{font-size:0.95rem;color:var(--text-dim);line-height:1.5;max-width:420px;margin-bottom:18px}
.tile-footer{display:flex;align-items:center;justify-content:space-between;gap:20px}
.tile-progress{flex:1;max-width:200px}
.progress-label{font-size:0.72rem;color:var(--text-muted);letter-spacing:0.2em;
    text-transform:uppercase;margin-bottom:6px}
.progress-bar{height:3px;background:rgba(180,140,60,0.15);border-radius:2px;overflow:hidden;position:relative}
.progress-fill{position:absolute;inset:0;
    background:linear-gradient(90deg,#c9a646,var(--gold));
    box-shadow:0 0 8px rgba(232,200,64,0.28);border-radius:2px;width:0%;
    transition:width 0.6s ease}
.tile-cta{font-size:0.85rem;color:var(--gold);letter-spacing:0.2em;text-transform:uppercase;
    opacity:0.8;transition:opacity 0.3s,gap 0.3s;display:inline-flex;align-items:center;gap:8px}
.tile-cta::after{content:'→';font-size:1.1rem}
.mode-tile:hover:not(.locked) .tile-cta{opacity:1;gap:14px}

/* Tile variants */
.tile-training .tile-art{
    background:
        radial-gradient(ellipse at 65% 45%, rgba(200,160,40,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 80%, rgba(154,106,186,0.12) 0%, transparent 55%),
        linear-gradient(135deg, #1a1318 0%, #0d0b0e 70%)}
.tile-training .tile-art::before{content:'⚔';position:absolute;right:-40px;top:50%;
    transform:translateY(-50%) rotate(-8deg);font-size:14rem;line-height:1;
    color:rgba(232,200,64,0.08);font-family:serif;text-shadow:0 0 40px rgba(232,200,64,0.1)}

.tile-island .tile-art{
    background:url('../img/duel-island.png') right center/cover no-repeat, #1a1318}
.tile-island .tile-art::after{content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(10,8,11,0.9) 0%,rgba(10,8,11,0.3) 50%,rgba(10,8,11,0.1) 100%)}

/* Locked tiles */
.secondary-label{text-align:center;margin:32px 0 18px;font-size:0.8rem;color:var(--text-muted);
    letter-spacing:0.4em;text-transform:uppercase}
.secondary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:18px;max-width:1200px;width:100%;margin:0 auto 40px;padding:0 40px}
.mode-tile.locked{cursor:not-allowed;height:200px}
.mode-tile.locked:hover{transform:none;border-color:var(--gold-border);box-shadow:none}
.mode-tile.locked .tile-art{opacity:0.35}
.mode-tile.locked .tile-content{opacity:0.55}
.mode-tile.locked .tile-cta{display:none}
.mode-tile.locked::after{content:'🔒 YAKINDA';position:absolute;top:14px;right:14px;
    font-size:0.7rem;letter-spacing:0.3em;color:var(--text-muted);
    background:rgba(10,8,11,0.8);padding:6px 12px;border:1px solid var(--gold-border);z-index:3}
.tile-shadow .tile-art{background:radial-gradient(ellipse at center, #2a1838 0%, #0a0612 80%)}
.tile-tourn .tile-art{background:radial-gradient(ellipse at center, #1a2838 0%, #08101a 80%)}

.adv-subtitle{color:var(--text-dim);font-style:italic;margin-top:24px;font-size:0.95rem;letter-spacing:1px}
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:28px 40px;max-width:900px;width:100%}
.adv-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    padding:24px 16px;border:1px solid var(--gold-border);border-radius:8px;
    background:rgba(180,140,60,0.03);cursor:pointer;transition:all 0.25s;font-family:inherit}
.adv-card:hover{border-color:rgba(200,170,60,0.4);background:rgba(180,140,60,0.08);
    box-shadow:0 0 30px rgba(200,160,40,0.08);transform:translateY(-4px)}
.adv-icon{font-size:2.4rem}
.adv-name{font-size:0.95rem;color:var(--text);letter-spacing:1px;font-weight:700}
.adv-desc{font-size:0.72rem;color:var(--text-muted);text-align:center}

/* --- Macera Menu Banner --- */
.adv-menu{display:flex;flex-direction:column;gap:18px;padding:32px 40px;max-width:700px;width:100%}
.adv-banner{display:flex;align-items:center;gap:20px;padding:20px 28px;
    border:1px solid var(--gold-border);border-radius:12px;background:rgba(180,140,60,0.03);
    cursor:pointer;transition:all 0.25s;font-family:inherit;text-align:left;width:100%}
.adv-banner:hover{border-color:rgba(200,170,60,0.5);background:rgba(180,140,60,0.08);
    box-shadow:0 0 30px rgba(200,160,40,0.1);transform:translateY(-2px)}
.banner-icon{font-size:2.4rem;flex-shrink:0;width:60px;text-align:center}
.banner-thumb{width:80px;height:50px;object-fit:cover;border-radius:6px;border:1px solid var(--gold-border);flex-shrink:0}
.banner-name{font-size:1.1rem;color:var(--text);font-weight:700;letter-spacing:1px}
.banner-desc{font-size:0.78rem;color:var(--text-muted);margin-top:2px}

/* --- Duello Adasi Harita --- */
.island-map-wrap{width:100%;flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden}
.island-map{position:relative;height:100%;max-height:100%}
.island-bg{height:100%;width:auto;display:block;border:none}
#duel-island-screen .adv-header{flex-shrink:0}
.stage{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 12px;border:2px solid rgba(200,170,60,0.5);border-radius:10px;
    background:rgba(10,8,14,0.85);backdrop-filter:blur(4px);
    min-width:90px;transition:all 0.25s;cursor:default;transform:translate(-50%,-50%)}
.stage.unlocked{cursor:pointer;border-color:rgba(232,200,64,0.6);
    box-shadow:0 0 16px rgba(232,200,64,0.2)}
.stage.unlocked:hover{border-color:#e8c840;background:rgba(10,8,14,0.92);
    box-shadow:0 0 28px rgba(232,200,64,0.35);transform:translate(-50%,-50%) scale(1.08)}
.stage.done{border-color:rgba(80,200,80,0.6);background:rgba(10,14,10,0.85);
    box-shadow:0 0 16px rgba(80,200,80,0.15)}
.stage.done:hover{border-color:rgba(80,200,80,0.8);
    box-shadow:0 0 28px rgba(80,200,80,0.3);transform:translate(-50%,-50%) scale(1.08)}
.stage.locked{opacity:0.7;cursor:not-allowed;border-color:rgba(100,100,100,0.4);filter:grayscale(1)}
.stage-icon{font-size:1.4rem}
.stage-label{font-size:0.55rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase}
.stage-name{font-size:0.75rem;color:var(--text);font-weight:600;text-align:center;white-space:nowrap}
.stage-reward{font-size:0.58rem;color:var(--gold);opacity:0.8}
.stage-check{position:absolute;top:4px;right:6px;color:#5cb85c;font-size:0.8rem;font-weight:bold}

/* --- Odul Kutusu --- */
.reward-box{margin:16px 0;padding:16px 28px;border:1px solid rgba(200,170,60,0.3);
    border-radius:8px;background:rgba(180,140,60,0.06);text-align:center}
.reward-title{color:var(--gold);font-size:1rem;font-weight:700;letter-spacing:2px;margin-bottom:8px}
.reward-dust{color:#e8c840;font-size:1.1rem;font-weight:600}
.reward-cards{color:var(--text);font-size:0.85rem;margin-top:4px}

/* ==========================================================================
   ISLAND PATH — Roguelike dikey yol (duel-island-screen)
   ========================================================================== */
#duel-island-screen.island-screen { padding-bottom: 60px; position: relative; }
/* Full-screen bulanık backdrop — ayni gorsel buyutulup blur edilmis */
#duel-island-screen.island-screen::before {
    content: '';
    position: fixed;
    inset: -40px;
    z-index: 0;
    background-image: url('../img/duel-island-path.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(36px) brightness(0.42) saturate(1.15);
    pointer-events: none;
    /* Kenarlarda bulanik artefakt gorunmesin */
    transform: scale(1.06);
}
/* Icerik backdrop'un ustunde */
#duel-island-screen.island-screen > .adv-header,
#duel-island-screen.island-screen > .island-intro,
#duel-island-screen.island-screen > .path-scroll,
#duel-island-screen.island-screen > .path-legend { position: relative; z-index: 2; }
.island-progress { display: inline-flex; align-items: center; gap: 12px; font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-dim); min-width: 220px; justify-content: flex-end; }
.island-progress-label { color: var(--text-muted); font-size: 0.6rem; }
.island-progress-bar { display: block; width: 100px; height: 2px; background: rgba(180,140,60,0.15); position: relative; }
.island-progress-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #c9a646, var(--gold)); box-shadow: 0 0 8px rgba(232,200,64,0.5); transition: width 0.6s ease; }
.island-progress-count { color: var(--gold); font-variant-numeric: tabular-nums; font-size: 0.78rem; }

.island-intro { text-align: center; padding: 36px 20px 10px; position: relative; }
.island-ornament { display: inline-flex; align-items: center; gap: 10px; color: rgba(232,200,64,0.45); font-size: 0.8rem; letter-spacing: 0.3em; margin-bottom: 14px; }
.island-ornament::before, .island-ornament::after { content: ''; display: block; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, rgba(180,140,60,0.5)); }
.island-ornament::after { background: linear-gradient(90deg, rgba(180,140,60,0.5), transparent); }
.island-title { font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: var(--text); font-weight: 300; letter-spacing: 0.08em; margin-bottom: 10px; text-indent: 0.08em; }
.island-title em { color: var(--gold); font-style: normal; font-weight: 500; text-shadow: 0 0 20px rgba(232,200,64,0.3); }
.island-quote { font-style: italic; font-size: 0.95rem; color: var(--text-dim); max-width: 500px; margin: 0 auto; line-height: 1.55; }

.path-scroll {
    padding: 24px 20px 40px;
    display: flex; flex-direction: column-reverse;
    align-items: center; gap: 0;
    position: relative;
    max-width: 780px; margin: 0 auto;
    width: 100%;
    background-image: url('../img/duel-island-path.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
}
.path-scroll::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0%, transparent 30%, rgba(10,8,14,0.22) 50%, transparent 70%, transparent 100%),
        linear-gradient(180deg, rgba(13,11,14,0.55) 0%, transparent 8%, transparent 92%, rgba(13,11,14,0.85) 100%);
    z-index: 1;
}
.path-scroll > * { position: relative; z-index: 2; }

.path-row {
    position: relative; width: 100%; height: 200px;
    display: flex; justify-content: center; align-items: center;
}
.path-row.terminus { height: 260px; flex-direction: column; gap: 0; }

.row-connector { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.connector-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.connector-line.done { display: none; }
.connector-line.locked { display: none; }
.connector-line.active {
    stroke: url(#gradGold); stroke-width: 3;
    filter: drop-shadow(0 0 10px rgba(255,220,100,0.9)) drop-shadow(0 0 4px rgba(232,200,64,1));
    stroke-dasharray: 8 10; animation: path-shimmer 1.6s linear infinite;
}
.connector-line.upcoming {
    stroke: rgba(232,200,64,0.6); stroke-width: 2; stroke-dasharray: 5 7;
    filter: drop-shadow(0 0 4px rgba(232,200,64,0.4));
}
@keyframes path-shimmer { to { stroke-dashoffset: -18; } }

/* Path node medallion */
.path-node {
    position: relative;
    width: 96px; height: 96px;
    border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; font-family: inherit; color: inherit;
    border: none; padding: 0; background: transparent;
    z-index: 2; transition: transform 0.4s cubic-bezier(.2,.8,.3,1);
    isolation: isolate;
    --node-rim: rgba(180,140,60,0.55);
    --node-rim-hi: rgba(232,200,64,0.95);
    box-shadow: 0 10px 20px -6px rgba(0,0,0,0.7);
}
.path-node::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 2px;
    background: conic-gradient(from 140deg, var(--node-rim-hi) 0deg, var(--node-rim) 80deg, rgba(60,45,25,0.4) 180deg, var(--node-rim) 280deg, var(--node-rim-hi) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    transition: filter 0.3s; pointer-events: none;
}
.path-node::after {
    content: ''; position: absolute; inset: 3px; border-radius: 50%;
    background:
        radial-gradient(ellipse 60% 40% at 50% 12%, rgba(255,255,255,0.12), transparent 55%),
        radial-gradient(circle at 35% 32%, rgba(40,30,40,0.95) 0%, rgba(14,10,16,0.98) 65%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -12px 20px rgba(0,0,0,0.5);
    z-index: -1;
}
.path-node-icon { font-size: 1.75rem; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); transform: translateY(-4px); }
.path-node-label {
    position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
    font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--text); white-space: nowrap; padding: 5px 14px;
    background: linear-gradient(180deg, #161117, #0d0b0e);
    border: 1px solid rgba(180,140,60,0.35); border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6); z-index: 4;
    text-indent: 0.28em;
}
.path-node:hover:not(.locked):not(.done) { transform: translateY(-3px) scale(1.04); }
.path-node:hover:not(.locked):not(.done)::before { filter: brightness(1.35); }

.path-node.done { --node-rim: rgba(92,184,92,0.5); --node-rim-hi: rgba(140,220,140,0.85); opacity: 0.82; }
.path-node.done::after { background: radial-gradient(ellipse 60% 40% at 50% 12%, rgba(140,220,140,0.1), transparent 55%), radial-gradient(circle at 35% 32%, rgba(40,60,40,0.7) 0%, rgba(12,18,12,0.98) 65%); }
.path-node-check {
    position: absolute; top: -4px; right: -2px;
    width: 24px; height: 24px;
    background: linear-gradient(135deg, #7bd07b, #5cb85c); color: #052008;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 700;
    box-shadow: 0 0 12px rgba(92,184,92,0.5); border: 2px solid #0d0b0e; z-index: 4;
}

.path-node.current { --node-rim: rgba(232,200,64,0.65); --node-rim-hi: rgba(255,230,150,1); box-shadow: 0 10px 24px -6px rgba(0,0,0,0.7), 0 0 40px -8px rgba(232,200,64,0.55); }
.path-node.current .path-node-label { color: var(--gold); border-color: rgba(232,200,64,0.7); box-shadow: 0 4px 16px rgba(0,0,0,0.7), 0 0 12px rgba(232,200,64,0.25); }
.path-node.current::before { animation: rim-shine 2.4s ease-in-out infinite; }
@keyframes rim-shine { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.4) saturate(1.2); } }
.path-node-halo { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(232,200,64,0.7); opacity: 0; animation: path-halo 2.4s ease-out infinite; pointer-events: none; }
.path-node-halo.d1 { animation-delay: 0.8s; }
.path-node-halo.d2 { animation-delay: 1.6s; }
@keyframes path-halo { 0% { opacity: 0.7; transform: scale(1); } 80% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; transform: scale(1.7); } }

.path-node.locked { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.7); }

/* Variants */
.path-node.type-duel    { --node-rim-hi: rgba(240,190,120,0.9); }
.path-node.type-mystery { --node-rim-hi: rgba(200,160,235,0.95); --node-rim: rgba(154,106,186,0.55); }
.path-node.type-shop    { --node-rim-hi: rgba(255,230,130,1); }

/* Boss */
.path-row.terminus .boss-crown {
    display: flex; align-items: center; gap: 18px;
    font-size: 0.55rem; letter-spacing: 0.5em; text-indent: 0.5em;
    color: rgba(224,80,64,0.7); text-transform: uppercase; margin-bottom: 10px;
    text-shadow: 0 0 16px rgba(224,80,64,0.4);
}
.path-row.terminus .boss-crown::before, .path-row.terminus .boss-crown::after { content: ''; display: block; width: 50px; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,80,64,0.6), transparent); }
.path-node.type-boss { width: 150px; height: 150px; --node-rim: rgba(224,80,64,0.55); --node-rim-hi: rgba(255,120,100,1); box-shadow: 0 16px 40px -10px rgba(0,0,0,0.85), 0 0 50px rgba(224,80,64,0.35); }
.path-node.type-boss::after { background: radial-gradient(ellipse 60% 40% at 50% 12%, rgba(255,180,180,0.12), transparent 55%), radial-gradient(circle at 35% 32%, rgba(90,24,24,0.7) 0%, rgba(20,8,10,0.98) 55%); }
.path-node.type-boss .path-node-icon { font-size: 2.6rem; }
.path-node.type-boss .path-node-label { font-size: 0.78rem; letter-spacing: 0.32em; color: var(--red); background: transparent; border: none; padding: 0; box-shadow: none; top: calc(100% + 14px); }
.boss-subtitle { position: absolute; top: calc(100% + 42px); left: 50%; transform: translateX(-50%); font-style: italic; font-size: 0.88rem; color: var(--text-muted); white-space: nowrap; }
.boss-subtitle::before, .boss-subtitle::after { content: '—'; color: rgba(224,80,64,0.5); padding: 0 6px; }
.path-row.terminus::before { content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 520px; height: 360px; background: radial-gradient(ellipse at center, rgba(224,80,64,0.2) 0%, rgba(224,80,64,0.05) 40%, transparent 70%); pointer-events: none; z-index: -1; animation: boss-aura 5s ease-in-out infinite; }
@keyframes boss-aura { 0%,100% { opacity: 0.75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.05); } }

/* Tooltip */
.path-node-tooltip {
    position: absolute; bottom: calc(100% + 14px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: linear-gradient(180deg, rgba(22,18,14,0.98), rgba(13,11,14,0.98));
    border: 1px solid rgba(200,170,60,0.55); color: var(--text);
    padding: 9px 16px; font-size: 0.78rem; font-style: italic;
    white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s; z-index: 20;
    box-shadow: 0 12px 24px -8px rgba(0,0,0,0.8), 0 0 20px -4px rgba(232,200,64,0.15);
}
.path-node:hover .path-node-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Legend */
.path-legend { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; background: linear-gradient(0deg, rgba(10,8,14,0.96), rgba(10,8,14,0.85)); backdrop-filter: blur(16px); border-top: 1px solid var(--gold-border); padding: 12px 20px; }
.path-legend .leg-item { display: inline-flex; align-items: center; gap: 8px; padding: 3px 14px; color: var(--text-dim); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; }
.path-legend .leg-sym { font-size: 0.95rem; letter-spacing: 0; }
.path-legend .leg-sep { color: rgba(180,140,60,0.28); font-size: 0.7rem; padding: 0 2px; }
.path-legend .leg-duel .leg-sym { color: #e8a040; }
.path-legend .leg-mystery .leg-sym { color: var(--purple); }
.path-legend .leg-shop .leg-sym { color: var(--gold); }
.path-legend .leg-boss .leg-sym { color: var(--red); }

/* ==========================================================================
   GIZEM / DUKKAN MODAL (full-screen overlays)
   ========================================================================== */
.adv-modal {
    display: none;
    position: fixed; inset: 0;
    z-index: 300;
    overflow-y: auto;
    background: var(--bg);
}
.adv-modal.active { display: block; }
.adv-modal .modal-backdrop {
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 70% 50% at 50% 40%, rgba(154,106,186,0.16), transparent 70%),
        radial-gradient(ellipse 80% 55% at 50% 100%, rgba(13,11,14,0.8), transparent 60%),
        linear-gradient(180deg, #0c0a14 0%, #0a0812 100%);
}
.adv-modal .modal-backdrop.shop {
    background:
        radial-gradient(ellipse 80% 50% at 50% 50%, rgba(232,160,60,0.10), transparent 70%),
        linear-gradient(180deg, #0f0b0a 0%, #0a0807 100%);
}
.adv-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 32px; border-bottom: 1px solid var(--gold-border);
    background: linear-gradient(180deg, rgba(10,8,14,0.9), rgba(10,8,14,0.6));
    backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10;
}
.adv-modal .btn-ghost { background: transparent; border: 1px solid var(--gold-border); color: var(--text); font-family: inherit; padding: 8px 16px; cursor: pointer; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.7rem; transition: all 0.3s; }
.adv-modal .btn-ghost:hover { border-color: rgba(200,170,60,0.55); background: rgba(180,140,60,0.06); color: var(--gold); }
.adv-modal .breadcrumb { color: var(--text-muted); font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; text-indent: 0.4em; }
.adv-modal .breadcrumb em { color: var(--gold); font-style: normal; }
.adv-modal .header-spacer { width: 74px; }
.adv-modal .wallet { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border: 1px solid var(--gold-border); background: rgba(13,11,14,0.6); font-size: 0.75rem; letter-spacing: 0.15em; }
.adv-modal .wallet-label { color: var(--text-muted); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; }
.adv-modal .wallet-amount { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.adv-modal .wallet-amount.pulse { animation: wallet-flash 0.6s ease-out; }
@keyframes wallet-flash { 0% { color: var(--red); transform: scale(1); } 50% { color: var(--red); transform: scale(1.1); } 100% { color: var(--gold); transform: scale(1); } }

.adv-modal-stage { text-align: center; padding: 50px 24px 28px; }
.adv-modal .stage-ornament { color: rgba(232,200,64,0.55); font-size: 0.8rem; letter-spacing: 0.6em; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 14px; }
.adv-modal .stage-ornament::before, .adv-modal .stage-ornament::after { content: ''; display: block; width: 70px; height: 1px; background: linear-gradient(90deg, transparent, rgba(180,140,60,0.55)); }
.adv-modal .stage-ornament::after { background: linear-gradient(90deg, rgba(180,140,60,0.55), transparent); }
.adv-modal .stage-title { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--text); font-weight: 500; letter-spacing: 0.08em; margin-bottom: 12px; text-indent: 0.08em; }
.adv-modal .stage-title em { color: var(--gold); font-style: normal; font-weight: 600; text-shadow: 0 0 20px rgba(232,200,64,0.4); }
.adv-modal .stage-quote { font-style: italic; font-size: clamp(0.95rem, 1.6vw, 1.1rem); color: var(--text-dim); max-width: 560px; margin: 0 auto; line-height: 1.55; }
.adv-modal .stage-quote::before { content: '"'; color: var(--gold); font-size: 1.4em; padding-right: 0.1em; }
.adv-modal .stage-quote::after { content: '"'; color: var(--gold); font-size: 1.4em; padding-left: 0.1em; }
.discount-banner { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 8px 20px; border-top: 1px solid rgba(180,140,60,0.15); border-bottom: 1px solid rgba(180,140,60,0.15); font-size: 0.7rem; letter-spacing: 0.28em; text-indent: 0.28em; text-transform: uppercase; color: var(--gold); }

/* Gizem 3 kart */
.cards-row { display: flex; justify-content: center; align-items: flex-end; gap: 36px; padding: 24px 20px 20px; max-width: 1100px; margin: 0 auto; flex-wrap: wrap; }
.choice-card { position: relative; width: 240px; height: 350px; border-radius: 8px; cursor: pointer; transition: transform 0.5s cubic-bezier(.2,.8,.3,1), filter 0.4s; font-family: inherit; color: inherit; border: none; padding: 0; background: transparent; isolation: isolate; animation: choice-enter 0.7s cubic-bezier(.2,.8,.3,1) both; }
@keyframes choice-enter { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } }
.choice-card::before { content: ''; position: absolute; inset: -2px; border-radius: 10px; padding: 2px; background: conic-gradient(from 140deg, rgba(232,200,64,0.8) 0deg, rgba(180,140,60,0.4) 80deg, rgba(60,45,25,0.4) 180deg, rgba(180,140,60,0.4) 280deg, rgba(232,200,64,0.8) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: filter 0.3s, opacity 0.3s; opacity: 0.85; pointer-events: none; z-index: 2; }
.choice-card-art { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; background: #1a1518; box-shadow: 0 16px 36px -10px rgba(0,0,0,0.9); }
.choice-card-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.choice-card-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,8,11,0.85) 88%, rgba(10,8,11,0.98) 100%); }
.choice-card-name { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 3; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--text); text-align: center; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,0.95); font-weight: 500; }
.choice-card:hover:not(.selected) { transform: translateY(-10px); }
.choice-card:hover:not(.selected)::before { filter: brightness(1.35); opacity: 1; }
.choice-card.selected { transform: translateY(-18px) scale(1.03); filter: drop-shadow(0 0 28px rgba(232,200,64,0.45)); }
.choice-card.selected::before { opacity: 1; filter: brightness(1.6) saturate(1.2); }
.choice-card.selected::after { content: 'SEÇİLDİ'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-8deg); font-size: 1rem; letter-spacing: 0.5em; text-indent: 0.5em; padding: 9px 18px; background: rgba(10,8,11,0.85); border: 1px solid var(--gold); color: var(--gold); z-index: 4; pointer-events: none; text-shadow: 0 0 16px rgba(232,200,64,0.6); box-shadow: 0 0 40px rgba(232,200,64,0.25); animation: stamp 0.4s cubic-bezier(.2,.8,.3,1) both; }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(1.8); } 60% { opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(0.95); } 100% { opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(1); } }
.cards-row.has-selected .choice-card:not(.selected) { opacity: 0.45; filter: saturate(0.5) brightness(0.7); }

.action-bar { display: flex; justify-content: center; gap: 16px; padding: 30px 20px 44px; align-items: center; }
.btn-primary { font-size: 0.8rem; letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; padding: 13px 36px; background: linear-gradient(180deg, rgba(232,200,64,0.2), rgba(200,170,60,0.12)); color: var(--gold); border: 1px solid rgba(200,170,60,0.55); cursor: pointer; transition: all 0.3s; font-weight: 600; position: relative; overflow: hidden; font-family: inherit; }
.btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(232,200,64,0.3), transparent); transform: translateX(-100%); transition: transform 0.7s; }
.btn-primary:not(:disabled):hover { border-color: var(--gold); background: linear-gradient(180deg, rgba(232,200,64,0.3), rgba(200,170,60,0.2)); color: #fff; box-shadow: 0 0 24px rgba(232,200,64,0.25); }
.btn-primary:not(:disabled):hover::before { transform: translateX(100%); }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; color: var(--text-muted); border-color: var(--gold-border); }
.btn-hint { font-style: italic; color: var(--text-muted); font-size: 0.85rem; margin-left: 10px; }

/* Dükkân 5 kart */
.shop-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; padding: 24px 32px 20px; max-width: 1320px; margin: 0 auto; }
@media (max-width: 1100px) { .shop-grid { grid-template-columns: repeat(3, 1fr); max-width: 860px; } }
@media (max-width: 680px) { .shop-grid { grid-template-columns: repeat(2, 1fr); max-width: 560px; gap: 14px; padding: 16px; } }
.shop-item { display: flex; flex-direction: column; animation: choice-enter 0.7s cubic-bezier(.2,.8,.3,1) both; }
.shop-item-art { position: relative; aspect-ratio: 0.69; border-radius: 6px; overflow: hidden; box-shadow: 0 14px 30px -10px rgba(0,0,0,0.85); transition: transform 0.4s; cursor: pointer; }
.shop-item-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-item-art::after { content: ''; position: absolute; inset: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(232,200,64,0.25), inset 0 0 0 2px rgba(10,8,11,0.5); pointer-events: none; }
.shop-item-art:hover { transform: translateY(-6px); }
.shop-item-name { margin-top: 12px; text-align: center; font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text); text-transform: uppercase; font-weight: 500; min-height: 30px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.shop-item-price { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.price-old { color: var(--text-muted); font-style: italic; font-size: 0.82rem; text-decoration: line-through; text-decoration-color: rgba(224,80,64,0.7); }
.price-new { color: var(--gold); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.06em; text-shadow: 0 0 14px rgba(232,200,64,0.3); }
.price-new .currency { font-size: 0.6em; letter-spacing: 0.3em; color: var(--text-muted); margin-left: 4px; font-weight: 400; }
.btn-buy { margin-top: 10px; font-size: 0.68rem; letter-spacing: 0.28em; text-indent: 0.28em; text-transform: uppercase; padding: 9px 14px; background: linear-gradient(180deg, rgba(232,200,64,0.15), rgba(200,170,60,0.08)); color: var(--gold); border: 1px solid rgba(200,170,60,0.55); cursor: pointer; transition: all 0.3s; font-weight: 600; font-family: inherit; }
.btn-buy:hover:not(:disabled) { border-color: var(--gold); background: linear-gradient(180deg, rgba(232,200,64,0.3), rgba(200,170,60,0.15)); color: #fff; box-shadow: 0 0 18px rgba(232,200,64,0.25); }
.btn-buy:disabled { opacity: 0.35; cursor: not-allowed; color: var(--text-muted); border-color: var(--gold-border); }
.shop-item.sold { opacity: 0.4; pointer-events: none; }
.shop-item.sold .shop-item-art::before { content: 'ALINDI'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; letter-spacing: 0.4em; color: var(--green); background: rgba(10,8,11,0.75); border: 1px solid var(--green); z-index: 3; backdrop-filter: blur(3px); }
.shop-item.too-expensive .price-new { color: var(--red); text-shadow: 0 0 12px rgba(224,80,64,0.4); }
.continue-bar { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 30px 20px 52px; flex-wrap: wrap; }
.continue-hint { font-style: italic; color: var(--text-muted); font-size: 0.9rem; text-align: center; }

/* Mobile adjustments for island path */
@media (max-width: 720px) {
    .island-progress { min-width: auto; gap: 8px; font-size: 0.62rem; }
    .island-progress-bar { width: 70px; }
    .island-progress-label { display: none; }
    .island-intro { padding: 22px 16px 6px; }
    .island-title { font-size: 1.3rem; }
    .island-quote { font-size: 0.82rem; }
    .path-scroll { padding: 20px 12px 30px; }
    .path-row { height: 170px; }
    .path-row.terminus { height: 220px; }
    .path-node { width: 74px; height: 74px; }
    .path-node-icon { font-size: 1.4rem; }
    .path-node-label { font-size: 0.54rem; letter-spacing: 0.22em; padding: 3px 10px; }
    .path-node.type-boss { width: 108px; height: 108px; }
    .path-node.type-boss .path-node-icon { font-size: 2rem; }
    .path-node.type-boss .path-node-label { font-size: 0.7rem; }
    .boss-subtitle { font-size: 0.76rem; top: calc(100% + 36px); }
    .path-row.terminus::before { width: 380px; height: 260px; }
    .path-legend { padding: 10px 8px; flex-wrap: wrap; }
    .path-legend .leg-item { font-size: 0.56rem; letter-spacing: 0.16em; padding: 3px 8px; }
}