/* Cartoon arcade hub v3 */
body.hubMode{background:#0b0911!important;padding:18px 22px 44px!important;overflow-x:hidden}
body.hubMode:before{content:""!important;position:fixed!important;inset:0!important;z-index:-3!important;background:radial-gradient(800px 520px at 8% 0,#ff4d8d22,transparent 65%),radial-gradient(860px 560px at 93% 14%,#5b7cff22,transparent 66%),radial-gradient(720px 520px at 50% 100%,#8b5cf61c,transparent 65%),#0b0911!important}
body.hubMode:after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:radial-gradient(#ffffff10 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(#0005,transparent 78%)}
body.hubMode header{display:none!important}
body.hubMode .wrap{max-width:1280px!important;margin:auto!important}
body.hubMode #game.panel{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
body.hubMode .theme{position:fixed!important;right:20px!important;top:18px!important;z-index:90!important;background:#ffffff0e!important;border:1px solid #ffffff15!important;backdrop-filter:blur(12px)!important}
body.hubMode .roombar{display:grid!important;grid-template-columns:auto auto 1fr auto!important;align-items:center!important;gap:16px!important;margin:0 0 10px!important;padding:13px 16px!important;border:1px solid #ffffff12!important;border-radius:24px!important;background:#14121bcc!important;box-shadow:0 16px 50px #0005!important;backdrop-filter:blur(14px)!important}
.roomBrand{display:flex;align-items:baseline;gap:4px;padding-right:14px;border-right:1px solid #ffffff12}.roomBrand span,.roomBrand b{font-size:15px;letter-spacing:-.8px;font-weight:950}.roomBrand span{color:#fff}.roomBrand b{color:#c4b5fd}.roomBrand i{font-style:normal;color:#fb4f79;font-size:9px;margin-left:1px}
.roomCodeBox small{display:block;font-size:7px;letter-spacing:1.8px;color:#6f6f7a}.roomCodeBox #roomCode{font-size:22px!important;letter-spacing:4px!important;color:#fff!important;animation:none!important}.roomBtns{justify-self:end}
body.hubMode .players{display:flex!important;gap:7px!important;overflow-x:auto!important;margin:0 0 14px!important;padding:0 2px 2px!important;scrollbar-width:none!important}.players::-webkit-scrollbar{display:none}.hubMode .p{min-width:max-content!important;border-radius:999px!important;padding:7px 10px!important;background:#ffffff08!important;border:1px solid #ffffff0d!important}
.hubNew{display:block!important}.hubHero{position:relative;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr)!important;min-height:420px!important;border:0!important;border-radius:38px!important;overflow:hidden!important;background:linear-gradient(135deg,#fff4de 0%,#ffe9f2 47%,#eee7ff 100%)!important;box-shadow:0 28px 90px #0006!important;margin:0!important;padding:0!important}
.hubHero:before{content:"";position:absolute;left:-70px;bottom:-120px;width:280px;height:280px;border:42px solid #ff4d8d;border-radius:44% 56% 52% 48%;transform:rotate(24deg);opacity:.13}.hubHero:after{content:"★";position:absolute;left:48%;top:34px;font-size:54px;color:#8b5cf633;transform:rotate(14deg)}
.heroCopy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:46px 18px 46px 48px!important;color:#17131d!important}.heroCopy>small{font-size:9px!important;letter-spacing:2.4px!important;color:#6d6473!important;margin-bottom:16px}.heroCopy>span{display:inline-flex!important;align-items:center;min-height:28px;padding:0 11px;border-radius:999px;background:#17131d!important;color:#fff!important;font-size:9px!important;letter-spacing:1.5px!important;font-weight:950!important}.heroCopy h2{font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif!important;font-size:clamp(56px,6vw,90px)!important;line-height:.84!important;letter-spacing:-5px!important;color:#18131c!important;margin:13px 0 18px!important;max-width:610px}.heroCopy p{font-size:17px!important;color:#6d6471!important;margin:0 0 22px!important;max-width:420px}.heroButtons{display:flex!important;gap:10px!important}.heroButtons button{min-height:58px!important;border-radius:18px!important;padding:0 20px!important;font-weight:950!important;font-size:14px!important;transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s!important}.heroButtons #featuredPlay{background:#18131c!important;color:#fff!important;box-shadow:6px 7px 0 #ff4d8d!important}.heroButtons #featuredPlay:hover{transform:translate(-2px,-2px)!important;box-shadow:8px 9px 0 #ff4d8d!important}.heroButtons #featuredShuffle{background:#fff9!important;color:#251c2a!important;border:2px solid #251c2a18!important}.heroVisual{position:relative!important;display:grid!important;place-items:center!important;padding:24px!important;overflow:visible!important}.heroVisual:before,.heroVisual:after{content:"";position:absolute;border-radius:999px;background:#fff8;z-index:0}.heroVisual:before{width:110px;height:34px;right:50px;top:55px;transform:rotate(-9deg)}.heroVisual:after{width:66px;height:66px;left:38px;bottom:42px;border:10px solid #17131d;background:transparent}.heroVisual img{position:relative!important;z-index:2!important;width:min(94%,480px)!important;height:auto!important;filter:drop-shadow(18px 22px 0 #17131d22)!important;transform:rotate(4deg)!important;transition:transform .28s cubic-bezier(.2,.8,.2,1)!important}.heroVisual:hover img{transform:rotate(-1deg) scale(1.035)!important}.heroSticker{z-index:4!important;top:30px!important;right:32px!important;background:#17131d!important;color:#fff!important;border:0!important;box-shadow:4px 5px 0 #ff4d8d!important;padding:9px 13px!important;font-size:9px!important;letter-spacing:1.3px!important;transform:rotate(5deg)!important}
.partyTicker{display:flex;align-items:center;justify-content:center;gap:13px;margin:14px 0;padding:10px 14px;border-radius:18px;background:#ffffff08;border:1px solid #ffffff0d;overflow:hidden}.partyTicker span{font-size:9px;font-weight:950;letter-spacing:1.7px;color:#a9a4b2}.partyTicker i{font-style:normal;color:#ff4d8d;font-size:10px}.hubTools{display:grid!important;grid-template-columns:minmax(260px,1fr) auto!important;gap:12px!important;align-items:center!important;margin:0 0 18px!important}.searchBox{min-height:56px!important;border-radius:18px!important;background:#14121a!important;border:1px solid #ffffff0e!important;box-shadow:none!important}.searchBox input{min-height:54px!important;font-size:14px!important;background:transparent!important}.searchBox span{font-size:19px!important;color:#7e7788!important}.filters{display:flex!important;gap:7px!important;overflow-x:auto!important;padding:0!important;scrollbar-width:none!important}.filters button{min-height:46px!important;border-radius:16px!important;padding:0 15px!important;background:#15131b!important;border:1px solid #ffffff0e!important;color:#aaa4b1!important;font-weight:850!important;font-size:11px!important;transition:transform .15s ease,background .15s ease!important}.filters button.active{background:#fff1d7!important;color:#18131c!important;border-color:#fff1d7!important;box-shadow:4px 5px 0 #8b5cf655!important}.filters button:active{transform:scale(.96)!important}
.quickSection,.allSection{margin-top:18px!important}.sectionHead{margin:0 3px 12px!important}.sectionHead small{font-size:8px!important;letter-spacing:1.9px!important;color:#777180!important}.sectionHead h3{font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif!important;font-size:32px!important;letter-spacing:-1.8px!important;color:#fff!important;margin-top:2px!important}.sectionHead>span{color:#777180!important}.quickPicks{gap:14px!important;padding:4px 3px 16px!important;scroll-snap-type:x mandatory!important}.quickCard{flex:0 0 290px!important;min-height:360px!important;border:3px solid #fff5e6!important;border-radius:28px!important;background:#17141c!important;box-shadow:8px 9px 0 #2c2334!important;overflow:hidden!important;transform:rotate(-1deg)!important;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s!important}.quickCard:nth-child(even){transform:rotate(1.4deg)!important}.quickCard:hover{transform:translateY(-7px) rotate(.2deg)!important;box-shadow:10px 12px 0 #3e2d48!important}.quickCard .cardArt{height:205px!important;border-bottom:0!important}.quickCard .cardMeta{padding:11px 14px 4px!important}.quickCard .cardCopy{padding:0 14px 10px!important}.quickCard .cardCopy b{font-size:23px!important}.quickCard .cardCopy p{font-size:12px!important}.quickCard .cardPlay{margin-top:auto!important;padding:12px 14px 15px!important}
.hubNew .games{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}.hubNew .gamecard{position:relative!important;display:flex!important;flex-direction:column!important;min-height:360px!important;padding:0!important;border:3px solid #fff5e6!important;border-radius:28px!important;background:#17141c!important;color:#fff!important;overflow:hidden!important;box-shadow:7px 8px 0 #2b2332!important;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s!important;animation:none!important}.hubNew .gamecard:nth-child(4n+1){transform:rotate(-.8deg)!important}.hubNew .gamecard:nth-child(4n+2){transform:rotate(.6deg)!important}.hubNew .gamecard:nth-child(4n+3){transform:rotate(-.35deg)!important}.hubNew .gamecard:nth-child(4n){transform:rotate(.9deg)!important}.hubNew .gamecard:hover{transform:translateY(-8px) rotate(0)!important;box-shadow:10px 12px 0 #3a2c44!important;border-color:#fff!important}.hubNew .gamecard:before,.hubNew .gamecard:after{display:none!important}.hubNew .gamecard .cardArt{height:210px!important;overflow:hidden!important;background:#211b29!important}.hubNew .gamecard .cardArt img{width:100%!important;height:100%!important;object-fit:cover!important;transform:scale(1.02)!important;transition:transform .24s cubic-bezier(.2,.8,.2,1)!important}.hubNew .gamecard:hover .cardArt img{transform:scale(1.08) rotate(-1deg)!important}.hubNew .cardMeta{padding:12px 14px 5px!important}.hubNew .cardMeta span{background:#fff1!important;border:1px solid #ffffff1c!important;color:#eee8f1!important}.hubNew .cardMeta small{color:#7d7685!important}.hubNew .cardCopy{padding:0 14px 10px!important}.hubNew .cardCopy b{font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif!important;font-size:22px!important;line-height:1!important;letter-spacing:-1px!important}.hubNew .cardCopy p{font-size:11px!important;line-height:1.35!important;color:#9993a1!important;min-height:30px!important}.hubNew .cardPlay{margin-top:auto!important;padding:12px 14px 14px!important;border-top:1px dashed #ffffff13!important;font-size:11px!important;color:#c7c1cb!important}.hubNew .cardPlay i{width:34px!important;height:34px!important;background:#fff3dc!important;color:#18131c!important;box-shadow:3px 4px 0 #8b5cf666!important}.emptyGames{grid-column:1/-1!important;min-height:220px!important;border:2px dashed #ffffff18!important;border-radius:28px!important;display:grid!important;place-items:center!important;text-align:center!important;color:#8d8794!important}.emptyGames b{display:block!important;color:#fff!important;font-size:24px!important}
:root[data-theme="light"] body.hubMode{background:#f7f2ff!important}:root[data-theme="light"] body.hubMode:before{background:radial-gradient(800px 520px at 8% 0,#ff4d8d20,transparent 65%),radial-gradient(860px 560px at 93% 14%,#5b7cff20,transparent 66%),#f7f2ff!important}:root[data-theme="light"] body.hubMode .roombar{background:#fffffff0!important;border-color:#0000000c!important;box-shadow:0 16px 42px #5c4e6d18!important}:root[data-theme="light"] .roomBrand span,:root[data-theme="light"] .roomCodeBox #roomCode{color:#17131c!important}:root[data-theme="light"] .roomBrand{border-color:#0000000d!important}:root[data-theme="light"] .hubTools .searchBox,:root[data-theme="light"] .filters button{background:#fff!important;border-color:#0000000d!important}:root[data-theme="light"] .searchBox input{color:#17131c!important}:root[data-theme="light"] .filters button{color:#655f6c!important}:root[data-theme="light"] .filters button.active{background:#17131c!important;color:#fff!important;box-shadow:4px 5px 0 #ff4d8d55!important}:root[data-theme="light"] .partyTicker{background:#fff8!important;border-color:#0000000c!important}:root[data-theme="light"] .sectionHead h3{color:#17131c!important}:root[data-theme="light"] .quickCard,:root[data-theme="light"] .hubNew .gamecard{background:#fff!important;color:#17131c!important;border-color:#17131c!important;box-shadow:7px 8px 0 #c9bad5!important}:root[data-theme="light"] .hubNew .cardMeta span{background:#f2edf7!important;border-color:#0000000b!important;color:#5c5263!important}:root[data-theme="light"] .hubNew .cardCopy p{color:#746b7b!important}:root[data-theme="light"] .hubNew .cardPlay{color:#4b4350!important;border-color:#00000010!important}
@media(max-width:1050px){body.hubMode .wrap{max-width:960px!important}.hubNew .games{grid-template-columns:repeat(3,minmax(0,1fr))!important}.hubHero{grid-template-columns:1fr 380px!important}.heroCopy h2{font-size:64px!important}}
@media(max-width:760px){body.hubMode{padding:10px 10px 30px!important}.hubMode .roombar{grid-template-columns:auto 1fr auto!important;gap:10px!important;border-radius:20px!important;padding:10px 12px!important}.roomBrand{display:none!important}.roomCodeBox #roomCode{font-size:18px!important}.roomBtns #share{padding:0 11px!important}.hubHero{grid-template-columns:1fr!important;min-height:auto!important;border-radius:30px!important}.heroCopy{padding:32px 26px 20px!important}.heroCopy h2{font-size:52px!important;letter-spacing:-3.8px!important}.heroCopy p{font-size:14px!important;margin-bottom:18px!important}.heroVisual{min-height:270px!important;padding:4px 20px 24px!important}.heroVisual img{width:min(86%,390px)!important}.heroSticker{top:8px!important;right:22px!important}.partyTicker{justify-content:flex-start!important;overflow-x:auto!important;white-space:nowrap!important}.hubTools{grid-template-columns:1fr!important}.filters{padding-bottom:2px!important}.hubNew .games{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.hubNew .gamecard{min-height:300px!important;border-radius:23px!important;box-shadow:5px 6px 0 #2b2332!important}.hubNew .gamecard .cardArt{height:164px!important}.hubNew .cardCopy b{font-size:18px!important}.quickCard{flex-basis:230px!important;min-height:310px!important}.quickCard .cardArt{height:165px!important}.sectionHead h3{font-size:27px!important}}
@media(max-width:430px){body.hubMode .theme{right:10px!important;top:9px!important}.hubMode .players{margin-bottom:10px!important}.heroCopy{padding:28px 21px 18px!important}.heroCopy h2{font-size:46px!important}.heroButtons{width:100%!important}.heroButtons button{flex:1!important;padding:0 10px!important}.heroVisual{min-height:230px!important}.hubNew .gamecard{min-height:276px!important}.hubNew .gamecard .cardArt{height:145px!important}.hubNew .cardMeta{padding:9px 10px 4px!important}.hubNew .cardMeta small{display:none!important}.hubNew .cardCopy{padding:0 10px 8px!important}.hubNew .cardCopy b{font-size:17px!important}.hubNew .cardCopy p{font-size:10px!important}.hubNew .cardPlay{padding:9px 10px 11px!important}.quickCard{flex-basis:205px!important;min-height:290px!important}.quickCard .cardArt{height:150px!important}}

/* h5 desktop width correction */
@media(min-width:1200px){
  body.hubMode{padding-left:16px!important;padding-right:16px!important}
  body.hubMode .wrap{width:100%!important;max-width:1680px!important;margin:0 auto!important}
  body.hubMode .roombar{width:100%!important}
  body.hubMode #game.panel{width:100%!important;max-width:none!important}
  .hubHero{width:100%!important;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr)!important}
  .hubTools,.partyTicker,.quickSection,.allSection{width:100%!important}
}
@media(min-width:1500px){
  .hubNew .games{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:16px!important}
  .quickCard{flex-basis:300px!important}
}

/* h6: hub is intentionally near full-bleed on desktop */
@media(min-width:900px){
  body.hubMode,body:has(#hub:not(.hidden)){padding-left:12px!important;padding-right:12px!important}
  body.hubMode .wrap,body:has(#hub:not(.hidden)) .wrap{width:100%!important;max-width:none!important;margin:0!important}
  body.hubMode #game.panel,body:has(#hub:not(.hidden)) #game.panel{width:100%!important;max-width:none!important}
  body.hubMode .hubNew,body:has(#hub:not(.hidden)) .hubNew{width:100%!important;max-width:none!important}
  .hubHero,.partyTicker,.hubTools,.quickSection,.allSection{max-width:none!important;width:100%!important}
}
@media(min-width:1800px){.hubNew .games{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
/* h7: deterministic full-width hub + fluid card grid */
html.hubMode body,body.hubMode{padding-left:12px!important;padding-right:12px!important}
html.hubMode body .wrap,body.hubMode .wrap{width:calc(100vw - 24px)!important;max-width:none!important;margin:0!important}
html.hubMode body #game.panel,body.hubMode #game.panel{width:100%!important;max-width:none!important;padding:0!important}
html.hubMode body .hubNew,body.hubMode .hubNew,.hubMode .hubHero,.hubMode .partyTicker,.hubMode .hubTools,.hubMode .quickSection,.hubMode .allSection{width:100%!important;max-width:none!important}
.hubMode .hubNew .games{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important;gap:16px!important;align-items:stretch!important}
.hubMode .hubNew .gamecard{width:100%!important;min-width:0!important;max-width:none!important}
@media(max-width:760px){
  html.hubMode body,body.hubMode{padding:6px!important}
  html.hubMode body .wrap,body.hubMode .wrap{width:calc(100vw - 12px)!important;max-width:none!important;margin:0!important}
  .hubMode .roombar{width:100%!important;margin-bottom:8px!important;padding:9px 10px!important;border-radius:18px!important}
  .hubMode .players{width:100%!important;margin-bottom:8px!important}
  .hubMode .hubHero{border-radius:24px!important}
  .hubMode .heroCopy{padding:24px 18px 14px!important}
  .hubMode .heroCopy h2{font-size:clamp(40px,12vw,54px)!important;line-height:.88!important}
  .hubMode .heroVisual{min-height:210px!important;padding:0 12px 18px!important}
  .hubMode .heroVisual img{width:min(82%,300px)!important;transform:none!important}
  .hubMode .hubTools{gap:8px!important;margin-bottom:12px!important}
  .hubMode .hubNew .games{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
}@media(max-width:520px){
  .hubMode .hubNew .gamecard{min-height:238px!important;border-radius:18px!important;border-width:2px!important;box-shadow:4px 5px 0 #2b2332!important;transform:none!important}
  .hubMode .hubNew .gamecard .cardArt{height:116px!important}
  .hubMode .hubNew .cardMeta{padding:8px 8px 3px!important}.hubMode .hubNew .cardMeta small{display:none!important}
  .hubMode .hubNew .cardMeta span{font-size:7px!important;padding:4px 6px!important}
  .hubMode .hubNew .cardCopy{padding:0 8px 6px!important}.hubMode .hubNew .cardCopy b{font-size:14px!important;letter-spacing:-.5px!important}
  .hubMode .hubNew .cardCopy p{font-size:9px!important;line-height:1.25!important;min-height:23px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  .hubMode .hubNew .cardPlay{padding:7px 8px 8px!important;font-size:9px!important}.hubMode .hubNew .cardPlay i{width:26px!important;height:26px!important}
  .hubMode .quickCard{flex-basis:185px!important;min-height:260px!important;border-radius:20px!important}.hubMode .quickCard .cardArt{height:130px!important}
}
/* h8: viewport breakout — hub width no longer depends on wrapper/body classes */
#hub:not(.hidden){
  position:relative!important;left:50%!important;width:100vw!important;max-width:none!important;
  margin-left:-50vw!important;margin-right:0!important;padding-left:12px!important;padding-right:12px!important;
  box-sizing:border-box!important;overflow:visible!important;
}
#game.panel:has(#hub:not(.hidden)){overflow:visible!important;max-width:none!important}
#hub:not(.hidden) .hubHero,#hub:not(.hidden) .partyTicker,#hub:not(.hidden) .hubTools,
#hub:not(.hidden) .quickSection,#hub:not(.hidden) .allSection{width:100%!important;max-width:none!important}
#hub:not(.hidden) .games{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:14px!important}
#hub:not(.hidden) .gamecard{width:100%!important;min-width:0!important;max-width:none!important}
@media(min-width:700px){
  #hub:not(.hidden) .quickPicks{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;overflow:visible!important;padding:4px 0 14px!important}
  #hub:not(.hidden) .quickCard{width:100%!important;min-width:0!important;max-width:none!important;flex:none!important;min-height:300px!important;transform:none!important;box-shadow:6px 7px 0 #2c2334!important}
  #hub:not(.hidden) .quickCard .cardArt{height:160px!important}
}
@media(min-width:1000px){
  #hub:not(.hidden) .quickPicks{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(min-width:1400px){
  #hub:not(.hidden) .quickPicks{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  #hub:not(.hidden) .quickCard{min-height:290px!important}
  #hub:not(.hidden) .quickCard .cardArt{height:150px!important}
}
@media(max-width:699px){
  #hub:not(.hidden){padding-left:6px!important;padding-right:6px!important}
  #hub:not(.hidden) .quickPicks{display:flex!important;overflow-x:auto!important;gap:8px!important;padding:4px 2px 12px!important;scroll-snap-type:x mandatory!important}
  #hub:not(.hidden) .quickCard{flex:0 0 min(72vw,220px)!important;min-height:250px!important;transform:none!important;box-shadow:4px 5px 0 #2c2334!important}
  #hub:not(.hidden) .quickCard .cardArt{height:125px!important}
  #hub:not(.hidden) .games{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
}
@media(max-width:380px){
  #hub:not(.hidden) .games{gap:6px!important}
  #hub:not(.hidden) .gamecard{min-height:224px!important}
  #hub:not(.hidden) .gamecard .cardArt{height:104px!important}
}
/* h9: intentional 10% desktop gutters */
@media(min-width:900px){
  html.hubMode body,body.hubMode{padding-left:0!important;padding-right:0!important}
  html.hubMode body .wrap,body.hubMode .wrap{width:80vw!important;max-width:1500px!important;margin:0 auto!important}
  #hub:not(.hidden){left:auto!important;width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
  #game.panel:has(#hub:not(.hidden)){width:100%!important;max-width:none!important;margin:0!important}
  #hub:not(.hidden) .quickPicks{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #hub:not(.hidden) .games{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important}
}
@media(min-width:1450px){#hub:not(.hidden) .games{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(max-width:899px){html.hubMode body .wrap,body.hubMode .wrap{width:calc(100vw - 12px)!important;max-width:none!important;margin:0 auto!important}#hub:not(.hidden){left:auto!important;width:100%!important;margin-left:0!important;padding:0!important}}
/* h10: deterministic room layout, independent of JS classes */
body:has(#game:not(.hidden)) > .wrap > .siteHeader{display:none!important}
@media(min-width:900px){
  body:has(#hub:not(.hidden)) .wrap{width:80vw!important;max-width:1500px!important;margin:0 auto!important}
  body:has(#hub:not(.hidden)) #game.panel{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
  #hub:not(.hidden){position:static!important;left:auto!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;box-sizing:border-box!important}
  body:has(#hub:not(.hidden)) .roombar,body:has(#hub:not(.hidden)) .players{width:100%!important}
}
@media(max-width:899px){
  body:has(#hub:not(.hidden)) .wrap{width:calc(100vw - 12px)!important;max-width:none!important;margin:0 auto!important}
  #hub:not(.hidden){position:static!important;left:auto!important;width:100%!important;margin:0!important;padding:0!important}
}
/* polish: swipe rows without ugly scrollbars */
.partyTicker,.filters,.quickPicks{scrollbar-width:none!important}
.partyTicker::-webkit-scrollbar,.filters::-webkit-scrollbar,.quickPicks::-webkit-scrollbar{display:none!important}

/* h12: unique game-art sizing + mobile-safe cards */
#hub:not(.hidden) .cardArt{height:auto!important;aspect-ratio:5/3!important;overflow:hidden!important;background:#17131c!important}
#hub:not(.hidden) .cardArt img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;transform:none!important;filter:none!important}
#hub:not(.hidden) .gamecard:hover .cardArt img,#hub:not(.hidden) .quickCard:hover .cardArt img{transform:scale(1.025)!important}
#hub:not(.hidden) .quickCard,#hub:not(.hidden) .gamecard{will-change:auto!important}
#hub:not(.hidden) .quickCard{min-height:0!important}
#hub:not(.hidden) .gamecard{min-height:0!important}
@media(max-width:699px){#hub:not(.hidden) .cardArt{aspect-ratio:1.55!important}#hub:not(.hidden) .quickCard{flex:0 0 min(74vw,230px)!important}#hub:not(.hidden) .gamecard{min-height:0!important}.hubNew .cardCopy b{font-size:15px!important}.hubNew .cardCopy p{min-height:25px!important}.hubNew .cardPlay{padding-top:8px!important}}
@media(max-width:430px){#hub:not(.hidden) .games{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}#hub:not(.hidden) .cardArt{aspect-ratio:1.5!important}.hubNew .cardCopy b{font-size:14px!important}.hubNew .cardCopy p{font-size:9px!important}.hubNew .cardPlay{font-size:8px!important}}
/* h13: reliable card interaction feedback */
.gamecard,.quickCard{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
.gamecard.launching,.quickCard.launching{transform:scale(.985)!important;opacity:.88!important;pointer-events:none!important}
.gamecard.launching .cardArt,.quickCard.launching .cardArt{position:relative!important}
.gamecard.launching .cardArt img,.quickCard.launching .cardArt img{opacity:.45!important;transform:scale(.98)!important}
.gamecard.launching .cardArt:after,.quickCard.launching .cardArt:after{content:""!important;display:block!important;position:absolute!important;left:50%!important;top:50%!important;width:34px!important;height:34px!important;margin:-17px 0 0 -17px!important;border:4px solid #fff8!important;border-top-color:#fff!important;border-radius:50%!important;animation:hubSpin .7s linear infinite!important;z-index:5!important}
.gamecard:focus-visible,.quickCard:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important}
@keyframes hubSpin{to{transform:rotate(360deg)}}
@media(max-width:699px){.gamecard,.quickCard{touch-action:pan-y manipulation}.quickPicks .quickCard{touch-action:pan-x pan-y}}
/* h14: launch-state + guest feedback */
body.gameStarting #hub{pointer-events:none}
body.gameStarting #hub:after{content:"STARTING GAME…";position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:120;background:#17131d;color:#fff;border:2px solid #fff2;padding:12px 18px;border-radius:999px;font-size:11px;font-weight:950;letter-spacing:1.4px;box-shadow:0 14px 40px #0008;animation:launchPop .18s ease-out}
.gamecard[aria-disabled="true"],.quickCard[aria-disabled="true"]{opacity:.82}
.gamecard[aria-disabled="true"] .cardPlay span:after,.quickCard[aria-disabled="true"] .cardPlay span:after{content:" · HOST";font-size:8px;letter-spacing:1px;color:#8f8898}
@keyframes launchPop{from{opacity:0;transform:translate(-50%,8px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-width:699px){body.gameStarting #hub:after{bottom:14px;font-size:10px;padding:10px 14px}}