/* Jang v10: presentation only. Original handlers, API requests and data are untouched. */
:root { --exp-ink:#edf1ed; --exp-muted:#a9b8c0; --exp-gold:#d9ab60; --exp-line:#334550; --exp-base:url('/assets/img/experience_base.webp'); --exp-atlas:url('/assets/img/experience_atlas.webp'); }
body { background:#070d13!important; }
.app-shell { width:100%; max-width:760px!important; margin:auto; padding:env(safe-area-inset-top) 16px calc(96px + env(safe-area-inset-bottom))!important; color:var(--exp-ink); background:linear-gradient(180deg,#111b25,#0a1119 650px)!important; border-inline:1px solid #263640!important; box-shadow:0 24px 90px #0008!important; isolation:isolate; }
.app-shell *, .app-shell *::before, .app-shell *::after { box-sizing:border-box; }
.topbar { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:12px; padding:12px 0!important; background:transparent!important; border-bottom:1px solid #32424e!important; box-shadow:none!important; }
.topbar::after { display:none!important; }
.brand { display:flex; align-items:center; gap:10px; }
.brand__mark { width:38px; height:42px; display:grid; place-items:center; border-radius:6px!important; background:linear-gradient(140deg,#e4c286,#9a753d)!important; color:#15212a!important; box-shadow:inset 0 0 0 3px #17232b40!important; }
.brand b { display:block; font-size:15px!important; letter-spacing:0; }
.brand small { display:block; color:var(--exp-muted); margin-top:5px; font-size:10px; }
.topbar__actions { display:flex; gap:7px; }
.icon-button { display:grid; place-items:center; background:#182630; color:#d6e4e8; border:1px solid #394d59; border-radius:9px; width:36px; height:36px; }
.main-content { padding:16px 0 24px!important; }
.command-hero { position:relative!important; display:flex; flex-direction:column; justify-content:flex-end; min-height:290px!important; padding:24px!important; overflow:hidden; border:1px solid #53636a!important; border-radius:12px!important; background:#101c27!important; box-shadow:0 14px 34px #0005!important; }
.command-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#081019 0%,#081019b0 32%,#08101922 70%),var(--exp-base) center/cover no-repeat!important; opacity:1!important; pointer-events:none; }
.command-hero::after { content:''; position:absolute; inset:10px; border:1px solid #d9ab602c; border-radius:4px; pointer-events:none; }
.command-hero__map { position:absolute; inset:0; opacity:.23!important; background:none!important; pointer-events:none; }
.command-hero .grid-lines { position:absolute; inset:0; background:linear-gradient(#91c5ce18 1px,transparent 1px),linear-gradient(90deg,#91c5ce18 1px,transparent 1px); background-size:40px 40px; mask-image:linear-gradient(transparent,#000); }
.command-hero .radar { display:none!important; }
.command-hero__content { position:relative; z-index:1; max-width:100%; }
.command-hero .eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:10px; color:#ebc889!important; letter-spacing:1px; background:#0a141dc9; border:1px solid #8a754e; padding:5px 9px; border-radius:4px; }
.command-hero .eyebrow::before { content:''; width:5px; height:5px; background:#e6bb73; border-radius:50%; }
.command-hero h1,.command-hero h2 { color:#fff3da!important; margin:12px 0 9px; font-size:clamp(24px,5.8vw,32px)!important; line-height:1.4; text-shadow:0 2px 12px #000; }
.command-hero p { color:#c3d0d6!important; font-size:12px; line-height:1.8; }
.hero-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; font-size:11px; color:#dce5e7; }
.security-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid #496b62; border-radius:4px; color:#9fd8ba; background:#122820d9; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:7px!important; margin:14px 0!important; }
.stats-grid.two { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
.stat { min-width:0; position:relative; display:flex; flex-direction:column; align-items:flex-start!important; gap:7px; padding:11px!important; border:1px solid #33434d!important; background:linear-gradient(135deg,#1c2b34,#111c25)!important; border-radius:7px!important; box-shadow:inset 0 2px #6c879622!important; }
.stat svg { width:18px; height:18px; color:#adc5d1; }
.stat span { display:block; color:var(--exp-muted)!important; font-size:10px; margin-bottom:5px; }
.stat strong { display:block; font-size:14px!important; color:#e6eced; overflow-wrap:anywhere; white-space:normal!important; }
.stat--gold strong,.stat--gold svg { color:#e1bd79!important; }
.stat--red strong,.stat--red svg { color:#e99886!important; }
.vitals-card { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:15px!important; margin:0 0 20px; background:#101b24!important; border:1px solid #31434e!important; border-radius:8px!important; box-shadow:none!important; }
.vital { min-width:0; padding:0!important; border:0!important; }
.vital>div { display:flex; flex-direction:column; gap:6px; }
.vital span { font-size:10px; color:#a9bdc7; }
.vital b { font-size:10px; color:#dce8eb; font-weight:500; overflow-wrap:anywhere; }
.vital i { display:block; height:5px!important; margin-top:9px; background:#263640!important; border-radius:1px!important; overflow:hidden; }
.vital em { display:block; height:100%; max-width:100%; background:linear-gradient(90deg,#52795f,#a2cf91)!important; border-radius:0!important; }
.vital--blue em { background:linear-gradient(90deg,#387888,#86c9d2)!important; }
.vital--gold em { background:linear-gradient(90deg,#926c36,#e2b96c)!important; }
.section-title { display:flex; align-items:center; gap:9px; font-size:15px; color:#e4e9e7; margin:23px 0 12px; }
.section-title::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,#4c5b64); }
.action-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; }
.action-grid .action-card { --exp-x:2%; --exp-y:5.5%; position:relative!important; isolation:isolate; display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:flex-end!important; gap:5px!important; min-width:0; min-height:174px!important; padding:17px 14px!important; text-align:right; border:1px solid #50606a!important; border-radius:9px!important; background:#16232e!important; box-shadow:0 4px 0 #050b10,inset 0 1px #ffffff1a!important; overflow:hidden; color:#f1f1e7!important; animation:none!important; cursor:pointer; transition:transform .16s,border-color .16s!important; }
.action-grid .action-card::before { content:''; position:absolute!important; inset:0!important; z-index:-2; opacity:1!important; background-image:var(--exp-atlas)!important; background-size:330% 400%!important; background-position:var(--exp-x) var(--exp-y)!important; background-repeat:no-repeat!important; pointer-events:none; }
.action-grid .action-card::after { content:''; position:absolute!important; inset:0!important; width:auto!important; z-index:-1; opacity:1!important; background:linear-gradient(0deg,#07111afc 0%,#08121be0 24%,#08121b33 70%,#07111a11)!important; pointer-events:none; }
.action-grid .action-card[data-exp-scene='combat'] { --exp-x:2%; --exp-y:5.5%; border-color:#9d7864!important; }
.action-grid .action-card[data-exp-scene='alliance'] { --exp-x:50%; --exp-y:5.5%; }
.action-grid .action-card[data-exp-scene='command'] { --exp-x:98%; --exp-y:5.5%; }
.action-grid .action-card[data-exp-scene='special'] { --exp-x:2%; --exp-y:50%; }
.action-grid .action-card[data-exp-scene='siege'] { --exp-x:50%; --exp-y:50%; }
.action-grid .action-card[data-exp-scene='research'] { --exp-x:98%; --exp-y:50%; }
.action-grid .action-card[data-exp-scene='rewards'] { --exp-x:2%; --exp-y:94.5%; }
.action-grid .action-card[data-exp-scene='naval'] { --exp-x:50%; --exp-y:94.5%; }
.action-grid .action-card[data-exp-scene='economy'] { --exp-x:98%; --exp-y:94.5%; }
.action-grid .action-card>span:not(.gmc-body):not(.jw-card-art):not(.gs-card__art):not(.gs-card__veil):not(.gs-card__medal),.action-grid .gmc-crest,.action-grid .gmc-arrow,.action-grid .gmc-shine { display:none!important; }
.action-grid .action-card>.gmc-body { display:block!important; width:100%!important; min-width:0; margin:0!important; padding:0!important; background:none!important; border:0!important; flex:0 1 auto!important; }
.action-grid .action-card b,.action-grid .gmc-body b { position:relative; display:block; color:#f4ecd9!important; font-size:15px!important; margin:0!important; line-height:1.6; }
.action-grid .action-card small,.action-grid .gmc-body small { position:relative; display:block; color:#bbcbd1!important; font-size:10px!important; line-height:1.75!important; white-space:normal!important; margin:0!important; }
.action-grid .action-card:hover { transform:translateY(-2px)!important; border-color:#c7aa77!important; box-shadow:0 6px 0 #050b10,0 12px 22px #0004!important; }
.action-grid .action-card:active { transform:translateY(2px)!important; box-shadow:0 1px 0 #050b10!important; }
.action-card:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid #e4be7b!important; outline-offset:3px!important; }
button:disabled { cursor:not-allowed!important; opacity:.5; }
.battle-summary { background:#13202b!important; border:1px solid #314651; border-radius:8px; padding:16px; margin-top:20px; color:#b7cbd3; }
.bottom-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; z-index:8; bottom:0; left:50%; transform:translateX(-50%); width:min(760px,100%)!important; padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important; background:#0d1720f5!important; border-top:1px solid #63716d!important; box-shadow:0 -12px 30px #0006!important; backdrop-filter:blur(18px); }
.bottom-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:46px; border:0; background:transparent; color:#93a8b4; font-size:11px; border-radius:6px; }
.bottom-nav button svg { width:21px; height:21px; }
.bottom-nav button.active { color:#e4be7b!important; background:linear-gradient(0deg,#d9ab601b,transparent)!important; box-shadow:inset 0 -2px #d9ab60; }
.bottom-nav button.active::after { display:none!important; }
.economy-hero,.fleet-card,.production-card,.land-status,.nuclear-status { position:relative; padding:22px!important; min-height:155px; background:linear-gradient(90deg,#0b1725eb,#0b1725aa),var(--exp-base) center/cover!important; border:1px solid #4a5e6a!important; border-radius:10px!important; }
.economy-hero h2,.fleet-card h2,.production-card h2 { color:#f3dfbc; margin-bottom:10px; }
.product-list,.operation-list,.resource-list,.building-list,.army-list,.camp-list,.player-list,.research-list { display:grid; gap:10px; }
.product-card,.operation-card,.building-row,.resource-row,.army-row,.camp-row,.research-row,.player-row,.country-row,.owned-row { min-width:0; border:1px solid #344854!important; border-radius:8px!important; background:linear-gradient(120deg,#1a2935,#111d27)!important; box-shadow:inset 0 1px #ffffff0a!important; }
.product-card,.operation-card { padding:16px!important; }
.product-card__emoji,.operation-card__icon { width:55px!important; height:55px!important; display:grid; place-items:center; background:#0c1823!important; border:1px solid #53606a; border-radius:7px!important; font-size:27px!important; flex-shrink:0; }
.product-card__top { display:flex; align-items:center; gap:14px; }
.product-card__top>div { min-width:0; }
.product-card h3 { font-size:14px; color:#e8e9de; }
.product-card p { font-size:11px; color:#a7bdc9; white-space:normal!important; line-height:1.8; }
.product-card__metrics { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0; font-size:11px; color:#b9cbd4; }
.product-card__bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #364852; padding-top:12px; }
.primary-button,.danger-button,.outline-button { min-height:42px; padding:9px 16px; border-radius:6px!important; font:inherit; cursor:pointer; }
.primary-button { background:linear-gradient(135deg,#dfbe80,#ae874d)!important; border:1px solid #f1d79f!important; color:#141d22!important; box-shadow:inset 0 1px #fff5,0 3px 0 #71552d!important; }
.outline-button { background:#182a37; color:#d1dce0; border:1px solid #586d7b; }
.sheet,.cc-shell,.alliance-shell,.ops-sheet,.sg-sheet,.inv-sheet,.rw-sheet,.sw-sheet { background:linear-gradient(155deg,#162532,#0b1520)!important; border:1px solid #60727c!important; box-shadow:0 24px 80px #0009!important; border-radius:16px 16px 0 0!important; }
.cc-head,.sg-head,.inv-head,.rw-head,.sw-head { background:linear-gradient(90deg,#13212be6,#13212b9e),var(--exp-base) center/cover!important; border-bottom:1px solid #50606a!important; }
.cc-card,.ops-card,.inv-card,.sg-card,.rw-card,.sw-card,.alliance-card { background:#14232f!important; border:1px solid #3b525f!important; border-radius:9px!important; }
.country-picker-intro { padding:25px 16px; background:linear-gradient(0deg,#0a1520f2,#0a15208a),var(--exp-base) center/cover; border:1px solid #536571; border-radius:10px; margin:16px 0; }
.country-row { min-height:70px; padding:12px; }
.search-box { min-height:44px; border:1px solid #53626d; border-radius:7px; }
@media(min-width:600px) { .app-shell { padding-inline:24px!important; } .command-hero { min-height:330px!important; } .action-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important; } .action-grid .action-card { min-height:184px!important; } }
@media(max-width:390px) { .app-shell { padding-inline:10px!important; } .command-hero { padding:19px!important; min-height:260px!important; } .action-grid { gap:9px!important; } .action-grid .action-card { min-height:166px!important; padding:12px!important; } .stat { padding:9px 6px!important; } .stat strong { font-size:12px!important; } .vitals-card { padding:12px!important; gap:8px; } }
@media(prefers-reduced-motion:reduce) { .action-grid .action-card { transition:none!important; } body::after { animation:none!important; } }