/* ============================================================
   WANO EXPLORE — page layout (self-contained to pages/explore.html)
   Depends on tokens from variables.css + wano.css.
   ============================================================ */

/* Local reset — explore.html does NOT load main.css, so we must set
   border-box here or width:100% + padding overflows the viewport
   (was clipping the mobile content panel). Scoped to this page only. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--wano-ink);
    font-family: var(--font-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

#ex-app { position: fixed; inset: 0; }

.hidden { display: none !important; }

#ex-stage { position: absolute; inset: 0; }
#ex-stage canvas { display: block; width: 100% !important; height: 100% !important; }

button { font-family: inherit; cursor: pointer; }

/* Local Wano UI tokens — warm ink + gold hairline (Ghost-of-Tsushima flavour) */
#ex-app {
    --ex-ink: rgba(20,15,20,0.78);
    --ex-ink-2: rgba(14,11,16,0.94);
    --ex-hair: rgba(232,184,75,0.30);
    --ex-hair-on: rgba(232,184,75,0.72);
    --ex-paper: #f5ede0;
}

/* ---------- Top HUD ---------- */
#ex-hud {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    z-index: 20;
    background: linear-gradient(180deg, rgba(14,11,16,0.62) 0%, transparent 100%);
    pointer-events: none;
}
#ex-hud > * { pointer-events: auto; }

.ex-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 42px; padding: 0 var(--space-4);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    font-family: var(--font-brush); letter-spacing: 0.04em;
    background: var(--ex-ink); border: 1px solid var(--ex-hair);
    border-radius: var(--radius-full); backdrop-filter: blur(12px);
    transition: all var(--transition-fast);
}
.ex-back:hover { color: var(--wano-gold); border-color: var(--ex-hair-on); }

/* Center emblem — kamon crest */
.ex-emblem {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 5px 16px 5px 5px;
    background: var(--ex-ink); border: 1px solid var(--ex-hair);
    border-radius: var(--radius-full); backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md);
}
.ex-emblem-mon {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient-wano); color: #fff8ee;
    font-family: var(--font-brush); font-size: 21px; font-weight: 800;
    box-shadow: 0 0 14px rgba(226,74,59,0.5);
}
.ex-emblem-text { font-size: 9px; line-height: 1.25; letter-spacing: 0.3em; color: var(--wano-gold); font-family: var(--font-mono); }

/* Right control cluster — single washi bar */
.ex-hud-actions {
    display: flex; align-items: center; gap: 3px;
    padding: 5px; background: var(--ex-ink);
    border: 1px solid var(--ex-hair); border-radius: var(--radius-full);
    backdrop-filter: blur(12px); box-shadow: var(--shadow-md);
}
.ex-hud-3d { display: flex; gap: 3px; }

.ex-icon-btn {
    min-width: 40px; height: 40px;
    padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}
.ex-icon-btn:hover { color: var(--wano-gold); background: rgba(232,184,75,0.12); }
.ex-icon-btn:active { transform: scale(0.92); }
.ex-icon-btn.on { color: #fff8ee; background: var(--gradient-wano); }
.ex-q-text, .lang-text { font-size: 11px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.04em; }

/* Quality preset menu */
.ex-qwrap { position: relative; }
.ex-menu {
    position: absolute; top: 52px; right: 0;
    display: flex; flex-direction: column; gap: 2px;
    background: var(--ex-ink-2);
    border: 1px solid var(--ex-hair);
    border-radius: var(--radius-lg);
    padding: 6px; min-width: 142px;
    box-shadow: var(--shadow-lg); backdrop-filter: blur(16px);
    z-index: 40;
}
.ex-menu button {
    display: flex; align-items: center; gap: 9px;
    background: none; border: none; color: var(--text-secondary);
    text-align: left; padding: 9px 12px; border-radius: var(--radius-md);
    font-size: var(--text-sm); font-family: var(--font-primary);
    transition: all var(--transition-fast);
}
.ex-menu button::before { content: '❯'; color: var(--ex-hair); font-size: 10px; transition: all var(--transition-fast); }
.ex-menu button:hover { background: rgba(232,184,75,0.1); color: var(--wano-gold); }
.ex-menu button:hover::before, .ex-menu button.active::before { color: var(--wano-gold); transform: translateX(2px); }
.ex-menu button.active { color: var(--wano-gold); }

/* Camera mode bar — vertical washi rail */
.ex-cam {
    position: absolute; left: var(--space-5); top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 4px; padding: 5px;
    background: var(--ex-ink); border: 1px solid var(--ex-hair);
    border-radius: var(--radius-full); backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md); z-index: 20;
}
.ex-cam-btn {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--text-muted); font-size: var(--text-base);
    transition: all var(--transition-fast);
}
.ex-cam-btn:hover { color: var(--wano-gold); background: rgba(232,184,75,0.12); }
.ex-cam-btn.active {
    color: #fff8ee; background: var(--gradient-wano);
    border-color: transparent; box-shadow: 0 0 14px rgba(226,74,59,0.45);
}

/* ---------- District legend ---------- */
#ex-legend {
    position: absolute;
    top: 72px; right: var(--space-5);
    width: 300px; max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: var(--ex-ink-2);
    border: 1px solid var(--ex-hair);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px);
    padding: var(--space-4);
    z-index: 25;
    transform: translateX(120%);
    opacity: 0;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}
#ex-legend.open { transform: translateX(0); opacity: 1; }
#ex-legend h3 {
    font-family: var(--font-brush);
    color: var(--wano-gold);
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
    letter-spacing: 0.1em;
}
#ex-legend-list { display: flex; flex-direction: column; gap: 6px; }
.ex-legend-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid transparent;
    border-left: 3px solid var(--c);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-align: left;
    transition: all var(--transition-fast);
}
.ex-legend-item:hover { background: var(--bg-card-hover); color: var(--text-primary); transform: translateX(4px); }
.ex-legend-item i { color: var(--c); width: 20px; text-align: center; }
.ex-legend-item span { display: flex; flex-direction: column; font-size: var(--text-sm); }
.ex-legend-item b { font-family: var(--font-brush); font-size: var(--text-base); color: var(--text-primary); }

/* ---------- Bottom hint ---------- */
#ex-hint {
    position: absolute;
    bottom: var(--space-6); left: 50%;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--ex-ink);
    border: 1px solid var(--ex-hair);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    backdrop-filter: blur(12px);
    z-index: 20;
    transition: all var(--transition-normal);
    max-width: calc(100vw - 2rem);
    text-align: center;
}
#ex-hint { animation: exFloat 4.5s ease-in-out infinite; }
#ex-hint.near { color: var(--wano-ink); background: var(--wano-gold); border-color: var(--wano-gold); box-shadow: 0 0 22px rgba(232,184,75,0.55); }
#ex-hint.near i { animation: exPulse 1s ease-in-out infinite; }
@keyframes exPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes exFloat { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }

/* ---------- Ryuma skill bar ---------- */
.ex-skills {
    position: absolute;
    bottom: var(--space-6); right: var(--space-5);
    display: flex; gap: 5px; padding: 6px;
    background: var(--ex-ink);
    border: 1px solid var(--ex-hair);
    border-radius: var(--radius-full);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md);
    z-index: 20;
}
.ex-skills button {
    position: relative;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--ex-paper);
    transition: all var(--transition-fast);
}
.ex-skills button span { font-family: var(--font-brush); font-size: 21px; line-height: 1; }
.ex-skills button i {
    position: absolute; right: 2px; bottom: 1px;
    font-style: normal; font-size: 9px; font-family: var(--font-mono);
    color: var(--wano-gold); opacity: 0.85;
}
.ex-skills button:hover { color: var(--wano-gold); background: rgba(232,184,75,0.14); }
.ex-skills button:active, .ex-skills button.cast { transform: scale(0.88); color: #fff8ee; background: var(--gradient-wano); }
@media (max-width: 720px) {
    .ex-skills { right: 50%; transform: translateX(50%); bottom: 74px; padding: 4px; gap: 3px; }
    .ex-skills button { width: 40px; height: 40px; }
    .ex-skills button span { font-size: 18px; }
}

/* ---------- Content panel ---------- */
#ex-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 424px; max-width: 92vw;
    background: linear-gradient(180deg, rgba(22,16,20,0.97), rgba(12,9,14,0.985));
    border-left: 3px solid var(--accent, var(--wano-vermilion));
    box-shadow: -12px 0 40px rgba(0,0,0,0.5);
    backdrop-filter: blur(16px);
    padding: var(--space-8) var(--space-6) var(--space-6);
    z-index: 30;
    overflow-y: auto;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1), opacity 0.32s;
}
#ex-panel.show { transform: translateX(0); opacity: 1; }
/* washi paper grain on the panel */
#ex-panel::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
    background-image:
        repeating-linear-gradient(93deg, rgba(245,237,224,0.6) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(2deg, rgba(245,237,224,0.35) 0 1px, transparent 1px 11px);
}
/* staggered content entrance */
#ex-panel.show .ex-panel-head,
#ex-panel.show .ex-panel-body,
#ex-panel.show .ex-panel-link { animation: exRise 0.5s cubic-bezier(.2,.8,.2,1) backwards; }
#ex-panel.show .ex-panel-body { animation-delay: 0.08s; }
#ex-panel.show .ex-panel-link { animation-delay: 0.16s; }
@keyframes exRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.ex-panel-head { position: relative; margin-bottom: var(--space-4); }
#ex-panel-kanji {
    position: absolute; top: -30px; right: -6px;
    font-size: 120px; z-index: 0;
    color: var(--accent, var(--wano-vermilion));
}
#ex-panel-title {
    position: relative; z-index: 1;
    font-family: var(--font-brush);
    font-size: var(--text-3xl);
    color: var(--text-primary);
    padding-right: 44px; padding-bottom: var(--space-3);
}
#ex-panel-title::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 64px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--accent, var(--wano-vermilion)), transparent);
}
#ex-panel-close { position: absolute; top: -8px; right: -8px; }
.ex-panel-body { position: relative; z-index: 1; color: var(--text-secondary); line-height: var(--leading-relaxed); }
.ex-panel-body p { margin-bottom: var(--space-3); }
.ex-panel-body b { color: var(--text-primary); }
.ex-hint { color: var(--wano-gold); font-size: var(--text-sm); }

.ex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.ex-chips span {
    padding: 4px 10px; font-size: var(--text-xs);
    background: rgba(232,184,75,0.12);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-full);
    color: var(--wano-gold);
}
.ex-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.ex-list li { display: flex; flex-direction: column; padding-left: var(--space-4); border-left: 2px solid var(--accent, var(--wano-vermilion)); }
.ex-list li b { color: var(--text-primary); }
.ex-list li span { font-size: var(--text-sm); }
.ex-list--dot li { border: none; padding-left: var(--space-5); position: relative; }
.ex-list--dot li::before { content: '❖'; position: absolute; left: 0; color: var(--wano-gold); }
.ex-timeline { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.ex-timeline li { position: relative; padding-left: var(--space-5); border-left: 2px solid var(--wano-vermilion); }
.ex-timeline li b { display: block; color: var(--text-primary); }
.ex-period { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--wano-gold); }
.ex-contact { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.ex-contact a {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.ex-contact a:hover { color: var(--wano-gold); border-color: var(--wano-gold); transform: translateX(4px); }
.ex-contact a i { width: 22px; color: var(--accent, var(--wano-vermilion)); }

.ex-panel-link {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin-top: var(--space-6);
    padding: var(--space-3) var(--space-5);
    background: var(--gradient-wano);
    color: #fff; text-decoration: none;
    border-radius: var(--radius-full);
    font-weight: var(--font-semibold);
    box-shadow: var(--shadow-glow);
    transition: transform var(--transition-fast);
}
.ex-panel-link:hover { transform: translateY(-2px); }
.ex-panel-link::after {   /* shine sweep */
    content: ''; position: absolute; top: 0; bottom: 0; width: 46%;
    left: -60%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
    transition: left 0.5s ease;
}
.ex-panel-link:hover::after { left: 115%; }

/* ---------- Loading / intro ---------- */
#ex-loading {
    position: absolute; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(ellipse at 50% 34%, rgba(226,74,59,0.20), transparent 58%),
        radial-gradient(ellipse at 50% 120%, rgba(43,58,99,0.35), transparent 60%),
        linear-gradient(180deg, #1a1330 0%, #120d1e 55%, #0c0913 100%);
    overflow: hidden;
    transition: opacity 0.7s ease;
}
#ex-loading::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 190px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23E8B84B' stroke-opacity='0.5' stroke-width='1.4'%3E%3Cpath d='M0 24a24 24 0 0 1 48 0'/%3E%3Cpath d='M0 24a18 18 0 0 1 48 0'/%3E%3Cpath d='M0 24a12 12 0 0 1 48 0'/%3E%3Cpath d='M0 24a6 6 0 0 1 48 0'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 48px 24px; background-repeat: repeat-x; background-position: bottom;
    opacity: 0.25; -webkit-mask: linear-gradient(0deg, #000, transparent); mask: linear-gradient(0deg, #000, transparent);
    pointer-events: none;
}
#ex-loading.leaving { opacity: 0; }
.ex-loading-inner { position: relative; z-index: 2; text-align: center; padding: var(--space-6); }

/* Hanging chōchin paper lantern */
.ex-lantern {
    position: relative; width: 92px; height: 120px;
    margin: 0 auto var(--space-8);
    transform-origin: 50% -34px;
    animation: exSway 4s ease-in-out infinite;
    filter: drop-shadow(0 6px 40px rgba(232,133,60,0.55));
}
.ex-lantern::before {   /* hanging string */
    content: ''; position: absolute; left: 50%; top: -34px;
    width: 2px; height: 34px; transform: translateX(-50%);
    background: linear-gradient(var(--wano-gold), rgba(232,184,75,0.1));
}
.ex-lantern::after {    /* tassel */
    content: ''; position: absolute; left: 50%; bottom: -18px;
    width: 3px; height: 14px; transform: translateX(-50%);
    background: var(--wano-gold); border-radius: 2px;
    box-shadow: 0 7px 0 -1px var(--wano-gold);
}
.ex-lantern > span {
    position: absolute; inset: 7px 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 48% / 42%;
    background:
        repeating-linear-gradient(0deg, rgba(96,16,10,0.5) 0 1px, transparent 1px 12px),
        radial-gradient(circle at 50% 40%, #ff9152 0%, #e0421f 68%, #b32d18 100%);
    border: 2px solid rgba(24,14,12,0.45);
    box-shadow: inset 0 0 26px rgba(255,224,150,0.5), inset 0 -12px 22px rgba(110,20,10,0.55);
    color: rgba(28,14,8,0.72); font-family: var(--font-brush); font-weight: 800; font-size: 40px;
}
.ex-lantern > span::before, .ex-lantern > span::after {   /* wooden caps */
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    width: 42px; height: 12px; background: #2b2130; border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(232,184,75,0.35);
}
.ex-lantern > span::before { top: -9px; }
.ex-lantern > span::after { bottom: -9px; }
@keyframes exSway { 0%,100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
.ex-load-kanji { font-family: var(--font-brush); font-size: clamp(3rem, 12vw, 6rem); color: var(--wano-vermilion); text-shadow: 0 0 40px rgba(226,74,59,0.5); line-height: 1; }
.ex-load-sub { letter-spacing: 0.5em; color: var(--wano-gold); font-size: var(--text-sm); margin-top: var(--space-2); }
.ex-load-tag { color: var(--text-secondary); margin-top: var(--space-4); font-size: var(--text-lg); }
.ex-load-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-8); }
.ex-btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--text-base); font-weight: var(--font-semibold);
    border: 1px solid var(--border-light);
    background: transparent; color: var(--text-primary);
    transition: all var(--transition-fast);
}
.ex-btn--primary { background: var(--gradient-wano); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); animation: exBreath 3.2s ease-in-out infinite; }
.ex-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(226,74,59,0.6); animation: none; }
@keyframes exBreath { 0%,100% { box-shadow: 0 0 14px rgba(226,74,59,0.4); } 50% { box-shadow: 0 0 26px rgba(226,74,59,0.65); } }
.ex-btn--ghost:hover { border-color: var(--wano-gold); color: var(--wano-gold); }
.ex-btn.reco { position: relative; }
.ex-btn.reco::after {
    content: '★'; position: absolute; top: -10px; right: -6px;
    color: var(--wano-gold); font-size: var(--text-sm);
}
.ex-btn[disabled] { opacity: 0.4; pointer-events: none; }
.ex-reco { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--wano-gold); }
.ex-load-back { display: inline-flex; gap: var(--space-2); margin-top: var(--space-8); color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); }
.ex-load-back:hover { color: var(--text-secondary); }
.ex-credit { margin-top: var(--space-4); font-size: 10px; color: var(--text-muted); opacity: 0.7; }

/* real streaming progress (replaces the choice card once Enter is clicked) */
#ex-loading.progress-mode .ex-load-actions,
#ex-loading.progress-mode .ex-reco,
#ex-loading.progress-mode .ex-load-back,
#ex-loading.progress-mode .ex-credit { display: none; }
.ex-progress { margin-top: var(--space-8); width: min(340px, 78vw); margin-left: auto; margin-right: auto; }
.ex-progress.hidden { display: none; }
.ex-progress-bar {
    height: 6px; border-radius: var(--radius-full); overflow: hidden;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(232, 184, 75, 0.25);
}
.ex-progress-bar i {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(90deg, #b3452e, var(--wano-gold, #e8b84b));
    border-radius: inherit;
    transition: width 0.25s ease;
    box-shadow: 0 0 10px rgba(232, 184, 75, 0.55);
}
.ex-progress-row {
    display: flex; justify-content: space-between; gap: var(--space-4);
    margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted);
}
#ex-progress-pct { color: var(--wano-gold, #e8b84b); font-weight: var(--font-semibold); min-width: 34px; text-align: left; }
#ex-progress-tip { text-align: right; animation: exTipFade 2.6s ease infinite; }
@keyframes exTipFade { 0%, 12% { opacity: 0; } 22%, 82% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* ============================================================
   MINIMAP (A1) — LoL-style corner map, canvas drawn by world.js
   ============================================================ */
#ex-minimap {
    position: absolute; right: 14px; bottom: 14px;
    width: 176px; height: 176px;
    border-radius: 14px;
    border: 1px solid rgba(232, 184, 75, 0.4);
    background: rgba(8, 12, 20, 0.55);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    z-index: 24; cursor: crosshair;
}
@media (max-width: 760px) {
    #ex-minimap { width: 118px; height: 118px; right: 10px; bottom: 86px; }
}

/* ============================================================
   BOUNTY POSTER (A4)
   ============================================================ */
#ex-poster {
    position: absolute; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6, 8, 14, 0.55); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity 0.24s ease;
}
#ex-poster.show { opacity: 1; }
#ex-poster.hidden { display: none; }
.ex-poster-card {
    position: relative;
    width: min(320px, 84vw);
    padding: 26px 22px 18px;
    text-align: center;
    color: #3b2a18;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 246, 224, 0.9), transparent 60%),
        linear-gradient(160deg, #e8d5ae 0%, #dcc394 48%, #cfb27f 100%);
    border: 3px solid #7a5c33;
    outline: 1px solid #3b2a18;
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 46px rgba(122, 84, 40, 0.35);
    transform: rotate(-1.2deg) scale(0.96);
    transition: transform 0.24s ease;
    font-family: var(--font-mincho, 'Shippori Mincho B1', serif);
}
#ex-poster.show .ex-poster-card { transform: rotate(-1.2deg) scale(1); }
#ex-poster-close { position: absolute; top: 8px; right: 8px; color: #5a4326; }
.ex-poster-head {
    font-size: 40px; font-weight: 800; letter-spacing: 0.14em; line-height: 1;
    border-bottom: 3px double #7a5c33; padding-bottom: 8px;
}
.ex-poster-frame {
    position: relative; overflow: hidden;
    margin: 14px auto 10px; width: 78%; aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #7a5c33; background: rgba(255, 250, 235, 0.55);
    box-shadow: inset 0 0 22px rgba(90, 62, 28, 0.35);
}
#ex-poster-mug {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    filter: sepia(0.35) contrast(1.06) saturate(0.9);
}
#ex-poster-mug.hidden { display: none; }
#ex-poster-jp.over {
    position: absolute; right: 6px; top: 6px; z-index: 2;
    font-size: 15px; max-height: 82%;
    color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.ex-poster-frame span {
    font-family: 'Yuji Syuku', serif; font-size: 34px; color: #4b3418;
    writing-mode: vertical-rl; letter-spacing: 0.15em; max-height: 90%; overflow: hidden;
}
.ex-poster-sub { font-size: 12px; letter-spacing: 0.42em; color: #6d4f28; }
.ex-poster-name { margin-top: 8px; font-size: 21px; font-weight: 800; letter-spacing: 0.05em; }
.ex-poster-bounty { margin-top: 4px; font-size: 19px; font-weight: 700; color: #7a3020; letter-spacing: 0.04em; }
.ex-poster-foot { margin-top: 12px; font-size: 9px; letter-spacing: 0.24em; color: #85643a; border-top: 1px solid #a98d5c; padding-top: 8px; }
#ex-poster.marine .ex-poster-card {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(234, 244, 255, 0.9), transparent 60%),
        linear-gradient(160deg, #cfe0ef 0%, #b9cfe4 48%, #a3bdd6 100%);
    border-color: #2c4a6e; outline-color: #16283e; color: #16283e;
}
#ex-poster.marine .ex-poster-head { border-bottom-color: #2c4a6e; }
#ex-poster.marine .ex-poster-frame { border-color: #2c4a6e; background: rgba(240, 248, 255, 0.55); }
#ex-poster.marine .ex-poster-frame span,
#ex-poster.marine .ex-poster-sub,
#ex-poster.marine .ex-poster-bounty { color: #1e3a5c; }
#ex-poster.marine .ex-poster-foot { color: #3d5a7c; border-top-color: #7d9cbd; }

/* ============================================================
   PONEGLYPH CHIP + TOAST (A3)
   ============================================================ */
.ex-pg {
    position: absolute; top: 74px; right: 16px; z-index: 26;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: var(--radius-full);
    background: rgba(20, 14, 16, 0.72); color: #f0c9b8;
    border: 1px solid rgba(226, 74, 59, 0.5);
    font-size: var(--text-sm); letter-spacing: 0.06em; cursor: default;
}
.ex-pg i { font-style: normal; color: #e24a3b; font-family: 'Yuji Syuku', serif; }
.ex-pg.hidden { display: none; }
#ex-toast {
    position: absolute; left: 50%; top: 86px; transform: translate(-50%, -8px);
    z-index: 70; max-width: min(480px, 86vw);
    padding: 11px 20px; border-radius: var(--radius-full);
    background: rgba(16, 12, 12, 0.88); color: #ffe9c9;
    border: 1px solid rgba(232, 184, 75, 0.55);
    font-size: var(--text-sm); text-align: center;
    opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
#ex-toast.show { opacity: 1; transform: translate(-50%, 0); }
#ex-toast.hidden { display: none; }

/* ============================================================
   PHOTO MODE (A2)
   ============================================================ */
#ex-app.photo #ex-hud,
#ex-app.photo #ex-cam,
#ex-app.photo #ex-skills,
#ex-app.photo #ex-hint,
#ex-app.photo #ex-pg,
#ex-app.photo #ex-legend { display: none !important; }
#ex-photo-ui {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    z-index: 40; display: flex; gap: var(--space-3);
}
#ex-photo-ui.hidden { display: none; }
.ex-flash {
    position: absolute; inset: 0; z-index: 90; background: #fff;
    pointer-events: none; animation: exFlash 0.45s ease forwards;
}
@keyframes exFlash { 0% { opacity: 0.85; } 100% { opacity: 0; } }

/* ============================================================
   SETTINGS PANEL (D3)
   ============================================================ */
#ex-settings {
    position: absolute; inset: 0; z-index: 55;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6, 8, 14, 0.5); backdrop-filter: blur(3px);
}
#ex-settings.hidden { display: none; }
.ex-set-card {
    width: min(340px, 88vw); max-height: 82vh; overflow-y: auto;
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-xl);
    background: rgba(16, 14, 22, 0.94);
    border: 1px solid rgba(232, 184, 75, 0.35);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.ex-set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.ex-set-head h3 { font-size: var(--text-lg); color: var(--wano-gold, #e8b84b); }
.ex-set-sub {
    margin: var(--space-4) 0 var(--space-1);
    font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 4px;
}
.ex-set-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: 7px 0; font-size: var(--text-sm); color: var(--text-secondary);
}
.ex-set-row input[type="range"] { width: 140px; accent-color: var(--wano-gold, #e8b84b); }
.ex-set-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--wano-gold, #e8b84b); }
#ex-set-pg-reset { margin-top: var(--space-4); width: 100%; justify-content: center; font-size: var(--text-sm); }

/* ============================================================
   VIRTUAL JOYSTICK (D1 — touch devices only)
   ============================================================ */
#ex-joy {
    position: absolute; left: 22px; bottom: 96px; z-index: 30;
    width: 118px; height: 118px; border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 16, 26, 0.35) 0%, rgba(20, 16, 26, 0.6) 100%);
    border: 1px solid rgba(232, 184, 75, 0.4);
    touch-action: none;
}
#ex-joy-knob {
    position: absolute; left: 50%; top: 50%;
    width: 52px; height: 52px; margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 226, 150, 0.9), rgba(200, 150, 60, 0.85));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: transform 0.06s linear;
}
#ex-app.photo #ex-joy { display: none; }
@media (max-width: 760px) {
    .ex-skills { transform: scale(0.82); transform-origin: bottom center; }
    #ex-photo-ui { bottom: 14px; }
}

/* hover name chip (R3.3) */
#ex-nametip {
    position: fixed; z-index: 45; pointer-events: none;
    padding: 4px 10px; border-radius: var(--radius-full);
    background: rgba(16, 12, 14, 0.88); color: #ffe9c9;
    border: 1px solid rgba(232, 184, 75, 0.5);
    font-size: var(--text-xs); letter-spacing: 0.05em; white-space: nowrap;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
#ex-nametip.show { opacity: 1; transform: translateY(0); }

/* minimap resize animates between M-key steps */
#ex-minimap { transition: width 0.2s ease, height 0.2s ease; }

/* notch phones: keep controls out of the unsafe edges (R3.6) */
@supports (padding: env(safe-area-inset-left)) {
    #ex-hud { padding-left: calc(var(--space-4) + env(safe-area-inset-left)); padding-right: calc(var(--space-4) + env(safe-area-inset-right)); }
    #ex-joy { left: calc(22px + env(safe-area-inset-left)); bottom: calc(96px + env(safe-area-inset-bottom)); }
    #ex-minimap { right: calc(14px + env(safe-area-inset-right)); }
    .ex-skills { margin-bottom: env(safe-area-inset-bottom); }
    #ex-photo-ui { bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   2D FALLBACK
   ============================================================ */
.ex2d { position: absolute; inset: 0; overflow: hidden; }
.ex2d-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #1a1440 0%, #2a1c3e 45%, #3a2340 75%, #241a2e 100%); }
.ex2d-moon { position: absolute; top: 10%; left: 16%; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fdf3d0, #e8d59a); box-shadow: 0 0 60px rgba(253,243,208,0.6); }
.ex2d-stars {
    position: absolute; inset: 0;
    background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 20%, #fff, transparent),
        radial-gradient(1px 1px at 80% 40%, #fff, transparent), radial-gradient(1px 1px at 35% 15%, #fff, transparent),
        radial-gradient(1px 1px at 90% 25%, #fff, transparent), radial-gradient(1px 1px at 50% 35%, #fff, transparent);
    opacity: 0.7;
}
.ex2d-mtn { position: absolute; left: -5%; right: -5%; bottom: 26%; height: 40%; }
.ex2d-mtn--far { background: linear-gradient(180deg, transparent, #2a2145); clip-path: polygon(0 100%, 12% 55%, 26% 80%, 42% 40%, 58% 78%, 74% 48%, 90% 82%, 100% 60%, 100% 100%); opacity: 0.7; }
.ex2d-mtn--near { bottom: 24%; height: 34%; background: linear-gradient(180deg, transparent, #1d1730); clip-path: polygon(0 100%, 18% 60%, 34% 88%, 52% 50%, 70% 86%, 86% 58%, 100% 90%, 100% 100%); }
.ex2d-fuji { position: absolute; left: 60%; bottom: 30%; width: 260px; height: 180px; transform: translateX(-50%); background: linear-gradient(180deg, #2f2650, #241d3a); clip-path: polygon(50% 0, 64% 30%, 100% 100%, 0 100%, 36% 30%); opacity: 0.8; }
.ex2d-fuji::after { content: ''; position: absolute; top: 0; left: 36%; width: 28%; height: 34%; background: rgba(245,237,224,0.85); clip-path: polygon(50% 0, 70% 60%, 55% 50%, 40% 68%, 30% 60%); }
.ex2d-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #241a2e, #14100e); }
.ex2d-ground::before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(232,184,75,0.05) 1px, transparent 1px);
    background-size: 100% 26px;
    mask: linear-gradient(180deg, transparent, #000);
}

.ex2d-petals { position: absolute; inset: 0; pointer-events: none; }
.ex2d-petal { position: absolute; top: -20px; width: 10px; height: 10px; background: #ffd0dc; border-radius: 60% 0 60% 0; animation: ex2dFall linear infinite; }
@keyframes ex2dFall { 0% { transform: translateY(-20px) rotate(0); } 100% { transform: translateY(105vh) rotate(360deg); } }

.ex2d-hotspots { position: absolute; inset: 0; }
.ex2d-spot {
    position: absolute; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: none; border: none; color: var(--text-primary);
}
.ex2d-spot-dot {
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(24,18,36,0.7);
    border: 2px solid var(--spot);
    color: var(--spot);
    font-size: var(--text-lg);
    box-shadow: 0 0 18px color-mix(in srgb, var(--spot) 55%, transparent);
    animation: ex2dPulse 2.4s ease-in-out infinite;
    transition: transform var(--transition-fast);
}
.ex2d-spot:hover .ex2d-spot-dot { transform: scale(1.12); }
@keyframes ex2dPulse { 0%,100% { box-shadow: 0 0 14px color-mix(in srgb, var(--spot) 40%, transparent); } 50% { box-shadow: 0 0 26px color-mix(in srgb, var(--spot) 75%, transparent); } }
.ex2d-spot-label { display: flex; flex-direction: column; align-items: center; font-size: var(--text-xs); color: var(--text-secondary); text-shadow: 0 1px 4px #000; }
.ex2d-spot-label b { font-family: var(--font-brush); font-size: var(--text-base); color: var(--text-primary); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    #ex-panel { width: 100%; max-width: 100%; top: auto; height: 74%; border-left: none; border-top: 3px solid var(--accent, var(--wano-vermilion)); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; transform: translateY(100%); }
    #ex-panel.show { transform: translateY(0); }
    #ex-hud { padding: var(--space-3); gap: 6px; }
    .ex-emblem-text { display: none; }
    .ex-emblem { padding: 4px; }
    .ex-back { padding: 0; width: 40px; justify-content: center; }
    .ex-back span { display: none; }
    .ex-hud-actions, .ex-cam { padding: 4px; }
    .ex-icon-btn { min-width: 36px; height: 36px; padding: 0 8px; }
    .ex-q-text { display: none; }
    #ex-legend { top: 66px; right: var(--space-3); }
    #ex-hint { bottom: var(--space-4); font-size: var(--text-xs); }
    .ex2d-spot-label { max-width: 90px; text-align: center; }
    .ex-cam { left: var(--space-2); gap: 6px; }
    .ex-cam-btn { width: 40px; height: 40px; font-size: var(--text-sm); }
    .ex-menu { min-width: 116px; }
}

@media (prefers-reduced-motion: reduce) {
    .ex-lantern, #ex-hint, #ex-hint.near i, .ex2d-petal, .ex2d-spot-dot,
    .ex-btn--primary, #ex-panel.show .ex-panel-head, #ex-panel.show .ex-panel-body,
    #ex-panel.show .ex-panel-link { animation: none !important; }
}