/* Eggware Platform UI — shared responsive interface layer */
:root{
  color-scheme:dark;
  --orange:#ff6b1a;--orange2:#ff934f;--purple:#9a72ff;
  --bg:#07090b;--bg-soft:#0b0e11;--surface:#101419;--surface-2:#151b20;
  --line:#252d33;--line-strong:#39434a;--text:#f4f5f2;--muted:#929ca2;
  --green:#50d995;--red:#ff6761;--focus:#ffc091;
  --radius:12px;--radius-sm:8px;--shadow:0 24px 70px rgba(0,0,0,.34);
  --content:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-width:320px;background:radial-gradient(900px 520px at 86% -12%,rgba(255,107,26,.09),transparent 65%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
::selection{background:var(--orange);color:#090a0b}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
a{color:inherit}
img{max-width:100%}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
:where(input,select,textarea){border-radius:var(--radius-sm)!important;border:1px solid var(--line-strong)!important;background:#090d10!important;color:var(--text)!important;min-height:44px;padding:10px 12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
:where(input,select,textarea):hover{border-color:#536069!important}
:where(input,select,textarea):focus{border-color:var(--orange)!important;box-shadow:0 0 0 3px rgba(255,107,26,.12)!important;outline:none}
textarea{line-height:1.55;resize:vertical}
select{appearance:auto}
:where(button,.button,.primary,.nav-cta){border-radius:var(--radius-sm)!important;clip-path:none!important;min-height:42px;font-family:inherit!important;font-weight:800!important;letter-spacing:.06em;transition:transform .18s,border-color .18s,background .18s,color .18s,box-shadow .18s}
:where(button,.button,.primary,.nav-cta):hover{transform:translateY(-1px)}
:where(button,.button,.primary,.nav-cta):active{transform:translateY(0)}
:where(button,.button,.primary)[disabled]{cursor:not-allowed;opacity:.45;transform:none}

/* Shared masthead */
body>header,.shell>header,.builder-nav,.nav{
  min-height:72px!important;height:auto!important;padding:10px clamp(16px,3vw,44px)!important;
  border-bottom:1px solid var(--line)!important;background:rgba(7,9,11,.88)!important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:relative;z-index:50;
}
body>header,.shell>header,.builder-nav,.nav{display:flex;align-items:center!important;justify-content:space-between;gap:20px}
:where(body>header,.shell>header,.builder-nav,.nav) :where(.brand,.wordmark,a:first-child){text-decoration:none}
:where(body>header,.shell>header,.builder-nav,.nav) img{width:48px!important;height:48px!important;object-fit:contain;border-radius:10px!important}
:where(body>header,.shell>header,.builder-nav,.nav) .brand{display:flex;align-items:center;gap:11px;color:#fff;font-family:inherit!important;font-size:12px!important;font-weight:850!important;letter-spacing:.14em}
:where(body>header,.shell>header,.builder-nav,.nav)>div:last-child{color:var(--muted);font-size:9px;line-height:1.6}
:where(body>header,.shell>header,.builder-nav,.nav)>div:last-child a{color:#d9dde0;text-decoration:none}
:where(body>header,.shell>header,.builder-nav,.nav)>div:last-child a:hover{color:var(--orange)}

/* Content rhythm and typography */
h1,h2,h3{color:var(--text);text-wrap:balance}
p{line-height:1.65}
.wrap{width:min(1240px,calc(100% - 40px))!important}
.eyebrow,.kicker,:where(main section)>small,:where(main section)>span:first-child{font-family:inherit!important;font-weight:800;letter-spacing:.14em}
.panel,.card,.tool-card,.sidebar,.game-room,fieldset,.source-box,.gate-card,.metrics article,.grid>article,.inbox-layout>aside,.conversation-view,.table,.round-panel,.play-panel,.result-panel,.match-chat,.matchmaking,.workspace{
  border-color:var(--line)!important;border-radius:var(--radius)!important;background:linear-gradient(145deg,rgba(20,26,31,.96),rgba(12,16,19,.96))!important;box-shadow:0 1px 0 rgba(255,255,255,.025);overflow:hidden
}
.panel:hover,.tool-card:hover{border-color:#354149!important}
.hero p,.builder-head p,.heading p,.section-head p,.rules-copy li,.module-help{color:var(--muted)!important}

/* Landing page refinement */
body>.grain{opacity:.025!important}
.nav{padding-inline:0!important;background:transparent!important;backdrop-filter:none;border-bottom-color:rgba(255,255,255,.08)!important}
.brand-mark{border-radius:9px;clip-path:none!important}
.hero{gap:clamp(38px,6vw,86px)!important}
.hero h1{letter-spacing:-.045em!important}
.hero-actions{flex-wrap:wrap}
.button.primary{background:linear-gradient(135deg,var(--orange),#ff8841)!important;box-shadow:0 12px 30px rgba(255,107,26,.18)}
.button.ghost{background:rgba(255,255,255,.025);border-color:var(--line-strong)!important}
.roulette-preview{border-radius:16px!important;border-color:var(--line)!important;background:var(--surface)!important;box-shadow:var(--shadow)!important;overflow:hidden}
.tool-grid{gap:16px!important}.tool-card{border-radius:16px!important}.tags{flex-wrap:wrap}.tags span{border-radius:999px;border-color:var(--line-strong)!important;background:#0b0f12;padding:7px 10px!important}
.ticker{border-color:var(--line)!important;background:#0b0e11!important}
footer{border-color:var(--line)!important}

/* Tool builders and account screens */
.builder-shell,.shell{width:min(var(--content),calc(100% - 48px));margin-inline:auto}
.builder-shell{padding-top:32px!important}.builder-head{gap:24px}.builder-grid{gap:20px!important}
fieldset{padding:20px!important}legend{color:#e7e9e7!important}
.save-panel button,.primary,.save,.activation>a,.setup>a{background:linear-gradient(135deg,var(--orange),#ff8841)!important;color:#090a0b!important;border:0!important;box-shadow:0 10px 25px rgba(255,107,26,.13)}
.preview-frame{border-radius:var(--radius)!important;border-color:var(--line)!important;overflow:hidden;box-shadow:var(--shadow)}
.source-box{padding:18px!important}

/* Matchmaking */
.game-room,.sidebar{min-height:0!important}.layout{gap:16px!important}.room{border-radius:9px!important;border-color:var(--line)!important;background:#12181c!important}.room:hover{border-color:#465159!important}.room.active{background:linear-gradient(135deg,var(--orange),#e9580c)!important}
.player-card{border-radius:var(--radius)!important;border-color:var(--line)!important;background:#12181c!important}.player-card img,.identity img{border:2px solid #2b353b}
.letters i{border-radius:6px!important}.chat-message{border-radius:8px!important}.chat-form{gap:8px;padding:8px}.chat-form input{border:1px solid var(--line)!important}.chat-form button{border-radius:8px!important;background:var(--orange)!important}
.tr{min-width:660px}.table{overflow-x:auto!important}.invite-link input{max-width:780px}.control-buttons button,.result-buttons button{border-radius:8px!important}

/* Roulette keeps its fixed reels but gains modern controls */
.shell{padding:20px 0 36px!important}.shell>header{padding-inline:4px!important;background:transparent!important;backdrop-filter:none!important}
.controls{height:auto!important;min-height:66px;flex-wrap:wrap;padding:10px 4px!important}.controls button{padding:11px 18px!important}.controls input{width:min(180px,45vw)!important}
.slot,.mini{border-radius:9px!important;border-color:#4a555b!important}.class-row{border-radius:7px!important;border-color:var(--line-strong)!important}.loadout,.kit{gap:10px!important}

/* Social profile */
.social-main{width:min(680px,calc(100% - 32px))!important}.avatar{clip-path:none!important;border-radius:22px!important;background:#14191d!important;border:1px solid var(--line);overflow:hidden}.social-link{border-radius:12px!important;border-color:var(--line)!important;background:rgba(18,23,27,.95)!important;box-shadow:0 8px 25px rgba(0,0,0,.12)}.social-link:hover{border-color:#46535a!important;background:#171e23!important}.social-link.featured-link{background:linear-gradient(135deg,var(--orange),#ff8c44)!important}.link-icon{border-radius:10px!important}

/* Admin and data-heavy screens */
.metrics{gap:10px!important}.metrics article{padding:18px!important}.list>div{border-color:var(--line)!important}.filters{gap:8px;flex-wrap:wrap}.filters button{border:1px solid var(--line)!important;background:#0e1316!important;color:#aab2b7!important}.filters button.active{background:var(--orange)!important;color:#090b0c!important;border-color:var(--orange)!important}
dialog{border-radius:14px!important}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:#39444a #0b0e11}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#0b0e11}::-webkit-scrollbar-thumb{background:#39444a;border:2px solid #0b0e11;border-radius:10px}

@media(max-width:1000px){
  .builder-shell,.shell{width:min(100% - 32px,var(--content))}
  .builder-grid{grid-template-columns:1fr!important}.preview-side{position:static!important}
}
@media(max-width:760px){
  body>header,.shell>header,.builder-nav,.nav{min-height:64px!important;padding:8px 16px!important}
  :where(body>header,.shell>header,.builder-nav,.nav) img{width:42px!important;height:42px!important}
  :where(body>header,.shell>header,.builder-nav,.nav)>div:last-child{max-width:55%;text-align:right}
  .builder-shell,.shell{width:min(100% - 24px,var(--content))}
  .hero{padding-block:54px!important}.hero h1{letter-spacing:-.035em!important}
  .fields.two,.fields.three,.fields.four,.rosters,.players,.pulse{grid-template-columns:1fr!important}
  .section-head,.builder-head,.heading{align-items:flex-start!important;flex-direction:column!important}
  .save-panel{text-align:left!important;width:100%}.save-panel button{width:100%}
  .game-room{padding:16px!important}.player-card{min-height:0!important}
  .invite-link{padding:24px 12px!important}.invite-link h2{font-size:30px!important}
}
@media(max-width:520px){
  .wrap{width:calc(100% - 24px)!important}
  :where(body>header,.shell>header,.builder-nav,.nav)>div:last-child{font-size:7px}
  .hero-actions{display:grid!important;grid-template-columns:1fr;width:100%}.hero-actions .button{width:100%}
  .tool-card{padding:20px!important}.social-link{grid-template-columns:44px minmax(0,1fr) auto!important;padding:11px!important}
  .controls>*{flex:1 1 auto}.controls button{white-space:nowrap}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}