/*
 * VẠN TƯỢNG TIÊN VỰC
 * A world-first visual layer for the existing web game. This file only styles
 * the client and decorative elements; game navigation, data bindings and APIs
 * remain in the original markup and scripts.
 */
:root {
  --void: #080b15;
  --jade-glass: rgba(13, 26, 28, .82);
  --jade-deep: #102324;
  --jade-bright: #8de2c0;
  --celestial-gold: #eed28d;
  --celestial-line: rgba(222, 192, 125, .34);
  --ink-text: #f6eedb;
  --muted-text: #b2b6b0;
  --font-title: 'Noto Serif', 'Be Vietnam Pro', serif;
}

html { scroll-behavior: smooth; }
body {
  isolation: isolate;
  color: var(--ink-text);
  background:
    radial-gradient(ellipse at 70% 7%, rgba(42, 104, 91, .19), transparent 31rem),
    radial-gradient(ellipse at 16% 34%, rgba(56, 49, 102, .17), transparent 38rem),
    linear-gradient(155deg, #080b15 0%, #0c151b 45%, #10151c 72%, #080b13 100%);
}

/* Layered 2D landscape with faux 3D depth and slow celestial movement. */
.world-stage {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 900px;
  background: linear-gradient(180deg, rgba(5, 8, 17, .05) 0%, rgba(6, 10, 17, .05) 39%, rgba(7, 11, 16, .46) 74%, #080b13 100%);
}
.world-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image: radial-gradient(rgba(255, 231, 183, .72) .7px, transparent .9px);
  background-size: 79px 83px;
  mask-image: linear-gradient(180deg, #000, transparent 75%);
  animation: starDrift 90s linear infinite;
}
.world-starfield { position: absolute; inset: 0; background: radial-gradient(1px 1px at 17% 13%, #f5dda4 99%, transparent), radial-gradient(1px 1px at 83% 18%, #c8e8d8 99%, transparent), radial-gradient(1px 1px at 56% 8%, #fff 99%, transparent), radial-gradient(2px 2px at 91% 34%, #e1c889 99%, transparent), radial-gradient(1px 1px at 34% 29%, #fff 99%, transparent); opacity: .58; }
.world-moon {
  position: absolute;
  top: 8vh;
  right: clamp(5%, 13vw, 230px);
  width: clamp(112px, 15vw, 215px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fffbe4 0 3%, #f2e7c1 16%, #c6c7ae 48%, #87968e 67%, rgba(93, 133, 133, .08) 73%, transparent 75%);
  filter: drop-shadow(0 0 23px rgba(206, 234, 211, .25)) drop-shadow(0 0 92px rgba(92, 181, 162, .13));
  opacity: .72;
  animation: moonFloat 10s ease-in-out infinite;
}
.world-halo { position: absolute; top: calc(8vh - 38px); right: calc(clamp(5%, 13vw, 230px) - 38px); width: clamp(188px, 19vw, 290px); aspect-ratio: 1; border: 1px solid rgba(225, 211, 159, .13); border-radius: 50%; box-shadow: 0 0 0 15px rgba(225, 211, 159, .018), 0 0 0 42px rgba(131, 206, 185, .018), inset 0 0 40px rgba(236, 216, 163, .04); }
.world-cloud { position: absolute; width: 36vw; height: 90px; border-radius: 50%; background: radial-gradient(ellipse, rgba(163, 204, 190, .12), rgba(116, 159, 159, .055) 43%, transparent 70%); filter: blur(12px); animation: cloudGlide 32s ease-in-out infinite alternate; }
.world-cloud-left { top: 35vh; left: -11vw; }.world-cloud-right { top: 26vh; right: -12vw; animation-delay: -14s; }
.world-ridge { position: absolute; right: -5vw; bottom: -2px; width: 74vw; height: 42vh; transform-origin: center bottom; }
.world-ridge-far { right: 4vw; bottom: 11vh; opacity: .19; background: linear-gradient(155deg, #809a99, #233e48 52%, #111d2b); clip-path: polygon(0 100%, 8% 73%, 17% 79%, 29% 39%, 36% 55%, 48% 13%, 60% 52%, 68% 33%, 77% 64%, 87% 47%, 100% 100%); filter: drop-shadow(0 0 26px rgba(157, 199, 186, .18)); }
.world-ridge-mid { right: -10vw; bottom: 5vh; width: 78vw; height: 33vh; opacity: .23; background: linear-gradient(145deg, #607f75, #1b3939 53%, #111d25); clip-path: polygon(0 100%, 11% 64%, 18% 71%, 31% 26%, 41% 67%, 54% 43%, 66% 74%, 79% 28%, 89% 58%, 100% 39%, 100% 100%); filter: drop-shadow(0 -12px 25px rgba(124, 184, 159, .12)); }
.world-ridge-near { right: -14vw; bottom: -12vh; width: 89vw; height: 29vh; opacity: .39; background: linear-gradient(155deg, #253e3b, #112323 62%, #0a1119); clip-path: polygon(0 100%, 0 66%, 13% 38%, 22% 61%, 37% 28%, 52% 57%, 63% 47%, 77% 15%, 88% 47%, 100% 23%, 100% 100%); filter: drop-shadow(0 -12px 24px rgba(109, 177, 146, .1)); }
.world-temple { position: absolute; right: clamp(12%, 24vw, 430px); bottom: 15vh; width: clamp(82px, 10vw, 146px); height: clamp(100px, 13vw, 190px); opacity: .32; filter: drop-shadow(0 0 24px rgba(227, 191, 108, .22)); transform: rotateY(-15deg); }
.world-temple::before, .world-temple::after { content: ""; position: absolute; left: -13%; width: 126%; height: 19%; background: linear-gradient(180deg, #cba85e, #7d5835 49%, #362d2a 54%, #111820); clip-path: polygon(0 67%, 17% 54%, 25% 0, 75% 0, 83% 54%, 100% 67%, 87% 77%, 50% 54%, 13% 77%); }
.world-temple::before { top: 4%; }.world-temple::after { top: 27%; transform: scale(.83); }
.world-temple i { position: absolute; left: 10%; top: 17%; width: 80%; height: 70%; border: 1px solid rgba(226, 190, 111, .58); border-bottom: 0; background: repeating-linear-gradient(90deg, transparent 0 19%, rgba(219, 173, 88, .58) 20% 23%, transparent 24% 38%), linear-gradient(90deg, rgba(141, 51, 44, .55), rgba(26, 36, 39, .84)); box-shadow: inset 0 0 22px rgba(235, 196, 115, .14); }
.world-temple b { position: absolute; left: 44%; top: 45%; z-index: 1; width: 12%; height: 22%; background: #e4b957; box-shadow: 0 0 17px #e9b84d; }
.world-temple em { position: absolute; left: 48%; top: -9%; z-index: 2; width: 4%; height: 20%; background: linear-gradient(#f0d78e, #9f693f); }
.world-sigil { position: absolute; right: 5vw; bottom: 14vh; color: rgba(225, 197, 126, .12); font-family: serif; font-size: clamp(90px, 15vw, 230px); line-height: 1; text-shadow: 0 0 38px rgba(217, 184, 110, .08); transform: rotate(-12deg); }

@keyframes moonFloat { 50% { transform: translateY(-9px); filter: drop-shadow(0 0 32px rgba(206,234,211,.35)) drop-shadow(0 0 110px rgba(92,181,162,.18)); } }
@keyframes cloudGlide { to { transform: translate3d(5vw, -10px, 0) scale(1.08); } }
@keyframes starDrift { to { background-position: 79px 83px; } }

/* Top-level HUD: luminous jade lacquer with a raised profile medallion. */
.app-layout { background: transparent; }
.app-header {
  min-height: 82px;
  padding: 10px clamp(16px, 2.3vw, 38px);
  border-bottom: 1px solid rgba(206, 188, 131, .29);
  background: linear-gradient(100deg, rgba(8, 17, 22, .97), rgba(16, 31, 32, .91) 48%, rgba(10, 17, 25, .96));
  box-shadow: 0 14px 38px rgba(0, 0, 0, .4), inset 0 -1px rgba(128, 214, 183, .09), 0 1px 0 rgba(232, 208, 149, .08);
  backdrop-filter: blur(18px) saturate(1.15);
}
.brand { gap: 13px; }
.brand-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid rgba(239, 207, 132, .66); border-radius: 50%; background: radial-gradient(circle at 34% 27%, #fff4ca, #ae8a46 34%, #1a3934 65%, #0b171d 78%); box-shadow: 0 0 0 4px rgba(225, 196, 126, .055), inset 0 1px rgba(255,255,255,.55), 0 0 23px rgba(224, 194, 118, .2); color: #fff2bd; font-size: 21px; }
.brand-title { font-size: 15px; letter-spacing: .15em; background: linear-gradient(100deg, #fff0bd, #d8b866 58%, #8de2c0); -webkit-background-clip: text; }
.brand-sub { color: #9cbaa9; letter-spacing: .24em; }
.header-center { padding: 6px 16px 6px 7px; border: 1px solid rgba(222, 195, 129, .22); border-radius: 999px; background: linear-gradient(125deg, rgba(29, 50, 48, .84), rgba(13, 24, 29, .8)); box-shadow: inset 0 1px rgba(255,255,255,.045), 0 7px 22px rgba(0,0,0,.23); }
.avatar-box { width: 44px; height: 44px; border: 0; border-radius: 50%; }
.avatar-box img { border: 1px solid #e2c27b; box-shadow: 0 0 0 3px rgba(225,194,123,.12); }
.realm-ring { border-color: #82d4b3; box-shadow: 0 0 13px rgba(123, 225, 186, .53); }
.player-name { color: #fff1cf; letter-spacing: .025em; }
.class-tag, .realm-badge { border-radius: 999px; background: rgba(211, 174, 92, .13); color: #efd38e; }
.exp-bar-container { height: 9px; border: 1px solid rgba(134, 206, 175, .32); border-radius: 999px; }
.exp-bar-fill { border-radius: 999px; }
.currency-badge { min-width: 112px; padding: 8px 12px; border: 1px solid rgba(227, 196, 123, .25); border-radius: 12px 4px 12px 4px; background: linear-gradient(145deg, rgba(39, 53, 44, .89), rgba(12, 23, 27, .96)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.22); }
.currency-badge .curr-icon { filter: drop-shadow(0 0 8px rgba(242, 206, 123, .58)); }
.currency-badge .curr-val { color: #ffedbd; }
.btn-icon { width: 37px; height: 37px; border: 1px solid rgba(211, 190, 132, .27); border-radius: 12px 4px 12px 4px; background: linear-gradient(145deg, rgba(40, 63, 55, .86), rgba(14, 25, 30, .92)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 5px 13px rgba(0,0,0,.22); }

/* The expedition menu is a carved jade scroll rather than a flat tab strip. */
.app-nav {
  padding: 18px 11px 24px;
  border-right: 1px solid rgba(217, 190, 128, .23);
  background: linear-gradient(180deg, rgba(9, 20, 25, .95), rgba(11, 23, 25, .86) 55%, rgba(9, 15, 22, .94));
  box-shadow: inset -1px 0 rgba(119, 208, 171, .07), 12px 0 35px rgba(0,0,0,.15);
  scrollbar-color: rgba(136, 191, 154, .38) transparent;
}
.app-nav::before { content: "仙途 · 行记"; display: block; margin: 0 12px 13px; padding: 0 2px 11px; border-bottom: 1px solid rgba(219, 191, 127, .19); color: #b7a16d; font-family: var(--font-title); font-size: 10px; letter-spacing: .19em; }
.nav-item { min-height: 45px; margin: 2px 0; border: 1px solid transparent; border-radius: 12px 4px 12px 4px; color: #a7b4ad; }
.nav-item .nav-icon { filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); transition: transform .2s ease, filter .2s ease; }
.nav-item:hover { border-color: rgba(146, 207, 168, .14); background: linear-gradient(100deg, rgba(87, 147, 113, .15), rgba(196, 167, 102, .055)); transform: translateX(3px); }
.nav-item:hover .nav-icon { transform: translateY(-2px) scale(1.1); }
.nav-item.active { border-color: rgba(225, 191, 112, .28); color: #fff0c1; background: linear-gradient(100deg, rgba(163, 130, 63, .22), rgba(58, 120, 91, .16)); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 5px 16px rgba(0,0,0,.17); }
.nav-item.active::after { border-radius: 99px; box-shadow: 0 0 12px rgba(231, 198, 118, .7); }

/* Home portal is the game's new scene-setting title card. */
.realm-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(142px, 17vw, 206px);
  margin: 1px auto clamp(18px, 2.2vw, 29px);
  padding: clamp(20px, 3vw, 39px) clamp(23px, 4vw, 55px);
  overflow: hidden;
  border: 1px solid rgba(222, 192, 126, .49);
  border-radius: 5px 28px 5px 28px;
  background: linear-gradient(104deg, rgba(12, 25, 28, .94) 0%, rgba(18, 37, 37, .81) 43%, rgba(16, 26, 34, .58) 72%, rgba(10, 18, 27, .68));
  box-shadow: 0 23px 55px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.08), inset 0 0 55px rgba(117, 202, 165, .065);
  backdrop-filter: blur(5px);
}
.realm-banner::before { content:""; position:absolute; z-index:-1; inset:8px; border:1px solid rgba(232, 206, 151, .12); border-radius:2px 20px 2px 20px; }
.realm-banner::after { content:""; position:absolute; z-index:-1; top:-45%; right:8%; width:300px; height:260%; transform:rotate(28deg); background:linear-gradient(90deg,transparent,rgba(223,199,139,.055),transparent); }
.realm-banner-copy { position:relative; z-index:2; }
.realm-banner-kicker { display:flex; align-items:center; gap:9px; color:#bbd2bb; font-size:9px; font-weight:900; letter-spacing:.25em; }
.realm-banner-kicker i { width:7px; height:7px; border-radius:50%; background:#9ce4bd; box-shadow:0 0 12px #8cdbb0; animation:qiGlow 2s ease-in-out infinite; }
.realm-banner h1 { margin:9px 0 5px; color:#fff0c7; font-family:var(--font-title); font-size:clamp(23px, 3.1vw, 39px); font-weight:900; letter-spacing:.14em; text-shadow:0 3px 18px rgba(220, 190, 119, .24); }
.realm-banner p { color:#c4c6b9; font-size:13px; letter-spacing:.09em; }
.realm-banner-seal { position:absolute; z-index:1; right:clamp(32px, 10vw, 148px); top:50%; display:grid; place-items:center; width:78px; height:78px; transform:translateY(-50%) rotate(45deg); border:1px solid rgba(232, 205, 142, .52); background:linear-gradient(145deg,rgba(218,190,122,.13),rgba(19,41,39,.42)); box-shadow:0 0 0 6px rgba(219,191,126,.035), inset 0 0 23px rgba(234,211,159,.1), 0 0 34px rgba(207,179,110,.12); }
.realm-banner-seal span { transform:rotate(-45deg); color:#f0d89e; font-family:serif; font-size:28px; text-shadow:0 0 15px rgba(238,210,141,.57); }
.realm-banner-seal i { position:absolute; inset:9px; border:1px solid rgba(227,205,154,.23); }
.realm-banner-mountain { position:absolute; right:-2%; bottom:0; width:48%; height:91%; opacity:.47; }
.realm-banner-mountain b,.realm-banner-mountain i,.realm-banner-mountain em { position:absolute; bottom:0; display:block; width:78%; height:80%; background:linear-gradient(145deg,rgba(136,180,154,.35),rgba(27,68,64,.42) 50%,rgba(9,21,27,.65)); clip-path:polygon(0 100%, 26% 42%, 39% 58%, 58% 0, 100% 100%); filter:drop-shadow(0 0 16px rgba(138,207,176,.13)); }
.realm-banner-mountain b { right:0; height:72%; width:72%; opacity:.72; }
.realm-banner-mountain i { left:0; width:77%; height:61%; opacity:.68; transform:scaleX(-1); }
.realm-banner-mountain em { right:24%; width:42%; height:43%; opacity:.55; }
.realm-banner-bottom { position:absolute; right:21px; bottom:14px; display:flex; align-items:center; gap:10px; color:rgba(225,204,151,.56); font-family:serif; font-size:9px; letter-spacing:.22em; }
.realm-banner-bottom i { width:47px; height:1px; background:linear-gradient(90deg,transparent,#d9bd7f,transparent); }
@keyframes qiGlow { 50% { opacity:.55; box-shadow:0 0 4px #8cdbb0; } }

/* Full interface: raised lacquer panels, jade light wells, carved corners. */
.app-main { position:relative; z-index:1; }
.tab-pane.active { animation: portalArrival .42s cubic-bezier(.2,.72,.2,1) both; }
@keyframes portalArrival { from { opacity:0; transform:translateY(9px) scale(.995); filter:blur(2px); } to { opacity:1; transform:none; filter:none; } }
.card, .activity-hub, .activity-card, .boss-card, .ranking-card, .bicanh-card, .shop-card, .tongmon-card, .nhiemvu-card, .garden-card, .alchemy-card, .linhthu-active-card, .linhthu-vault-card, .paper-doll-card, .equipment-forge-card, .kynang-equipped-card, .kynang-library-card, .dihoa-active-card, .dihoa-vault-card, .dtd-profile-card, .dtd-opponents-card, .vuotai-map-card, .vuotai-arena-card {
  border:1px solid rgba(207, 189, 139, .25);
  border-radius:16px 5px 16px 5px;
  background:linear-gradient(145deg, rgba(21, 39, 38, .94), rgba(13, 24, 29, .96) 61%, rgba(17, 23, 31, .97));
  box-shadow:0 17px 39px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.055), inset 0 -1px rgba(91,169,136,.08);
  backdrop-filter:blur(7px);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card::before { left:17px; right:17px; background:linear-gradient(90deg,transparent,rgba(224,198,137,.35),rgba(131,214,177,.22),transparent); }
.card:hover { border-color:rgba(222, 194, 128, .39); box-shadow:0 20px 45px rgba(0,0,0,.31), inset 0 1px rgba(255,255,255,.065), 0 0 25px rgba(91, 182, 145, .055); }
.card-title, .section-title, .tab-title { color:#f1dfb5; font-family:var(--font-title); letter-spacing:.07em; text-shadow:0 2px 10px rgba(220,190,124,.09); }
.card-header, .section-header { border-color:rgba(210,190,141,.18); }
.activity-hub { position:relative; overflow:hidden; padding:clamp(20px, 2.8vw, 36px); background:radial-gradient(ellipse at 88% 0%,rgba(191,155,78,.16),transparent 34%),linear-gradient(125deg,rgba(28,51,43,.96),rgba(14,29,31,.97) 56%,rgba(17,23,33,.98)); }
.activity-hub::after { content:""; position:absolute; inset:9px; border:1px solid rgba(220,195,135,.105); border-radius:11px 3px 11px 3px; pointer-events:none; }
.activity-hub-heading h2 { color:#f3e7c9; font-family:var(--font-title); }
.activity-card { position:relative; min-height:82px; border-radius:13px 4px 13px 4px; background:linear-gradient(120deg,rgba(32,58,48,.95),rgba(18,34,36,.96)); }
.activity-card::after { content:""; position:absolute; right:-20px; bottom:-31px; width:90px; height:90px; border:1px solid rgba(224,196,128,.11); border-radius:50%; box-shadow:0 0 0 8px rgba(224,196,128,.025),0 0 0 18px rgba(224,196,128,.02); }
.activity-card:hover { transform:translateY(-3px); border-color:rgba(228,198,130,.52); box-shadow:0 12px 24px rgba(0,0,0,.25),0 0 24px rgba(103,196,151,.1); }
.activity-symbol { box-shadow:inset 0 1px rgba(255,255,255,.14),0 6px 17px rgba(0,0,0,.22); }
.activity-live { color:#a5e1bc; }
.stat-item, .stat-box, .meta-item, .dtd-stat-box { border-color:rgba(208,188,139,.17); background:linear-gradient(135deg,rgba(35,54,48,.65),rgba(12,24,29,.76)); }
.inv-slot, .slot-item, .shop-item-card, .flame-card, .skill-card, .equipment-card, .item-card, .opponent-card { border-radius:12px 4px 12px 4px; background:linear-gradient(145deg,rgba(29,50,46,.97),rgba(13,25,30,.98)); box-shadow:inset 0 1px rgba(255,255,255,.045),0 7px 18px rgba(0,0,0,.13); }
.inv-slot:hover, .slot-item:hover, .slot-item.active, .shop-item-card:hover, .flame-card:hover, .skill-card:hover, .equipment-card:hover, .item-card:hover { transform:translateY(-2px); border-color:rgba(126,218,173,.58); box-shadow:0 12px 24px rgba(0,0,0,.24),0 0 18px rgba(93,182,130,.13); }
.btn { border-radius:11px 4px 11px 4px; font-weight:800; letter-spacing:.015em; box-shadow:inset 0 1px rgba(255,255,255,.11),0 6px 15px rgba(0,0,0,.2); }
.btn-primary { border:1px solid rgba(143,222,180,.39); background:linear-gradient(145deg,#52a579,#286c55 48%,#184636); color:#f3f7df; box-shadow:inset 0 1px rgba(255,255,255,.19),0 7px 17px rgba(20,80,53,.28); }
.btn-secondary { border:1px solid rgba(215,195,143,.24); background:linear-gradient(145deg,rgba(66,83,70,.97),rgba(30,48,45,.98)); color:#e7ddc4; }
.btn-danger { border:1px solid rgba(237,129,104,.35); background:linear-gradient(145deg,#a95245,#74382f); }
.btn:not(:disabled):hover { transform:translateY(-2px); box-shadow:inset 0 1px rgba(255,255,255,.16),0 9px 20px rgba(0,0,0,.3); }
.form-input, .form-select, input, select, textarea { border-color:rgba(203,187,146,.27); border-radius:9px 3px 9px 3px; background-color:rgba(7,15,19,.81); }
.form-input:focus, .form-select:focus, input:focus, select:focus, textarea:focus { border-color:rgba(126,218,173,.72); box-shadow:0 0 0 3px rgba(96,179,134,.14),0 0 19px rgba(96,179,134,.09); }
.modal-overlay { background:rgba(2,7,12,.82); backdrop-filter:blur(12px) saturate(.8); }
.modal-card, .login-card { border:1px solid rgba(226,196,128,.51); border-radius:18px 5px 18px 5px; background:radial-gradient(ellipse at 85% 0%,rgba(77,133,103,.18),transparent 45%),linear-gradient(145deg,rgba(21,39,37,.99),rgba(9,17,24,.995)); box-shadow:0 32px 100px rgba(0,0,0,.68),inset 0 1px rgba(255,255,255,.07),inset 0 0 55px rgba(208,172,91,.05); }
.modal-title, .login-title { color:#f2dfad; font-family:var(--font-title); letter-spacing:.06em; }
.login-overlay { background:radial-gradient(ellipse at 50% 20%,rgba(55,105,89,.2),transparent 45%),rgba(4,8,14,.93); backdrop-filter:blur(12px); }
.login-card { position:relative; overflow:hidden; }
.login-card::after { content:"☯"; position:absolute; right:-.15em; bottom:-.5em; z-index:-1; color:rgba(226,198,133,.045); font-family:serif; font-size:220px; }
.login-badge { color:#9cdeb9; letter-spacing:.25em; }
.btn-discord { border-radius:12px 4px 12px 4px; box-shadow:0 9px 26px rgba(88,101,242,.25); }
.toast { border:1px solid rgba(222,192,126,.28); border-radius:12px 4px 12px 4px; background:linear-gradient(145deg,rgba(26,48,43,.97),rgba(10,19,24,.98)); box-shadow:0 12px 30px rgba(0,0,0,.36); }

/* Existing game canvases and scene art receive a more dimensional frame. */
.character-visual, .arena-battlefield, .battlefield, .bicanh-banner, .bicanh-combat, .linhthu-display, .treasure-altar-stage { box-shadow:inset 0 1px rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.23); }
.character-visual { border-radius:50% 50% 7px 7px; background:radial-gradient(ellipse at 50% 70%,rgba(222,187,103,.19),rgba(69,116,92,.15) 39%,transparent 72%); }
.character-visual img { filter:drop-shadow(0 11px 22px rgba(0,0,0,.55)) drop-shadow(0 0 17px rgba(207,196,143,.19)); }
.arena-battlefield { border:1px solid rgba(226,194,124,.32); border-radius:20px 5px 20px 5px; }
.fighter-hp-bar { border-radius:999px; box-shadow:inset 0 2px 6px rgba(0,0,0,.52); }
.hp-fill { border-radius:999px; box-shadow:0 0 14px currentColor; }
.battle-center-seal { box-shadow:0 0 0 8px rgba(222,193,123,.04),0 0 28px rgba(222,193,123,.28); }
.bicanh-mode-card { border-radius:15px 4px 15px 4px; background:linear-gradient(145deg,rgba(25,49,43,.97),rgba(11,23,28,.98)); box-shadow:0 15px 32px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.055); }
.advanced-mode { background:radial-gradient(ellipse at 90% 5%,rgba(153,93,187,.13),transparent 47%),linear-gradient(145deg,rgba(40,31,53,.96),rgba(15,21,31,.98)); }
.beast-active-img { box-shadow:0 0 0 7px rgba(208,184,116,.045),0 0 42px rgba(109,191,132,.25),inset 0 1px rgba(255,255,255,.16); }
.tab-pane h2, .tab-pane h3 { text-wrap:balance; }
::selection { color:#0b1917; background:#b8e4bf; }

@media (min-width:1101px) {
  .app-layout { grid-template-columns:248px minmax(0,1fr); }
  .app-nav { width:248px; }
  .app-main { padding:clamp(18px,2.15vw,35px); }
}
@media (max-width:1100px) {
  .world-ridge { width:100vw; }
  .world-temple { right:19vw; bottom:14vh; }
  .app-nav { padding:8px 10px; background:rgba(9,19,24,.96); }
  .app-nav::before { display:none; }
}
@media (max-width:760px) {
  .world-moon { top:11vh; right:4vw; opacity:.4; }
  .world-halo { top:calc(11vh - 27px); right:calc(4vw - 27px); }
  .world-temple { right:13vw; bottom:17vh; opacity:.2; }
  .world-sigil { right:-5vw; bottom:15vh; opacity:.7; }
  .realm-banner { min-height:137px; margin-bottom:15px; padding:20px 18px; border-radius:4px 18px 4px 18px; }
  .realm-banner h1 { max-width:72%; font-size:clamp(19px,5.2vw,29px); letter-spacing:.08em; }
  .realm-banner p { max-width:65%; font-size:11px; }
  .realm-banner-kicker { max-width:78%; font-size:7px; letter-spacing:.15em; }
  .realm-banner-seal { right:23px; width:55px; height:55px; }
  .realm-banner-seal span { font-size:21px; }
  .realm-banner-bottom { right:12px; bottom:8px; font-size:7px; }
  .header-center { border-radius:13px 4px 13px 4px; }
  .app-nav { box-shadow:0 8px 22px rgba(0,0,0,.28); }
  .nav-item { border-radius:9px 3px 9px 3px; }
  .activity-card { min-height:66px; }
}
@media (max-width:460px) {
  .realm-banner { min-height:123px; }
  .realm-banner-seal { opacity:.75; right:16px; width:47px; height:47px; }
  .realm-banner-bottom { display:none; }
  .currency-badge { min-width:0; padding:6px 8px; }
  .world-ridge-far { bottom:7vh; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .world-stage *, .realm-banner-kicker i, .tab-pane.active { animation:none !important; }
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; }
}

/* Battle is a centered, viewport-bounded encounter. Logs scroll inside it. */
body.battle-arena-open { overflow:hidden; }
#pveArenaBox.battle-overlay-mode {
  position:fixed;
  z-index:1400;
  inset:50% auto auto 50%;
  width:min(1120px, calc(100vw - 36px));
  max-height:min(92dvh, 940px);
  margin:0;
  padding:clamp(12px, 1.7vw, 23px);
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid rgba(235, 199, 119, .53);
  border-radius:19px 5px 19px 5px;
  transform:translate(-50%, -50%);
  box-shadow:0 0 0 100vmax rgba(2, 6, 10, .79), 0 30px 100px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.09), 0 0 35px rgba(212,171,92,.11);
  animation:battleModalCentered .24s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes battleModalCentered {
  from { opacity:0; transform:translate(-50%, calc(-50% + 12px)) scale(.985); }
  to { opacity:1; transform:translate(-50%, -50%) scale(1); }
}
#pveArenaBox.battle-overlay-mode .arena-header { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 8px; }
#pveArenaBox.battle-overlay-mode .arena-header .card-title { font-size:clamp(13px, 1.5vw, 18px); }
#pveArenaBox.battle-overlay-mode .arena-battle-view {
  display:grid;
  grid-template-rows:minmax(180px, min(36dvh, 355px)) auto auto minmax(72px, 15dvh);
  gap:0;
  min-height:0;
}
#pveArenaBox.battle-overlay-mode .arena-battlefield { height:100%; min-height:0; margin-bottom:9px; border-radius:16px 4px 16px 4px; }
#pveArenaBox.battle-overlay-mode .battle-actor { height:100%; min-height:0; }
#pveArenaBox.battle-overlay-mode .battle-actor img { height:min(32dvh, 300px); max-height:91%; }
#pveArenaBox.battle-overlay-mode .combat-status-row { margin-bottom:3px; }
#pveArenaBox.battle-overlay-mode .arena-log-heading { margin:5px 2px; }
#pveArenaBox.battle-overlay-mode .arena-logs-box { height:100%; min-height:0; max-height:none; overflow-y:auto; padding:7px 10px; font-size:11px; }
#pveArenaBox.battle-overlay-mode .battle-log-line { padding:5px 7px; }
.enemy-spirit.has-art {
  width:clamp(170px, 22vw, 292px);
  height:clamp(195px, 34dvh, 335px);
  padding:0;
  overflow:visible;
  background-image:url('/assets/pve/enemy-atlas.png');
  background-repeat:no-repeat;
  background-size:300% 300%;
  background-position:var(--monster-x, 0%) var(--monster-y, 0%);
  filter:drop-shadow(0 13px 11px rgba(0,0,0,.53)) drop-shadow(0 0 18px rgba(224,99,71,.25));
  animation:monsterHover 3.5s ease-in-out infinite;
}
#pveArenaBox.battle-overlay-mode .enemy-spirit.has-art { width:clamp(170px, 22vw, 292px); height:92%; max-height:340px; }
.battle-actor-enemy:has(.enemy-spirit.has-art) .actor-aura { width:245px; height:188px; background:radial-gradient(ellipse,rgba(194,75,54,.39),rgba(118,48,65,.13) 43%,transparent 70%); filter:blur(12px); }
@keyframes monsterHover { 50% { transform:translateY(-6px) scale(1.025); } }
@media (max-width:760px) {
  #pveArenaBox.battle-overlay-mode { width:calc(100vw - 16px); max-height:95dvh; padding:10px; border-radius:14px 4px 14px 4px; }
  #pveArenaBox.battle-overlay-mode .arena-battle-view { grid-template-rows:minmax(160px, 30dvh) auto auto minmax(68px, 14dvh); }
  #pveArenaBox.battle-overlay-mode .battle-actor img { height:min(26dvh, 220px); }
  #pveArenaBox.battle-overlay-mode .enemy-spirit.has-art { width:clamp(130px, 35vw, 215px); }
}
@media (max-height:620px) {
  #pveArenaBox.battle-overlay-mode { max-height:96dvh; padding:9px 13px; }
  #pveArenaBox.battle-overlay-mode .arena-battle-view { grid-template-rows:minmax(132px, 29dvh) auto auto minmax(54px, 12dvh); }
  #pveArenaBox.battle-overlay-mode .battle-actor img { height:min(24dvh, 185px); }
  #pveArenaBox.battle-overlay-mode .arena-log-heading { margin:2px; }
  #pveArenaBox.battle-overlay-mode .arena-logs-box { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .enemy-spirit.has-art { animation:none !important; }
  #pveArenaBox.battle-overlay-mode { animation:none !important; }
}