/* v0.32.1: original art stays intact; one shared environment and readable image-led surfaces. */
#app { --night-scene:url('../assets/img/environments/night-gate-v32.webp'); --edge:#a7b7a33d; --surface:#11282c; --soft-gold:#eed7a6; }
#app::after { opacity:.035; }
#app .panel-head { background:linear-gradient(120deg,#173333,#0b1c25);color:#eddfbf;border-bottom:1px solid #b6c6aa38;box-shadow:0 6px 20px #0003; }
#app .panel-head h2 { color:#eddfbf;font-size:22px;letter-spacing:-.03em; }
#app .panel-head .panel-virtue { color:#b7c8ad;font-size:11px; }
#app .panel-head .btn-icon { border:1px solid #acbea35c;background:#153136;color:#e9dfbe;box-shadow:none;border-radius:50%; }
#app .btn { border-radius:9px;box-shadow:0 2px 4px #0002;min-height:44px; }
#app .btn-primary { color:#162a29;background:linear-gradient(150deg,#ecdcab,#baca9b);border-color:#e1dfb0; }
#app .btn:focus-visible,#app summary:focus-visible { outline:3px solid #f1d894;outline-offset:3px; }
#app .btn:disabled { box-shadow:none; }
#app .panel-body { scrollbar-width:thin;scrollbar-color:#537367 #102127; }
#app .panel-intro { font-size:12px;line-height:1.8;color:#bacbbb; }
#app #screen-title .title-content { text-shadow:0 3px 16px #0009; }

/* The playable lodge: the world, the creature and visual rewards share one stage. */
#app .hunt-scroll { background:radial-gradient(ellipse at 70% 0,#46615330,transparent 42%),#09191f;padding-top:18px; }
#app .hunt-header h1 { font-size:23px;letter-spacing:-.055em; }
#app .hunt-wallet { margin:11px 0 15px; }
#app .hunt-play-modes { display:grid;grid-template-columns:1fr 1.2fr;gap:7px;margin:0 0 13px; }
#app .hunt-play-modes>span,#app .hunt-outdoor { display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:6px;border-radius:10px;border:1px solid #95b49e55;font:12px var(--sans); }
#app .hunt-mode-current { background:#294439;color:#eddeb1; }
#app .hunt-mode-current img { width:24px;height:27px;object-fit:contain; }
#app .hunt-outdoor { background:#102b33;color:#dce8d0; }
#app .hunt-play-modes small { color:#abc3b4;font-size:9px; }
#app .hunt-gps-pin { position:relative;flex:none;width:16px;height:16px;border:2px solid #b7d4b8;border-radius:50% 50% 50% 0;transform:rotate(-45deg);margin:0 3px 4px; }
#app .hunt-gps-pin::after { content:'';position:absolute;inset:3px;border:1px solid #b7d4b8;border-radius:50%; }
#app .hunt-stage { min-height:306px;border-radius:20px;border-color:#b6c3a252;background-image:linear-gradient(180deg,#10212a15 22%,#0a1b2366 68%,#08191ff5),var(--night-scene);background-size:cover;background-position:center 46%;box-shadow:0 12px 36px #0005,inset 0 1px #f6eac619; }
#app .hunt-stage::before { background:none; }
#app .hunt-stage::after { inset:0;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--hunt-accent) 24%,transparent),transparent 56%); }
#app .hunt-spirit-aura { height:257px;margin:0;padding-top:22px; }
#app .hunt-spirit-art { height:262px;width:262px;object-fit:contain;mask-image:radial-gradient(ellipse 49% 49% at 50% 50%,#000 77%,transparent 100%);filter:drop-shadow(0 17px 12px #0008); }
#app .hunt-scene-label { left:15px;top:13px;padding:7px 10px;background:#08202bb3;border-left:2px solid var(--hunt-accent);border-radius:0 8px 8px 0;backdrop-filter:blur(4px); }
#app .hunt-scene-label small { display:none; }
#app .hunt-identity { margin:-31px 15px 16px; }
#app .hunt-identity h2 { font-size:29px;color:#f2e5c4; }
#app .hunt-identity p { display:none; }
#app .hunt-type { background:#10282cde;backdrop-filter:blur(5px); }
#app .hunt-target { flex-basis:66px; }
#app .hunt-target img { width:54px;height:59px;object-fit:cover;border-color:#8aab9e70;border-radius:10px; }
#app .hunt-target[aria-pressed=true] img { border-color:#f2d598;box-shadow:0 0 0 2px #edcc8933,0 4px 14px #02080a; }
#app .hunt-loot-preview { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:2px 0 8px; }
#app .hunt-loot-chip { display:flex;align-items:center;gap:5px;min-width:0;background:#193235a8;border:1px solid #90af9029;border-radius:8px;padding:4px; }
#app .hunt-loot-chip img { width:32px;height:34px;object-fit:contain; }
#app .hunt-loot-chip>span { font-size:10px;white-space:nowrap;color:#c8d8bc; }
#app .hunt-go { min-height:52px;font-size:16px;background:linear-gradient(110deg,#e8d5a4,#b8caa4);box-shadow:0 4px 15px #0005,inset 0 1px #fff6; }
#app .hunt-action-bar { flex:none;padding:9px 20px;background:#0c1d24;border-top:1px solid #abcba02e; }
#app .hunt-action-bar .hunt-go { margin:0;width:100%; }
#app .hunt-howto { display:flex;justify-content:center;gap:22px;padding:12px 0 6px; }
#app .hunt-howto>span { display:flex;align-items:center;gap:6px;color:#adbfaf;font-size:10px; }
#app .hunt-howto img { width:25px;height:30px;object-fit:contain; }
#app .hunt-options { margin-top:10px;font-size:10px; }
#app .hunt-gear-goal { position:relative;display:grid;grid-template-columns:88px 1fr;gap:8px 12px;align-items:center;margin:20px 0;padding:15px;border-color:#bcbe8852;border-radius:14px;background:radial-gradient(ellipse at 20% 50%,#b6d29f25,transparent 60%),#172b2e; }
#app .hunt-gear-goal>img { grid-row:1/4;width:88px;height:110px;object-fit:contain;filter:drop-shadow(0 6px 12px #0008); }
#app .hunt-gear-goal>div { font-size:13px;color:#e4d8ad;line-height:1.7; }
#app .hunt-gear-goal>small { grid-column:2;color:#b8d7bc;font-size:10px; }
#app .hunt-gear-goal>.btn { grid-column:2;min-height:38px; }
#app .hunt-journey { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
#app .hunt-journey>h3 { grid-column:1/-1;margin:8px 0 2px;font-size:19px;color:#eadab6; }
#app .hunt-journey-step { position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:144px;padding:14px;border:1px solid #8caaa33b;border-radius:14px;background:radial-gradient(ellipse at 80% 40%,#527e7255,transparent 70%),#172b31;overflow:hidden; }
#app .hunt-journey-step img { position:absolute;right:-5px;top:0;width:83%;height:132px;object-fit:contain;mask-image:linear-gradient(#000 65%,transparent);opacity:.92; }
#app .hunt-journey-step>b { position:relative;z-index:1;font:700 20px var(--serif);color:#f1e4c7;text-shadow:0 2px 8px #000; }
#app .hunt-journey-step>small { position:absolute;left:12px;top:11px;color:#b4c9b4;font:10px var(--sans);letter-spacing:.15em; }
#app .hunt-nav { min-height:65px;padding-top:5px;background:#0c1d24;border-color:#9ab3a32b;box-shadow:0 -5px 20px #0004; }
#app .hunt-nav-button { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;border-radius:11px;min-height:53px; }
#app .hunt-nav-button img { width:28px;height:29px;object-fit:contain;opacity:.85; }
#app .hunt-nav-button span { font-size:10px; }
#app .hunt-nav-button[aria-current=page] { background:#2a423a;color:#ebdab1; }
#app .hunt-nav-button[aria-current=page] img { opacity:1;filter:drop-shadow(0 0 6px #e9cd8266); }
#app .hunt-return { display:block;padding:12px;border:1px solid #d4c68c66;background:linear-gradient(145deg,#263c32,#12292b);border-radius:16px; }
#app .hunt-return-head { display:flex;align-items:center;gap:8px; }
#app .hunt-return-head>b { flex:1;font-size:12px; }
#app .hunt-return .hunt-return-portrait { width:38px;height:48px;object-fit:contain; }
#app .hunt-return .loot-featured { grid-column:span 1; }
#app .hunt-return .loot-featured .loot-art { height:96px; }
#app .hunt-return .loot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
#app .hunt-return .loot-heading { font-size:15px; }
#app #screen-ar.hunt-encounter #ar-fallback { background-image:linear-gradient(180deg,#10212a55,#07172010 45%,#071b23cc),var(--night-scene);background-size:cover;background-position:center; }
#app #screen-ar.hunt-encounter #ar-fallback::after { content:''; }
#app .loot-presentation { scrollbar-width:thin;scrollbar-color:#749581 transparent; }
#app #capture-countdown:empty { display:none; }
#app #screen-salvation:has(#salv-rewards:not([hidden])) .salv-stage { top:calc(2dvh + var(--safe-t));height:24dvh; }
#app #screen-salvation:has(#salv-rewards:not([hidden])) .salv-stage::after { font-size:44px;right:15%; }
#app #salv-rewards:has(.loot-presentation) { top:calc(28dvh + var(--safe-t));bottom:calc(14px + var(--safe-b));max-height:none;display:flex;flex-direction:column;overflow:hidden;padding:14px;border:1px solid #bac69d6b;border-radius:18px;background:linear-gradient(145deg,#163238,#0c2229);color:#eddfbd;box-shadow:0 12px 30px #0006; }
#app #salv-rewards .loot-presentation { flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0;padding-right:3px; }
#app #salv-rewards .loot-heading { color:#efdfb8;font-size:18px; }
#app #salv-rewards .salv-note { flex:none;margin:10px 0;font-size:11px;line-height:1.6;color:#acbfac; }
#app #btn-salv-done { flex:none;min-height:48px; }

/* Expedition: high-resolution scenery, clear skill images, short instructions. */
#app .community-body { background:linear-gradient(180deg,#0e252aee,#09191ff8),var(--night-scene) center/cover; }
#app .community-hero { min-height:338px;padding:20px;border-radius:20px;background:linear-gradient(90deg,#061721dd,#07182415),var(--night-scene) center/cover;box-shadow:0 12px 36px #0005; }
#app .community-hero-art { width:65%;height:90%;right:-8px;top:22px;object-fit:contain;mask-image:linear-gradient(#000 70%,transparent 99%); }
#app .community-hero h3 { position:relative;font-size:35px;max-width:70%;line-height:1.25;text-shadow:0 4px 14px #000; }
#app .community-hero p { position:relative;max-width:62%;font-size:11px; }
#app .community-hero>.btn { position:absolute;left:18px;right:18px;bottom:18px;z-index:2;min-height:49px;font-size:15px; }
#app .community-companion-ready { padding:8px 0;margin-top:9px; }
#app .community-companion-ready img { width:63px;height:69px; }
#app .community-companion-ready small { display:none; }
#app .community-mode-duel { min-height:234px;padding-top:111px;background:linear-gradient(0deg,#112b30 30%,#10242977),var(--night-scene) center/cover; }
#app .community-mode-duel .community-mode-art { top:-10px;height:190px;width:58%; }
#app .community-mode p { font-size:11px;line-height:1.6; }
#app .community-mode-race,#app .community-mode-quiz { min-height:140px;border-color:#aac6a834;border-radius:14px; }
#app .community-setup,#app .community-guide,#app details.community-rules { padding:11px 13px;border:1px solid #87a3993d;border-radius:12px;background:#142b30;margin:14px 0;color:#c6d2bd; }
#app .community-setup summary,#app .community-guide summary,#app details.community-rules>summary { cursor:pointer;min-height:27px;font-size:12px;line-height:27px;color:#dfceaa; }
#app .community-setup .community-label { margin-top:12px; }
#app .community-input { border-radius:9px;background:#1a3539;color:#e5dbc1;border-color:#b2c6ad52;min-height:44px; }
#app .community-raid-stage { height:310px;background-image:linear-gradient(0deg,#0b1c2388,#10212900 60%,#10212ae6),var(--night-scene);background-position:center 44%;border-radius:18px;border-color:#aeb99a5c;box-shadow:0 6px 22px #0005; }
#app .community-raid-boss { inset:66px 0 38px;height:calc(100% - 104px);filter:drop-shadow(0 12px 10px #040914) drop-shadow(0 0 12px #c180b333); }
#app .community-raid-aura { border-color:#bca1de77;box-shadow:0 0 35px #bea1ed44,inset 0 0 20px #aacfd133; }
#app .community-raid-seal { opacity:.35; }
#app .community-telegraph { background:linear-gradient(0deg,#091c25,#091c25e6); }
#app .community-target { min-height:91px;gap:2px;padding:4px;border-radius:13px;background:linear-gradient(145deg,#284342,#122c35); }
#app .community-action-art { width:54px;height:65px;object-fit:contain;filter:grayscale(.7) brightness(.65);opacity:.6; }
#app .community-target.lit { background:linear-gradient(145deg,#efdbaa,#b9c89b);border-color:#ffdf9d;box-shadow:0 0 24px #ecce8255,inset 0 1px #fff8; }
#app .community-target.lit .community-action-art { opacity:1;filter:drop-shadow(0 3px 8px #b3742066);transform:rotate(-7deg); }
#app .community-target.lit small { color:#493c28; }
#app .community-guard { display:flex;align-items:center;justify-content:center;gap:9px; }
#app .community-ward-art { width:36px;height:40px;object-fit:contain; }
#app .community-duel-action-art { width:53px;height:55px;object-fit:contain;display:block;margin:0 auto 5px; }
#app .community-duel-actions .btn { font-size:15px;padding:10px 4px;background:#1b363b;border-color:#9ab59c66;color:#e9ddbb; }
#app .community-duel-stage { background-image:linear-gradient(#11222b99,#10242844),var(--night-scene); }
#app .community-panel[data-stage=active][data-encounter-mode=raid] .community-raid-stage { height:280px; }

/* Equipment and collection keep the facts, while art takes the first look. */
#app #screen-inventory .panel-body { background:radial-gradient(ellipse at 10% 0,#31463a66,transparent 38%),#0d2027; }
#app .inventory-loadout { border-radius:17px;border-color:#91aa8e63;background:linear-gradient(#102b30bb,#0f242b),var(--night-scene) center/cover;box-shadow:0 8px 24px #0004; }
#app .inventory-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:8px;border-radius:14px;background:#0a1a20;border-color:#668b7944; }
#app .inventory-slot,#app .inventory-item { border-radius:10px;background:radial-gradient(ellipse at 50% 35%,#d0d7b51c,transparent 70%),linear-gradient(145deg,#244238,#172b30);border-color:#96b08a66;color:#e0d8b8;box-shadow:0 3px 9px #0003; }
#app .inventory-item { min-height:123px; }
#app .inventory-item .inventory-art { height:79px; }
#app .inventory-item strong { font-size:10px;color:#e8dfc5;line-height:1.3; }
#app .inventory-slot small,#app .inventory-item small { color:#a9c1aa;font-size:9px; }
#app .inventory-item[data-owned=false] { background:#12272c;color:#9bada2;border-color:#54726455; }
#app .inventory-item[data-owned=false] .inventory-art { opacity:.48;filter:grayscale(.5); }
#app .inventory-item[data-equipped=true] { border-color:#c1d899;background:radial-gradient(ellipse at 50% 30%,#bfcf863d,transparent 75%),#1b3430; }
#app .inventory-item[data-equipped=true] small { color:#d7e7ad; }
#app .inventory-empty-slot { min-height:123px;border-radius:10px;background:#102329; }
#app .inventory-detail-art { width:139px;height:156px;background:radial-gradient(#a4ba8455,#153037);border-radius:14px;border-width:1px; }
#app .inventory-inspector { border-radius:18px;background:#102930;border-color:#b4c29288; }
#app .inventory-inspector-bar { background:#19373a; }
#app .inventory-filter { background:#193039;color:#becdb7;border-radius:15px;border-color:#8baf9655; }
#app .inventory-filter[aria-pressed=true] { background:#cad7aa;color:#19312f; }
#app #screen-codex .panel-body { background:#10232b; }
#app #codex-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
#app .dossier { display:flex;flex-direction:column;min-width:0;margin:0;border:1px solid #a3bba247;border-radius:14px;overflow:hidden;background:linear-gradient(#1b353b,#132931); }
#app .dossier-art { width:100%;height:232px;min-height:0;max-height:none;background:radial-gradient(ellipse at 50% 75%,#7095873d,transparent 66%); }
#app .dossier-art .portrait { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px #0008); }
#app .dossier .codex-body { padding:11px; }
#app .dossier .dossier-name { font-size:17px;margin:9px 0;color:#ede0ba; }
#app .dossier-kicker { font-size:9px;color:#aac3b0; }
#app .dossier .portrait-forms { display:flex;gap:4px; }
#app .dossier .portrait-forms button { font-size:9px;min-height:31px;padding:4px 5px;border-radius:7px; }
#app .dossier .mastery-row { display:flex;flex-wrap:wrap;gap:4px;font-size:9px; }
#app .dossier-story { margin-top:8px;border-top:1px solid #bdd3b124;padding-top:6px; }
#app .dossier-story summary { font-size:10px;color:#c7caae;cursor:pointer;min-height:29px;line-height:29px; }
#app .dossier-story p { font-size:11px;line-height:1.8; }
#app .rarity-seal { border-radius:0 0 9px 0;box-shadow:none;font-size:10px; }
#app .dossier .model-open { font-size:10px;min-height:31px;border-radius:9px;background:#10282ddd;color:#dfddbf; }
#app .collection-showcase { padding:10px 0;margin-bottom:12px; }
#app .collection-showcase h3 { font-size:17px; }
#app .collection-showcase p { font-size:11px;margin:6px 0; }
#app #screen-companions .panel-body { background:radial-gradient(ellipse at 80% 10%,#2a454b77,transparent 60%),#10242b; }
#app .companions-hero { border-radius:17px;border-color:#9aae9855;background:linear-gradient(90deg,#112a2cf0,#112a2c77),var(--night-scene) center/cover; }
#app .spirit-arena { border-radius:18px;background:#102b31;border-color:#b6cba14d; }
#app .spirit-arena-heading h3 { font-size:28px; }
#app .spirit-arena-board { padding:16px 5px 12px;isolation:isolate;overflow:hidden;border:1px solid #abbcb258;border-radius:15px;background:linear-gradient(#0c242977,#0c242977),var(--night-scene) center/cover; }
#app .spirit-arena-fighter .spirit-arena-portrait { height:214px;mask-image:linear-gradient(#000 88%,transparent); }
#app .spirit-arena-actions button { padding:9px 3px;border-radius:12px;background:linear-gradient(#30504b,#1b3739);border-color:#9eb78c66;color:#e6e2c4; }
#app .spirit-arena-actions button::before { content:'';display:block;height:55px;margin:0 auto 5px;background:center/contain no-repeat; }
#app .spirit-arena-actions [data-arena-focus=attack]::before { background-image:url('../assets/img/items/sword.webp'); }
#app .spirit-arena-actions [data-arena-focus=guard]::before { background-image:url('../assets/img/items/shield.webp'); }
#app .spirit-arena-actions [data-arena-focus=skill]::before { background-image:url('../assets/img/items/talisman.webp'); }
#app .spirit-arena-actions button b { font-size:13px; }
#app .spirit-arena-challenges button { border-radius:12px;background:#1c3b3d;border-color:#80a78b55; }

@media(min-width:700px) {
  #app .hunt-scroll { padding-left:max(28px,calc((100% - 960px)/2));padding-right:max(28px,calc((100% - 960px)/2)); }
  #app .hunt-stage { min-height:355px; } #app .hunt-spirit-aura { height:290px; } #app .hunt-spirit-art { width:302px;height:302px; }
  #app .hunt-journey { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #app .hunt-nav { justify-content:center;gap:25px; } #app .hunt-nav-button { width:90px;flex:0 1 90px; }
  #app .community-hero { min-height:370px; } #app .community-hero-art { width:57%; }
  #app .community-hero>.btn { right:auto;width:42%; }
  #app #codex-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #app .dossier-art { height:300px; }
  #app .inventory-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media(max-width:360px) {
  #app .hunt-header h1 { font-size:20px; } #app .hunt-scroll { padding:14px 12px 24px; }
  #app .hunt-action-bar { padding:8px 12px; }
  #app .hunt-stage { min-height:256px; } #app .hunt-spirit-aura { height:218px; } #app .hunt-spirit-art { width:223px;height:223px; }
  #app .hunt-identity h2 { font-size:24px; } #app .hunt-type { font-size:8px;padding:4px 7px; }
  #app .hunt-gear-goal { grid-template-columns:76px 1fr; } #app .hunt-gear-goal>img { width:76px; }
  #app .hunt-target { flex-basis:56px; } #app .hunt-target img { width:47px;height:51px; }
  #app .hunt-loot-chip img { width:25px;height:29px; } #app .hunt-loot-chip>span { font-size:9px; }
  #app .hunt-loot-chip { gap:3px;padding:3px; }
  #app .community-hero { min-height:308px; } #app .community-hero h3 { font-size:30px; }
  #app .community-panel[data-stage=active][data-encounter-mode=raid] .community-raid-stage { height:234px; }
  #app .community-action-art { height:51px; } #app .community-target { min-height:78px; }
  #app .inventory-item { min-height:108px; } #app .inventory-item .inventory-art { height:63px; }
  #app .dossier-art { height:188px; } #app .dossier .dossier-name { font-size:15px; }
  #app .dossier .codex-body { padding:8px; } #app #codex-list { gap:8px; }
}
@media(prefers-reduced-motion:reduce) { #app .hunt-spirit-art,#app .community-hero-art,#app .community-action-art { transition:none;animation:none; } }