:root{--paper:#eee1c5;--paper2:#d9c7a4;--ink:#181916;--red:#a53e31;--teal:#28685e;--blue:#315878;--gold:#a56c25;--line:rgba(24,25,22,.25);--logo:url('./brand/logo-placeholder.svg');font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:#1d211d;font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--paper);background-image:linear-gradient(90deg,transparent 50%,rgba(47,35,18,.025) 50%),radial-gradient(rgba(30,25,17,.11) .6px,transparent .7px);background-size:7px 100%,5px 5px}button,input,select{font:inherit}button{cursor:pointer}.masthead{min-height:20rem;background:var(--ink);color:var(--paper);padding:clamp(1.25rem,5vw,4.5rem);display:flex;align-items:center;gap:clamp(1rem,5vw,4rem);position:relative;overflow:hidden}.masthead:after{content:'42';position:absolute;right:-.04em;bottom:-.36em;font:900 clamp(14rem,36vw,34rem)/1 Arial Black,sans-serif;color:rgba(238,225,197,.035);transform:rotate(-7deg)}.masthead img{width:clamp(9rem,20vw,15rem);height:auto;transform:rotate(-3deg);z-index:1}.masthead h1{font:900 clamp(3rem,8vw,7rem)/.84 Arial Black,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.07em;margin:.2rem 0;position:relative;z-index:1}.eyebrow{font:700 .78rem/1 Arial,sans-serif;text-transform:uppercase;letter-spacing:.18em;margin:0 0 1rem;color:var(--red)}.masthead .eyebrow{color:#d59a59}.quiet{position:absolute;right:1.5rem;top:1.5rem;border:1px solid #777;background:transparent;color:#ddd;padding:.6rem .8rem}main{overflow:hidden}.desk{display:grid;grid-template-columns:1.05fr 1.35fr 1fr;gap:clamp(1rem,2vw,2rem);padding:clamp(1rem,4vw,4rem);margin-top:-2.5rem;position:relative;z-index:2}.card{background:#f4e9cf;border:2px solid var(--ink);box-shadow:7px 8px 0 rgba(24,25,22,.85);padding:clamp(1.3rem,2.5vw,2.2rem);position:relative;min-height:24rem}.card:nth-child(1){transform:rotate(-1deg)}.card:nth-child(2){transform:rotate(.8deg);background:#ead9b7}.card:nth-child(3){transform:rotate(-.6deg);background:var(--red);color:#fff1d4}.card-no{font:900 3rem/1 Arial Black,sans-serif;opacity:.18;position:absolute;right:1rem;top:.7rem}.card h2,.section-head h2{font:900 clamp(1.8rem,3vw,3rem)/.95 Arial Black,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.045em;margin:.5rem 0 1.8rem}.card label{display:block;font:700 .82rem/1.25 Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;margin:1rem 0}.card small{opacity:.6;font-weight:400}.card input,.card select{width:100%;border:0;border-bottom:2px solid currentColor;background:transparent;padding:.7rem .15rem;color:inherit;outline:none;border-radius:0}.card input:focus,.card select:focus{box-shadow:0 3px 0 var(--gold)}.row{display:grid;grid-template-columns:2fr 1fr;gap:1rem}.primary,.ink{width:100%;border:2px solid var(--ink);background:var(--red);color:white;padding:.9rem 1rem;margin-top:1rem;text-align:left;font:900 1rem Arial,sans-serif;text-transform:uppercase;display:flex;justify-content:space-between}.ink{background:var(--ink);border-color:#fff1d4}.hint{font-size:.9rem;line-height:1.5;opacity:.65}.code-input{font:900 1.7rem/1 monospace!important;letter-spacing:.16em;text-transform:uppercase}.public-section,.catalog-section,.how{padding:clamp(3rem,7vw,7rem) clamp(1rem,4vw,4rem)}.public-section{background:#d8c6a3;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:2rem}.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.8rem}.filters button,.tag{border:1px solid var(--ink);background:transparent;padding:.5rem .7rem;font:700 .74rem Arial,sans-serif;text-transform:uppercase}.filters button.active{background:var(--ink);color:var(--paper)}.room-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem}.room-tile{border-top:3px solid var(--ink);padding:1rem 0;display:grid;grid-template-columns:1fr auto;gap:.5rem}.room-tile h3{font:900 1.35rem Arial,sans-serif;margin:0}.room-tile p{margin:.2rem 0;opacity:.7}.room-tile button{grid-column:2;grid-row:1/3;background:var(--ink);color:var(--paper);border:0;padding:0 1rem}.empty{padding:2rem;border:1px dashed var(--line);text-align:center;opacity:.65}.how{background:var(--ink);color:var(--paper)}.how ol{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);counter-reset:steps}.how li{border-top:1px solid #666;padding:1rem 1rem 3rem 0;display:grid;gap:.7rem}.how li b{font:900 1.6rem Arial,sans-serif;text-transform:uppercase}.how li span{opacity:.7;line-height:1.4}.catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.3rem}.game-card{min-height:15rem;border:2px solid var(--ink);padding:1.2rem;display:flex;flex-direction:column;justify-content:space-between;background:#f5ead0;box-shadow:5px 5px 0 var(--ink)}.game-card:nth-child(even){transform:rotate(1deg)}.game-card .symbol{font:900 4rem Arial Black;color:var(--accent,var(--red))}.game-card h3{font:900 1.5rem Arial,sans-serif;margin:.4rem 0}.game-card p{line-height:1.4;opacity:.7}.game-card footer{display:flex;justify-content:space-between;font:700 .75rem Arial,sans-serif;text-transform:uppercase}.room-view{position:fixed;inset:0;z-index:10;background:var(--paper);overflow:auto;padding:clamp(1rem,4vw,4rem)}.hidden{display:none!important}.room-top{display:flex;justify-content:space-between;align-items:start;border-bottom:3px solid var(--ink);padding-bottom:1.2rem}.room-code{font:900 clamp(2rem,6vw,5rem) Arial Black;letter-spacing:.08em;margin:.2rem 0}.room-grid{display:grid;grid-template-columns:minmax(15rem,.75fr) 2fr;gap:2rem;margin-top:2rem}.members{list-style:none;padding:0}.member{display:grid;grid-template-columns:1rem 1fr auto;align-items:center;gap:.7rem;padding:.8rem 0;border-bottom:1px solid var(--line)}.dot{width:.8rem;height:.8rem;border-radius:50%;background:var(--member-color)}.member small{font:700 .7rem Arial,sans-serif;text-transform:uppercase}.vote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1rem}.vote-card{border:2px solid var(--ink);padding:1rem;background:#f4e9cf;min-height:13rem}.vote-card[aria-disabled=true]{opacity:.45}.vote-card h3{font:900 1.2rem Arial,sans-serif}.vote-card button{width:100%;padding:.7rem;background:var(--ink);color:var(--paper);border:0}.vote-card .votes{font:700 .76rem Arial,sans-serif;min-height:2rem}.room-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}.room-actions button{border:2px solid var(--ink);padding:.75rem 1rem;background:transparent;font:700 .82rem Arial,sans-serif}.room-actions .primary{width:auto;margin:0}.toast{position:fixed;z-index:100;bottom:max(1rem,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,150%);background:var(--ink);color:var(--paper);padding:1rem 1.3rem;box-shadow:4px 4px var(--red);transition:.2s;max-width:min(34rem,90vw)}.toast.show{transform:translate(-50%,0)}.shell{overflow:hidden;background:#111}.shellbar{height:3.5rem;padding:0 max(1rem,env(safe-area-inset-right)) 0 max(1rem,env(safe-area-inset-left));background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:1rem;position:fixed;z-index:5;top:0;left:0;right:0}.shellbar img{width:5rem;height:2.6rem;object-fit:contain}.shellbar #shellStatus{margin-right:auto;font:700 .75rem Arial,sans-serif;color:#88ba87}.shellbar button{border:1px solid #777;background:transparent;color:inherit;padding:.45rem .65rem}.shellbar #shellMenu{display:flex;gap:.5rem}.shell.collapsed .shellbar{width:3.5rem;right:auto;border-radius:0 0 50% 0;padding:.4rem}.shell.collapsed .shellbar>*:not(#collapse){display:none}.shell.collapsed #collapse{font-size:0;border:0;width:2.6rem;height:2.6rem;background:var(--logo) center/contain no-repeat}.shell iframe{position:fixed;border:0;left:0;right:0;bottom:0;top:3.5rem;width:100%;height:calc(100% - 3.5rem);background:#fff}.shell.collapsed iframe{top:0;height:100%}
@media(max-width:800px){.masthead{min-height:15rem;align-items:flex-end}.masthead img{position:absolute;top:1rem;left:1rem;width:7rem}.masthead h1{font-size:3.2rem}.desk{grid-template-columns:1fr;margin-top:-1rem}.card{min-height:auto;transform:none!important}.section-head{align-items:start;flex-direction:column;gap:0}.how ol{grid-template-columns:1fr 1fr}.room-grid{grid-template-columns:1fr}.shellbar strong{display:none}.shellbar #shellMenu{position:absolute;top:100%;right:0;background:var(--ink);padding:.8rem;display:none;flex-direction:column}.shellbar.open #shellMenu{display:flex}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Dark room lobby */
.room-view{background:#111310;color:var(--paper);padding:max(1.2rem,env(safe-area-inset-top)) clamp(1rem,4vw,4rem) max(2rem,env(safe-area-inset-bottom))}
.room-view .room-top{max-width:88rem;margin:0 auto;border-color:rgba(238,225,197,.42);align-items:flex-start;gap:1rem}
.room-view .room-title{font:900 clamp(2.6rem,7vw,6.2rem)/.86 Arial Black,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.055em;margin:.2rem 0 .7rem;max-width:13ch}
.room-view .room-code{font:800 .95em/1 monospace;letter-spacing:.12em;color:#d59a59}
.room-view .room-top>button{border:1px solid rgba(238,225,197,.6);background:transparent;color:var(--paper);padding:.7rem 1rem}
.room-view .room-grid{max-width:88rem;margin:2rem auto 0;grid-template-columns:minmax(15rem,.7fr) minmax(0,2fr)}
.room-view .room-grid>aside{border:1px solid rgba(238,225,197,.28);padding:1.25rem;background:#191c18}
.room-view .room-grid>aside h2{font:900 1.55rem Arial,sans-serif;text-transform:uppercase;margin-top:0}
.room-view .member{border-color:rgba(238,225,197,.2)}
.room-view .member button{border:0;background:transparent;color:var(--paper);font-size:1.25rem}
.room-view .vote-grid{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
.room-view .vote-card{color:var(--ink);background:#eee1c5;box-shadow:5px 5px 0 rgba(238,225,197,.16);min-height:16rem}
.room-view .room-actions button{border-color:rgba(238,225,197,.6);color:var(--paper)}
.room-view .room-actions .primary{border-color:var(--paper);background:var(--red);color:white;text-decoration:none}

/* Floating game overlay: it never changes iframe geometry. */
.shellbar{top:max(.75rem,env(safe-area-inset-top));left:max(.75rem,env(safe-area-inset-left));right:auto;width:3.5rem;height:3.5rem;padding:.25rem;border:1px solid rgba(238,225,197,.35);border-radius:2rem;background:rgba(24,25,22,.96);box-shadow:0 8px 28px rgba(0,0,0,.28);gap:0;overflow:hidden;transition:width .28s ease,border-radius .28s ease}
.shellbar.open{width:min(42rem,calc(100vw - 1.5rem));border-radius:2rem}
.shellbar .shell-logo{position:relative;z-index:2;flex:0 0 3rem;width:3rem;height:3rem;border:0;border-radius:50%;padding:.35rem;background:var(--paper);display:grid;place-items:center;transition:transform .28s ease}
.shellbar.open .shell-logo{transform:translateX(.12rem) rotate(2deg)}
.shellbar .shell-logo img{position:static;width:2.35rem;height:2.35rem;object-fit:contain;transform:none}
.shellbar #shellMenu{position:static;display:flex;align-items:center;gap:.55rem;min-width:0;padding:0 .55rem 0 .8rem;opacity:0;transform:translateX(-.8rem);pointer-events:none;transition:opacity .2s ease .08s,transform .25s ease;white-space:nowrap}
.shellbar.open #shellMenu{display:flex;opacity:1;transform:translateX(0);pointer-events:auto}
.shellbar #shellRoomName{display:block;max-width:12rem;overflow:hidden;text-overflow:ellipsis;font:900 .86rem Arial,sans-serif;text-transform:uppercase}
.shellbar #shellStatus{margin:0;font:700 .68rem Arial,sans-serif;color:#88ba87}
.shellbar #shellMenu button{border:1px solid #777;background:transparent;color:var(--paper);padding:.45rem .65rem;font-size:.78rem}
.shell iframe,.shell.collapsed iframe{inset:0;top:0;width:100%;height:100%}

@media(max-width:800px){
  .room-view .room-top{display:flex;flex-direction:column}
  .room-view .room-title{font-size:clamp(2rem,11vw,3.6rem);overflow-wrap:anywhere}
  .room-view .room-grid{grid-template-columns:1fr}
  .room-view .vote-grid{grid-template-columns:1fr}
  .shellbar.open{height:auto;min-height:3.5rem;border-radius:1.8rem}
  .shellbar #shellMenu{position:static;display:flex;flex-wrap:wrap;background:transparent;padding:.15rem .5rem .15rem .7rem;gap:.35rem}
  .shellbar #shellRoomName{max-width:7rem}
  .shellbar #shellStatus{display:none}
  .shellbar #shellMenu button{padding:.4rem .5rem;font-size:.7rem}
}

/* Square cube menu and live roster. Later rules intentionally replace the older round shell. */
.shellbar{width:4rem;height:4rem;padding:.2rem;border-radius:.35rem;transition:width .28s ease,border-radius .28s ease}
.shellbar.open{width:min(62rem,calc(100vw - 1.5rem));border-radius:.35rem}
.shellbar .shell-logo{flex:0 0 3.6rem;width:3.6rem;height:3.6rem;border-radius:.15rem;padding:.15rem}
.shellbar.open .shell-logo{transform:translateX(.12rem)}
.shellbar .shell-logo img{width:3.25rem;height:3.25rem}
.shellbar #shellMenu{gap:.6rem}
.shellbar .shell-room{display:grid;gap:.15rem;min-width:7rem}
.shellbar #shellRoomName{max-width:11rem}
.shell-players{list-style:none;display:flex;align-items:center;gap:.35rem;min-width:0;margin:0 auto 0 0;padding:0;overflow:hidden}
.shell-player{display:flex;align-items:center;gap:.3rem;max-width:9rem;padding:.3rem .45rem;border:1px solid rgba(238,225,197,.24);font:700 .68rem Arial,sans-serif}
.shell-player span:last-child{overflow:hidden;text-overflow:ellipsis}
.presence-dot{flex:0 0 .55rem;width:.55rem;height:.55rem;border-radius:50%;background:#df5141;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.presence-dot.online{background:#6fc36a}.presence-dot.away{background:#e2b84a}.presence-dot.offline{background:#df5141}
.shell-dialog{width:min(31rem,calc(100% - 2rem));border:3px solid var(--ink);background:var(--paper);color:var(--ink);padding:0;box-shadow:10px 10px 0 var(--ink)}
.shell-dialog::backdrop{background:rgba(15,16,14,.78)}
.shell-dialog>div{padding:2rem;position:relative}
.shell-dialog h2{font:900 2rem/.95 Arial Black,Arial,sans-serif;text-transform:uppercase;margin:.45rem 0 1rem}
.shell-dialog .dialog-close{position:absolute;right:1rem;top:.7rem;border:0;background:transparent;color:var(--ink);font-size:1.8rem}
.shell-dialog .dialog-actions{display:grid;gap:.7rem;margin-top:1.5rem}
.shell-dialog .dialog-actions[hidden]{display:none}
.shell-dialog .primary{margin:0}
.shell-dialog .danger{border:2px solid var(--red);background:transparent;color:#8b2f26;padding:.85rem;text-align:left;font-weight:800}

@media(max-width:800px){
  .shellbar.open{height:auto;min-height:4rem;border-radius:.35rem;align-items:flex-start}
  .shellbar #shellMenu{padding:.3rem .5rem .35rem .7rem;gap:.4rem;white-space:normal}
  .shellbar .shell-room{min-width:calc(100% - .5rem)}
  .shellbar #shellRoomName{max-width:100%}
  .shellbar #shellStatus{display:block}
  .shell-players{order:3;flex:1 0 100%;flex-wrap:wrap;overflow:visible}
}

/* Private room chat stays in the platform shell and never changes game geometry. */
.shell-player{padding:0}
.shell-player-contact,.shell-player-self{display:flex;align-items:center;gap:.3rem;max-width:9rem;padding:.3rem .45rem;color:var(--paper);font:700 .68rem Arial,sans-serif;white-space:nowrap}
.shell-player-contact{border:0;background:transparent;text-align:left}
.shell-player-contact:hover,.shell-player-contact:focus-visible{background:rgba(238,225,197,.14);outline:1px solid rgba(238,225,197,.55)}
.shell-player-contact span:last-child,.shell-player-self span:last-child{overflow:hidden;text-overflow:ellipsis}
.private-chat{--chat-top:5.5rem;position:fixed;z-index:8;top:var(--chat-top);left:max(.75rem,env(safe-area-inset-left));width:min(23rem,calc(100vw - 1.5rem));max-height:calc(100vh - var(--chat-top) - .75rem);display:grid;grid-template-rows:auto minmax(7rem,1fr) auto;border:2px solid var(--paper);background:rgba(24,25,22,.98);color:var(--paper);box-shadow:8px 8px 0 rgba(0,0,0,.32);overflow:hidden}
.private-chat[hidden]{display:none}
.private-chat>header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:.85rem 1rem;border-bottom:1px solid rgba(238,225,197,.3)}
.private-chat>header p{margin:0 0 .2rem;color:#d59a59;font:700 .62rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.14em}
.private-chat>header h2{margin:0;font:900 1rem Arial,sans-serif;text-transform:uppercase}
.private-chat>header button{border:0;background:transparent;color:var(--paper);font-size:1.5rem;line-height:1}
.chat-messages{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:0;padding:.8rem;overflow:auto}
.chat-empty{margin:auto;opacity:.55;font-style:italic}
.chat-message{max-width:88%;padding:.55rem .65rem;border-left:4px solid #777;background:#282b26;font-size:.82rem;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-message.mine{align-self:flex-end;border-left:0;border-right:4px solid var(--red);background:#34302a}
.chat-message time{display:block;margin-top:.25rem;opacity:.48;font:600 .58rem Arial,sans-serif}
.private-chat form{display:grid;grid-template-columns:1fr auto;gap:.45rem;padding:.75rem;border-top:1px solid rgba(238,225,197,.3)}
.private-chat form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.private-chat textarea{min-height:3.2rem;max-height:8rem;resize:vertical;border:1px solid rgba(238,225,197,.45);border-radius:0;background:#111310;color:var(--paper);padding:.6rem;font:inherit}
.private-chat form button{border:1px solid var(--paper);background:var(--red);color:white;padding:.5rem .7rem;font:800 .72rem Arial,sans-serif;text-transform:uppercase}
.message-notice{position:fixed;z-index:9;top:calc(max(.75rem,env(safe-area-inset-top)) + 4.55rem);left:max(.75rem,env(safe-area-inset-left));width:min(31rem,calc(100vw - 1.5rem));border:1px solid rgba(238,225,197,.55);border-left:5px solid var(--red);border-radius:0;background:rgba(24,25,22,.98);color:var(--paper);padding:.7rem .85rem;text-align:left;box-shadow:0 8px 28px rgba(0,0,0,.3);animation:message-in .24s ease-out}
.message-notice[hidden]{display:none}
.message-notice strong{display:block;margin-bottom:.2rem;font:900 .7rem Arial,sans-serif;text-transform:uppercase;color:#d59a59}
.message-notice span{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.86rem;line-height:1.3;overflow-wrap:anywhere}
@keyframes message-in{from{opacity:0;transform:translateY(-.65rem) scaleY(.75);transform-origin:top}to{opacity:1;transform:none}}

@media(max-width:800px){
  .private-chat{width:calc(100vw - 1.5rem)}
  .private-chat form{grid-template-columns:1fr}
  .private-chat form button{justify-self:end}
}

/* The room identity and chats stay left; game controls form a right-aligned group. */
.shellbar{--shell-open-width:min(62rem,calc(100vw - 1.5rem));max-height:4rem;transition:width .28s ease,max-height .28s ease,border-radius .28s ease}
.shellbar #shellMenu{flex:1 1 auto;width:auto;visibility:hidden;transition:opacity .12s ease,transform .25s ease,visibility 0s linear .12s}
.shellbar.open{width:var(--shell-open-width);height:auto;min-height:4rem;max-height:calc(100vh - 1.5rem)}
.shellbar.open #shellMenu{visibility:visible;transition:opacity .12s ease .16s,transform .25s ease,visibility 0s linear 0s}
.shellbar .shell-room{display:flex;align-items:center;min-height:2rem}
.shellbar #shellStatus[hidden]{display:none}
.shell-players{flex:1 1 12rem;flex-wrap:wrap;align-content:center;margin:0;overflow:visible}
.shell-settings{display:flex;align-items:center;gap:.45rem;flex:0 0 auto;margin-left:auto}
.shell-player-all{border-color:#d59a59}
.shell-player-all .shell-player-contact{color:#f0b46f}
.all-mark,.self-mark{display:grid;place-items:center;width:.75rem;height:.75rem;font:900 .78rem Arial,sans-serif}
.chat-message>strong{display:block;margin-bottom:.2rem;color:#d59a59;font:800 .62rem Arial,sans-serif;text-transform:uppercase}
.shell-player{height:2rem;min-height:2rem}
.shell-player-contact,.shell-player-self{height:100%;min-height:100%}
.shell-player-me{border-color:rgba(238,225,197,.55)}
.shell-player{border-width:2px;border-color:color-mix(in srgb,var(--player-color,#68737D) 88%,var(--skin-line,#eee1c5));background:color-mix(in srgb,var(--player-color,#68737D) 30%,var(--skin-shell,#181916))}
.shell-player-me{box-shadow:inset 0 -2px 0 var(--player-color,#68737D)}
.host-crown{flex:0 0 auto;color:#e2b84a;font:900 .85rem/1 Georgia,serif}
.chat-message.note{align-self:stretch;max-width:100%;border-left:4px solid #d59a59;border-right:0;background:#302d27}

@media(max-width:800px){
  .shellbar #shellMenu{width:auto}
  .shellbar .shell-room{display:flex;min-width:calc(100% - .5rem)}
  .shell-players{order:2;flex:1 1 12rem}
  .shell-settings{order:3;margin-left:auto}
}

/* Compact, familiar game controls. Text remains available as tooltip and accessible name. */
.shellbar #shellMenu .shell-icon-button{display:grid;place-items:center;width:2rem;height:2rem;min-width:2rem;padding:.3rem;border-color:rgba(238,225,197,.42);cursor:pointer}
.shellbar #shellPlayers[hidden],.shellbar #shellMenu .shell-icon-button[hidden]{display:none}
.shell-icon-button svg{display:block;width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}
.shell-icon-button svg[hidden]{display:none}
.shellbar #shellMenu .shell-icon-button:hover,.shellbar #shellMenu .shell-icon-button:focus-visible{border-color:var(--paper);background:rgba(238,225,197,.12);outline:none}
.shellbar #shellMenu .shell-exit-button:hover,.shellbar #shellMenu .shell-exit-button:focus-visible{border-color:#e17162;color:#ff9485;background:rgba(181,53,45,.16)}
.shellbar #shellMenu .shell-exit-button:disabled{opacity:.3;cursor:not-allowed;border-color:currentColor;color:inherit;background:transparent}
:root{--logo:url('./brand/games42-main.png')}
.shellbar .shell-logo{padding:0;background:transparent;overflow:hidden}
.shellbar .shell-logo img{width:100%;height:100%;object-fit:cover}

/* Shared appearance and audio controls for the landing page and game shell. */
.page-settings{position:absolute;z-index:3;top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));display:flex;align-items:center;gap:.5rem}
.settings-icon-button{display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:.45rem;border:1px solid currentColor;background:color-mix(in srgb,currentColor 8%,transparent);color:inherit}
.settings-icon-button svg,.volume-row button svg{display:block;width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.settings-icon-button:hover,.settings-icon-button:focus-visible{background:color-mix(in srgb,currentColor 16%,transparent);outline:2px solid currentColor;outline-offset:2px}
.audio-control{position:relative;display:flex;align-items:center}
.audio-toggle .sound-muted{display:none}
.audio-control.is-muted .audio-toggle .sound-waves{display:none}
.audio-control.is-muted .audio-toggle .sound-muted{display:block}
.volume-popover{position:absolute;z-index:20;top:calc(100% + .55rem);left:50%;right:auto;width:min(9rem,calc(100vw - 1.5rem));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;padding:.75rem;border:1px solid var(--skin-line,#777);background:var(--skin-shell,#181916);color:var(--skin-shell-text,#eee1c5);box-shadow:0 12px 32px rgba(0,0,0,.32);opacity:0;visibility:hidden;transform:translate(-50%,-.35rem);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
.volume-popover::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:.7rem}
.audio-control:hover .volume-popover,.audio-control:has(:focus-visible) .volume-popover{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;transition-delay:0s}
.volume-popover>p{grid-column:1/-1;margin:0 0 .25rem;text-align:center;font:900 .68rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--skin-accent-2,#d59a59)}
.volume-row{display:grid;grid-template-columns:1fr;grid-template-rows:2rem auto 1.2rem;justify-items:center;align-items:start;gap:.4rem;min-width:0;padding:.15rem .35rem}
.volume-row+ .volume-row{border-left:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.volume-row>button{display:grid;place-items:center;width:2rem;height:2rem;padding:.3rem;border:1px solid color-mix(in srgb,currentColor 45%,transparent);background:transparent;color:inherit}
.volume-row>button[aria-pressed="true"]{color:#ff9485;border-color:#e17162;background:rgba(181,53,45,.16)}
.volume-row label{display:flex;flex-direction:column;align-items:center;gap:.45rem;font:800 .62rem Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.volume-row input{width:1.15rem;height:7.5rem;margin:0;writing-mode:vertical-lr;direction:rtl;accent-color:var(--skin-accent,#ff7900);cursor:pointer}
.volume-row output{text-align:center;font:700 .65rem ui-monospace,SFMono-Regular,Menlo,monospace}
.shellbar.open{overflow:visible}
.shellbar #shellMenu .volume-row>button{width:2rem;height:2rem;padding:.3rem}

/* The same platform menu overlays landing page, group lobby and running game. */
.shellbar{z-index:30}
.shellbar:not(.has-room){--shell-open-width:min(34rem,calc(100vw - 1.5rem))}
.private-chat{z-index:32}
.message-notice{z-index:31}
.room-view{padding-top:max(6rem,clamp(1rem,4vw,4rem))}

@media(max-width:720px){
  .page-settings{top:.65rem;right:.65rem}
  .settings-icon-button{width:2.25rem;height:2.25rem}
}

/* Player color is a room identity setting available on every platform screen. */
.player-color-dialog{width:min(34rem,calc(100% - 1.5rem))}
.color-dialog-copy{margin:-.35rem 0 1.15rem;line-height:1.45;opacity:.72}
.menu-player-colors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}
.menu-player-colors button{display:grid;grid-template-columns:1.8rem minmax(0,1fr);align-items:center;gap:.55rem;min-width:0;padding:.55rem;border:2px solid transparent;background:color-mix(in srgb,var(--choice-color) 12%,var(--skin-panel,#fff));color:inherit;text-align:left}
.menu-player-colors button:hover,.menu-player-colors button:focus-visible{border-color:var(--choice-color);outline:none}
.menu-player-colors button[aria-pressed="true"]{border-color:var(--choice-color);box-shadow:inset 0 0 0 2px var(--skin-panel,#fff),0 0 0 2px var(--choice-color)}
.menu-player-colors button>span{display:block;width:1.8rem;aspect-ratio:1;border-radius:50%;background:var(--choice-color);border:2px solid color-mix(in srgb,var(--skin-ink,#181916) 35%,transparent);box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.menu-player-red{--choice-color:#D32F2F}.menu-player-orange{--choice-color:#EF6C00}.menu-player-yellow{--choice-color:#C9A600}.menu-player-lime{--choice-color:#76A900}
.menu-player-green{--choice-color:#16823A}.menu-player-turquoise{--choice-color:#008C95}.menu-player-blue{--choice-color:#1565C0}.menu-player-navy{--choice-color:#243B80}
.menu-player-violet{--choice-color:#6A3FB5}.menu-player-purple{--choice-color:#9C27B0}.menu-player-magenta{--choice-color:#D01870}.menu-player-pink{--choice-color:#F05A9D}
.menu-player-brown{--choice-color:#795548}.menu-player-gray{--choice-color:#68737D}.menu-player-white{--choice-color:#F2F2EE}.menu-player-black{--choice-color:#242424}
.menu-player-colors button>b{overflow:hidden;text-overflow:ellipsis;font:800 .68rem Arial,sans-serif}
.color-dialog-status{min-height:1.3rem;margin:.9rem 0 0;color:#d94f43;font:800 .75rem Arial,sans-serif}

@media(max-width:720px){
  .shellbar{top:max(.5rem,env(safe-area-inset-top));left:max(.5rem,env(safe-area-inset-left))}
  .shellbar.open{width:calc(100vw - 1rem);height:auto;min-height:4rem;max-height:calc(100dvh - 1rem);align-items:flex-start;overflow:visible}
  .shellbar #shellMenu{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;width:calc(100vw - 5.4rem);padding:.25rem .35rem .35rem .55rem;white-space:normal}
  .shellbar .shell-room{grid-column:1;min-width:0!important;min-height:2rem}
  .shellbar #shellRoomName{max-width:100%;font-size:.76rem}
  .shell-settings{grid-column:2;grid-row:1;margin-left:0;gap:.3rem}
  .shell-players{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;padding:.3rem 0 .05rem;scrollbar-width:thin}
  .shell-player{flex:0 0 auto;max-width:8.5rem}
  .volume-popover{left:auto;right:-.2rem;transform:translate(0,-.35rem)}
  .audio-control:hover .volume-popover,.audio-control:has(:focus-visible) .volume-popover{transform:translate(0,0)}
  .private-chat{top:var(--chat-top);max-height:calc(100dvh - var(--chat-top) - .5rem)}
  .menu-player-colors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .player-color-dialog>div{padding:1.35rem}
}

/* Definitive compact shell layout. It replaces the legacy wrapping rules above. */
[data-player-color="#D32F2F"]{--player-color:#D32F2F;--member-color:#D32F2F}[data-player-color="#EF6C00"]{--player-color:#EF6C00;--member-color:#EF6C00}
[data-player-color="#C9A600"]{--player-color:#C9A600;--member-color:#C9A600}[data-player-color="#76A900"]{--player-color:#76A900;--member-color:#76A900}
[data-player-color="#16823A"]{--player-color:#16823A;--member-color:#16823A}[data-player-color="#008C95"]{--player-color:#008C95;--member-color:#008C95}
[data-player-color="#1565C0"]{--player-color:#1565C0;--member-color:#1565C0}[data-player-color="#243B80"]{--player-color:#243B80;--member-color:#243B80}
[data-player-color="#6A3FB5"]{--player-color:#6A3FB5;--member-color:#6A3FB5}[data-player-color="#9C27B0"]{--player-color:#9C27B0;--member-color:#9C27B0}
[data-player-color="#D01870"]{--player-color:#D01870;--member-color:#D01870}[data-player-color="#F05A9D"]{--player-color:#F05A9D;--member-color:#F05A9D}
[data-player-color="#795548"]{--player-color:#795548;--member-color:#795548}[data-player-color="#68737D"]{--player-color:#68737D;--member-color:#68737D}
[data-player-color="#F2F2EE"]{--player-color:#F2F2EE;--member-color:#F2F2EE}[data-player-color="#242424"]{--player-color:#242424;--member-color:#242424}
.shellbar.open{height:4rem;min-height:4rem;max-height:4rem}
.shellbar.open #shellMenu{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:3.6rem;align-items:center;align-content:center;height:3.6rem;min-height:0;flex:1 1 auto;overflow:visible}
.shellbar .shell-room{grid-column:1;grid-row:1;min-width:0}
.shellbar .shell-players{grid-column:2;grid-row:1;display:flex;flex:1 1 auto;flex-wrap:nowrap;align-items:center;align-content:center;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden}
.shellbar .shell-settings{grid-column:3;grid-row:1;align-self:center;margin:0}

@media(max-width:720px){
  .shellbar.open{height:auto;min-height:4rem;max-height:6.85rem}
  .shellbar.open #shellMenu{grid-template-columns:minmax(0,1fr) max-content;grid-template-rows:2.4rem 2.4rem;align-content:start;height:5.2rem;width:auto;min-width:0;flex:1 1 0;padding:.15rem .35rem .25rem .55rem}
  .shellbar .shell-room{grid-column:1;grid-row:1;align-self:center;min-height:0}
  .shellbar .shell-settings{grid-column:2;grid-row:1;align-self:center;justify-self:end;min-width:max-content;max-width:100%;gap:.2rem}
  .shellbar .shell-players{grid-column:1/-1;grid-row:2;align-self:center;order:initial;flex:initial;width:100%;padding:.15rem 0;overflow-x:auto;overflow-y:hidden}
  .shellbar:not(.has-room) #shellMenu{grid-template-columns:1fr;grid-template-rows:2.4rem 2.4rem}
  .shellbar:not(.has-room) .shell-room{display:none}
  .shellbar:not(.has-room) .shell-settings{grid-column:1;grid-row:1;justify-self:end}
  .shellbar:not(.has-room) .shell-players{grid-column:1;grid-row:2}
  .shellbar #shellMenu .shell-icon-button{width:1.85rem;height:1.85rem;min-width:1.85rem;padding:.25rem}
}