@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&family=Manrope:wght@400;500;600;700;800&display=swap");
:root { font-family:Manrope,system-ui,sans-serif; color:var(--ink); background:var(--page); }
* { box-sizing:border-box; } body { min-width:320px; margin:0; background:linear-gradient(115deg,var(--page-a),var(--page-b) 44%,var(--page-c)); } button,input { font:inherit; }
.peer-shell { width:min(1280px,calc(100% - 3rem)); margin:auto; padding:1.25rem 0 2rem; }
.peer-masthead { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding-bottom:1.15rem; border-bottom:1px solid var(--border); }
.peer-wordmark { display:flex; align-items:center; gap:.65rem; color:var(--ink); font-size:.72rem; line-height:.9; text-decoration:none; text-transform:uppercase; }.peer-wordmark span { display:grid; place-items:center; width:2.25rem; aspect-ratio:1; border-radius:.3rem; color:var(--on-ink); background:var(--ink); font:700 1.45rem Fraunces,serif; }.peer-wordmark b { color:var(--orange); }
.peer-masthead>div { display:grid; justify-items:center; }.peer-masthead>div strong { font:500 .72rem "DM Mono",monospace; letter-spacing:.12em; }.peer-masthead>div small { margin-top:.2rem; color:var(--muted); font-size:.68rem; }.peer-masthead>p { display:flex; align-items:center; gap:.45rem; margin:0; color:var(--muted); font:400 .64rem "DM Mono",monospace; }.peer-masthead i { width:.5rem; aspect-ratio:1; border-radius:50%; background:#4c9b59; box-shadow:0 0 0 .2rem #4c9b5926; }.peer-masthead p.offline i { background:var(--orange); }
.eyebrow { margin:0; color:var(--orange-dark); font:500 .67rem "DM Mono",monospace; letter-spacing:.11em; text-transform:uppercase; }
.join-view { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr); align-items:center; gap:clamp(3rem,8vw,8rem); min-height:calc(100vh - 10rem); padding:4rem 4vw; }.join-copy h1 { margin:.7rem 0 1.2rem; font:700 clamp(3.5rem,7vw,6.8rem)/.86 Fraunces,serif; letter-spacing:-.045em; }.join-copy h1 em { color:var(--orange); }.join-copy>p:last-child { max-width:35rem; color:var(--text-body); line-height:1.65; }
.join-card { display:grid; gap:1rem; border:1px solid var(--border); border-radius:.9rem; padding:clamp(1.4rem,3vw,2.2rem); background:var(--panel); box-shadow:.45rem .55rem 0 var(--shadow-hard); }.join-card label { display:grid; gap:.4rem; color:var(--orange-dark); font:500 .65rem "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }.join-card input { width:100%; border:1px solid var(--line); border-radius:.45rem; padding:.85rem; color:var(--ink); background:var(--cream); font:700 .9rem Manrope,sans-serif; text-transform:none; }.join-card input:focus { outline:2px solid var(--orange); outline-offset:2px; }.join-card button,.action-dock button { display:flex; justify-content:space-between; border:0; border-radius:.45rem; padding:.85rem 1rem; color:var(--on-accent); background:var(--orange); cursor:pointer; font-size:.75rem; font-weight:800; }.join-card button:hover,.action-dock button:hover:not(:disabled) { background:var(--accent-deep); }.join-card button:disabled,.action-dock button:disabled { cursor:not-allowed; opacity:.35; }.join-card>p { min-height:2.2rem; margin:0; color:var(--muted); font-size:.69rem; line-height:1.5; }
.pack-picker { min-width:0; margin:0; border:0; padding:0; }.pack-picker legend { margin-bottom:.45rem; color:var(--orange-dark); font:500 .65rem "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }.core-packs { display:grid; gap:.4rem; }.join-card .core-packs label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.55rem; border:1px solid var(--line); border-radius:.45rem; padding:.6rem .7rem; color:var(--ink); background:var(--cream); font:700 .7rem Manrope,sans-serif; letter-spacing:0; text-transform:none; cursor:pointer; }.join-card .core-packs input { width:1rem; accent-color:var(--orange); }.pack-picker small { display:block; margin-top:.45rem; color:var(--muted); font-size:.58rem; line-height:1.4; }.join-card .indexed-button { width:100%; margin-top:.45rem; border:1px solid var(--line); color:var(--ink); background:transparent; }.join-card .indexed-button:hover:not(:disabled) { color:var(--on-accent); background:var(--accent-deep); }
.table-view { padding-top:1.25rem; }.room-bar { display:grid; grid-template-columns:1fr auto auto auto; gap:2rem; border:1px solid var(--border); border-bottom:0; border-radius:1rem 1rem 0 0; padding:.8rem 1.1rem; background:var(--panel); }.room-bar>div { display:flex; align-items:baseline; gap:.6rem; }.room-bar span { color:var(--orange-dark); font:500 .58rem "DM Mono",monospace; letter-spacing:.1em; }.room-bar strong { font:700 .82rem "DM Mono",monospace; }.room-bar button { border:0; border-bottom:1px solid currentColor; padding:0; color:var(--orange-dark); background:transparent; cursor:pointer; font-size:.62rem; }
.game-grid { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:650px; overflow:hidden; border:1px solid var(--border); border-radius:0 0 1rem 1rem; box-shadow:0 1.25rem 3.5rem var(--shadow-diffuse); }.players-panel { padding:1.5rem; border-right:1px solid var(--border-soft); background:var(--panel); }.players { display:grid; gap:.55rem; margin-top:1.25rem; }.player { display:grid; grid-template-columns:2rem 1fr auto; align-items:center; gap:.6rem; border:1px solid var(--line); border-radius:.5rem; padding:.65rem; background:var(--cream); }.player-avatar { display:grid; place-items:center; width:2rem; aspect-ratio:1; border-radius:50%; color:var(--on-accent); background:var(--orange); font-weight:800; }.player b { font-size:.73rem; }.player small { display:block; color:var(--muted); font-size:.58rem; }.player-score { font:500 .7rem "DM Mono",monospace; }.player.away { opacity:.48; }.player.adult { border-color:var(--orange); box-shadow:inset .2rem 0 var(--orange); }.seat-note { margin:1rem 0 0; color:var(--muted); font-size:.65rem; line-height:1.45; }
.play-panel { display:flex; flex-direction:column; min-width:0; padding:clamp(1.3rem,3vw,2.25rem); background:var(--panel-sunk); }.peer-prompt { position:relative; min-height:210px; overflow:hidden; border-radius:.75rem; padding:1.4rem; color:var(--on-accent); background:var(--orange); box-shadow:.45rem .55rem 0 var(--shadow-hard); }.peer-prompt>p { margin:0; color:#f2d8cb; font:500 .67rem "DM Mono",monospace; letter-spacing:.1em; }.peer-prompt blockquote { max-width:48rem; margin:1.3rem 0 0; font:600 clamp(1.8rem,4vw,3.25rem)/1.01 Fraunces,serif; letter-spacing:-.035em; }.peer-prompt>span { position:absolute; right:1.2rem; bottom:.7rem; color:#ffffff35; font:800 3.6rem Fraunces,serif; }
.peer-result { margin:1.25rem 0 0; border:1px solid var(--border-card); border-radius:.55rem; padding:1rem 1.15rem; background:var(--cream); box-shadow:.2rem .25rem 0 var(--shadow-soft); }.peer-result blockquote { margin:.55rem 0; color:var(--text-body); font:italic 600 1.2rem/1.35 Fraunces,serif; }.peer-result>p:last-child { margin:0; color:var(--muted); font-size:.67rem; }
.choice-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin:1.5rem 0 .75rem; }.choice-heading h2 { margin:.25rem 0 0; font:700 1.5rem Fraunces,serif; }.choice-heading>span { color:var(--muted); font:400 .62rem "DM Mono",monospace; }.peer-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.7rem; }.choice { position:relative; min-height:7rem; border:1px solid var(--border-card); border-radius:.55rem; padding:1rem; color:var(--ink); background:var(--cream); box-shadow:.2rem .25rem 0 var(--shadow-soft); cursor:pointer; font-size:.76rem; font-weight:700; line-height:1.4; text-align:left; }.choice:hover { transform:translateY(-2px); }.choice.selected { border-color:var(--orange); box-shadow:inset .25rem 0 var(--orange),.2rem .25rem 0 var(--shadow-soft); }.choice.selected::after { content:"✓"; position:absolute; top:.5rem; right:.65rem; color:var(--orange); font-size:1rem; }.empty-choice { grid-column:1/-1; border:1px dashed var(--border-strong); border-radius:.55rem; padding:1.5rem; color:var(--muted); text-align:center; }
.action-dock { margin-top:auto; padding-top:1.4rem; }.action-dock>p { min-height:1.2rem; margin:0 0 .7rem; color:var(--text-body); font-size:.72rem; font-weight:700; }.action-dock>div { display:flex; flex-wrap:wrap; gap:.5rem; }.action-dock button { display:none; }.action-dock button.visible { display:block; }.action-dock .secondary { border:1px solid var(--ink); color:var(--ink); background:transparent; }.action-dock .danger { margin-left:auto; border:1px solid var(--orange-dark); color:var(--orange-dark); background:transparent; }
footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.2rem; padding:1.1rem .2rem 0; color:var(--muted); font:400 .62rem "DM Mono",monospace; } footer a { color:var(--orange-dark); text-decoration:none; }
.modal-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:1rem; background:#171511b8; }.pack-modal { display:flex; flex-direction:column; width:min(760px,100%); max-height:min(780px,92vh); overflow:hidden; border:1px solid var(--border); border-radius:.85rem; padding:1.25rem; background:var(--paper); box-shadow:.6rem .7rem 0 var(--shadow-modal); }.pack-modal>header { display:flex; align-items:start; justify-content:space-between; gap:1rem; }.pack-modal h2 { margin:.25rem 0 0; font:700 2rem Fraunces,serif; }.pack-modal>header>button { border:0; color:var(--ink); background:transparent; cursor:pointer; font-size:1.7rem; line-height:1; }.pack-modal>p { margin:.7rem 0; color:var(--muted); font-size:.7rem; }.pack-tools { display:flex; gap:.5rem; margin-bottom:.65rem; }.pack-tools button,.pack-modal>footer button { border:1px solid var(--ink); border-radius:.4rem; padding:.5rem .7rem; color:var(--ink); background:transparent; cursor:pointer; font-size:.68rem; font-weight:700; }.indexed-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; overflow:auto; overscroll-behavior:contain; padding:.15rem .4rem .5rem .15rem; contain:layout paint; }.indexed-options label { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:.55rem; border:1px solid var(--line); border-radius:.45rem; padding:.65rem; background:var(--cream); cursor:pointer; font-size:.68rem; font-weight:700; }.indexed-options input { margin-top:.15rem; accent-color:var(--orange); }.indexed-options small { display:block; margin-top:.1rem; color:var(--muted); font:400 .55rem "DM Mono",monospace; }.pack-modal>footer { justify-content:flex-end; padding-top:.8rem; }.pack-modal>footer button:last-child { border-color:var(--orange); color:var(--on-accent); background:var(--orange); }
[hidden] { display:none!important; }
@media(max-width:800px){.peer-shell{width:min(100% - 1.25rem,760px)}.peer-masthead{grid-template-columns:1fr auto}.peer-masthead>div{display:none}.peer-masthead>p{font-size:0}.join-view{grid-template-columns:1fr;gap:2rem;padding:3rem 1rem}.join-copy h1{font-size:clamp(3.2rem,15vw,5rem)}.game-grid{grid-template-columns:1fr}.players-panel{border-right:0;border-bottom:1px solid var(--line)}.players{display:flex;overflow-x:auto}.player{min-width:12rem}.room-bar{grid-template-columns:1fr auto auto}.room-bar>div:last-child{display:none}.peer-prompt{min-height:190px}.action-dock{position:sticky;bottom:0;margin:1rem -1.3rem -1.3rem;padding:1rem 1.3rem;background:var(--panel-sunk-glass);box-shadow:0 -.5rem 1rem var(--panel-sunk)}.action-dock .danger{margin-left:0}}
@media(max-width:460px){.peer-shell{width:100%;padding-top:.75rem}.peer-masthead{padding:0 .8rem .75rem}.table-view{padding-top:.75rem}.room-bar,.game-grid{border-left:0;border-right:0;border-radius:0}.room-bar{grid-template-columns:1fr auto;gap:.7rem;padding:.7rem}.room-bar>div{gap:.35rem}.room-bar .room-packs{display:none}.play-panel{padding:1rem}.peer-prompt blockquote{font-size:1.75rem}.peer-choices{grid-template-columns:1fr 1fr}.choice{min-height:8rem;padding:.8rem}.action-dock{margin-left:-1rem;margin-right:-1rem;margin-bottom:-1rem;padding-left:1rem;padding-right:1rem}.indexed-options{grid-template-columns:1fr}footer{padding:1rem}}