@font-face{font-family:Russo;src:url('./assets/fonts/russo-one-400.ttf') format('truetype');font-display:swap;font-weight:400}
@font-face{font-family:Roboto;src:url('./assets/fonts/roboto-400.ttf') format('truetype');font-display:swap;font-weight:400}
@font-face{font-family:Roboto;src:url('./assets/fonts/roboto-500.ttf') format('truetype');font-display:swap;font-weight:500}
@font-face{font-family:Roboto;src:url('./assets/fonts/roboto-700.ttf') format('truetype');font-display:swap;font-weight:700}
:root{color-scheme:dark;--page:#112541;--surface:#0a172e;--inset:#12233e;--line:#385b8e;--muted:#a2bfe9;--text:#eff4ff;--blue:#2853ff;--cyan:#91ceff;--danger:#ffb1b6;font-family:Roboto,Arial,sans-serif;font-synthesis:none;background:var(--page);color:var(--text)}
*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100svh;padding:40px 24px}button,input,textarea{font:inherit}button{cursor:pointer}button,a,summary,input{touch-action:manipulation}button{color:inherit}button:disabled{cursor:wait;opacity:.6}button:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}input:focus-visible+span{outline:3px solid var(--cyan);outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}h1,h2,p{margin:0}h1{font-family:Russo,Arial,sans-serif;font-weight:400}h2{font-weight:500;font-size:22px}img{max-width:100%;display:block}
.panel{background:var(--surface);border:1px solid #4d77b1;border-radius:5px;box-shadow:0 18px 64px #030c2140;padding:22px 30px 28px;margin:0 auto;max-width:992px}.creation-view{max-width:436px;padding-bottom:0}.header{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:8px;white-space:nowrap;font-family:Russo,Arial,sans-serif;font-size:22px;letter-spacing:.4px}.brand img{width:64px;height:44px;object-fit:contain;flex:none;margin-left:-10px}.brand-play{font-family:Roboto,Arial,sans-serif;letter-spacing:1.3px;font-weight:500}.languages{display:flex;align-items:center;gap:0;margin-right:-10px}.languages button{border:0;background:none;padding:10px;min-width:40px;min-height:44px;font-size:16px;color:#91aacc}.languages button[aria-pressed=true]{color:#71a7ff;font-weight:700}.languages span{height:20px;border-right:1px solid #426597}
#empty-state h1{font-size:60px;line-height:1.03;letter-spacing:-1px;max-width:100%;padding:34px 0 28px;border-bottom:1px solid var(--line)}.capacity-picker{margin:28px 0 30px;padding:0;border:0;min-width:0}.capacity-picker legend{font-size:23px;padding:0 0 15px}.capacity-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.capacity-options label{position:relative;cursor:pointer}.capacity-options input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.capacity-options span{display:grid;place-items:center;height:74px;border-radius:8px;border:1px solid #406394;background:var(--inset);font-size:29px;transition:background .12s,border-color .12s}.capacity-options label:hover span{border-color:var(--cyan)}.capacity-options input:checked+span{background:var(--cyan);border-color:var(--cyan);color:#072448;font-weight:500}.button{display:flex;align-items:center;justify-content:center;gap:18px;min-height:64px;padding:17px 20px;border-radius:8px;border:1px solid transparent;font-size:22px;line-height:1.2;font-weight:500;text-align:center}.primary{background:var(--blue);border-color:#5276ff;color:#fff;width:100%}.primary:hover{background:#3862ff}.primary:active{background:#1f43d2}.secondary{background:var(--inset);border-color:var(--line)}.danger{background:#492b42;border-color:#a75572;color:#ffdade}.create-button{min-height:72px;gap:24px}.create-button .icon{margin-left:auto}.create-button span{flex:1}.icon{flex:none;filter:brightness(0) invert(1)}.text-button{display:inline-block;background:none;border:0;padding:10px 0;min-height:44px;color:var(--muted);text-decoration:underline;text-underline-offset:5px;font-size:18px;line-height:1.3}.text-button:hover{color:#fff}.creation-help{display:block;margin:14px auto 0;position:relative;z-index:1}.mascot{width:320px;height:290px;object-fit:contain;opacity:.52;margin:0 auto 12px;pointer-events:none}
.room-heading{padding:28px 0 24px;border-bottom:1px solid var(--line)}.room-number{font-size:20px;color:var(--muted);margin-bottom:16px;outline:none}.game-heading{display:flex;align-items:center;gap:26px;min-height:116px}.game-heading h1{font-size:40px;line-height:1.16;overflow-wrap:anywhere;text-wrap:balance}.game-art{flex:none;width:180px;height:116px;border-radius:8px;overflow:hidden;background:var(--inset);display:grid;place-items:center}.game-art img{width:62px;height:62px;object-fit:contain;filter:invert(.8) sepia(1) saturate(2) hue-rotate(175deg)}.game-art.has-cover img{width:100%;height:100%;object-fit:cover;filter:none}.room-content{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1fr);gap:32px;padding:26px 0 24px}.invitation-area{padding-right:32px;border-right:1px solid var(--line);min-width:0}.invitation-area h2{margin-bottom:20px}.qr-panel{width:280px;max-width:100%;margin-bottom:24px}.qr-panel canvas{width:100%;height:auto;display:block;border-radius:4px;background:#fff;image-rendering:pixelated}.share-button{display:flex;align-items:center;justify-content:center;gap:12px;border:0;background:none;color:var(--muted);width:100%;min-height:48px;margin-top:10px;font-size:18px}.share-button .icon{filter:invert(.85) sepia(1) saturate(2) hue-rotate(178deg)}.share-button:hover{color:#fff}.invite-hint{font-size:17px;color:var(--muted);line-height:1.4;margin-top:12px}.link-details{margin-top:12px;color:#8aabd7;font-size:14px}.link-details summary{width:fit-content;cursor:pointer;min-height:32px;padding:6px 0;text-underline-offset:4px}.link-details textarea{width:100%;resize:vertical;min-height:88px;background:var(--inset);border:1px solid var(--line);border-radius:5px;padding:12px;color:var(--text);line-height:1.5;font-size:14px;word-break:break-all;margin-top:8px}.players-area{min-width:0}.players-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.players-heading>span{font-size:20px;color:var(--muted);white-space:nowrap}.member{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:18px;min-height:67px;padding:9px 0;border-bottom:1px solid #304f7b}.member-avatar{display:grid;place-items:center;border:3px solid #436794;border-radius:50%;width:48px;height:48px;color:#9cbbe5;font-size:25px;line-height:1}.present .member-avatar{border-color:#4850ff;color:#7f9aff}.member-avatar img{width:28px;height:28px;filter:invert(.85) sepia(1) saturate(2) hue-rotate(178deg)}.member-name{font-size:18px;font-weight:500;overflow-wrap:anywhere;min-width:0;line-height:1.3}.member:not(.present) .member-name{font-weight:400;color:var(--muted)}.member-state{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted);max-width:135px;line-height:1.3}.present .member-state::before{content:"";width:9px;height:9px;background:#41bbff;border-radius:50%;flex:none}.waiting .member-state::before{background:#edbb79}.room-status{padding:12px 16px;border:1px solid #7c668c;border-radius:6px;color:#e1c8ef;margin:0 0 18px;line-height:1.5}.room-footer{border-top:1px solid var(--line);padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.help-footer{font-size:16px}.confirm{margin-top:20px;padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--inset)}.confirm p{line-height:1.5}.button-row{display:flex;gap:12px;margin-top:16px}.button-row .button{font-size:17px;min-height:48px;flex:1}.notice{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;padding:13px 20px;border-radius:8px;background:#d8edff;color:#09203d;box-shadow:0 8px 40px #0005;font-size:16px;z-index:10}.error{margin:20px 0;padding:16px;border:1px solid #b15b77;background:#392339;border-radius:7px;color:#ffd4dc;line-height:1.5;overflow-wrap:anywhere}
dialog{width:calc(100% - 32px);max-width:560px;max-height:calc(100svh - 48px);padding:26px;background:var(--surface);color:var(--text);border:1px solid #6484ba;border-radius:12px;box-shadow:0 24px 120px #0009}dialog::backdrop{background:#020919c9}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-header h2{font-family:Russo,Arial,sans-serif;font-weight:400;font-size:25px}.icon-button{display:grid;place-items:center;background:var(--inset);border:1px solid var(--line);border-radius:7px;min-height:44px;min-width:44px}.help-steps{padding-left:26px;margin:24px 0;line-height:1.6;color:#d9e7ff}.help-steps li{padding-left:8px;margin-bottom:16px}.help-steps li::marker{color:var(--cyan);font-weight:700}.help-details{border-top:1px solid var(--line);padding-top:16px;color:var(--muted);line-height:1.55}.help-details summary{cursor:pointer;min-height:44px;color:var(--text)}.help-details p+p{margin-top:14px}
@media(min-width:700px){.creation-view{margin-top:4px}.creation-view .header{gap:6px}.creation-view .brand{font-size:20px}.creation-view .languages button{padding:8px;min-width:35px}}
@media(max-width:700px){body{padding:16px}.panel{padding:18px 22px 22px}.creation-view{padding-bottom:0}.header{gap:8px;padding-bottom:14px}.brand{font-size:19px;gap:2px}.brand img{width:54px;height:40px}.languages button{font-size:15px;padding:8px;min-width:36px}#empty-state h1{font-size:52px;padding:28px 0 24px}.capacity-picker{margin:24px 0}.capacity-options span{height:62px;font-size:26px}.button{font-size:19px;min-height:60px;gap:12px}.mascot{width:285px;height:258px;margin-bottom:8px}.room-heading{padding:22px 0}.room-number{font-size:17px}.game-heading{gap:16px;min-height:90px}.game-art{width:86px;height:86px}.game-heading h1{font-size:27px;line-height:1.2}.room-content{grid-template-columns:1fr;gap:28px;padding:22px 0}.invitation-area{padding:0;border:0}.invitation-area h2{font-size:20px;margin-bottom:16px}.qr-panel{width:240px;margin:0 auto 20px}.invite-hint{text-align:center;font-size:16px;margin-top:6px}.share-button{margin-top:4px;font-size:17px}.link-details{text-align:center}.link-details summary{margin:auto}.link-details textarea{text-align:left}.players-area{border-top:1px solid var(--line);padding-top:23px}.players-heading h2{font-size:20px}.players-heading>span{font-size:18px}.member{grid-template-columns:42px minmax(0,1fr) auto;gap:12px;min-height:62px}.member-avatar{width:42px;height:42px;font-size:22px}.member-name{font-size:17px}.member-state{font-size:14px;max-width:110px}.room-footer{gap:8px}.text-button{font-size:16px}.help-footer{font-size:15px}.error{font-size:15px}.dialog-header h2{font-size:22px}}
@media(max-width:360px){body{padding:10px}.panel{padding:14px 17px 20px}.creation-view{padding-bottom:0}.brand{font-size:16px}.brand img{width:44px;height:34px;margin-left:-6px}.languages button{min-width:32px;padding:6px;font-size:14px}.brand-play{letter-spacing:.5px}#empty-state h1{font-size:46px}.capacity-options{gap:8px}.capacity-options span{height:58px}.mascot{height:220px}.game-art{width:64px;height:64px}.game-heading h1{font-size:23px}.member{gap:10px}.member-state{font-size:12px;max-width:90px}.member-name{font-size:15px}.member-avatar{width:40px;height:40px}.button{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#empty-state h1{white-space:pre-line}
/* Match the approved desktop hierarchy while retaining room for long game titles. */
@media(min-width:701px){.panel:not(.creation-view) .brand{font-size:24px}.panel:not(.creation-view) .brand img{width:76px;height:48px}.game-heading h1{font-size:50px}.game-art{width:200px;height:116px}.member-state{font-size:16px}.member{grid-template-columns:52px minmax(0,1fr) auto}.member-avatar{width:52px;height:52px}}
@media(min-width:701px) and (max-width:980px){.game-heading h1{font-size:40px}.game-art{width:150px}}