/* Modern presentation layer. Loaded after app.css so it can modernize every view
   without changing the application's established WoR colour palette. */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --radius-sm:12px;--radius-md:17px;--radius-lg:24px;--radius-xl:28px;
  --surface-glass:rgba(17,34,47,.88);--surface-soft:rgba(113,166,187,.075);
  --hairline:rgba(139,183,202,.11);--focus:rgba(91,207,230,.42);
  --shadow-soft:0 10px 28px rgba(0,0,0,.16);--shadow-float:0 20px 55px rgba(0,0,0,.40)
}
body{font-size:15px;line-height:1.45;letter-spacing:-.006em}
.app{max-width:720px;padding:16px 15px calc(104px + env(safe-area-inset-bottom))}
.top{margin:2px 0 16px;padding:3px 2px 14px;border-bottom-color:var(--hairline)}
.top h1{font-size:clamp(23px,6vw,29px);font-weight:900;letter-spacing:-.045em}
.crest{width:46px;height:46px;border-radius:16px;background:transparent;box-shadow:none}.crest .uiIcon{width:46px;height:46px}
.sectionHead{align-items:center;margin:26px 4px 11px}.sectionHead h2{font-size:19px;font-weight:900;letter-spacing:-.035em}.sectionHead span{font-size:11px}

.tabs{gap:3px;margin:10px 0;padding:4px;border:1px solid var(--hairline);border-radius:18px;background:rgba(8,20,30,.62);box-shadow:inset 0 1px rgba(255,255,255,.02)}
.tab{min-height:45px;border-radius:14px;padding:10px 7px;font-size:14px;font-weight:800}
.tab.active{background:linear-gradient(180deg,rgba(61,151,184,.98),rgba(36,96,121,.98));box-shadow:inset 0 1px rgba(255,255,255,.18),0 5px 16px rgba(14,78,101,.20)}
.select,.search,.timeInput,.diamondBox input{min-height:48px;margin-bottom:10px;padding:12px 15px;border-color:var(--hairline);border-radius:15px;background:rgba(15,32,45,.82);box-shadow:none;outline:none}
.select:focus,.search:focus,.timeInput:focus,.diamondBox input:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(91,207,230,.08)}

.hero,.hubHero,.commandHero,.weeklyHero,.personalHero,.playerProfileHero,.memberProfileHero{border-color:rgba(92,169,198,.20);border-radius:var(--radius-xl);box-shadow:var(--shadow-soft)}
.metric,.row,.rewardRow,.recordCard,.memberCard,.settingsCard,.commandClan,.weeklyClan,.statsFold,.recordKindCard,.recordDateCard,.activityCard,.missingCard,.archiveCard,.luckCard,.newsCard{border-color:var(--hairline);border-radius:var(--radius-md);box-shadow:none;background:linear-gradient(145deg,rgba(22,42,57,.92),rgba(14,29,41,.94))}
.metric{padding:16px;background:var(--surface-soft)}.metricValue{font-size:26px;letter-spacing:-.035em}
.clanMetric,.personalHeroKpis>span,.profitMetric,.commandTotal,.commandClanStat,.problemItem,.periodReset,.matrixTotal,.profitWeekSummary span,.personalCompare span,.insightCompare span,.playerKpis>div{border:0;background:var(--surface-soft)}
.statsFold,.clanAccordion,.seasonAccordion,.manageFold,.matrixSection,.difficultyAccess,.missingPlayerFold{margin:12px 0;border-color:var(--hairline);border-radius:var(--radius-lg);background:var(--surface-glass);box-shadow:var(--shadow-soft);backdrop-filter:blur(12px)}
.statsFoldToggle,.clanAccordion>summary,.seasonAccordion>summary,.manageFold>summary,.matrixSection>summary,.difficultyAccess summary,.missingPlayerFold>summary{min-height:82px;padding:14px 16px}
.statsFoldToggle b,.clanAccordion>summary b,.seasonAccordion>summary b,.manageFold>summary b{font-size:18px;letter-spacing:-.03em}
.statsFoldBody,.clanAccordionBody,.seasonAccordionBody,.manageFoldBody,.difficultyAccessBody,.matrixBody,.missingPlayerBody{border-top-color:var(--hairline);padding:12px 14px 15px}
.activityCard{min-height:84px;padding:12px 15px;border-radius:21px}.activityCardIcon,.activityCardIcon .uiIcon{width:54px;height:54px}.activityCard .activityTitle{font-size:18px;letter-spacing:-.025em}

.btn,.roleAction,.commandActions button,.periodContinue{min-height:47px;border-radius:15px;box-shadow:none;transition:transform .16s ease,filter .16s ease,border-color .16s ease}
.btn.primary,.periodContinue{background:linear-gradient(180deg,#45a5c7,#28728f);box-shadow:0 8px 22px rgba(26,112,143,.22),inset 0 1px rgba(255,255,255,.18)}
.btn:active,.roleAction:active,.commandActions button:active,.periodContinue:active{transform:scale(.985);filter:brightness(1.08)}

.profitBox,.periodCenter,.analyticsNote,.nextNotice,.technicalEntry,.weeklyEntry,.clanChatEntry,.hubEntry,.problemPanel{border-color:var(--hairline);border-radius:var(--radius-lg);box-shadow:none;background:linear-gradient(145deg,rgba(24,51,66,.74),rgba(13,29,41,.88))}
.dailyChart,.profitChart,.diamondChart,.insightChart,.insightChart.modern{border-color:rgba(139,183,202,.07);border-radius:17px;background-color:rgba(5,16,25,.34)}
.chartPlot{border-bottom-color:rgba(139,183,202,.13);background:repeating-linear-gradient(to bottom,rgba(139,183,202,.07) 0 1px,transparent 1px 50%)}
.dayBar{border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#72d8e7,#2781a5);box-shadow:0 0 18px rgba(82,198,222,.18)}
.profitBar,.diamondBar{border-radius:7px 7px 3px 3px}.profitZero{background:rgba(210,231,239,.30)}
.profitWeekNav button,.resourceWeekNav button,.insightWeekNav button{border-color:var(--hairline);border-radius:12px;background:rgba(55,142,174,.12)}
.chartMetricTabs{padding:3px;border:1px solid var(--hairline);border-radius:13px;background:rgba(5,16,25,.30)}
.chartMetricTabs button{min-height:34px;border-radius:10px}.chartMetricTabs button.active{background:linear-gradient(180deg,rgba(66,164,195,.46),rgba(36,108,136,.34))}

.personalHero{padding:17px;background:radial-gradient(circle at 90% 0,rgba(69,166,198,.15),transparent 40%),linear-gradient(145deg,rgba(19,41,55,.96),rgba(7,22,32,.98))}
.personalHeroHead h1,.playerName h1{font-weight:900;letter-spacing:-.045em}.personalHeroKpis{gap:7px;margin-top:15px}.personalHeroKpis>span{padding:11px 5px;border-radius:14px}.personalHeroKpis b{font-size:19px;letter-spacing:-.025em}
.personalBalancedHero{margin-bottom:10px}.personalHeroConclusion{display:flex;align-items:center;min-height:34px;margin:11px 2px 0!important;padding-top:10px;border-top:1px solid var(--hairline);color:#adc5d0!important}
.personalBossGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.personalBossCard{min-width:0;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:9px;padding:13px;border:1px solid var(--hairline);border-radius:19px;background:linear-gradient(145deg,rgba(22,42,57,.92),rgba(12,27,39,.94))}
.personalBossCard>span,.personalBossCard>span .uiIcon{width:50px;height:50px}.personalBossCard div{min-width:0}.personalBossCard small,.personalBossCard b,.personalBossCard em{display:block}.personalBossCard small{overflow:hidden;color:var(--muted);font-size:9px;white-space:nowrap;text-overflow:ellipsis}.personalBossCard b{margin-top:2px;font-size:22px;letter-spacing:-.035em}.personalBossCard em{overflow:hidden;margin-top:2px;color:#91a9b5;font-size:9px;font-style:normal;white-space:nowrap;text-overflow:ellipsis}
.personalTopResources{margin:10px 0;padding:13px 15px;border-radius:19px;background:rgba(17,35,48,.84)}.personalTopHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.personalTopHead b{font-size:14px}.personalTopHead span{color:var(--muted);font-size:9px}.personalTopStrip{display:flex;gap:6px;min-height:38px;margin-top:9px;overflow:hidden}.personalTopStrip i{min-width:0;display:flex;align-items:center;justify-content:center;gap:3px;padding:5px 8px;border-radius:11px;background:var(--surface-soft);font-style:normal}.personalTopStrip .rewardIcon{width:27px;height:27px}.personalTopStrip b{font-size:10px;white-space:nowrap}.personalDetailsButton{margin:10px 0 17px}.personalDetailsStart{scroll-margin-top:12px}
.clanPlayerResult,.playerResourceTable,.playerProfileHero,.playerFold,.playerActivityRows>div{border-color:var(--hairline);box-shadow:none;background:linear-gradient(145deg,rgba(22,42,57,.92),rgba(11,26,38,.94))}
.clanPlayerResult{border-radius:20px}.clanPlayerResult>summary{padding:13px 14px}.playerResultDetails{padding:11px 14px 14px;background:rgba(3,14,22,.22)}
.playerProfileHero{padding:17px 18px}.playerActivityRows>div{border-radius:17px}.playerKpis{gap:7px}.playerKpis>div{padding:11px 4px;border-radius:14px}.playerFold{border-radius:20px}.playerFold>summary{min-height:68px;padding:10px 13px}.playerFoldBody{padding:10px 11px 12px;border-top-color:var(--hairline)}
.difficultyAccessRow,.playerDifficulty{border-color:var(--hairline);background:var(--surface-soft)}
.clanActivityProgress{border-color:var(--hairline);border-radius:20px;background:linear-gradient(145deg,rgba(24,51,66,.66),rgba(12,27,39,.88));box-shadow:none}

.nav{bottom:calc(10px + env(safe-area-inset-bottom));width:min(calc(100% - 22px),694px);gap:2px;padding:6px;border-color:rgba(91,174,204,.25);border-radius:24px;background:rgba(5,17,26,.90);box-shadow:var(--shadow-float),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(24px) saturate(1.25)}
.nav button{min-width:0;min-height:59px;padding:7px 2px 6px;border-radius:18px;font-size:10px;letter-spacing:.01em}
.nav button .uiIcon{display:block;width:34px;height:34px;margin:0 auto 1px;transition:transform .18s ease,filter .18s ease}
.nav button.active{background:linear-gradient(180deg,rgba(60,151,184,.96),rgba(27,79,101,.97));box-shadow:inset 0 1px rgba(255,255,255,.16),0 7px 18px rgba(20,92,118,.24)!important}
.nav button.active .uiIcon{transform:translateY(-1px) scale(1.06)}

@media(max-width:420px){
  .app{padding-left:10px;padding-right:10px}.top{padding-left:5px;padding-right:5px}
  .hero,.hubHero,.commandHero,.weeklyHero,.personalHero,.playerProfileHero{border-radius:23px}.personalBossCard{grid-template-columns:44px minmax(0,1fr);padding:11px 10px}.personalBossCard>span,.personalBossCard>span .uiIcon{width:43px;height:43px}.personalBossCard b{font-size:19px}.personalTopResources{padding:12px}
  .metricGrid{gap:7px}.metric{padding:14px 12px;border-radius:16px}.metricValue{font-size:23px}
  .tabs{border-radius:17px}.tab{min-height:43px;font-size:13px}
  .statsFoldBody,.clanAccordionBody,.seasonAccordionBody,.manageFoldBody,.difficultyAccessBody,.matrixBody,.missingPlayerBody{padding-left:10px;padding-right:10px}
  .nav{width:calc(100% - 16px);bottom:calc(7px + env(safe-area-inset-bottom));padding:5px;border-radius:22px}.nav button{min-height:57px;border-radius:17px}.nav button .uiIcon{width:32px;height:32px}
}