
.teaching-slide.slide-vantuong-map{padding:8px 0;overflow:hidden}
.vantuong-stage{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:12px;border:1px solid #a89155;background:#132c30;display:grid;grid-template-rows:minmax(0,1fr);isolation:isolate}
.vantuong-map-viewport{position:relative;min-height:0;overflow:hidden;margin:8px;background:transparent;z-index:1;border-radius:6px}
.vantuong-world{position:absolute;background:url('../../assets/experience/vantuong-3d-clean.png') center/100% 100% no-repeat}
.vantuong-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.vt-arrow{opacity:0}
.vt-arrow-shape{stroke:none;stroke-linejoin:round}
.vt-arrow-reveal{fill:none;stroke:#fff;stroke-width:80;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:square}
.vt-arrow-shape.vt-sea-route{fill:none;stroke:#131b1b;stroke-width:12;stroke-linecap:butt;stroke-dasharray:.07 .05}
.vt-enemy .vt-enemy-arrows .vt-arrow,.vt-enemy .vt-naval-arrows .vt-arrow,.vt-counter .vt-arrow{opacity:1}
.vt-enemy .vt-enemy-arrows .vt-arrow-reveal,.vt-enemy .vt-naval-arrows .vt-arrow-reveal{animation:vt-arrow-draw 3.5s ease both}
.vt-enemy .vt-enemy-arrows .vt-arrow:nth-child(2) .vt-arrow-reveal{animation-delay:.5s}
.vt-enemy .vt-enemy-arrows .vt-arrow:nth-child(3) .vt-arrow-reveal{animation-delay:1s}
.vt-counter .vt-enemy-arrows .vt-arrow-reveal,.vt-counter .vt-naval-arrows .vt-arrow-reveal{stroke-dashoffset:0}
.vt-counter .vt-counter-arrows .vt-arrow-reveal{animation:vt-arrow-draw 3.2s ease both}
.vt-counter .vt-counter-arrows .vt-arrow:nth-child(2) .vt-arrow-reveal{animation-delay:.5s}
.vt-counter .vt-counter-arrows .vt-arrow:nth-child(3) .vt-arrow-reveal{animation-delay:1s}
.vt-battle-flashes{opacity:0;fill:#ffc438;stroke:#e82318;stroke-width:4;filter:drop-shadow(0 0 8px #ffb02e)}
.vt-counter .vt-battle-flashes{opacity:1}
.vt-counter .vt-battle-flashes path{transform-box:fill-box;transform-origin:center;animation:vt-flash 1.4s 2s ease-in-out 3 both}
.vantuong-info{position:absolute;left:69.6%;top:60.2%;transform:translate(-50%,-50%);width:38px;height:38px;padding:0;display:grid;place-items:center;border:2px solid #ffe3a1;border-radius:50%;background:#152e29ed;color:#fff2cc;font:700 italic 25px/1 Georgia,serif;cursor:pointer;animation:vt-info-pulse 1.8s ease-in-out infinite}
.vantuong-info span{animation:vt-info-blink 1.8s ease-in-out infinite}
.vantuong-info:hover,.vantuong-info:focus-visible,.vantuong-info:hover span,.vantuong-info:focus-visible span{animation:none}
.vantuong-info:focus-visible{outline:3px solid #fff1c8;outline-offset:5px}

.vantuong-stage::before{content:"";position:absolute;inset:-35px;z-index:0;background:url('../../assets/experience/vantuong-3d-clean.png') center/cover no-repeat;filter:blur(30px) brightness(.55);opacity:.75;pointer-events:none}
.vantuong-stage::after{content:"";position:absolute;inset:0;z-index:0;background:#071b1b3b;pointer-events:none}
.vantuong-controls{position:absolute;right:20px;bottom:20px;z-index:3;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;background:none;border:0}
.vantuong-controls button{position:relative;appearance:none;box-sizing:border-box;width:60px;height:60px;min-height:60px;display:grid;place-items:center;margin:0;padding:0;border:1px solid #b6a071;border-radius:50%;background:radial-gradient(circle at 35% 25%,#3d453f,#18201d 75%);color:#f6e5bf;font:750 15px/1 var(--sans);letter-spacing:.6px;box-shadow:inset 0 0 0 4px #18201d,inset 0 0 0 5px #b69c5f55,0 4px 12px #0005;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.vantuong-controls button[data-vt-phase=counter]{background:radial-gradient(circle at 35% 25%,#883c37,#4b2023 75%);border-color:#c6aa71;box-shadow:inset 0 0 0 4px #4b2023,inset 0 0 0 5px #d6b87655,0 4px 12px #0005}
.vantuong-controls button:hover{transform:translateY(-2px);border-color:#ffe0a2}
.vantuong-controls button[aria-pressed=true]{border-color:#ffe5ab;box-shadow:inset 0 0 0 4px #352b20,inset 0 0 0 5px #e8c78499,0 0 18px #f7c96c77,0 4px 12px #0005}
.vantuong-controls button:focus-visible{outline:2px solid #ffe5ab;outline-offset:4px}
.vantuong-controls button::after{content:attr(data-tooltip);position:absolute;right:calc(100% + 12px);top:50%;transform:translate(5px,-50%);padding:7px 10px;border:1px solid #b6a07188;border-radius:5px;background:#14251cf0;color:#f6e5bf;font:500 13px/1.4 var(--sans);letter-spacing:0;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s}
.vantuong-controls button:hover::after,.vantuong-controls button:focus-visible::after{opacity:1;visibility:visible;transform:translate(0,-50%)}
.vantuong-info-dialog{width:min(690px,90vw);max-height:85dvh;padding:26px 30px;border:2px solid #c5a365;border-radius:12px;background:#14271ff7;color:#fff0cd;box-shadow:0 12px 60px #0008}
.vantuong-info-dialog::backdrop{background:#07110cc4;backdrop-filter:blur(3px)}
.vantuong-info-dialog p{margin:0;font:500 clamp(18px,2vw,25px)/1.7 var(--sans,Arial,sans-serif);color:#fff0cd}
@keyframes vt-arrow-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes vt-flash{0%,100%{transform:scale(.7);opacity:.35}50%{transform:scale(1.35);opacity:1}}
@keyframes vt-info-pulse{0%,100%{box-shadow:0 0 0 4px #f7d17d38}50%{box-shadow:0 0 0 10px #f7d17d00}}
@keyframes vt-info-blink{0%,100%{opacity:1}50%{opacity:.45}}
@media(max-width:600px){.vantuong-controls{right:15px;bottom:15px;gap:12px}.vantuong-controls button{width:56px;height:56px;min-height:56px;font-size:14px}.vantuong-info{width:30px;height:30px;font-size:21px}.vantuong-info-dialog{padding:20px}.vantuong-info-dialog p{font-size:18px}}
@media(prefers-reduced-motion:reduce){.vantuong-info,.vantuong-info span,.vt-counter .vt-battle-flashes path,.vt-enemy .vt-enemy-arrows .vt-arrow-reveal,.vt-enemy .vt-naval-arrows .vt-arrow-reveal,.vt-counter .vt-counter-arrows .vt-arrow-reveal{animation:none}.vt-enemy .vt-enemy-arrows .vt-arrow-reveal,.vt-enemy .vt-naval-arrows .vt-arrow-reveal,.vt-counter .vt-counter-arrows .vt-arrow-reveal{stroke-dashoffset:0}.vantuong-controls button{transition:none}}

.vantuong-map-viewport{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='11' cy='11' r='8' fill='%23142b23' fill-opacity='.8' stroke='%23ffe3a1' stroke-width='2'/%3E%3Cpath d='m17 17 8 8M7 11h8m-4-4v8' stroke='%23ffe3a1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 11 11,zoom-in;user-select:none}
.vantuong-map-viewport.is-panning{cursor:grabbing}
.vantuong-map-viewport .vantuong-info{cursor:pointer}

/* Slide 11: desktop-only source-cropped console. The phone interface remains intact. */
.vt-console-desktop{display:none}
@media(min-width:1000px){
 .teaching-slide.slide-vantuong-map,body.lesson-presenting .teaching-slide.slide-vantuong-map{padding:0;display:flex;align-items:center;justify-content:center;container-type:size;background:#091e18 url('../../assets/experience/allied/map-background.png') center/cover no-repeat;border:1px solid #a6955d;border-radius:6px;overflow:hidden}
 .slide-vantuong-map .vantuong-stage{flex:none;width:min(100%,207.61cqh);height:auto;aspect-ratio:982/473;min-height:0;max-height:100%;display:block;margin:auto;border:0;border-radius:0;background:transparent;overflow:visible;container-type:size}
 .slide-vantuong-map .vantuong-stage:before,.slide-vantuong-map .vantuong-stage:after{display:none}
 .slide-vantuong-map .vantuong-map-viewport{position:absolute;left:20.204%;top:13.954%;width:59.51%;height:72.45%;min-height:0;margin:0;z-index:1;border-radius:0;background:radial-gradient(ellipse at center,#183f3d,#061c20)}
 .slide-vantuong-map .vantuong-controls{display:none}
 .slide-vantuong-map .vt-console-desktop{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
 .vt-console-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 3px 5px #0009)}
 .vt-console-button{position:absolute;left:var(--vt-x);top:var(--vt-y);transform:translate(-50%,-50%);width:6.62cqw;height:6.62cqw;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#f5e1ab;pointer-events:auto;cursor:pointer;isolation:isolate;box-shadow:none}
 .vt-console-button img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}
 .vt-console-glyph{position:relative;z-index:1;font:700 1.65cqw/1 var(--sans,Arial,sans-serif);text-shadow:0 2px 3px #000}
 .vt-console-info .vt-console-glyph{font:700 italic 2.4cqw/1 Georgia,serif}.vt-console-reset .vt-console-glyph,.vt-console-zoom-in .vt-console-glyph,.vt-console-zoom-out .vt-console-glyph{font:500 3cqw/1 Arial,sans-serif}
 .vt-console-caption{position:absolute;top:105%;left:50%;transform:translateX(-50%);font:600 .64cqw/1.4 var(--sans,Arial,sans-serif);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;color:#eedbaa;text-shadow:0 1px 3px #000}
 .vt-console-button:hover:not(:disabled){filter:brightness(1.3) drop-shadow(0 0 7px #d1d98070)}
 .vt-console-button[aria-pressed=true]{filter:brightness(1.3) drop-shadow(0 0 9px #efc361)}
 .vt-console-button:focus-visible{outline:3px solid #ffe4a0;outline-offset:4px}
 .vt-console-button:disabled{opacity:.48;cursor:default;filter:saturate(.4)}
 .vt-console-hint{position:absolute;left:24%;right:24%;bottom:5%;margin:0;text-align:center;font:400 .65cqw/1.5 var(--sans,Arial,sans-serif);color:#d4c594;text-shadow:0 1px 3px #000}
}
