/* V29 mobile art direction. Load after mobile-v27.css.
 * 36px circular surfaces sit inside 44px touch targets. No layout scaling,
 * backdrop blur, animated shadows, or rasterized labels are used on phones.
 * Portrait remains usable; the primary battlefield is landscape.
 */
.app-mobile {
 --app-gold:#d1ac63; --app-light:#f8e2a5; --app-line:#c6a66466;
 --app-panel:#10231c; --app-text:#efe6cb; --app-muted:#bdc6b5;
 --app-radius:10px; --app-touch:44px; --app-circle:36px;
 --app-metal:linear-gradient(145deg,#ffe3a1,#9a7039 44%,#c0a064 70%,#f3d699);
 --app-surface:linear-gradient(145deg,#294236,#101f1a 64%,#0a1714);
 --safe-l:max(8px,env(safe-area-inset-left)); --safe-r:max(8px,env(safe-area-inset-right));
 --safe-t:max(7px,env(safe-area-inset-top)); --safe-b:max(7px,env(safe-area-inset-bottom));
 color:var(--app-text);
}
.app-mobile button {font-weight:650;transition:background-color .12s,border-color .12s;}
.app-mobile button:focus-visible,.app-mobile input:focus-visible,.app-mobile select:focus-visible {outline:2px solid #ffedb8;outline-offset:2px;}
.app-mobile .ui-line-icon {color:var(--app-light);}
.app-mobile #hud .hero-panel {
 left:var(--safe-l);top:var(--safe-t);width:218px;height:55px;min-width:0;
 padding:0 0 0 47px;border:0;border-radius:0;background:none;box-shadow:none;
}
.app-mobile #heroPortrait {
 left:0;top:0;width:51px;height:51px;object-fit:cover;object-position:50% 50%;
 border:2px solid #edce8b;border-radius:50%;background:radial-gradient(#476345,#172b22);
 box-shadow:0 0 0 1px #573d23,0 2px 5px #0009;z-index:1;
}
.app-mobile .hero-panel>div {
 position:relative;height:48px;padding:4px 6px 0 7px;border-top:1px solid var(--app-gold);
 border-right:1px solid #9b7b43;border-radius:0 8px 8px 0;
 background:linear-gradient(100deg,#0d231cf5,#122c23ef 80%,#1f3627ef);box-shadow:0 2px 5px #0005;
}
.app-mobile .hero-panel strong {color:#f8e5b4;font-size:11px;line-height:14px;padding-right:35px;letter-spacing:.01em;}
.app-mobile .hero-panel #heroLevel {top:4px;right:7px;font-size:10px;line-height:14px;color:#f1d38b;}
.app-mobile .hero-panel .health {height:13px;margin:2px -3px 0 -3px;border:1px solid #bdad6b;border-radius:3px 7px 7px 3px;background:#061a12;box-shadow:inset 0 1px 3px #0008;}
.app-mobile #hpfill {background:linear-gradient(#7edb62,#26ad48 45%,#118a38 46%,#43bc50);box-shadow:inset 0 1px #b9ff8b99;border-right:1px solid #bdffc0;}
.app-mobile #hptext {font-size:9px;line-height:11px;color:#f1ffdc;text-shadow:0 1px #0b331c;font-variant-numeric:tabular-nums;}
.app-mobile .hero-experience {height:5px;margin:4px 0 0;border:1px solid #9f8fbd88;background:#0d1322;border-radius:3px;}
.app-mobile #heroXPFill {background:linear-gradient(90deg,#6e50c5,#ba82fa);}
.app-mobile .hero-xp-text {position:absolute;left:8px;top:47px;margin:0;color:#e4d6f5;font-size:8px;line-height:11px;text-shadow:0 1px 3px #000,0 0 3px #000;}
.app-mobile .app-resources {
 top:var(--safe-t);left:50%;transform:translateX(-50%);width:auto;max-width:calc(100vw - 445px);
 min-height:25px;padding:3px 12px;gap:11px;border:1px solid #c8a35e88;border-radius:15px;
 background:linear-gradient(#293629ef,#11231cef);box-shadow:0 1px 4px #0007;font-size:10px;color:#f3dea7;
}
.app-mobile #appBattleGold {padding-left:17px;position:relative;}
.app-mobile #appBattleGold:before {content:'';position:absolute;width:14px;height:14px;left:0;top:0;background:url('assets/mobile-v24/icons/coin.svg') center/contain no-repeat;}
.app-mobile #appBattleFatigue {border-left:1px solid #b99b5c66;padding-left:9px;color:#d9e1cf;}
.app-mobile #appBattleFatigue.high {color:#ffba91;}
.app-mobile #appObjective {
 top:calc(var(--safe-t) + 61px);left:var(--safe-l);width:218px;max-width:218px;height:44px;
 padding:11px 23px 11px 10px;color:#ece3c6;font-size:10px;line-height:21px;
}
.app-mobile #appObjective:before {inset:7px 0;border:1px solid #ac8c4d66;border-left:2px solid #d2ae65;border-radius:3px 14px 14px 3px;background:linear-gradient(90deg,#142b20ed,#15251bc9);}
.app-mobile #appObjective:after {right:9px;top:11px;color:#e6c27c;}
.app-mobile #appTop button:before {inset:4px;border-radius:50%;border:1px solid #e8c47e;background:var(--app-surface);box-shadow:inset 0 0 0 2px #14231d,0 2px 4px #0007;}
.app-mobile #appTop .ui-icon {width:22px;height:22px;}
.app-mobile .map-wrap {
 right:calc(var(--safe-r) + 47px);width:100px;padding:2px;border:1px solid #dfbb75;border-radius:6px;
 box-shadow:0 0 0 1px #4d3a21,0 2px 5px #0008;background:#182b20;
}
.app-mobile #appLocation {top:calc(var(--safe-t) + 61px);right:calc(var(--safe-r) + 49px);width:144px;max-width:144px;font-size:9px;line-height:13px;color:#f6dfab;}
.app-mobile #appBattleTools {display:contents;}
.app-mobile .app-battle-tools button {position:absolute;width:44px;height:44px;min-width:44px;min-height:44px;font-size:21px;color:#f8d994;}
.app-mobile .app-battle-tools button:before {inset:4px;border-radius:50%;border:1px solid #c7a663;background:var(--app-surface);box-shadow:inset 0 0 0 2px #17221a,0 2px 4px #0006;}
.app-mobile #appZoomOut {top:calc(var(--safe-t) + 75px);right:calc(var(--safe-r) + 94px);}
.app-mobile #appZoomIn {top:calc(var(--safe-t) + 75px);right:calc(var(--safe-r) + 47px);}

/* Command and action surfaces mirror the illustrated layout without covering
 * the centre of the battlefield. Visual circles and input targets differ. */
.app-mobile #joystick {
 width:84px;height:84px;left:var(--safe-l);bottom:var(--safe-b);border:1px solid #d2ad64;
 background:radial-gradient(ellipse at 40% 20%,#bbaa5e18,#12281d9c 72%);
 box-shadow:inset 0 0 0 3px #16291a77,inset 0 0 0 4px #b99d5144,0 2px 7px #0005;
}
.app-mobile #stick {width:32px;height:32px;left:25px;top:25px;border:1px solid #ffe4a4;background:radial-gradient(ellipse at 35% 25%,#f4d99d,#b58b4b 65%,#705329);box-shadow:inset 0 1px 1px #fff2bb88,0 2px 5px #0008;}
.app-mobile .joy-direction {display:block;position:absolute;left:50%;top:8px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:5px solid #c9a46080;transform:translateX(-50%);}
.app-mobile .joy-direction.east {top:50%;left:auto;right:7px;transform:translateY(-50%) rotate(90deg);}
.app-mobile .joy-direction.south {top:auto;bottom:8px;transform:translateX(-50%) rotate(180deg);}
.app-mobile .joy-direction.west {top:50%;left:7px;transform:translateY(-50%) rotate(-90deg);}
.app-mobile .app-command-dock {left:calc(var(--safe-l) + 94px);bottom:var(--safe-b);transform:none;gap:2px;}
.app-mobile .app-command-dock:before {content:'';position:absolute;inset:4px -4px 1px;background:linear-gradient(#101f1acc,#14281ce8);border-block:1px solid #ac8a4a55;border-radius:22px;z-index:-1;}
.app-mobile .app-command-dock button {
 width:44px;height:44px;min-width:44px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:0;padding:4px 2px 2px;border:0;background:none;box-shadow:none;border-radius:50%;font-size:8px;line-height:10px;color:#f2dfae;
}
.app-mobile .app-command-dock button:before {
 content:'';position:absolute;inset:4px;z-index:-1;border:1px solid #c3a160;border-radius:50%;
 background:var(--app-surface);box-shadow:inset 0 0 0 2px #18261a,0 1px 3px #0006;
}
.app-mobile .app-command-dock button[aria-pressed=true] {background:none;color:#fff0b6;}
.app-mobile .app-command-dock button[aria-pressed=true]:before {border-color:#ffe5a4;background:linear-gradient(140deg,#6f6635,#223d29);box-shadow:inset 0 0 0 2px #2e381d,0 0 5px #d7b85944;}
.app-mobile .app-command-dock .ui-icon {width:19px;height:19px;flex:none;color:#f5d991;}
.app-mobile .app-command-label {display:block;max-width:41px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;line-height:10px;}
.app-mobile .app-battle-tools #appAssist {
 left:calc(var(--safe-l) + 285px);right:auto;bottom:var(--safe-b);top:auto;width:128px;height:44px;
 padding:0 36px 0 11px;gap:4px;justify-content:flex-start;font-size:9px;line-height:12px;
}
.app-mobile #appAssist:before {inset:8px 0;border-radius:17px;border:1px solid #ad995a88;background:linear-gradient(#183c2ce8,#0c261de8);}
.app-mobile #appAssist:after {content:'';position:absolute;right:9px;top:16px;width:12px;height:12px;border-radius:50%;background:#a5b1a4;box-shadow:8px 0 0 2px #304c3c,-1px 0 0 2px #304c3c;}
.app-mobile #appAssistLabel {min-width:0;max-width:59px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.app-mobile #appAssist b {font-size:8px;color:#a5b9a9;}
.app-mobile #appAssist.active:before {border-color:#29c5a0;background:linear-gradient(#104639f0,#0a2d24f0);box-shadow:0 0 6px #08bd8a33;}
.app-mobile #appAssist.active:after {right:3px;background:#eaffd9;box-shadow:-8px 0 0 2px #02a77b,-1px 0 0 2px #02a77b;}
.app-mobile #appAssist.active b {color:#60e5b1;}
.app-mobile .actions {width:182px;height:44px;bottom:var(--safe-b);right:var(--safe-r);}
.app-mobile .actions:before {content:'';position:absolute;inset:4px -3px 1px;background:linear-gradient(#131e17cc,#19281ce8);border-block:1px solid #ac8a4a55;border-radius:22px;}
.app-mobile .actions button,
.app-mobile .actions #attack,.app-mobile .actions #skill,.app-mobile .actions #shield,.app-mobile .actions #potion {
 width:44px;height:44px;min-width:44px;min-height:44px;bottom:0;top:auto;padding:5px 2px 3px;
 border:0;border-radius:50%;background:none;box-shadow:none;isolation:isolate;gap:0;
}
.app-mobile .actions #potion {right:138px;}
.app-mobile .actions #shield {right:92px;}
.app-mobile .actions #attack {right:46px;}
.app-mobile .actions #skill {right:0;}
.app-mobile .actions button:before {content:'';position:absolute;inset:4px;z-index:-1;border:1px solid #d5b16b;border-radius:50%;background:radial-gradient(ellipse at 35% 20%,#345a35,#0c2319 70%);box-shadow:inset 0 0 0 2px #16261a,0 2px 4px #0006;}
.app-mobile .actions #shield:before {background:radial-gradient(ellipse at 35% 15%,#286187,#0b2236 70%);border-color:#d6c888;}
.app-mobile .actions #attack:before {background:radial-gradient(ellipse at 35% 15%,#994a36,#33150f 70%);border-color:#e3bd77;}
.app-mobile .actions #skill:before {background:radial-gradient(ellipse at 35% 15%,#a26429,#34210d 70%);border-color:#e8be6c;}
.app-mobile .actions .ui-icon,.app-mobile .actions #attack .ui-icon,.app-mobile .actions #potion .ui-icon {width:20px;height:20px;filter:drop-shadow(0 1px 1px #0008);}
.app-mobile .actions small,.app-mobile .actions #attack small,.app-mobile .actions #potion small {font-size:8px;line-height:10px;max-width:39px;overflow:hidden;text-overflow:ellipsis;color:#f9e6bb;}
.app-mobile .actions #skill:after {inset:2px;padding:1px;}
.app-mobile .actions #skill.ready {box-shadow:none;border:0;}
.app-mobile .actions #skill.ready:before {border-color:#ffecb3;box-shadow:inset 0 0 0 2px #6f4215,0 0 7px #f4a63c66;background:radial-gradient(#bf7d24,#4b270c 75%);}
.app-mobile .hero-basic-skills {right:var(--safe-r);bottom:calc(var(--safe-b) + 47px);gap:2px;}
.app-mobile .hero-basic-skills button {width:44px;height:44px;min-width:44px;min-height:44px;padding:4px;border-radius:9px;border:1px solid #a78b4d66;background:linear-gradient(#1b3a2de8,#10271ee8);box-shadow:0 2px 5px #0005;gap:0;}
.app-mobile .hero-basic-skills .ui-icon {width:16px;height:16px;}
.app-mobile .hero-basic-skills span {font-size:8px;line-height:10px;}
.app-mobile .hero-basic-skills small {font-size:8px;line-height:10px;color:#edd49c;}
.app-mobile #interact {bottom:calc(var(--safe-b) + 53px);max-width:calc(100vw - 390px);min-width:112px;font-size:10px;padding:9px 14px;border-radius:22px;background:linear-gradient(#28543bed,#122a20f2)!important;border-color:#dcc181;}
.app-mobile #movementStatus {bottom:calc(var(--safe-b) + 101px);max-width:calc(100vw - 390px);font-size:9px;}
.app-mobile #bossbar {top:calc(var(--safe-t) + 32px);width:27vw;border:1px solid #b5865866;background:linear-gradient(#301a1ce8,#25161be8);border-radius:6px;}
.app-mobile #siegeHUD {top:calc(var(--safe-t) + 74px);width:27vw;max-height:60px;border:1px solid #c5a36466;background:#10251be8;}
.app-mobile .training-hud {top:calc(var(--safe-t) + 32px);max-width:calc(100vw - 460px);border-color:#c2a060;font-size:9px;}
.app-mobile #routeBanner {top:calc(var(--safe-t) + 103px);width:218px;max-width:218px;background:#14271fe3;border:1px solid #ad8f5266;font-size:9px;}

/* Every sheet uses the same header, hierarchy, card surfaces, input treatment,
 * scrolling rules and close target. Controls stay interactive at short heights. */
.app-mobile #modal {background:#030c09d9;}
.app-mobile .centered {padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);}
.app-mobile .modal {
 width:min(940px,100%);height:100%;max-height:100%;border:1px solid #b49354;border-radius:12px;
 background:radial-gradient(ellipse at 0 0,#2b3d2e55,transparent 65%),linear-gradient(145deg,#172c22,#0a1a15 70%);
 box-shadow:inset 0 0 0 2px #79613b22,0 6px 25px #0009;
}
.app-mobile .modal-head {flex:0 0 44px;min-height:44px;padding:0 5px 0 16px;border-bottom:1px solid #c2a05c55;background:linear-gradient(90deg,#253b2a,#10261b);}
.app-mobile .modal-head h2 {font-family:Georgia,'Noto Serif KR',serif;font-size:17px;line-height:22px;font-weight:700;letter-spacing:-.02em;color:#f5dfad;}
.app-mobile #closeModal {position:relative;isolation:isolate;width:44px;height:44px;min-width:44px;min-height:44px;border:0;background:none;box-shadow:none;font-size:25px;line-height:1;color:#eddaa9;}
.app-mobile #closeModal:before {content:'';position:absolute;inset:6px;z-index:-1;border:1px solid #b8995855;border-radius:50%;background:#0c231a;}
.app-mobile #modalBody {padding:12px 14px 16px;color:#dce4d3;font-size:12px;line-height:1.6;scroll-padding-block:12px;}
.app-mobile #modalBody button {min-height:44px;padding:7px 10px;border-radius:7px;border-color:#a48b4f55;background:#163426;color:#e9dfbf;line-height:16px;}
.app-mobile #modalBody button.primary {color:#28251a;border-color:#edd29a;background:linear-gradient(135deg,#d9b66c,#f1dba1 45%,#be9554);box-shadow:inset 0 1px #fff0bb55,0 2px 6px #0004;font-weight:800;}
.app-mobile #modalBody button.active,.app-mobile #modalBody button[aria-pressed=true] {color:#ffebaf;border-color:#dfbc73;background:linear-gradient(135deg,#4e5630,#243d27);}
.app-mobile #modalBody button.danger {background:#301e1a;border-color:#b9786266;color:#f1b6a3;}
.app-mobile #modalBody button:disabled {opacity:.45;}
.app-mobile #modalBody input,.app-mobile #modalBody select,.app-mobile #modalBody textarea {
 min-height:44px;padding:9px 11px;border:1px solid #ac945b66;border-radius:7px;background:#091c14;color:#f0e7d2;
 font-size:16px;line-height:1.4;max-width:100%;box-sizing:border-box;
}
.app-mobile #modalBody input::placeholder,.app-mobile #modalBody textarea::placeholder {color:#8ea692;}
.app-mobile #modalBody summary {min-height:44px;padding-block:10px;cursor:pointer;color:#e3c78b;}
.app-mobile #modalBody h3 {color:#edd8a1;font-size:14px;line-height:1.4;}
.app-mobile #modalBody .section-label {padding:12px 0 7px;margin:0;font-size:10px;letter-spacing:.08em;color:#c9b578;}
.app-mobile .toolbar {position:relative;gap:6px;margin-bottom:10px;}
.app-mobile .toolbar input[type=search] {flex:1;min-width:140px;}
.app-mobile #modalBody .toolbar button,.app-mobile #modalBody .map-tabs button,.app-mobile #modalBody .quick-service-tabs button {padding:6px 10px;font-size:11px;}
.app-mobile .settings-actions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.app-mobile .settings-actions button {width:100%;min-width:0;white-space:normal;}
.app-mobile .control-grid {grid-template-columns:72px minmax(0,1fr);padding:10px;border:1px solid #a58e5233;border-radius:8px;background:#0d2219;gap:10px 12px;}
.app-mobile .control-grid>span {color:#d7bc7e;}
.app-mobile .control-grid>b {font-weight:500;color:#bfcbb9;line-height:1.65;}
.app-mobile .horn-previews {display:flex;flex-wrap:wrap;gap:6px;}
.app-mobile .horn-previews button {flex:1 1 100px;}
.app-mobile .coop-columns {gap:12px;}
.app-mobile .coop-columns>div {padding:10px;border:1px solid #a58b4e44;border-radius:9px;background:#0f261c;min-width:0;}
.app-mobile .coop-code {min-height:72px;resize:vertical;}
.app-mobile .loading-card,.app-mobile .travel-error,.app-mobile .access-notice {border:1px solid #b89959;border-radius:11px;background:#10241cf7;box-shadow:0 5px 20px #0007;}
.app-mobile .loading-card {width:min(390px,100%);}

/* More is a compact command centre. Tabs are always visible, only the body scrolls. */
.app-mobile #modal[data-panel=appMenu] .modal {width:min(730px,100%);}
.app-mobile #modal[data-panel=appMenu] #modalBody {padding:10px 12px 12px;}
.app-mobile .app-menu-tabs {gap:4px;padding-bottom:9px;}
.app-mobile #modalBody .app-menu-tabs button {position:relative;min-height:44px;border:0;border-radius:7px;background:#0c2117;font-size:12px;color:#aebfa7;}
.app-mobile #modalBody .app-menu-tabs button[aria-pressed=true] {background:linear-gradient(#2b442b,#253c25);color:#f6de9d;box-shadow:inset 0 -2px #d6b060;}
.app-mobile .app-menu-grid,.app-mobile .app-command-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.app-mobile #modal[data-panel=appMenu] .app-menu-grid button,.app-mobile #modalBody .app-command-grid button {
 display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:78px;
 border:1px solid #ae91534d;border-radius:9px;background:linear-gradient(140deg,#243d2b,#12291d);padding:9px 6px;
 box-shadow:inset 0 1px #e7d18e0d;text-align:center;
}
.app-mobile .app-menu-grid .ui-icon,.app-mobile .app-command-grid .ui-icon {width:27px;height:27px;flex:0 0 27px;color:#ead18d;}
.app-mobile .app-menu-grid span,.app-mobile .app-command-grid span {font-size:11px;line-height:15px;white-space:normal;max-width:100%;overflow-wrap:anywhere;}
.app-mobile .app-menu-note {font-size:11px;line-height:1.5;color:#aabc9e;margin:1px 0 10px;}
.app-mobile .app-hero-list {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.app-mobile .app-hero-list article {position:relative;min-height:71px;gap:8px;padding:8px;border:1px solid #a18a4e44;border-radius:9px;background:linear-gradient(135deg,#1d3927,#10281b);}
.app-mobile .app-hero-list article.is-selected {border-color:#dbbc72;background:linear-gradient(135deg,#39472d,#142f1e);}
.app-mobile .app-hero-list article.is-defeated {filter:saturate(.5);}
.app-mobile .app-hero-list img {width:41px;height:53px;object-fit:contain;border:0;border-radius:5px;background:#081b1266;}
.app-mobile .app-hero-vitals {min-width:0;flex:1;}
.app-mobile .app-hero-list strong {font-size:11px;line-height:15px;}
.app-mobile .app-hero-list small {font-size:9px;line-height:15px;color:#afc19f;}
.app-mobile .app-hero-health {display:block;height:3px;margin-top:4px;overflow:hidden;border-radius:2px;background:#07160d;}
.app-mobile .app-hero-health>i {display:block;height:100%;background:#71ad56;}
.app-mobile #modalBody .app-hero-list button {flex:none;min-width:44px;min-height:44px;max-width:57px;padding:5px!important;font-size:10px!important;border-radius:7px;}
.app-mobile #modalBody .app-hero-list .app-hero-ultimate {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:44px;height:44px;border-color:#b28e4566;background:linear-gradient(150deg,#4d3d1c,#221e10);overflow:hidden;}
.app-mobile .app-hero-ultimate .ui-icon {width:21px;height:21px;}
.app-mobile .app-hero-ultimate span {font-size:8px;line-height:11px;}
.app-mobile .app-hero-ultimate:after {content:'';position:absolute;left:0;bottom:0;width:var(--charge);height:2px;background:#e9bd5c;}
.app-mobile #modalBody .app-hero-list .app-hero-ultimate.is-ready {border-color:#e8c572;}

/* Inventory and roster use the portrait/gear art; rarity is visible without
 * forcing the player to read every description. No source art is enlarged. */
.app-mobile .inventory-layout {grid-template-columns:minmax(180px,.75fr) minmax(0,1.7fr);gap:12px;}
.app-mobile .equip-panel {padding:10px;border:1px solid #ba9c5855;border-radius:10px;background:linear-gradient(#203b2a,#0c2418);}
.app-mobile .equip-panel canvas.equip-art {width:114px;height:114px;margin:0 auto;}
.app-mobile .equip-slot {border:1px solid #b6a56a44;border-left:3px solid #b6a56a;padding:8px;border-radius:7px;background:#11291d;gap:5px;}
.app-mobile .equip-slot[data-rarity='3'] {border-color:#a887c966;border-left-color:#c29bf2;background:linear-gradient(110deg,#2d293d,#13271d);}
.app-mobile .equip-slot[data-rarity='4'] {border-color:#d2ac5a88;border-left-color:#f0c56a;background:linear-gradient(110deg,#40371e,#14291c);}
.app-mobile .item-grid {grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;}
.app-mobile .item-card {border:1px solid #a3915e44;border-radius:9px;background:linear-gradient(140deg,#1b3326,#10251a);padding:9px;gap:8px;}
.app-mobile .item-card[data-rarity='3'] {border-color:#ab85c477;background:linear-gradient(130deg,#32283d,#12271c);}
.app-mobile .item-card[data-rarity='4'] {border-color:#d1af62bb;background:linear-gradient(130deg,#44371e,#13291c);box-shadow:inset 0 1px #ffe9a322;}
.app-mobile .item-card>div {min-width:0;flex:1;}
.app-mobile .item-card>canvas {width:40px;height:40px;flex:0 0 40px;border-radius:7px;background:#071b1466;}
.app-mobile .item-card strong {font-size:11px;line-height:1.45;}
.app-mobile .item-card[data-rarity='4'] strong {color:#f6da8a;}
.app-mobile .item-card p {font-size:10px;line-height:1.55;}
.app-mobile .grid-cards {grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.app-mobile .roster-card {border:1px solid #b59c5f55;border-radius:10px;background:linear-gradient(130deg,#233c29,#10261b);}
.app-mobile .roster-card .art {height:120px;background:radial-gradient(ellipse at 50% 50%,#455c37,#10281a 76%);}
.app-mobile .roster-card .badge {top:6px;left:6px;padding:3px 6px;background:#0b2117e8;border-color:#c2a36477;color:#ecd6a4;border-radius:4px;font-size:8px;}
.app-mobile .card-copy {padding:8px;}
.app-mobile .card-copy strong {font-size:11px;line-height:1.4;}
.app-mobile .card-copy small {font-size:9px;}
.app-mobile .card-copy p {font-size:10px;line-height:1.5;}
.app-mobile .assignment-buttons {display:flex;flex-wrap:wrap;gap:4px;}
.app-mobile .assignment-buttons button {flex:1 1 44px;}
.app-mobile .animal-card,.app-mobile .hero-swap-choice {border-color:#a68f5155;border-radius:9px;background:#163122;}
.app-mobile .hero-swap-list {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.app-mobile .hero-swap-choice {min-height:80px;gap:8px;}
.app-mobile .hero-swap-choice canvas {width:60px;height:60px;}
.app-mobile .equipment-power,.app-mobile .legend-reward {border-radius:8px;border-color:#c4a25c66;background:linear-gradient(120deg,#3d351e77,#13291c);}

/* Story scenes keep actual hero art large while dialogue and the action remain
 * in a separate, readable column. No translucent sprite overlay is used. */
.app-mobile .story-card {grid-template-columns:minmax(150px,.9fr) minmax(0,1.3fr);gap:14px;}
.app-mobile .story-art {height:clamp(180px,55dvh,330px);max-height:330px;min-height:180px;border:1px solid #b99a5966;border-radius:10px;}
.app-mobile .story-art>canvas:not([data-story-background]),.app-mobile .story-art>.story-portrait {width:auto;max-width:95%;height:calc(100% - 22px);max-height:none;object-fit:contain;object-position:center bottom;margin:0 0 20px;}
.app-mobile .story-copy {padding:4px 0;gap:8px;}
.app-mobile .story-kicker {font-size:10px;letter-spacing:.08em;color:#e6c789;}
.app-mobile .story-lines p {font-size:12px;line-height:1.8;color:#e3e5d7;}
.app-mobile .story-stamp {padding:4px 7px;top:8px;right:8px;border-radius:4px;background:#183c27e8;color:#e8d79f;}
.app-mobile .story-rewards {gap:6px;}
.app-mobile .story-rewards>span {border:1px solid #a88c4b55;border-radius:5px;background:#1d3424;padding:4px 7px;}
.app-mobile .recruit-notice {padding:8px 10px;border-left:2px solid #deb969;background:#2f422666;font-size:11px;line-height:1.6;}
.app-mobile .story-copy>.primary {margin-top:auto;width:100%;}
.app-mobile .defeat-recovery {max-width:550px;padding:8px;}
.app-mobile .result-stats strong {font-size:23px;color:#e8c982;}

/* Atlas and destination tools: captions readable, maps pan independently,
 * selected place details and the travel action stay below the map. */
.app-mobile .kingdom-overview {gap:10px;padding:9px;border:1px solid #b0945355;border-radius:8px;background:#173222;}
.app-mobile .kingdom-chapter strong {font-size:12px;}
.app-mobile .kingdom-chapter span,.app-mobile .kingdom-help,.app-mobile .kingdom-legend {font-size:10px;}
.app-mobile .kingdom-progress-group {gap:8px;}
.app-mobile .kingdom-progress {min-width:95px;}
.app-mobile .kingdom-map-viewport {max-height:55dvh;min-height:175px;border:1px solid #d0ad67;border-radius:8px;overscroll-behavior:contain;}
.app-mobile .kingdom-map-art {min-width:660px;}
.app-mobile .kingdom-pin-caption strong {font-size:11px;}
.app-mobile .kingdom-detail {padding:11px;border-color:#b89a5966;border-radius:9px;background:#153122;gap:10px;}
.app-mobile .kingdom-detail-heading {gap:8px;}
.app-mobile .kingdom-detail-heading h3 {margin:4px 0;font-size:16px;}
.app-mobile .kingdom-detail-kicker,.app-mobile .kingdom-status {font-size:10px;}
.app-mobile .kingdom-goal,.app-mobile .kingdom-travel-hint {font-size:11px;line-height:1.6;}
.app-mobile .kingdom-interiors>div {gap:6px;}
.app-mobile .local-map-heading {border-color:#b79a5a55;background:#193724;border-radius:8px;}
.app-mobile .local-map-readable {border-color:#d6b26d;border-radius:8px;}
.app-mobile .local-place-directory {gap:10px;}
.app-mobile .local-place {border-color:#a88e4f55;border-radius:8px;background:#173122;}
.app-mobile .destination-card,.app-mobile .destination-row {border-color:#ab925455;border-radius:8px;background:#173122;}
.app-mobile .map-tabs,.app-mobile .quick-service-tabs {display:flex;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;padding-bottom:3px;}
.app-mobile .map-tabs button,.app-mobile .quick-service-tabs button {flex-shrink:0;}

/* A compact hero picker keeps the skill description close to its character. */
.app-mobile .sb-intro {gap:10px;padding-bottom:8px;}
.app-mobile .sb-intro p {font-size:11px;line-height:1.6;}
.app-mobile .sb-roster {display:grid;grid-auto-flow:column;grid-auto-columns:145px;grid-template-columns:none;overflow-x:auto;gap:7px;padding:3px 0 8px;margin:10px 0;scroll-snap-type:x proximity;overscroll-behavior-x:contain;}
.app-mobile #modalBody .sb-hero-button {min-height:63px;padding:7px;border-radius:8px;scroll-snap-align:start;background:#183423;}
.app-mobile .sb-hero-button img {width:37px;height:45px;object-fit:contain;}
.app-mobile .sb-hero-button span {font-size:11px;}
.app-mobile .sb-hero-button small {font-size:9px;}
.app-mobile .sb-hero-detail {border-color:#ac935755;border-radius:10px;background:linear-gradient(140deg,#213a28,#10281b);padding:12px;}
.app-mobile .sb-portrait {width:84px;height:96px;object-fit:contain;background:#0e251966;border-radius:7px;}
.app-mobile .sb-stats {gap:6px;padding:8px;border:1px solid #a58f4f33;border-radius:8px;background:#0e2419;}
.app-mobile .sb-stats dd {font-size:20px;color:#e6cf96;}
.app-mobile .sb-signature {border-color:#9e855044;border-radius:8px;background:linear-gradient(100deg,#253723,#142c1d);padding:10px 12px;}
.app-mobile .sb-signature h4 {margin:5px 0;font-size:13px;color:#efd9a3;}
.app-mobile .sb-signature p {font-size:11px;line-height:1.7;}
.app-mobile .sb-signature>span {font-size:9px;color:#c5ad73;}
.app-mobile .sb-signature small,.app-mobile .sb-details {font-size:10px;line-height:1.65;}
.app-mobile .sb-item {border-color:#b29a5c55;border-radius:8px;background:#152f20;}
.app-mobile .sb-item.rarity-4 {border-color:#d3ac62;background:linear-gradient(120deg,#3e341c,#142a1c);}

/* Camp is the app landing screen, with four illustrated services and one clear
 * expedition action. Existing scene art is reused rather than enlarged UI art. */
.app-mobile #appCampBackdrop {background-position:20% 43%;background-size:auto 145%;}
.app-mobile #appCampBackdrop:after {background:linear-gradient(90deg,#0b211a22,transparent 27%,#0b2419d9 65%),linear-gradient(0deg,#06180fcc,transparent 55%);}
.app-mobile #appCampHeading {top:calc(var(--safe-t) + 16px);gap:7px;}
.app-mobile #appCampTitle {font-family:Georgia,'Noto Serif KR',serif;font-size:clamp(22px,3.3vw,30px);font-weight:750;letter-spacing:-.04em;}
.app-mobile .camp-gold {border-color:#d6b46b99;border-radius:16px;background:#0d241ae8;box-shadow:0 2px 4px #0005;padding:5px 12px;}
.app-mobile #appCamp {right:calc(var(--safe-r) + 22px);width:46%;gap:8px;}
.app-mobile #appCamp h2 {font-size:12px;color:#e1cd98;letter-spacing:.08em;}
.app-mobile .app-services {gap:8px;}
.app-mobile .app-services button {min-height:60px;border:1px solid #bb9a5688;border-radius:10px;background:linear-gradient(140deg,#2c422b,#10271a);gap:8px;}
.app-mobile .app-services .service-art {width:60px;min-width:60px;height:60px;border-right:1px solid #d0ad6366;}
.app-mobile .app-services strong {font-size:12px;line-height:16px;color:#efdfb8;}
.app-mobile #appContinue {min-height:44px;border-radius:9px;border-color:#ead19a;background:linear-gradient(115deg,#b58a43,#f2dca3 45%,#c9a361);font-family:Georgia,'Noto Serif KR',serif;font-size:17px;font-weight:800;box-shadow:inset 0 1px #fff0c655,0 2px 6px #0005;}
.app-mobile #appExplore {border:0;background:none;text-decoration:underline;text-underline-offset:4px;font-size:10px;color:#c1cdb4;}
.app-mobile #appTabs {gap:0;border-top:1px solid #ba9a5366;border-radius:12px;background:#0b2218ed;}
.app-mobile #appTabs button {border-radius:0;font-size:10px;gap:6px;}
.app-mobile #appTabs button[aria-current] {background:linear-gradient(0deg,#c5a14333,transparent);border-bottom:2px solid #e4c585;}
.app-mobile #appTabs .ui-icon {width:24px;height:24px;}

@media (orientation:landscape) and (max-width:740px) {
 .app-mobile #hud .hero-panel {width:200px;}
 .app-mobile #appObjective {width:200px;max-width:200px;top:calc(var(--safe-t) + 81px);}
 .app-mobile .app-resources {left:var(--safe-l);transform:none;top:calc(var(--safe-t) + 62px);max-width:200px;width:200px;min-height:20px;padding:2px 7px;font-size:8px;gap:5px;border-radius:7px;}
 .app-mobile #appBattleGold {padding-left:14px;}
 .app-mobile #appBattleGold:before {width:12px;height:12px;}
 .app-mobile #appBattleFatigue {padding-left:6px;}
 .app-mobile #bossbar {top:var(--safe-t);width:27vw;}
 .app-mobile #siegeHUD {top:calc(var(--safe-t) + 40px);}
 .app-mobile .app-battle-tools #appAssist {left:calc(var(--safe-l) + 99px);bottom:calc(var(--safe-b) + 46px);width:126px;}
 .app-mobile #interact {max-width:calc(100vw - 345px);bottom:calc(var(--safe-b) + 102px);}
 .app-mobile #movementStatus {max-width:calc(100vw - 345px);bottom:calc(var(--safe-b) + 150px);}
 .app-mobile #routeBanner {top:calc(var(--safe-t) + 125px);width:200px;max-width:200px;}
 .app-mobile .grid-cards {grid-template-columns:repeat(3,minmax(0,1fr));}
 .app-mobile .app-hero-list {grid-template-columns:1fr;}
 .app-mobile .training-hud {top:var(--safe-t);max-width:calc(100vw - 380px);}
}
@media (orientation:landscape) and (max-height:360px) {
 .app-mobile #appCampHeading {top:calc(var(--safe-t) + 9px);}
 .app-mobile #appCamp {top:calc(var(--safe-t) + 8px);gap:5px;}
 .app-mobile #appCamp header {display:none;}
 .app-mobile .app-services button {min-height:48px;}
 .app-mobile .app-services .service-art {height:47px;width:47px;min-width:47px;}
 .app-mobile .story-art {height:180px;min-height:180px;}
 .app-mobile #modalBody {padding:8px 10px 12px;}
 .app-mobile .app-menu-grid,.app-mobile .app-command-grid {gap:6px;}
 .app-mobile #modal[data-panel=appMenu] .app-menu-grid button,.app-mobile #modalBody .app-command-grid button {min-height:70px;}
}
@media (orientation:portrait) {
 .app-mobile #hud .hero-panel {width:205px;}
 .app-mobile .map-wrap {width:84px;right:var(--safe-r);top:calc(var(--safe-t) + 49px);}
 .app-mobile #appLocation {right:var(--safe-r);top:calc(var(--safe-t) + 101px);width:140px;max-width:140px;}
 .app-mobile .app-resources {left:var(--safe-l);top:calc(var(--safe-t) + 63px);transform:none;width:200px;max-width:200px;min-height:20px;font-size:8px;padding:2px 6px;gap:4px;border-radius:7px;}
 .app-mobile #appBattleFatigue {padding-left:5px;}
 .app-mobile #appObjective {width:200px;max-width:200px;top:calc(var(--safe-t) + 82px);}
 .app-mobile #appZoomOut {top:calc(var(--safe-t) + 115px);right:calc(var(--safe-r) + 45px);}
 .app-mobile #appZoomIn {top:calc(var(--safe-t) + 115px);right:var(--safe-r);}
 .app-mobile .app-command-dock {left:var(--safe-l);bottom:calc(var(--safe-b) + 90px);transform:none;}
 .app-mobile .app-battle-tools #appAssist {left:var(--safe-l);bottom:calc(var(--safe-b) + 136px);width:128px;}
 .app-mobile .hero-basic-skills {bottom:calc(var(--safe-b) + 47px);}
 .app-mobile #interact {width:max-content;max-width:calc(100vw - 32px);bottom:calc(var(--safe-b) + 185px);}
 .app-mobile #movementStatus {max-width:calc(100vw - 32px);bottom:calc(var(--safe-b) + 231px);}
 .app-mobile #bossbar {top:calc(var(--safe-t) + 167px);width:80vw;}
 .app-mobile #siegeHUD {top:calc(var(--safe-t) + 210px);width:80vw;}
 .app-mobile .training-hud {top:calc(var(--safe-t) + 168px);max-width:calc(100vw - 24px);}
 .app-mobile #routeBanner {top:calc(var(--safe-t) + 125px);width:200px;max-width:200px;}
 .app-mobile .app-menu-grid,.app-mobile .app-command-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
 .app-mobile .app-hero-list {grid-template-columns:1fr;}
 .app-mobile .grid-cards {grid-template-columns:repeat(2,minmax(0,1fr));}
 .app-mobile .inventory-layout {grid-template-columns:1fr;gap:12px;}
 .app-mobile .equip-panel {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
 .app-mobile .equip-panel canvas.equip-art {grid-column:1/-1;}
 .app-mobile .item-grid {grid-template-columns:1fr;}
 .app-mobile .settings-actions {grid-template-columns:repeat(2,minmax(0,1fr));}
 .app-mobile .hero-swap-list {grid-template-columns:1fr;}
 .app-mobile .story-card {grid-template-columns:1fr;gap:12px;}
 .app-mobile .story-art {height:230px;min-height:180px;max-height:32dvh;}
 .app-mobile .story-copy {padding:0;}
 .app-mobile .kingdom-overview {display:block;}
 .app-mobile .kingdom-progress-group {margin-top:8px;}
 .app-mobile .kingdom-map-viewport {max-height:44dvh;}
 .app-mobile .kingdom-detail {grid-template-columns:1fr;}
 .app-mobile .kingdom-detail-action {width:100%;}
 .app-mobile .kingdom-detail-action button {width:100%;}
 .app-mobile .sb-intro {display:block;}
 .app-mobile .sb-details {grid-template-columns:65px minmax(0,1fr);}
 .app-mobile #appCampBackdrop {background-size:auto 87%;background-position:center top;}
 .app-mobile #appCampBackdrop:after {background:linear-gradient(0deg,#061d13 16%,#071e14b8 44%,transparent 78%);}
 .app-mobile #appCampHeading {left:var(--safe-l);width:calc(100% - var(--safe-l) - var(--safe-r));top:calc(var(--safe-t) + 20px);padding:0 34px;}
 .app-mobile #appCampTitle {font-size:25px;}
 .app-mobile #appCamp {left:var(--safe-l);right:var(--safe-r);width:auto;top:auto;bottom:calc(var(--safe-b) + 54px);max-height:57dvh;padding:10px 2px 0;}
 .app-mobile #appTabs .ui-icon {width:21px;height:21px;}
 .app-mobile #appTabs span {font-size:10px;}
}
@media (orientation:portrait) and (max-width:359px) {
 .app-mobile #hud .hero-panel {width:184px;}
 .app-mobile .app-resources,.app-mobile #appObjective {width:184px;max-width:184px;}
 .app-mobile #appBattleFatigue {font-size:7px;}
 .app-mobile .map-wrap {width:77px;}
 .app-mobile .app-menu-grid,.app-mobile .app-command-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 .app-mobile .actions {width:176px;}
 .app-mobile .actions #potion {right:132px;}.app-mobile .actions #shield {right:88px;}.app-mobile .actions #attack {right:44px;}
}
@media (prefers-reduced-motion:reduce) {
 .app-mobile button,.app-mobile #hpfill {transition:none;}
}