@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');:root{color-scheme:dark;--bg:#101116;--panel:#191c24;--line:#2c303b;--muted:#999eac;--text:#f5f6f8;--green:#a6f36b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}.sidebar{position:fixed;inset:0 auto 0 0;width:225px;background:#15171e;border-right:1px solid var(--line);padding:27px 17px;display:flex;flex-direction:column;z-index:4}.brand{font:700 21px 'Space Grotesk';color:var(--green);text-decoration:none;margin:0 8px 52px}.brand span{color:white}.sidebar small,main>section>small{font-size:10px;letter-spacing:1.8px;color:var(--green);font-weight:700;margin:0 10px 12px}.nav{border:0;background:none;color:#aeb2bf;text-align:left;padding:13px 12px;border-radius:8px;margin:2px 0}.nav:hover,.nav.active{background:#292d36;color:white}.sidebar>small:not(:first-child){margin-top:32px}.bottom{margin-top:auto;color:var(--muted);font-size:11px}.bottom button{width:100%;text-align:left;background:#20232b;color:white;border:1px solid var(--line);padding:11px;border-radius:8px;margin-top:12px}.main,main{margin-left:225px}header{height:75px;position:sticky;top:0;background:#101116ed;backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 5%;gap:15px;z-index:3}.search{position:relative;width:min(480px,65%)}.search input,input,select{background:#1c1f28;border:1px solid #343844;border-radius:8px;color:white;padding:12px;outline:none}.search input{width:100%;padding-left:40px}.search>span{position:absolute;left:13px;top:7px;font-size:23px;color:#aeb2bf}.primary{background:var(--green);color:#172012;border:0;border-radius:8px;padding:11px 16px;font-weight:700;cursor:pointer}.primary:hover{filter:brightness(1.08)}header>.primary{margin-left:auto}.view{padding:36px 5%;max-width:1550px;margin:auto}.hidden{display:none!important}h1,h2,h3{font-family:'Space Grotesk';letter-spacing:-.8px}h1{font-size:40px;margin:10px 0}h2{font-size:21px;margin:35px 0 17px}.muted{color:var(--muted);font-size:13px}.hero{border:1px solid #343a3d;border-radius:15px;background:linear-gradient(110deg,#222a28,#27342c 58%,#202a2d);min-height:300px;padding:42px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;margin-bottom:42px}.hero small{color:var(--green);letter-spacing:1.5px;font-size:10px;font-weight:700}.hero h1{font-size:43px;line-height:1.06}.hero em{font-style:normal;color:#c2ccb9}.hero p{color:#b2b8b1;margin:12px 0 22px}.hero>b{font:700 220px 'Space Grotesk';color:#b5f28a24;margin-right:8%;text-shadow:0 0 50px #a6f36b33}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card{border:1px solid var(--line);background:var(--panel);border-radius:11px;overflow:hidden;cursor:pointer}.card:hover{border-color:#738a5f;transform:translateY(-2px)}.cover{height:120px;background:linear-gradient(135deg,#354238,#222630);display:grid;place-items:center;font:700 50px 'Space Grotesk';color:#b6e99555}.cover img{width:100%;height:100%;object-fit:cover}.card-body{padding:12px}.card-title{font:600 14px 'Space Grotesk';white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-meta{font-size:10px;color:var(--muted);margin-top:9px}.offline{color:var(--green)}.toolbar{display:flex;justify-content:space-between;align-items:center;margin:24px 0 16px;color:var(--muted);font-size:12px}.toolbar select{padding:8px}.panel{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:11px;margin:25px 0}.inline{display:flex;gap:9px}.inline input{flex:1}.friend,.request{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:13px;margin:8px 0}.friend-info{flex:1;font-size:13px}.status{font-size:11px;color:var(--muted);margin-top:4px}.playing{color:var(--green)}.dot{width:8px;height:8px;border-radius:50%;background:#626978}.dot.on{background:var(--green)}.small{background:#292e38;border:1px solid #3a404c;border-radius:7px;color:white;padding:8px 10px;cursor:pointer}.chat-layout{display:grid;grid-template-columns:230px 1fr;min-height:420px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--panel)}#conversations{border-right:1px solid var(--line);padding:9px}.conversation{display:block;width:100%;text-align:left;padding:12px;background:none;border:0;color:white;border-radius:7px;cursor:pointer}.conversation.active,.conversation:hover{background:#2a3039}#chat{display:flex;flex-direction:column;min-height:420px}.chat-head{padding:14px;border-bottom:1px solid var(--line)}.chat-log{flex:1;padding:15px;overflow:auto}.bubble{background:#2b303a;padding:10px 12px;border-radius:10px;margin:7px 0;max-width:75%;font-size:12px;overflow-wrap:anywhere}.bubble.mine{background:#35462d;margin-left:auto}.compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.compose input{flex:1}.empty{padding:35px;text-align:center;color:var(--muted)}.back,.link{background:none;border:0;color:var(--green);padding:10px;cursor:pointer}.detail-hero{padding:35px;border-radius:12px;background:linear-gradient(110deg,#29372d,#20232c);margin:20px 0}.actions{display:flex;gap:10px;margin:20px 0}.actions button:not(.primary){background:#272c35;border:1px solid var(--line);color:white;border-radius:8px;padding:11px 15px;cursor:pointer}.suggestions{position:absolute;top:calc(100% + 5px);left:0;right:0;background:#222630;border:1px solid var(--line);border-radius:9px;overflow:hidden;z-index:9}.suggestions button{display:block;width:100%;padding:12px;text-align:left;background:none;border:0;color:white;cursor:pointer}.suggestions button:hover{background:#343b33}dialog{background:#1c2028;color:white;border:1px solid var(--line);border-radius:14px;width:min(410px,calc(100% - 30px));padding:28px}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}dialog small{color:var(--green);letter-spacing:1px}dialog h2{margin:8px 0 18px}.close{float:right;background:none;border:0;color:white;font-size:25px;cursor:pointer}form label{display:grid;gap:7px;margin:13px 0;color:#b9bec9;font-size:12px}form label input{width:100%}form .primary{width:100%;margin-top:8px}.mobile-brand{display:none}@media(max-width:1050px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.sidebar{width:60px;padding:18px 5px}.brand{font-size:0;margin:0 auto 45px}.brand:first-letter{font-size:22px}.sidebar small,.nav{font-size:0}.nav{text-align:center;padding:13px 0}.bottom>div,.bottom button{font-size:0;text-align:center;padding:8px}.main,main{margin-left:60px}header{height:65px;padding:0 12px}.mobile-brand{display:block;font:700 12px 'Space Grotesk'}.search{flex:1;width:auto}.search input{font-size:11px;padding:10px 5px 10px 32px}.hero{padding:25px;min-height:260px}.hero h1{font-size:32px}.hero>b{font-size:120px;margin:0}.view{padding:25px 14px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.cover{height:95px}.chat-layout{grid-template-columns:1fr}.inline{flex-direction:column}}



/* HUDGAMES visual refresh */
:root {
  --bg: #0c1018;
  --panel: #151c28;
  --line: #263244;
  --muted: #9aa8ba;
  --text: #edf3fb;
  --green: #a8ed72;
}
body { background: radial-gradient(ellipse at 72% -15%, #1d3040 0, transparent 42%), var(--bg); }
.sidebar { background: rgba(13,18,27,.96); border-color: #263244; }
.brand { letter-spacing: -.7px; }
.nav { cursor: pointer; transition: background .16s, color .16s; }
.nav.active { background: #253344; color: #fff; box-shadow: inset 3px 0 var(--green); }
header { background: rgba(12,16,24,.9); border-color: #263244; }
.search input, input, select { background: #141d2a; border-color: #304055; }
.search input:focus, input:focus, select:focus { border-color: #91c96b; box-shadow: 0 0 0 3px #a8ed7218; }
.hero { background: linear-gradient(115deg, #1b2c35, #1d302b 58%, #172532); border-color: #344b4a; }
.grid { gap: 18px; }
.card { background: linear-gradient(155deg, #192333, #121a26); border-color: #28384c; transition: transform .18s, border-color .18s, box-shadow .18s; }
.card:hover { border-color: #8bbd68; transform: translateY(-4px); box-shadow: 0 12px 30px #0005; }
.cover { height: 145px; background: linear-gradient(135deg, #293c4a, #24362d 55%, #1b2635); }
.card-body { padding: 14px; }
.card-title { font-size: 14px; min-height: 2.5em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { min-height: 14px; }
.primary { cursor: pointer; box-shadow: 0 5px 16px #a8ed7218; }
.actions button { cursor: pointer; }
.suggestions { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 420px; overflow: auto; background: #121b28; border: 1px solid #34445a; border-radius: 12px; box-shadow: 0 18px 45px #0009; z-index: 20; padding: 5px; }
.suggestions.open { display: block; }
.suggestions button { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 13px; border: 0; border-radius: 8px; text-align: left; background: transparent; color: var(--text); cursor: pointer; }
.suggestions button:hover { background: #243447; }
.suggestion-title { font-weight: 650; }
.suggestion-subtitle, .suggestion-empty { color: var(--muted); font-size: 11px; }
.suggestion-empty { padding: 15px; }
.friend-code-row { display: flex; align-items: center; gap: 10px; padding: 12px; background: #101824; border: 1px solid #304055; border-radius: 9px; }
.friend-code-row code, #friends-code-value { color: var(--green); font-size: 18px; letter-spacing: 2px; overflow-wrap: anywhere; }
.profile-signout { width: 100%; margin-top: 22px; }
.own-code-panel { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.own-code-panel h3 { margin: 0 0 5px; }
.own-code-panel p { margin: 0 0 8px; }
dialog { background: #151e2b; border-color: #34445a; box-shadow: 0 25px 80px #0009; }
button, .card, input, select { -webkit-tap-highlight-color: transparent; }
@media (max-width: 1050px) { .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .cover { height: 105px; }
  .own-code-panel { align-items: flex-start; flex-direction: column; }
  .own-code-panel .small { width: 100%; }
}