:root{
  --bg:#090b10;
  --bg2:#0d1118;
  --panel:#151b24;
  --panel2:#1b2330;
  --panel3:#222c3a;
  --ink:#f4f1e9;
  --muted:#a9b0bc;
  --muted2:#7d8795;
  --line:rgba(225,235,255,.15);
  --line2:rgba(225,235,255,.08);
  --red:#e52b4a;
  --red-soft:#7e1f33;
  --steel:#8fa8c5;
  --green:#63d79a;
  --amber:#efc96b;
  --top:72px;
  --bottom:30px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
button,input{font:inherit}
button{color:inherit}
::selection{background:var(--red);color:#fff}

.grain{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}
.cursor-light{position:fixed;width:460px;height:460px;pointer-events:none;border-radius:50%;z-index:-1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(223,24,51,.08),transparent 68%);opacity:0}

.topbar{height:var(--top);position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid var(--line);background:#070707}
.brand{display:flex;align-items:center;gap:11px;background:none;border:0;cursor:pointer;font-size:11px;font-weight:1000;letter-spacing:.16em}
.brand-glyph{width:29px;height:29px;display:grid;place-items:center;border:1px solid #444;transform:rotate(45deg);font-family:Georgia,serif;font-size:17px}
.window-nav{display:flex;height:100%;margin-left:auto}
.window-nav button{height:100%;padding:0 18px;border:0;border-left:1px solid transparent;background:none;color:#666;cursor:pointer;font-size:8px;font-weight:1000;letter-spacing:.16em}
.window-nav button:hover{color:#fff;background:#0c0c0c}
.window-nav button.active{color:#fff;background:#0e0e0e;border-left-color:var(--line);border-right:1px solid var(--line)}
.discord-btn{margin-left:18px;border:1px solid #3c3c3c;background:#0c0c0c;color:#fff;text-decoration:none;padding:11px 13px;display:flex;gap:18px;font-size:8px;font-weight:1000;letter-spacing:.14em}
.discord-btn:hover{background:#fff;color:#000}
.mobile-menu{display:none;background:none;border:0;font-size:8px;font-weight:1000;letter-spacing:.15em}

.desktop{position:fixed;top:var(--top);bottom:var(--bottom);left:0;right:0;overflow:hidden}
.app-view{position:absolute;inset:0;padding:14px;opacity:0;visibility:hidden;transform:translateY(10px) scale(.997);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.app-view.active{opacity:1;visibility:visible;transform:none;z-index:2}
.view-frame{height:100%;border:1px solid var(--line);background:#080808;overflow:hidden;position:relative}
.view-bar{height:38px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 13px;background:#0b0b0b}
.view-title,.view-meta{font-size:7px;font-weight:1000;letter-spacing:.17em;color:#666}
.view-title{color:#8b8b8b}
.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-right:8px;box-shadow:0 0 9px var(--red)}
.content-window,.values-window{background:linear-gradient(135deg,#090909,#060606)}

.home-stage{height:calc(100% - 38px);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:clamp(25px,4vw,58px)}
.grid-bg{position:absolute;inset:0;background:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:75px 75px;opacity:.45;mask-image:linear-gradient(to bottom,#000,transparent 100%)}
.red-haze{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.haze-one{width:430px;height:430px;right:7%;top:5%;background:rgba(180,12,36,.16)}
.haze-two{width:250px;height:250px;left:-3%;bottom:0;background:rgba(140,20,55,.1)}
.home-copy{width:100%;position:relative;z-index:2}
.micro,.red-label{font-size:8px;font-weight:1000;letter-spacing:.21em;color:var(--red)}
.hero-word{font-size:clamp(5rem,13vw,12.5rem);line-height:.68;font-weight:1000;letter-spacing:-.075em;margin-top:13px}
.hero-word .outline{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.15);transform:translateY(18%)}
.hero-word .solid{color:#f0eee9}
.home-bottom{margin-top:42px;display:flex;align-items:end;justify-content:space-between;gap:35px}
.home-bottom h1{font-size:clamp(1.45rem,2.5vw,2.45rem);line-height:1.05;letter-spacing:-.045em}
.home-bottom p{color:#747474;font-size:12px;line-height:1.6;margin-top:11px}
.home-actions{display:flex;align-items:center;gap:14px}
.primary,.secondary{min-width:185px;text-decoration:none;border:0;padding:15px 16px;font-size:8px;font-weight:1000;letter-spacing:.14em;cursor:pointer}
.primary{display:flex;justify-content:space-between;gap:25px;background:var(--red);color:#fff}
.primary:hover{background:#f31c3a}
.secondary{background:#0d0d0d;border:1px solid #333;color:#888}
.secondary:hover{color:#fff;border-color:#555}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:35px}
.stat-row>div{padding:15px 0 0;display:flex;flex-direction:column;gap:4px}
.stat-row strong{font-size:14px}
.stat-row span{font-size:7px;color:#555;font-weight:900;letter-spacing:.15em}

.about-layout{height:calc(100% - 38px);display:grid;grid-template-columns:minmax(110px,14vw) 1fr;overflow:hidden}
.giant-index{font-size:clamp(7rem,17vw,18rem);font-weight:1000;letter-spacing:-.09em;line-height:.8;color:#101010;writing-mode:vertical-rl;transform:rotate(180deg);padding:20px 0 0 5px;user-select:none}
.about-main{padding:clamp(25px,4vw,60px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.about-main h2,.owners-heading h2,.war-heading h2,.value-screen-head h2,.market-head h2{font-size:clamp(3rem,6vw,6.4rem);line-height:.9;letter-spacing:-.07em;margin-top:14px}
.two-col-copy{display:grid;grid-template-columns:1fr 1fr;gap:55px;max-width:900px;margin-top:45px}
.two-col-copy p{font-size:14px;color:#8b8b8b;line-height:1.65}
.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:45px;max-width:950px}
.feature-row>div{border:1px solid var(--line);background:#0b0b0b;padding:18px;min-height:125px}
.feature-row span{display:block;color:#444;font-size:7px;font-weight:1000;letter-spacing:.15em}
.feature-row strong{display:block;font-size:17px;margin-top:24px}
.feature-row small{display:block;color:#666;font-size:9px;margin-top:6px}

.owners-layout{height:calc(100% - 38px);padding:clamp(24px,3.3vw,50px);display:grid;grid-template-columns:minmax(220px,30%) 1fr;gap:40px;align-items:center}
.owners-heading h2{font-size:clamp(3.5rem,7vw,7rem)}
.owner-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:min(510px,74vh)}
.owner-card{position:relative;border:1px solid var(--line);background:linear-gradient(145deg,#0d0d0d,#080808);overflow:hidden;padding:20px;display:flex;flex-direction:column;justify-content:space-between}
.owner-card:after{content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(255,255,255,.055);transform:rotate(45deg);right:-90px;top:-90px}
.owner-card:before{content:"";position:absolute;width:330px;height:330px;right:-70px;bottom:-130px;background:radial-gradient(circle,rgba(223,24,51,.12),transparent 68%)}
.owner-top{position:relative;z-index:2;display:flex;justify-content:space-between;color:#5a5a5a;font-size:7px;font-weight:900;letter-spacing:.14em}
.owner-letter{position:absolute;right:12px;bottom:-50px;font-family:Georgia,serif;font-size:270px;font-weight:900;line-height:1;color:rgba(255,255,255,.035)}
.owner-bottom{position:relative;z-index:2}
.owner-bottom h3{font-size:clamp(3.5rem,6vw,6.3rem);line-height:.86;letter-spacing:-.07em}
.owner-bottom p{color:var(--red);font-size:7px;font-weight:1000;letter-spacing:.16em;margin-top:13px}

.war-layout{height:calc(100% - 38px);padding:clamp(20px,2.5vw,38px) clamp(24px,3.3vw,50px);display:flex;flex-direction:column}
.war-heading{display:flex;align-items:end;justify-content:space-between;gap:40px}
.war-heading h2{font-size:clamp(3rem,5.5vw,5.8rem)}
.war-heading>p{max-width:360px;color:#707070;line-height:1.55;font-size:11px;margin-bottom:5px}
.war-table{margin-top:25px;border-top:1px solid var(--line);flex:1;min-height:0}
.team-row{height:calc(100% / 6);min-height:58px;display:grid;grid-template-columns:45px 82px 1fr 120px 85px;align-items:center;border-bottom:1px solid var(--line);transition:.15s}
.team-row:hover{background:#0c0c0c;padding-left:8px}
.team-row>span{font-size:7px;color:#3f3f3f;font-weight:900}
.team-row>b{font-size:clamp(2rem,4.2vw,4.4rem);letter-spacing:-.08em;color:#353535}
.team-row:first-child>b{color:var(--red)}
.team-row small{display:block;color:#515151;font-size:6px;font-weight:900;letter-spacing:.17em;margin-bottom:5px}
.team-row strong{font-size:15px}
.team-row em,.team-row i{font-style:normal;font-size:7px;color:#717171;font-weight:900;letter-spacing:.12em}
.team-row i:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#4cd27e;margin-right:6px}
.war-tags{display:flex;gap:8px;margin-top:10px}
.war-tags span{border:1px solid var(--line);padding:6px 8px;color:#555;font-size:7px;font-weight:900;letter-spacing:.13em}

.values-tabs{display:flex;height:100%;margin-right:-13px}
.values-tabs button{border:0;border-left:1px solid var(--line);background:none;padding:0 16px;color:#555;cursor:pointer;font-size:7px;font-weight:1000;letter-spacing:.14em}
.values-tabs button.active{background:#111;color:#fff}
.value-screen{height:calc(100% - 38px);padding:clamp(18px,2vw,30px);display:none;overflow:hidden}
.value-screen.active{display:flex;flex-direction:column}
.value-screen-head,.market-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex:0 0 auto}
.value-screen-head h2,.market-head h2{font-size:clamp(2.6rem,4.8vw,5.2rem)}
.value-meta{text-align:right}
.value-meta span{display:block;color:#555;font-size:7px;font-weight:900;letter-spacing:.14em}
.value-meta strong{display:block;margin-top:6px;font-size:10px;letter-spacing:.09em}

.trade-shell{margin-top:18px;border:1px solid var(--line);display:grid;grid-template-columns:1fr 155px 1fr;background:#080808;flex:1;min-height:0}
.trade-panel{padding:15px;min-width:0;display:flex;flex-direction:column}
.trade-panel:first-child{border-right:1px solid var(--line)}
.trade-panel:last-child{border-left:1px solid var(--line)}
.trade-title{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px;flex:0 0 auto}
.trade-title span{display:block;color:#5c5c5c;font-size:7px;font-weight:1000;letter-spacing:.14em}
.trade-title strong{display:block;font-size:21px;margin-top:5px}
.trade-title small{font-size:7px;color:#444;font-weight:900;letter-spacing:.12em}
.slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px;flex:1;min-height:0}
.trade-slot{min-height:0;border:1px solid var(--line);background:#0b0b0b;position:relative;overflow:hidden;cursor:pointer}
.trade-slot:hover{border-color:#444}
.trade-slot.empty{display:grid;place-items:center;color:#414141;font-size:7px;font-weight:1000;letter-spacing:.14em}
.slot-fruit-img{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:min(85px,55%);height:min(85px,55%);object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.5))}
.slot-details{position:absolute;left:9px;right:9px;bottom:8px}
.slot-details strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-details span{display:flex;justify-content:space-between;color:#696969;font-size:6px;font-weight:900;margin-top:4px}
.slot-remove{position:absolute;right:5px;top:5px;z-index:3;width:21px;height:21px;border:1px solid var(--line);background:rgba(0,0,0,.6);color:#666;cursor:pointer}
.slot-remove:hover{color:#fff}
.perm-slot{border-color:rgba(223,24,51,.32);background:radial-gradient(circle at 50% 25%,rgba(223,24,51,.10),transparent 55%),#0b0b0b}
.perm-badge,.pick-perm-badge{position:absolute;z-index:4;left:5px;top:5px;background:var(--red);padding:4px 5px;font-size:5px;font-weight:1000;letter-spacing:.13em}

.trade-middle{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px}
.trade-score span{display:block;color:#555;font-size:6px;font-weight:1000;letter-spacing:.16em}
.trade-score strong{display:block;font-size:27px;margin:9px 0 5px}
.trade-score small{font-size:6px;color:#555;font-weight:900}
.trade-score.win strong{color:var(--green)}.trade-score.loss strong{color:#ff5168}.trade-score.fair strong{color:var(--amber)}
.balance-bar{width:100%;height:4px;background:#181818;margin-top:23px}.balance-bar div{height:100%;width:50%;background:var(--red);transition:.2s}
.balance-labels{width:100%;display:flex;justify-content:space-between;color:#3f3f3f;font-size:6px;font-weight:900;margin-top:5px}
.trade-middle button{margin-top:24px;border:0;background:none;color:#555;cursor:pointer;font-size:6px;font-weight:1000;letter-spacing:.13em}
.trade-middle button:hover{color:#fff}
.trade-foot{margin-top:8px;display:flex;justify-content:space-between;color:#4d4d4d;font-size:6px;font-weight:900;letter-spacing:.08em;flex:0 0 auto}
.trade-foot a{color:#707070;text-decoration:none}

.market-screen{padding-bottom:16px}
.market-head{flex:0 0 auto}
.market-head input{width:280px;background:#0b0b0b;border:1px solid var(--line);outline:none;color:#fff;padding:11px 12px;font-size:7px;font-weight:900;letter-spacing:.12em}
.market-grid{margin-top:15px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;overflow-y:auto;padding-right:5px}
.market-grid::-webkit-scrollbar,.fruit-picker::-webkit-scrollbar{width:5px}.market-grid::-webkit-scrollbar-thumb,.fruit-picker::-webkit-scrollbar-thumb{background:#292929}
.market-card{min-height:185px;background:#0a0a0a;border:1px solid var(--line);padding:8px;position:relative;overflow:hidden}
.market-card:hover{border-color:#3a3a3a}
.market-card img{display:block;width:83px;height:83px;object-fit:contain;margin:2px auto 2px;filter:drop-shadow(0 9px 10px rgba(0,0,0,.45))}
.market-card h4{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.market-values-dual{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:7px}
.market-values-dual>div{border:1px solid var(--line);padding:5px 4px}
.market-value span{display:block;color:#555;font-size:5px;font-weight:1000;letter-spacing:.1em}
.market-value strong{font-size:8px}
.perm-market-value{border-color:rgba(223,24,51,.2)!important}.perm-market-value strong{color:#eeb7c0}
.market-demand-row{display:grid;grid-template-columns:auto auto 1fr;gap:5px;align-items:center;margin-top:5px;color:#555;font-size:5px;font-weight:900}
.demand-bars{display:flex;gap:1px;justify-content:flex-end}.demand-bars i{width:5px;height:2px;background:#222}.demand-bars i.on{background:var(--red)}

.bottom-status{height:var(--bottom);position:fixed;left:0;right:0;bottom:0;border-top:1px solid var(--line);background:#070707;display:flex;align-items:center;justify-content:space-between;padding:0 17px;color:#4f4f4f;font-size:6px;font-weight:1000;letter-spacing:.14em}

.modal-bg{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.8);backdrop-filter:blur(11px);display:none;place-items:center;padding:18px}.modal-bg.open{display:grid}
.fruit-modal{width:min(820px,95vw);height:min(650px,86vh);background:#090909;border:1px solid #333;display:flex;flex-direction:column}
.modal-top{padding:17px 18px 12px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}
.modal-top span{font-size:6px;color:var(--red);font-weight:1000;letter-spacing:.15em}.modal-top h3{font-size:27px;letter-spacing:-.04em;margin-top:4px}
.modal-top button{border:0;background:none;color:#666;font-size:24px;cursor:pointer}
.fruit-mode-switch{margin:11px 18px 0;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.fruit-mode-switch button{border:0;background:transparent;color:#5f5f5f;padding:10px;cursor:pointer;font-size:7px;font-weight:1000;letter-spacing:.14em}
.fruit-mode-switch button+button{border-left:1px solid var(--line)}.fruit-mode-switch button.active{background:#eee;color:#000}.fruit-mode-switch button[data-mode="perm"].active{background:var(--red);color:#fff}
.fruit-search{margin:10px 18px;background:#101010;border:1px solid #2b2b2b;color:#fff;padding:10px 11px;outline:none;font-size:7px;font-weight:900;letter-spacing:.11em}
.fruit-picker{padding:0 18px 18px;overflow-y:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pick-card{min-height:145px;position:relative;overflow:hidden;background:#0d0d0d;border:1px solid var(--line);color:#fff;padding:7px;cursor:pointer;text-align:left}
.pick-card:hover{border-color:#555}
.pick-card img{display:block;width:75px;height:75px;object-fit:contain;margin:0 auto 2px}
.pick-card strong{display:block;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-card>span{display:flex;justify-content:space-between;color:#5e5e5e;font-size:5px;font-weight:900;margin-top:4px}

@media(max-width:1000px){
  .window-nav{display:none}.mobile-menu{display:block;margin-left:auto}.discord-btn{margin-left:12px}
  .window-nav.mobile-open{display:flex;position:absolute;top:72px;left:10px;right:10px;height:auto;flex-direction:column;background:#090909;border:1px solid #333}
  .window-nav.mobile-open button{height:42px;border-bottom:1px solid var(--line)}
  .owners-layout{grid-template-columns:1fr;align-content:center}.owners-heading h2{font-size:3rem}
  .war-heading>p{display:none}.market-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:700px){
  :root{--top:62px}.topbar{height:62px;padding:0 13px}.discord-btn{display:none}
  .app-view{padding:7px}.view-bar{height:34px}
  .home-stage{height:calc(100% - 34px);padding:20px}.hero-word{font-size:clamp(4rem,19vw,7rem)}
  .home-bottom{flex-direction:column;align-items:flex-start;margin-top:30px}.home-actions{width:100%;flex-direction:column;align-items:stretch}.primary,.secondary{width:100%}
  .stat-row{grid-template-columns:1fr 1fr}
  .about-layout{height:calc(100% - 34px);display:block;overflow-y:auto}.giant-index{display:none}.about-main{padding:24px;justify-content:flex-start}
  .two-col-copy{grid-template-columns:1fr;gap:16px;margin-top:28px}.feature-row{grid-template-columns:1fr;margin-top:25px}
  .owners-layout{height:calc(100% - 34px);padding:18px;display:flex;flex-direction:column;align-items:stretch;overflow-y:auto}.owner-grid{height:auto;grid-template-columns:1fr}.owner-card{min-height:280px}
  .war-layout{height:calc(100% - 34px);padding:17px;overflow-y:auto}.war-heading h2{font-size:3.2rem}.team-row{height:75px;grid-template-columns:30px 50px 1fr 62px}.team-row i{display:none}
  .value-screen{height:calc(100% - 34px);overflow-y:auto}.trade-shell{grid-template-columns:1fr;flex:none}.trade-panel:first-child{border-right:0;border-bottom:1px solid var(--line)}.trade-panel:last-child{border-left:0;border-top:1px solid var(--line)}.slot-grid{height:320px}.trade-middle{min-height:130px}
  .market-head{align-items:flex-start;flex-direction:column}.market-head input{width:100%}.market-grid{grid-template-columns:repeat(2,1fr);overflow:visible}
  .fruit-picker{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}


/* V7 — high-contrast window treatment */
body{
  background:
    radial-gradient(circle at 14% 10%, rgba(72,95,132,.22), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(117,31,53,.18), transparent 24%),
    linear-gradient(145deg,var(--bg),#07090d 55%,#0b0f16);
}

.topbar{
  background:linear-gradient(180deg,#111722,#0c1119);
  border-bottom-color:rgba(209,223,242,.18);
  box-shadow:0 10px 34px rgba(0,0,0,.28);
}

.brand{
  color:var(--ink);
}

.brand-glyph{
  border-color:rgba(181,203,232,.34);
  background:linear-gradient(145deg,#202a38,#111720);
  box-shadow:inset 0 0 20px rgba(150,179,217,.06);
}

.window-nav button{
  color:#8c98a7;
}

.window-nav button:hover{
  color:#fff;
  background:#18202b;
}

.window-nav button.active{
  color:#fff;
  background:linear-gradient(180deg,#202b39,#171f2a);
  border-left-color:rgba(210,225,244,.2);
  border-right-color:rgba(210,225,244,.2);
  box-shadow:inset 0 -2px 0 var(--red);
}

.discord-btn{
  background:linear-gradient(180deg,#202a36,#161d27);
  border-color:rgba(210,225,244,.22);
  color:#fff;
}

.discord-btn:hover{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}

.desktop{
  background:
    radial-gradient(circle at 50% 0%,rgba(96,121,156,.08),transparent 34%),
    transparent;
}

.app-view{
  padding:18px;
}

.view-frame{
  border-color:rgba(214,227,246,.18);
  background:
    linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0)),
    linear-gradient(145deg,#171e28,#10161e);
  box-shadow:
    0 24px 65px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.018) inset;
  border-radius:10px;
}

.view-bar{
  background:
    linear-gradient(180deg,#202936,#171e28);
  border-bottom-color:rgba(214,227,246,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.view-title{
  color:#c0cad7;
}

.view-meta{
  color:#788696;
}

.home-stage{
  background:
    radial-gradient(circle at 75% 20%,rgba(120,148,183,.09),transparent 25%),
    radial-gradient(circle at 15% 80%,rgba(229,43,74,.07),transparent 22%),
    linear-gradient(145deg,#141b24,#0d1219);
}

.grid-bg{
  opacity:.18;
}

.hero-word .outline{
  -webkit-text-stroke:1px rgba(219,230,244,.2);
}

.hero-word .solid{
  color:#f3f0e8;
  text-shadow:0 12px 40px rgba(0,0,0,.28);
}

.home-bottom p,
.two-col-copy p,
.war-heading>p{
  color:#a8b0bb;
}

.secondary{
  background:linear-gradient(180deg,#1d2733,#151c25);
  border-color:rgba(210,225,244,.18);
  color:#bec8d4;
}

.secondary:hover{
  color:#fff;
  border-color:rgba(210,225,244,.34);
  background:#222e3d;
}

.stat-row{
  border-top-color:rgba(214,227,246,.15);
}

.stat-row span{
  color:#7f8b9b;
}

.content-window,
.values-window{
  background:
    radial-gradient(circle at 90% 10%,rgba(100,126,163,.08),transparent 26%),
    linear-gradient(145deg,#171f2a,#111821 65%,#0f151d);
}

.giant-index{
  color:#202a37;
}

.feature-row>div,
.owner-card,
.trade-panel,
.market-card{
  background:
    linear-gradient(160deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
    linear-gradient(145deg,#1d2733,#151d27);
  border-color:rgba(214,227,246,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.feature-row>div:hover,
.owner-card:hover,
.market-card:hover{
  border-color:rgba(214,227,246,.3);
}

.feature-row span,
.owner-top,
.team-row>span,
.team-row small,
.trade-title span,
.trade-title small,
.market-value span,
.market-demand-row{
  color:#7f8b99;
}

.feature-row small,
.owner-bottom p{
  color:#9ba6b3;
}

.owner-card:before{
  background:radial-gradient(circle,rgba(229,43,74,.14),transparent 68%);
}

.owner-letter{
  color:rgba(213,226,244,.055);
}

.war-table{
  border-top-color:rgba(214,227,246,.16);
}

.team-row{
  border-bottom-color:rgba(214,227,246,.12);
}

.team-row:hover{
  background:linear-gradient(90deg,rgba(143,168,197,.07),transparent);
}

.team-row>b{
  color:#44566c;
}

.team-row:first-child>b{
  color:var(--red);
  text-shadow:0 0 22px rgba(229,43,74,.18);
}

.team-row em,
.team-row i{
  color:#9aa6b4;
}

.war-tags span{
  background:#151d27;
  border-color:rgba(214,227,246,.14);
  color:#929daa;
}

.values-tabs button{
  color:#8290a0;
}

.values-tabs button.active{
  background:linear-gradient(180deg,#263343,#1b2531);
  color:#fff;
  box-shadow:inset 0 -2px 0 var(--red);
}

.trade-shell{
  background:#101720;
  border-color:rgba(214,227,246,.17);
  box-shadow:0 18px 48px rgba(0,0,0,.2);
}

.trade-panel:first-child,
.trade-panel:last-child{
  border-color:rgba(214,227,246,.12);
}

.trade-title{
  border-bottom-color:rgba(214,227,246,.13);
}

.trade-slot{
  background:
    radial-gradient(circle at 50% 25%,rgba(143,168,197,.05),transparent 55%),
    #161f2a;
  border-color:rgba(214,227,246,.14);
}

.trade-slot:hover{
  border-color:rgba(214,227,246,.3);
  background:#1b2633;
}

.trade-slot.empty{
  color:#758292;
}

.slot-details span{
  color:#9ba7b5;
}

.slot-remove{
  background:rgba(11,15,21,.78);
  border-color:rgba(214,227,246,.16);
  color:#8d99a7;
}

.perm-slot{
  background:
    radial-gradient(circle at 50% 25%,rgba(229,43,74,.12),transparent 58%),
    linear-gradient(145deg,#1b2029,#151b23);
  border-color:rgba(229,43,74,.34);
}

.balance-bar{
  background:#26313e;
  border:1px solid rgba(214,227,246,.08);
}

.trade-middle button{
  color:#8793a2;
}

.trade-foot{
  color:#7d8997;
}

.trade-foot a{
  color:#a9b3c0;
}

.market-head input,
.fruit-search{
  background:#111821;
  border-color:rgba(214,227,246,.18);
  color:#fff;
}

.market-head input:focus,
.fruit-search:focus{
  border-color:#6f839b;
  box-shadow:0 0 0 2px rgba(143,168,197,.08);
}

.market-card{
  min-height:190px;
}

.market-card h4{
  color:#f1eee8;
}

.market-values-dual>div{
  background:rgba(8,12,18,.28);
  border-color:rgba(214,227,246,.11);
}

.perm-market-value{
  border-color:rgba(229,43,74,.28)!important;
  background:rgba(126,31,51,.12)!important;
}

.perm-market-value strong{
  color:#ffc5ce;
}

.bottom-status{
  background:linear-gradient(180deg,#0d1218,#090d12);
  border-top-color:rgba(214,227,246,.15);
  color:#738091;
}

.modal-bg{
  background:rgba(5,8,12,.84);
}

.fruit-modal{
  background:linear-gradient(145deg,#18212b,#111821);
  border-color:rgba(214,227,246,.22);
  box-shadow:0 40px 120px rgba(0,0,0,.52);
  border-radius:10px;
  overflow:hidden;
}

.modal-top{
  background:linear-gradient(180deg,#222d3a,#19222d);
  border-bottom-color:rgba(214,227,246,.14);
}

.fruit-mode-switch{
  border-color:rgba(214,227,246,.15);
  background:#111820;
}

.fruit-mode-switch button{
  color:#8996a5;
}

.fruit-mode-switch button.active{
  background:#dfe7f0;
  color:#0b1016;
}

.pick-card{
  background:linear-gradient(145deg,#1a2430,#131b24);
  border-color:rgba(214,227,246,.14);
}

.pick-card:hover{
  border-color:rgba(214,227,246,.34);
  background:#202c3a;
}

.pick-card>span{
  color:#97a3b2;
}

.red-label,
.micro{
  color:#ff4864;
}

@media(max-width:700px){
  .app-view{padding:8px}
  .view-frame{border-radius:7px}
}


/* V8 — value readability + QoL */
.trade-toolbar{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex:0 0 auto;
}
.trade-toolbar-left,.trade-toolbar-right{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.trade-toolbar button{
  border:1px solid rgba(214,227,246,.14);
  background:linear-gradient(180deg,#202a36,#171f29);
  color:#aeb9c6;
  padding:9px 11px;
  cursor:pointer;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.13em;
}
.trade-toolbar button:hover{
  color:#fff;
  border-color:rgba(214,227,246,.3);
  background:#263342;
}
.trade-toolbar .accent-tool{
  color:#fff;
  border-color:rgba(229,43,74,.35);
  background:linear-gradient(180deg,#8f2035,#671827);
}
.trade-toolbar .accent-tool:hover{
  background:var(--red);
}

/* Bigger values */
.trade-title strong{
  font-size:31px;
  line-height:1;
  letter-spacing:-.05em;
  color:#fff;
}
.slot-details strong{
  font-size:12px;
}
.slot-details span{
  margin-top:6px;
  font-size:7px;
}
.slot-details .slot-value{
  color:#fff;
  font-size:11px;
  letter-spacing:-.02em;
}
.trade-score strong{
  font-size:34px;
}
.trade-score small{
  font-size:7px;
}

/* Market controls */
.market-controls{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.market-head input{
  width:220px;
}
.market-controls select{
  background:#111821;
  border:1px solid rgba(214,227,246,.18);
  color:#bdc7d3;
  padding:11px 28px 11px 10px;
  outline:none;
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
  cursor:pointer;
}
.market-mode{
  display:flex;
  border:1px solid rgba(214,227,246,.16);
  background:#111821;
}
.market-mode button{
  border:0;
  background:transparent;
  color:#748091;
  padding:10px 9px;
  cursor:pointer;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.11em;
}
.market-mode button+button{
  border-left:1px solid rgba(214,227,246,.12);
}
.market-mode button.active{
  background:#273444;
  color:#fff;
  box-shadow:inset 0 -2px 0 var(--red);
}
.market-summary{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#6f7c8d;
  font-size:6px;
  font-weight:900;
  letter-spacing:.12em;
}
.market-summary b{
  color:#d8e0e9;
}

.market-grid{
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.market-card{
  min-height:225px;
  padding:10px;
}
.market-card img{
  width:96px;
  height:96px;
  margin:3px auto 4px;
}
.market-card h4{
  font-size:11px;
}
.market-values-dual{
  gap:6px;
  margin-top:9px;
}
.market-values-dual>div{
  padding:7px 6px;
}
.market-value span{
  font-size:5px;
  margin-bottom:4px;
}
.market-value strong{
  font-size:14px;
  letter-spacing:-.03em;
}
.market-card.single-mode .market-values-dual{
  grid-template-columns:1fr;
}
.market-card.single-mode .market-value strong{
  font-size:17px;
}
.market-demand-row{
  margin-top:7px;
  font-size:6px;
}
.market-demand-row>strong{
  color:#c1cad4;
  font-size:7px;
}

/* Picker values larger too */
.pick-card strong{
  font-size:9px;
}
.pick-card>span{
  font-size:6px;
}
.pick-card .picker-value{
  color:#fff;
  font-size:9px;
}

/* Toasts */
.toast-stack{
  position:fixed;
  right:18px;
  bottom:46px;
  z-index:700;
  display:flex;
  flex-direction:column;
  gap:7px;
  pointer-events:none;
}
.toast{
  min-width:170px;
  border:1px solid rgba(214,227,246,.18);
  background:rgba(22,30,40,.96);
  color:#dce4ed;
  padding:11px 13px;
  box-shadow:0 18px 45px rgba(0,0,0,.32);
  transform:translateX(15px);
  opacity:0;
  transition:.2s;
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
}
.toast.show{
  transform:none;
  opacity:1;
}
.toast.good{
  border-color:rgba(99,215,154,.32);
  box-shadow:inset 3px 0 0 #63d79a,0 18px 45px rgba(0,0,0,.32);
}
.toast.bad{
  border-color:rgba(229,43,74,.35);
  box-shadow:inset 3px 0 0 var(--red),0 18px 45px rgba(0,0,0,.32);
}

@media(max-width:1100px){
  .market-grid{grid-template-columns:repeat(4,1fr)}
  .market-controls{justify-content:flex-start}
}
@media(max-width:700px){
  .trade-toolbar{flex-direction:column}
  .trade-toolbar-left,.trade-toolbar-right{width:100%}
  .trade-toolbar button{flex:1}
  .market-controls{width:100%;align-items:stretch}
  .market-head input,.market-controls select{width:100%}
  .market-mode{width:100%}
  .market-mode button{flex:1}
  .market-summary{flex-direction:column;gap:5px}
  .market-grid{grid-template-columns:repeat(2,1fr)}
  .market-card{min-height:235px}
  .market-value strong{font-size:13px}
  .toast-stack{left:12px;right:12px;bottom:42px}
  .toast{width:100%}
}


/* V9 — full-site features + global QoL */
.command-btn{
  margin-left:10px;
  border:1px solid rgba(214,227,246,.14);
  background:linear-gradient(180deg,#202a36,#171f29);
  color:#8f9cac;
  padding:10px 11px;
  cursor:pointer;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.13em;
}
.command-btn:hover{
  color:#fff;
  border-color:rgba(214,227,246,.3);
}

.home-dock{
  margin-top:17px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}
.dock-card{
  min-width:0;
  position:relative;
  border:1px solid rgba(214,227,246,.12);
  background:linear-gradient(145deg,#18212c,#121922);
  color:#fff;
  padding:11px 12px;
  cursor:pointer;
  text-align:left;
  transition:.16s;
}
.dock-card:hover{
  transform:translateY(-2px);
  border-color:rgba(214,227,246,.27);
  background:#1d2835;
}
.dock-card>span{
  display:block;
  color:#59697d;
  font-size:5px;
  font-weight:1000;
  letter-spacing:.15em;
}
.dock-card strong{
  display:block;
  margin-top:9px;
  font-size:9px;
  letter-spacing:.02em;
}
.dock-card small{
  display:block;
  color:#7d8997;
  margin-top:4px;
  font-size:6px;
}
.dock-card>b{
  position:absolute;
  right:10px;
  top:10px;
  color:#59697d;
  font-size:9px;
}

/* Events */
.events-layout{
  height:calc(100% - 38px);
  padding:clamp(22px,3vw,44px);
  display:flex;
  flex-direction:column;
  min-height:0;
}
.events-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  flex:0 0 auto;
}
.events-head h2,
.join-left h2{
  font-size:clamp(3rem,6vw,6.2rem);
  line-height:.9;
  letter-spacing:-.07em;
  margin-top:13px;
}
.events-head>div>p:last-child{
  max-width:620px;
  color:#9aa5b2;
  font-size:11px;
  line-height:1.55;
  margin-top:13px;
}
.events-discord{
  flex:0 0 auto;
  background:var(--red);
  color:#fff;
  text-decoration:none;
  padding:14px 15px;
  min-width:180px;
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.13em;
}
.event-grid{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  flex:1;
  min-height:0;
}
.event-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(214,227,246,.14);
  background:
    radial-gradient(circle at 80% 10%,rgba(130,160,195,.07),transparent 30%),
    linear-gradient(145deg,#1b2531,#131b24);
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.event-card:after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border:1px solid rgba(214,227,246,.05);
  transform:rotate(45deg);
  right:-80px;
  top:-80px;
}
.event-icon{
  position:absolute;
  top:18px;
  left:18px;
  font-size:clamp(2.2rem,4.5vw,4.8rem);
  font-weight:1000;
  letter-spacing:-.08em;
  color:rgba(208,222,240,.065);
}
.event-card-top{
  display:flex;
  justify-content:space-between;
  color:#6f7c8c;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.15em;
  position:relative;
  z-index:2;
}
.event-card h3{
  font-size:clamp(1.35rem,2.5vw,2.5rem);
  letter-spacing:-.05em;
  margin-top:26px;
  position:relative;
  z-index:2;
}
.event-card p{
  color:#8f9aa8;
  font-size:9px;
  line-height:1.55;
  max-width:360px;
  margin-top:8px;
  position:relative;
  z-index:2;
}
.event-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:15px;
  position:relative;
  z-index:2;
}
.event-tags span{
  border:1px solid rgba(214,227,246,.11);
  background:rgba(8,12,18,.25);
  padding:5px 6px;
  color:#778596;
  font-size:5px;
  font-weight:1000;
  letter-spacing:.12em;
}
.event-footer{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  align-items:center;
  gap:10px;
  margin-top:10px;
  flex:0 0 auto;
}
.event-footer>div{
  border:1px solid rgba(214,227,246,.11);
  background:#111821;
  padding:10px 12px;
}
.event-footer span{
  display:block;
  color:#667485;
  font-size:5px;
  font-weight:1000;
  letter-spacing:.13em;
}
.event-footer strong{
  display:block;
  margin-top:4px;
  font-size:8px;
}
.event-footer button{
  height:100%;
  border:1px solid rgba(214,227,246,.16);
  background:#18222d;
  color:#aab5c3;
  padding:0 14px;
  cursor:pointer;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.13em;
}
.event-footer button:hover{
  background:#243140;
  color:#fff;
}

/* Join */
.join-layout{
  height:calc(100% - 38px);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:14px;
  padding:clamp(22px,3vw,44px);
  min-height:0;
}
.join-left{
  border:1px solid rgba(214,227,246,.14);
  background:
    radial-gradient(circle at 75% 15%,rgba(229,43,74,.1),transparent 26%),
    linear-gradient(145deg,#1b2531,#131a23);
  padding:clamp(24px,3.5vw,50px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.join-lead{
  max-width:530px;
  color:#9aa5b2;
  font-size:11px;
  line-height:1.6;
  margin-top:20px;
}
.join-actions{
  display:flex;
  gap:8px;
  margin-top:28px;
}
.join-primary,
.join-actions button{
  min-width:160px;
  padding:14px 15px;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.13em;
}
.join-primary{
  color:#fff;
  background:var(--red);
  text-decoration:none;
  display:flex;
  justify-content:space-between;
  gap:25px;
}
.join-actions button{
  border:1px solid rgba(214,227,246,.16);
  background:#18222d;
  color:#aab5c3;
  cursor:pointer;
}
.join-actions button:hover{
  color:#fff;
  background:#243140;
}
.invite-box{
  margin-top:15px;
  border:1px solid rgba(214,227,246,.13);
  background:rgba(7,11,16,.28);
  padding:12px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
}
.invite-box span{
  color:#637184;
  font-size:5px;
  font-weight:1000;
  letter-spacing:.13em;
}
.invite-box strong{
  font-size:9px;
  color:#d8e0e9;
}
.invite-box button{
  border:0;
  background:none;
  color:#8f9ba9;
  cursor:pointer;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.12em;
}
.join-right{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  min-height:0;
}
.join-card{
  border:1px solid rgba(214,227,246,.13);
  background:linear-gradient(145deg,#19232e,#121922);
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.join-card>span{
  margin-bottom:auto;
  color:#566679;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.14em;
}
.join-card h3{
  font-size:clamp(1.25rem,2.3vw,2.3rem);
  letter-spacing:-.05em;
}
.join-card p{
  color:#8793a2;
  font-size:8px;
  line-height:1.55;
  margin-top:7px;
}

/* Command palette */
.command-overlay{
  position:fixed;
  inset:0;
  z-index:800;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding-top:min(15vh,130px);
  background:rgba(4,7,11,.74);
  backdrop-filter:blur(12px);
}
.command-overlay.open{display:flex}
.command-palette{
  width:min(620px,calc(100% - 28px));
  border:1px solid rgba(214,227,246,.22);
  background:linear-gradient(145deg,#18222d,#111821);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
  border-radius:9px;
  overflow:hidden;
}
.command-search-wrap{
  height:58px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:0 15px;
  border-bottom:1px solid rgba(214,227,246,.13);
}
.command-search-wrap>span{
  color:var(--red);
  font-size:17px;
}
.command-search-wrap input{
  width:100%;
  border:0;
  outline:none;
  background:none;
  color:#fff;
  font-size:12px;
}
.command-search-wrap kbd{
  border:1px solid rgba(214,227,246,.14);
  background:#0d131a;
  color:#768395;
  padding:5px 6px;
  font-size:6px;
}
.command-results{
  padding:7px;
  max-height:390px;
  overflow-y:auto;
}
.command-item{
  width:100%;
  border:0;
  background:transparent;
  color:#aab4c1;
  min-height:48px;
  padding:0 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  cursor:pointer;
}
.command-item.selected,
.command-item:hover{
  background:#222e3c;
  color:#fff;
}
.command-item span{
  display:flex;
  align-items:center;
  gap:10px;
}
.command-item strong{
  font-size:8px;
  letter-spacing:.02em;
}
.command-item small{
  color:#657385;
  font-size:6px;
  font-weight:900;
  letter-spacing:.11em;
}
.command-item>b{
  color:#58677a;
  font-size:9px;
}
.command-empty{
  padding:30px;
  text-align:center;
  color:#687586;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.15em;
}
.command-help{
  border-top:1px solid rgba(214,227,246,.11);
  min-height:34px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 13px;
  color:#586779;
  font-size:5px;
  font-weight:1000;
  letter-spacing:.12em;
}

.status-shortcuts b{
  color:#9aa6b5;
}

@media(max-width:1180px){
  .window-nav button{padding-left:11px;padding-right:11px}
  .command-btn{display:none}
}
@media(max-width:1000px){
  .home-dock{grid-template-columns:1fr 1fr}
  .event-grid{grid-template-columns:1fr 1fr}
  .event-card:last-child{grid-column:1 / -1}
  .join-layout{grid-template-columns:1fr}
  .join-left{min-height:280px}
  .join-right{min-height:320px}
}
@media(max-width:700px){
  .home-stage{overflow-y:auto}
  .home-dock{grid-template-columns:1fr 1fr;padding-bottom:10px}
  .events-layout,.join-layout{overflow-y:auto}
  .events-head{align-items:flex-start;flex-direction:column}
  .events-discord{width:100%}
  .event-grid{grid-template-columns:1fr;flex:none}
  .event-card{min-height:250px}
  .event-card:last-child{grid-column:auto}
  .event-footer{grid-template-columns:1fr}
  .event-footer button{min-height:42px}
  .join-right{grid-template-columns:1fr}
  .join-card{min-height:180px}
  .join-actions{flex-direction:column}
  .join-primary,.join-actions button{width:100%}
  .invite-box{grid-template-columns:1fr auto}
  .invite-box span{grid-column:1 / -1}
  .status-shortcuts{display:none}
}


/* =========================================================
   V10 — CINEMATIC POLISH
   ========================================================= */

body{
  --ease-out:cubic-bezier(.16,1,.3,1);
}

body.intro-active{
  pointer-events:none;
}

.view-frame{
  transition:
    transform .34s var(--ease-out),
    opacity .28s ease,
    filter .34s ease,
    box-shadow .3s ease;
}

.app-view{
  transition:
    opacity .32s ease,
    transform .38s var(--ease-out),
    filter .3s ease,
    visibility .32s;
  transform-origin:50% 50%;
}

.app-view.view-exit-left{
  opacity:0!important;
  transform:translateX(-34px) scale(.986)!important;
  filter:blur(4px)!important;
  visibility:visible!important;
}
.app-view.view-exit-right{
  opacity:0!important;
  transform:translateX(34px) scale(.986)!important;
  filter:blur(4px)!important;
  visibility:visible!important;
}
.app-view.view-prep-right{
  transform:translateX(36px) scale(.988)!important;
}
.app-view.view-prep-left{
  transform:translateX(-36px) scale(.988)!important;
}
.app-view.active.view-enter-right{
  animation:viewEnterRight .42s var(--ease-out) both;
}
.app-view.active.view-enter-left{
  animation:viewEnterLeft .42s var(--ease-out) both;
}
@keyframes viewEnterRight{
  from{opacity:0;transform:translateX(38px) scale(.988);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes viewEnterLeft{
  from{opacity:0;transform:translateX(-38px) scale(.988);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}

.window-transition{
  position:fixed;
  z-index:650;
  left:0;
  right:0;
  top:var(--top);
  bottom:var(--bottom);
  pointer-events:none;
  opacity:0;
  overflow:hidden;
}
.window-transition:before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:28%;
  background:
    linear-gradient(90deg,transparent,rgba(143,168,197,.10),rgba(229,43,74,.12),transparent);
  filter:blur(18px);
  opacity:0;
}
.window-transition.forward:before{left:-30%}
.window-transition.backward:before{right:-30%}
.window-transition.active{
  opacity:1;
}
.window-transition.forward.active:before{
  animation:screenSweepForward .42s ease-out;
}
.window-transition.backward.active:before{
  animation:screenSweepBackward .42s ease-out;
}
.transition-line{
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--red),#a6bed8,transparent);
  opacity:0;
  box-shadow:0 0 22px rgba(229,43,74,.45);
}
.forward .transition-line{left:-1px}
.backward .transition-line{right:-1px}
.forward.active .transition-line{animation:lineForward .36s ease-out}
.backward.active .transition-line{animation:lineBackward .36s ease-out}
.transition-label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:rgba(224,233,243,.16);
  font-size:clamp(2rem,6vw,7rem);
  font-weight:1000;
  letter-spacing:.18em;
  opacity:0;
  white-space:nowrap;
}
.window-transition.active .transition-label{
  animation:transitionLabel .34s ease-out;
}
@keyframes screenSweepForward{0%{left:-30%;opacity:0}30%{opacity:1}100%{left:105%;opacity:0}}
@keyframes screenSweepBackward{0%{right:-30%;opacity:0}30%{opacity:1}100%{right:105%;opacity:0}}
@keyframes lineForward{0%{left:0;opacity:0}18%{opacity:1}100%{left:100%;opacity:0}}
@keyframes lineBackward{0%{right:0;opacity:0}18%{opacity:1}100%{right:100%;opacity:0}}
@keyframes transitionLabel{0%{opacity:0;letter-spacing:.32em}40%{opacity:.8}100%{opacity:0;letter-spacing:.12em}}

/* Home animated GIF + cinematic readability layers */
.home-stage{
  --px:50%;
  --py:50%;
  isolation:isolate;
  background:#0a0e14;
}
.home-gif{
  position:absolute;
  inset:-3%;
  z-index:-5;
  background-image:url("assets/home-requested.gif");
  background-size:cover;
  background-position:var(--px) var(--py);
  filter:saturate(.88) contrast(1.12) brightness(.78);
  transform:scale(1.045);
  transition:background-position .22s ease-out;
}
.home-cinematic-overlay{
  position:absolute;
  inset:0;
  z-index:-4;
  background:
    linear-gradient(90deg,rgba(5,8,12,.88) 0%,rgba(5,8,12,.60) 42%,rgba(7,9,14,.38) 70%,rgba(6,8,12,.60) 100%),
    linear-gradient(180deg,rgba(4,7,11,.18),rgba(4,7,11,.38) 72%,rgba(4,7,11,.86));
}
.home-vignette{
  position:absolute;
  inset:0;
  z-index:-3;
  box-shadow:
    inset 0 0 150px 45px rgba(0,0,0,.55),
    inset 0 -120px 120px -80px rgba(0,0,0,.8);
  pointer-events:none;
}
.scanlines{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.07;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.13) 0px,
    rgba(255,255,255,.13) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode:soft-light;
}

.floating-ash{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.floating-ash i{
  position:absolute;
  left:var(--x);
  bottom:-8px;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:rgba(240,125,139,var(--alpha));
  box-shadow:0 0 8px rgba(229,43,74,.22);
  animation:ashFloat var(--dur) linear var(--delay) infinite;
}
@keyframes ashFloat{
  0%{transform:translate3d(0,10px,0);opacity:0}
  10%{opacity:1}
  70%{opacity:.75}
  100%{transform:translate3d(var(--drift),-108vh,0);opacity:0}
}

.hero-word{
  transform:translate(var(--mx,0px),var(--my,0px));
  transition:transform .22s ease-out;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.42));
}
.hero-word .solid{
  position:relative;
  text-shadow:
    0 2px 0 rgba(255,255,255,.02),
    0 22px 60px rgba(0,0,0,.34);
}
.hero-word .solid:before,
.hero-word .solid:after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}
.home-stage:hover .hero-word .solid:before{
  color:rgba(229,43,74,.28);
  transform:translate(2px,0);
  clip-path:inset(14% 0 69% 0);
  animation:microGlitch 4.8s steps(1,end) infinite;
}
.home-stage:hover .hero-word .solid:after{
  color:rgba(143,168,197,.23);
  transform:translate(-2px,0);
  clip-path:inset(63% 0 14% 0);
  animation:microGlitch 5.4s .6s steps(1,end) infinite reverse;
}
@keyframes microGlitch{
  0%,92%,100%{opacity:0;transform:translate(0)}
  93%{opacity:1;transform:translate(2px,-1px)}
  94%{opacity:1;transform:translate(-1px,1px)}
  95%{opacity:0;transform:translate(0)}
}

.home-copy{
  text-shadow:0 2px 20px rgba(0,0,0,.18);
}
.home-bottom h1{
  text-shadow:0 8px 28px rgba(0,0,0,.34);
}
.home-bottom p{
  color:#b3bdc8;
}

.home-dock{
  grid-template-columns:repeat(3,1fr)!important;
}
.dock-card{
  backdrop-filter:blur(10px);
  background:
    linear-gradient(145deg,rgba(31,43,57,.86),rgba(17,24,33,.86));
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.dock-card:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--red),#9bb3cd);
  transition:width .28s var(--ease-out);
}
.dock-card:hover:after{width:100%}

/* Elevated cards across the rest of the site */
.feature-row>div,
.owner-card,
.join-card,
.market-card,
.trade-slot,
.pick-card{
  transition:
    transform .22s var(--ease-out),
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}
.feature-row>div:hover,
.owner-card:hover,
.join-card:hover,
.market-card:hover,
.pick-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}
.owner-card:hover{
  border-color:rgba(229,43,74,.32);
}
.owner-card:hover .owner-letter{
  color:rgba(229,43,74,.075);
}
.owner-letter{
  transition:color .28s ease,transform .3s var(--ease-out);
}
.owner-card:hover .owner-letter{
  transform:translateY(-4px) scale(1.015);
}
.team-row{
  position:relative;
  overflow:hidden;
}
.team-row:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--red),transparent);
  transform:scaleY(0);
  transition:transform .22s ease;
}
.team-row:hover:before{transform:scaleY(1)}
.team-row:hover>b{
  transform:translateX(3px);
}
.team-row>b{
  transition:transform .22s var(--ease-out),color .22s ease;
}

/* Buttons feel more tactile */
.primary,.red-button,.join-primary,.discord-btn,.nav-discord,
.secondary,.trade-toolbar button,.command-btn{
  position:relative;
  overflow:hidden;
}
.primary:before,.join-primary:before,.discord-btn:before{
  content:"";
  position:absolute;
  top:-80%;
  left:-35%;
  width:24%;
  height:260%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  transform:rotate(16deg);
  transition:left .52s ease;
}
.primary:hover:before,.join-primary:hover:before,.discord-btn:hover:before{
  left:120%;
}

/* Better focus visibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:2px solid rgba(229,43,74,.82);
  outline-offset:2px;
}

/* Intro */
.intro-screen{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(91,113,141,.13),transparent 28%),
    #070a0f;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s;
}
.intro-screen.show{
  opacity:1;
  visibility:visible;
}
.intro-screen.finish .intro-mark{
  transform:scale(.985);
  opacity:0;
}
.intro-mark{
  width:min(340px,80vw);
  display:flex;
  align-items:center;
  flex-direction:column;
  transition:.32s var(--ease-out);
}
.intro-glyph{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(215,227,243,.3);
  background:linear-gradient(145deg,#202b39,#111821);
  transform:rotate(45deg);
  font-family:Georgia,serif;
  font-size:27px;
  box-shadow:0 0 45px rgba(229,43,74,.08);
}
.intro-mark strong{
  margin-top:28px;
  font-size:19px;
  letter-spacing:.28em;
  transform:translateX(.14em);
}
.intro-mark small{
  margin-top:8px;
  color:#68788b;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.22em;
}
.intro-progress{
  width:100%;
  height:2px;
  margin-top:25px;
  background:#161f29;
  overflow:hidden;
}
.intro-progress i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,#4f657e,var(--red),#a9bfd5);
  box-shadow:0 0 12px rgba(229,43,74,.28);
  animation:introProgress .72s .08s var(--ease-out) forwards;
}
@keyframes introProgress{to{width:100%}}

/* Remove any leftover events-only visual CSS from actual layout by keeping it harmless */
.events-layout,.events-head,.events-discord,.event-grid,.event-card,.event-footer{
  display:none!important;
}

@media(max-width:1000px){
  .home-dock{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:700px){
  .home-dock{grid-template-columns:1fr!important}
  .home-gif{inset:0;transform:scale(1.08)}
  .home-cinematic-overlay{
    background:
      linear-gradient(180deg,rgba(4,7,11,.48),rgba(4,7,11,.76) 55%,rgba(4,7,11,.95)),
      linear-gradient(90deg,rgba(5,8,12,.86),rgba(5,8,12,.42));
  }
  .transition-label{font-size:2rem}
}

@media(prefers-reduced-motion:reduce){
  .window-transition,
  .floating-ash,
  .scanlines,
  .hero-word .solid:before,
  .hero-word .solid:after,
  .intro-screen{
    display:none!important;
  }
}


/* =========================================================
   V11 — SMOOTH TRANSITIONS + HIGH CONTRAST PALETTE
   ========================================================= */
:root{
  --bg:#07070b;
  --bg2:#0c0a13;
  --panel:#14111d;
  --panel2:#1b1628;
  --panel3:#231b34;
  --ink:#f8f7ff;
  --muted:#b7afc9;
  --muted2:#8f86a5;
  --line:rgba(240,235,255,.16);
  --line2:rgba(240,235,255,.08);
  --red:#ff2e63;
  --red-soft:#8f2545;
  --violet:#7c5cff;
  --violet2:#a78bfa;
  --cyan:#65e6ff;
  --green:#72e6a5;
  --amber:#ffd166;
}

/* Main surfaces */
body{
  background:
    radial-gradient(circle at 12% 8%,rgba(124,92,255,.18),transparent 24%),
    radial-gradient(circle at 88% 16%,rgba(255,46,99,.17),transparent 22%),
    radial-gradient(circle at 52% 90%,rgba(101,230,255,.08),transparent 26%),
    linear-gradient(145deg,#07070b,#0b0911 55%,#06070b);
  color:var(--ink);
}

.topbar{
  background:linear-gradient(180deg,#15101f,#0d0b14);
  border-bottom-color:rgba(240,235,255,.15);
  box-shadow:0 10px 36px rgba(0,0,0,.34);
}

.brand-glyph{
  border-color:rgba(167,139,250,.38);
  background:linear-gradient(145deg,#251c39,#161020);
  box-shadow:
    inset 0 0 20px rgba(124,92,255,.08),
    0 0 18px rgba(124,92,255,.06);
}

.window-nav button{
  color:#9f94b8;
}
.window-nav button:hover{
  color:#fff;
  background:#1b1427;
}
.window-nav button.active{
  color:#fff;
  background:linear-gradient(180deg,#2b2140,#1d172b);
  border-left-color:rgba(240,235,255,.16);
  border-right-color:rgba(240,235,255,.16);
  box-shadow:
    inset 0 -2px 0 var(--red),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.command-btn{
  background:linear-gradient(180deg,#251d36,#181221);
  border-color:rgba(167,139,250,.24);
  color:#c4b7da;
}
.command-btn:hover{
  color:#fff;
  border-color:rgba(101,230,255,.38);
  background:#2c2240;
}

.discord-btn{
  background:linear-gradient(135deg,var(--red),#a42655);
  border-color:rgba(255,255,255,.08);
  color:#fff;
  box-shadow:0 8px 24px rgba(255,46,99,.12);
}
.discord-btn:hover{
  background:linear-gradient(135deg,#ff4778,var(--violet));
}

.view-frame{
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0)),
    linear-gradient(145deg,#181320,#100d17);
  border-color:rgba(240,235,255,.15);
  box-shadow:
    0 22px 60px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.018) inset;
}

.view-bar{
  background:linear-gradient(180deg,#241b33,#171121);
  border-bottom-color:rgba(240,235,255,.13);
}

.view-title{color:#d7cfee}
.view-meta{color:#9386aa}

.content-window,
.values-window{
  background:
    radial-gradient(circle at 90% 10%,rgba(124,92,255,.08),transparent 26%),
    radial-gradient(circle at 15% 85%,rgba(101,230,255,.04),transparent 22%),
    linear-gradient(145deg,#181321,#100d17 68%,#0c0a11);
}

/* Home GIF and readability */
.home-gif{
  filter:saturate(1.08) contrast(1.16) brightness(.84);
}
.home-cinematic-overlay{
  background:
    linear-gradient(90deg,rgba(6,6,10,.90) 0%,rgba(7,6,12,.62) 42%,rgba(7,7,12,.34) 72%,rgba(6,6,10,.56) 100%),
    linear-gradient(180deg,rgba(5,5,9,.12),rgba(5,5,9,.35) 70%,rgba(4,4,7,.90));
}
.red-haze.haze-one{
  background:rgba(255,46,99,.16);
}
.red-haze.haze-two{
  background:rgba(124,92,255,.12);
}
.micro,.red-label{
  color:#ff5a83;
}
.hero-word .outline{
  -webkit-text-stroke:1px rgba(185,166,255,.24);
}
.hero-word .solid{
  color:#faf8ff;
}
.home-bottom p{
  color:#c7bfd5;
}
.stat-row span{
  color:#9b90ad;
}

/* High-contrast cards */
.feature-row>div,
.owner-card,
.join-card,
.trade-panel,
.market-card,
.trade-slot,
.pick-card,
.dock-card{
  background:
    linear-gradient(160deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
    linear-gradient(145deg,#20182c,#15101e);
  border-color:rgba(240,235,255,.14);
}
.feature-row>div:hover,
.owner-card:hover,
.join-card:hover,
.market-card:hover,
.pick-card:hover,
.dock-card:hover{
  border-color:rgba(101,230,255,.26);
}
.dock-card:after{
  background:linear-gradient(90deg,var(--red),var(--violet),var(--cyan));
}
.owner-card:hover{
  border-color:rgba(255,46,99,.32);
}
.owner-card:before{
  background:radial-gradient(circle,rgba(255,46,99,.14),transparent 68%);
}
.owner-letter{
  color:rgba(167,139,250,.055);
}
.owner-card:hover .owner-letter{
  color:rgba(255,46,99,.075);
}

.team-row>b{
  color:#5a4f73;
}
.team-row:first-child>b{
  color:var(--red);
  text-shadow:0 0 22px rgba(255,46,99,.18);
}
.team-row:hover{
  background:linear-gradient(90deg,rgba(124,92,255,.07),transparent);
}
.team-row:before{
  background:linear-gradient(180deg,transparent,var(--red),var(--cyan),transparent);
}

.secondary,
.trade-toolbar button{
  background:linear-gradient(180deg,#241c33,#181220);
  border-color:rgba(240,235,255,.14);
  color:#c5bbd6;
}
.secondary:hover,
.trade-toolbar button:hover{
  background:#2b2140;
  border-color:rgba(101,230,255,.28);
  color:#fff;
}
.trade-toolbar .accent-tool{
  background:linear-gradient(135deg,#a21f4c,var(--red));
  border-color:rgba(255,46,99,.34);
}
.trade-toolbar .accent-tool:hover{
  background:linear-gradient(135deg,var(--red),var(--violet));
}

/* Calculator */
.trade-shell{
  background:#100c17;
  border-color:rgba(240,235,255,.15);
}
.trade-slot{
  background:
    radial-gradient(circle at 50% 25%,rgba(124,92,255,.055),transparent 55%),
    #181221;
}
.trade-slot:hover{
  background:#20182c;
  border-color:rgba(101,230,255,.25);
}
.trade-slot.empty{
  color:#8a80a0;
}
.perm-slot{
  background:
    radial-gradient(circle at 50% 25%,rgba(255,46,99,.13),transparent 58%),
    linear-gradient(145deg,#211524,#16101a);
  border-color:rgba(255,46,99,.34);
}
.slot-details span{
  color:#aaa1bb;
}
.market-head input,
.fruit-search,
.market-controls select{
  background:#15101d;
  border-color:rgba(240,235,255,.15);
  color:#f6f2ff;
}
.market-head input:focus,
.fruit-search:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 2px rgba(101,230,255,.08);
}
.market-mode{
  background:#15101d;
  border-color:rgba(240,235,255,.14);
}
.market-mode button{
  color:#9389a6;
}
.market-mode button.active{
  background:linear-gradient(180deg,#33264b,#241b35);
  color:#fff;
  box-shadow:inset 0 -2px 0 var(--cyan);
}
.market-values-dual>div{
  background:rgba(8,7,13,.30);
  border-color:rgba(240,235,255,.10);
}
.perm-market-value{
  border-color:rgba(255,46,99,.26)!important;
  background:rgba(143,37,69,.13)!important;
}
.perm-market-value strong{
  color:#ffc0d0;
}
.market-demand-row>strong{
  color:#d9d2e5;
}

/* Command palette */
.command-overlay{
  background:rgba(5,4,9,.76);
}
.command-palette{
  background:linear-gradient(145deg,#20182c,#120e19);
  border-color:rgba(240,235,255,.18);
}
.command-item.selected,
.command-item:hover{
  background:linear-gradient(90deg,rgba(124,92,255,.15),rgba(101,230,255,.05));
}
.command-search-wrap>span{
  color:var(--cyan);
}

/* bottom status */
.bottom-status{
  background:linear-gradient(180deg,#0e0b14,#09070d);
  border-top-color:rgba(240,235,255,.13);
  color:#817691;
}

/* Faster GPU-only window transitions */
.app-view{
  will-change:transform,opacity;
  backface-visibility:hidden;
  transform:translateZ(0);
  transition:none!important;
}
.app-view.active{
  opacity:1;
  visibility:visible;
}
.app-view.fast-prep-right{
  opacity:0!important;
  transform:translate3d(26px,0,0) scale(.995)!important;
  visibility:visible!important;
}
.app-view.fast-prep-left{
  opacity:0!important;
  transform:translate3d(-26px,0,0) scale(.995)!important;
  visibility:visible!important;
}
.app-view.fast-enter{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
  transition:
    transform .18s cubic-bezier(.22,.8,.2,1),
    opacity .15s ease!important;
}
.app-view.fast-exit-left{
  opacity:0!important;
  transform:translate3d(-20px,0,0) scale(.996)!important;
  visibility:visible!important;
  transition:
    transform .16s cubic-bezier(.4,0,.2,1),
    opacity .13s ease!important;
}
.app-view.fast-exit-right{
  opacity:0!important;
  transform:translate3d(20px,0,0) scale(.996)!important;
  visibility:visible!important;
  transition:
    transform .16s cubic-bezier(.4,0,.2,1),
    opacity .13s ease!important;
}

/* Make transition overlay almost free: one thin gradient, no blur */
.window-transition{
  opacity:0;
}
.window-transition:before{
  display:none!important;
}
.transition-line{
  width:2px;
  background:linear-gradient(180deg,transparent,var(--violet),var(--red),var(--cyan),transparent);
  box-shadow:0 0 10px rgba(124,92,255,.35);
}
.window-transition.active .transition-label{
  animation:transitionLabelFast .19s ease-out;
}
.transition-label{
  color:rgba(230,224,255,.18);
}
.forward.active .transition-line{
  animation:lineForwardFast .20s ease-out;
}
.backward.active .transition-line{
  animation:lineBackwardFast .20s ease-out;
}
@keyframes lineForwardFast{
  0%{left:0;opacity:0}
  20%{opacity:1}
  100%{left:100%;opacity:0}
}
@keyframes lineBackwardFast{
  0%{right:0;opacity:0}
  20%{opacity:1}
  100%{right:100%;opacity:0}
}
@keyframes transitionLabelFast{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.98)}
  45%{opacity:.8}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1)}
}

/* Stop GIF from consuming paint/composite work outside Home */
body:not([data-view="home"]) .home-gif,
body:not([data-view="home"]) .floating-ash,
body:not([data-view="home"]) .scanlines{
  display:none!important;
}

/* Reduce heavy hover work while switching */
body.view-switching *{
  pointer-events:none!important;
}
body.view-switching .dock-card,
body.view-switching .owner-card,
body.view-switching .market-card,
body.view-switching .pick-card{
  box-shadow:none!important;
}

/* intro recolor */
.intro-screen{
  background:
    radial-gradient(circle at 50% 42%,rgba(124,92,255,.15),transparent 28%),
    radial-gradient(circle at 58% 58%,rgba(101,230,255,.05),transparent 20%),
    #08070d;
}
.intro-glyph{
  border-color:rgba(167,139,250,.38);
  background:linear-gradient(145deg,#2a2040,#17101f);
  box-shadow:0 0 40px rgba(124,92,255,.08);
}
.intro-progress i{
  background:linear-gradient(90deg,var(--violet),var(--red),var(--cyan));
}

@media(max-width:700px){
  .home-gif{
    filter:saturate(1.0) contrast(1.10) brightness(.78);
  }
}


/* V12 — join visuals, owner profiles, community updates, rosters */

/* Home dock can fit 4 cards again */
.home-dock{
  grid-template-columns:repeat(4,1fr)!important;
}

/* Join backgrounds */
.join-layout{
  position:relative;
  overflow:hidden;
}
.join-bg{
  position:absolute;
  inset:auto;
  pointer-events:none;
  opacity:.16;
  filter:grayscale(.1) saturate(1.05) blur(2px);
  background-size:cover;
  background-position:center;
  border-radius:18px;
  mix-blend-mode:screen;
}
.join-bg-cx{
  width:34%;
  height:82%;
  right:2%;
  top:8%;
  background-image:linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.58)), url("assets/owner-cxsh.jpg");
  opacity:.12;
}
.join-bg-fi{
  width:30%;
  height:42%;
  right:6%;
  bottom:6%;
  background-image:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.54)), url("assets/owner-fischi.png");
  opacity:.14;
}
.join-left,.join-right{
  position:relative;
  z-index:2;
}
.join-left{
  backdrop-filter:blur(2px);
}

/* Owners cards visuals */
.owner-card{
  cursor:pointer;
  overflow:hidden;
}
.owner-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.23;
  transition:transform .32s var(--ease-out), opacity .24s ease;
}
.owner-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(8,8,12,.20),rgba(8,8,12,.68)),
    linear-gradient(90deg,rgba(8,8,12,.18),rgba(8,8,12,.05),rgba(8,8,12,.20));
}
.owner-bg-cxsh{
  background-image:url("assets/owner-cxsh.jpg");
  filter:grayscale(1) contrast(1.05);
}
.owner-bg-fischi{
  background-image:url("assets/owner-fischi.png");
  background-position:center 18%;
}
.owner-card:hover .owner-bg{
  transform:scale(1.04);
  opacity:.31;
}
.owner-bottom small{
  display:inline-block;
  margin-top:10px;
  color:#c6b7db;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.14em;
}

/* Community updates page */
.updates-layout{
  height:calc(100% - 38px);
  padding:clamp(22px,3vw,44px);
  display:flex;
  flex-direction:column;
  min-height:0;
}
.updates-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:28px;
}
.updates-head h2{
  font-size:clamp(3rem,6vw,6rem);
  line-height:.9;
  letter-spacing:-.07em;
  margin-top:12px;
}
.updates-head p{
  max-width:700px;
  color:#b7afc9;
  font-size:11px;
  line-height:1.55;
  margin-top:12px;
}
.updates-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.primary-mini,
.updates-actions button,
.roster-add button,
.updates-form-actions button{
  min-height:42px;
  padding:0 14px;
  border:1px solid rgba(240,235,255,.14);
  background:linear-gradient(180deg,#241c33,#181220);
  color:#fff;
  cursor:pointer;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.12em;
}
.primary-mini{
  background:linear-gradient(135deg,#ff2e63,#7c5cff);
}
.updates-actions button:hover,
.roster-add button:hover,
.updates-form-actions button:hover{
  background:#2a2040;
}
.primary-mini:hover{
  background:linear-gradient(135deg,#ff4778,#8f74ff)!important;
}
.updates-status{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border:1px solid rgba(240,235,255,.10);
  background:rgba(10,8,17,.32);
  color:#9d93b4;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.14em;
}
.updates-status strong{
  color:#fff;
  font-size:8px;
}
.updates-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  overflow-y:auto;
  padding-right:3px;
}
.update-card{
  border:1px solid rgba(240,235,255,.12);
  background:
    radial-gradient(circle at 85% 12%,rgba(124,92,255,.10),transparent 26%),
    linear-gradient(145deg,#1b1527,#120f19);
  padding:16px;
  min-height:210px;
  display:flex;
  flex-direction:column;
}
.update-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.update-top span{
  color:#ff5a83;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.14em;
}
.update-top button{
  border:0;
  background:none;
  color:#8f86a5;
  cursor:pointer;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.12em;
}
.update-top button:hover{
  color:#fff;
}
.update-card h3{
  font-size:clamp(1.2rem,2.1vw,2rem);
  line-height:.95;
  letter-spacing:-.04em;
  margin-top:16px;
}
.update-card p{
  margin-top:10px;
  color:#c7bfd5;
  font-size:10px;
  line-height:1.6;
  flex:1;
}
.update-card small{
  margin-top:16px;
  color:#8f86a5;
  font-size:7px;
}
.update-empty,
.roster-empty{
  border:1px dashed rgba(240,235,255,.14);
  min-height:160px;
  display:grid;
  place-items:center;
  color:#9a91ae;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.14em;
}

/* Overlay modals */
.overlay-modal{
  position:fixed;
  inset:0;
  z-index:850;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(7,6,12,.82);
  backdrop-filter:blur(10px);
}
.overlay-modal.open{
  display:flex;
}
.modal-card{
  width:min(720px,96vw);
  max-height:86vh;
  overflow:auto;
  border:1px solid rgba(240,235,255,.18);
  background:linear-gradient(145deg,#1a1426,#120e18);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  position:relative;
}
.modal-close{
  position:absolute;
  right:12px;
  top:12px;
  z-index:4;
  width:34px;
  height:34px;
  border:1px solid rgba(240,235,255,.14);
  background:rgba(12,10,18,.84);
  color:#fff;
  cursor:pointer;
  font-size:20px;
}
.owner-modal-card{
  overflow:hidden;
}
.owner-modal-cover{
  height:280px;
  background-size:cover;
  background-position:center;
}
.owner-modal-content{
  padding:22px;
}
.owner-modal-kicker{
  color:#ff5a83;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.14em;
}
.owner-modal-content h3{
  font-size:clamp(2.3rem,5vw,4.4rem);
  line-height:.92;
  letter-spacing:-.06em;
  margin-top:8px;
}
.owner-modal-bio{
  margin-top:12px;
  color:#d0c8dc;
  font-size:12px;
  line-height:1.7;
  max-width:680px;
}
.owner-modal-tags{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:18px;
}
.owner-modal-tags span{
  border:1px solid rgba(240,235,255,.12);
  background:#17121f;
  color:#c7bfd7;
  padding:8px 10px;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.12em;
}

/* Updates form modal */
.updates-modal-card{
  max-width:660px;
}
.updates-form{
  padding:22px;
}
.updates-form h3{
  font-size:clamp(2rem,4vw,3rem);
  letter-spacing:-.05em;
  margin-top:10px;
}
.updates-form input,
.updates-form textarea,
.roster-add input{
  width:100%;
  background:#15101d;
  border:1px solid rgba(240,235,255,.14);
  color:#fff;
  outline:none;
  padding:13px 14px;
  margin-top:12px;
  font-size:12px;
}
.updates-form textarea{
  min-height:170px;
  resize:vertical;
}
.updates-form-actions{
  display:flex;
  gap:8px;
  margin-top:14px;
}

/* Rosters */
.roster-modal-card{
  max-width:620px;
  padding:22px;
}
.roster-head h3{
  font-size:clamp(2rem,4vw,3.4rem);
  margin-top:10px;
  letter-spacing:-.05em;
}
.roster-add{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-top:14px;
}
.roster-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.roster-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  min-height:48px;
  padding:0 12px;
  border:1px solid rgba(240,235,255,.12);
  background:#17121f;
}
.roster-item span{
  color:#fff;
  font-size:12px;
}
.roster-item button{
  border:0;
  background:none;
  color:#9a91ae;
  cursor:pointer;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.12em;
}
.roster-item button:hover{
  color:#fff;
}

/* Team rows: make it clearer they're interactive */
.team-row{
  cursor:pointer;
}
.team-row i{
  color:#d3c3eb;
}
.team-row:hover i{
  color:#fff;
}

/* Mobile adjustments */
@media(max-width:1000px){
  .home-dock{grid-template-columns:repeat(2,1fr)!important}
  .updates-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .home-dock{grid-template-columns:1fr!important}
  .join-bg{display:none}
  .updates-head{align-items:flex-start;flex-direction:column}
  .updates-grid{grid-template-columns:1fr}
  .roster-add{grid-template-columns:1fr}
  .updates-form-actions{flex-direction:column}
}


/* V13 — join visuals + cleanup */

/* Home dock back to 3 cards */
.home-dock{
  grid-template-columns:repeat(3,1fr)!important;
}

/* Center fruit more cleanly */
.trade-slot{
  display:block;
}
.slot-fruit-img{
  top:42%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(92px,62%);
  height:min(92px,62%);
  object-position:center;
}
.slot-details{
  left:10px;
  right:10px;
  bottom:10px;
}

/* Make join feel less empty */
.join-layout{
  grid-template-columns:.98fr 1.02fr;
}
.join-left{
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 74% 14%,rgba(255,46,99,.10),transparent 26%),
    linear-gradient(145deg,rgba(23,18,34,.92),rgba(14,12,21,.94));
}
.join-visual-stack{
  position:absolute;
  right:18px;
  top:18px;
  display:flex;
  gap:10px;
  z-index:1;
}
.join-visual{
  width:92px;
  height:122px;
  border:1px solid rgba(240,235,255,.14);
  background-size:cover;
  background-position:center;
  box-shadow:0 12px 34px rgba(0,0,0,.26);
  opacity:.92;
}
.visual-akaza{
  background-image:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.42)), url("assets/owner-cxsh.jpg");
  transform:rotate(-6deg);
}
.visual-fischi{
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18)),
    radial-gradient(circle at 20% 20%, rgba(101,230,255,.28), transparent 24%),
    radial-gradient(circle at 80% 30%, rgba(124,92,255,.32), transparent 26%),
    linear-gradient(145deg,#241b33,#15101d);
  transform:rotate(6deg);
}
.join-left > *:not(.join-visual-stack){
  position:relative;
  z-index:2;
}
.join-bg{
  opacity:.22;
  filter:none;
  mix-blend-mode:normal;
}
.join-bg-cx{
  width:34%;
  height:78%;
  right:-1%;
  top:7%;
  background-image:linear-gradient(180deg,rgba(0,0,0,.26),rgba(0,0,0,.62)), url("assets/owner-cxsh.jpg");
  background-position:center;
  opacity:.16;
}
.join-bg-fi{
  width:32%;
  height:50%;
  right:6%;
  bottom:4%;
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.48)),
    radial-gradient(circle at 20% 20%, rgba(101,230,255,.25), transparent 28%),
    radial-gradient(circle at 80% 25%, rgba(124,92,255,.28), transparent 30%),
    linear-gradient(145deg,#241b33,#15101d);
  opacity:.14;
}
.join-card{
  position:relative;
  overflow:hidden;
}
.join-card-art{
  position:absolute;
  inset:0;
  opacity:.18;
  background-size:cover;
  background-position:center;
  pointer-events:none;
}
.join-card-art:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(12,10,18,.25),rgba(12,10,18,.88));
}
.art-akaza{
  background-image:url("assets/owner-cxsh.jpg");
  filter:grayscale(1) contrast(1.1);
}
.art-fischi{
  background:
    radial-gradient(circle at 20% 20%, rgba(101,230,255,.30), transparent 28%),
    radial-gradient(circle at 78% 22%, rgba(124,92,255,.32), transparent 34%),
    linear-gradient(145deg,#241b33,#15101d);
}
.join-card h3, .join-card p, .join-card > span{
  position:relative;
  z-index:2;
}
.join-card-1, .join-card-4{
  border-color:rgba(240,235,255,.18);
}

/* Better owner treatment */
.owner-bg-fischi{
  background:
    radial-gradient(circle at 18% 22%, rgba(101,230,255,.28), transparent 24%),
    radial-gradient(circle at 80% 30%, rgba(124,92,255,.34), transparent 34%),
    linear-gradient(145deg,#231b34,#120f19);
  background-position:center;
}
.owner-card.fischi-card .owner-letter{
  color:rgba(101,230,255,.10);
}
.owner-card.fischi-card:hover .owner-letter{
  color:rgba(101,230,255,.16);
}
.owner-modal-cover{
  background-repeat:no-repeat;
}

/* remove updates page visuals if any CSS remains */
.updates-layout,
.updates-head,
.updates-grid,
.update-card,
.update-empty{
  display:none !important;
}

@media(max-width:1000px){
  .home-dock{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:700px){
  .home-dock{grid-template-columns:1fr!important}
  .join-layout{grid-template-columns:1fr}
  .join-visual-stack{
    position:static;
    margin-bottom:16px;
  }
  .join-visual{
    width:74px;
    height:98px;
  }
}


/* V14 — matte gifs + aura polish */

/* Softer matte palette */
:root{
  --bg:#090a0f;
  --bg2:#0f1016;
  --panel:#171820;
  --panel2:#1d1f29;
  --panel3:#262936;
  --ink:#f3f1f8;
  --muted:#b4afbe;
  --muted2:#8f8999;
  --line:rgba(243,241,248,.12);
  --line2:rgba(243,241,248,.06);
  --red:#d95b7c;
  --red-soft:#6f3344;
  --violet:#80749f;
  --violet2:#a495c5;
  --cyan:#88adb8;
}

body{
  background:
    radial-gradient(circle at 18% 10%, rgba(128,116,159,.10), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(217,91,124,.09), transparent 22%),
    linear-gradient(145deg,#090a0f,#0d0e14 58%, #08090d);
}

.topbar{
  background:linear-gradient(180deg,#171821,#101117);
  border-bottom-color:rgba(243,241,248,.10);
}
.view-frame{
  background:
    linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,0)),
    linear-gradient(145deg,#191b23,#101116);
  border-color:rgba(243,241,248,.10);
  backdrop-filter:blur(5px);
  position:relative;
  overflow:hidden;
}
.view-bar{
  background:linear-gradient(180deg,rgba(25,27,35,.92),rgba(17,18,24,.92));
  border-bottom-color:rgba(243,241,248,.10);
}
.red-label,
.micro{
  color:#df7291;
}
.window-nav button.active{
  background:linear-gradient(180deg,#2a2b38,#1b1d26);
  box-shadow:inset 0 -2px 0 #d95b7c;
}
.discord-btn{
  background:linear-gradient(135deg,#d95b7c,#8b759d);
}
.discord-btn:hover{
  background:linear-gradient(135deg,#e4819f,#9b88b1);
}

/* Matte animated background for every content window */
.app-view[data-view-panel="about"] .view-frame::before,
.app-view[data-view-panel="owners"] .view-frame::before,
.app-view[data-view-panel="war"] .view-frame::before,
.app-view[data-view-panel="join"] .view-frame::before,
.app-view[data-view-panel="values"] .view-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.22;
  pointer-events:none;
  z-index:0;
}
.app-view[data-view-panel="about"] .view-frame::before{
  background-image:url("assets/window-about.gif");
}
.app-view[data-view-panel="owners"] .view-frame::before{
  background-image:url("assets/window-owners.gif");
  opacity:.24;
}
.app-view[data-view-panel="war"] .view-frame::before{
  background-image:url("assets/window-war.gif");
}
.app-view[data-view-panel="join"] .view-frame::before{
  background-image:url("assets/window-join.gif");
  opacity:.26;
}
.app-view[data-view-panel="values"] .view-frame::before{
  background-image:url("assets/window-values.gif");
  opacity:.20;
}
.app-view[data-view-panel="about"] .view-frame::after,
.app-view[data-view-panel="owners"] .view-frame::after,
.app-view[data-view-panel="war"] .view-frame::after,
.app-view[data-view-panel="join"] .view-frame::after,
.app-view[data-view-panel="values"] .view-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(8,9,13,.18),rgba(8,9,13,.42) 62%, rgba(8,9,13,.80)),
    linear-gradient(90deg,rgba(8,9,13,.32),rgba(8,9,13,.08) 35%, rgba(8,9,13,.26));
}
.view-bar,
.about-layout,
.owners-layout,
.war-layout,
.join-layout,
.value-screen,
.owner-grid,
.trade-toolbar{
  position:relative;
  z-index:1;
}

/* Join: remove the old owner-image vibe, use matte gif atmosphere instead */
.join-visual-stack,
.join-bg,
.join-card-art{
  display:none !important;
}
.join-layout{
  grid-template-columns:.96fr 1.04fr;
}
.join-left{
  background:
    linear-gradient(180deg,rgba(18,21,30,.74),rgba(12,14,20,.84)),
    linear-gradient(145deg,rgba(28,32,45,.24),rgba(19,23,30,.10));
  border-color:rgba(243,241,248,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.join-left::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("assets/window-join.gif");
  background-size:cover;
  background-position:center;
  opacity:.20;
  pointer-events:none;
}
.join-left::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 18%, rgba(217,91,124,.10), transparent 24%),
    radial-gradient(circle at 22% 82%, rgba(128,116,159,.12), transparent 28%);
  pointer-events:none;
}
.join-left > *{
  position:relative;
  z-index:2;
}
.join-card{
  background:
    linear-gradient(180deg,rgba(20,22,30,.70),rgba(14,15,21,.82));
  border-color:rgba(243,241,248,.12);
  backdrop-filter:blur(4px);
}
.join-card:hover{
  transform:translateY(-3px);
  border-color:rgba(243,241,248,.20);
}
.join-card h3{
  text-wrap:balance;
}
.join-card-1::before,
.join-card-2::before,
.join-card-3::before,
.join-card-4::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.15;
  background-size:cover;
  background-position:center;
  pointer-events:none;
}
.join-card-1::before{background-image:url("assets/window-join.gif")}
.join-card-2::before{background-image:url("assets/window-about.gif")}
.join-card-3::before{background-image:url("assets/window-war.gif")}
.join-card-4::before{background-image:url("assets/window-owners.gif")}

/* Owners: more aura, but restrained */
.owners-heading{
  max-width:940px;
}
.owners-heading h2{
  font-size:clamp(3rem,6vw,6rem);
  letter-spacing:-.07em;
  line-height:.92;
}
.owners-sub{
  margin-top:12px;
  max-width:760px;
  color:#c6c0d0;
  font-size:11px;
  line-height:1.65;
}
.owner-grid{
  gap:14px;
}
.owner-card{
  min-height:430px;
  background:
    linear-gradient(180deg,rgba(20,21,27,.18),rgba(8,8,10,.34)),
    linear-gradient(145deg,#1d1a22,#111218);
  border-color:rgba(243,241,248,.14);
  box-shadow:
    0 18px 55px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,255,255,.02);
}
.owner-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 20% 18%, rgba(217,91,124,.08), transparent 28%),
    radial-gradient(circle at 80% 14%, rgba(128,116,159,.10), transparent 36%);
  pointer-events:none;
}
.owner-card::after{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(243,241,248,.08);
  pointer-events:none;
}
.owner-card:hover{
  transform:translateY(-5px);
  border-color:rgba(243,241,248,.22);
  box-shadow:
    0 24px 65px rgba(0,0,0,.30),
    0 0 0 1px rgba(217,91,124,.12);
}
.owner-top{
  position:relative;
  z-index:2;
  color:#bcb6c8;
}
.owner-bg{
  opacity:.36;
  filter:saturate(.90) contrast(1.04);
}
.owner-bg-cxsh{
  background-position:center 20%;
}
.owner-bg-fischi{
  background-image:url("assets/owner-fischi-v2.png");
  background-position:center 26%;
  opacity:.34;
}
.owner-card.fischi-card .owner-bg::after,
.owner-card.cxsh-card .owner-bg::after{
  background:
    linear-gradient(180deg,rgba(10,10,14,.10),rgba(10,10,14,.78)),
    linear-gradient(90deg,rgba(10,10,14,.22),rgba(10,10,14,.04) 55%,rgba(10,10,14,.22));
}
.owner-letter{
  color:rgba(243,241,248,.06);
  font-size:clamp(6rem,13vw,10rem);
}
.owner-card:hover .owner-letter{
  color:rgba(243,241,248,.09);
}
.owner-bottom{
  position:relative;
  z-index:2;
}
.owner-bottom h3{
  font-size:clamp(2rem,4vw,3rem);
  letter-spacing:-.04em;
}
.owner-bottom p{
  color:#d7d2de;
  letter-spacing:.12em;
}
.owner-bottom small{
  color:#d7b8c5;
}

/* Owner modal */
.owner-modal-card{
  background:linear-gradient(145deg,#181920,#0f1014);
  border-color:rgba(243,241,248,.14);
}
.owner-modal-cover{
  height:300px;
  background-position:center 22%;
}
.owner-modal-content{
  background:
    linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,0));
}
.owner-modal-tags span{
  background:#161820;
  border-color:rgba(243,241,248,.10);
}

/* Value slots keep fruit centered cleanly */
.trade-slot{
  background:
    linear-gradient(180deg,rgba(20,21,29,.82),rgba(13,14,20,.92));
  border-color:rgba(243,241,248,.10);
}
.slot-fruit-img{
  top:39%;
  width:min(98px,64%);
  height:min(98px,64%);
}
.trade-title strong,
.market-value strong{
  color:#f7f4fb;
}
.market-card,
.trade-panel,
.pick-card{
  background:
    linear-gradient(180deg,rgba(20,21,29,.78),rgba(13,14,20,.88));
  border-color:rgba(243,241,248,.10);
}

/* War table / about features get matte polish */
.feature-row>div,
.war-tags span{
  background:linear-gradient(180deg,rgba(20,21,29,.76),rgba(14,14,18,.88));
  border-color:rgba(243,241,248,.10);
}
.team-row{
  background:rgba(13,14,20,.34);
  border-bottom-color:rgba(243,241,248,.10);
}
.team-row:hover{
  background:linear-gradient(90deg,rgba(217,91,124,.07),rgba(128,116,159,.06),transparent);
}

@media(max-width:1000px){
  .owner-card{min-height:380px}
}
@media(max-width:700px){
  .owners-sub{
    font-size:10px;
  }
  .join-layout{
    grid-template-columns:1fr;
  }
  .owner-card{
    min-height:320px;
  }
}


/* ================================================================
   V15 FINAL POLISH
   ================================================================ */

/* Kill the dotted/noisy look completely */
.grain,
.scanlines,
.grid-bg{
  display:none !important;
}

:root{
  --bg:#0a0a0d;
  --bg2:#101014;
  --panel:#15151a;
  --panel2:#1b1a21;
  --panel3:#232129;
  --ink:#f5f2f7;
  --muted:#aaa5b0;
  --muted2:#817c89;
  --line:rgba(245,242,247,.12);
  --line2:rgba(245,242,247,.06);
  --red:#d85c78;
  --violet:#75658e;
  --cyan:#829ca6;
}

body{
  background:
    radial-gradient(circle at 18% 10%,rgba(117,101,142,.10),transparent 28%),
    radial-gradient(circle at 86% 20%,rgba(216,92,120,.08),transparent 24%),
    linear-gradient(145deg,#0a0a0d,#0e0e13 58%,#09090c);
}

/* Remove old generated window GIFs entirely */
.app-view[data-view-panel="about"] .view-frame::before,
.app-view[data-view-panel="owners"] .view-frame::before,
.app-view[data-view-panel="war"] .view-frame::before,
.app-view[data-view-panel="join"] .view-frame::before,
.app-view[data-view-panel="values"] .view-frame::before{
  display:block !important;
  content:"";
  position:absolute;
  inset:0;
  background-image:url("assets/home-requested.gif") !important;
  background-size:cover;
  background-position:center;
  opacity:.055;
  filter:grayscale(.55) saturate(.45) brightness(.58);
  pointer-events:none;
  z-index:0;
}
.app-view:not(.active) .view-frame::before{
  display:none !important;
}
.app-view[data-view-panel="owners"] .view-frame::before{
  opacity:.075;
}
.app-view[data-view-panel="war"] .view-frame::before{
  opacity:.05;
}
.app-view[data-view-panel="join"] .view-frame::before{
  opacity:.07;
}
.app-view[data-view-panel="values"] .view-frame::before{
  opacity:.035;
}

.app-view[data-view-panel="about"] .view-frame::after,
.app-view[data-view-panel="owners"] .view-frame::after,
.app-view[data-view-panel="war"] .view-frame::after,
.app-view[data-view-panel="join"] .view-frame::after,
.app-view[data-view-panel="values"] .view-frame::after{
  display:block !important;
  background:
    linear-gradient(180deg,rgba(10,10,13,.50),rgba(10,10,13,.72) 70%,rgba(10,10,13,.94)),
    radial-gradient(circle at 70% 10%,rgba(117,101,142,.08),transparent 32%);
}

/* Home: use the exact requested GIF */
.home-gif{
  background-image:url("assets/home-requested.gif") !important;
  background-size:cover;
  background-position:center;
  filter:saturate(.88) contrast(1.08) brightness(.66);
}
.home-cinematic-overlay{
  background:
    linear-gradient(90deg,rgba(7,7,10,.90) 0%,rgba(7,7,10,.63) 44%,rgba(7,7,10,.34) 74%,rgba(7,7,10,.52)),
    linear-gradient(180deg,rgba(7,7,10,.12),rgba(7,7,10,.48) 70%,rgba(7,7,10,.90));
}

/* Owners: exact photos, no stupid treatment */
.owner-bg{
  filter:none !important;
  opacity:.48 !important;
}
.owner-bg-cxsh{
  background-image:url("assets/owner-cxsh.jpg") !important;
  background-size:cover !important;
  background-position:center 20% !important;
}
.owner-bg-fischi{
  background-image:url("assets/owner-fischi-v2.png") !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-color:#09090c !important;
  opacity:.62 !important;
}
.owner-bg-cxsh::after,
.owner-bg-fischi::after{
  background:
    linear-gradient(180deg,rgba(7,7,10,.03),rgba(7,7,10,.74) 88%),
    linear-gradient(90deg,rgba(7,7,10,.14),transparent 50%,rgba(7,7,10,.14)) !important;
}
.owner-card{
  box-shadow:
    0 24px 70px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.018);
}
.owner-card::before{
  background:
    radial-gradient(circle at 12% 10%,rgba(216,92,120,.11),transparent 30%),
    radial-gradient(circle at 88% 12%,rgba(117,101,142,.13),transparent 34%) !important;
}
.owner-card::after{
  inset:15px !important;
  border-color:rgba(245,242,247,.08) !important;
}
.owner-card:hover{
  transform:translateY(-5px) scale(1.004);
  box-shadow:
    0 30px 85px rgba(0,0,0,.34),
    0 0 42px rgba(117,101,142,.08),
    inset 0 0 0 1px rgba(255,255,255,.028);
}
.owner-top{
  color:#d0cad5 !important;
}
.owner-bottom h3{
  text-shadow:0 5px 24px rgba(0,0,0,.55);
}

/* Join: smooth atmosphere, no random owner images pasted everywhere */
.join-bg,
.join-visual-stack,
.join-card-art{
  display:none !important;
}
.join-layout{
  background:
    radial-gradient(circle at 15% 20%,rgba(117,101,142,.08),transparent 30%),
    radial-gradient(circle at 84% 72%,rgba(216,92,120,.06),transparent 26%);
}
.join-left{
  background:
    linear-gradient(180deg,rgba(22,22,28,.80),rgba(13,13,17,.92)) !important;
  backdrop-filter:blur(8px);
}
.join-left::before{
  display:block !important;
  background-image:url("assets/home-requested.gif") !important;
  background-size:cover !important;
  background-position:center !important;
  opacity:.09 !important;
  filter:grayscale(.72) saturate(.30) brightness(.58);
}
.join-left::after{
  background:
    linear-gradient(180deg,rgba(10,10,14,.30),rgba(10,10,14,.84)),
    radial-gradient(circle at 70% 18%,rgba(216,92,120,.09),transparent 25%) !important;
}
.join-card{
  background:
    linear-gradient(180deg,rgba(22,22,29,.82),rgba(13,13,18,.92)) !important;
  backdrop-filter:blur(7px);
}
.join-card::before{
  background-image:url("assets/home-requested.gif") !important;
  background-size:cover !important;
  background-position:center !important;
  opacity:.045 !important;
  filter:grayscale(.75) saturate(.30) brightness(.62);
}

/* ------------------------------------------------
   ORIGINAL ASHENENCE OFFER CALCULATOR
   Inspired by compact trade tools, not copied.
   ------------------------------------------------ */
.final-value-head{
  margin-bottom:4px;
}
.final-toolbar{
  margin-top:10px;
}
.offer-calculator{
  margin-top:12px;
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 126px minmax(0,1fr);
  gap:12px;
  align-items:stretch;
}
.offer-side{
  min-width:0;
  border:1px solid rgba(245,242,247,.12);
  background:
    linear-gradient(180deg,rgba(20,20,26,.88),rgba(11,11,15,.94));
  border-radius:14px;
  padding:15px;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.offer-user-pill{
  align-self:center;
  min-width:96px;
  height:32px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(117,101,142,.40);
  border-radius:999px;
  background:rgba(117,101,142,.12);
  color:#c9badc;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.08em;
}
.them-pill{
  border-color:rgba(216,92,120,.34);
  background:rgba(216,92,120,.09);
  color:#e3b4c0;
}
.offer-summary{
  margin-top:13px;
  min-height:68px;
  border:1px solid rgba(245,242,247,.10);
  border-radius:11px;
  background:rgba(8,8,12,.38);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;
}
.offer-summary>div{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:11px 10px;
}
.offer-summary>div+div{
  border-left:1px solid rgba(245,242,247,.07);
}
.summary-icon{
  flex:0 0 24px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:9px;
  font-weight:1000;
}
.value-icon{
  background:rgba(117,101,142,.18);
  color:#b9a7d0;
}
.demand-icon{
  background:rgba(78,137,112,.17);
  color:#8dccad;
}
.item-icon{
  background:rgba(216,92,120,.15);
  color:#dda0af;
}
.offer-summary small{
  display:block;
  color:#77717f;
  font-size:5px;
  font-weight:1000;
  letter-spacing:.10em;
  white-space:nowrap;
}
.offer-summary strong{
  display:block;
  margin-top:3px;
  color:#f5f2f7;
  font-size:12px;
  line-height:1;
}
.offer-slots{
  margin-top:13px;
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:9px;
}
.final-slot{
  min-height:0 !important;
  width:100%;
  height:100%;
  border-radius:12px;
  background:#101014 !important;
  border:1px solid rgba(245,242,247,.07) !important;
  position:relative;
  overflow:hidden;
}
.final-slot.empty{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#57515e !important;
}
.final-slot.next-slot{
  border:1px dashed rgba(117,101,142,.55) !important;
  background:
    radial-gradient(circle at 50% 50%,rgba(117,101,142,.14),transparent 68%),
    #111017 !important;
  color:#a794c0 !important;
}
.slot-plus{
  font-size:31px;
  line-height:.8;
  font-weight:300;
}
.final-slot.empty small{
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}
.slot-ghost{
  font-size:20px;
  opacity:.16;
}
.filled-slot{
  background:
    radial-gradient(circle at 50% 34%,rgba(117,101,142,.07),transparent 55%),
    #101014 !important;
}
.fruit-image-wrap{
  position:absolute;
  left:10px;
  right:10px;
  top:8px;
  bottom:47px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.final-slot .slot-fruit-img{
  position:static !important;
  transform:none !important;
  width:min(112px,78%) !important;
  height:min(112px,78%) !important;
  max-width:82%;
  max-height:82%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));
}
.final-slot .slot-details{
  left:10px !important;
  right:10px !important;
  bottom:9px !important;
}
.final-slot .slot-details strong{
  text-align:center;
  font-size:10px;
}
.final-slot .slot-details span{
  justify-content:center;
  gap:12px;
  font-size:7px;
}
.final-slot .slot-value{
  color:#ddd3e8;
}
.final-slot.perm-slot{
  border-color:rgba(216,92,120,.24) !important;
  background:
    radial-gradient(circle at 50% 34%,rgba(216,92,120,.10),transparent 58%),
    #111014 !important;
}
.final-slot .perm-badge{
  left:7px;
  top:7px;
  background:#a94a63;
  border-radius:5px;
}
.final-slot .slot-remove{
  right:7px;
  top:7px;
  border-radius:6px;
}

.trade-core{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  border-left:1px solid rgba(245,242,247,.07);
  border-right:1px solid rgba(245,242,247,.07);
}
.trade-core-label{
  color:#77717f;
  font-size:5px;
  font-weight:1000;
  letter-spacing:.14em;
}
.trade-core .trade-score strong{
  font-size:29px;
}
.trade-core .trade-score small{
  font-size:6px;
}
.core-divider{
  width:42px;
  height:42px;
  margin:16px 0 6px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(245,242,247,.10);
  background:#121217;
}
.core-divider span{
  color:#83798d;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.08em;
}
.trade-core .balance-bar{
  width:76%;
  margin-top:12px;
}
.trade-core .balance-labels{
  width:76%;
}
.core-reset{
  margin-top:22px;
  border:0;
  background:none;
  color:#716b78;
  cursor:pointer;
  font-size:6px;
  font-weight:1000;
  letter-spacing:.12em;
}
.core-reset:hover{
  color:#fff;
}
.final-trade-foot{
  margin-top:9px;
}

/* Market index: cleaner matte cards */
.market-card{
  background:#111116 !important;
  border-color:rgba(245,242,247,.08) !important;
}
.market-card:hover{
  background:#15151b !important;
  border-color:rgba(245,242,247,.16) !important;
}

/* Keep it smooth / not noisy */
.floating-ash{
  opacity:.30;
}

@media(max-width:1050px){
  .offer-calculator{
    grid-template-columns:1fr;
    overflow-y:auto;
  }
  .trade-core{
    min-height:150px;
    border-left:0;
    border-right:0;
    border-top:1px solid rgba(245,242,247,.07);
    border-bottom:1px solid rgba(245,242,247,.07);
  }
  .offer-side{
    min-height:440px;
  }
}
@media(max-width:700px){
  .offer-summary>div{
    padding:9px 7px;
    gap:6px;
  }
  .summary-icon{
    display:none;
  }
  .offer-slots{
    min-height:350px;
  }
}


/* ================================================================
   V16 — VIVID RED PASS
   ================================================================ */

:root{
  --bg:#09090c;
  --bg2:#100f14;
  --panel:#17141b;
  --panel2:#1e1922;
  --panel3:#29212d;
  --ink:#f8f3f7;
  --muted:#b4a6b0;
  --muted2:#877b84;
  --line:rgba(248,243,247,.12);
  --line2:rgba(248,243,247,.06);
  --red:#f04d72;
  --violet:#8d5bb7;
  --cyan:#a6889b;
}

body{
  background:
    radial-gradient(circle at 14% 8%,rgba(240,77,114,.13),transparent 24%),
    radial-gradient(circle at 82% 16%,rgba(141,91,183,.11),transparent 22%),
    radial-gradient(circle at 50% 100%,rgba(240,77,114,.05),transparent 28%),
    linear-gradient(145deg,#09090c,#0f0d12 56%,#09090b);
}

/* More vivid chrome */
.topbar{
  background:linear-gradient(180deg,#1a131a,#120f14);
  border-bottom-color:rgba(248,243,247,.13);
}
.window-nav button{
  color:#b6a2af;
}
.window-nav button:hover{
  color:#fff;
  background:#231821;
}
.window-nav button.active{
  color:#fff;
  background:linear-gradient(180deg,#331d28,#24161e);
  box-shadow:
    inset 0 -2px 0 #f04d72,
    0 0 0 1px rgba(240,77,114,.05);
}
.brand-glyph{
  border-color:rgba(240,77,114,.28);
  background:linear-gradient(145deg,#311822,#181219);
}
.command-btn{
  background:linear-gradient(180deg,#2b1820,#1a1218);
  border-color:rgba(240,77,114,.22);
  color:#e2a7b8;
}
.command-btn:hover{
  background:#361b25;
  border-color:rgba(240,77,114,.38);
}
.discord-btn{
  background:linear-gradient(135deg,#f04d72,#b54066);
  box-shadow:0 10px 28px rgba(240,77,114,.16);
}
.discord-btn:hover{
  background:linear-gradient(135deg,#ff6488,#c34c73);
}

/* Home remains the user's requested GIF, but a bit livelier */
.home-gif{
  filter:saturate(.98) contrast(1.10) brightness(.70) !important;
}
.home-cinematic-overlay{
  background:
    linear-gradient(90deg,rgba(8,7,10,.90) 0%,rgba(8,7,10,.60) 42%,rgba(8,7,10,.28) 72%,rgba(8,7,10,.52)),
    linear-gradient(180deg,rgba(8,7,10,.08),rgba(8,7,10,.46) 70%,rgba(8,7,10,.90)),
    radial-gradient(circle at 72% 18%,rgba(240,77,114,.10),transparent 28%);
}

/* Each non-home window now has its own gif */
.app-view[data-view-panel="about"] .view-frame::before{
  background-image:url("assets/window-about.gif") !important;
  opacity:.11 !important;
  filter:saturate(.95) contrast(1.04) brightness(.74);
}
.app-view[data-view-panel="owners"] .view-frame::before{
  background-image:url("assets/window-owners.gif") !important;
  opacity:.12 !important;
  filter:saturate(1.0) contrast(1.05) brightness(.74);
}
.app-view[data-view-panel="war"] .view-frame::before{
  background-image:url("assets/window-war.gif") !important;
  opacity:.10 !important;
  filter:saturate(.92) contrast(1.03) brightness(.72);
}
.app-view[data-view-panel="join"] .view-frame::before{
  background-image:url("assets/window-join.gif") !important;
  opacity:.12 !important;
  filter:saturate(.94) contrast(1.04) brightness(.74);
}
.app-view[data-view-panel="values"] .view-frame::before{
  background-image:url("assets/window-values.gif") !important;
  opacity:.09 !important;
  filter:saturate(.90) contrast(1.02) brightness(.72);
}

.app-view[data-view-panel="about"] .view-frame::after,
.app-view[data-view-panel="owners"] .view-frame::after,
.app-view[data-view-panel="war"] .view-frame::after,
.app-view[data-view-panel="join"] .view-frame::after,
.app-view[data-view-panel="values"] .view-frame::after{
  background:
    linear-gradient(180deg,rgba(9,9,12,.44),rgba(9,9,12,.72) 72%,rgba(9,9,12,.93)),
    radial-gradient(circle at 76% 14%,rgba(240,77,114,.10),transparent 26%),
    radial-gradient(circle at 18% 86%,rgba(141,91,183,.08),transparent 28%) !important;
}

/* Frames and cards more colorful but still matte */
.view-frame{
  border-color:rgba(248,243,247,.13) !important;
  box-shadow:
    0 24px 74px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.015) inset !important;
}
.view-bar{
  background:linear-gradient(180deg,#221620,#171219) !important;
  border-bottom-color:rgba(248,243,247,.12) !important;
}
.red-label,
.micro{
  color:#ff6f93 !important;
}

/* Owners keep aura */
.owner-card{
  border-color:rgba(248,243,247,.14) !important;
}
.owner-card::before{
  background:
    radial-gradient(circle at 14% 10%,rgba(240,77,114,.13),transparent 30%),
    radial-gradient(circle at 86% 12%,rgba(141,91,183,.12),transparent 34%) !important;
}
.owner-card:hover{
  box-shadow:
    0 30px 85px rgba(0,0,0,.34),
    0 0 38px rgba(240,77,114,.10),
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
}
.owner-bottom small{
  color:#ffc0d0 !important;
}

/* Join richer */
.join-left{
  background:
    linear-gradient(180deg,rgba(26,17,22,.82),rgba(13,12,17,.94)) !important;
}
.join-card{
  background:
    linear-gradient(180deg,rgba(25,18,24,.82),rgba(14,13,18,.94)) !important;
  border-color:rgba(248,243,247,.11) !important;
}
.join-card:hover{
  border-color:rgba(240,77,114,.24) !important;
}

/* About / War / misc cards */
.feature-row>div,
.war-tags span,
.market-card,
.trade-panel,
.pick-card{
  background:
    linear-gradient(180deg,rgba(23,18,22,.82),rgba(12,12,16,.92)) !important;
  border-color:rgba(248,243,247,.10) !important;
}
.team-row:hover{
  background:linear-gradient(90deg,rgba(240,77,114,.08),rgba(141,91,183,.06),transparent) !important;
}

/* Values accents more vivid */
.offer-user-pill{
  border-color:rgba(141,91,183,.44) !important;
  background:rgba(141,91,183,.14) !important;
  color:#d7b7f0 !important;
}
.them-pill{
  border-color:rgba(240,77,114,.40) !important;
  background:rgba(240,77,114,.12) !important;
  color:#f4b7c8 !important;
}
.offer-summary{
  border-color:rgba(248,243,247,.11) !important;
  background:rgba(12,10,16,.44) !important;
}
.value-icon{
  background:rgba(141,91,183,.18) !important;
  color:#d1b4ef !important;
}
.demand-icon{
  background:rgba(93,159,110,.16) !important;
  color:#9ad3aa !important;
}
.item-icon{
  background:rgba(240,77,114,.14) !important;
  color:#f3afc1 !important;
}
.offer-summary strong{
  color:#fff !important;
}
.final-slot.next-slot{
  border-color:rgba(240,77,114,.34) !important;
  background:
    radial-gradient(circle at 50% 50%,rgba(240,77,114,.16),transparent 68%),
    #120f14 !important;
  color:#f5abc0 !important;
}
.filled-slot{
  background:
    radial-gradient(circle at 50% 34%,rgba(141,91,183,.09),transparent 55%),
    #111015 !important;
}
.final-slot.perm-slot{
  border-color:rgba(240,77,114,.28) !important;
  background:
    radial-gradient(circle at 50% 34%,rgba(240,77,114,.12),transparent 58%),
    #121014 !important;
}
.trade-core-label{
  color:#8f818d !important;
}
.core-divider{
  border-color:rgba(248,243,247,.12) !important;
  background:#141217 !important;
}
.core-divider span{
  color:#a599a5 !important;
}
.balance-bar{
  background:#1a151e !important;
}
.balance-fill{
  background:linear-gradient(90deg,#f04d72,#8d5bb7) !important;
}
.trade-toolbar button,
.secondary{
  background:linear-gradient(180deg,#2b1820,#1a1218) !important;
  border-color:rgba(248,243,247,.11) !important;
}
.trade-toolbar .accent-tool{
  background:linear-gradient(135deg,#f04d72,#b54066) !important;
  border-color:rgba(240,77,114,.30) !important;
}

/* No noise whatsoever */
.grain,
.scanlines,
.grid-bg,
.floating-ash{
  display:none !important;
}


/* ================================================================
   V17 — HOME GIF ONLY
   ================================================================ */

/* Only Home stays animated */
.app-view[data-view-panel="about"] .view-frame::before,
.app-view[data-view-panel="owners"] .view-frame::before,
.app-view[data-view-panel="war"] .view-frame::before,
.app-view[data-view-panel="join"] .view-frame::before,
.app-view[data-view-panel="values"] .view-frame::before{
  display:none !important;
}

/* Static high-depth backgrounds instead */
.app-view[data-view-panel="about"] .view-frame{
  background:
    radial-gradient(circle at 18% 16%, rgba(240,77,114,.10), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(141,91,183,.08), transparent 34%),
    linear-gradient(145deg,#181218,#0f0d12 62%,#0b0a0e) !important;
}

.app-view[data-view-panel="owners"] .view-frame{
  background:
    radial-gradient(circle at 20% 15%, rgba(240,77,114,.13), transparent 28%),
    radial-gradient(circle at 82% 14%, rgba(141,91,183,.11), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(240,77,114,.05), transparent 36%),
    linear-gradient(145deg,#1a1218,#0f0d12 62%,#0a090d) !important;
}

.app-view[data-view-panel="war"] .view-frame{
  background:
    radial-gradient(circle at 12% 18%, rgba(141,91,183,.10), transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(240,77,114,.08), transparent 30%),
    linear-gradient(145deg,#15131a,#0d0c11 64%,#09090c) !important;
}

.app-view[data-view-panel="join"] .view-frame{
  background:
    radial-gradient(circle at 18% 18%, rgba(240,77,114,.11), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(141,91,183,.10), transparent 32%),
    linear-gradient(145deg,#181218,#0f0d12 64%,#0a090d) !important;
}

.app-view[data-view-panel="values"] .view-frame{
  background:
    radial-gradient(circle at 16% 16%, rgba(240,77,114,.08), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(141,91,183,.09), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(240,77,114,.04), transparent 36%),
    linear-gradient(145deg,#141116,#0d0c10 66%,#09090c) !important;
}

/* Extra static depth without visual noise */
.app-view[data-view-panel="about"] .view-frame::after,
.app-view[data-view-panel="owners"] .view-frame::after,
.app-view[data-view-panel="war"] .view-frame::after,
.app-view[data-view-panel="join"] .view-frame::after,
.app-view[data-view-panel="values"] .view-frame::after{
  content:"";
  display:block !important;
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.018) 50%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.008), transparent 30%);
}

/* subtle corner accents */
.app-view[data-view-panel="owners"] .view-frame{
  box-shadow:
    inset 0 0 70px rgba(240,77,114,.025),
    0 24px 74px rgba(0,0,0,.34) !important;
}
.app-view[data-view-panel="war"] .view-frame{
  box-shadow:
    inset 0 0 70px rgba(141,91,183,.025),
    0 24px 74px rgba(0,0,0,.34) !important;
}
.app-view[data-view-panel="join"] .view-frame{
  box-shadow:
    inset 0 0 70px rgba(240,77,114,.025),
    0 24px 74px rgba(0,0,0,.34) !important;
}

/* Home remains the only animated page */
.home-gif{
  display:block !important;
  background-image:url("assets/home-requested.gif") !important;
}


/* ==========================================================
   V18 FINAL REDEEM — hard cleanup
   ========================================================== */

/* JOIN: ZERO GIFS / ZERO background images */
.app-view[data-view-panel="join"] .view-frame::before,
.app-view[data-view-panel="join"] .view-frame::after,
.join-layout::before,
.join-layout::after,
.join-left::before,
.join-left::after,
.join-right::before,
.join-right::after,
.join-card::before,
.join-card::after,
.join-bg,
.join-visual-stack,
.join-card-art{
  background-image:none !important;
}

.app-view[data-view-panel="join"] .view-frame::before{
  display:none !important;
}

.app-view[data-view-panel="join"] .view-frame::after{
  display:block !important;
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 16% 18%,rgba(240,77,114,.12),transparent 30%),
    radial-gradient(circle at 86% 74%,rgba(141,91,183,.10),transparent 34%),
    linear-gradient(135deg,transparent 0 48%,rgba(255,255,255,.012) 50%,transparent 52%) !important;
}

.join-layout{
  background:none !important;
}

.join-left{
  background:
    radial-gradient(circle at 78% 18%,rgba(240,77,114,.08),transparent 28%),
    linear-gradient(145deg,rgba(30,18,25,.92),rgba(14,13,18,.97)) !important;
}

.join-left::before,
.join-left::after{
  display:none !important;
}

.join-card{
  background:
    radial-gradient(circle at 82% 16%,rgba(141,91,183,.05),transparent 30%),
    linear-gradient(160deg,rgba(27,19,25,.90),rgba(14,13,18,.96)) !important;
}

.join-card::before,
.join-card::after{
  display:none !important;
}

/* ----------------------------------------------------------
   Fix the doubled + / cross-looking Add Fruit icon.
   There is now exactly ONE plus, drawn with CSS.
   ---------------------------------------------------------- */
.final-slot.empty .slot-plus,
.final-slot.empty .slot-ghost{
  font-size:0 !important;
  line-height:0 !important;
  width:28px;
  height:28px;
  position:relative;
  display:block;
  opacity:1 !important;
}

.final-slot.empty .slot-plus::before,
.final-slot.empty .slot-plus::after,
.final-slot.empty .slot-ghost::before,
.final-slot.empty .slot-ghost::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:#a98ad0;
  box-shadow:0 0 14px rgba(169,138,208,.18);
}

.final-slot.empty .slot-plus::before,
.final-slot.empty .slot-ghost::before{
  width:22px;
  height:2px;
}

.final-slot.empty .slot-plus::after,
.final-slot.empty .slot-ghost::after{
  width:2px;
  height:22px;
}

.final-slot.empty .slot-ghost{
  opacity:.22 !important;
}

.final-slot.next-slot .slot-plus::before,
.final-slot.next-slot .slot-plus::after{
  background:#b793e5;
}

/* Make add slots perfectly centered */
.final-slot.empty{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  padding:0 !important;
}

.final-slot.empty small{
  margin-top:8px;
  line-height:1;
}

/* Small final visual consistency pass */
.offer-slots{
  align-items:stretch;
}
.final-slot{
  box-sizing:border-box;
}
.offer-summary,
.offer-side,
.trade-core,
.join-left,
.join-card,
.owner-card{
  -webkit-font-smoothing:antialiased;
}

/* Home is the ONLY element allowed to use the requested GIF */
.home-gif{
  background-image:url("assets/home-requested.gif") !important;
}


/* ==========================================================
   V19 — ACTUAL PLUS FIX
   ========================================================== */

.final-slot.empty .slot-plus,
.final-slot.empty .slot-ghost{
  position:static !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  line-height:1 !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:34px !important;
  font-weight:300 !important;
  letter-spacing:0 !important;
  color:#b793e5 !important;
  text-shadow:0 0 14px rgba(183,147,229,.18);
  opacity:1 !important;
}

/* Kill every CSS-drawn bar from the previous versions */
.final-slot.empty .slot-plus::before,
.final-slot.empty .slot-plus::after,
.final-slot.empty .slot-ghost::before,
.final-slot.empty .slot-ghost::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  box-shadow:none !important;
}

/* Empty inactive slots get a subtle normal plus too */
.final-slot.empty .slot-ghost{
  font-size:26px !important;
  color:#665d70 !important;
  opacity:.28 !important;
}

/* Ensure the icon + label are dead-center */
.final-slot.empty{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:8px !important;
}

.final-slot.empty small{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  line-height:1 !important;
}


/* ==========================================================
   V20 — REAL PLUS FIX + READABILITY PASS
   ========================================================== */

/* Legacy plus implementations are dead. */
.slot-plus,
.slot-ghost,
.slot-plus::before,
.slot-plus::after,
.slot-ghost::before,
.slot-ghost::after{
  display:none !important;
  content:none !important;
}

/* One icon. One SVG. No font glyphs. No pseudo-elements. */
.slot-plus-icon,
.slot-ghost-icon{
  width:30px;
  height:30px;
  display:block;
  flex:0 0 30px;
  margin:0;
  padding:0;
}

.slot-plus-icon svg,
.slot-ghost-icon svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.slot-plus-icon path,
.slot-ghost-icon path{
  fill:none;
  stroke:#b793e5;
  stroke-width:1.8;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

.slot-plus-icon{
  filter:drop-shadow(0 0 7px rgba(183,147,229,.18));
}

.slot-ghost-icon{
  width:24px;
  height:24px;
  flex-basis:24px;
  opacity:.22;
}

.slot-ghost-icon path{
  stroke:#756c7d;
}

.final-slot.empty{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:9px !important;
  padding:0 !important;
}

/* ---------- Readability: bump the text that was unnecessarily tiny ---------- */

.red-label{
  font-size:9px !important;
}

.view-bar-title{
  font-size:8px !important;
}

.view-bar-num{
  font-size:8px !important;
}

.micro{
  font-size:8px !important;
}

.hero-kicker{
  font-size:9px !important;
}

.hero-sub{
  font-size:11px !important;
  line-height:1.55 !important;
}

.hero-meta{
  font-size:8px !important;
}

.stat-card span{
  font-size:7px !important;
}

.stat-card strong{
  font-size:15px !important;
}

.dock-card span,
.dock-card small{
  font-size:7px !important;
}

.dock-card strong{
  font-size:10px !important;
}

.about-copy p{
  font-size:11px !important;
  line-height:1.65 !important;
}

.about-stat span,
.feature-row span{
  font-size:7px !important;
}

.about-stat strong{
  font-size:15px !important;
}

.feature-row strong{
  font-size:11px !important;
}

.owners-sub{
  font-size:12px !important;
  line-height:1.6 !important;
}

.owner-top{
  font-size:8px !important;
}

.owner-bottom p{
  font-size:8px !important;
}

.owner-bottom small{
  font-size:8px !important;
}

.war-head p,
.war-note,
.team-row small,
.war-tags span{
  font-size:8px !important;
}

.team-row strong{
  font-size:12px !important;
}

.join-lead{
  font-size:11px !important;
  line-height:1.6 !important;
}

.join-card p{
  font-size:8px !important;
  line-height:1.5 !important;
}

.join-card > span{
  font-size:7px !important;
}

.join-actions a,
.join-actions button,
.invite-box{
  font-size:8px !important;
}

.invite-box span,
.invite-box button{
  font-size:7px !important;
}

.value-meta span{
  font-size:7px !important;
}

.value-meta strong{
  font-size:9px !important;
}

.trade-toolbar button{
  font-size:8px !important;
}

.offer-user-pill{
  font-size:9px !important;
}

.offer-summary small{
  font-size:7px !important;
}

.offer-summary strong{
  font-size:13px !important;
}

.final-slot.empty small{
  font-size:8px !important;
  line-height:1 !important;
}

.final-slot .slot-details strong{
  font-size:11px !important;
}

.final-slot .slot-details span{
  font-size:8px !important;
}

.trade-core-label{
  font-size:7px !important;
}

.trade-core .trade-score small{
  font-size:7px !important;
}

.core-divider span{
  font-size:9px !important;
}

.balance-labels{
  font-size:7px !important;
}

.core-reset{
  font-size:7px !important;
}

.trade-foot,
.final-trade-foot{
  font-size:8px !important;
}

.market-card small,
.market-meta span,
.market-value span{
  font-size:7px !important;
}

.market-card strong{
  font-size:11px !important;
}

.market-value strong{
  font-size:12px !important;
}

.pick-card small,
.modal-search,
.modal-tabs button{
  font-size:8px !important;
}

.pick-card strong{
  font-size:11px !important;
}

.owner-modal-role,
.owner-modal-tags span{
  font-size:8px !important;
}

.owner-modal-bio{
  font-size:11px !important;
  line-height:1.6 !important;
}

/* Keep mobile sane after the readability bump */
@media(max-width:700px){
  .owners-sub{font-size:11px !important}
  .hero-sub,
  .about-copy p,
  .join-lead,
  .owner-modal-bio{font-size:10px !important}
}


/* V21 — definitive empty-slot fix */
.trade-slot.empty::before,
.trade-slot.empty::after,
.final-slot.empty::before,
.final-slot.empty::after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  width:0 !important;
  height:0 !important;
}

/* Only this SVG is allowed to render the plus. */
.slot-plus-icon{
  width:30px !important;
  height:30px !important;
  display:block !important;
  position:static !important;
  transform:none !important;
}

.slot-plus-icon svg{
  width:30px !important;
  height:30px !important;
  display:block !important;
}

.slot-plus-icon path{
  fill:none !important;
  stroke:#b793e5 !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
}


/* ================================================================
   V22 — STAFF PREVIEW
   ================================================================ */

.command-btn,
.command-overlay,
.mobile-menu{
  display:none !important;
}

.trade-toolbar .share-tool{
  background:linear-gradient(180deg,#16131a,#100f13) !important;
  border-color:rgba(248,243,247,.13) !important;
  color:#c4b8c2 !important;
}
.trade-toolbar .share-tool:hover{
  color:#fff !important;
  border-color:rgba(240,77,114,.34) !important;
  background:linear-gradient(180deg,#21151b,#151014) !important;
}

.trade-core .balance-bar{
  position:relative;
  overflow:visible;
}
.trade-core .balance-bar > #balanceFill{
  transition:width .22s ease !important;
}
.balance-center{
  position:absolute;
  top:-3px;
  bottom:-3px;
  left:50%;
  width:1px;
  background:rgba(255,255,255,.28);
  transform:translateX(-.5px);
  pointer-events:none;
}
.balance-marker{
  position:absolute;
  top:50%;
  left:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#f5edf2;
  border:2px solid #21131a;
  box-shadow:0 0 0 1px rgba(240,77,114,.42);
  transition:left .22s ease;
  pointer-events:none;
}
.trade-difference{
  margin-top:9px;
  min-height:10px;
  color:#746a72;
  font-size:6px;
  line-height:1.2;
  font-weight:1000;
  letter-spacing:.12em;
  text-align:center;
}

@media(min-width:1001px){
  .owner-grid .cxsh-card{transform:translateY(-5px)}
  .owner-grid .fischi-card{transform:translateY(5px)}
}
.owner-card .owner-bg{
  transform:translate3d(var(--owner-x,0px),var(--owner-y,0px),0) scale(1.015) !important;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),filter .25s ease !important;
}
.owner-card:hover .owner-bg{
  transform:translate3d(var(--owner-x,0px),var(--owner-y,0px),0) scale(1.04) !important;
}

.owner-profile-view{
  position:fixed;
  top:var(--top);
  bottom:var(--bottom);
  left:0;
  right:0;
  z-index:90;
  padding:14px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px) scale(.997);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.owner-profile-view.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.owner-profile-frame{
  height:100%;
  border:1px solid rgba(245,242,247,.13);
  background:
    radial-gradient(circle at 76% 25%,rgba(240,77,114,.055),transparent 28%),
    linear-gradient(135deg,#0b0a0d,#070709 62%);
  overflow:hidden;
}
.owner-profile-bar{
  height:38px;
  border-bottom:1px solid rgba(245,242,247,.11);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 13px;
  color:#6f666e;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.15em;
}
.owner-profile-bar>span:last-child{text-align:right}
.owner-profile-back{
  justify-self:start;
  border:0;
  background:none;
  color:#9e929b;
  cursor:pointer;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.15em;
  transition:color .15s ease,transform .15s ease;
}
.owner-profile-back:hover{
  color:#fff;
  transform:translateX(-2px);
}
.owner-profile-layout{
  height:calc(100% - 38px);
  display:grid;
  grid-template-columns:minmax(300px,44%) 1fr;
}
.owner-profile-art-wrap{
  position:relative;
  min-width:0;
  border-right:1px solid rgba(245,242,247,.10);
  overflow:hidden;
  background:#09090d;
}
.owner-profile-art{
  position:absolute;
  inset:18px;
  background-position:center;
  background-repeat:no-repeat;
  filter:saturate(.92) contrast(1.02);
}
.owner-profile-art-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 68%,rgba(8,8,10,.30)),
    linear-gradient(180deg,transparent 70%,rgba(7,7,9,.58));
  pointer-events:none;
}
.owner-profile-art-label{
  position:absolute;
  left:24px;
  bottom:17px;
  z-index:2;
  color:rgba(255,255,255,.14);
  font-size:clamp(2.3rem,5vw,5.5rem);
  line-height:.8;
  font-weight:1000;
  letter-spacing:-.07em;
}
.owner-profile-copy{
  align-self:center;
  width:min(680px,82%);
  margin:0 auto;
}
.owner-profile-kicker{
  color:#e96584;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.20em;
}
.owner-profile-copy h3{
  margin-top:17px;
  font-size:clamp(4rem,8vw,8rem);
  line-height:.78;
  letter-spacing:-.075em;
}
.owner-profile-bio{
  max-width:650px;
  margin-top:28px;
  color:#9d939a;
  font-size:13px;
  line-height:1.72;
}
.owner-profile-rule{
  width:100%;
  height:1px;
  margin:30px 0 18px;
  background:rgba(245,242,247,.11);
}
.owner-profile-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.owner-profile-tags span{
  border:1px solid rgba(245,242,247,.12);
  background:#0e0c10;
  color:#92868e;
  padding:8px 10px;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.13em;
}
.owner-profile-note{
  margin-top:24px;
  color:#4f474d;
  font-size:7px;
  font-weight:1000;
  letter-spacing:.17em;
}

.mobile-bottom-nav{
  display:none;
}
@media(max-width:1000px){
  :root{--mobile-nav-h:66px}

  .window-nav{display:none !important}
  .mobile-bottom-nav{
    position:fixed;
    z-index:120;
    left:0;
    right:0;
    bottom:0;
    height:var(--mobile-nav-h);
    display:grid;
    grid-template-columns:repeat(6,1fr);
    border-top:1px solid rgba(245,242,247,.13);
    background:rgba(8,8,10,.97);
    backdrop-filter:blur(16px);
  }
  .mobile-bottom-nav button{
    position:relative;
    min-width:0;
    border:0;
    border-right:1px solid rgba(245,242,247,.06);
    background:transparent;
    color:#625a60;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    cursor:pointer;
  }
  .mobile-bottom-nav button:last-child{border-right:0}
  .mobile-bottom-nav button::before{
    content:"";
    position:absolute;
    top:0;
    left:28%;
    right:28%;
    height:1px;
    background:transparent;
    transition:background .15s ease;
  }
  .mobile-bottom-nav button.active{
    color:#f4edf1;
    background:linear-gradient(180deg,rgba(240,77,114,.07),transparent 72%);
  }
  .mobile-bottom-nav button.active::before{
    background:#f04d72;
    box-shadow:0 0 10px rgba(240,77,114,.30);
  }
  .mobile-bottom-nav svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mobile-bottom-nav small{
    font-size:6px;
    font-weight:1000;
    letter-spacing:.10em;
  }

  .bottom-status{display:none !important}
  .desktop{bottom:var(--mobile-nav-h) !important}
  .owner-profile-view{bottom:var(--mobile-nav-h) !important}
}

@media(max-width:700px){
  .owner-profile-view{
    top:62px;
    padding:8px;
  }
  .owner-profile-frame{overflow:auto}
  .owner-profile-bar{
    grid-template-columns:1fr auto;
    height:36px;
  }
  .owner-profile-bar>span:nth-child(2){display:none}
  .owner-profile-layout{
    min-height:calc(100% - 36px);
    height:auto;
    grid-template-columns:1fr;
  }
  .owner-profile-art-wrap{
    min-height:45vh;
    border-right:0;
    border-bottom:1px solid rgba(245,242,247,.10);
  }
  .owner-profile-art{inset:10px}
  .owner-profile-copy{
    width:auto;
    margin:0;
    padding:28px 20px 34px;
  }
  .owner-profile-copy h3{
    font-size:clamp(3.7rem,20vw,6rem);
  }
  .owner-profile-bio{
    margin-top:20px;
    font-size:11px;
  }
  .owner-profile-rule{margin:22px 0 16px}

  .trade-toolbar .trade-toolbar-right{
    display:grid !important;
    grid-template-columns:repeat(3,1fr);
  }
  .trade-toolbar .trade-toolbar-right button{
    min-width:0 !important;
  }

  .trade-difference{
    font-size:6px !important;
    letter-spacing:.09em;
  }

  .mobile-bottom-nav small{
    font-size:5.5px;
    letter-spacing:.06em;
  }
}

@media(max-width:430px){
  .mobile-bottom-nav svg{width:16px;height:16px}
  .mobile-bottom-nav small{font-size:5px}
}

/* Fischi owner card image — V22 quick update */
.owner-bg-fischi{
  background-image:url("assets/owner-fischi-v4.png") !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center 38% !important;
  background-color:#09090c !important;
  opacity:.68 !important;
}