:root {
  --bg: var(--tg-theme-bg-color, #07150d);
  --bg-2: #0b2114;
  --surface: color-mix(in srgb, var(--tg-theme-secondary-bg-color, #13271a) 92%, transparent);
  --surface-solid: var(--tg-theme-secondary-bg-color, #13271a);
  --surface-2: color-mix(in srgb, var(--surface-solid) 78%, #ffffff 5%);
  --text: var(--tg-theme-text-color, #f6f2dc);
  --muted: var(--tg-theme-hint-color, #9bad9f);
  --accent: var(--tg-theme-button-color, #36a45c);
  --accent-2: #dcae48;
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: #d9594d;
  --success: #4dcc72;
  --warning: #e9b44d;
  --border: rgba(255,255,255,.09);
  --glass: rgba(5,20,12,.68);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --shadow: 0 18px 55px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100dvh; background:
  radial-gradient(circle at 80% -10%, rgba(63,145,82,.2), transparent 34%),
  radial-gradient(circle at -10% 45%, rgba(216,166,61,.08), transparent 35%),
  var(--bg); color: var(--text); font-family: Tahoma, "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
.hidden { display: none !important; }
.app-shell { min-height: 100dvh; padding-bottom: calc(82px + var(--safe-bottom)); }
.topbar { position: sticky; top: 0; z-index: 40; min-height: calc(68px + var(--safe-top)); padding: calc(9px + var(--safe-top)) 14px 9px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 10px; background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(20px) saturate(1.2); }
.brand { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.brand-logo { width: 44px; height: 44px; border-radius: 14px; object-fit: cover; box-shadow: 0 5px 18px rgba(0,0,0,.28); }
.brand-copy { min-width: 0; }
.brand-copy strong { display: block; color: #f1cf70; letter-spacing: .8px; font-family: Georgia, serif; font-size: 16px; }
.brand-copy span { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; margin-top: 3px; }
.round-button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 20px; }
.round-button:active { transform: scale(.96); }
.content { width: min(100%, 760px); margin: 0 auto; padding: 14px 13px 28px; }
.screen { display: none; animation: screen-in .22s ease; }
.screen.active { display: block; }
@keyframes screen-in { from { opacity: 0; transform: translateY(7px); } }
.center-state { min-height: calc(100dvh - 170px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px; }
.center-state h1 { font-size: 21px; margin: 18px 0 8px; }
.center-state p { color: var(--muted); line-height: 1.8; margin: 0 0 18px; font-size: 13px; }
.state-icon { font-size: 56px; }
.loading-orbit { width: 96px; height: 96px; padding: 8px; border-radius: 31px; background: conic-gradient(from 0deg, transparent, var(--accent), var(--accent-2), transparent); animation: rotate 1.8s linear infinite; }
.loading-orbit img { width: 100%; height: 100%; display: block; border-radius: 24px; object-fit: cover; background: var(--bg); border: 5px solid var(--bg); animation: counter 1.8s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes counter { to { transform: rotate(-360deg); } }
.loading-bars { display: flex; gap: 5px; margin-top: 10px; }
.loading-bars i { width: 7px; height: 22px; border-radius: 9px; background: var(--accent); animation: bars .75s ease-in-out infinite alternate; }
.loading-bars i:nth-child(2) { animation-delay: .15s; }
.loading-bars i:nth-child(3) { animation-delay: .3s; }
@keyframes bars { to { height: 9px; opacity: .45; } }
.hero { position: relative; min-height: 290px; border-radius: 29px; overflow: hidden; background: #173a20 url('/woodlords-hero.webp') center 37%/cover no-repeat; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,10,5,.05) 10%, rgba(4,16,8,.38) 48%, rgba(5,18,10,.96) 100%); z-index: -1; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 50%; background: radial-gradient(circle at 50% 100%, rgba(53,149,78,.25), transparent 62%); z-index: -1; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 15px; }
.player-pill { max-width: 72%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 18px; background: rgba(4,15,8,.72); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(10px); }
.avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg,#46684e,#1a3822); font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.player-pill strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.player-pill span { display: block; color: #dbbf6c; margin-top: 4px; font-size: 10px; }
.level-medal { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #ffe89c, #c78e28 52%, #5f3e08 100%); border: 3px solid rgba(255,255,255,.24); color: #281a03; font-weight: 900; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.hero-bottom { position: absolute; left: 15px; right: 15px; bottom: 14px; }
.hero-title { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hero-title h1 { font-size: 23px; margin: 0; text-shadow: 0 3px 12px #000; }
.hero-title p { margin: 6px 0 0; color: rgba(255,255,255,.72); font-size: 11px; }
.weather-badge { flex: 0 0 auto; padding: 8px 10px; border-radius: 14px; background: rgba(0,0,0,.42); backdrop-filter: blur(10px); font-size: 12px; }
.xp-shell { padding: 9px 11px; border-radius: 15px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.11); backdrop-filter: blur(10px); }
.xp-label { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 10px; }
.progress { height: 9px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.09); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent),#8ddd67); transition: width .35s ease; }
.progress.gold > span { background: linear-gradient(90deg,#b77b20,#ffd76b); }
.progress.red > span { background: linear-gradient(90deg,#d94c41,#ff9d6d); }
.resource-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.resource-chip { min-width: 0; padding: 11px 7px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.resource-chip span { display: block; font-size: 20px; }
.resource-chip strong { display: block; overflow: hidden; text-overflow: ellipsis; margin-top: 5px; font-size: 12px; }
.section { margin-top: 17px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 3px 10px; }
.section-head h2 { margin: 0; font-size: 16px; }
.section-head span, .section-head button { color: var(--muted); font-size: 10px; }
.link-button { border: 0; background: transparent; padding: 5px; }
.action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.action-tile { position: relative; min-height: 102px; overflow: hidden; padding: 12px 9px; border: 1px solid var(--border); border-radius: 20px; color: var(--text); background: linear-gradient(145deg,var(--surface-2),var(--surface)); text-align: center; }
.action-tile::after { content: ""; position: absolute; width: 55px; height: 55px; border-radius: 50%; left: -22px; bottom: -23px; background: color-mix(in srgb,var(--accent) 16%,transparent); }
.action-tile .tile-icon { display: block; font-size: 29px; filter: drop-shadow(0 5px 8px rgba(0,0,0,.25)); }
.action-tile strong { display: block; font-size: 11px; margin-top: 7px; }
.action-tile small { display: block; color: var(--muted); margin-top: 5px; font-size: 9px; }
.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.panel-card { position: relative; min-height: 125px; overflow: hidden; padding: 15px; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(150deg,var(--surface-2),var(--surface)); }
.panel-card .panel-icon { font-size: 34px; }
.panel-card h3 { margin: 9px 0 4px; font-size: 14px; }
.panel-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.panel-card .panel-value { position: absolute; left: 12px; top: 12px; padding: 5px 8px; border-radius: 10px; background: rgba(0,0,0,.18); color: #efcf78; font-size: 10px; }
.forest-stage { position: relative; min-height: 420px; overflow: hidden; border-radius: 29px; border: 1px solid rgba(255,255,255,.11); background:
  radial-gradient(circle at 80% 12%, rgba(255,225,133,.95) 0 28px, rgba(255,225,133,.15) 29px 70px, transparent 71px),
  linear-gradient(180deg,#73b68a 0%,#34734d 49%,#173821 100%); box-shadow: var(--shadow); isolation: isolate; }
.forest-stage::before { content: ""; position: absolute; left: -15%; right: -15%; bottom: -75px; height: 225px; border-radius: 50%; background: #102d19; box-shadow: 0 -31px 0 #1b4728, 0 -54px 0 rgba(40,103,58,.52); z-index: -1; }
.forest-stage.weather-rain { background: linear-gradient(180deg,#668994 0%,#356271 48%,#173b34 100%); }
.forest-stage.weather-fog { background: linear-gradient(180deg,#91a99c 0%,#647c70 48%,#294a36 100%); }
.forest-stage.weather-storm { background: linear-gradient(180deg,#47576d 0%,#273a4d 48%,#172b2c 100%); }
.forest-stage.weather-hot { background: radial-gradient(circle at 82% 10%,#fff0a6 0 42px,rgba(255,174,71,.24) 43px 100px,transparent 101px),linear-gradient(180deg,#bd9c5b,#72632d 49%,#34411d); }
.sky-particles { position: absolute; inset: 0; pointer-events: none; opacity: .7; }
.weather-rain .sky-particles, .weather-storm .sky-particles { background-image: repeating-linear-gradient(105deg,transparent 0 18px,rgba(210,235,255,.35) 19px 20px,transparent 21px 38px); background-size: 45px 80px; animation: rain 1.2s linear infinite; }
.weather-fog .sky-particles { background: linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent); filter: blur(10px); animation: fog 5s ease-in-out infinite alternate; }
@keyframes rain { to { background-position: 0 80px; } }
@keyframes fog { to { transform: translateX(35px); opacity: .4; } }
.forest-toolbar { position: absolute; z-index: 5; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; }
.glass-badge { padding: 8px 10px; border-radius: 14px; color: #fff; background: rgba(0,0,0,.31); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); font-size: 10px; }
.forest-trees { position: absolute; inset: 72px 7px 44px; z-index: 3; display: grid; grid-template-columns: repeat(3,1fr); align-items: end; gap: 1px; }
.scene-tree { border: 0; background: transparent; color: #fff; min-width: 0; padding: 4px 1px; display: flex; flex-direction: column; align-items: center; justify-content: end; }
.scene-tree .tree-emoji { font-size: clamp(54px,18vw,92px); filter: drop-shadow(0 14px 8px rgba(0,0,0,.35)); transform-origin: center bottom; animation: sway 4s ease-in-out infinite alternate; }
.scene-tree:nth-child(2n) .tree-emoji { animation-delay: -1.7s; }
@keyframes sway { to { transform: rotate(1.7deg) translateY(-2px); } }
.scene-tree:active .tree-emoji { transform: scale(.93); }
.scene-tree .tree-label { max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 7px; border-radius: 10px; background: rgba(0,0,0,.42); font-size: 9px; }
.empty-slot { min-height: 95px; align-self: end; margin-bottom: 20px; border: 1px dashed rgba(255,255,255,.22); border-radius: 22px; background: rgba(0,0,0,.08); color: rgba(255,255,255,.65); font-size: 28px; }
.tree-list { display: grid; gap: 10px; margin-top: 12px; }
.tree-card, .mission-card, .achievement-card, .mastery-card, .leader-row { border: 1px solid var(--border); border-radius: 21px; background: var(--surface); }
.tree-card { padding: 13px; }
.tree-card-head { display: flex; align-items: center; gap: 11px; }
.tree-card-emoji { width: 57px; height: 57px; flex: 0 0 57px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(145deg,rgba(68,144,84,.2),rgba(255,255,255,.04)); font-size: 40px; }
.tree-card-info { min-width: 0; flex: 1; }
.tree-card-info h3 { margin: 0; font-size: 14px; }
.tree-card-info p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.status-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.status-chip { padding: 5px 8px; border-radius: 10px; background: rgba(255,255,255,.05); color: var(--muted); font-size: 9px; }
.status-chip.good { color: #8ee8ab; background: rgba(65,190,103,.1); }
.status-chip.bad { color: #ffaaa2; background: rgba(223,98,86,.1); }
.card-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 11px; }
.primary-button, .secondary-button, .danger-button, .small-button { min-height: 44px; padding: 10px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 14px; border: 0; text-decoration: none; }
.primary-button { color: var(--accent-text); background: linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#b7dd55)); box-shadow: 0 8px 20px color-mix(in srgb,var(--accent) 22%,transparent); }
.secondary-button { color: var(--text); background: var(--surface-2); border: 1px solid var(--border); }
.danger-button { color: #fff; background: var(--danger); }
.small-button { min-height: 35px; padding: 7px 10px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); font-size: 10px; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; padding: 5px; margin-bottom: 12px; border-radius: 17px; background: var(--surface); border: 1px solid var(--border); }
.segmented button { min-height: 38px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 11px; }
.segmented button.active { background: var(--surface-2); color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.mission-list, .achievement-list, .mastery-list, .leader-list { display: grid; gap: 9px; }
.mission-card, .achievement-card, .mastery-card { padding: 13px; }
.card-main { display: flex; gap: 11px; align-items: center; }
.card-main .big-symbol { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 16px; background: var(--surface-2); font-size: 28px; }
.card-copy { min-width: 0; flex: 1; }
.card-copy h3 { margin: 0; font-size: 13px; }
.card-copy p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.reward-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; color: #e8ca71; font-size: 9px; }
.reward-line span { padding: 4px 7px; border-radius: 9px; background: rgba(222,172,61,.08); }
.card-footer { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.card-footer .progress { flex: 1; }
.card-footer small { min-width: 53px; color: var(--muted); font-size: 9px; text-align: left; }
.mastery-levels { display: flex; gap: 4px; margin-top: 9px; }
.mastery-levels i { width: 24px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); }
.mastery-levels i.on { background: linear-gradient(90deg,var(--accent),#8dda63); }
.boss-card { position: relative; overflow: hidden; padding: 17px; border-radius: 27px; border: 1px solid rgba(255,153,101,.16); background:
  radial-gradient(circle at 12% 0%,rgba(255,98,54,.18),transparent 37%),
  linear-gradient(145deg,#241710,var(--surface)); box-shadow: var(--shadow); }
.boss-head { display: flex; align-items: center; gap: 13px; }
.boss-avatar { width: 76px; height: 76px; flex: 0 0 76px; display: grid; place-items: center; border-radius: 23px; background: radial-gradient(circle at 35% 25%,#6e4b32,#24150f); border: 1px solid rgba(255,255,255,.12); font-size: 48px; }
.boss-head h2 { margin: 0; font-size: 18px; }
.boss-head p { color: var(--muted); font-size: 9px; line-height: 1.6; margin: 6px 0 0; }
.boss-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 12px 0; }
.mini-stat { padding: 9px 6px; text-align: center; border-radius: 13px; background: rgba(0,0,0,.17); }
.mini-stat span { display: block; color: var(--muted); font-size: 8px; }
.mini-stat strong { display: block; margin-top: 4px; font-size: 11px; }
.season-card { padding: 16px; border-radius: 25px; border: 1px solid rgba(226,184,74,.16); background: radial-gradient(circle at 90% 0%,rgba(225,176,58,.17),transparent 35%),var(--surface); }
.season-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.season-title strong { font-size: 17px; }
.leader-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; }
.leader-row.me { border-color: color-mix(in srgb,var(--accent) 45%,var(--border)); background: color-mix(in srgb,var(--accent) 8%,var(--surface)); }
.leader-rank { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: #e7c96b; font-weight: 700; font-size: 11px; }
.leader-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.leader-value { color: var(--muted); font-size: 10px; }
.market-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.item-card { min-height: 151px; padding: 13px; display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); }
.item-icon { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 15px; background: var(--surface-2); font-size: 31px; }
.item-card h3 { margin: 9px 0 0; font-size: 12px; }
.item-card p { flex: 1; margin: 5px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.item-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 10px; }
.empty-card { padding: 30px 18px; text-align: center; border-radius: 21px; border: 1px dashed var(--border); color: var(--muted); font-size: 11px; }
.bottom-nav { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5,1fr); padding: 7px 7px calc(7px + var(--safe-bottom)); border-top: 1px solid var(--border); background: color-mix(in srgb,var(--surface-solid) 90%,transparent); backdrop-filter: blur(22px) saturate(1.2); }
.nav-item { min-width: 0; border: 0; border-radius: 14px; padding: 5px 1px; background: transparent; color: var(--muted); }
.nav-item span { display: block; font-size: 21px; transition: transform .18s; }
.nav-item small { display: block; margin-top: 3px; font-size: 8px; }
.nav-item.active { color: #e9ca72; background: rgba(226,181,74,.08); }
.nav-item.active span { transform: translateY(-2px) scale(1.08); }
.toast { position: fixed; z-index: 80; left: 14px; right: 14px; bottom: calc(80px + var(--safe-bottom)); max-width: 520px; margin: auto; padding: 12px 14px; border-radius: 15px; background: #183322; color: #fff; border: 1px solid rgba(255,255,255,.1); box-shadow: var(--shadow); transform: translateY(28px); opacity: 0; pointer-events: none; transition: .22s; text-align: center; font-size: 11px; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { background: #4a211d; }
.modal { position: fixed; z-index: 70; inset: 0; display: flex; align-items: flex-end; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.63); backdrop-filter: blur(5px); }
.modal-sheet { position: relative; width: min(100%,760px); max-height: 88dvh; overflow: auto; margin: 0 auto; padding: 8px 15px calc(20px + var(--safe-bottom)); border-radius: 29px 29px 0 0; background: var(--surface-solid); box-shadow: 0 -20px 60px rgba(0,0,0,.48); animation: sheet-in .23s ease; }
@keyframes sheet-in { from { transform: translateY(30px); opacity: .5; } }
.modal-handle { width: 43px; height: 5px; margin: 4px auto 16px; border-radius: 99px; background: rgba(255,255,255,.18); }
.modal-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.modal-title .big-icon { font-size: 43px; }
.modal-title h2 { margin: 0; font-size: 17px; }
.modal-title p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.modal-actions { display: grid; gap: 8px; margin-top: 15px; }
.group-list { display: grid; gap: 8px; }
.group-option { padding: 12px; border-radius: 15px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-align: right; }
.group-option.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); }
.field { display: block; color: var(--muted); font-size: 10px; }
.field input { width: 100%; min-height: 46px; margin-top: 8px; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--border); outline: 0; background: var(--bg); color: var(--text); }
.busy-overlay { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.16); pointer-events: all; }
.busy-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255,255,255,.16); border-top-color: var(--accent); animation: rotate .8s linear infinite; }
.skeleton { background: linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.09),rgba(255,255,255,.035)); background-size: 200% 100%; animation: shimmer 1.25s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (min-width: 600px) {
  .resource-strip { grid-template-columns: repeat(6,1fr); }
  .action-row { grid-template-columns: repeat(6,1fr); }
  .panel-grid { grid-template-columns: repeat(4,1fr); }
  .forest-trees { grid-template-columns: repeat(5,1fr); }
  .market-grid { grid-template-columns: repeat(3,1fr); }
}

/* v1.6 social, battle and trading surfaces */
.scroll-tabs { overflow-x: auto; grid-auto-columns: minmax(92px,1fr); scrollbar-width: none; }
.scroll-tabs::-webkit-scrollbar { display: none; }
.raid-panel { background: radial-gradient(circle at 85% 8%,rgba(138,95,255,.18),transparent 42%),var(--surface); }
.raid-banner { min-height: 126px; padding: 16px; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 12px; border-radius: 25px; border: 1px solid rgba(151,110,255,.22); background: radial-gradient(circle at 10% 0%,rgba(119,76,255,.22),transparent 42%),linear-gradient(145deg,#17142b,var(--surface)); box-shadow: var(--shadow); }
.raid-banner.closed { filter: saturate(.7); border-color: var(--border); background: linear-gradient(145deg,#2a2118,var(--surface)); }
.raid-moon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 19px; background: rgba(255,255,255,.07); font-size: 35px; box-shadow: inset 0 0 20px rgba(255,255,255,.05); }
.raid-copy h2 { margin: 0; font-size: 16px; }
.raid-copy p { margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.raid-counter { min-width: 69px; padding: 10px 7px; text-align: center; border-radius: 16px; background: rgba(0,0,0,.2); }
.raid-counter strong { display: block; color: #e6cc82; font-size: 21px; }
.raid-counter span { display: block; color: var(--muted); font-size: 7px; margin-top: 3px; }
.target-list,.activity-list,.listing-list,.clan-list,.raid-type-list { display: grid; gap: 9px; }
.target-card { width: 100%; padding: 12px; display: flex; align-items: center; gap: 11px; text-align: right; color: var(--text); border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.target-card:active { transform: scale(.985); }
.target-avatar { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; border-radius: 17px; background: radial-gradient(circle at 40% 30%,rgba(80,188,100,.3),rgba(10,38,20,.65)); font-size: 31px; }
.target-main { min-width: 0; flex: 1; }
.target-title,.listing-title { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.target-title strong { font-size: 12px; }
.target-title span { color: #e0c36d; font-size: 9px; }
.target-resources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; color: var(--muted); font-size: 8px; }
.target-resources span { padding: 4px 7px; border-radius: 8px; background: rgba(255,255,255,.045); }
.target-resources.large { margin-bottom: 13px; font-size: 10px; }
.target-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 8px; }
.target-footer span { color: var(--muted); }
.target-footer b { color: #dcca7e; }
.activity-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.activity-row.success { border-inline-start: 3px solid var(--success); }
.activity-row.failed { border-inline-start: 3px solid var(--danger); }
.activity-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: var(--surface-2); font-size: 23px; }
.activity-row strong { display: block; font-size: 10px; }
.activity-row p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.activity-row > span { color: var(--muted); font-size: 8px; }
.raid-type-card { width: 100%; min-height: 94px; padding: 10px; display: grid; grid-template-columns: 48px 1fr 57px; gap: 9px; align-items: center; text-align: right; color: var(--text); border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2); }
.raid-type-card.chance-high { border-color: rgba(74,204,111,.3); }
.raid-type-card.chance-mid { border-color: rgba(234,183,74,.3); }
.raid-type-card.chance-low { border-color: rgba(218,91,78,.28); }
.raid-type-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: rgba(0,0,0,.17); font-size: 29px; }
.raid-type-copy strong { display: block; font-size: 11px; }
.raid-type-copy p { margin: 5px 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.raid-type-copy small { color: #ccb96f; font-size: 7px; }
.chance-value { text-align: center; }
.chance-value b { display: block; font-size: 17px; }
.chance-value span { display: block; color: var(--muted); font-size: 7px; margin-top: 4px; }
.risk-note,.detail-copy { margin-top: 12px; padding: 10px 11px; border-radius: 13px; background: rgba(232,177,65,.075); color: var(--muted); font-size: 9px; line-height: 1.8; }
.combat-compare { display: grid; grid-template-columns: 1fr 42px 1fr; align-items: center; gap: 7px; margin: 13px 0; }
.combat-compare > div:not(.versus) { padding: 11px; text-align: center; border-radius: 15px; background: var(--surface-2); }
.combat-compare span { display: block; color: var(--muted); font-size: 8px; }
.combat-compare strong { display: block; margin-top: 5px; font-size: 13px; }
.versus { text-align: center; color: #d7bd69; font-weight: 900; }
.chance-meter { height: 12px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.07); }
.chance-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#d4534b,#d9ac43 52%,#43bc70); }
.result-emblem { width: 90px; height: 90px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 29px; font-size: 52px; }
.result-emblem.win { background: radial-gradient(circle,#5ccf7d,#183e25); box-shadow: 0 0 40px rgba(73,196,107,.2); }
.result-emblem.loss { background: radial-gradient(circle,#d66a5e,#421c18); }
.result-title { margin: 0; text-align: center; font-size: 19px; }
.market-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; margin-bottom: 12px; }
.market-toolbar .segmented { margin: 0; }
.primary-button.compact { min-height: 48px; white-space: nowrap; }
.listing-card { padding: 11px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; border-radius: 19px; border: 1px solid var(--border); background: var(--surface); }
.listing-card.mine { border-color: rgba(216,176,72,.27); }
.listing-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--surface-2); font-size: 29px; }
.listing-main { min-width: 0; }
.listing-title strong { font-size: 11px; }
.listing-title span { color: var(--muted); font-size: 8px; }
.listing-main p { margin: 5px 0; color: var(--muted); font-size: 8px; }
.listing-price { display: flex; gap: 8px; align-items: baseline; }
.listing-price b { color: #e1c36b; font-size: 11px; }
.listing-price small { color: var(--muted); font-size: 7px; }
.danger-outline { color: #ffaaa2; border-color: rgba(225,88,75,.28); }
.two-fields { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 10px; }
.field select { width: 100%; min-height: 46px; margin-top: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; }
.clan-empty { padding: 25px 18px; text-align: center; border-radius: 26px; border: 1px solid rgba(216,176,72,.16); background: radial-gradient(circle at 50% 0%,rgba(218,177,70,.13),transparent 42%),var(--surface); }
.clan-empty h2 { margin: 12px 0 7px; font-size: 17px; }
.clan-empty p { max-width: 420px; margin: 0 auto 16px; color: var(--muted); font-size: 9px; line-height: 1.8; }
.clan-emblem { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 22px; background: radial-gradient(circle at 35% 25%,#e4c66c,#755414); color: #291d03; font-weight: 900; font-size: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.clan-empty .clan-emblem { margin: auto; font-size: 38px; }
.clan-row { padding: 10px; display: grid; grid-template-columns: 49px 1fr auto; align-items: center; gap: 9px; border-radius: 17px; border: 1px solid var(--border); background: var(--surface); }
.clan-tag { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#d6b65c,#5d4512); color: #211701; font-size: 10px; font-weight: 900; }
.clan-row strong { font-size: 11px; }
.clan-row p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.clan-hero { padding: 16px; border-radius: 26px; border: 1px solid rgba(217,177,70,.19); background: radial-gradient(circle at 90% -10%,rgba(218,178,70,.18),transparent 42%),linear-gradient(145deg,#1d2615,var(--surface)); box-shadow: var(--shadow); }
.clan-hero-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.clan-hero-top h2 { margin: 0; font-size: 17px; }
.clan-hero-top p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
@media (max-width: 390px) {
  .raid-banner { grid-template-columns: 48px 1fr; }
  .raid-counter { grid-column: 1/-1; display: flex; align-items: center; justify-content: center; gap: 7px; }
  .raid-counter span { margin: 0; }
  .market-toolbar { grid-template-columns: 1fr; }
  .listing-card { grid-template-columns: 43px 1fr auto; }
  .raid-type-card { grid-template-columns: 43px 1fr 49px; }
}

/* v1.7 duel, workshop and activity center */
.topbar { grid-template-columns: 42px 1fr auto; }
.top-actions { display: flex; align-items: center; gap: 7px; }
.badge-button { position: relative; }
.notification-badge { position: absolute; inset: -5px -5px auto auto; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; border: 2px solid var(--bg); background: var(--danger); color: #fff; font-size: 8px; font-weight: 900; }
.duel-panel { background: radial-gradient(circle at 82% 4%,rgba(225,175,65,.22),transparent 44%),var(--surface); }
.workshop-panel { background: radial-gradient(circle at 12% 2%,rgba(108,153,255,.18),transparent 44%),var(--surface); }
.duel-arena { padding: 16px; border: 1px solid rgba(225,180,72,.22); border-radius: 27px; background: radial-gradient(circle at 50% -10%,rgba(225,180,72,.16),transparent 44%),linear-gradient(145deg,#231d13,var(--surface)); box-shadow: var(--shadow); }
.duel-arena.waiting { border-color: rgba(141,114,255,.26); background: radial-gradient(circle at 50% -10%,rgba(116,89,255,.17),transparent 44%),linear-gradient(145deg,#19162a,var(--surface)); }
.duel-versus { display: grid; grid-template-columns: 1fr 52px 1fr; align-items: center; gap: 8px; margin: 13px 0; }
.fighter-card { min-width: 0; padding: 13px 8px; text-align: center; border: 1px solid var(--border); border-radius: 19px; background: rgba(255,255,255,.045); }
.fighter-avatar { width: 58px; height: 58px; margin: 0 auto 8px; display: grid; place-items: center; border-radius: 20px; background: radial-gradient(circle at 40% 25%,rgba(76,205,116,.27),rgba(12,38,20,.72)); font-size: 34px; }
.fighter-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.fighter-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }
.duel-vs-medal { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: radial-gradient(circle,#f0ce73,#745111); color: #251700; font-weight: 1000; box-shadow: 0 7px 22px rgba(0,0,0,.3); }
.battle-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 10px; }
.battle-stat { padding: 9px 7px; text-align: center; border-radius: 13px; background: rgba(0,0,0,.18); }
.battle-stat span { display: block; color: var(--muted); font-size: 7px; }
.battle-stat strong { display: block; margin-top: 4px; font-size: 12px; }
.duel-target-list,.tactic-grid,.workshop-grid,.gear-grid,.activity-center-list { display: grid; gap: 9px; }
.duel-target { width: 100%; padding: 11px; display: grid; grid-template-columns: 49px 1fr auto; align-items: center; gap: 10px; text-align: right; color: var(--text); border: 1px solid var(--border); border-radius: 19px; background: var(--surface); }
.duel-target .target-avatar { width: 49px; height: 49px; flex-basis: 49px; }
.duel-target b { color: #e4c56e; font-size: 9px; }
.tactic-grid { grid-template-columns: repeat(2,1fr); }
.tactic-card { min-height: 130px; padding: 12px; text-align: right; color: var(--text); border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2); }
.tactic-card.selected { border-color: rgba(76,205,114,.52); box-shadow: inset 0 0 0 1px rgba(76,205,114,.2); }
.tactic-card .tactic-icon { display: block; font-size: 31px; margin-bottom: 8px; }
.tactic-card strong { display: block; font-size: 11px; }
.tactic-card p { min-height: 34px; margin: 6px 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.tactic-mults { display: flex; flex-wrap: wrap; gap: 4px; }
.tactic-mults span { padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.055); font-size: 7px; }
.duel-history-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 9px; align-items: center; padding: 10px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.duel-history-row.win { border-inline-start: 3px solid var(--success); }
.duel-history-row.loss { border-inline-start: 3px solid var(--danger); }
.duel-history-row .activity-icon { width: 38px; height: 38px; }
.duel-history-row strong { display: block; font-size: 10px; }
.duel-history-row p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }
.duel-history-row > span { color: var(--muted); font-size: 8px; }
.workshop-hero { padding: 16px; border-radius: 27px; border: 1px solid rgba(110,159,255,.19); background: radial-gradient(circle at 90% 0%,rgba(83,137,255,.16),transparent 45%),linear-gradient(145deg,#142035,var(--surface)); box-shadow: var(--shadow); }
.loadout-main { display: grid; grid-template-columns: 68px 1fr; gap: 12px; align-items: center; }
.loadout-icon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 22px; background: radial-gradient(circle at 35% 25%,#d9e4ff,#4f73b6 58%,#19294a); font-size: 40px; box-shadow: 0 8px 26px rgba(0,0,0,.3); }
.loadout-main h2 { margin: 0; font-size: 16px; }
.loadout-main p { margin: 6px 0 0; color: var(--muted); font-size: 8px; line-height: 1.65; }
.workshop-grid { grid-template-columns: repeat(2,1fr); }
.weapon-card,.gear-card { position: relative; padding: 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.weapon-card.equipped,.gear-card.equipped { border-color: rgba(78,207,115,.45); background: radial-gradient(circle at 90% 0%,rgba(78,207,115,.12),transparent 45%),var(--surface); }
.weapon-card.locked { filter: saturate(.55); }
.equipped-ribbon { position: absolute; inset: 9px auto auto 9px; padding: 4px 7px; border-radius: 8px; background: rgba(72,198,107,.18); color: #8befaa; font-size: 7px; }
.weapon-icon,.gear-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: var(--surface-2); font-size: 31px; }
.weapon-card h3,.gear-card h3 { margin: 9px 0 4px; font-size: 11px; }
.weapon-card p,.gear-card p { min-height: 34px; margin: 0; color: var(--muted); font-size: 7.5px; line-height: 1.55; }
.weapon-cost { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; margin-top: 9px; font-size: 8px; color: #dfc36e; }
.weapon-card .small-button,.gear-card .small-button { width: 100%; margin-top: 9px; }
.gear-grid { grid-template-columns: repeat(2,1fr); }
.passive-badge { display: inline-block; margin-top: 7px; padding: 4px 7px; border-radius: 8px; background: rgba(122,102,255,.13); color: #bdb0ff; font-size: 7px; }
.activity-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.activity-sheet-head h2 { margin: 0; font-size: 17px; }
.activity-center-row { padding: 11px; display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 9px; border-radius: 17px; border: 1px solid var(--border); background: var(--surface); }
.activity-center-row.unread { border-color: rgba(72,198,107,.28); background: radial-gradient(circle at 100% 0%,rgba(72,198,107,.08),transparent 40%),var(--surface); }
.activity-center-row.urgent { border-color: rgba(226,175,67,.38); }
.activity-center-row .activity-icon { width: 42px; height: 42px; }
.activity-center-row strong { display: block; font-size: 10px; }
.activity-center-row p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.activity-center-row time { color: var(--muted); font-size: 7px; white-space: nowrap; }
.profile-summary { padding: 15px; border-radius: 23px; background: radial-gradient(circle at 10% 0%,rgba(226,180,70,.14),transparent 46%),var(--surface); border: 1px solid var(--border); }
.profile-loadout { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 12px; }
.profile-loadout div { padding: 9px 5px; text-align: center; border-radius: 13px; background: var(--surface-2); }
.profile-loadout span { display: block; color: var(--muted); font-size: 7px; }
.profile-loadout strong { display: block; margin-top: 5px; font-size: 9px; }
@media (max-width: 390px) {
  .top-actions { gap: 4px; }
  .top-actions .round-button { width: 38px; height: 38px; border-radius: 13px; }
  .duel-versus { grid-template-columns: 1fr 42px 1fr; }
  .duel-vs-medal { width: 42px; height: 42px; border-radius: 14px; font-size: 10px; }
  .tactic-grid,.workshop-grid,.gear-grid { grid-template-columns: 1fr; }
  .weapon-card p,.gear-card p { min-height: 0; }
}
.player-pill { cursor: pointer; color: var(--text); }

/* v1.8 nursery, codex, titles and referrals */
.collection-panel { background: radial-gradient(circle at 85% 0%,rgba(180,112,255,.18),transparent 46%),var(--surface); }
.collection-tabs { margin-bottom: 12px; }
.collection-hero { position: relative; padding: 17px; overflow: hidden; border-radius: 28px; border: 1px solid rgba(184,126,255,.24); background: radial-gradient(circle at 88% 0%,rgba(183,119,255,.20),transparent 45%),linear-gradient(145deg,#21162f,var(--surface)); box-shadow: var(--shadow); }
.nursery-hero { display: grid; grid-template-columns: 78px 1fr; gap: 13px; align-items: center; }
.nursery-hero::after { content:""; position:absolute; inset:auto -40px -60px auto; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(82,210,121,.14),transparent 68%); pointer-events:none; }
.nursery-orb { width:78px; height:78px; display:grid; place-items:center; border-radius:27px; background:radial-gradient(circle at 35% 25%,#e8dfb7,#7d5a1c 58%,#2d1f09); font-size:43px; box-shadow:0 12px 34px rgba(0,0,0,.32); }
.nursery-orb.active { animation:nurseryPulse 2.4s ease-in-out infinite; }
@keyframes nurseryPulse { 50% { transform:translateY(-4px) scale(1.035); filter:brightness(1.12); } }
.eyebrow { display:block; margin-bottom:5px; color:#d9bbff; font-size:8px; font-weight:800; letter-spacing:.04em; }
.nursery-hero h2,.invite-hero h2,.codex-summary h2 { margin:0; font-size:16px; }
.nursery-hero p,.invite-hero p,.codex-summary p { margin:7px 0 0; color:var(--muted); font-size:8px; line-height:1.75; }
.nursery-stats { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.nursery-stats span { padding:9px; text-align:center; border-radius:13px; background:rgba(255,255,255,.055); font-size:9px; }
.nursery-hero > .primary-button,.nursery-hero > .secondary-button,.nursery-hero > .hint-text { grid-column:1/-1; }
.hint-text { margin:0!important; padding:9px 11px; border-radius:13px; background:rgba(232,172,70,.08); color:#e9c978!important; }
.rare-grid,.codex-grid,.title-grid,.collection-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.rare-card,.codex-card,.title-card { position:relative; padding:12px; border:1px solid var(--border); border-radius:20px; background:var(--surface); overflow:hidden; }
.rare-card::after,.codex-card::after { content:""; position:absolute; inset:-35px -35px auto auto; width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,.035); }
.rare-icon,.codex-icon,.title-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:17px; background:var(--surface-2); font-size:31px; }
.rare-card h3,.codex-card h3,.title-card h3 { margin:9px 0 4px; font-size:10px; }
.rare-card p,.codex-card span,.title-card p { margin:0; color:var(--muted); font-size:7.5px; line-height:1.55; }
.rare-card strong { display:block; margin-top:8px; color:#e3c76f; font-size:14px; }
.rarity-rare { border-color:rgba(74,145,255,.28); }
.rarity-epic { border-color:rgba(176,95,255,.34); }
.rarity-legendary { border-color:rgba(241,186,65,.42); box-shadow:inset 0 0 0 1px rgba(241,186,65,.07); }
.codex-summary { display:grid; grid-template-columns:1fr 78px; gap:12px; align-items:center; padding:16px; margin-bottom:12px; border:1px solid rgba(77,197,112,.18); border-radius:25px; background:radial-gradient(circle at 10% 0%,rgba(77,197,112,.12),transparent 44%),var(--surface); }
.codex-ring { --value:0; width:72px; height:72px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--success) calc(var(--value)*1%),rgba(255,255,255,.07) 0); position:relative; }
.codex-ring::before { content:""; position:absolute; inset:7px; border-radius:50%; background:var(--surface); }
.codex-ring strong { position:relative; font-size:11px; }
.codex-card { min-height:175px; }
.codex-card p { min-height:47px; margin:8px 0; color:var(--muted); font-size:7.5px; line-height:1.55; }
.codex-card b { font-size:7px; color:#80d99a; }
.codex-card.locked { filter:saturate(.35); opacity:.72; }
.codex-card.locked b { color:var(--muted); }
.title-grid { grid-template-columns:1fr; }
.title-card { display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; }
.title-card.equipped { border-color:rgba(241,188,69,.42); background:radial-gradient(circle at 100% 0%,rgba(241,188,69,.12),transparent 43%),var(--surface); }
.title-card.locked { opacity:.62; }
.title-card p { margin-top:5px; }
.title-card .small-button { min-width:62px; }
.invite-hero { padding:18px; text-align:center; border-radius:28px; border:1px solid rgba(241,186,65,.26); background:radial-gradient(circle at 50% -10%,rgba(241,186,65,.21),transparent 42%),linear-gradient(145deg,#2b2110,var(--surface)); box-shadow:var(--shadow); }
.invite-crown { width:74px; height:74px; margin:0 auto 10px; display:grid; place-items:center; border-radius:25px; background:radial-gradient(circle at 35% 25%,#fff0a5,#b17712 58%,#422b08); font-size:41px; box-shadow:0 10px 30px rgba(0,0,0,.28); }
.invite-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }
.invite-stats div { padding:10px 6px; border-radius:14px; background:rgba(255,255,255,.05); }
.invite-stats span { display:block; color:var(--muted); font-size:7px; }
.invite-stats strong { display:block; margin-top:5px; font-size:12px; }
.invite-link { direction:ltr; padding:10px; overflow:auto; border:1px dashed rgba(241,186,65,.28); border-radius:13px; background:rgba(0,0,0,.18); }
.invite-link code { color:#e9d18a; font-size:7px; white-space:nowrap; }
@media (max-width:390px) {
  .nursery-hero { grid-template-columns:64px 1fr; }
  .nursery-orb { width:64px; height:64px; border-radius:21px; font-size:36px; }
  .rare-grid,.codex-grid { grid-template-columns:1fr; }
  .codex-card { min-height:0; }
  .title-card { grid-template-columns:45px 1fr auto; }
  .title-icon { width:45px; height:45px; border-radius:14px; font-size:27px; }
}

/* v1.9 live events, weekly challenges and clan league */
.event-panel { background: radial-gradient(circle at 85% 0%,rgba(244,174,63,.17),transparent 46%),var(--surface); }
.live-event-hero { position:relative; padding:17px; overflow:hidden; border-radius:28px; border:1px solid rgba(237,187,71,.25); background:radial-gradient(circle at 90% 0%,rgba(237,187,71,.18),transparent 44%),linear-gradient(145deg,#2b2110,var(--surface)); box-shadow:var(--shadow); }
.live-event-hero::after { content:""; position:absolute; width:190px; height:190px; inset:auto -70px -90px auto; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.09),transparent 68%); pointer-events:none; }
.live-event-hero.accent-red { border-color:rgba(238,95,86,.28); background:radial-gradient(circle at 90% 0%,rgba(238,95,86,.20),transparent 44%),linear-gradient(145deg,#301515,var(--surface)); }
.live-event-hero.accent-blue { border-color:rgba(79,151,255,.30); background:radial-gradient(circle at 90% 0%,rgba(79,151,255,.19),transparent 44%),linear-gradient(145deg,#10223a,var(--surface)); }
.live-event-hero.accent-green { border-color:rgba(74,207,112,.28); background:radial-gradient(circle at 90% 0%,rgba(74,207,112,.18),transparent 44%),linear-gradient(145deg,#102b19,var(--surface)); }
.live-event-top { display:grid; grid-template-columns:72px 1fr; gap:13px; align-items:center; position:relative; z-index:1; }
.live-event-emblem { width:72px; height:72px; display:grid; place-items:center; border-radius:24px; background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.28),rgba(255,255,255,.055) 58%,rgba(0,0,0,.18)); font-size:40px; box-shadow:0 12px 30px rgba(0,0,0,.28); }
.live-event-top h2 { margin:0; font-size:16px; }
.live-event-top p { margin:6px 0 0; color:var(--muted); font-size:8px; line-height:1.7; }
.live-event-progress { margin-top:15px; position:relative; z-index:1; }
.progress-label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; color:var(--muted); font-size:8px; }
.progress-label b { color:var(--text); font-size:11px; }
.progress.thick { height:10px; background:rgba(255,255,255,.08); }
.progress.thick span { box-shadow:0 0 18px rgba(80,210,119,.34); }
.live-event-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:12px; position:relative; z-index:1; }
.live-event-meta span { padding:8px 5px; text-align:center; border-radius:12px; background:rgba(255,255,255,.055); color:var(--muted); font-size:7px; }
.live-event-meta b { display:block; margin-top:4px; color:var(--text); font-size:9px; }
.event-tier-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.event-tier-card { padding:11px 8px; border:1px solid var(--border); border-radius:17px; background:var(--surface); text-align:center; }
.event-tier-card.ready { border-color:rgba(75,207,112,.36); background:radial-gradient(circle at 50% 0%,rgba(75,207,112,.10),transparent 52%),var(--surface); }
.event-tier-card.claimed { opacity:.7; }
.event-tier-card strong { display:block; font-size:9px; }
.event-tier-card p { margin:5px 0; color:var(--muted); font-size:7px; }
.event-tier-card small { display:block; min-height:31px; color:#e3ca78; font-size:6.8px; line-height:1.5; }
.event-tier-card .small-button { width:100%; margin-top:8px; }
.weekly-challenge-list { display:grid; gap:9px; }
.weekly-challenge-card { display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.weekly-challenge-card.complete { border-color:rgba(75,207,112,.33); background:radial-gradient(circle at 100% 0%,rgba(75,207,112,.09),transparent 42%),var(--surface); }
.challenge-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:17px; background:var(--surface-2); font-size:30px; }
.challenge-copy h3 { margin:0; font-size:10px; }
.challenge-copy p { margin:4px 0 7px; color:var(--muted); font-size:7.5px; line-height:1.5; }
.challenge-copy small { display:block; margin-top:6px; color:#d9c67c; font-size:7px; }
.weekly-challenge-card .small-button { min-width:68px; }
.clan-league-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid rgba(124,116,255,.24); border-radius:22px; background:radial-gradient(circle at 90% 0%,rgba(124,116,255,.14),transparent 44%),var(--surface); }
.clan-league-card h3 { margin:0; font-size:13px; }
.clan-league-card p { margin:6px 0 0; color:var(--muted); font-size:7.5px; line-height:1.55; }
.league-own { min-width:78px; padding:10px 8px; text-align:center; border-radius:15px; background:rgba(255,255,255,.055); }
.league-own strong { display:block; font-size:10px; }
.league-own span { display:block; margin-top:5px; color:var(--muted); font-size:7px; }
.previous-league-reward { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:11px 12px; border-radius:17px; border:1px dashed rgba(239,190,72,.28); background:rgba(239,190,72,.055); }
.previous-league-reward strong { font-size:9px; }
.previous-league-reward p { margin:4px 0 0; color:var(--muted); font-size:7px; }
@media (max-width:390px) {
  .event-tier-grid { grid-template-columns:1fr; }
  .event-tier-card { display:grid; grid-template-columns:1fr auto; text-align:right; align-items:center; gap:8px; }
  .event-tier-card p,.event-tier-card small { grid-column:1; min-height:0; }
  .event-tier-card .small-button { grid-column:2; grid-row:1/4; width:auto; min-width:82px; }
  .weekly-challenge-card { grid-template-columns:45px 1fr; }
  .challenge-icon { width:45px; height:45px; border-radius:14px; font-size:27px; }
  .weekly-challenge-card .small-button { grid-column:1/-1; width:100%; }
  .clan-league-card { align-items:flex-start; }
}