@font-face{font-family:Cinzel;src:url('./assets/cinzel-medium.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
/* Civilization-style command layer. Loaded last so the simulation remains intact. */
:root{
  --akk-navy:#06182a;
  --akk-navy-2:#0b2940;
  --akk-ink:#f4e9ca;
  --akk-muted:#a9bec1;
  --akk-gold:#d4ad5d;
  --akk-gold-pale:#f2d995;
  --akk-cyan:#4fd9d1;
  --akk-frame:url('./assets/ui-frame.png');
  --akk-panel:url('./assets/ui-panels.png');
  --akk-icons:url('./assets/tech-icons.png');
  --akk-medallion:url('./assets/ui-medallion.png');
}

body.immersive{
  background:#06131f;
  color:var(--akk-ink);
  font-size:15px;
}

/* The menu uses a wide empire tableau; leader portraits remain exclusive to selection. */
.immersive .home-screen .home-art{
  inset:0;
  width:100%;
  height:100%;
  right:0;
  top:0;
  background-image:url('./assets/empire-menu.png');
  background-size:cover;
  background-position:70% center;
  background-repeat:no-repeat;
  mask-image:none;
  opacity:.94;
}
.immersive .home-screen .home-vignette{
  background:linear-gradient(90deg,#04101cf7 0%,#061522e8 31%,#06152280 56%,#06152218 78%),linear-gradient(0deg,#04101ca8,transparent 40%);
}
.immersive .home-screen .home-content{text-shadow:0 3px 12px #000}

/* Thin resource ribbon */
.immersive .topbar{
  height:58px;
  min-height:58px;
  padding:0 14px 0 76px;
  background-image:linear-gradient(90deg,#06182ae8,#09243aeb 48%,#071725f2),var(--akk-panel);
  background-size:100% 100%,200% 100%;
  background-position:center,left center;
  border:0;
  border-bottom:1px solid #d6b869;
  box-shadow:0 2px 0 #081420,0 8px 24px #020a12a8;
  filter:none!important;
}
.immersive .topbar::after{
  content:'';
  position:absolute;
  inset:auto 0 -5px;
  height:8px;
  background:var(--akk-frame) center/100% 100%;
  pointer-events:none;
  opacity:.82;
}
.immersive .brand{
  position:fixed;
  left:15px;
  top:7px;
  z-index:18;
  width:49px;
  height:49px;
  display:block;
  font-size:0;
}
.immersive .brand-mark{
  width:49px;
  height:49px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font:700 11px Georgia,serif;
  letter-spacing:1px;
  color:#f7e7bd;
  background-image:var(--akk-medallion);
  background-size:100% 100%;
  background-position:center;
  box-shadow:0 5px 15px #000b;
}
.immersive .brand>span:last-child{display:none}
.immersive .header-actions{margin-left:auto;gap:6px;z-index:2}
.immersive .header-actions .icon-button{
  width:30px;
  height:30px;
  border-radius:50%;
  color:#f0dda9;
  background-image:radial-gradient(circle,#0d2c40 0 52%,transparent 54%),var(--akk-icons);
  background-size:100% 100%,400% 200%;
  background-position:center,0 0;
  box-shadow:0 0 0 1px #c9a75f,0 3px 8px #0009;
  font-size:14px;
}
.immersive .header-actions .icon-button:hover{filter:brightness(1.2)}

.immersive .stats{
  position:fixed;
  z-index:14;
  top:6px;
  left:88px;
  right:176px;
  height:45px;
  display:grid;
  grid-template-columns:minmax(172px,1.15fr) minmax(160px,1fr) minmax(120px,.78fr) minmax(128px,.78fr);
  align-items:center;
  justify-content:start;
  gap:0;
  pointer-events:none;
}
.immersive .stats>div{
  position:relative;
  min-width:0;
  min-height:38px;
  padding:4px 20px 2px 43px;
  border:0;
  border-right:1px solid #d1b46755;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:8px;
}
.immersive .stats>div::before{
  content:'';
  position:absolute;
  left:8px;
  top:5px;
  width:29px;
  height:29px;
  border-radius:50%;
  background-image:var(--akk-icons);
  background-size:400% 200%;
  box-shadow:0 0 0 1px #d6b461,0 2px 7px #0008;
}
.immersive .stats>div:nth-child(1)::before{background-position:0 0}
.immersive .stats>div:nth-child(2)::before{background-position:33.333% 0}
.immersive .stats>div:nth-child(3)::before{background-position:100% 100%}
.immersive .stats>div:nth-child(4)::before{background-position:66.666% 100%}
.immersive .stats span{
  grid-column:1;
  font-size:9px;
  line-height:1;
  letter-spacing:1.25px;
  color:#9dbbc0;
  white-space:nowrap;
}
.immersive .stats strong{
  grid-column:2;
  grid-row:1 / span 2;
  margin:0;
  color:#f6d98d;
  font:400 clamp(16px,1.25vw,21px) Georgia,serif;
  letter-spacing:.1px;
  white-space:nowrap;
}
.immersive .stats small{
  grid-column:1;
  margin-top:3px;
  color:#78d6ad;
  font-size:9px;
  white-space:nowrap;
}
.immersive .stats .science-stat strong{color:#7de6e0}
.immersive .stats .round-stat{margin:0;min-width:0;border:0}
.immersive .stats .round-stat strong{font-size:18px}
.immersive .stats .round-stat i{font-size:12px;color:#adbfbd}

/* Medallion navigation */
.immersive .topbar nav{
  position:fixed;
  left:77px;
  top:67px;
  z-index:16;
  display:flex;
  gap:9px;
  margin:0;
}
.immersive .nav{
  position:relative;
  width:51px;
  min-width:51px;
  height:51px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50%!important;
  background-image:var(--akk-medallion);
  background-size:100% 100%;
  box-shadow:0 4px 12px #000a;
  color:transparent;
  overflow:visible;
}
.immersive .nav::before{width:37px;height:37px;grid-area:1/1}
.immersive .nav::after{
  content:attr(title);
  position:absolute;
  top:47px;
  left:50%;
  transform:translateX(-50%);
  min-width:max-content;
  padding:3px 7px;
  color:#dcd7bd;
  background:#061827db;
  border:1px solid #927c4d;
  border-radius:9px;
  font-size:8px;
  line-height:1;
  letter-spacing:.3px;
  opacity:0;
  transition:opacity .16s,transform .16s;
  pointer-events:none;
}
.immersive .nav:first-child::after{content:'Peta'}
.immersive .nav:nth-child(2)::after{content:'Portfolio'}
.immersive .nav:nth-child(3)::after{content:'Pelaburan'}
.immersive .nav:nth-child(4)::after{content:'Saham'}
.immersive .nav:nth-child(5)::after{content:'Teknologi'}
.immersive .nav:hover::after,.immersive .nav:focus-visible::after{opacity:1;transform:translate(-50%,3px)}
.immersive .nav.active{filter:brightness(1.32);box-shadow:0 0 0 2px #53d6cc,0 4px 14px #000b}

/* The terrain owns the viewport; HUD surfaces float above it. */
.immersive .board-panel{inset:58px 0 0;background:#0d3144;overflow:hidden}
.immersive .board-top{top:68px;left:382px;opacity:.9}
.immersive .board-title{font-size:9px;color:#d8dfc1;letter-spacing:1.7px}
.immersive .board-controls{right:24px;bottom:143px;gap:8px}
.immersive .board-controls button{
  width:37px;
  height:37px;
  border-radius:50%;
  background-image:radial-gradient(circle,#0b2c41 0 52%,transparent 54%),var(--akk-frame);
  background-size:100% 100%;
  box-shadow:0 3px 10px #0009;
  color:#f2dd9f;
  font-size:21px;
}
.immersive .map-legend{
  left:340px;
  right:auto;
  bottom:23px;
  gap:13px;
  padding:7px 11px;
  color:#d8e3d4;
  background-image:linear-gradient(#071c2bcf,#071c2bcf),var(--akk-panel);
  background-size:100% 100%,200% 100%;
  border:1px solid #aa8b51;
  border-radius:15px;
  text-shadow:0 1px 2px #000;
  font-size:8px;
}
.immersive .map-legend i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1px #e7d5a4}
.immersive .sea-label{font-size:11px;color:#d2e7df;opacity:.56}

/* City command panel: narrow, readable and richly textured. */
.immersive .research-panel{
  left:18px;
  top:130px;
  width:300px;
  height:52px;
  padding:9px 15px 9px 48px;
  border:0;
  border-image:var(--akk-frame) 72 fill / 8px / 0 stretch;
  filter:none!important;
  background:none;
}
.immersive .research-panel::before{
  content:'';
  position:absolute;
  left:12px;
  top:10px;
  width:31px;
  height:31px;
  background:var(--akk-icons) 100% 100%/400% 200%;
  border-radius:50%;
}
.immersive .research-panel span{font-size:8px;letter-spacing:1.3px;color:#51d2ca}
.immersive .research-panel strong{font:14px Georgia,serif;color:#f1ddb0}
.immersive .city-card{
  left:18px;
  top:188px;
  width:300px;
  max-height:calc(100dvh - 396px);
  padding:0 8px 9px;
  overflow:auto;
  background-image:linear-gradient(#071c2ad9,#082235ed),var(--akk-panel);
  background-size:100% 100%,200% 100%;
  background-position:center,left center;
  border:0;
  border-image:var(--akk-frame) 78 fill / 9px / 0 stretch;
  box-shadow:0 12px 32px #000a;
  filter:none!important;
}
.immersive .city-visual{
  height:80px;
  margin:0 -1px;
  background-image:linear-gradient(105deg,#0a5c64e6,#0b3144d9 65%),var(--akk-panel);
  background-size:100% 100%,200% 100%;
  border-bottom:2px solid #d2ad5e;
}
.immersive .city-visual::after{
  content:'';
  position:absolute;
  inset:auto 0 -1px;
  height:5px;
  background:linear-gradient(90deg,#42d4ca,#e1c06d 60%,transparent);
  opacity:.9;
}
.immersive .city-visual .hex-emblem{left:14px;bottom:11px}
.immersive .hex-emblem span{font-size:18px;letter-spacing:3px;color:#fff1bd}
.immersive .location-tag{left:13px;top:10px;font-size:7px;color:#9ce8e2;background:#061b2a9c}
.immersive .city-number{right:13px;top:10px;font-size:8px;color:#e6d39e}
.immersive .inspect-button{right:12px;bottom:10px;font-size:9px;color:#f0ddad;border-bottom:1px solid #56c9c2;background:#051b2abb}
.immersive .city-body{padding:14px 10px 7px}
.immersive .city-topline .eyebrow{font-size:8px;color:#58d6cf}
.immersive .status-badge{font-size:7px;color:#f4dda4;background:#14384a;border:1px solid #a88c52}
.immersive .city-body h2{margin:8px 0 6px;font:400 25px/1.02 'Libre Caslon Display',Georgia,serif;color:#f7e8bf}
.immersive .city-description{font-size:11px;line-height:1.5;color:#b1c6c2}
.immersive .city-values{margin:10px 0;gap:12px}
.immersive .city-values>div{padding:8px 9px;background:#06172699;border-left:2px solid #45cfc6}
.immersive .city-values span{font-size:8px;color:#9db1af}
.immersive .city-values strong{font:400 15px Georgia,serif;color:#f0d790}
.immersive .city-body .primary{font-size:10px;padding:10px}
.immersive .primary,.immersive .secondary{
  border:1px solid #a9894f;
  background-image:linear-gradient(#083047b8,#061e31c7),var(--akk-panel);
  background-size:100% 100%,200% 100%;
  background-position:center,left center;
  color:#f0d9a0;
  box-shadow:inset 0 0 0 1px #07131d,0 2px 7px #0006;
}
.immersive .primary:not(:disabled):hover,.immersive .secondary:not(:disabled):hover{filter:brightness(1.3);transform:translateY(-1px)}
.immersive .city-footnote{font-size:8px;line-height:1.45;color:#a8bcb6}
.immersive .tile-picker-label{font-size:7px;color:#57cec7}
.immersive #tile-picker{font-size:10px;padding:8px;background-image:linear-gradient(#071b2be8,#071b2be8),var(--akk-panel)!important;background-size:100% 100%,200% 100%!important}

/* Rival portraits */
.immersive .ranking-card{right:18px;top:69px;width:282px}
.immersive #ranking{gap:13px}
.immersive .rank-row{width:82px;gap:5px}
.immersive .rank-avatar{
  width:68px;
  height:68px;
  box-shadow:0 0 0 2px #0b1b28,0 0 0 5px #c5a254,0 0 0 7px #092238,0 7px 17px #000c;
}
.immersive .rank-row:hover .rank-avatar{filter:brightness(1.14);transform:translateY(-2px)}
.immersive .rank-no{left:1px;top:1px;width:19px;height:19px;color:#f7df9f;background:var(--akk-panel) right center/200% 100%;box-shadow:0 0 0 1px #d3b15f}
.immersive .rank-name{font-size:9px;color:#f3e5bf}
.immersive .rank-value{font-size:10px;color:#7fe2d7}

/* Turn command and current city information share one lower-right instrument. */
.immersive .turn-bar{
  right:18px;
  bottom:17px;
  width:535px;
  max-width:calc(100vw - 690px);
  min-width:440px;
  min-height:105px;
  padding:21px 122px 19px 26px;
  border:0;
  border-image:var(--akk-frame) 80 fill / 11px / 0 stretch;
  background:none;
  filter:none!important;
  box-shadow:0 12px 34px #000a;
}
.immersive .turn-bar::before{
  content:'GILIRAN SEMASA';
  position:absolute;
  top:10px;
  left:27px;
  color:#4dd4ca;
  font-size:7px;
  letter-spacing:1.5px;
}
.immersive .turn-copy{padding-top:6px}
.immersive .turn-copy strong{max-width:none;font:400 16px/1.2 Georgia,serif;color:#f4e4bd}
.immersive .turn-copy span{max-width:330px;margin-top:6px;font-size:10px;line-height:1.4;color:#a9beb9}
.immersive .turn-bar .primary{
  position:absolute;
  right:9px;
  top:50%;
  transform:translateY(-50%);
  width:96px;
  min-width:96px;
  height:96px;
  padding:17px 10px;
  flex-direction:column;
  gap:3px;
  border-radius:50%;
  border:0;
  background-image:var(--akk-medallion);
  background-size:100% 100%;
  background-position:center;
  box-shadow:0 6px 20px #000c;
  color:#fff0c2;
  text-align:center;
  text-shadow:0 2px 5px #000;
  font:700 10px/1.1 'DM Sans',sans-serif;
}
.immersive .turn-bar .primary:hover{transform:translateY(-52%) scale(1.025);filter:brightness(1.15)}
.immersive .turn-bar .primary .dice-icon{font-size:22px}

.immersive .news-card{
  left:337px;
  bottom:18px;
  width:min(300px,calc(100vw - 1210px));
  min-width:240px;
  min-height:88px;
  padding:15px 16px;
  border:0;
  border-image:var(--akk-frame) 80 fill / 9px / 0 stretch;
  background:none;
}
.immersive .news-card h3{font-size:13px;color:#f1deb1}
.immersive .news-card p:last-child{font-size:10px;line-height:1.35}
.immersive .news-card .eyebrow{color:#50d2ca}
.immersive .activity{display:none}

/* Canvas minimap: raster terrain is composited by hud.js. */
.strategic-minimap{
  position:fixed;
  z-index:11;
  left:18px;
  bottom:17px;
  width:300px;
  height:190px;
  padding:12px 12px 35px;
  border:0;
  border-image:var(--akk-frame) 80 fill / 11px / 0 stretch;
  background:none;
  box-shadow:0 12px 34px #000b;
}
.strategic-minimap::before{
  content:'PETA STRATEGIK MALAYSIA';
  position:absolute;
  left:20px;
  top:10px;
  z-index:2;
  color:#f2d999;
  font:700 7px/1 'DM Sans',sans-serif;
  letter-spacing:1.4px;
  text-shadow:0 1px 2px #000;
  pointer-events:none;
}
.strategic-minimap canvas{
  display:block;
  width:100%;
  height:100%;
  border-radius:3px;
  cursor:crosshair;
  outline:1px solid #c9a65c88;
  box-shadow:inset 0 0 18px #000;
}
.strategic-minimap canvas:focus-visible{outline:2px solid #54dbd2;outline-offset:2px}
.minimap-controls{
  position:absolute;
  left:13px;
  right:13px;
  bottom:8px;
  display:flex;
  gap:5px;
  justify-content:center;
}
.minimap-controls button{
  flex:1;
  min-width:0;
  padding:5px 4px;
  border:0;
  border-image:var(--akk-frame) 80 fill / 5px / 0 stretch;
  background:none;
  color:#e8d9af;
  font-size:7px;
  letter-spacing:.4px;
}
.minimap-controls button:hover{filter:brightness(1.3)}

@media(max-width:1390px){
  .immersive .stats{grid-template-columns:minmax(165px,1fr) minmax(145px,.9fr) minmax(105px,.65fr) minmax(112px,.66fr)}
  .immersive .stats>div{padding-right:10px}
  .immersive .news-card{display:none}
  .immersive .turn-bar{max-width:530px}
  .immersive .map-legend{left:335px}
}

@media(max-width:980px){
  .immersive .stats{left:76px;right:145px;grid-template-columns:1.25fr .8fr .72fr}
  .immersive .stats>div:nth-child(2){display:none}
  .immersive .stats>div{padding-left:38px}
  .immersive .topbar nav{left:72px}
  .immersive .nav{width:46px;min-width:46px;height:46px}
  .immersive .nav::before{width:33px;height:33px}
  .immersive .research-panel,.immersive .city-card{width:266px}
  .strategic-minimap{width:266px}
  .immersive .map-legend{left:285px}
  .immersive .turn-bar{min-width:390px;max-width:48vw}
  .immersive .ranking-card{width:232px}
  .immersive .rank-row{width:68px}
  .immersive .rank-avatar{width:57px;height:57px}
}

@media(max-width:760px){
  body.immersive{height:auto;min-height:100dvh;overflow:auto;background:#071725}
  .immersive .topbar{position:sticky;height:54px;min-height:54px;padding:0 9px 0 57px}
  .immersive .brand{left:10px;top:7px;width:39px;height:39px}
  .immersive .brand-mark{width:39px;height:39px;font-size:9px;box-shadow:0 0 0 2px #d0aa59,0 4px 11px #000a}
  .immersive .header-actions{gap:3px}
  .immersive .header-actions .icon-button{width:27px;height:27px;font-size:12px}
  .immersive .home-screen .home-art{background-position:64% center;opacity:.72}
  .immersive .home-screen .home-vignette{background:linear-gradient(90deg,#04101cf5,#061522d9 72%,#06152270)}
  .immersive .stats{
    position:absolute;
    top:60px;
    left:8px;
    right:8px;
    height:55px;
    grid-template-columns:1.12fr .8fr .75fr;
    background-image:linear-gradient(#061a2bee,#061a2bee),var(--akk-panel);
    background-size:100% 100%,200% 100%;
    border:1px solid #a78950;
    border-radius:3px;
  }
  .immersive .stats>div{min-height:43px;padding:3px 5px 2px 35px;border-right:1px solid #a7895055}
  .immersive .stats>div::before{left:5px;top:7px;width:27px;height:27px}
  .immersive .stats span{font-size:6px;letter-spacing:.7px}
  .immersive .stats strong{font-size:13px}
  .immersive .stats small{font-size:6px}
  .immersive .stats .round-stat strong{font-size:12px}
  .immersive .topbar nav{position:absolute;top:121px;left:8px;right:auto;gap:5px}
  .immersive .nav{width:42px;min-width:42px;height:42px}
  .immersive .nav::before{width:30px;height:30px}
  .immersive .nav::after{display:none}
  .immersive .board-panel{position:relative;inset:auto;height:650px;min-height:650px;margin-top:0}
  .immersive #board{inset:0}
  .immersive .board-top{display:none}
  .immersive .research-panel{position:absolute;top:173px;left:8px;width:190px;height:48px;padding-left:43px}
  .immersive .research-panel::before{width:27px;height:27px}
  .immersive .research-panel strong{display:block;max-width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
  .immersive .ranking-card{position:absolute;top:177px;right:8px;width:142px}
  .immersive #ranking{gap:5px}
  .immersive .rank-row{width:42px}
  .immersive .rank-avatar{width:36px;height:36px;box-shadow:0 0 0 1px #0b1b28,0 0 0 3px #c5a254,0 4px 9px #000b}
  .immersive .rank-no{width:13px;height:13px;font-size:7px}
  .immersive .rank-name{font-size:5px}
  .immersive .rank-value{font-size:6px}
  .immersive .city-card{position:relative;top:auto;left:auto;width:calc(100% - 16px);max-height:none;margin:8px;padding:0 8px 12px}
  .immersive .city-visual{float:none;width:auto;height:78px;margin:0}
  .immersive .city-body{padding:14px 10px}
  .immersive .city-body h2{font-size:25px}
  .immersive .city-description{font-size:11px}
  .immersive .city-values{max-width:none}
  .immersive .city-body .primary{font-size:11px}
  .immersive .turn-bar{
    position:absolute;
    left:159px;
    right:8px;
    bottom:8px;
    width:auto;
    max-width:none;
    min-width:0;
    min-height:105px;
    padding:18px 73px 13px 15px;
  }
  .immersive .turn-bar::before{left:16px;top:9px;font-size:6px}
  .immersive .turn-copy strong{max-width:125px;font-size:11px;white-space:normal}
  .immersive .turn-copy span{display:none}
  .immersive .turn-bar .primary{right:7px;width:61px;min-width:61px;height:61px;padding:7px;font-size:7px;box-shadow:0 0 0 2px #d5ae5a,0 5px 14px #000b}
  .immersive .turn-bar .primary .dice-icon{font-size:16px}
  .strategic-minimap{position:absolute;left:8px;bottom:8px;width:143px;height:110px;padding:9px 9px 27px}
  .strategic-minimap::before{left:13px;top:8px;font-size:5px;letter-spacing:.8px}
  .minimap-controls{left:9px;right:9px;bottom:5px;gap:2px}
  .minimap-controls button{padding:3px 1px;font-size:5px}
  .immersive .board-controls{right:10px;bottom:123px}
  .immersive .board-controls button{width:31px;height:31px;font-size:18px}
  .immersive .map-legend{left:8px;right:auto;bottom:124px;max-width:235px;gap:7px;padding:5px 7px;font-size:5px}
  .immersive .compass{display:none}
  .immersive .sea-label{font-size:7px;top:51%;left:57%}
  .immersive .news-card{display:flex;position:relative;left:auto;bottom:auto;width:calc(100% - 16px);min-width:0;margin:8px;padding:14px}
}

@media(prefers-reduced-motion:reduce){
  .immersive .nav::after,.immersive .rank-avatar,.immersive button{transition:none!important}
}
/* Leader selection: illustrated portrait, roster and economic dossier. */
.immersive h1,.immersive h2,.immersive h3,.immersive .home-menu button,.immersive .city-label,.immersive .character-card strong{font-family:'Cinzel',Georgia,serif;font-weight:500;font-variant:small-caps;letter-spacing:.035em}
.immersive .home-content h1{font-size:clamp(32px,4.5vw,68px)}
.immersive .home-content h1 b{font-size:clamp(70px,9vw,132px);letter-spacing:.05em}
.immersive .character-layout{display:grid;grid-template-columns:minmax(220px,.95fr) minmax(280px,1fr) minmax(240px,.85fr);gap:22px;max-width:1500px;margin:auto;padding:0 32px 30px;align-items:stretch}
.immersive .leader-stage{position:relative;min-height:550px;overflow:hidden;background:#111711 url('./assets/ui-panels.png') left/200% 100%;border-image:var(--akk-frame) 70 fill / 8px / 0 stretch}
.immersive .leader-stage-art{display:block;width:100%;height:100%;min-height:550px;aspect-ratio:auto;background-size:500% 200%;mask-image:linear-gradient(#000 70%,transparent)}
.leader-stage-caption{position:absolute;bottom:35px;left:25px;right:25px;text-align:center;text-shadow:0 2px 5px #000}
.leader-stage-caption span{font:9px Georgia,serif;letter-spacing:4px;color:#c2aa71}.leader-stage-caption strong{display:block;font:27px Georgia,serif;color:#f6e3b5;margin-top:12px}
.immersive .leader-roster{padding:22px 14px;background:url('./assets/ui-panels.png') left/200% 100%;border-image:var(--akk-frame) 70 fill / 7px / 0 stretch}
.immersive .character-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.immersive .character-card{display:grid;grid-template-columns:48px 1fr;align-items:center;column-gap:9px;text-align:left;padding:10px;min-height:81px;border-image-width:5px}
.immersive .character-card .portrait{grid-row:span 2;width:48px;height:55px;aspect-ratio:auto;margin:0;border-radius:40%}
.immersive .character-card strong{font-size:12px;line-height:1.3;margin:0}.immersive .character-card small{font-size:9px;line-height:1.3;margin:2px 0 0;color:#a9c5ce}
.immersive .character-card.chosen{filter:brightness(1.35);box-shadow:inset 0 0 24px #38b5b431}
.immersive .character-detail{padding:25px 20px;text-align:left;background:url('./assets/ui-panels.png') left/200% 100%;border-image:var(--akk-frame) 70 fill / 7px / 0 stretch}
.immersive .character-detail h2{font-size:30px;margin:14px 0}.immersive .character-detail p{font:15px/1.65 Georgia,serif;color:#c5d3d6}.immersive .character-detail .perk-banner{margin:24px 0;padding:23px 14px;line-height:1.6}.immersive .character-detail label{display:block;margin:30px 0 10px;font-size:11px;letter-spacing:1px}.immersive .character-detail select{width:100%;margin-bottom:25px;padding:13px;background:#0b283b;color:#f2deb1;border:0;font:14px Georgia,serif}.immersive #begin-empire{width:100%;font:18px Georgia,serif;padding:19px}.roster-note{font:13px/1.6 Georgia,serif;color:#a9c5ce;padding:16px 8px}.fiction-note{display:block;font-size:10px;line-height:1.7;margin-top:18px;color:#9db3ba}
.resource-yield,.settler-panel{background:url('./assets/ui-panels.png') left/200% 100%;padding:12px;margin-top:12px;font-size:11px;line-height:1.5}.resource-yield strong{display:block;color:#e6ce8f}.settler-panel h3{margin:0 0 8px;font-size:15px}.settler-panel button{width:100%;margin:3px 0}.settler-panel select{width:100%;margin:6px 0}.settler-panel small{display:block;color:#a4b9bc}.settler-unit-label{position:absolute;pointer-events:auto;background:url('./assets/ui-medallion.png') center/100% 100%;width:42px;height:42px;border:0;color:#f4dd94;text-shadow:0 2px 3px #000;font:18px Georgia,serif;transform:translate(-50%,-100%);z-index:4}.diplomacy-actions{display:flex;flex-wrap:wrap;gap:9px}.trade-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}.trade-columns label{display:block;font-size:11px;margin:12px 0}.trade-columns input,.trade-columns select{display:block;width:100%;padding:10px;background:#102c3e;color:#f4dfb1;border:1px solid #597079;margin-top:6px}.trade-preview{min-height:45px;padding:12px;background:url('./assets/ui-panels.png') left/200% 100%;font-size:12px}.diplomacy-status{color:#87d8cc!important}
@media(max-width:1100px){.immersive .character-layout{grid-template-columns:.85fr 1fr .85fr;gap:10px;padding:0 15px 25px}.immersive .leader-stage,.immersive .leader-stage-art{min-height:470px}.immersive .character-grid{gap:5px}.immersive .character-card{grid-template-columns:36px 1fr;padding:7px;gap:5px;min-height:75px}.immersive .character-card .portrait{width:36px;height:45px}.immersive .character-card strong{font-size:10px}.immersive .character-card small{font-size:8px}.immersive .character-detail{padding:20px 14px}.immersive .character-detail h2{font-size:24px}.immersive .character-detail p{font-size:13px}}
@media(max-width:760px){.immersive .character-layout{grid-template-columns:1fr 1.3fr}.immersive .leader-stage,.immersive .leader-stage-art{min-height:360px}.immersive .leader-roster{padding:12px 8px}.immersive .character-grid{grid-template-columns:1fr 1fr}.immersive .character-card{display:block;text-align:center;min-height:0;padding:6px}.immersive .character-card .portrait{display:none}.immersive .character-card strong{font-size:10px}.immersive .character-card small{display:none}.immersive .character-detail{grid-column:1/-1}.leader-stage-caption{left:10px;right:10px;bottom:20px}.leader-stage-caption strong{font-size:20px}.roster-note{font-size:11px;padding:5px}.trade-columns{grid-template-columns:1fr}.immersive .home-content h1 b{font-size:75px}}
/* Game art and labels behave like a native game surface. */
.immersive,.immersive *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.immersive input,.immersive textarea{-webkit-user-select:text;user-select:text}
.immersive img{-webkit-user-drag:none;user-drag:none}
.portrait{position:relative;overflow:hidden;container-type:size;background-image:none!important;background-color:transparent!important}
.portrait-crop{position:absolute;left:50%;top:50%;width:max(100cqw,calc(100cqh * 1677 / 2345));aspect-ratio:1677 / 2345;transform:translate(-50%,-50%);background-image:var(--portrait-atlas);background-size:500% 200%;background-repeat:no-repeat;pointer-events:none}

.attractions{display:grid;gap:8px;margin-top:14px}.attractions button{width:100%;padding:12px 8px;line-height:1.6}.attractions small,.resource-yield small{display:block;margin-top:6px;line-height:1.5}

.immersive .portrait,.immersive .rank-avatar{background-color:transparent!important}

/* Corners occupy 112 source pixels. Keep scroll content inside the fixed frame. */
body.immersive :is(.topbar,.city-card,.research-panel,.turn-bar,.news-card,.activity,.strategic-minimap,.leader-stage,.leader-roster,.character-detail,.character-card,.primary,.secondary,.home-menu button,.city-label,.minimap-controls button){border-image-slice:112 fill;border-image-repeat:stretch;box-sizing:border-box}
body.immersive .city-card{overflow:hidden;padding:10px;isolation:isolate}
.city-scroll{max-height:calc(100dvh - 418px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ad9460 #18303c}
body.immersive .city-visual{margin:0;border-bottom:0}
body.immersive .city-visual::after{display:none}
body.immersive .leader-stage,body.immersive .leader-roster,body.immersive .character-detail{border-image-slice:112 fill}
@media(max-width:760px){.city-scroll{max-height:none;overflow:visible}body.immersive .city-card{padding:10px}}
/* Generated material atlas supplies the hammered-gold texture of the title. */
.immersive .home-content h1{position:relative;color:#e7c979;background-image:linear-gradient(115deg,#9c732b 0%,#e3c372 30%,#fff3c0 45%,#ab792e 60%,#efd58a 80%),url('./assets/material-atlas.png');background-size:250% 100%,300% 200%;background-position:0% 50%,50% 100%;background-blend-mode:screen;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 3px #060d16);animation:niaga-gold 12s ease-in-out infinite}
.immersive .home-content h1 small{-webkit-text-fill-color:#d5cba9}
.immersive .home-content h1::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:url('./assets/ui-medallion.png'),url('./assets/ui-medallion.png'),url('./assets/ui-medallion.png'),url('./assets/ui-medallion.png');background-size:5px 5px,3px 3px,4px 4px,3px 3px;background-position:12% 30%,42% 65%,75% 40%,92% 78%;background-repeat:no-repeat;filter:brightness(2.5);animation:niaga-sparkle 5s ease-in-out infinite;opacity:.35}
@keyframes niaga-gold{0%,100%{background-position:0% 50%,50% 100%}50%{background-position:100% 50%,50% 100%}}
@keyframes niaga-sparkle{0%,100%{opacity:.1;transform:translateY(3px)}50%{opacity:.6;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.immersive .home-content h1,.immersive .home-content h1::after{animation:none}}

.immersive .home-content h1>span{-webkit-text-fill-color:#d5cba9}
/* Engraved raster astrolabe and moving specular light, confined to the title. */
.home-title-scene{position:relative;isolation:isolate;width:max-content;max-width:100%}
.home-astrolabe{position:absolute;z-index:-1;pointer-events:none;width:clamp(220px,24vw,310px);aspect-ratio:1;left:50%;top:44%;transform:translate(-50%,-50%);opacity:.46;filter:drop-shadow(0 0 12px #d698262b)}
.home-astrolabe::before,.home-astrolabe i,.home-astrolabe::after{content:'';position:absolute;inset:0;background:url('./assets/golden-astrolabe.png') center/contain no-repeat;animation:astrolabe-orbit 140s linear infinite}
.home-astrolabe::before{mask-image:radial-gradient(circle,transparent 57%,#000 58%);-webkit-mask-image:radial-gradient(circle,transparent 57%,#000 58%)}
.home-astrolabe i{mask-image:radial-gradient(circle,#000 55%,transparent 57%);-webkit-mask-image:radial-gradient(circle,#000 55%,transparent 57%);animation-duration:95s;animation-direction:reverse}
.home-astrolabe::after{background:conic-gradient(from 0deg,transparent 0deg,#fff7bb 20deg,transparent 42deg,transparent 180deg,#ffe28b 200deg,transparent 224deg);mask:url('./assets/golden-astrolabe.png') center/contain no-repeat;-webkit-mask:url('./assets/golden-astrolabe.png') center/contain no-repeat;mix-blend-mode:screen;opacity:.65;animation-duration:17s}
.immersive .home-content h1{z-index:1;text-shadow:none;filter:drop-shadow(0 2px 1px #201304) drop-shadow(0 4px 7px #020b12);background-image:linear-gradient(112deg,transparent 34%,#fff9db 43%,#fffef1 45%,#ffeeb1 47%,transparent 55%),linear-gradient(178deg,#fff2af 0%,#eac55d 24%,#a67520 43%,#fff3b1 49%,#d8ab40 64%,#ffed99 85%,#ad7926 100%),url('./assets/material-atlas.png');background-size:300% 100%,100% 100%,300% 200%;background-position:100% 0,0 0,50% 100%;background-blend-mode:screen,normal,normal;animation:title-gold-sweep 7s ease-in-out infinite}
.immersive .home-content h1::after{display:none}
.title-glints{position:absolute;inset:0;pointer-events:none;z-index:2}
.title-glints i{position:absolute;width:16px;height:16px;opacity:0;background:radial-gradient(ellipse at center,#fffefa 0%,#ffe4a0 10%,transparent 65%);filter:drop-shadow(0 0 3px #ffcc5b);animation:title-glint 6s ease-in-out infinite}
.title-glints i::before,.title-glints i::after{content:'';position:absolute;left:48%;top:0;width:4%;height:100%;background:linear-gradient(transparent,#fffce0,transparent)}
.title-glints i::after{transform:rotate(90deg)}
.title-glints i:nth-child(1){left:5%;top:9%;animation-delay:.2s}.title-glints i:nth-child(2){left:63%;top:18%;animation-delay:2.5s}.title-glints i:nth-child(3){left:20%;top:90%;animation-delay:4.2s}.title-glints i:nth-child(4){left:77%;top:57%;animation-delay:1.6s}
@keyframes astrolabe-orbit{to{transform:rotate(360deg)}}
@keyframes title-gold-sweep{0%,16%{background-position:100% 0,0 0,50% 100%}68%,100%{background-position:0% 0,0 0,50% 100%}}
@keyframes title-glint{0%,35%,75%,100%{opacity:0;transform:scale(.35) rotate(0deg)}50%{opacity:.95;transform:scale(1) rotate(20deg)}60%{opacity:.35;transform:scale(.6) rotate(30deg)}}
.home-screen[hidden] .home-astrolabe *,.home-screen[hidden] .title-glints *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.home-astrolabe::before,.home-astrolabe::after,.home-astrolabe i,.title-glints i,.immersive .home-content h1{animation:none}.title-glints{display:none}.home-astrolabe::after{opacity:.2}}

.expansion-panel{padding:12px 0;font-size:11px}.expansion-panel h3{font-size:14px}.expansion-panel button{display:block;width:100%;margin:7px 0}.expansion-panel small{color:#b1c6c2;line-height:1.5}

.immersive .ranking-card,.immersive #ranking,.immersive .rank-row{overflow:visible}.immersive .ranking-card{border-radius:0}.immersive .rank-value{color:#efd18a;text-shadow:0 1px 3px #171008;font-weight:600}

/* Illustrated landmark catalogue uses five generated bitmap atlases. */
.catalog-filter{display:flex;align-items:center;gap:12px;margin:18px 0}.catalog-filter select{max-width:250px}.building-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.building-card{background:#0c2637 url('./assets/ui-panels.png') center/cover;padding:12px;display:flex;flex-direction:column;gap:7px;border:10px solid transparent;border-image:url('./assets/ui-frame.png') 112 fill/10px stretch}.building-picture{background-size:500% 200%;background-repeat:no-repeat;aspect-ratio:0.72;width:100%}.building-card h3{font-family:Cinzel,Georgia,serif;color:#f0d497;font-size:17px;margin:0}.building-card p{font-size:12px;line-height:1.55;flex:1}.building-card strong{color:#efd18a}.building-card>span,.building-card>small{font-size:11px;color:#c2d0d1}.building-card .primary{margin-top:8px;font-size:12px;min-height:45px}.catalog-notice{color:#efd18a}.owned-building-picture{position:absolute;inset:0;aspect-ratio:auto;opacity:.8}.city-visual .hex-emblem,.city-visual .location-tag,.city-visual .city-number,.city-visual .inspect-button{z-index:1}.owned-building-picture~.hex-emblem{background:#071a2ca8;align-self:end}.building-card button:disabled{opacity:.65}@media(max-width:700px){.building-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.building-card{padding:6px}.building-card h3{font-size:14px}}@media(max-width:430px){.building-catalog{grid-template-columns:1fr}.building-picture{max-height:320px;aspect-ratio:.72;align-self:center;width:230px}}
.immersive .nav[data-view=build]::after{content:'Binaan'}.immersive .nav[data-view=tech]::after{content:'Teknologi'}.immersive .nav[data-view=build]::before{background-position:0% 0%}

.immersive .leader-roster{min-height:0;max-height:calc(100dvh - 145px);display:flex;flex-direction:column}.immersive .leader-roster .character-grid{overflow-y:auto;min-height:0;padding:5px;scrollbar-color:#a98b4d #0a2635}.immersive .leader-roster>.eyebrow,.immersive .roster-note{flex-shrink:0}@media(max-width:760px){.immersive .leader-roster{max-height:460px}} 
html{overflow-x:clip}@media(max-width:500px){.building-catalog{grid-template-columns:1fr}.building-picture{width:100%;max-height:none;aspect-ratio:.72}.building-card{padding:10px}.building-card h3{font-size:17px}}
.immersive .character-detail #game-victory{width:100%;margin:7px 0 4px;background:#0b2b3c url('./assets/ui-panels.png') left/200% 100%;color:#f0d99b;padding:10px;font:14px Cinzel,Georgia,serif}
.immersive .character-detail .victory-description{font-size:12px;line-height:1.55;margin:8px 0;color:#cbd5cc}
.victory-rule{display:block;font-size:10px;line-height:1.5;color:#a9bbbe;margin:6px 0 12px}
.victory-progress{display:block;border:0;background:transparent;color:#ebcf8c;padding:6px 0 0;font:10px Cinzel,Georgia,serif;cursor:pointer;text-align:left}
.victory-progress:hover{color:#fff2c2}.portfolio-item>span>small{display:block;font-size:10px;color:#a9bbbe;margin-top:4px}
.rank-avatar .portrait-crop,.character-card .portrait-crop{top:0;transform:translateX(-50%)}
.immersive .home-brand{position:absolute;top:auto;left:auto;right:max(32px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:2px;width:128px}
.immersive .home-brand img{display:block;width:128px;height:auto;object-fit:contain}
.immersive .home-brand>span{display:block;margin:0;padding-left:.45em;color:#d7b773;font-size:9px;line-height:1.4;letter-spacing:.45em}
/* Portrait sheets use tall cells: contain the complete head in diplomacy. */
.immersive .profile-art{width:100%;aspect-ratio:1677 / 2345;align-self:start}
.immersive .profile-art .portrait-crop{top:0;width:100%;transform:translateX(-50%)}
.immersive .brand-mark{font-size:0;background-image:url('./assets/empayar-crest.png');background-size:contain;background-repeat:no-repeat;background-color:transparent;border-radius:0;box-shadow:none;filter:drop-shadow(0 2px 4px #000a)}
.immersive .nav[data-view=routes]::after{content:'Perdagangan'}
.immersive .nav[data-view=routes]::before{background-position:0% 0%}
.trade-overview{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
.trade-overview span{flex:1;min-width:140px;padding:14px;background:var(--akk-panel) left/200% 100%;font-size:12px;color:#b8c8c7}
.trade-overview b{display:block;color:#f0d99b;font:22px Cinzel,Georgia,serif;margin-bottom:5px}
.trade-route-layout{display:grid;grid-template-columns:1fr 1.25fr;gap:20px}
.trade-route-card{padding:20px;background:var(--akk-panel) left/200% 100%;border:8px solid transparent;border-image:var(--akk-frame) 112 fill/8px stretch}
.trade-route-card h3{font:19px Cinzel,Georgia,serif;color:#f0d99b;margin:8px 0 18px}
.trade-route-card p{font-size:13px;line-height:1.6}.trade-route-card label{display:block;font-size:11px;color:#cbd7d6;margin:15px 0 7px}
.trade-route-card select{display:block;width:100%;padding:11px;background:#102d40 url('./assets/ui-panels.png') left/200% 100%;color:#efe2bd;border:1px solid #988354;font:12px Georgia,serif}
.trade-route-card button{display:block;width:100%;margin:14px 0 8px;min-height:44px}
.trade-route-card small{display:block;font-size:11px;line-height:1.6;color:#b2c6c8}
.salesperson-status,.route-quote{padding:15px 0}.salesperson-status strong,.route-quote strong{color:#83d4c7}
.route-endpoints{font:18px/1.6 Cinzel,Georgia,serif!important}.route-endpoints span{display:block;color:#e5c573}
.route-progress{width:100%;height:8px;accent-color:#d5b661}.trade-route-note{margin-top:25px;color:#adc1c3;font-size:11px!important}
.worker-panel{margin-top:12px;padding:12px;background:var(--akk-panel) left/200% 100%;font-size:11px;line-height:1.5}
.worker-panel h3{margin:0 0 8px;font:15px Cinzel,Georgia,serif}.worker-panel select,.worker-panel button{width:100%;margin:5px 0}.worker-panel small{display:block;color:#aec4c8}.worker-industry{margin-top:10px}.worker-industry strong{display:block;color:#ecd18d}
.leader-prologue{min-height:100dvh;padding:24px 5vw 30px;background:linear-gradient(100deg,#071522bb,#091e2df2),url('./assets/ui-panels.png') center/cover;color:#dce3df;box-sizing:border-box}
.story-header{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1250px;margin:0 auto 22px;color:#cbb576;font-size:10px;letter-spacing:.23em}
.story-header .secondary{padding:12px 20px;font-size:12px;letter-spacing:0}.story-header img{width:56px;height:56px;object-fit:contain}
.story-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);align-items:center;gap:4vw;max-width:1180px;margin:auto;min-height:calc(100dvh - 130px)}
.story-art{position:relative;display:flex;flex-direction:column;align-items:center;padding:25px 0 20px;background:radial-gradient(ellipse at 50% 46%,#b5913c30,transparent 64%)}
.immersive .story-portrait{width:min(100%,47vh);aspect-ratio:1677 / 2345;height:auto;flex-shrink:0;background:transparent!important;filter:drop-shadow(0 15px 24px #0008)}
.immersive .story-portrait .portrait-crop{top:0;width:100%;transform:translateX(-50%)}
.story-art>span:last-child{margin-top:15px;color:#d9bc78;font:14px Cinzel,Georgia,serif;text-align:center;letter-spacing:.1em}
.story-content>.eyebrow{font-size:10px;color:#a99462;letter-spacing:.22em;margin:0 0 12px}
.immersive .story-content h1{font:500 clamp(28px,3.2vw,46px)/1.15 Cinzel,Georgia,serif;color:#efda9c;margin:0 0 22px;text-shadow:0 2px 5px #0008;letter-spacing:.02em}
.story-transcript{font-size:clamp(13px,1.12vw,16px);line-height:1.8;color:#cad7d6;max-width:620px}.story-transcript p{margin:0 0 14px}
.story-ability{padding:13px 17px;margin:22px 0 18px;border:9px solid transparent;border-image:url('./assets/ui-frame.png') 112 fill/9px stretch;background:url('./assets/ui-panels.png') center/cover}
.story-ability>span{font:14px Cinzel,Georgia,serif;color:#ecd18d}.story-ability p{font-size:12px;line-height:1.6;margin:6px 0 0;color:#c8d6d4}
.story-audio-controls{display:grid;grid-template-columns:auto auto 1fr;gap:9px 12px;align-items:center}.story-audio-controls button{font-size:11px;padding:10px 15px;min-height:39px}.story-audio-controls [role=status]{font-size:10px;line-height:1.6;color:#a8c3c3}.story-audio-controls progress{grid-column:1/3;width:100%;height:5px;accent-color:#dcc078}.story-audio-controls small{font-size:10px;color:#bdd0ca}
.story-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:25px}.story-actions>div{font-size:11px;color:#b3c8c7;line-height:1.6}.story-actions small{display:block;color:#d8bf82}.story-actions .primary{min-width:190px;font:18px Cinzel,Georgia,serif;padding:16px 24px}.story-fiction{display:block;font-size:9px;color:#819b9e;line-height:1.6;margin-top:16px}
@media(max-width:760px){.leader-prologue{padding:14px 5vw 30px}.story-header{margin-bottom:12px}.story-header>span{font-size:8px;letter-spacing:.1em}.story-header img{width:38px;height:38px}.story-layout{grid-template-columns:1fr;gap:0;min-height:0}.story-art{padding:0 0 20px}.immersive .story-portrait{width:min(56vw,235px)}.story-content{max-width:600px;margin:auto}.story-content>.eyebrow{text-align:center}.immersive .story-content h1{text-align:center;font-size:29px}.story-transcript{font-size:14px}.story-audio-controls{grid-template-columns:1fr 1fr}.story-audio-controls [role=status]{grid-column:1/-1}.story-audio-controls progress{grid-column:1}.story-actions{flex-direction:column;align-items:stretch}.story-actions .primary{width:100%}.story-fiction{text-align:center}}
@media(max-width:700px){.trade-route-layout{grid-template-columns:1fr}.trade-route-card{padding:13px}.trade-overview b{font-size:18px}}
@media(max-width:760px){.immersive .home-brand{width:94px;right:max(20px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}.immersive .home-brand img{width:94px}.immersive .home-brand>span{font-size:7px}}