/* V75 — physical party box and quiet, diorama-like chrome. */
:root{--paper:#f7edcf;--graphite:#344c4e;--crate:#9a6740;--crate-hi:#c98d55;--crate-dark:#5c3e2c}

/* Keep the game as the dominant surface. Floating controls should feel pinned
   to the world, never like a web dashboard surrounding it. */
#app header{height:34px!important;min-height:34px!important;background:linear-gradient(90deg,rgba(31,55,57,.78),rgba(44,72,70,.56),rgba(31,55,57,.78))!important;border-radius:0 0 9px 9px!important}
#app header>div:first-child{font-size:12px!important;letter-spacing:.02em!important}
#app header .gameTools{gap:5px!important}
#app header button{min-height:25px!important;padding:2px 8px!important;border:0!important;background:rgba(246,237,207,.14)!important;color:#fff8dd!important}
#phaseBanner{filter:drop-shadow(0 3px 2px rgba(31,37,35,.18))}

/* The selection is one open wooden crate. Items are loose objects in shallow
   compartments, not a wall of HTML product cards. */
.partyOverlay{background:radial-gradient(ellipse at 50% 88%,rgba(61,81,65,.26),transparent 42%),linear-gradient(#9edfe8 0 72%,#8fc478 72%)!important}
.partyBoard{width:min(930px,97vw)!important;padding:8px 18px 20px!important;perspective:1000px!important}
.partyBoardHead{z-index:2!important;margin:0 auto -3px!important;padding:4px 22px!important;border:0!important;border-radius:4px!important;background:#f4e6bd!important;box-shadow:0 3px 0 #8c6944,0 8px 16px rgba(35,45,40,.14)!important;transform:rotate(-.7deg)!important}
.partyBoardHead span{font-size:10px!important;letter-spacing:.18em!important;opacity:.65!important}
.partyBoardHead h2{font-size:clamp(14px,2vw,21px)!important}
.partyCards{position:relative!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:minmax(84px,1fr)!important;gap:0!important;padding:20px 22px 18px!important;border:0!important;border-radius:12px 12px 24px 24px!important;background:linear-gradient(100deg,var(--crate-dark),var(--crate) 8%,#b97d49 48%,var(--crate) 92%,var(--crate-dark))!important;box-shadow:inset 0 7px 0 var(--crate-hi),inset 0 -9px 0 #6f4931,0 14px 22px rgba(34,43,38,.28)!important;transform:rotateX(2deg)!important}
.partyCards:after{content:"";position:absolute;inset:12px;border:2px solid rgba(74,48,31,.38);border-radius:9px 9px 17px 17px;pointer-events:none;box-shadow:inset 0 0 22px rgba(47,28,17,.18)}
.partyPick,.partyPick:nth-child(n){position:relative!important;z-index:1!important;min-width:0!important;padding:2px!important;border:0!important;border-radius:0!important;background:radial-gradient(ellipse at 50% 72%,rgba(50,29,16,.25),transparent 58%)!important;box-shadow:inset -1px 0 rgba(64,39,23,.26),inset 1px 0 rgba(235,174,106,.2)!important;transform:rotate(var(--tilt)) translateY(0)!important;overflow:visible!important;transition:transform .15s cubic-bezier(.2,.8,.25,1.3),filter .15s!important}
.partyPick img{width:88%!important;height:clamp(60px,11.3dvh,96px)!important;filter:drop-shadow(0 7px 2px rgba(38,25,16,.28))!important;transform:rotate(calc(var(--tilt) * -2.2))!important;transition:transform .15s cubic-bezier(.2,.8,.25,1.35)!important}
.partyPick>span:not(.partyCat){position:absolute!important;left:8%!important;right:8%!important;bottom:2px!important;width:auto!important;padding:2px 5px!important;background:rgba(247,237,207,.90)!important;border:0!important;border-radius:3px!important;transform:rotate(calc(var(--tilt) * -.7))!important;box-shadow:0 2px 0 rgba(71,49,31,.27)!important}
.partyPick strong{font-size:clamp(9px,1.25vw,13px)!important;color:#3b4d4c!important}
.partyPick:not(:disabled):hover,.partyPick:not(:disabled):focus-visible{transform:rotate(var(--tilt)) translateY(-9px) scale(1.06)!important;background:radial-gradient(ellipse at 50% 72%,rgba(255,220,107,.36),transparent 62%)!important;filter:saturate(1.08)!important}
.partyPick:not(:disabled):hover img,.partyPick:not(:disabled):focus-visible img{transform:rotate(calc(var(--tilt) * -2.2)) scale(1.06)!important}
.partyPick.mine,.partyPick.pending{outline:0!important;background:radial-gradient(ellipse at 50% 60%,rgba(255,226,109,.62),transparent 65%)!important}
.partyPick.taken{opacity:.16!important;transform:scale(.82)!important}

/* Home and lobby panels become light material overlays, with less saturated
   cyan competing against character/obstacle colours. */
#join.homeScreen{background:linear-gradient(180deg,#c7e9e7 0 58%,#dfd8b9 58% 61%,#91b879 61% 100%)!important}
.entryConsole,.roomShelf,.hallShelf{background:rgba(249,240,210,.76)!important;border:0!important;border-radius:9px!important;box-shadow:0 7px 18px rgba(55,67,55,.14),inset 0 0 0 1px rgba(74,83,70,.16)!important}
.brandMark{color:#304b4c!important;filter:none!important}
.primaryBig{border:0!important;border-radius:7px!important;box-shadow:0 5px 0 #9e7b31,0 9px 16px rgba(60,57,38,.13)!important}
body.inLobby #mapGallery .mapBtn{background:rgba(248,239,208,.68)!important;border:0!important;box-shadow:0 4px 10px rgba(43,55,49,.12)!important}

@media (max-height:560px),(max-width:820px){
 .partyBoard{padding:3px 7px 8px!important}
 .partyBoardHead{padding:2px 12px!important}
 .partyBoardHead span{display:none!important}
 .partyCards{padding:10px 12px 11px!important;grid-auto-rows:minmax(60px,1fr)!important}
 .partyPick img{height:clamp(47px,11.5dvh,66px)!important}
 .partyPick>span:not(.partyCat){bottom:0!important}
 #app header{height:29px!important;min-height:29px!important}
}