/* Style par ville (spec ui-city-style-design) : la page porte data-city ; les composants lisent les jetons. */

[data-city="yokohama"] {
    --night: #0e2e36;
    --surface: #143e48;
    --surface-deep: #0b252c;
    --line: rgba(244, 234, 216, .16);
    --text: #f4ead8;
    --muted: #b9c6c4;
    --neon: #f29a5b;
    --cyan: #8fd6c8;
    --ok: #5fb3a1;
    --ok-text: #8fe0c8;
    --warn: #f2c46b;
    --bad: #e0705f;
    --bad-text: #ff9b8a;
    --title-font: Georgia, 'Times New Roman', serif;
    --title-style: italic;
    --title-shadow: 0 2px 0 rgba(0, 0, 0, .35);
    --primary-text: #2a1608;
    --glow: none;
}

[data-city="tokyo"] {
    --night: #0b0716;
    --surface: #160f2a;
    --surface-deep: #0e0920;
    --line: #2a2440;
    --text: #ece6ff;
    --muted: #9a90b5;
    --neon: #ff2fa0;
    --cyan: #29e7ff;
    --title-font: var(--font);
    --title-style: normal;
    --title-shadow: 0 0 6px var(--neon), 0 0 16px rgba(255, 47, 160, .7);
    --primary-text: #fff;
    --glow: 0 0 12px rgba(255, 47, 160, .8);
}

[data-city="osaka"] {
    --night: #160b0a;
    --surface: #24120f;
    --surface-deep: #1a0c0a;
    --line: rgba(255, 214, 170, .16);
    --text: #fbeee0;
    --muted: #c4aa98;
    --neon: #ff4b2b;
    --cyan: #ffc23a;
    --title-font: var(--font);
    --title-style: normal;
    --title-shadow: 0 0 8px rgba(255, 75, 43, .55);
    --primary-text: #2a0d05;
    --glow: 0 0 12px rgba(255, 75, 43, .6);
}

/* Kobe (spec sprint 43 §2) : le port de nuit, le rouge vif de la tour du port, le bleu de la mer. */
[data-city="kobe"] {
    --night: #08111c;
    --surface: #0f1d2c;
    --surface-deep: #0a1622;
    --line: rgba(160, 205, 255, .16);
    --text: #e8f1fb;
    --muted: #93a9c0;
    --neon: #ff3b3b;
    --cyan: #4fb8ff;
    --title-font: var(--font);
    --title-style: normal;
    --title-shadow: 0 0 8px rgba(255, 59, 59, .5);
    --primary-text: #1c0505;
    --glow: 0 0 12px rgba(255, 59, 59, .55);
}

[data-city] h1,
[data-city] h2,
[data-city] .brand-name {
    font-family: var(--title-font);
    font-style: var(--title-style);
    text-shadow: var(--title-shadow);
}

[data-city] .btn-primary { color: var(--primary-text); box-shadow: var(--glow); }
[data-city] .nav-link[aria-current="page"] { box-shadow: inset 2px 0 0 var(--neon); }
[data-city="tokyo"] .nav-link[aria-current="page"] { text-shadow: 0 0 8px var(--neon); }

/* ---------- Décor ---------- */
.city-banner { position: relative; overflow: hidden; margin: -28px -32px 16px; }
.city-banner--full { height: 140px; }
.city-banner--slim { height: 48px; }
.city-banner > span { position: absolute; display: block; }
.page-header--on-banner { position: relative; margin-top: -56px; }

/* Yokohama : baie au coucher du soleil */
.city-banner--yokohama { background: linear-gradient(180deg, #ffc27a 0%, #f59a62 30%, #d1626c 55%, #6a4a72 72%, #123b45 100%); }
.city-banner--yokohama .cb-sun { left: 58%; top: 30%; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, #fff1c9 0%, #ffd38f 60%, rgba(255, 211, 143, 0) 72%); }
.city-banner--yokohama .cb-sea { left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, #1b4a55, #0e2e36); }
.city-banner--yokohama .cb-glint { left: 55%; bottom: 3%; width: 80px; height: 24%; background: repeating-linear-gradient(180deg, rgba(255, 214, 150, .75) 0 2px, transparent 2px 6px); animation: cb-shimmer 2.8s ease-in-out infinite; transform-origin: center bottom; }
.city-banner--yokohama .cb-wheel { left: 9%; bottom: 28%; width: 50%; max-width: 70px; aspect-ratio: 1; border: 3px solid #0a2128; border-radius: 50%; background: repeating-conic-gradient(#0a2128 0 2deg, transparent 2deg 30deg); }
.city-banner--yokohama .cb-tower { left: 30%; bottom: 28%; width: 10px; height: 56%; background: #0a2128; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.city-banner--yokohama .cb-landmark { left: 38%; bottom: 28%; width: 26px; height: 66%; background: #0a2128; clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.city-banner--yokohama .cb-crane { bottom: 28%; width: 4px; background: #0a2128; }
.city-banner--yokohama .cb-crane::after { content: ''; position: absolute; top: 0; left: -26px; width: 56px; height: 3px; background: #0a2128; }
.city-banner--yokohama .cb-ship { left: 66%; bottom: 24%; width: 120px; height: 9%; background: #0a2128; clip-path: polygon(0 0, 100% 0, 92% 100%, 6% 100%); }
.city-banner--yokohama .cb-bird { width: 10px; height: 4px; border-top: 2px solid #3a2a3a; border-radius: 50% 50% 0 0; }
.city-banner--slim.city-banner--yokohama .cb-wheel { max-width: 34px; }
@keyframes cb-shimmer { 0%, 100% { opacity: .55; transform: scaleX(1); } 50% { opacity: .95; transform: scaleX(1.25); } }

/* Tokyo : rue au néon sous la pluie */
.city-banner--tokyo { background: linear-gradient(180deg, #120a26 0%, #24104a 70%, #120a26 100%); }
.city-banner--tokyo .cb-building { bottom: 13%; background: #07040f; background-image: radial-gradient(#3a2d66 1px, transparent 1.6px); background-size: 9px 11px; }
.city-banner--tokyo .cb-street { left: 0; right: 0; bottom: 0; height: 13%; background: linear-gradient(180deg, #1a0d33, #0b0716); }
.city-banner--tokyo .cb-reflect { bottom: 0; height: 13%; filter: blur(3px); opacity: .55; animation: cb-pulse 4s ease-in-out infinite; }
.city-banner--tokyo .cb-rain { inset: 0; background-image: repeating-linear-gradient(105deg, rgba(180, 200, 255, .12) 0 1px, transparent 1px 9px); }
.city-banner--tokyo .cb-sign { padding: 2px 7px; font-weight: 800; font-size: 14px; letter-spacing: .1em; border-radius: 3px; white-space: nowrap; }
.cb-vertical { writing-mode: vertical-rl; }
.cb-sign--pink { color: #ff2fa0; border: 2px solid #ff2fa0; text-shadow: 0 0 8px #ff2fa0; box-shadow: 0 0 12px #ff2fa0; }
.cb-sign--cyan { color: #29e7ff; border: 2px solid #29e7ff; text-shadow: 0 0 8px #29e7ff; box-shadow: 0 0 12px #29e7ff; }
.cb-sign--yellow { color: #ffd23f; text-shadow: 0 0 10px #ffd23f; }
.cb-sign--green { color: #5dffb0; border: 2px solid #5dffb0; text-shadow: 0 0 8px #5dffb0; box-shadow: 0 0 10px #5dffb0; }
.cb-sign--orange { color: #ff6b3d; text-shadow: 0 0 8px #ff6b3d; font-size: 12px; }
.cb-flicker { animation: cb-flicker 6s infinite; }
@keyframes cb-flicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .35; } }
@keyframes cb-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .7; } }

@media (max-width: 800px) {
    .city-banner { margin: -20px -16px 12px; }
    .city-banner--full { height: 110px; }
    .city-banner--yokohama .cb-tower, .city-banner--yokohama .cb-bird { display: none; }
    .city-banner--tokyo .cb-sign { font-size: 11px; }
    .city-banner--tokyo .cb-sign--yellow, .city-banner--tokyo .cb-sign--orange { display: none; }
}

@media (max-width: 720px) {
    .city-banner--slim { height: 32px; } /* téléphone (sprint 33) : bandeau des pages réduit */
}

@media (prefers-reduced-motion: reduce) {
    .city-banner, .city-banner * { animation: none !important; }
}

/* Changement de ville (spec §6) : fondu entre les deux pages, si le navigateur sait le faire. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* Osaka : le canal de Dōtonbori à la tombée de la nuit (spec sprint 25 §10) */
.city-banner--osaka { background: linear-gradient(180deg, #2a0f1e 0%, #5a1f24 45%, #2a120e 75%, #160b0a 100%); }
.city-banner--osaka .cb-building { bottom: 22%; background: #0e0605; background-image: radial-gradient(#6b3a22 1px, transparent 1.6px); background-size: 10px 12px; }
.city-banner--osaka .cb-sign { padding: 2px 7px; font-weight: 800; font-size: 14px; letter-spacing: .1em; border-radius: 3px; white-space: nowrap; }
.city-banner--osaka .cb-sign--red { color: #fff4e8; background: #c8261a; box-shadow: 0 0 10px rgba(255, 75, 43, .8); }
.city-banner--osaka .cb-sign--gold { color: #2a0d05; background: #ffc23a; box-shadow: 0 0 10px rgba(255, 194, 58, .7); }
.city-banner--osaka .cb-lantern { top: 8%; width: 12px; height: 16px; border-radius: 45%; background: radial-gradient(circle at 50% 40%, #ffb27a 0%, #e0301e 55%, #8a120a 100%); box-shadow: 0 0 10px rgba(255, 90, 50, .8); animation: cb-pulse 5s ease-in-out infinite; }
.city-banner--osaka .cb-bridge { left: 30%; width: 34%; bottom: 20%; height: 7%; background: #0e0605; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.city-banner--osaka .cb-canal { left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, #1e0d0b, #0b0504); }
.city-banner--osaka .cb-reflect { bottom: 0; height: 20%; filter: blur(3px); opacity: .5; animation: cb-pulse 4s ease-in-out infinite; }
.city-banner--slim.city-banner--osaka .cb-lantern { top: 4%; width: 8px; height: 11px; }
@media (prefers-reduced-motion: reduce) { .city-banner--osaka .cb-lantern, .city-banner--osaka .cb-reflect { animation: none; } }

/* Kobe (spec sprint 43 §2) : la montagne, la tour rouge du port, les grues et la mer de nuit. */
.city-banner--kobe { background: linear-gradient(180deg, #050b16 0%, #10233d 50%, #1b3456 72%, #08111c 100%); }
.city-banner--kobe .cb-mountain { left: -5%; right: -5%; bottom: 26%; height: 62%; background: linear-gradient(180deg, #24406a, #142a46); clip-path: polygon(0 100%, 0 55%, 14% 32%, 27% 46%, 41% 18%, 55% 40%, 68% 22%, 82% 44%, 100% 30%, 100% 100%); }
.city-banner--kobe .cb-port-tower { left: 30%; bottom: 26%; width: 18px; height: 58%; background: linear-gradient(90deg, #b3121b, #ff3b3b 50%, #b3121b); clip-path: polygon(20% 0, 80% 0, 62% 50%, 100% 100%, 0 100%, 38% 50%); box-shadow: 0 0 14px rgba(255, 59, 59, .7); }
.city-banner--kobe .cb-crane { bottom: 26%; width: 4px; background: #050b16; }
.city-banner--kobe .cb-crane::after { content: ''; position: absolute; top: 0; left: -24px; width: 52px; height: 3px; background: #050b16; }
.city-banner--kobe .cb-light { width: 4px; height: 4px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 6px #ffd27a; animation: cb-pulse 4s ease-in-out infinite; }
.city-banner--kobe .cb-sea { left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, #0f2d4d, #06121f); }
.city-banner--kobe .cb-reflect { bottom: 0; height: 22%; filter: blur(3px); opacity: .5; animation: cb-pulse 4s ease-in-out infinite; }
.city-banner--slim.city-banner--kobe .cb-port-tower { width: 10px; }
@media (prefers-reduced-motion: reduce) { .city-banner--kobe .cb-light, .city-banner--kobe .cb-reflect { animation: none; } }