:root{--paper:#f5f2ea;--white:#fffdf8;--forest:#193b32;--ink:#26392e;--muted:#7c867a;--line:#dfdfd3;--orange:#edab71;--mint:#d7e9cb;--font:Inter,"Segoe UI",Arial,sans-serif;--mono:"SFMono-Regular",Consolas,monospace;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px var(--font)}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;transition:background .15s,color .15s,transform .15s}button:disabled{opacity:.55;cursor:wait}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #bd7444;outline-offset:4px}a{color:inherit}svg{display:block}[hidden]{display:none!important}
.sidebar{position:fixed;inset:0 auto 0 0;width:220px;background:var(--forest);color:#d0dbc7;padding:36px 24px;display:flex;flex-direction:column;z-index:2}.hub-brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-decoration:none;color:#f6f0db;line-height:1}.hub-brand>.pixel-logo{display:block;width:124px;height:32px;flex-shrink:0;color:#f6f0db;shape-rendering:crispEdges}.brand-sub{display:block;font:8px var(--mono);letter-spacing:1.9px;margin:0 0 0 36px;color:#97ab93}.sidebar-label{font:8px var(--mono);letter-spacing:1.5px;color:#8ea48f;margin:62px 0 16px}.sidebar nav{display:flex;flex-direction:column;gap:5px}.nav-link{display:flex;align-items:center;gap:11px;font-size:14px;text-decoration:none;padding:13px 12px;border-radius:5px;color:#b5c7b0}.nav-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3}.nav-link span{margin-left:auto;font:10px var(--mono);color:#b1c49d}.nav-link.active,.nav-link:hover{background:#2c4b3b;color:#f0f3dc}.nav-link.active svg{color:var(--orange)}
.sidebar-note{margin-top:auto;padding:45px 10px 27px;border-bottom:1px solid #42604a}.sidebar-note>svg{width:42px;height:42px;fill:none;stroke:#93ae83;stroke-width:1;transform:rotate(-9deg);margin-bottom:19px}.sidebar-note strong{font-size:18px;font-weight:450;letter-spacing:-.3px;line-height:1.45;color:#dce5cd}.sidebar-note p{font-size:12px;color:#9aaf95;line-height:1.7;margin:12px 0 0}.server-state{display:flex;align-items:center;gap:9px;margin-top:25px}.server-state>i{width:6px;height:6px;display:block;border-radius:50%;background:#c49b71}.server-state>i.online{background:#b4d77d;box-shadow:0 0 0 4px #b4d77d11}.server-state strong{font-size:12px;font-weight:450;color:#d5e2c8}.server-state span{display:block;font:7px var(--mono);letter-spacing:1px;color:#849b80;margin-top:7px}
.hub-main{margin-left:220px;padding:0 40px;max-width:1600px}.hub-topbar{height:90px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.breadcrumb{font:10px var(--mono);letter-spacing:1.2px;color:#85917e}.breadcrumb span{color:#bcc1b1;margin:0 14px}.hub-identity{display:flex;align-items:center;gap:12px}.hub-identity>span{font:8px var(--mono);letter-spacing:1.2px;color:#899181}.hub-identity input{max-width:125px;padding:7px 0;background:transparent;border:0;color:var(--ink);font-size:14px;text-align:right}.hub-identity>i{display:grid;place-items:center;width:33px;height:33px;background:#e2e8d5;border:1px solid #ced9be;border-radius:50%;color:#557042;font-size:13px;font-style:normal;font-weight:600}.library-heading{display:flex;justify-content:space-between;align-items:center;padding:35px 0 29px;scroll-margin-top:25px}.eyebrow{font:9px var(--mono);letter-spacing:1.5px;color:#87937c}h1{font-size:40px;font-weight:550;letter-spacing:-1.8px;margin:10px 0 11px;line-height:1.12}h1>span{color:#b06d3d}.library-heading p{font-size:14px;color:#7d8974;margin:0}.library-count{display:flex;align-items:center;gap:6px;font:9px var(--mono);letter-spacing:1px;color:#879174;align-self:flex-start;margin-top:27px}.library-count i{width:5px;height:5px;border-radius:50%;background:#809853}
.library-layout{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:28px}.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px}.game-card{background:var(--white);border:1px solid #dcded1;border-radius:9px;overflow:hidden;box-shadow:0 3px 4px #3b472703;transition:transform .2s,box-shadow .2s}.game-card:hover{transform:translateY(-3px);box-shadow:0 9px 25px #3b47270c}.game-art{height:183px;position:relative;overflow:hidden;background:#668460}.game-art>canvas{display:block;width:100%;height:100%;object-fit:cover}.checkers-art{background:#c6ac82}.afterimage-art{background:#182e38}.dungeon-art{background:#475d44}.art-badge{position:absolute;top:13px;left:14px;background:#fbfaf0e8;color:#50624a;border:1px solid #fff6;padding:5px 7px;border-radius:3px;font:7px var(--mono);letter-spacing:.8px}.art-number{position:absolute;bottom:12px;right:13px;font:11px var(--mono);color:#f6efd4cc;letter-spacing:1px}
.game-card-content{padding:19px 20px 18px}.game-category{display:flex;justify-content:space-between;gap:8px;font:8px var(--mono);letter-spacing:.8px;color:#8b947e}.game-category>span:last-child{display:flex;align-items:center;gap:5px;font-size:7px;white-space:nowrap}.game-category i{width:4px;height:4px;border-radius:50%;background:#7b965f}.game-card h2{font-size:23px;font-weight:550;letter-spacing:-.6px;margin:10px 0 7px}.game-card p{font-size:13px;color:#87907e;line-height:1.6;margin:0 0 21px;min-height:42px}.game-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.game-chip{padding:5px 7px;background:#eef0e4;color:#6e805d;border-radius:3px;font:7px var(--mono);letter-spacing:.5px;white-space:nowrap}.game-card-bottom button{display:flex;align-items:center;gap:13px;border:0;background:none;padding:3px 0;color:#365637;font-size:13px;font-weight:550;white-space:nowrap}.game-card-bottom button:hover{color:#a16432}.game-card-bottom button span{font-size:15px;font-weight:400}
.rooms-column{display:flex;flex-direction:column;gap:19px;scroll-margin-top:20px}.rooms-panel{border:1px solid #dcded0;border-radius:7px;background:#f9f8f1;padding:20px 19px 0;min-height:273px}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel-heading h2,.join-panel h2{font-size:16px;font-weight:550;letter-spacing:-.3px;margin:0}.live-label{display:flex;align-items:center;gap:5px;font:8px var(--mono);color:#8da07a;letter-spacing:.8px}.live-label i,.room-legend i{display:block;width:4px;height:4px;background:#82a354;border-radius:50%}.panel-description{font-size:12px;color:#8b9683;margin:8px 0 10px}.rooms-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:19px 0 23px}.rooms-empty>svg{width:38px;height:38px;stroke:#9aab85;fill:none;stroke-width:1;margin-bottom:13px;transform:rotate(-5deg)}.rooms-empty strong{font-size:14px;color:#788968;font-weight:500}.rooms-empty p{font-size:12px;color:#9da691;line-height:1.7;margin:7px 0 0}.room-legend{border-top:1px solid #e4e7d9;padding:13px 0;display:flex;align-items:center;gap:6px;font:8px var(--mono);letter-spacing:.2px;color:#96a087}.room-item{padding:13px 0;border-bottom:1px solid #e4e7d9;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px}.room-item:last-child{border-bottom:0}.room-icon{display:grid;place-items:center;width:32px;height:32px;background:#e3e9d8;border:1px solid #d2dcc1;border-radius:5px;font-size:15px;color:#6b7d57}.room-item strong{display:block;font-size:12px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}.room-item small{display:block;margin-top:5px;font-size:11px;color:#919d84}.room-item button{border:1px solid #cbd5bd;border-radius:3px;background:#edf1e4;color:#607149;padding:6px 9px;font-size:11px}.room-item button:hover{background:#dde8cf}.room-item button:disabled{cursor:default;color:#97a58c;background:transparent;border-color:#e3e8db}
.join-panel{border:1px solid #dddfd1;border-radius:7px;padding:20px 19px;background:#fffdf8}.join-panel h2{font-size:15px}.join-panel p{font-size:12px;color:#8d9580;margin:8px 0 15px;line-height:1.6}.join-panel form{display:flex;border:1px solid #d2d9c3;background:#f4f6ed;border-radius:4px;overflow:hidden}.join-panel input{padding:10px 11px;font:12px var(--mono);border:0;outline:none;background:none;min-width:0;flex:1;color:#60734c;letter-spacing:1px}.join-panel input::placeholder{color:#a1ad91;letter-spacing:.5px}.join-panel form button{border:0;border-left:1px solid #d2d9c3;background:#e6edda;width:36px;color:#54703e;font-size:20px}.join-panel form button:hover{background:#d9e6c6}.join-error{font-size:12px;color:#9d4c30;display:block;margin-top:12px;line-height:1.5}
.share-panel{padding:20px 19px;border:1px dashed #c7cfb6;border-radius:7px;background:#edefe1}.share-panel .eyebrow{font-size:8px;letter-spacing:1px}.share-panel>strong{display:block;font-size:21px;font-weight:500;letter-spacing:-.7px;margin-top:12px}.share-panel>p{font-size:12px;color:#89957b;margin:8px 0 15px}.share-panel code{font:12px var(--mono);color:#566e44;display:block;overflow-wrap:anywhere;line-height:1.7;margin-bottom:15px}.share-panel button{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;border-top:1px solid #d5ddc6;background:none;padding:13px 0 0;color:#5d7746;font-size:12px;font-weight:500}.share-panel button svg{width:14px;height:14px;stroke:#6b8450;stroke-width:1.2;fill:none}.share-panel small{display:block;font-size:11px;line-height:1.7;color:#97a089;margin-top:14px}
.hub-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid var(--line);margin-top:29px;padding:22px 0 28px;font:8px var(--mono);letter-spacing:1.1px;color:#929c87}.hub-footer a{font-size:10px;letter-spacing:.4px;color:#6a8054;text-decoration:none}.hub-footer a:hover{text-decoration:underline}.hub-footer i{font-size:13px;color:#a1b18b;font-style:normal;margin-left:8px}.hub-error{margin-bottom:18px;padding:13px 16px;border:1px solid #ddb4a0;border-radius:5px;background:#f8e9dc;color:#985033;font-size:14px;line-height:1.5}.hub-toast{position:fixed;bottom:25px;left:calc(50% + 110px);transform:translateX(-50%);background:#244532;color:#ecf3df;border:1px solid #557249;box-shadow:0 8px 30px #193b3222;border-radius:5px;padding:13px 20px;font-size:13px;z-index:5}.game-card-bottom button svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.4;fill:none}
@media(min-width:1600px){.hub-main{padding:0 60px}.library-layout{grid-template-columns:minmax(0,1fr) 310px;gap:35px}.game-art{height:230px}.game-card-content{padding:23px}.game-card p{font-size:14px}.game-card-bottom button{font-size:14px}.game-category{font-size:9px}.game-chip{font-size:9px}.rooms-panel,.join-panel,.share-panel{padding-left:24px;padding-right:24px}}
@media(max-width:1200px){.sidebar{width:190px;padding:32px 20px}.hub-main{margin-left:190px;padding:0 28px}.hub-brand>.pixel-logo{width:124px;height:32px}.library-layout{grid-template-columns:minmax(0,1fr) 240px;gap:21px}.game-grid{gap:18px}.game-art{height:160px}.game-card-content{padding:16px}.game-card h2{font-size:22px}.game-chip{font-size:6px;padding:5px}.game-card-bottom button{font-size:11px;gap:8px}.game-category{font-size:7px}.game-category>span:last-child{font-size:6px}.library-count{font-size:8px}.hub-toast{left:calc(50% + 95px)}}
@media(max-width:1000px){.sidebar{width:175px;padding:30px 17px}.hub-main{margin-left:175px;padding:0 25px}.sidebar-label{font-size:7px}.hub-brand>.pixel-logo{width:124px;height:32px}.library-layout{display:block}.rooms-column{display:grid;grid-template-columns:1fr 1fr;margin-top:25px}.rooms-panel{grid-row:span 2}.game-art{height:190px}.game-card p{font-size:13px}.game-card-bottom button{font-size:13px}.game-chip{font-size:8px}.game-category{font-size:8px}.game-category>span:last-child{font-size:7px}.share-panel{padding:17px 19px}.library-count{display:none}.hub-toast{left:calc(50% + 87px)}}
@media(max-width:700px){.sidebar{position:relative;width:100%;height:76px;padding:15px 22px;flex-direction:row;align-items:center;justify-content:space-between}.hub-brand{gap:5px}.hub-brand>.pixel-logo{width:124px;height:32px}.brand-sub{font-size:6px;margin:0 0 0 36px;letter-spacing:1.4px}.sidebar-label,.sidebar nav,.sidebar-note{display:none}.server-state{margin:0;gap:7px}.server-state strong{font-size:10px}.server-state span{font-size:6px;letter-spacing:.7px}.hub-main{margin:0;padding:0 20px}.hub-topbar{height:65px}.breadcrumb{font-size:8px;letter-spacing:.6px}.breadcrumb span{margin:0 6px}.hub-identity{gap:7px}.hub-identity>span{display:none}.hub-identity input{width:98px;font-size:12px}.hub-identity>i{width:28px;height:28px;font-size:11px}.library-heading{padding:28px 0 24px}.library-heading h1{font-size:36px;letter-spacing:-1.3px}.library-heading p{font-size:13px}.eyebrow{font-size:8px}.game-grid{gap:16px}.game-art{height:160px}.game-card-content{padding:15px}.game-card h2{font-size:20px}.game-card p{font-size:12px;margin-bottom:15px;min-height:38px}.game-category{font-size:7px}.game-category>span:last-child{display:none}.game-card-bottom{gap:8px;flex-wrap:wrap}.game-chip{font-size:7px}.game-card-bottom button{font-size:12px;width:100%;justify-content:space-between;margin-top:6px}.art-badge{font-size:6px;left:10px;top:10px;padding:4px 5px}.art-number{font-size:9px}.hub-footer{font-size:7px;letter-spacing:.5px;flex-wrap:wrap}.hub-footer>span:last-child{display:none}.hub-toast{left:50%;width:max-content;max-width:90vw;text-align:center}.rooms-column{grid-template-columns:1fr 1fr;gap:15px}.rooms-panel,.join-panel,.share-panel{padding-left:15px;padding-right:15px}.panel-heading h2{font-size:15px}.share-panel>strong{font-size:20px}.rooms-empty p{font-size:10px}.room-item{grid-template-columns:24px minmax(0,1fr);gap:7px}.room-icon{width:24px;height:24px;font-size:12px}.room-item button{grid-column:2;justify-self:start;margin-top:2px}.room-item strong{font-size:11px}.room-item small{font-size:9px}.share-panel .eyebrow{font-size:6px}.share-panel code{font-size:9px}}
@media(max-width:430px){.hub-main{padding:0 16px}.game-grid{gap:12px}.game-art{height:132px}.game-card-content{padding:13px}.game-card h2{font-size:19px}.game-card p{font-size:11px;min-height:52px}.game-chip{font-size:6px}.rooms-column{grid-template-columns:1fr}.rooms-panel{grid-row:auto}.room-item{grid-template-columns:32px minmax(0,1fr) auto}.room-item button{grid-column:auto}.room-item strong{font-size:12px}.room-item small{font-size:10px}.room-icon{width:32px;height:32px}.share-panel .eyebrow{font-size:8px}.share-panel code{font-size:11px}.art-badge{font-size:5px}.breadcrumb{font-size:7px}.hub-identity input{width:82px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.library-count b{font-weight:inherit}
.card-preview{display:flex;align-items:center;justify-content:center;background-color:#416453;background-image:radial-gradient(ellipse at 50% 45%,#6c897733,transparent 70%),repeating-linear-gradient(0deg,transparent 0 3px,#ffffff03 3px 4px)}
.card-preview:before{content:"";position:absolute;inset:18px;border:1px solid #e2e5b82b;border-radius:50%}
.twenty-one-art{background-color:#aa7958;background-image:radial-gradient(ellipse at 50% 45%,#e9b98044,transparent 70%),repeating-linear-gradient(0deg,transparent 0 3px,#ffffff03 3px 4px)}
.memory-art{background-color:#73878b;background-image:radial-gradient(ellipse at 50% 45%,#d4e1da33,transparent 70%),repeating-linear-gradient(0deg,transparent 0 3px,#ffffff03 3px 4px)}
.preview-fan{position:relative;width:228px;height:144px;margin-top:20px}
.preview-card{position:absolute;display:block;width:83px;height:117px;background:#fff9e8;border:1px solid #dfd4b8;border-radius:4px;color:#274d3c;box-shadow:0 5px 0 #17362828,0 10px 18px #17362822}
.preview-card small{position:absolute;top:9px;left:10px;font:700 15px/1.12 var(--mono);text-align:center}
.preview-card b{position:absolute;inset:0;display:grid;place-items:center;font:42px Georgia,serif}
.preview-card.red{color:#b56042}
.preview-fan>.preview-card:nth-child(1){left:22px;top:12px;transform:rotate(-20deg)}
.preview-fan>.preview-card:nth-child(2){left:74px;top:0;transform:rotate(-2deg);z-index:1}
.preview-fan>.preview-card:nth-child(3){left:125px;top:13px;transform:rotate(18deg);z-index:2}
.preview-card.card-back{background:repeating-linear-gradient(45deg,#365b4b 0 4px,#456c55 4px 8px);color:#cfddb4;border:6px solid #efe9d4;outline:1px solid #d7d3bf}
.preview-card.card-back b{font-size:27px;border:1px solid #bdcf9555;margin:4px}
.preview-memory{position:relative;display:flex;gap:13px;transform:rotate(-9deg);margin-top:14px}
.preview-memory>.preview-card{position:relative;width:58px;height:88px}
.preview-memory .preview-card small{font-size:12px;top:6px;left:6px}
.preview-memory .preview-card b{font-size:31px}
.preview-memory .card-back b{font-size:20px}
.card-preview .art-badge{z-index:3}
@media(max-width:1100px){.preview-fan{transform:scale(.88)}.preview-memory{transform:rotate(-9deg) scale(.86)}}
@media(max-width:600px){.preview-fan{transform:scale(.75)}.preview-memory{transform:rotate(-9deg) scale(.65)}}
@media(max-width:430px){.preview-fan{transform:scale(.62);margin-top:15px}.preview-memory{transform:rotate(-9deg) scale(.52);margin-top:10px}}
.shelf-filters{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 24px}
.game-grid{align-content:start}
.shelf-filters button{display:flex;align-items:center;gap:10px;border:1px solid #d6dccb;border-radius:4px;padding:9px 13px;background:#fffdf7;color:#7b8971;font-size:12px}
.shelf-filters button span{font:9px var(--mono);color:#94a282}
.shelf-filters button[aria-pressed=true]{background:#345b3d;color:#f0f5db;border-color:#345b3d}
.shelf-filters button[aria-pressed=true] span{color:#c1d5a5}
.shelf-filters button:hover{border-color:#8aa273}
.solo-preview{display:flex;align-items:center;justify-content:center}
.highway-art{background:#203c4a}
.driving-mini{display:block;width:100%;height:100%;object-fit:cover}
.skill-mini{display:block;width:100%;height:100%;object-fit:cover}.vector-arena-art{background:#254747}.prism-shift-art{background:#716981}.rift-survivor-art{background:#3c404a}
@media(max-width:600px){.shelf-filters{gap:6px;margin-bottom:19px}.shelf-filters button{font-size:11px;padding:8px 10px;gap:8px}}