.launch-screen { box-sizing:border-box; position:fixed; inset:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; padding:0; border:0; border-radius:0; color:#fff9e9; background:#0e221c; }
.launch-screen::backdrop { background:#0e221c; }
.launch-screen { --launch-header-height:104px; }
.launch-screen .launch-header { height:var(--launch-header-height); padding-top:8px; padding-bottom:8px; }
.launch-screen .launch-header img { width:340px; height:88px; flex-shrink:0; }
.launch-screen .opening { min-height:calc(100% - var(--launch-header-height)); }
.launch-header { height:65px; padding:12px 5vw; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #d9e6ce28; font-size:11px; letter-spacing:1px; background:#f6f4ec; color:#21382d; }
.launch-header img { width:200px; height:40px; object-fit:contain; }
.opening { box-sizing:border-box; min-height:calc(100% - 65px); padding:20px 30px; background:radial-gradient(ellipse at 5% 8%,#4c784947,transparent 48%),radial-gradient(ellipse at 95% 30%,#aa8a3540,transparent 45%),linear-gradient(145deg,#173a2c,#10281f 70%); }
.opening-intro { text-align:center; margin:0 auto 18px; }
.opening .eyebrow { color:#dccc82; font-size:11px; letter-spacing:2px; }
.opening h1 { font:normal clamp(32px,4vw,58px)/1 Georgia,serif; margin:8px 0 10px; }
.opening-intro p { color:#cfddcc; font-size:14px; margin:8px 0; }
.opening-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1010px; margin:auto; }
.opening-card { display:flex; flex-direction:column; min-width:0; padding:22px 26px; border:1px solid #d8c6785e; border-top:3px solid #e8bf58; border-radius:18px; background:linear-gradient(145deg,#214936f5,#173629f7); box-shadow:0 18px 38px #061a1470; }
.opening-join { border-top-color:#94c4ac; background:linear-gradient(145deg,#1e443af5,#15312bf7); }
.opening-card h2 { font:normal 28px Georgia,serif; margin:8px 0 17px; }
.opening-card label { display:block; font-size:13px; margin-bottom:7px; }
.opening-card input,.opening-card select { box-sizing:border-box; width:100%; min-width:0; min-height:42px; padding:9px 11px; border:1px solid #b4cbb377; border-radius:7px; background:#0d271ed9; color:#fffdf2; font-size:14px; }
.opening #joinCode { min-height:42px; padding:9px 11px; font-size:14px; letter-spacing:2px; margin:0; }
.opening-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.opening-note { color:#c6d7c4; font-size:13px; line-height:1.5; margin:14px 0; }
.opening-actions { display:grid; gap:9px; margin-top:auto; }
.opening-card button { min-height:43px; font-size:14px; border-radius:8px; }
.opening-join>button { background:#a6d4b9; color:#18382a; }
.opening-resume { display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1010px; margin:0 auto 16px; padding:12px 18px; border:1px solid #dac57488; border-radius:12px; background:#f0dd9b17; }
.opening-resume strong { display:block; margin-top:3px; font:17px Georgia,serif; }
.opening-resume button { white-space:nowrap; }
.opening-status { max-width:1010px; margin:0 auto 10px; color:#f6c896; }
.opening-card-mark { display:flex; justify-content:center; gap:12px; margin:auto 0 0; padding:20px 0 0; }
.opening-card-mark span { display:grid; place-items:center; width:44px; height:62px; border:1px solid #e9dec8; border-radius:7px; background:#f8f5e9; color:#214f3d; font:32px Georgia,serif; box-shadow:2px 3px #a9bba9; }
.opening-card-mark span:nth-child(2) { transform:rotate(-8deg); }
.opening-card-mark span:nth-child(3) { transform:rotate(6deg); }
.lobby { padding-top:50px; text-align:center; }
.room-code { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px; border:1px solid #dac57488; border-radius:12px; max-width:560px; margin:24px auto; text-align:left; }
.room-code strong { display:block; margin-top:8px; font-size:32px; letter-spacing:5px; }
.lobby p { color:#cfddcc; font-size:14px; max-width:560px; margin:20px auto; }
.waiting-seats { display:flex; gap:16px; max-width:560px; margin:24px auto; }
.waiting-seats>div { flex:1; padding:20px; border:1px solid #b4cbb377; border-radius:12px; background:#173629; }
.waiting-seats span { display:block; margin-top:8px; font-size:13px; color:#cfddcc; }
@media(max-width:600px) { .launch-header { height:52px; padding:8px 16px; }.launch-header img { width:150px; height:32px; }.launch-header>span { font-size:8px; max-width:90px; text-align:right; }.opening { min-height:calc(100% - 52px); padding:14px; }.opening-grid { gap:12px; grid-template-columns:1fr; }.opening-intro { margin-bottom:12px; }.opening-intro p { font-size:11px; }.opening-card { padding:14px 16px; }.opening-card h2 { font-size:24px; margin:5px 0 10px; }.opening-card input,.opening-card select { min-height:34px; padding:6px; font-size:12px; }.opening-card button { min-height:32px; padding:6px; font-size:12px; }.opening-actions { grid-template-columns:1fr 1fr; gap:7px; }.opening-actions button:first-child { grid-column:1/-1; }.opening-note { font-size:11px; margin:9px 0; }.opening-card-mark { display:none; }.opening-resume { padding:9px; margin-bottom:12px; gap:9px; }.opening-resume strong { font-size:12px; }.opening-resume .eyebrow { font-size:8px; }.opening-resume button { font-size:10px; padding:7px; }.lobby { padding-top:36px; }.room-code { padding:12px; }.room-code strong { font-size:24px; letter-spacing:3px; }.waiting-seats>div { padding:14px 9px; } }
@media(max-height:600px) and (min-width:601px) { .launch-header { height:45px; padding:5px 24px; }.opening { padding:10px 24px; }.opening-intro { margin-bottom:10px; }.opening h1 { font-size:32px; margin:4px; }.opening-intro p { font-size:11px; margin:4px; }.opening-intro .eyebrow { display:none; }.opening-resume { padding:7px 12px; margin-bottom:9px; }.opening-resume strong { font-size:13px; }.opening-card { padding:12px 16px; }.opening-card h2 { font-size:22px; margin:4px 0 8px; }.opening-card select,.opening-card input { min-height:32px; padding:5px; }.opening-card button { min-height:30px; padding:5px; font-size:12px; }.opening-actions { grid-template-columns:1fr 1fr; gap:6px; }.opening-actions button:first-child { grid-column:1/-1; }.opening-note { margin:8px 0; font-size:11px; }.opening-card-mark { display:none; }.lobby { padding-top:12px; }.lobby p,.room-code,.waiting-seats { margin:12px auto; }.waiting-seats>div { padding:12px; } }
@media(max-width:600px) { .opening { padding:10px 14px; }.opening-intro h1 { font-size:30px; margin:5px 0; }.opening-intro p { margin:5px 0; }.opening-card { padding:12px 14px; }.opening-card h2 { font-size:22px; }.opening #joinCode { min-height:34px; padding:6px; font-size:12px; }.opening-resume { padding:8px; }.opening-grid { gap:10px; } }
@media(max-height:450px) and (min-width:601px) { .opening-intro p,.opening-resume .eyebrow,.opening-card>.eyebrow { display:none; }.opening-resume strong { font-size:12px; }.opening #joinCode { min-height:32px; padding:5px; font-size:12px; }.opening-resume button { min-height:28px; padding:5px 9px; font-size:11px; } }
@media(max-width:600px) { .launch-screen { --launch-header-height:76px; }.launch-screen .launch-header { padding:6px 12px; }.launch-screen .launch-header img { width:min(210px,65vw); height:64px; }.opening-intro { margin-bottom:8px; }.launch-screen .opening { padding-top:6px; } }
@media(max-height:600px) and (min-width:601px) { .launch-screen { --launch-header-height:72px; }.launch-screen .launch-header { padding-top:6px; padding-bottom:6px; }.launch-screen .launch-header img { width:260px; height:60px; } }