/* Mobile interface: one visual language for React and compatibility screens. */
:root{
 --bg:#080e16;--panel:#101a25;--text:#e8edf3;--muted:#94a4b6;
 --line:rgba(170,192,211,.16);--blue:#a3d8e2;--cyan:#a3d8e2;--gold:#d7bb86;
 --safe-top:max(env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px));
 --safe-bottom:max(env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px));
 --nav-height:64px;--radius:8px;
 color-scheme:dark;
}
html,body{background:#080e16;color:var(--text);font-family:Segoe UI,Roboto,Arial,sans-serif;line-height:1.45}
html{scroll-padding-bottom:calc(var(--nav-height) + var(--safe-bottom) + 16px)}
body{width:100%;max-width:none;margin:0;padding:var(--safe-top) 0 0;min-height:100dvh;font-size:14px}
body:before{content:"";position:fixed;inset:0 0 auto;height:var(--safe-top);background:#080e16;z-index:90;pointer-events:none}
#app{width:100%;max-width:480px;margin:0 auto;min-height:calc(100dvh - var(--safe-top));background:#080e16}
.game-shell{display:block;min-height:calc(100dvh - var(--safe-top))}
.sidebar{display:none}
#app .main-view{width:100%;max-width:none;padding:0 16px calc(var(--nav-height) + var(--safe-bottom) + 16px);margin:0}
.ui-icon{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #a3d8e2;outline-offset:3px}
.panel{background:#101a25;border:1px solid var(--line);border-radius:8px;box-shadow:none}
.panel:before{display:none}
.btn{border:1px solid #344150;border-radius:6px;background:#131e2a;color:var(--text);padding:10px 14px;min-height:44px;font-size:13px;font-weight:600;box-shadow:none;transition:background .15s,border-color .15s}
.btn.ghost{background:#111c28}
.btn.primary{background:#a8d8df;color:#0b1b24;border:1px solid #a8d8df;box-shadow:none;font-weight:700}
.btn:hover{transform:none;border-color:#6c8c9d;box-shadow:none}
.btn.primary:hover{background:#b9e3e8;border-color:#b9e3e8;box-shadow:none}
.btn:active,.activity-row:active{transform:translateY(1px)}
button:disabled{opacity:.4;cursor:default}
.text-link{color:#bacbd7;font-weight:500;min-height:36px}
.badge{border-radius:4px;font-size:10px;padding:4px 7px;background:transparent}
.bar{border:0;height:5px;background:#1d2c3a}
.bar i{background:#d7bb86}
.bar.cyan i{background:#81bccb}
.bar.health i{background:#dc7682}
.mini-head,.eyebrow{color:#91aabd;letter-spacing:.12em;font-size:10px}
.role-option.active{background:#263f4b;border-color:#89bac8;box-shadow:none;color:#edf7fa}
.preset-card.active{border-color:#cdb37f;box-shadow:none}
.preset-card.active:after{background:#d7bb86;box-shadow:none}

/* The header gives resources a place without making them three more cards. */
#app .topbar{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:8px;min-height:50px;padding:8px 0 10px;margin:0;border:0}
#app .topbar h1{font-size:22px;font-weight:650;letter-spacing:-.03em;line-height:1.2;margin:0;text-transform:none}
#app .topbar-right{width:auto;gap:0}
.currencies{display:flex;align-items:center;gap:13px;flex-wrap:nowrap}
.currencies .currency{display:flex;align-items:center;gap:5px;padding:0;border:0;border-radius:0;background:none;font-size:12px;white-space:nowrap}
.currency .ui-icon{width:14px;height:14px;color:#94a8bd}
.currency.gold .ui-icon{color:#d7bb86}
.currency.material .ui-icon{color:#82c2ce}
.currency b{font-weight:650;font-variant-numeric:tabular-nums}
.currency small{display:none}

/* Navigation stays below the content and above the Android system buttons. */
.mobile-nav{position:fixed;z-index:50;bottom:0;left:50%;right:auto;transform:translateX(-50%);display:flex;align-items:flex-start;gap:0;width:100%;max-width:480px;min-height:calc(var(--nav-height) + var(--safe-bottom));padding:4px 6px calc(4px + var(--safe-bottom));border:0;border-top:1px solid var(--line);border-radius:0;background:#0d151f;backdrop-filter:none;box-shadow:0 -5px 18px #0002}
.mobile-nav .nav-btn{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:auto;min-width:0;min-height:55px;padding:7px 1px;border:0;border-radius:0;background:transparent;color:#7e91a5;text-align:center;box-shadow:none}
.mobile-nav .nav-btn span{width:auto;display:block;line-height:1}
.mobile-nav .nav-btn .ui-icon{width:21px;height:21px}
.mobile-nav .nav-btn small{font-size:10px;color:inherit;letter-spacing:.01em}
.mobile-nav .nav-btn.active{color:#e0c89b;border:0;background:transparent;box-shadow:none}
.mobile-nav .nav-btn:before{display:none}
.mobile-nav .nav-btn.active:after{content:"";position:absolute;bottom:1px;left:calc(50% - 8px);width:16px;height:2px;border-radius:1px;background:#d7bb86;box-shadow:none}

/* Home: profile, one primary activity, then a short list of destinations. */
.home-dashboard{display:grid;gap:12px}
.hunter-profile{padding:12px 14px 0;background:#101a25;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.hunter-heading{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px}
.hunter-portrait{width:52px;height:56px;object-fit:cover;object-position:50% 8%;border-radius:4px}
.section-kicker{display:block;font-size:9px;font-weight:600;letter-spacing:.15em;color:#9aafc0;line-height:1.5}
.hunter-name h2{font-size:24px;line-height:1.15;letter-spacing:-.035em;margin:3px 0 4px;overflow-wrap:anywhere}
.hunter-name p{margin:0;font-size:11px;color:#b2c0cf}
.hunter-name p span{padding:0 6px;color:#536d82}
.hunter-rank{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:40px;font-size:10px;color:#d7bb86}
.hunter-rank .ui-icon{width:23px;height:23px}
.hunter-xp{display:flex;justify-content:space-between;align-items:center;margin:10px 0 5px;font-size:10px;color:#a9b8c7;font-variant-numeric:tabular-nums}
.hunter-xp small{font-size:10px;color:#6f859a}
.home-progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:3px;border:0;border-radius:2px;background:#24313f;overflow:hidden;accent-color:#d7bb86}
.home-progress::-webkit-progress-bar{background:#24313f}
.home-progress::-webkit-progress-value{background:#d7bb86;border-radius:2px}
.home-progress::-moz-progress-bar{background:#d7bb86}
.hunter-record{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:10px 0 0;padding:0 0 11px}
.hunter-record>div{display:flex;flex-direction:column;gap:1px;text-align:center;border-right:1px solid var(--line)}
.hunter-record>div:last-child{border:0}
.hunter-record strong{font-size:19px;font-weight:600;line-height:1.25;font-variant-numeric:tabular-nums}
.hunter-record span{font-size:10px;color:#8fa1b4}
.equipment-condition{display:flex;gap:9px;align-items:center;min-height:44px;border-top:1px solid var(--line);color:#92a6b7}
.equipment-condition>.ui-icon{width:17px;height:17px}
.equipment-condition>div{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.equipment-condition strong{font-size:10px;font-weight:500}
.equipment-condition small{font-size:10px;color:#91a3b3}
.equipment-condition.needs-repair{color:#d9ad78}
.equipment-condition.needs-repair small{color:#bd9c79}
.repair-shortcut{display:flex;flex-direction:column;justify-content:center;gap:0;min-height:44px;margin-left:auto;padding:2px 0 2px 8px;flex:none;border:0;background:transparent;color:#e0c89b;font-size:11px;font-weight:600;cursor:pointer}
.repair-shortcut small{font-size:9px;color:#a6957e}
.condition-ok{margin-left:auto;display:flex;align-items:center;gap:3px;white-space:nowrap;font-size:10px;color:#8faea7}
.condition-ok .ui-icon{width:13px;height:13px}
.unspent-link{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:40px;width:100%;padding:4px 0;border:0;border-top:1px solid var(--line);background:none;color:#c7d9e2;font-size:11px;text-align:left}
.unspent-link .ui-icon{width:16px;height:16px}
.arena-feature{position:relative;min-height:133px;border:1px solid #38536c;border-radius:8px;overflow:hidden;background:linear-gradient(90deg,#0b1728f5 0%,#0b1728ad 60%,#0b17282b),url('assets/umbral.webp') center 48%/cover}
.arena-feature-copy{position:relative;z-index:1;padding:12px 16px}
.arena-feature .section-kicker{color:#afc5d5;font-size:9px}
.arena-feature h2{font-size:21px;font-weight:650;letter-spacing:-.035em;line-height:1.2;margin:4px 0}
.arena-feature p{font-size:11px;color:#b0c1d0;margin:0 0 6px}
.arena-feature .btn{display:inline-flex;align-items:center;gap:17px;min-height:44px;padding:8px 12px;font-size:12px}
.arena-feature .btn .ui-icon{width:17px;height:17px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:1px 0 6px}
.section-heading h2{margin:0;font-size:12px;font-weight:600;color:#cad5e0}
.home-activities{min-width:0}
.activity-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 3px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;color:#dae3eb;text-align:left;cursor:pointer}
.activity-icon{display:grid;place-items:center;width:34px;height:36px;color:#95b7c7;flex:none}
.activity-icon .ui-icon{width:24px;height:24px}
.activity-copy{display:flex;flex:1;flex-direction:column;min-width:0;gap:3px}
.activity-copy strong{font-size:13px;font-weight:600}
.activity-copy small{font-size:10px;color:#8096ab}
.activity-row>.ui-icon{width:15px;height:15px;color:#71879a}
.activity-count{display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:4px;background:#2e3028;color:#e0c89b;font-size:10px}
.home-account.account-entry{display:flex;align-items:center;gap:6px;margin:0;padding:0 0 2px;min-height:34px;font-size:10px;color:#7f96aa}
.connection-dot{width:4px;height:4px;border-radius:50%;background:#83aaa3;flex:none}
.home-account a{display:flex;align-items:center;gap:5px;margin-left:auto;min-height:36px;color:#9aafc0;font-size:11px;text-decoration:none}
.home-account a .ui-icon{width:14px;height:14px}

/* Account entry uses the same world art and a focused, compact form. */
body.connection-page{display:flex;align-items:flex-start;justify-content:center;padding:var(--safe-top) 0 var(--safe-bottom);background:#080e16}
.connection-page #app{background:transparent;min-height:0}
.connection-shell.online-card{max-width:480px;width:100%;margin:0;padding:0;background:#080e16;border:0;border-radius:0;overflow:hidden}
.gateway-art{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:186px;padding:21px 22px;background:linear-gradient(180deg,#07111d52,#080e16 100%),url('assets/umbral.webp') center 36%/cover}
.gateway-brand{display:flex;align-items:center;gap:9px}
.gateway-brand img{width:28px;height:28px;mix-blend-mode:screen}
.gateway-brand strong{font-size:11px;letter-spacing:.15em;font-weight:650;color:#dae4ed}
.gateway-brand strong span{font-weight:400;color:#b2b5a7;letter-spacing:0;padding:0 2px}
.gateway-caption{padding-top:30px}
.gateway-caption .section-kicker{color:#c9b48f;font-size:9px}
.online-card .gateway-caption h1{font-size:32px;line-height:1.1;letter-spacing:-.04em;font-weight:600;margin:6px 0 0}
.gateway-content{padding:8px 22px 0}
.gateway-content h2{margin:4px 0;font-size:20px;font-weight:600;letter-spacing:-.025em}
.online-card .gateway-intro{font-size:12px;color:#8da1b6;margin:6px 0 20px}
.online-card label{gap:7px;margin:14px 0;color:#a2b4c4;font-size:11px}
.online-card input:not([type=file]){border:1px solid #2a3949;border-radius:5px;background:#101a25;padding:12px;color:#e4edf4;outline:none;min-height:45px}
.online-card input::placeholder{color:#526c82;font-size:13px}
.online-card input:focus{border-color:#7ba5b5;box-shadow:0 0 0 2px #7ba5b514}
.online-card .btn{width:auto;margin:0;min-height:44px;border-radius:5px}
.connect-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0}
.connect-actions .btn{width:100%;display:flex;align-items:center;justify-content:center;gap:18px}
.connect-actions .ui-icon{width:17px;height:17px}
.server-settings{border-top:1px solid var(--line);padding:10px 0 0;margin-top:16px}
.server-settings summary{display:flex;align-items:center;gap:7px;min-height:34px;color:#a1b5c5;font-size:11px;cursor:pointer;list-style:none}
.server-settings summary:after{content:'+';margin-left:auto;font-size:16px;color:#8d9eae}
.server-settings[open] summary:after{content:'−'}
.server-settings summary .ui-icon{width:15px;height:15px}
.online-card .server-settings p{margin:3px 0 10px;font-size:10px;color:#6e879d}
.server-address-row{display:flex;gap:6px;min-width:0}
.online-card .server-address-row input{flex:1;min-width:0;width:0;font-size:12px!important;padding:10px 8px}
.online-card .server-address-row .btn{font-size:11px;padding:8px 10px;flex:none}
.gateway-account{display:flex;align-items:center;gap:14px;padding:16px 0 23px}
.gateway-account>img{width:66px;height:80px;border-radius:5px;object-fit:cover;object-position:50% 8%;border:1px solid #304153}
.gateway-account-icon{display:grid;place-items:center;width:56px;height:68px;background:#101d2b;border:1px solid #2e4052;border-radius:5px;color:#a9c8d8}
.gateway-account .section-kicker{font-size:9px;color:#7b95aa}
.gateway-account h2{overflow-wrap:anywhere;font-size:23px;margin:4px 0;letter-spacing:-.025em}
.online-card .gateway-account p{font-size:12px;margin:0;color:#9eb2c5}
.online-card #play-online{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:12px 15px;font-size:14px}
.online-card .automatic-save-note{display:flex;align-items:center;gap:5px;margin:12px 0 24px;font-size:10px;color:#7f9caa}
.automatic-save-note .ui-icon{width:13px;height:13px;color:#91b5ac}
.account-options{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:8px}
.account-options button{display:flex;align-items:center;gap:6px;border:0;background:none;padding:9px 0;min-height:44px;font-size:10px;color:#829caf;text-align:left;cursor:pointer}
.account-options .ui-icon{width:15px;height:15px}
.online-card #migrate-local{width:100%;margin:0 0 16px;font-size:12px}
.online-card #connection-message{font-size:11px;color:#d7bb86;margin:12px 0 0}
.online-card #connection-message:empty{display:none}
.online-card #local-link{margin:16px 0 0;min-height:36px;display:flex;align-items:center;font-size:10px;color:#6f879b;text-decoration:none}
.gateway-footer{display:flex;justify-content:space-between;gap:12px;padding:25px 22px 20px;color:#435c70;font-size:8px;letter-spacing:.16em}
.gateway-footer span{color:#33485b}
.online-overlay{background:#080e16f5}
.online-overlay .online-card{background:#101a25;border:1px solid #324657;border-radius:8px;padding:20px}
.online-overlay .online-card .btn{display:block;width:100%;margin:9px 0}
.online-overlay .online-card p{color:#a2b4c5;font-size:12px}

/* Preserve the single-screen combat and expedition layouts. */
#app.compact-play .main-view{padding:4px 8px calc(var(--nav-height) + var(--safe-bottom))}
#app.compact-play .topbar{min-height:30px;padding:2px 0 5px;margin-bottom:3px}
#app.compact-play .topbar h1{font-size:16px;letter-spacing:0}
#app.compact-play .currencies{gap:10px}
#app.compact-play .currencies .currency{padding:0;font-size:10px;gap:3px;border:0;background:none}
#app.compact-play .currency .ui-icon{width:12px;height:12px}
.compact-play .panel{border-color:#263c4f;border-radius:6px}
.compact-play .action-card{background:#111e2c;border-color:#2c455a;box-shadow:none}
.compact-play .action-card.selected{border-color:#a6ccd6;background:#213746;box-shadow:none}
.compact-play .actions-column{gap:0}
.compact-play .queue-item{background:#182a38;border-color:#426074}
.compact-play .empty-queue{border-color:#2e4659;background:transparent}
.compact-play .queue-item,.compact-play .empty-queue{min-height:72px}
.compact-play .queue-item{padding:4px 4px 30px;gap:2px}
.compact-play .queue-item strong{line-height:12px;overflow-wrap:anywhere}
.compact-play .queue-item small{margin:0;line-height:10px}
.compact-play .queue-list{margin:3px 0}
.compact-play .battle-bars{margin-bottom:3px}
.compact-play .distance-status{background:#11212e;border-color:#2b4659;border-radius:3px;font-size:11px}
.compact-play .queue-box>.btn{min-height:40px;padding:8px 10px}
.compact-tools .btn{background:transparent;border-color:#2a4052;color:#a5bbcc;border-radius:4px}
.arena-rank,.arena-rival{border-color:#2e4152;background:#111f2d;border-radius:5px}
.arena-rank strong{color:#d7bb86}
.arena-rank progress{accent-color:#d7bb86}
.compact-play .ruin-status .ruin-floor{min-height:36px;padding-right:39px;align-items:center}
.compact-play .ruin-status [data-action="ruin-refresh"]{position:absolute;right:5px;top:6px;display:grid;place-items:center;width:36px;height:36px;min-height:36px;margin:0;padding:7px;border:0;background:transparent;color:#93acbf}
.compact-play .ruin-status [data-action="ruin-refresh"] .ui-icon{width:18px;height:18px}
.play-dialog{background:#101a25;border-color:#354e62;border-radius:8px}
#toast-root{bottom:calc(var(--nav-height) + var(--safe-bottom) + 10px)}
.toast{background:#172534;border-color:#41596c;box-shadow:0 5px 15px #0005;border-radius:6px}
@media (max-width:360px){
 #app .main-view{padding-left:12px;padding-right:12px}
 .currencies{gap:10px}.currencies .currency{gap:4px;font-size:11px}
 .hunter-profile{padding-left:12px;padding-right:12px}
 .hunter-heading{gap:10px}.hunter-name h2{font-size:22px}
 .hunter-name .section-kicker{font-size:8px}
 .equipment-condition>div{display:grid;gap:0}
 .gateway-content{padding-left:18px;padding-right:18px}
 .gateway-art{padding-left:18px;padding-right:18px}
 .online-card .gateway-caption h1{font-size:29px}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}