.masthead{min-height:12.5rem;padding-top:1.2rem;padding-right:1.7rem;padding-bottom:1.7rem;padding-left:clamp(6.25rem,9vw,8rem)}
.masthead img{width:clamp(7.5rem,12vw,10.5rem);max-height:10rem;transform:none}
.masthead h1{font-size:clamp(2.5rem,6vw,5.2rem)}
.desk-v2{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;max-width:86rem;margin:1.25rem auto 0;padding-top:0}
.desk-v2 .card{min-height:23rem;aspect-ratio:3/4;display:flex;flex-direction:column}
.desk-v2 .profile-card{background:#eee1c5}
.desk-v2 .rooms-card{transform:rotate(.35deg);background:#d9c7a4}
.desk-v2 .action-card{transform:rotate(-.6deg);background:#a53e31;color:#fff1d4}
.desk-v2 .action-card .primary{background:#181916;border-color:#fff1d4;margin-top:auto}
.profile-card label{font-size:1.05rem;letter-spacing:.08em;margin-top:1.35rem}
.profile-card #displayName{font:900 1.35rem/1.2 Arial,sans-serif;padding-top:.9rem}
.profile-card #displayName::placeholder{font-weight:700;opacity:.48}
.player-color-picker{min-width:0;margin:1.25rem 0 0;padding:0;border:0}
.player-color-picker legend{padding:0;font:700 .82rem/1.25 Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.player-colors{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.38rem;margin-top:.65rem}
.player-color{position:relative;display:block;margin:0!important;cursor:pointer}
.player-color input{position:absolute;opacity:0;pointer-events:none}
.player-color span{display:block;aspect-ratio:1;border:2px solid color-mix(in srgb,var(--skin-ink,#181916) 30%,transparent);border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.player-swatch-red{background:#D32F2F}.player-swatch-orange{background:#EF6C00}.player-swatch-yellow{background:#C9A600}.player-swatch-lime{background:#76A900}
.player-swatch-green{background:#16823A}.player-swatch-turquoise{background:#008C95}.player-swatch-blue{background:#1565C0}.player-swatch-navy{background:#243B80}
.player-swatch-violet{background:#6A3FB5}.player-swatch-purple{background:#9C27B0}.player-swatch-magenta{background:#D01870}.player-swatch-pink{background:#F05A9D}
.player-swatch-brown{background:#795548}.player-swatch-gray{background:#68737D}.player-swatch-white{background:#F2F2EE}.player-swatch-black{background:#242424}
.player-color b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.player-color input:checked+span{outline:3px solid var(--skin-ink,#181916);outline-offset:2px;transform:scale(.82)}
.player-color input:focus-visible+span{outline:3px solid var(--skin-accent,#008cff);outline-offset:3px}
.player-color-picker output{display:block;margin-top:.55rem;font:800 .72rem Arial,sans-serif;text-transform:uppercase;color:var(--skin-accent,#315878)}
.room-name-field{display:grid;grid-template-columns:minmax(0,1fr) 2.6rem;align-items:end;gap:.45rem}
.room-name-field input{min-width:0}
.random-room-name{display:grid;place-items:center;width:2.6rem;height:2.6rem;padding:.48rem;border:2px solid currentColor;background:transparent;color:inherit;transition:transform .16s ease,background .16s ease}
.random-room-name:hover{background:rgba(255,255,255,.12);transform:rotate(8deg)}
.random-room-name:active{transform:rotate(-8deg) scale(.92)}
.random-room-name:disabled{cursor:wait;opacity:.45}
.random-room-name svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}
.random-room-name circle{fill:currentColor;stroke:none}
.rooms-heading h2{margin-bottom:1.4rem}
.compact-rooms{display:block;min-height:8rem;max-height:16rem;overflow:auto;padding-right:.4rem}
.compact-rooms .room-tile{grid-template-columns:1fr auto;padding:.8rem 0}
.compact-rooms .room-tile h3{font-size:1rem}
.compact-rooms .room-tile p{font-size:.8rem;line-height:1.35}
.compact-rooms .room-tile button{min-width:4.8rem}
.join-dialog{width:min(27rem,calc(100% - 2rem));border:3px solid #181916;background:#eee1c5;color:#181916;padding:0;box-shadow:10px 10px 0 #181916}
.join-dialog::backdrop{background:rgba(15,16,14,.72)}
.join-dialog form,.join-dialog>div{padding:2rem;position:relative}
.join-dialog h2{font:900 2rem/.95 Arial Black,Arial,sans-serif;text-transform:uppercase}
.join-dialog label{display:block;font:700 .82rem Arial,sans-serif;text-transform:uppercase}
.join-dialog input{width:100%;border:0;border-bottom:2px solid #181916;background:transparent;padding:.8rem .15rem}
.dialog-close{position:absolute;right:1rem;top:1rem;border:0;background:transparent;font-size:1.8rem}
.dialog-actions{display:grid;gap:.7rem;margin-top:1.5rem}
.dialog-actions .primary{margin:0}
.dialog-actions .danger{border:2px solid #a53e31;background:transparent;color:#8b2f26;padding:.85rem;text-align:left;font-weight:800}
.ready-note{border-left:4px solid #d59a59;padding:.65rem .8rem;margin:.25rem 0;font-size:.9rem}
.game-card,.vote-card{position:relative;isolation:isolate;overflow:hidden;padding:0!important;perspective:1100px;background:#172033}
.game-card{min-height:22rem}
.vote-card{display:block;min-height:330px;transition:box-shadow .18s}
.game-card-inner{position:absolute;inset:0;z-index:0;transform-style:preserve-3d;transition:transform .48s cubic-bezier(.2,.75,.25,1)}
.flip-card.is-flipped .game-card-inner{transform:rotateY(180deg)}
.game-card-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.game-card-front{display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;background:linear-gradient(145deg,color-mix(in srgb,var(--accent,var(--game-color,#315878)) 76%,#fff),var(--accent,var(--game-color,#315878)));color:#fff;text-shadow:0 2px 4px #000}
.game-card-front::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,12,18,.02) 34%,rgba(5,12,18,.3) 61%,rgba(5,12,18,.9) 100%)}
.game-card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none}
.game-card-front h3{position:relative;z-index:2;margin:0!important;font:900 clamp(1.25rem,2vw,1.65rem)/1.05 Arial Black,Arial,sans-serif;text-wrap:balance}
.catalog-card .game-card-front{align-items:center;justify-content:center;padding:0}
.catalog-memory-mark{position:relative;z-index:2;display:grid;place-items:center;width:6rem;aspect-ratio:1;border:.55rem double #fff;border-radius:1.1rem;background:linear-gradient(145deg,#ffd32a,#ff5b00 48%,#0767f2 52%,#093ac7);color:#fff;font:900 2.1rem/1 Arial Black,Arial,sans-serif;box-shadow:0 7px 18px #0005;transform:rotate(-5deg);text-shadow:0 2px 2px #0005}
.game-card-back{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.25rem,8%,2rem);transform:rotateY(180deg);background:linear-gradient(90deg,rgba(46,81,126,.1) 1px,transparent 1px),linear-gradient(#fff9e7 1.65rem,#bad6ee 1.7rem,#fff9e7 1.75rem);background-size:100% 1.75rem;color:#1f2b3b;box-shadow:inset 0 0 2rem #b88c4940}
.game-card-back::before{content:'';position:absolute;top:0;bottom:0;left:1.05rem;border-left:2px solid #ec897d80}
.game-card-back h3{font:900 clamp(1.35rem,2.2vw,1.85rem)/1 Arial Black,Arial,sans-serif;margin:0 0 1rem;text-transform:uppercase}
.game-card-back p{font:600 clamp(.88rem,1.3vw,1rem)/1.5 Georgia,serif;margin:0;overflow:auto}
.note-tape{position:absolute;top:.7rem;left:50%;width:4.5rem;height:1rem;transform:translateX(-50%) rotate(-2deg);background:#f4c66799;box-shadow:0 1px 2px #0002}
.card-info{position:absolute!important;z-index:8!important;top:.7rem;right:.7rem;display:grid!important;place-items:center;width:2rem!important;height:2rem!important;min-width:0!important;padding:0!important;border:2px solid currentColor!important;border-radius:50%!important;background:rgba(255,255,255,.9)!important;color:#172033!important;font:900 1rem/1 Georgia,serif!important;text-transform:none!important;box-shadow:0 2px 5px #0004!important}
.card-info:hover,.card-info:focus-visible{transform:scale(1.08)}
.card-info[aria-pressed="true"]{background:#172033!important;color:#fff!important}
.vote-card.is-unavailable .game-card-front{background:#59616a}
.vote-card.is-unavailable .game-card-art{filter:grayscale(1) blur(2.5px);opacity:.34;transform:scale(1.04)}
.vote-card.is-unavailable .game-card-front::after{background:linear-gradient(180deg,rgba(44,49,55,.42),rgba(25,29,34,.78))}
.vote-card .player-count-warning{position:absolute;z-index:3;left:50%;top:48%;bottom:auto;width:max-content;max-width:calc(100% - 2rem);min-height:0;padding:.42rem .7rem;transform:translate(-50%,-50%) rotate(-5deg);border:3px double #8d342d;border-radius:.2rem;background:rgba(255,244,225,.9);color:#8d342d;font:900 .72rem/1.15 Arial,sans-serif;letter-spacing:.045em;text-align:center;text-shadow:none;text-transform:uppercase;box-shadow:0 1px 0 rgba(255,255,255,.65) inset}
.vote-card:before{content:'';position:absolute;left:0;right:0;top:0;height:.45rem;background:var(--game-color,#a53e31)}
.vote-chips{display:flex;align-content:flex-start;flex-wrap:wrap;gap:.4rem;min-height:3rem;margin:.25rem 0}
@media(hover:hover){.vote-card:hover{transform:none;z-index:auto;box-shadow:0 8px 20px #0002}}
.vote-card.my-vote{outline:3px solid var(--game-color);outline-offset:2px}
.vote-card .vote-card-hit{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:inherit;background:transparent;box-shadow:none;z-index:3;cursor:pointer}
.vote-card .vote-card-hit:hover{background:transparent;transform:none}
.vote-card .vote-card-hit:focus-visible{outline:3px solid currentColor;outline-offset:-5px}
.poker-chips{position:absolute;inset:0;pointer-events:none;z-index:5}
.poker-chip{position:absolute;width:88px;height:88px;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;filter:drop-shadow(3px 5px 2px #0005);transition:left .18s,top .18s}
.poker-chip.dragging{cursor:grabbing;transition:none;z-index:10}
.poker-chip.chip-flight{position:fixed;z-index:2147483647;pointer-events:none;transition:none;cursor:grabbing}
.poker-chip.other-chip{cursor:default}
.vote-card.chip-drop-target{outline:4px solid #ff931f;outline-offset:3px}
.room-top.chip-drop-target{outline:3px dashed #ff931f;outline-offset:3px}
.poker-chip svg{width:100%;height:100%;display:block;pointer-events:none}
.chip-face{fill:var(--chip);stroke:#172033;stroke-width:2}
.chip-edge{fill:none;stroke:#fff5df;stroke-width:7;stroke-dasharray:9 8}
.chip-inner{fill:#fff5df;stroke:#172033;stroke-width:1.5}
.chip-name{fill:#fff;stroke:#172033;stroke-width:2.5;paint-order:stroke;font:bold 11px Arial,sans-serif;letter-spacing:1px}
.chip-mark{fill:#172033;font:900 20px Arial,sans-serif}
.vote-card .vote-actions{position:absolute;right:.75rem;bottom:.75rem;z-index:6;pointer-events:none;margin:0}
.vote-card .start-game{opacity:0;pointer-events:none;transform:translateY(.35rem) scale(.82);transition:opacity .16s ease,transform .16s ease,box-shadow .16s ease}
.vote-card:focus-within:not(.is-flipped) .start-game{opacity:1;pointer-events:auto;transform:none}
@media(hover:hover){.vote-card:hover:not(.is-flipped) .start-game{opacity:1;pointer-events:auto;transform:none}}
@media(hover:none){.vote-card.my-vote:not(.is-flipped) .start-game{opacity:1;pointer-events:auto;transform:none}}
.vote-card.is-flipped .vote-actions{visibility:hidden}
@media(prefers-reduced-motion:reduce){.vote-card,.poker-chip,.game-card-inner{transition:none}}
.vote-chip{display:inline-flex;align-items:center;border:1px solid #181916;border-left:.5rem solid var(--chip);background:#fff5dd;color:#181916;padding:.3rem .55rem;font:800 .72rem Arial,sans-serif;box-shadow:2px 2px 0 rgba(24,25,22,.25);transform:rotate(-1deg)}
.vote-chip:nth-child(even){transform:rotate(1deg)}
.no-votes{font-style:italic;opacity:.55;font-size:.85rem}
.vote-actions{display:grid;gap:.45rem;margin-top:auto}
.vote-card .start-game{display:grid;place-items:center;width:3.35rem;height:3.35rem;padding:0;background:#a53e31;color:#fff;border:2px solid #181916;border-radius:50%;font:900 .82rem/1 Arial Black,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.vote-card .start-game:hover{transform:translateY(-1px)!important}
.vote-card .start-game:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.vote-card .start-game:disabled{background:#aaa;color:#333;cursor:not-allowed}
.player-count-warning{font:700 .72rem Arial,sans-serif;color:#8b2f26;min-height:1.8rem}
.room-view .vote-card[aria-disabled=true]{opacity:1}
.mobile-home-tabs,.mobile-room-tabs{display:none}

@media(max-width:940px){
  .desk-v2{gap:1rem;padding-inline:1rem}
  .desk-v2 .card{aspect-ratio:auto;min-height:22rem;padding:1.25rem}
  .desk-v2 .card h2{font-size:clamp(1.45rem,3vw,2rem)}
}
@media(max-width:720px){
  .masthead{min-height:10.5rem;padding:4.7rem 1rem 1.1rem;align-items:flex-end}
  .masthead img{top:.45rem;left:.65rem;width:4rem;max-height:4rem}
  .masthead>div{width:100%}
  .masthead .eyebrow{margin-bottom:.5rem;font-size:.65rem}
  .masthead h1{font-size:clamp(2.1rem,11vw,2.8rem);line-height:.82}
  .mobile-home-tabs,.mobile-room-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;width:calc(100% - 1.5rem);max-width:31rem;margin:.75rem auto 0;padding:.3rem;background:var(--skin-panel,#f4e9cf);border:2px solid var(--skin-line,#181916);box-shadow:4px 4px 0 color-mix(in srgb,var(--skin-line,#181916) 30%,transparent);position:sticky;top:.5rem;z-index:6}
  .mobile-home-tabs button,.mobile-room-tabs button{min-height:2.75rem;border:0;background:transparent;color:inherit;font:900 .72rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em}
  .mobile-home-tabs button[aria-selected="true"],.mobile-room-tabs button[aria-selected="true"]{background:var(--skin-action,#a53e31);color:var(--skin-action-text,#fff);box-shadow:2px 2px 0 var(--skin-line,#181916)}
  .desk-v2{display:block;max-width:31rem;margin:.75rem auto 0;padding:0 .75rem 1.5rem}
  .desk-v2 .card{display:none;min-height:0;aspect-ratio:auto;transform:none;padding:1.35rem;margin:0}
  .desk-v2 .card.mobile-active{display:flex}
  .desk-v2 .card h2{font-size:1.8rem;margin-bottom:1.35rem}
  .compact-rooms{max-height:none;min-height:10rem}
  .player-colors{grid-template-columns:repeat(8,1fr);gap:.5rem}
  .player-color span{min-width:1.65rem}
  .how{padding:2.75rem 1rem}.how ol{grid-template-columns:1fr 1fr;gap:.5rem}.how li{padding-bottom:1.5rem}
  .catalog-section{padding:2.75rem .75rem}.catalog{grid-template-columns:1fr}.game-card{min-height:12rem}
  .mobile-room-tabs{grid-template-columns:1fr 1fr;position:relative;top:auto;margin:1rem 0 0;width:100%}
  .room-view .room-grid{display:block;margin-top:1rem}
  .room-view [data-room-panel]{display:none}
  .room-view [data-room-panel].mobile-active{display:block}
  .room-view [data-room-panel="games"]>.eyebrow{margin-top:1rem}
  .room-view .member{grid-template-columns:1rem minmax(0,1fr) auto;border-left:.45rem solid var(--member-color);padding:.75rem .65rem;background:color-mix(in srgb,var(--member-color) 16%,var(--skin-panel,#191c18));box-shadow:inset .35rem 0 0 var(--member-color)}
  .room-view .member .dot{display:block}
}

@media(max-width:390px){
  .masthead{min-height:9.8rem;padding-top:4.35rem}
  .desk-v2 .card{padding:1.15rem}
  .player-colors{gap:.38rem}
  .player-color span{min-width:1.45rem}
}
