:root{--ink:#31484b;--cream:#f5e9c8;--sun:#edc85d;--coral:#dc735f;--teal:#48777a}
#join.homeScreen{position:relative;isolation:isolate;min-height:100dvh}
#titleScene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none}
#join.homeScreen:after{background:linear-gradient(90deg,#234c51e6 0%,#234c5177 32%,transparent 65%)!important;z-index:-1}
#join .homeDiorama{visibility:hidden;pointer-events:none}
#join .roomShelf{align-self:start;margin-top:20px!important;min-height:170px;background:#274d54ce!important}
#join .homeHero{align-items:center!important}
html,body{background:#416e72;color:var(--ink)}
button,input{font-family:ui-rounded,'Malgun Gothic',system-ui,sans-serif}
button{border:0!important;box-shadow:none!important;clip-path:none!important}

/* Title screen: one playful stage, no dashboard cards. */
#join.homeScreen{background:linear-gradient(165deg,#538b8b 0 46%,#91b6a4 72%,#d5c795 100%)!important;padding:26px 5vw!important}
.homeScreen:after{background:radial-gradient(circle at 75% 16%,#f4e5a955 0 7%,transparent 7.5%),linear-gradient(110deg,#183d402e,transparent 45%)!important}
.homeTop{border-bottom:1px solid #f8ebc735;padding-bottom:14px}.brandMark{letter-spacing:.02em!important;text-shadow:none!important}.serverPill{background:#f2e5c5!important;color:#315155!important}
.homeHero{grid-template-columns:minmax(310px,420px) minmax(390px,1fr) minmax(260px,330px)!important;min-height:78vh!important}
.heroCopy h1{font-size:clamp(70px,8vw,122px)!important;line-height:.82!important;letter-spacing:-.075em!important;text-shadow:none!important;transform:rotate(-2deg)!important}.heroCopy h1 em{display:inline-block;transform:rotate(2deg);color:#f0c854!important}.heroCopy .tagline{font-weight:900}
.menuPaper{background:transparent!important;padding:0!important;box-shadow:none!important;overflow:visible!important}.menuPaper:before{display:none!important}.nameField input,.codeJoin input{background:#f5ead0!important;border-radius:3px!important;box-shadow:none!important}.primaryBig{background:#edc75d!important;border-radius:3px!important;box-shadow:7px 7px 0 #31565b55!important;transform:rotate(-1deg)}
.roomShelf{background:#31565be8!important;border-radius:3px!important;box-shadow:9px 10px 0 #23424755!important}.roomCard{background:#efe4c7!important;border-radius:2px!important;color:#315155!important}
.homeDiorama{filter:none!important}.dPlatform,.dFan,.dSaw{box-shadow:none!important}.dMascot{filter:none!important}

/* Lobby: the clubhouse canvas itself is the interface. */
body.inLobby #app{background:linear-gradient(#416e72,#779b8e 70%,#b8a978)!important;padding:8px!important}
body.inLobby #app header{background:transparent!important;border-bottom:1px solid #f5e9c833!important;border-radius:0!important;color:#f5e9c8;padding:8px 12px!important}
body.inLobby .gamewrap{border-radius:3px!important;box-shadow:0 18px 38px #17383c42!important}
body.inLobby #phaseBanner{background:#f5e9c8e8!important;border-radius:2px!important;transform:translateX(-50%) rotate(-1deg)!important}
body.inLobby #controlsHint{border-radius:2px!important;background:#31565bdc!important}

/* Party box: loose toy pieces instead of a web shop grid. */
body.inLobby #scorebar{display:none!important}
#mobile #touchSprint{width:58px;height:58px;font-size:13px}
#mobile #touchSprint[aria-pressed="true"]{background:#e5bf72;color:#343b37}
#quickFullscreenBtn{font-size:18px;line-height:1}

/* Controls should suggest touch targets without covering the course. */
.touchUI #mobile button{
 background:#203b4252!important;
 color:#fff8e7d9!important;
 border:1px solid #fff8e74a!important;
 box-shadow:inset 0 0 0 1px #10262b1f,0 3px 10px #10262b24!important;
 backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
 text-shadow:0 1px 3px #10262bcc;
}
.touchUI #mobile button.pressed,.touchUI #mobile button:active{
 background:#e2c37275!important;color:#fffdf4!important;border-color:#fff4c7a8!important;
}
/* Keep the full 2:1 stage and touch controls inside the *visible* landscape
   viewport. visualViewport-backed variables are set by game.js because mobile
   Safari/Chrome browser bars can make even 100dvh too tall on some devices. */
@media (orientation:landscape) and (pointer:coarse){
 .touchUI #app{width:var(--visible-vw,100vw);min-height:var(--visible-vh,100dvh);height:var(--visible-vh,100dvh);padding:0!important;overflow:hidden}
 .touchUI #app header{position:fixed!important;z-index:80;top:5px!important;right:max(6px,env(safe-area-inset-right))!important;left:auto!important;width:auto!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;gap:3px;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
 .touchUI #app header>div:not(:last-child){display:none!important}
 .touchUI #app header>div:last-child{gap:3px!important}
 .touchUI #app header button{width:31px;height:30px;min-width:0;padding:0!important;font-size:14px;line-height:30px;overflow:hidden}
 .touchUI #app header #ping,.touchUI #app header #inviteBtn{display:none!important}
 .touchUI #app header button{background:#263f47b8!important;color:#fff2d3!important;border-radius:9px!important;box-shadow:0 3px 10px #10262b55!important;backdrop-filter:blur(4px)}
 .touchUI #app main{display:grid!important;place-items:center!important;width:var(--visible-vw,100vw)!important;min-height:var(--visible-vh,100dvh)!important;height:var(--visible-vh,100dvh)!important;margin:0!important;padding:0!important;overflow:hidden}
 .touchUI #app .gameColumn{width:100%!important;height:100%!important;display:grid!important;place-items:center!important}
 .touchUI #app .flowStrip,.touchUI #app #mapGallery,.touchUI #app #playPanel{display:none!important}
 .touchUI #app .gamewrap,.touchUI.inLobby #app .gamewrap{
  position:relative;width:min(var(--visible-vw,100vw),calc(var(--visible-vh,100dvh) * 2))!important;
  height:min(calc(var(--visible-vw,100vw) * .5),var(--visible-vh,100dvh))!important;
  max-width:none!important;max-height:var(--visible-vh,100dvh)!important;margin:auto!important;overflow:hidden!important;
 }
 .touchUI #app .gamewrap #game{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain}
 .touchUI:not([data-phase="lobby"])[data-phase] #app{
  min-height:var(--visible-vh,100dvh);
  height:var(--visible-vh,100dvh);
  overflow:hidden;
 }
 .touchUI:not([data-phase="lobby"])[data-phase] #app main{
  width:100vw;
  min-height:var(--visible-vh,100dvh);
  height:var(--visible-vh,100dvh);
  overflow:hidden;
 }
 .touchUI:not([data-phase="lobby"])[data-phase] .gamewrap{
  width:min(var(--visible-vw,100vw),calc(var(--visible-vh,100dvh) * 2));
  height:min(calc(var(--visible-vw,100vw) * .5),var(--visible-vh,100dvh));
  max-height:var(--visible-vh,100dvh);
  margin:auto;
 }
 .touchUI:not([data-phase="lobby"])[data-phase] .gamewrap #game{
  width:100%;height:100%;object-fit:contain;
 }
 .touchUI:not(.controllerMode):has(#app:not(.hidden)) #mobile{
  bottom:calc(max(6px,env(safe-area-inset-bottom)) + var(--visible-vv-bottom,0px));
 }
 .touchUI .modal{position:fixed!important;inset:0!important;width:100vw!important;height:var(--visible-vh,100dvh)!important;min-height:0!important;padding:8px!important;box-sizing:border-box;overflow:hidden;align-items:center!important;justify-content:center!important;z-index:200!important}
 .touchUI .settingsbox{width:min(430px,calc(100vw - 16px))!important;max-height:calc(var(--visible-vh,100dvh) - 16px)!important;padding:14px!important;box-sizing:border-box;overflow:auto!important;overscroll-behavior:contain}
 .touchUI .settingsbox h2{margin:0 0 6px;font-size:20px}.touchUI .settingsbox label{padding:5px 0!important;font-size:12px}.touchUI .settingsbox button{padding:7px 10px;margin-top:4px}
 .touchUI #closeSettings{position:sticky;bottom:0;width:100%;z-index:2;background:#d9b45f!important;color:#2c393a!important}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:500px){
 .touchUI #mobile{padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right));gap:7px}
 .touchUI #mobile .touchGroup{gap:6px}
 .touchUI #mobile button{width:52px;height:52px;font-size:14px}
 .touchUI #mobile #touchJump{width:66px;height:66px;font-size:17px}
 .touchUI #mobile #touchCrouch{width:50px;height:50px;font-size:12px}
 .touchUI #mobile #touchPickup,.touchUI #mobile #touchPlace{width:68px;border-radius:24px}
 .touchUI #mobile #touchSprint{width:48px;height:48px;font-size:11px}
.touchUI #mobile .movementPad .moveKey{width:66px;height:66px;font-size:23px;border-radius:20px}
}
.partyOverlay{background:radial-gradient(circle at 50% 42%,#5c8987,#274a50 76%)!important;padding:14px!important}
.partyBoard{background:transparent!important;width:min(1240px,98vw)!important;max-height:98dvh!important;padding:8px!important;box-shadow:none!important;clip-path:none!important;overflow:auto!important}
.partyBoard,.partyCards,.partyPick{touch-action:pan-y}.partyBoard{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.partyPick{-webkit-user-select:none;user-select:none}
.partyBoard:before{display:none!important}.partyBoardHead{justify-self:center;background:var(--cream)!important;padding:10px 34px!important;border-radius:2px!important;transform:rotate(-1deg);box-shadow:7px 7px 0 #193c4150}.partyBoardHead h2{font-size:30px!important}.partyCards{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(145px,1fr))!important;align-items:end;gap:12px!important;overflow:visible!important}
.partyPick{min-height:180px!important;display:flex!important;flex-direction:column!important;justify-content:flex-end;align-items:center;gap:5px!important;background:transparent!important;border-radius:0!important;padding:6px!important;overflow:visible!important;transition:transform .12s ease,filter .12s ease!important}.partyPick:before{display:none!important}.partyPick img{width:112px!important;height:112px!important;padding:0!important;background:transparent!important;border-radius:0!important;filter:drop-shadow(0 10px 5px #19343842)!important}.partyPick>span:not(.partyCat){background:#f4e8c9ed;padding:6px 9px;text-align:center;min-width:120px;transform:rotate(-1deg)}.partyPick strong{font-size:14px!important}.partyPick small{display:none!important}.partyPick em{font-size:9px!important}.partyPick:hover:not(:disabled){transform:translateY(-10px) rotate(2deg) scale(1.07)!important;filter:saturate(1.15)}.partyPick:disabled:not(.mine){opacity:.25}.partyPick.mine{transform:translateY(-8px) scale(1.06);filter:drop-shadow(0 0 12px var(--owner))}.partyCat{background:#294a50!important;color:#f5e9c8!important;border-radius:12px!important}.partyPick i{background:var(--owner)!important;border-radius:2px!important;color:#243b3f}
.partyLive{background:transparent!important;color:#f5e9c8;box-shadow:none!important;border:0!important}.partyLiveRows>div{background:#f5e9c8e6!important;border-radius:2px!important;box-shadow:none!important;color:#31484b}

/* Settings and results use the same flat painted palette. */
.settingsbox,.modernModal{background:#f4e8c8!important;color:#31484b!important;border-radius:3px!important;box-shadow:9px 10px 0 #17383c66!important}
#toast{background:#f0cb61!important;color:#30494d;border:0!important;border-radius:2px!important;box-shadow:5px 6px 0 #233c4055!important}
@media(max-width:900px){.homeHero{grid-template-columns:1fr 1fr!important}.roomShelf{grid-column:1/-1}.partyCards{grid-template-columns:repeat(3,minmax(0,1fr))!important}.partyPick{min-height:145px!important}.partyPick img{width:82px!important;height:82px!important}}
@media(max-width:600px){.homeHero{grid-template-columns:1fr!important}.homeDiorama{display:none}.partyCards{grid-template-columns:repeat(2,minmax(0,1fr))!important}.partyPick{min-height:124px!important}.partyPick img{width:68px!important;height:68px!important}.partyPick>span:not(.partyCat){min-width:94px;padding:4px}.partyBoardHead h2{font-size:22px!important}}