/* Layout and interaction refinements for the existing gray/green game-menu UI. */
:root{--topbar-height:78px;--panel-stripe:repeating-linear-gradient(135deg,#ffffff06 0 20px,transparent 20px 40px)}
.topbar{height:var(--topbar-height)}
.topbar-right{gap:10px}.topbar-right .icon-button{width:38px;height:38px}.brand-name{font-size:22px}.live-clock{margin-right:12px}
.shell{grid-template-columns:190px minmax(0,1fr);min-height:calc(100dvh - var(--topbar-height))}.sidebar{padding:28px 16px 18px}.sidebar-label{margin-left:9px;margin-bottom:16px;letter-spacing:2px}.sidebar-bottom .nav-item{font-size:13px;white-space:normal}.sidebar-bottom{gap:2px}.sidebar-signature{font-size:10px}.nav-item.active{outline:0;border:2px solid var(--line);padding:9px 10px}.nav-item{border:2px solid transparent;padding:9px 10px}.nav-item:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}.nav-item.active:hover{background:var(--accent)}.nav-count{font-size:10px}
.main-content{max-width:1600px;width:100%;padding:28px 28px 0;min-width:0}.page-heading{margin-bottom:22px}.page-heading>div{display:flex;align-items:center;gap:12px}.page-heading h1{margin:0;font-size:30px}.page-count{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:25px;padding:0 6px;background:var(--surface);border:1px solid var(--line);font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.library-heading{display:flex;align-items:stretch;justify-content:space-between;gap:12px;margin-bottom:16px;flex-direction:row}.library-heading>div.library-actions{display:flex;gap:8px;flex:none}.search{width:auto;flex:1;max-width:none;min-width:80px;height:40px;background:var(--surface);border:2px solid var(--line)}.search input{font-size:13px}.library-actions button{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;padding:8px 12px;white-space:nowrap}.library-actions .sprite-icon{zoom:.4}.filter-row{min-height:38px;margin-bottom:15px}.filter{font-size:12px;padding:7px 12px}.sort-label{font-size:11px;margin-left:auto}.sort-label select{font-size:11px;max-width:125px}.filters{gap:4px}
.library-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;align-items:start}.library-items{min-width:0}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.launch-card{display:flex;flex-direction:column;border:2px solid var(--line);transition:border-color .15s;min-width:0}.launch-card[data-selected=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.launch-card:hover{transform:none!important}.card-launch{flex:1;position:relative}.launch-card .card-launch h3{font-size:15px!important;line-height:1.2;min-height:39px;padding:11px 31px 10px 7px;background:var(--panel-stripe),var(--surface2);overflow-wrap:anywhere}.card-art{height:124px;background:var(--panel-stripe),linear-gradient(145deg,#ffffff12,transparent 65%),var(--card-tint)}.card-art .app-icon{width:65px;height:65px}.app-icon img{width:56px;height:56px}.app-icon img[data-brand="github"],.app-icon img[data-brand="wikipedia"]{filter:brightness(0) invert(1) drop-shadow(0 1px 1px #0004)}.card-art svg{width:50px;height:50px}.launch-card .card-launch p{display:flex;align-items:center;justify-content:center;padding:9px 8px;min-height:49px!important;font-size:10px!important;line-height:1.45}.card-bottom{padding:6px 8px;min-height:23px;font-size:8px;color:var(--muted)}.card-select{display:block;width:100%;font-size:14px;padding:7px 8px;min-height:33px;border-top:2px solid var(--line);letter-spacing:2px;line-height:1.2}.card-select:hover{filter:brightness(1.12)}.card-select:active{filter:brightness(.9)}.card-relay{min-height:27px;font-size:10px;padding:5px;line-height:1.3;color:var(--muted)}.card-relay[aria-pressed=true]{color:var(--text);background:var(--soft)}.card-favorite{width:28px;height:29px;top:4px;right:2px;border:0;background:none}.card-favorite[aria-pressed=true]{color:var(--accent)}.card-favorite[aria-pressed=true] svg{fill:currentColor}.card-favorite[aria-pressed=false] .sprite-icon{filter:grayscale(1);opacity:.7}
.item-preview{position:sticky;top:22px;border:2px solid var(--line);background:var(--surface);min-width:0}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:var(--panel-stripe),var(--surface2);border-bottom:2px solid var(--line);font-size:9px;letter-spacing:1px}.preview-heading span:last-child{color:var(--muted)}.preview-art{height:182px;display:grid;place-items:center;background:var(--panel-stripe),linear-gradient(145deg,#ffffff12,transparent),var(--card-tint);border-bottom:2px solid var(--line)}.preview-art .app-icon{display:grid;place-items:center;width:104px;height:104px;border:0;background:none}.preview-art img{width:88px;height:88px}.preview-art svg{width:78px;height:78px;color:var(--icon-color)}.preview-art .sprite-icon{zoom:1.3}:root[data-icon-set="2"] .preview-art .sprite-icon{zoom:.95}.preview-copy{padding:17px 15px 12px}.preview-copy h2{font-size:25px;margin:0 0 8px;overflow-wrap:anywhere}.preview-copy p{font-size:12px;color:var(--muted);line-height:1.6;min-height:38px;margin:0}.preview-facts{margin:0 15px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.preview-facts>div{display:flex;justify-content:space-between;gap:10px;font-size:11px;line-height:2}.preview-facts dt{color:var(--muted)}.preview-facts dd{margin:0;overflow-wrap:anywhere;text-align:right}.preview-relay{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;font-size:12px}.preview-relay input{accent-color:var(--accent);width:29px;height:18px;cursor:pointer}.preview-help{padding:0 15px;font-size:10px;line-height:1.6;color:var(--muted);margin:0 0 14px}.preview-actions{display:flex;gap:8px;padding:0 15px 15px}.preview-actions>.accent-button{flex:1;letter-spacing:2px}.preview-actions>.secondary-button{display:grid;place-items:center;min-width:43px;padding:8px}.preview-actions [aria-pressed=true]{border-color:var(--accent);background:var(--soft)}.preview-edit-actions{display:flex;justify-content:space-between;padding:0 15px}.preview-edit-actions:has(button:not([hidden])){padding-bottom:10px}.preview-edit-actions .text-button{font-size:11px}.library-footer{margin-top:16px;align-items:center;gap:12px;font-size:10px;color:var(--muted)}.page-footer{margin-top:25px;padding:18px 0;font-size:10px}.page-footer a{font-size:10px}.page-footer .text-button{font-size:10px;margin-left:5px}
.empty-state{padding:50px 18px;background:var(--surface);border:2px solid var(--line);text-align:center;min-height:290px}.empty-state>span{display:inline-grid;place-items:center;margin-bottom:14px;color:var(--muted)}.empty-state>span svg{width:30px;height:30px}.empty-state h2{font-size:25px;margin:0 0 12px}.empty-state p{font-size:12px;line-height:1.6;overflow-wrap:anywhere}.empty-state button{font-size:12px}
.settings-dialog{max-width:640px;width:calc(100% - 32px);padding:24px}.settings-hint{margin:13px 0 20px;font-size:11px}.settings-group{border:2px solid var(--line);margin:10px 0;background:var(--surface)}.settings-group>summary{padding:13px 14px;font:17px Ultraproxi,sans-serif;cursor:pointer;background:var(--panel-stripe),var(--surface2);list-style-position:inside}.settings-group[open]>summary{border-bottom:2px solid var(--line)}.settings-group-content{padding:0 14px 14px}.settings-group .setting-row{padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent)}.settings-group .setting-row:last-child{border:0}.setting-row label,.setting-row>span{font-size:12px}.setting-row label span,.setting-row small{font-size:10px;line-height:1.6}.settings-group-content>.muted{font-size:12px;line-height:1.7;margin:14px 0}.color-inputs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.color-inputs #accent-custom{width:40px;height:34px}.color-inputs #accent-hex{width:93px;padding:8px 6px;font:11px monospace;background:var(--surface2);color:var(--text);border:1px solid var(--line)}.color-inputs .text-button{font-size:10px;padding:4px}.connection-settings{border:2px solid var(--line);padding:0;margin-top:10px;background:var(--surface)}.connection-settings>summary{padding:13px 14px;font:17px Ultraproxi,sans-serif;background:var(--panel-stripe),var(--surface2)}.connection-settings>p,.connection-settings>form,.connection-settings>#wisp-lab-option,.connection-settings>.connection-top,.connection-settings>.check-row{margin-left:14px;margin-right:14px}.connection-settings>.muted{margin-top:13px;margin-bottom:14px;font-size:11px;line-height:1.7}.connection-settings[open]>summary{border-bottom:2px solid var(--line)}.dialog-heading h2{font-size:27px}.dialog-heading .eyebrow{font-size:9px}.dialog:focus{outline:none}.shortcut-dialog #shortcut-mode-hint{font-size:11px;line-height:1.6}
#relay-toolbar{flex-wrap:wrap;align-items:center;gap:10px;min-height:45px}#relay-page-status{flex:1;min-width:180px;line-height:1.5}#relay-toolbar[data-state=error]{border-bottom-color:#f39182}#relay-toolbar[data-state=warning]{border-bottom-color:#e5c47a}#workspace{height:calc(100dvh - var(--topbar-height))}.relay-actions{display:flex;align-items:center;gap:12px}.relay-actions button{font-size:11px;padding:0;background:none;text-decoration:underline}.floating-display-controls .icon-button{min-width:36px;min-height:36px}
:root[data-compact=true] .card-art{height:82px}:root[data-compact=true] .card-art img{width:42px;height:42px}:root[data-compact=true] .card-launch p{display:none}:root[data-compact=true] .card-select{min-height:29px;padding:6px;font-size:12px}:root[data-compact=true] .launch-card .card-launch h3{font-size:13px!important;min-height:34px;padding-top:9px;padding-bottom:8px}:root[data-compact=true] .card-grid{gap:11px}
@media(min-width:1550px){.library-layout{grid-template-columns:minmax(0,1fr) 290px}.card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1220px){.library-layout{grid-template-columns:minmax(0,1fr) 230px;gap:17px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-art{height:155px}.main-content{padding-left:22px;padding-right:22px}.shell{grid-template-columns:170px minmax(0,1fr)}.sidebar{padding-left:10px;padding-right:10px}}
@media(max-width:900px){.library-layout{grid-template-columns:minmax(0,1fr)}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.item-preview{position:static;display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-areas:'head head' 'art copy' 'art facts' 'help help' 'relay relay' 'actions actions' 'edit edit';gap:0;margin-top:18px}.preview-heading{grid-area:head}.preview-art{grid-area:art;height:auto;min-height:145px;border-bottom:0;border-right:2px solid var(--line)}.preview-copy{grid-area:copy;padding:13px 14px}.preview-copy h2{font-size:22px}.preview-copy p{min-height:0;font-size:11px}.preview-facts{grid-area:facts;border-bottom:0;margin-bottom:12px}.preview-relay{grid-area:relay}.preview-help{grid-area:help;padding:12px 14px 0}.preview-actions{grid-area:actions}.preview-edit-actions{grid-area:edit}.library-heading{flex-wrap:wrap}.library-actions{flex:1}.library-actions button{flex:1}.search{flex-basis:100%}.library-footer>span:last-child{display:none}}
@media(max-width:700px){.shell{grid-template-columns:145px minmax(0,1fr)}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-item{font-size:13px}.main-content{padding:22px 16px 0}.topbar{padding:0 18px}.topbar-right{gap:6px}.brand-name{font-size:19px}.live-clock{display:none}.sidebar-bottom .nav-item{font-size:12px}}
@media(max-width:600px){:root{--topbar-height:68px}.shell{display:block}.topbar{padding:0 12px;gap:8px}.brand{gap:8px;min-width:0}.brand-name{font-size:17px;white-space:nowrap}.corner-logo{width:38px}.topbar-right{gap:4px}.topbar-right .icon-button{width:31px;height:34px;min-width:31px;min-height:34px}.topbar-right svg{width:17px;height:17px}.sidebar{padding:9px 10px;border-bottom:2px solid var(--line)}#navigation{justify-content:flex-start;gap:5px;padding:3px 2px 7px}.nav-item{font-size:12px;min-height:34px;gap:6px;padding:7px 8px}.nav-item.active{padding:7px 8px}.nav-item [data-icon]{width:17px;height:17px}.nav-divider{display:none}.main-content{padding:20px 14px 0}.page-heading h1{font-size:27px}.page-heading{margin-bottom:16px}.library-heading{gap:8px}.library-heading>div.library-actions{gap:8px;width:100%}.library-actions button{font-size:11px;padding:8px;min-height:37px}.filters{flex-wrap:wrap}.filter{font-size:11px;padding:7px 8px}.filter-row{align-items:center;gap:6px;flex-wrap:wrap}.sort-label{font-size:10px}.sort-label select{font-size:10px}.card-grid{gap:12px}.card-art{height:110px}.launch-card .card-launch h3{font-size:13px!important;min-height:39px;padding-right:26px;padding-left:5px}.card-launch .card-bottom{font-size:8px}.launch-card .card-launch p{font-size:10px!important;min-height:48px!important}.card-favorite{width:25px;height:27px;top:4px;right:0}.card-select{font-size:13px;min-height:35px}.card-relay{min-height:30px;font-size:10px}.preview-art{min-height:135px}.preview-art img{width:70px;height:70px}.item-preview{grid-template-columns:120px minmax(0,1fr);scroll-margin-top:12px}.preview-copy h2{font-size:20px}.page-footer{font-size:9px;gap:6px;flex-wrap:wrap}.page-footer a,.page-footer .text-button{font-size:9px}.settings-dialog{padding:17px;max-height:90dvh}.settings-group>summary,.connection-settings>summary{font-size:16px}.setting-row{gap:12px}.setting-row select{font-size:11px;max-width:145px}.color-inputs{max-width:165px}#relay-page-status{min-width:100%;font-size:11px}.relay-actions{width:100%;justify-content:flex-end}.library-footer{font-size:9px}.library-footer>span{max-width:none}}
@media(max-width:360px){.brand-name{font-size:15px}.corner-logo{width:32px}.topbar-right .icon-button{min-width:29px;width:29px}.nav-item{font-size:11px;padding-left:6px;padding-right:6px}.card-grid{gap:9px}.card-art{height:95px}.main-content{padding-left:11px;padding-right:11px}}
/* Reset the old mobile/compact padding so the card art stays edge to edge. */
.launch-card .card-launch,:root[data-compact=true] .launch-card .card-launch{padding:0;min-height:0}
:root{scrollbar-gutter:stable}body{min-width:0;width:100%}
:root[data-icon-set="2"] .nav-item .sprite-icon{zoom:.23}
@media(max-width:600px){.main-content,.topbar{max-width:100%}.card-grid,.library-layout,.library-items{min-width:0}.library-layout{width:100%}.card-grid{width:100%}.topbar-right{margin-right:3px}.library-actions{min-width:0}.library-actions button{min-width:0}.page-footer{overflow-wrap:anywhere}}
.card-grid{align-items:start}
:root[data-theme=light][data-icon-set="2"] .topbar .sprite-icon,:root[data-theme=light][data-icon-set="2"] .nav-item .sprite-icon,:root[data-theme=light][data-icon-set="2"] .library-actions .secondary-button .sprite-icon{filter:brightness(0)}