:root { --ink:#213b35; --paper:#f8efd9; --cream:#fffaf0; --table:#dfd1b3; --green:#1d5347; --deep-green:#123a33; --clay:#b9533c; --gold:#efba63; --line:#d7c29e; --muted:#6f6656; }
    * { box-sizing:border-box; }
    body { min-height:100svh; margin:0; min-width:320px; color:var(--ink); font-family:ui-rounded, "Trebuchet MS", system-ui, sans-serif; background:linear-gradient(rgba(255,250,238,.54),rgba(229,213,178,.64)),url('assets/krakel-hintergrund.webp') center/cover fixed; }
    button,input,select { font:inherit; }
    button { cursor:pointer; }
    .app { width:min(1660px,calc(100% - 48px)); min-height:100svh; display:flex; align-items:center; margin:0 auto; padding:22px 0; }
    .app.game-active { width:calc(100% - 16px); max-width:none; padding:8px 0; }
    .screen { display:none; width:100%; min-height:0; }
    .screen.active { display:block; }
    .entry { min-height:600px; display:grid; grid-template-columns:1.02fr .98fr; overflow:hidden; border:2px solid rgba(255,250,238,.9); border-radius:12px; box-shadow:0 22px 52px rgba(54,43,24,.34); }
    .entry-story { position:relative; padding:62px 56px 48px; display:flex; flex-direction:column; overflow:hidden; background:linear-gradient(145deg,#24604f 0%,var(--green) 57%,#17463d 100%); color:#fcf4de; }
    .entry-story::before { content:""; position:absolute; inset:0; opacity:.42; background:radial-gradient(circle at 18% 42%,rgba(239,186,99,.42) 0 2px,transparent 3px),radial-gradient(circle at 78% 17%,rgba(255,248,230,.5) 0 2px,transparent 3px),linear-gradient(112deg,transparent 0 47%,rgba(255,248,230,.06) 47.2% 47.5%,transparent 47.8%); background-size:26px 26px,34px 34px,100% 100%; }
    .entry-story::after { content:""; position:absolute; width:205px; height:205px; right:-104px; top:-90px; border:2px solid rgba(252,244,222,.18); border-radius:50%; box-shadow:-21px 19px 0 -19px rgba(239,186,99,.8),-46px 43px 0 -44px rgba(252,244,222,.34); }
    .entry-brand { position:relative; z-index:1; }
    .brand { font:700 32px/1 Georgia,serif; letter-spacing:-1.4px; }
    .entry-story .brand { max-width:480px; font-size:clamp(60px,4.8vw,86px); line-height:.88; letter-spacing:-3px; text-shadow:3px 3px 0 rgba(31,63,54,.5); }
    .tagline { color:var(--gold); margin-top:4px; font-size:13px; font-weight:800; }
    .entry-story .tagline { display:inline-block; margin-top:16px; padding-top:14px; border-top:3px solid var(--gold); font-size:clamp(19px,1.55vw,25px); letter-spacing:.2px; }
    .hero-doodles { position:absolute; z-index:1; top:24%; right:5%; width:86%; max-height:320px; color:#fdf4dd; opacity:.92; transform:rotate(-3deg); }
    .entry-copy { position:relative; z-index:1; margin-top:auto; }
    .entry-story h1 { max-width:440px; margin:0 0 16px; font:700 46px/1.04 Georgia,serif; letter-spacing:-1.4px; }
    .entry-story p { max-width:390px; margin:0; color:#dce7d9; font-size:18px; line-height:1.5; }
    .chalk-art { position:relative; z-index:1; width:210px; margin:30px 0 0 auto; color:#fcf4de; }
    .entry-form { position:relative; padding:58px 40px 44px; background:linear-gradient(135deg,#fffaf0,var(--paper)); }
    .entry-form::after { content:""; position:absolute; right:0; top:0; width:102px; height:102px; border-left:1px solid rgba(185,83,60,.18); border-bottom:1px solid rgba(185,83,60,.18); transform:translate(37px,-37px) rotate(45deg); }
    .entry-masthead-art { display:none; }
    .entry-footer { position:relative; z-index:1; display:flex; justify-content:flex-end; align-items:center; gap:9px; margin-top:12px; color:#8a6d59; font-size:12px; font-weight:800; }
    .entry-footer a { color:inherit; text-decoration:none; }
    .entry-footer a:hover,.entry-footer a:focus-visible { color:var(--clay); text-decoration:underline; text-underline-offset:3px; }
    .entry-eyebrow { position:relative; z-index:1; display:flex; align-items:center; gap:10px; width:max-content; margin:0 0 15px; padding:5px 11px 5px 5px; color:var(--clay); border:1px solid rgba(185,83,60,.22); background:rgba(255,253,246,.72); font-size:12px; font-weight:900; letter-spacing:.8px; text-transform:uppercase; transform:rotate(-.6deg); }
    .entry-eyebrow span { display:grid; place-items:center; width:28px; height:28px; color:var(--deep-green); background:var(--gold); font:800 17px/1 Georgia,serif; transform:rotate(-6deg); }
    .entry-form h1 { position:relative; z-index:1; width:max-content; max-width:100%; margin:0 0 13px; padding-bottom:7px; color:var(--deep-green); border-bottom:4px solid var(--gold); font-size:41px; letter-spacing:-1.2px; }
    .entry-form .help { max-width:620px; padding:0; border:0; font-size:16px; line-height:1.55; }
    .entry-help-link { position:relative; z-index:1; display:inline-grid; grid-template-columns:25px minmax(0,auto) 18px; align-items:center; gap:9px; width:max-content; max-width:100%; margin:15px 0 0; padding:8px 11px 8px 9px; border:1px solid #e1c88e; border-left:4px solid var(--clay); border-radius:2px; color:var(--deep-green); background:#fff3d3; box-shadow:2px 3px 0 rgba(133,96,43,.12); font-size:12px; font-weight:700; text-decoration:none; }
    .entry-help-link > span:first-child { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff9ed; background:var(--clay); font-weight:900; }
    .entry-help-link strong { margin-right:3px; }
    .entry-help-link b { font-size:17px; transition:transform .16s ease; }
    .entry-help-link:hover,.entry-help-link:focus-visible { border-color:var(--clay); color:var(--clay); background:#fff9e9; outline:0; }
    .entry-help-link:hover b,.entry-help-link:focus-visible b { transform:translateX(3px); }
    .avatar-picker { position:relative; z-index:1; display:grid; grid-template-columns:175px minmax(0,1fr); align-items:center; column-gap:18px; margin:24px 0 -8px; padding:16px 17px 18px; border:1px solid #dec78f; background:linear-gradient(115deg,rgba(255,253,246,.94),rgba(255,243,213,.75)); box-shadow:4px 4px 0 rgba(217,184,125,.2); }
    .avatar-picker::before { content:'✦'; position:absolute; top:-11px; right:17px; display:grid; place-items:center; width:27px; height:27px; color:var(--deep-green); background:var(--gold); font:900 16px/1 Georgia,serif; transform:rotate(10deg); }
    .avatar-picker-intro { min-width:0; }
    .avatar-picker-label { margin:0; color:var(--deep-green); font-size:16px; font-weight:900; }
    .avatar-picker-label::before { content:'DEIN PROFIL'; display:block; margin-bottom:3px; color:var(--clay); font-size:10px; letter-spacing:.8px; }
    .avatar-picker-help { margin:3px 0 0; color:var(--muted); font-size:12px; font-weight:700; line-height:1.25; }
    .avatar-choices { display:grid; grid-template-columns:repeat(5,minmax(66px,1fr)); gap:9px; max-width:640px; min-width:0; }
    .avatar-choice { display:grid; grid-template-rows:51px 14px; justify-items:center; align-items:center; min-width:0; height:76px; padding:4px 3px 5px; border:1px solid transparent; border-radius:3px; background:rgba(255,255,255,.48); box-shadow:0 2px 0 rgba(74,60,40,.09); cursor:pointer; transition:transform .16s ease,background .16s ease,box-shadow .16s ease; }
    .avatar-choice:hover { background:#fff8e8; box-shadow:2px 4px 0 rgba(185,83,60,.18); transform:translateY(-3px) rotate(-2deg); }
    .avatar-choice.active { border-color:var(--clay); background:#fff7dc; box-shadow:3px 4px 0 rgba(185,83,60,.24); }
    .avatar-choice::after { content:attr(data-label); color:#563c2d; font-size:11px; font-weight:900; line-height:1; }
    .avatar-choice svg { display:block; width:51px; height:51px; }
    .avatar svg { display:block; width:100%; height:100%; }
    .entry-paths { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:18px; margin-top:38px; }
    .entry-path { position:relative; display:flex; flex-direction:column; min-height:540px; padding:32px 30px 28px; border:1px solid rgba(29,83,71,.2); background:rgba(255,253,246,.78); box-shadow:7px 7px 0 rgba(239,186,99,.22); }
    .entry-path.join-path { transform:rotate(-.35deg); }
    .entry-path.create-path { margin-top:16px; background:rgba(252,244,222,.9); box-shadow:7px 7px 0 rgba(185,83,60,.14); transform:rotate(.38deg); }
    .path-kicker { display:flex; align-items:center; gap:11px; margin:0 0 17px; color:var(--clay); font-size:14px; font-weight:900; letter-spacing:.8px; text-transform:uppercase; }
    .path-kicker span { display:grid; place-items:center; width:31px; height:31px; background:var(--clay); color:#fff9ed; font:800 18px/1 Georgia,serif; transform:rotate(-7deg); }
    .create-path .path-kicker { color:#9a6720; }
    .create-path .path-kicker span { background:var(--gold); color:var(--deep-green); transform:rotate(7deg); }
    .path-title { margin:0 0 10px; color:var(--deep-green); font:700 31px/1.02 Georgia,serif; letter-spacing:-.9px; }
    .path-copy { min-height:52px; margin:0 0 20px; color:var(--muted); font-size:16px; line-height:1.4; }
    .entry-path label { display:block; margin:18px 0 8px; font-size:16px; }
    .entry-path label::before { display:none; }
    .entry-path input { min-height:56px; padding:12px 14px; font-size:17px; }
    .entry-path .primary,.entry-path .secondary { width:100%; margin-top:auto; margin-bottom:0; padding:18px 13px; font-size:17px; transform:none; }
    .entry-path .primary:hover { transform:translateY(-2px); }
    .entry-path .notice { margin-bottom:0; }
    .play-step { position:relative; padding:15px 18px 17px 60px; border:1px solid rgba(29,83,71,.16); background:rgba(255,253,246,.74); box-shadow:4px 4px 0 rgba(239,186,99,.2); }
    .play-step::before { content:attr(data-step); position:absolute; left:16px; top:50%; width:31px; height:31px; display:grid; place-items:center; transform:translateY(-50%) rotate(-7deg); color:#fff9ed; background:var(--clay); font:800 17px/1 Georgia,serif; }
    .play-step:nth-of-type(2) { margin-left:13px; transform:rotate(.45deg); }
    .play-step:nth-of-type(2)::before { background:var(--gold); color:var(--deep-green); transform:translateY(-50%) rotate(7deg); }
    .play-step:nth-of-type(3) { margin-right:10px; transform:rotate(-.35deg); }
    .play-step:nth-of-type(3)::before { background:#69a58a; }
    .play-step label { margin:0 0 6px; }
    .play-step label::before { display:none; }
    .play-step input { min-height:52px; padding:12px 13px; border-width:1px; background:#fffdf6; font-size:17px; }
    .entry-form label { display:flex; align-items:center; gap:8px; margin:17px 0 7px; color:var(--deep-green); font-size:16px; }
    .entry-form label::before { content:""; width:10px; height:10px; flex:0 0 10px; background:var(--clay); clip-path:polygon(50% 0,63% 35%,100% 50%,63% 64%,50% 100%,36% 64%,0 50%,36% 35%); }
    .entry-form label[for="roomName"]::before { background:var(--gold); }
    .entry-form label[for="roomCode"]::before { background:#71a88d; border-radius:50%; clip-path:none; }
    .entry-form form .play-step label { margin:0 0 6px; }
    .entry-form form .play-step label::before { display:none; }
    .entry-form input { background:linear-gradient(90deg,#fffdf6 0 94%,rgba(239,186,99,.13) 94%); }
    h2 { margin:0 0 6px; font:700 23px/1.1 Georgia,serif; letter-spacing:-.5px; }
    .help,.muted { margin:0; color:var(--muted); line-height:1.45; font-size:14px; }
    label { display:block; margin:18px 0 6px; color:var(--deep-green); font-size:13px; font-weight:800; }
    input,select { width:100%; padding:12px 13px; border:2px solid var(--line); border-radius:4px; color:var(--ink); background:#fffdf6; transition:border-color .16s ease,box-shadow .16s ease; }
    input:focus,select:focus { outline:0; border-color:var(--clay); box-shadow:0 0 0 3px rgba(185,83,60,.12); }
    input[aria-invalid="true"] { border-color:#a33d2d; background:#fff4ed; box-shadow:0 0 0 3px rgba(163,61,45,.13); }
    #roomCode { text-transform:uppercase; font-weight:800; letter-spacing:1.4px; }
    .entry-form .primary { margin:22px 8px 0 0; padding:18px 15px; background:linear-gradient(100deg,var(--clay),#c96245); font-size:17px; transform:rotate(-.35deg); }
    .entry-form .primary:hover { transform:rotate(-.35deg) translateY(-2px); }
    .primary { width:100%; margin-top:20px; padding:13px; border:0; border-radius:4px; background:var(--clay); color:#fff9ed; font-weight:800; transition:filter .16s ease,transform .16s ease; }
    .primary:hover { filter:brightness(1.07); }
    .primary:active { transform:translateY(1px); }
    .divider { display:flex; align-items:center; gap:10px; margin:26px 0 16px; color:#967c67; font-size:12px; }
    .entry-form .divider { margin:24px 8px 8px; color:var(--clay); font-weight:800; }
    .divider::before,.divider::after { content:""; height:1px; flex:1; background:var(--line); }
    .secondary { width:100%; padding:12px; border:0; border-radius:4px; background:var(--gold); color:var(--deep-green); font-size:14px; font-weight:800; transition:filter .16s ease; }
    .entry-form .secondary { width:calc(100% - 12px); margin-left:12px; padding:17px 14px; font-size:17px; transform:rotate(.35deg); }
    .secondary:hover { filter:brightness(1.06); }
    .notice { min-height:20px; margin:10px 0 0; color:#637b65; font-size:12px; font-weight:800; }
    .notice.is-error { color:#8d2e21; }
    .shell { padding:20px; border:2px solid rgba(255,250,238,.84); border-radius:12px; background:linear-gradient(145deg,rgba(27,82,70,.98),rgba(17,59,51,.98)); box-shadow:0 20px 44px rgba(54,43,24,.3); }
    .topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
    .shell .brand { color:#fff8e6; }
    .topbar .tagline { margin:0; color:var(--gold); }
    #gameScreen .game-header { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:18px; min-height:94px; margin:0 0 20px; padding:14px 18px; border:1px solid rgba(255,248,230,.22); border-left:7px solid var(--gold); background:rgba(11,48,41,.46); }
    #gameScreen .game-brand { min-width:175px; padding-right:18px; border-right:1px solid rgba(255,248,230,.22); }
    #gameScreen .game-brand .brand { font-size:30px; }
    #gameScreen .game-brand .tagline { font-size:12px; }
    .game-round-chip { display:grid; place-items:center; min-width:74px; min-height:58px; padding:7px 10px; color:var(--deep-green); background:var(--gold); transform:rotate(-1.5deg); }
    .game-round-chip span { font-size:10px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; }
    .game-round-chip strong { font:800 20px/1 Georgia,serif; }
    #gameScreen .game-header .roundline { position:relative; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-content:center; gap:5px; min-height:64px; margin:0; }
    #gameScreen .game-header .word { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:20px; row-gap:7px; color:#f4c460; font-size:clamp(27px,2.1vw,38px); font-weight:900; line-height:1; text-align:center; text-shadow:0 2px 0 rgba(8,35,29,.46); }
    #gameScreen .game-header .word::before { content:'Dein Begriff'; width:100%; color:#d9e5d5; font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif; font-size:10px; font-weight:900; letter-spacing:1.8px; text-shadow:none; text-transform:uppercase; }
    #gameScreen .game-header .word-piece { display:inline-block; letter-spacing:6px; white-space:nowrap; }
    #gameScreen .game-header .round { position:static; display:flex; align-items:center; gap:5px; min-height:32px; padding:6px 9px; border:1px solid rgba(255,248,230,.22); border-radius:4px; color:#fff8e6; background:rgba(255,248,230,.07); font-size:11px; font-weight:800; white-space:nowrap; }
    #gameScreen .game-header .round > span:first-child { color:#f4c460; }
    #gameScreen .game-header .drawer-note { margin:0; color:#d9e5d5; text-align:center; font-size:12px; }
    #gameScreen .game-header .timer { min-width:76px; padding:12px 11px; text-align:center; font-size:27px; }
    .game-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
    .game-exit { min-height:44px; padding:9px 11px; border:1px solid rgba(255,248,230,.5); border-radius:4px; color:#fff8e6; background:rgba(255,248,230,.08); font-size:12px; font-weight:900; }
    .game-exit:hover,.game-exit:focus-visible { border-color:var(--gold); background:rgba(239,186,99,.16); outline:0; }
    @media(max-width:480px){#gameScreen .game-header .round{min-height:0;padding:4px 0;border:0;background:transparent}.game-header-actions{display:grid;grid-template-columns:auto auto;gap:5px 7px}.game-header-actions .round{grid-column:1 / -1;justify-self:end}.game-header-actions .game-exit{grid-column:1}.game-header-actions .timer{grid-column:2;grid-row:1 / 3}}
    .lobby-grid { display:grid; grid-template-columns:1.24fr .76fr; gap:16px; }
    #lobbyScreen .shell { position:relative; overflow:hidden; background:linear-gradient(145deg,#24604f 0%,#17463d 100%); }
    #lobbyScreen .shell::before { content:""; position:absolute; right:-60px; bottom:-78px; width:270px; height:270px; border:3px dashed rgba(239,186,99,.42); border-radius:50%; transform:rotate(16deg); }
    #lobbyScreen .topbar,#lobbyScreen .lobby-grid { position:relative; z-index:1; }
    #lobbyScreen .topbar { margin:2px 5px 23px; }
    #lobbyScreen .topbar .brand { display:inline-block; font-size:37px; transform:rotate(-1.3deg); }
    #lobbyScreen .topbar .tagline { padding:8px 12px; color:var(--deep-green); background:var(--gold); transform:rotate(1.4deg); }
    #lobbyScreen .card { border:1px solid rgba(29,83,71,.16); box-shadow:5px 6px 0 rgba(10,39,33,.2); }
    #lobbyScreen .lobby-grid > .card:first-child { padding:28px 28px 24px; transform:rotate(-.25deg); }
    #lobbyScreen .lobby-grid > .card:first-child h1 { display:inline-block; padding-bottom:8px; border-bottom:4px solid var(--gold); }
    #lobbyScreen .room-name { display:inline-block; margin:5px 0 17px; padding:6px 10px; background:#f5d594; transform:rotate(1.2deg); }
    #lobbyScreen .lobby-grid > .card:first-child > .muted { max-width:560px; padding-left:12px; border-left:3px solid var(--clay); }
    #lobbyScreen .room-code { position:relative; margin:24px 7px 16px; border-left:10px solid var(--gold); transform:rotate(.35deg); box-shadow:4px 5px 0 rgba(10,39,33,.13); }
    #lobbyScreen .room-code::after { content:"✦"; position:absolute; right:15px; top:50%; transform:translateY(-50%) rotate(15deg); color:var(--gold); font-size:23px; }
    #lobbyScreen .copy { width:calc(100% - 12px); margin-left:12px; padding:13px 10px; background:#f1c56d; transform:rotate(-.45deg); }
    #lobbyScreen .how { position:relative; margin-top:31px; padding:18px 16px 13px; border:1px dashed #d4bd91; background:rgba(255,253,246,.46); }
    #lobbyScreen .how h2 { display:inline-block; margin-top:-31px; padding:6px 11px; background:var(--green); color:#fff8e6; transform:rotate(-1deg); }
    #lobbyScreen .rule { margin-top:13px; padding:9px 8px; background:rgba(255,255,255,.48); transform:rotate(-.15deg); }
    #lobbyScreen .rule:nth-of-type(3) { transform:rotate(.35deg); }
    #lobbyScreen .rule:nth-of-type(4) { transform:rotate(-.28deg); }
    #lobbyScreen .number { background:var(--clay); transform:rotate(-8deg); }
    #lobbyScreen .lobby-grid > .players { padding:23px 19px 18px; transform:rotate(.3deg); }
    #lobbyScreen .players h2 { display:inline-block; margin-bottom:13px; padding:7px 9px; color:#fff8e6; background:var(--green); transform:rotate(1.2deg); }
    #lobbyScreen .player { padding:10px 8px; background:rgba(255,253,246,.62); }
    #lobbyScreen .player .avatar { transform:rotate(-7deg); }
    #lobbyScreen .settings { display:grid; gap:8px; margin-top:18px; }
    #lobbyScreen .setting { padding:9px 8px 9px 12px; border:1px solid #e1cc9f; border-left:6px solid var(--clay); background:#fffaf0; }
    #lobbyScreen .setting:nth-child(2) { border-left-color:var(--gold); transform:rotate(-.35deg); }
    #lobbyScreen .setting:nth-child(3) { border-left-color:#6ca68d; transform:rotate(.25deg); }
    #lobbyScreen .setting label { margin:0; }
    #lobbyScreen .setting select { background:#fffdf6; }
    #lobbyScreen .setting[hidden] { display:none; }
    .color:disabled,.draw-mode:disabled { cursor:not-allowed; opacity:.28; filter:grayscale(.35); transform:none; }
    #lobbyScreen #startGame { margin-top:24px; padding:15px 12px; transform:rotate(-.5deg); }
    .card { padding:20px; border-radius:6px; background:linear-gradient(135deg,#fff8e9,var(--paper)); box-shadow:inset 0 0 0 2px rgba(92,69,45,.12),0 6px 0 rgba(10,39,33,.14); }
    .card h1 { margin:0 0 7px; color:var(--deep-green); font:700 26px/1 Georgia,serif; letter-spacing:-.6px; }
    .room-name { margin:0 0 17px; color:var(--clay); font:800 17px/1.2 Georgia,serif; }
    .room-code { margin:20px 0 13px; padding:16px; border-radius:4px; color:#fcf4de; background:var(--green); text-align:center; }
    .room-code span { display:block; opacity:.75; font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
    .room-code strong { font-size:31px; letter-spacing:4px; }
    .copy { width:100%; padding:10px; border:0; border-radius:4px; color:var(--deep-green); background:#f1d196; font-weight:800; }
    .copy.copied { background:#9ec8af; }
    .how { margin-top:22px; }
    .how h2,.players h2 { margin:0 0 10px; color:var(--deep-green); font:800 14px/1 ui-rounded,"Trebuchet MS",system-ui,sans-serif; }
    .rule { display:flex; gap:10px; align-items:flex-start; margin-top:11px; font-size:14px; line-height:1.3; }
    .number { width:23px; height:23px; flex:0 0 23px; display:grid; place-items:center; border-radius:50%; color:#fcf4de; background:var(--green); font-weight:800; font-size:12px; }
    .player { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid rgba(85,63,42,.14); font-size:14px; }
    .player:last-of-type { border-bottom:0; }
    .avatar { width:38px; height:38px; flex:0 0 38px; overflow:hidden; border-radius:50%; background:#f8e7bb; }
    .host { margin-left:auto; color:var(--clay); font-size:12px; font-weight:800; }
    .settings { margin-top:17px; }
    .setting { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(85,63,42,.12); font-size:13px; }
    .setting select { width:auto; padding:5px 7px; }
    .tiny { margin:9px 0 0; color:var(--muted); font-size:12px; text-align:center; }
    .game-grid { display:grid; grid-template-columns:minmax(180px,230px) minmax(420px,1fr) minmax(260px,330px); gap:20px; align-items:stretch; }
    #gameScreen.solo-mode .game-card.players { display:none; }
    @media(min-width:1101px){ #gameScreen.solo-mode .game-grid { grid-template-columns:minmax(420px,1fr) minmax(260px,330px); } }
    .game-card { padding:22px; border-radius:6px; background:linear-gradient(135deg,#fff8e9,var(--paper)); box-shadow:inset 0 0 0 2px rgba(92,69,45,.12),0 5px 0 rgba(10,39,33,.14); }
    .game-card h2 { margin:0 0 15px; font:800 16px/1 ui-rounded,"Trebuchet MS",system-ui,sans-serif; }
    .score { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:800; }
    .drawing { min-width:0; display:flex; flex-direction:column; }
    .roundline { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
    .word { color:#fff8e6; text-align:center; font-size:18px; font-weight:900; letter-spacing:2px; }
    .round { color:#c9d8c6; font-size:12px; font-weight:800; white-space:nowrap; }
    .board { position:relative; min-height:520px; flex:1; overflow:hidden; border:11px solid #c38a4e; border-radius:6px; background:var(--deep-green); box-shadow:inset 0 0 0 2px rgba(255,255,255,.16),0 5px 0 rgba(8,35,29,.45); }
    canvas { display:block; width:100%; height:100%; min-height:498px; touch-action:none; }
    .toolrow { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px; width:100%; min-height:57px; margin-right:0; padding:15px 2px 0; }
    .toolgroup { display:flex; min-width:0; align-items:center; gap:7px; }
    .tool-caption { color:#c9d8c6; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.6px; }
    .colors,.sizes,.draw-modes,.actions { display:flex; min-width:0; align-items:center; gap:7px; }
    .actions { margin-left:auto; }
    .colors,.actions { flex-wrap:wrap; }
    .color,.size { display:grid; place-items:center; width:36px; height:36px; padding:0; border:2px solid transparent; border-radius:50%; background:var(--paper); }
    .color.active,.size.active { outline:3px solid var(--clay); outline-offset:2px; }
    .size-dot { display:block; border-radius:50%; background:#563c2d; }
    .size[data-width="2"] .size-dot { width:4px; height:4px; } .size[data-width="4"] .size-dot { width:6px; height:6px; } .size[data-width="7"] .size-dot { width:9px; height:9px; } .size[data-width="11"] .size-dot { width:12px; height:12px; } .size[data-width="16"] .size-dot { width:15px; height:15px; } .size[data-width="22"] .size-dot { width:18px; height:18px; }
    .draw-mode { display:grid; place-items:center; width:36px; height:36px; padding:0; border:2px solid rgba(255,248,230,.72); border-radius:3px; color:#fff8e6; background:transparent; font-size:17px; font-weight:900; line-height:1; }
    .draw-mode.active { border-color:var(--gold); color:var(--deep-green); background:var(--gold); box-shadow:0 2px 0 rgba(8,35,29,.38); }
    .tool { min-height:38px; border:0; border-radius:4px; padding:8px 10px; color:var(--deep-green); background:#fff8e9; font-size:13px; font-weight:800; }
    .tool.active { color:#fff8e6; background:var(--deep-green); }
    .sponge { display:flex; align-items:center; justify-content:center; gap:7px; width:auto; min-width:116px; min-height:44px; padding:2px 4px; border:0; color:#f9e4a6; background:transparent; cursor:grab; touch-action:none; user-select:none; }
    .tool-visible-label { color:#fff8e6; font-size:11px; font-weight:900; }
    .sponge:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
    .sponge-shape { position:relative; width:64px; height:35px; overflow:hidden; border:2px solid #bc7822; border-radius:5px 5px 8px 8px; background:#f3ca4f; box-shadow:inset 0 -2px 0 rgba(177,102,20,.25),0 3px 0 rgba(8,35,29,.38); transform:rotate(-5deg); }
    .sponge-shape::before { content:""; position:absolute; top:3px; right:6px; left:6px; height:5px; border-radius:4px; background:rgba(255,239,151,.72); }
    .sponge-shape::after { content:""; position:absolute; left:5px; right:5px; bottom:4px; height:14px; background:radial-gradient(ellipse at 12% 35%,#ffe688 0 1px,transparent 2px),radial-gradient(ellipse at 47% 70%,rgba(178,111,24,.48) 0 1px,transparent 2px),radial-gradient(ellipse at 82% 30%,#fff1a6 0 1px,transparent 2px); background-size:12px 9px,14px 11px,13px 10px; }
    .sponge.dragging { position:fixed; z-index:30; left:0; top:0; transform:translate(-50%,-50%) rotate(-8deg) scale(1.08); pointer-events:none; cursor:grabbing; }
    .sponge.dragging .tool-visible-label { display:none; }
    body.sponge-wiping { cursor:none; user-select:none; }
    .chat { display:flex; flex-direction:column; }
    .messages { flex:1; min-height:360px; }
    .message { margin:0 0 13px; font-size:15px; line-height:1.32; }
    .message b { display:block; color:var(--clay); font-size:13px; }
    .message.success { padding:9px; border-radius:4px; color:#fff; background:#4b8065; font-weight:800; }
    .message.private { padding:10px 11px; border-left:4px solid var(--gold); color:#654622; background:#fff1cf; font-weight:800; }
    .message.private b { color:#a35a37; }
    .guess { margin-top:14px; min-height:58px; padding:15px 16px; border-width:3px; font-size:18px; font-weight:700; }
    .hint { display:none; margin-top:12px; padding:11px 12px; border-radius:4px; color:#563c2d; background:var(--gold); font-size:13px; line-height:1.4; }
    .hint.visible { display:block; }
    .timer { padding:7px 11px; border-radius:4px; color:var(--deep-green); background:var(--gold); font-size:24px; font-weight:900; font-variant-numeric:tabular-nums; }
    .drawer-note { margin:0 0 10px; color:#d5e2d1; text-align:center; font-size:12px; font-weight:700; }
    .modal-backdrop { position:fixed; inset:0; z-index:3; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(42,35,27,.44); }
    .modal-backdrop.open { display:flex; }
    .modal { width:min(510px,100%); padding:27px; border-radius:21px; color:var(--ink); background:var(--paper); box-shadow:0 16px 45px rgba(36,28,20,.35); }
    .modal h2 { font-size:27px; } .modal .help { margin-top:7px; }
    .word-choices { display:grid; gap:10px; margin-top:19px; }
    .word-choice { padding:14px; border:2px solid var(--line); border-radius:12px; color:#563c2d; background:var(--cream); text-align:left; font-weight:900; }
    .word-choice:hover { border-color:var(--clay); background:#f8e9dc; }
    .round-end { text-align:center; }
    .round-end strong { display:block; margin:16px 0 2px; color:var(--clay); font:700 38px/1 Georgia,serif; }
    .round-end .primary { margin-top:20px; }
    /* Die Lobby ist ein Spieltisch: große Einladungs-Karte links, Runden-Stapel rechts. */
    #lobbyScreen .shell { padding:25px; background:radial-gradient(circle at 12% 78%,rgba(239,186,99,.14) 0 4px,transparent 5px),radial-gradient(circle at 82% 14%,rgba(255,248,230,.1) 0 3px,transparent 4px),linear-gradient(145deg,#24604f 0%,#17463d 100%); background-size:27px 27px,34px 34px,100% 100%; }
    #lobbyScreen .lobby-grid { gap:22px; }
    #lobbyScreen .lobby-grid > .lobby-main { position:relative; padding:34px 36px 29px; overflow:hidden; background:linear-gradient(138deg,#fffaf0,#f7ecd1); }
    #lobbyScreen .lobby-main::after { content:""; position:absolute; right:-68px; bottom:-73px; width:220px; height:220px; border:3px dashed rgba(185,83,60,.23); border-radius:50%; transform:rotate(18deg); }
    #lobbyScreen .lobby-title { position:relative; z-index:1; display:flex; align-items:flex-end; flex-wrap:wrap; gap:8px 13px; }
    #lobbyScreen .lobby-kicker { display:inline-block; margin:0 0 7px; padding:7px 10px; color:#fffaf0; background:var(--green); font-size:12px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; transform:rotate(-1.6deg); }
    #lobbyScreen .lobby-grid > .lobby-main h1 { margin:0; padding:0; border:0; font-size:34px; letter-spacing:-1px; }
    #lobbyScreen .lobby-main .room-name { margin:0 0 2px; padding:8px 13px; color:var(--clay); background:#f5d594; font-size:19px; transform:rotate(1.5deg); }
    #lobbyScreen .lobby-main > .muted { position:relative; z-index:1; max-width:620px; margin-top:17px; padding:10px 13px; border-left:5px solid var(--clay); background:rgba(255,255,255,.4); font-size:15px; }
    #lobbyScreen .invite-ticket { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; margin:26px 7px 29px; padding:12px; border:2px dashed rgba(29,83,71,.22); background:#f7d17e; transform:rotate(-.45deg); }
    #lobbyScreen .room-code { min-width:0; margin:0; padding:19px 46px 19px 25px; border:0; background:linear-gradient(115deg,#1f6152,#17463d); box-shadow:0 4px 0 rgba(10,39,33,.17); }
    #lobbyScreen .room-code::before { content:""; position:absolute; left:-11px; top:50%; width:19px; height:19px; border-radius:50%; background:#f7d17e; transform:translateY(-50%); }
    #lobbyScreen .room-code strong { display:block; margin-top:3px; font-size:37px; letter-spacing:6px; }
    #lobbyScreen .copy { width:auto; min-width:230px; margin:0; padding:18px 17px; color:var(--deep-green); background:#fff4d7; box-shadow:0 4px 0 rgba(117,82,32,.17); font-size:15px; transform:rotate(.55deg); }
    #lobbyScreen .how { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-top:0; padding:27px 0 0; border:0; background:none; }
    #lobbyScreen .how h2 { position:absolute; top:0; left:0; margin:0; padding:7px 12px; background:var(--clay); color:#fff8e6; font-size:14px; transform:rotate(-1.4deg); }
    #lobbyScreen .rule { display:block; min-height:156px; margin:0; padding:34px 15px 16px; background:#fffdf6; box-shadow:4px 5px 0 rgba(136,96,35,.15); font-size:14px; line-height:1.38; }
    #lobbyScreen .rule:nth-of-type(2) { margin-top:6px; background:#fff7df; transform:rotate(-.8deg); }
    #lobbyScreen .rule:nth-of-type(3) { background:#f5eee1; transform:rotate(.75deg); }
    #lobbyScreen .rule:nth-of-type(4) { margin-top:9px; background:#fff9ed; transform:rotate(-.45deg); }
    #lobbyScreen .rule .number { position:absolute; margin-top:-47px; width:32px; height:32px; border:2px solid #fff7e4; background:var(--clay); font-size:14px; }
    #lobbyScreen .rule:nth-of-type(3) .number { background:var(--gold); color:var(--deep-green); }
    #lobbyScreen .rule:nth-of-type(4) .number { background:#66a486; }
    #lobbyScreen .rule b { display:block; margin-bottom:7px; color:var(--deep-green); font-size:15px; }
    #lobbyScreen .lobby-grid > .lobby-sidebar { position:relative; padding:28px 25px 23px; background:linear-gradient(145deg,#fffaf0,#f6e9cc); }
    #lobbyScreen .team-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:9px; }
    #lobbyScreen .team-head .lobby-kicker { margin:0; background:var(--clay); transform:rotate(1.2deg); }
    #lobbyScreen .players h2 { margin:0; padding:0; color:var(--deep-green); background:transparent; font:800 15px/1.2 ui-rounded,"Trebuchet MS",system-ui,sans-serif; transform:none; }
    #lobbyScreen .player { margin-top:8px; padding:12px 11px; border:0; background:rgba(255,255,255,.58); box-shadow:2px 3px 0 rgba(133,96,43,.1); }
    #lobbyScreen .settings { position:relative; margin-top:28px; padding-top:24px; }
    #lobbyScreen .settings-title { position:absolute; top:0; left:0; margin:0; color:var(--deep-green); font:800 14px/1 ui-rounded,"Trebuchet MS",system-ui,sans-serif; }
    #lobbyScreen .setting { min-height:60px; padding:11px 10px 11px 16px; background:#fffdf6; box-shadow:3px 3px 0 rgba(133,96,43,.1); font-size:14px; }
    #lobbyScreen #startGame { margin-top:28px; padding:18px 14px; box-shadow:0 5px 0 #8e3f2e; font-size:17px; }
    #lobbyScreen .tiny { margin-top:13px; font-size:13px; }
    #lobbyScreen .lobby-sidebar .tiny { display:none; }
    /* Hierarchie in der Lobby: Rundenname, Einladung, Ablauf, Regeln. */
    #lobbyScreen .lobby-title { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:15px; }
    #lobbyScreen .lobby-title { display:block; }
    #lobbyScreen .lobby-title .lobby-kicker { margin-top:5px; white-space:nowrap; }
    #lobbyScreen .lobby-grid > .lobby-main h1 { max-width:620px; color:var(--deep-green); font-size:39px; line-height:1; }
    #lobbyScreen .lobby-grid > .lobby-main h1 { overflow-wrap:anywhere; word-break:break-word; }
    #lobbyScreen .lobby-status { margin:7px 0 0; color:var(--clay); font:700 18px/1.2 Georgia,serif; }
    #lobbyScreen .lobby-main > .muted { margin:17px 0 0 1px; }
    #lobbyScreen .lobby-main > .muted { display:inline-block; width:auto; margin:12px 0 0; padding:8px 12px; border:0; color:var(--deep-green); background:#f6dfaa; font-size:14px; font-weight:800; transform:rotate(-.5deg); }
    #lobbyScreen .lobby-main > .muted::before { content:"✦"; margin-right:7px; color:var(--clay); }
    #lobbyScreen .invite-ticket { margin-top:18px; }
    #lobbyScreen .how { align-items:stretch; padding-top:0; }
    #lobbyScreen .how h2 { position:relative; top:auto; left:auto; grid-column:1 / -1; justify-self:start; margin:0 0 1px; font-size:15px; }
    #lobbyScreen .rule { position:relative; min-height:142px; padding:38px 16px 16px; }
    #lobbyScreen .rule .number { top:-14px; left:15px; margin:0; }
    #lobbyScreen .team-head { align-items:center; margin-bottom:14px; }
    #lobbyScreen .team-head h2 { font-size:16px; }
    #lobbyScreen .settings { margin-top:25px; }
    #lobbyScreen .how { gap:18px; }
    #lobbyScreen .how h2 { padding:9px 14px; font-size:17px; }
    #lobbyScreen .rule { min-height:180px; padding:46px 19px 19px; font-size:16px; line-height:1.43; }
    #lobbyScreen .rule .number { top:-17px; left:17px; width:37px; height:37px; font-size:16px; }
    #lobbyScreen .rule b { margin-bottom:9px; font-size:18px; }
    /* Kompakte Lobby-Abfolge: klare Zeilen statt drei hoher Karten mit Leerraum darunter. */
    @media (min-width:761px) {
      #lobbyScreen .lobby-grid > .lobby-main { display:flex; min-height:0; flex-direction:column; }
      #lobbyScreen .lobby-main > .muted { transform:none; }
      #lobbyScreen .invite-ticket { grid-template-columns:minmax(0,1fr) minmax(210px,250px); margin:18px 7px 17px; transform:none; }
      #lobbyScreen .room-code,#lobbyScreen .copy { transform:none; }
      #lobbyScreen .how { flex:1; min-height:0; grid-template-columns:minmax(0,1fr); grid-template-rows:auto repeat(3,minmax(68px,1fr)); align-content:stretch; gap:9px; padding:0; }
      #lobbyScreen .how h2 { width:100%; padding:0 0 10px; border-bottom:2px dashed rgba(185,83,60,.32); color:var(--deep-green); background:transparent; transform:none; }
      #lobbyScreen .rule,
      #lobbyScreen .rule:nth-of-type(2),
      #lobbyScreen .rule:nth-of-type(3),
      #lobbyScreen .rule:nth-of-type(4) { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; min-height:0; margin:0; padding:12px 17px 12px 13px; border-left:5px solid var(--clay); background:rgba(255,253,246,.83); box-shadow:3px 3px 0 rgba(136,96,35,.12); transform:none; }
      #lobbyScreen .rule:nth-of-type(2) { border-left-color:var(--gold); background:#fff7df; }
      #lobbyScreen .rule:nth-of-type(3) { border-left-color:#66a486; background:#f5eee1; }
      #lobbyScreen .rule .number { position:static; width:31px; height:31px; margin:0; border:0; font-size:14px; transform:none; }
      #lobbyScreen .rule > span:last-child { display:grid; grid-template-columns:minmax(132px,.42fr) minmax(0,1fr); align-items:center; gap:18px; }
      #lobbyScreen .rule b { margin:0; font-size:16px; line-height:1.2; }
    }
    #lobbyScreen .lobby-grid > .card.lobby-main,
    #lobbyScreen .lobby-grid > .card.lobby-sidebar { transform:none; }
    /* Start und Lobby sind dieselbe Klubbühne: grüner Kopf, heller Spieltisch, gleicher Rahmen. */
    #lobbyScreen .shell {
      padding:0;
      overflow:hidden;
      border:2px solid rgba(255,250,238,.9);
      border-radius:12px;
      background:linear-gradient(135deg,#fffaf0,var(--paper));
      box-shadow:0 22px 52px rgba(54,43,24,.34);
    }
    #lobbyScreen .shell::before { display:none; }
    #lobbyScreen .topbar {
      position:relative;
      z-index:1;
      min-height:72px;
      margin:0;
      padding:15px 28px;
      overflow:hidden;
      align-items:center;
      flex-direction:row;
      background:
        radial-gradient(circle at 18% 42%,rgba(239,186,99,.34) 0 2px,transparent 3px),
        radial-gradient(circle at 78% 17%,rgba(255,248,230,.38) 0 2px,transparent 3px),
        linear-gradient(145deg,#24604f 0%,var(--green) 57%,#17463d 100%);
      background-size:26px 26px,34px 34px,100% 100%;
      border-bottom:2px solid rgba(255,250,238,.74);
    }
    #lobbyScreen .topbar::after {
      content:"";
      position:absolute;
      right:-48px;
      top:-83px;
      width:166px;
      height:166px;
      border:2px solid rgba(252,244,222,.18);
      border-radius:50%;
      box-shadow:-18px 17px 0 -16px rgba(239,186,99,.78),-39px 38px 0 -37px rgba(252,244,222,.3);
    }
    #lobbyScreen .topbar .brand { position:relative; z-index:1; font-size:40px; }
    #lobbyScreen .topbar .tagline { position:relative; z-index:1; margin:0; padding:9px 13px; color:var(--deep-green); background:var(--gold); transform:rotate(1deg); }
    #lobbyScreen .lobby-grid {
      min-height:0;
      grid-template-rows:minmax(0,1fr);
      gap:22px;
      padding:22px 24px 14px;
      background:linear-gradient(135deg,#fffaf0,var(--paper));
    }
    #lobbyScreen .lobby-grid > .card { box-shadow:5px 6px 0 rgba(137,96,36,.14); }
    @media (min-width:761px) and (max-height:800px) {
      #lobbyScreen .topbar { min-height:62px; padding:10px 22px; }
      #lobbyScreen .topbar .brand { font-size:34px; }
      #lobbyScreen .topbar .tagline { padding:7px 11px; font-size:11px; }
      #lobbyScreen .lobby-grid { gap:18px; padding:12px 18px 10px; }
      #lobbyScreen .lobby-grid > .lobby-main { padding:22px 24px 18px; }
      #lobbyScreen .lobby-grid > .lobby-sidebar { padding:16px 18px 8px; }
      #lobbyScreen .team-head { margin-bottom:8px; }
      #lobbyScreen .player { margin-top:5px; padding:8px; }
      #lobbyScreen #lobbyPlayers { max-height:113px; overflow-y:auto; padding-right:3px; scrollbar-width:thin; }
      #lobbyScreen .lobby-actions { margin-top:5px; }
      #lobbyScreen .settings { margin-top:10px; padding-top:20px; }
      #lobbyScreen .setting { min-height:48px; padding:8px 8px 8px 13px; }
      #lobbyScreen .lobby-summary { margin-top:8px; padding:7px 10px; }
      #lobbyScreen .tiny { margin-top:7px; }
      #lobbyScreen .connection-status { min-height:14px; }
      #lobbyScreen .ready-button { margin-top:8px; padding:9px; }
      #lobbyScreen #startGame { margin-top:12px; padding:12px; }
    }
    @media (min-width:900px) { .entry{grid-template-columns:1fr;grid-template-rows:250px minmax(0,1fr);min-height:0}.entry-story{min-height:250px;padding:29px 52px;display:grid;grid-template-columns:.88fr 1fr .86fr;align-items:center;gap:30px}.entry-story .brand{max-width:none;font-size:clamp(52px,5.1vw,76px)}.entry-story .tagline{margin-top:10px;padding-top:10px;font-size:clamp(16px,1.35vw,21px)}.entry-story .hero-doodles{position:relative;top:auto;right:auto;width:100%;max-height:195px;align-self:center}.entry-copy{margin:0;align-self:center}.entry-story h1{margin-bottom:9px;font-size:clamp(27px,2.35vw,37px)}.entry-story p{font-size:15px;line-height:1.4}.chalk-art{position:absolute;right:30px;bottom:14px;width:74px;margin:0}.entry-form{min-height:0;display:flex;flex-direction:column;padding:24px 52px 28px;overflow:hidden}.entry-eyebrow{margin-bottom:8px;font-size:13px}.entry-eyebrow span{width:28px;height:28px;font-size:16px}.entry-form h1{margin-bottom:9px;font-size:37px}.entry-form .help{font-size:15px;line-height:1.38}.entry-help-link{margin-top:8px;padding:5px 9px;font-size:12px}.avatar-picker{margin:12px 0 13px;padding:13px 16px;grid-template-columns:185px minmax(0,1fr)}.avatar-picker-label{font-size:16px}.avatar-picker-help{font-size:12px}.avatar-choices{grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;max-width:none}.avatar-choice{grid-template-rows:47px 12px;height:66px;padding:3px 2px}.avatar-choice svg{width:47px;height:47px}.avatar-choice::after{font-size:10px}.entry-paths{min-height:0;flex:1;margin-top:13px;gap:18px}.entry-path{min-height:0;height:100%;padding:23px 26px 21px}.entry-path.create-path{margin-top:10px}.path-kicker{gap:9px;margin-bottom:10px;font-size:12px}.path-kicker span{width:27px;height:27px;font-size:15px}.path-title{margin-bottom:7px;font-size:28px}.path-copy{min-height:40px;margin-bottom:10px;font-size:14px;line-height:1.34}.entry-path label{margin:12px 0 5px;font-size:14px}.entry-path input{min-height:45px;padding:10px 12px;font-size:15px}.entry-path .primary,.entry-path .secondary{margin-top:auto;padding:14px 13px;font-size:15px}.entry-path .notice{min-height:16px;margin-top:5px;font-size:11px} }
    @media (min-width:900px) and (min-height:801px) { .entry-path{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);grid-template-rows:auto auto auto auto minmax(18px,1fr) auto auto;column-gap:32px;row-gap:9px;padding:30px 32px 25px;overflow:hidden}.entry-path::before{content:'✦';position:absolute;left:34px;bottom:42px;color:rgba(185,83,60,.13);font:900 76px/1 Georgia,serif;transform:rotate(-12deg)}.entry-path::after{content:"";position:absolute;left:30px;bottom:42px;width:42%;height:27%;border-top:2px dashed rgba(185,83,60,.3);border-radius:50%;transform:rotate(-8deg)}.create-path::before{content:'✧';color:rgba(239,186,99,.34);transform:rotate(10deg)}.create-path::after{border-color:rgba(154,103,32,.34);transform:rotate(8deg)}.entry-path > *{position:relative;z-index:1;min-width:0}.entry-path .path-kicker{grid-column:1;grid-row:1;margin:0}.entry-path .path-title{grid-column:1;grid-row:2;margin:0}.entry-path .path-copy{grid-column:1;grid-row:3;min-height:0;margin:0}.entry-path label[for="joinName"],.entry-path label[for="createName"]{grid-column:2;grid-row:1;margin:0;align-self:end}.entry-path input#joinName,.entry-path input#createName{grid-column:2;grid-row:2;margin:0}.entry-path label[for="roomCode"],.entry-path label[for="roomName"]{grid-column:2;grid-row:3;margin:0;align-self:end}.entry-path input#roomCode,.entry-path input#roomName{grid-column:2;grid-row:4;margin:0}.entry-path .primary,.entry-path .secondary{grid-column:2;grid-row:6;margin:0;align-self:end}.entry-path .notice{grid-column:2;grid-row:7;margin:4px 0 0} }
    @media (min-width:900px) and (min-height:801px) { .entry{grid-template-rows:clamp(200px,25vh,250px) auto}.entry-story{min-height:clamp(200px,25vh,250px)}.entry-form{display:block;padding-bottom:26px}.entry-paths{display:grid;min-height:0;flex:none;grid-auto-rows:clamp(310px,36vh,365px);margin-top:15px}.entry-path{height:clamp(310px,36vh,365px);min-height:0}.entry-path.create-path{margin-top:8px} body:has(#entryScreen.active) .entry{height:auto;max-height:calc(100svh - 24px)} }
    @media (min-width:900px) and (max-height:800px) { .entry{grid-template-rows:158px auto}.entry-story{min-height:158px;padding:15px 46px;gap:24px}.entry-story .brand{font-size:clamp(43px,4.6vw,58px)}.entry-story .tagline{margin-top:5px;padding-top:6px;font-size:15px}.entry-story .hero-doodles{max-height:125px}.entry-story h1{margin-bottom:4px;font-size:24px}.entry-story p{font-size:12px;line-height:1.25}.chalk-art{right:22px;bottom:7px;width:48px}.entry-form{display:block;padding:12px 52px 15px}.entry-eyebrow{margin-bottom:3px;font-size:10px}.entry-eyebrow span{width:20px;height:20px;font-size:12px}.entry-form h1{margin-bottom:4px;font-size:28px}.entry-form .help{font-size:12px;line-height:1.22}.entry-help-link{margin-top:5px;padding:4px 8px;font-size:10px}.avatar-picker{margin:6px 0 7px;padding:7px 11px;grid-template-columns:165px minmax(0,1fr)}.avatar-picker::before{top:-8px;right:12px;width:21px;height:21px;font-size:13px}.avatar-picker-label{font-size:13px}.avatar-picker-label::before{margin-bottom:1px;font-size:8px}.avatar-picker-help{margin-top:1px;font-size:10px}.avatar-choices{gap:5px}.avatar-choice{grid-template-rows:35px 10px;height:49px;padding:2px}.avatar-choice svg{width:35px;height:35px}.avatar-choice::after{font-size:8px}.entry-paths{display:grid;min-height:0;flex:none;grid-auto-rows:270px;margin-top:7px;gap:15px}.entry-path{height:270px;padding:12px 21px 11px}.entry-path.create-path{margin-top:6px}.path-kicker{gap:7px;margin-bottom:5px;font-size:9px}.path-kicker span{width:20px;height:20px;font-size:12px}.path-title{margin-bottom:3px;font-size:22px}.path-copy{min-height:27px;margin-bottom:4px;font-size:11px;line-height:1.15}.entry-path label{margin:5px 0 2px;font-size:11px}.entry-path input{min-height:34px;padding:6px 9px;font-size:12px}.entry-path .primary,.entry-path .secondary{padding:9px 11px;font-size:12px}.entry-path .notice{display:none} body:has(#entryScreen.active) .entry{height:auto;max-height:calc(100svh - 24px)} }
    @media (min-width:900px) and (min-height:650px) { html:has(#entryScreen.active),body:has(#entryScreen.active){height:100%;overflow:hidden} body:has(#entryScreen.active) .app{height:100svh;min-height:0;padding:12px 0} body:has(#entryScreen.active) #entryScreen.active{height:100%;display:flex;align-items:center} body:has(#entryScreen.active) .entry{margin:auto 0} }
    @media (min-width:761px) and (min-height:650px) { #lobbyScreen .shell{min-height:min(720px,calc(100svh - 44px));display:flex;flex-direction:column} #lobbyScreen .lobby-grid{flex:1} #gameScreen .shell{height:calc(100svh - 16px);min-height:0;display:flex;flex-direction:column} #gameScreen .game-grid{flex:1;min-height:0} #gameScreen .drawing{min-height:0} #gameScreen .board{min-height:0} #gameScreen canvas{min-height:0} }
    /* Start und Lobby teilen sich eine feste Spielbühne – der Wechsel bleibt auf derselben Höhe. */
    @media (min-width:761px) and (min-height:650px) {
      :root { --club-scene-height:min(840px,calc(100svh - 24px)); }
      html:has(#entryScreen.active),html:has(#lobbyScreen.active),body:has(#entryScreen.active),body:has(#lobbyScreen.active) { height:100%; overflow:hidden; }
      body:has(#entryScreen.active) .app,body:has(#lobbyScreen.active) .app { height:100svh; min-height:0; padding:12px 0; }
      body:has(#entryScreen.active) #entryScreen.active,body:has(#lobbyScreen.active) #lobbyScreen.active { display:flex; align-items:stretch; height:var(--club-scene-height); }
      body:has(#entryScreen.active) .entry,body:has(#lobbyScreen.active) #lobbyScreen .shell { width:100%; height:100%; min-height:0; margin:0; }
      body:has(#lobbyScreen.active) #lobbyScreen .shell { min-height:0; }
    }
    @media (min-width:900px) and (min-height:801px) {
      body:has(#entryScreen.active) .entry-form { display:flex; }
      body:has(#entryScreen.active) .entry-paths { flex:1; min-height:0; grid-auto-rows:minmax(0,1fr); }
      body:has(#entryScreen.active) .entry-path { height:auto; }
    }
    @media (min-width:900px) and (min-height:650px) {
      body:has(#entryScreen.active) .entry { grid-template-rows:clamp(180px,22vh,210px) minmax(0,1fr); }
      body:has(#entryScreen.active) .entry-story { min-height:clamp(180px,22vh,210px); }
    }
    @media (min-width:900px) and (min-height:801px) {
      body:has(#entryScreen.active) .entry-form { padding:24px 52px 22px; }
      body:has(#entryScreen.active) .entry-masthead-art { position:absolute; z-index:0; top:8px; right:43px; display:block; width:min(31vw,340px); height:118px; }
      body:has(#entryScreen.active) .entry-eyebrow,body:has(#entryScreen.active) .entry-form h1,body:has(#entryScreen.active) .entry-form .help,body:has(#entryScreen.active) .entry-help-link { position:relative; z-index:1; max-width:52%; }
      body:has(#entryScreen.active) .entry-eyebrow { margin:0 0 11px 8px; }
      body:has(#entryScreen.active) .entry-form h1 { margin-bottom:10px; font-size:35px; }
      body:has(#entryScreen.active) .entry-form .help { margin-left:18px; line-height:1.5; }
      body:has(#entryScreen.active) .entry-help-link { position:absolute; top:132px; right:52px; margin:0; padding:7px 11px 7px 9px; }
      body:has(#entryScreen.active) .entry-paths { width:100%; margin-top:72px; }
      body:has(#entryScreen.active) .avatar-picker { margin:9px 0 11px; padding:8px 13px; }
      body:has(#entryScreen.active) .avatar-choice { grid-template-rows:39px 11px; height:55px; }
      body:has(#entryScreen.active) .avatar-choice svg { width:39px; height:39px; }
      body:has(#entryScreen.active) .entry-path { padding:14px 22px 13px; row-gap:5px; }
      body:has(#entryScreen.active) .entry-path label { font-size:13px; }
      body:has(#entryScreen.active) .entry-path input { min-height:47px; padding:10px 12px; color:#4d3a30; font:17px/1.2 Georgia,"Times New Roman",serif; letter-spacing:.1px; }
      body:has(#entryScreen.active) .entry-path input::placeholder { color:#8d7464; opacity:1; }
      body:has(#entryScreen.active) .entry-path .primary,body:has(#entryScreen.active) .entry-path .secondary { padding:13px 12px; font-size:15px; }
      body:has(#entryScreen.active) .entry-path .notice { display:none; }
      body:has(#entryScreen.active) .path-kicker { margin:0; }
      body:has(#entryScreen.active) .path-title { margin:0; font-size:25px; }
      body:has(#entryScreen.active) .path-copy { margin:0; color:#654939; font-size:16px; line-height:1.35; }
    }
    /* Die beiden Wege sollen wie ruhige Karten wirken, nicht wie eng gesetzte Etiketten. */
    @media (min-width:900px) and (min-height:900px) {
      body:has(#entryScreen.active) .entry-path { padding:22px 28px 19px; column-gap:36px; row-gap:11px; }
      body:has(#entryScreen.active) .path-kicker { gap:10px; line-height:1.25; }
      body:has(#entryScreen.active) .path-title { font-size:27px; line-height:1.08; }
      body:has(#entryScreen.active) .path-copy { line-height:1.48; }
    }
    @media (min-width:900px) and (max-height:800px) {
      body:has(#entryScreen.active) .entry-path { padding:17px 23px 15px; }
      body:has(#entryScreen.active) .path-kicker { margin-bottom:8px; line-height:1.25; }
      body:has(#entryScreen.active) .path-title { margin-bottom:6px; font-size:24px; line-height:1.08; }
      body:has(#entryScreen.active) .path-copy { min-height:32px; margin-bottom:8px; font-size:12px; line-height:1.35; }
    }
    /* Sehr flache Desktop-Fenster dürfen den unteren Kartenteil nie abschneiden. */
    @media (min-width:900px) and (max-height:649px) {
      html:has(#entryScreen.active),body:has(#entryScreen.active),html:has(#lobbyScreen.active),body:has(#lobbyScreen.active) { height:auto; overflow:auto; }
      body:has(#entryScreen.active) .app,body:has(#lobbyScreen.active) .app { height:auto; min-height:100svh; align-items:flex-start; }
      body:has(#entryScreen.active) .entry { height:auto; max-height:none; }
    }
    @media (min-width:900px) and (max-width:1099px) {
      html:has(#entryScreen.active),body:has(#entryScreen.active) { height:auto; overflow:auto; }
      body:has(#entryScreen.active) .app { height:auto; min-height:100svh; align-items:flex-start; }
      body:has(#entryScreen.active) #entryScreen.active,body:has(#entryScreen.active) .entry { height:auto; max-height:none; }
      body:has(#entryScreen.active) .entry-form { overflow:visible; }
      body:has(#entryScreen.active) .entry-paths { grid-template-columns:minmax(0,1fr); grid-auto-rows:365px; }
      body:has(#entryScreen.active) .entry-path { height:365px; min-height:0; }
      body:has(#entryScreen.active) .entry-path.create-path { margin-top:0; }
    }
    @media(max-width:1100px){ #gameScreen .shell{height:auto;min-height:calc(100svh - 28px)}#gameScreen .game-grid{flex:none;grid-template-columns:minmax(0,1fr)}#gameScreen .drawing{order:1;min-height:560px}.game-grid .game-card.players{order:2}.chat{order:3;min-height:260px}.toolrow{justify-content:flex-start}.colors{flex:1;flex-wrap:wrap} }
    @media(max-width:760px){ .app{align-items:flex-start;padding:14px 0}.entry,.lobby-grid,.game-grid,.entry-paths{grid-template-columns:1fr}.entry-story{min-height:270px;padding:28px}.entry-story .brand{font-size:clamp(44px,14vw,54px);letter-spacing:-2px}.entry-story h1{margin-top:46px}.hero-doodles,.chalk-art{display:none}.entry-form{min-width:0;padding:30px 27px}.entry-form h1{font-size:28px}.avatar-picker{grid-template-columns:minmax(0,1fr);min-width:0;row-gap:12px}.avatar-choices{width:100%;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.entry-path{min-height:0;padding:25px 22px}.entry-path.create-path{margin-top:0;transform:none}.entry-paths{gap:16px}.play-step:nth-of-type(2),.play-step:nth-of-type(3),.entry-form .primary,.entry-form .secondary{margin-left:0;margin-right:0;transform:none}.entry-form .secondary{width:100%}.shell{padding:15px}.topbar{align-items:flex-start;flex-direction:column;gap:5px}#gameScreen .drawing{min-height:0}#gameScreen .game-header{grid-template-columns:minmax(0,1fr) auto;gap:11px;padding:13px}#gameScreen .game-brand{min-width:0;border:0;padding:0}#gameScreen .game-brand .brand{font-size:25px}#gameScreen .game-header .roundline{grid-column:1 / -1}#gameScreen .game-round-chip{display:none}#gameScreen .game-header .word{font-size:20px}.game-header-actions{gap:6px}.game-exit{min-height:40px;padding:7px 8px;font-size:11px}#gameScreen .game-header .timer{min-width:66px;padding:9px 8px;font-size:22px}#lobbyScreen .topbar{min-height:72px;margin:0;padding:13px 17px;align-items:center;flex-direction:row;gap:10px}#lobbyScreen .topbar .brand{font-size:29px}#lobbyScreen .topbar .tagline{padding:7px 9px;font-size:10px}#lobbyScreen .lobby-grid{padding:15px;gap:16px}#lobbyScreen .lobby-grid > .card:first-child,#lobbyScreen .lobby-grid > .players,#lobbyScreen .room-code,#lobbyScreen .copy,#lobbyScreen #startGame{transform:none}#lobbyScreen .copy{width:100%;margin-left:0}#lobbyScreen .room-code{margin-left:0;margin-right:0}.game-grid .game-card.players{order:2}.chat{order:3;min-height:220px}.players .player{display:inline-flex;width:49%;border-bottom:0}.board{min-height:290px}canvas{min-height:272px}.toolrow{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.toolgroup,.actions{width:100%;flex-wrap:wrap}.tool-caption{flex:0 0 100%}.colors,.sizes,.draw-modes{width:100%;flex:none;flex-wrap:wrap}.color,.size,.draw-mode{width:44px;height:44px}.tool{min-height:44px;padding:9px 11px} #lobbyScreen .shell{padding:0}#lobbyScreen .lobby-main,#lobbyScreen .lobby-sidebar{padding:25px 20px}#lobbyScreen .invite-ticket{grid-template-columns:1fr;margin:23px 0}#lobbyScreen .copy{min-width:0}#lobbyScreen .how{grid-template-columns:1fr;padding-top:30px}#lobbyScreen .rule{min-height:0;padding:30px 15px 15px}#lobbyScreen .rule:nth-of-type(2),#lobbyScreen .rule:nth-of-type(3),#lobbyScreen .rule:nth-of-type(4){margin-top:0;transform:none}#lobbyScreen .team-head{align-items:flex-start;flex-direction:column}#lobbyScreen .lobby-grid > .lobby-main h1{max-width:100%;font-size:31px} }
    .entry-path .notice { display:block!important; }
    button:disabled,select:disabled { cursor:not-allowed; filter:grayscale(.25); opacity:.62; }
    #lobbyScreen .lobby-sidebar .tiny { display:block; line-height:1.45; }
    #gameScreen .player { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:9px; }
    #gameScreen .player .host { display:none; }
    #gameScreen .player .score { margin-left:0; }
    .player .player-name { min-width:0; overflow-wrap:anywhere; }
    .ready-state { margin-left:auto; padding:4px 7px; border-radius:999px; color:#765f4c; background:#eadfc8; font-size:10px; font-weight:900; white-space:nowrap; }
    .ready-state.is-ready { color:#17463d; background:#b9d9bd; }
    .remove-player { width:auto; margin-left:2px; padding:5px 7px; border:1px solid #d9a58f; border-radius:3px; color:#8f3e2e; background:#fff6e8; font-size:10px; font-weight:900; }
    .lobby-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
    .lobby-actions .secondary { min-width:0; padding:9px 7px; font-size:11px; }
    .danger-link { color:#873d30; background:#f2d8c4; }
    .lobby-summary { margin:13px 0 0; padding:10px 12px; border-left:4px solid var(--gold); background:#fff7df; color:var(--deep-green); font-size:12px; font-weight:900; line-height:1.4; }
    .connection-status { min-height:17px; }
    .ready-button { margin-top:13px; padding:12px; }
    .ready-button.is-ready { color:#fff9ed; background:var(--green); }
    #lobbyScreen .lobby-status-panel { display:grid; gap:9px; margin-top:13px; }
    #lobbyScreen .lobby-status-panel .lobby-summary { margin:0; }
    #lobbyScreen .lobby-feedback { margin:0; padding:9px 11px; border-left:4px solid var(--green); background:rgba(255,253,246,.68); color:#4f493f; font-size:12px; line-height:1.35; }
    #lobbyScreen .lobby-feedback:empty { display:none; }
    #lobbyScreen .lobby-start-actions { display:grid; gap:9px; }
    #lobbyScreen .lobby-start-actions .ready-button,
    #lobbyScreen .lobby-start-actions #startGame { width:100%; min-height:46px; margin:0; padding:11px 12px; transform:none; }
    #lobbyScreen .lobby-start-actions #startGame { box-shadow:0 4px 0 #8e3f2e; font-size:16px; }
    #lobbyScreen #shownRoomName:focus { outline:none; }
    @media (max-width:760px) {
      #lobbyScreen .lobby-sidebar .player { display:grid; grid-template-columns:38px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:2px 9px; width:100%; }
      #lobbyScreen .lobby-sidebar .player .avatar { grid-column:1; grid-row:1 / span 2; align-self:center; }
      #lobbyScreen .lobby-sidebar .player .player-name { grid-column:2; grid-row:1; align-self:end; overflow-wrap:normal; }
      #lobbyScreen .lobby-sidebar .player .host { grid-column:2; grid-row:2; margin:0; align-self:start; font-size:10px; }
      #lobbyScreen .lobby-sidebar .player .ready-state { grid-column:3; grid-row:1 / span 2; align-self:center; margin:0; }
    }
    @media (min-width:761px) and (max-height:800px) {
      #lobbyScreen .lobby-status-panel { gap:6px; margin-top:6px; }
      #lobbyScreen .lobby-feedback { padding:7px 10px; }
      #lobbyScreen .lobby-start-actions { gap:6px; }
      #lobbyScreen .lobby-start-actions .ready-button,
      #lobbyScreen .lobby-start-actions #startGame { min-height:40px; padding:9px 11px; }
    }
    .modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
    .modal-actions .primary,.modal-actions .secondary { width:100%; margin:0; }
    .countdown-overlay { position:absolute; z-index:8; inset:0; display:grid; place-content:center; justify-items:center; padding:30px; color:#fff8e6; background:rgba(10,43,36,.88); text-align:center; backdrop-filter:blur(3px); }
    .countdown-overlay[hidden] { display:none; }
    .countdown-overlay span { color:var(--gold); font-size:15px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
    .countdown-overlay strong { font:900 clamp(96px,18vw,190px)/.9 Georgia,serif; text-shadow:5px 6px 0 rgba(0,0,0,.22); }
    .countdown-overlay p { margin:16px 0 0; font-size:18px; font-weight:900; }
    #gameScreen .shell { position:relative; }
    body.invitation-mode .entry-paths { grid-template-columns:minmax(0,720px); justify-content:center; }
    body.invitation-mode .create-path { display:none; }
    body.invitation-mode #joinForm { min-height:390px; height:auto; transform:none; }
    body.invitation-mode #joinForm label[for="roomCode"],body.invitation-mode #roomCode { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
    body.invitation-mode .entry-form > h1 { font-size:36px; }
    body.invitation-mode .avatar-choices { display:flex; max-width:none; overflow-x:auto; padding:3px 2px 8px; scroll-snap-type:x proximity; }
    body.invitation-mode .avatar-choice { flex:0 0 62px; scroll-snap-align:start; }
    @media(max-width:760px){body.invitation-mode .entry-story{display:none}body.invitation-mode .entry-form{padding:22px 22px 18px}body.invitation-mode .entry-form > h1{font-size:30px}body.invitation-mode .entry-form .help{font-size:14px}body.invitation-mode .entry-help-link{display:none}body.invitation-mode .avatar-picker{display:block;margin:16px 0 8px;padding:9px}body.invitation-mode .avatar-picker-intro{display:none}body.invitation-mode .avatar-choice{height:64px;grid-template-rows:43px 12px;flex-basis:56px}body.invitation-mode .avatar-choice svg{width:43px;height:43px}body.invitation-mode #joinForm{min-height:0;height:auto;padding:18px}body.invitation-mode #joinForm .path-kicker{margin-bottom:8px}body.invitation-mode #joinForm .path-title{font-size:25px}body.invitation-mode #joinForm .path-copy{min-height:0;margin-bottom:5px;font-size:13px}body.invitation-mode #joinForm label{margin-top:10px}body.invitation-mode #joinForm .primary{margin-top:18px}body.invitation-mode .entry-paths{margin-top:12px}.lobby-actions{grid-template-columns:1fr}.modal-actions{grid-template-columns:1fr}}

    /* Lobby v2: Raum teilen, Bande sammeln, Runde vorbereiten. */
    #lobbyScreen .lobby-layout {
      grid-template-columns:minmax(320px,.84fr) minmax(480px,1.16fr);
      grid-template-rows:auto minmax(0,1fr);
      align-items:stretch;
      gap:16px;
      padding:18px 22px 14px;
    }
    #lobbyScreen .lobby-layout > .card { min-width:0; transform:none; }
    #lobbyScreen .lobby-grid.lobby-layout > .lobby-main.lobby-overview {
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:minmax(260px,.72fr) minmax(500px,1.28fr);
      align-items:center;
      gap:25px;
      min-height:0;
      padding:19px 24px;
      overflow:visible;
      background:linear-gradient(135deg,#fffdf7,#f7ecd1);
    }
    #lobbyScreen .lobby-overview::after { display:none; }
    #lobbyScreen .lobby-intro { min-width:0; }
    #lobbyScreen .lobby-label,
    #lobbyScreen .section-kicker { margin:0 0 7px; color:var(--clay); font-size:11px; font-weight:900; letter-spacing:.8px; text-transform:uppercase; }
    #lobbyScreen .lobby-overview h1 { max-width:none; margin:0; font-size:clamp(29px,3vw,39px); line-height:1; }
    #lobbyScreen .lobby-intro > .muted { display:block; margin:10px 0 7px; padding:0; border:0; color:#5f5546; background:transparent; font-size:13px; font-weight:700; transform:none; }
    #lobbyScreen .lobby-intro > .muted::before { display:none; }
    #lobbyScreen .lobby-help { display:inline-flex; align-items:center; min-height:30px; color:var(--clay); font-size:12px; font-weight:900; text-decoration:none; }
    #lobbyScreen .lobby-help:hover { text-decoration:underline; text-underline-offset:3px; }
    #lobbyScreen .invite-ticket { grid-template-columns:minmax(0,1fr) minmax(205px,235px); gap:13px; margin:0; padding:10px; transform:none; }
    #lobbyScreen .room-code { margin:0; padding:16px 42px 16px 23px; transform:none; }
    #lobbyScreen .room-code strong { font-size:clamp(29px,3vw,37px); }
    #lobbyScreen .copy { width:100%; min-width:0; margin:0; padding:16px 13px; transform:none; }
    #lobbyScreen .lobby-grid.lobby-layout > .lobby-team,
    #lobbyScreen .lobby-grid.lobby-layout > .lobby-control { padding:20px 22px; background:linear-gradient(145deg,#fffdf7,#f7ecd3); }
    #lobbyScreen .lobby-team { display:flex; min-height:0; flex-direction:column; }
    #lobbyScreen .team-head { display:block; margin:0 0 10px; padding-bottom:11px; border-bottom:2px dashed rgba(185,83,60,.25); }
    #lobbyScreen .team-head h2,
    #lobbyScreen .control-head h2 { margin:0; color:var(--deep-green); font:700 25px/1.05 Georgia,serif; }
    #lobbyScreen .team-list { min-height:0; max-height:230px; overflow-y:auto; padding:0 4px 3px 0; scrollbar-width:thin; }
    #lobbyScreen .lobby-team .player { margin-top:7px; padding:10px; }
    #lobbyScreen .team-waiting { display:grid; flex:1; min-height:72px; place-items:center; margin:10px 0 0; padding:14px; border:1px dashed #d8c398; color:#776854; background:rgba(255,250,238,.48); text-align:center; font-size:12px; font-weight:800; }
    #lobbyScreen .team-waiting[hidden] { display:none; }
    #lobbyScreen .lobby-avatar-picker { display:grid; min-height:0; flex:1; grid-template-columns:minmax(0,1fr); align-content:center; row-gap:9px; margin:11px 0 0; padding:11px 12px 12px; }
    #lobbyScreen .lobby-avatar-picker::before { top:-8px; right:11px; width:21px; height:21px; font-size:13px; }
    #lobbyScreen .lobby-avatar-picker .avatar-picker-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
    #lobbyScreen .lobby-avatar-picker .avatar-picker-label { font-size:13px; }
    #lobbyScreen .lobby-avatar-picker .avatar-picker-label::before { margin-bottom:2px; font-size:8px; }
    #lobbyScreen .lobby-avatar-picker .avatar-picker-help { max-width:180px; margin:0; font-size:10px; text-align:right; }
    #lobbyScreen .lobby-avatar-picker .avatar-choices { width:100%; max-width:none; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
    #lobbyScreen .lobby-avatar-picker .avatar-choice { grid-template-rows:34px 10px; height:49px; padding:2px; }
    #lobbyScreen .lobby-avatar-picker .avatar-choice svg { width:34px; height:34px; }
    #lobbyScreen .lobby-avatar-picker .avatar-choice::after { font-size:8px; }
    #lobbyScreen .lobby-avatar-picker + .team-waiting { min-height:0; flex:0 0 auto; margin-top:8px; padding:8px 10px; }
    #lobbyScreen .lobby-team .lobby-actions { gap:12px; margin-top:14px; }
    #lobbyScreen .lobby-team .lobby-actions button,
    #lobbyScreen .lobby-start-actions button { min-height:45px; padding:10px 12px; font-size:13px; }
    #lobbyScreen .lobby-control { display:flex; min-height:0; flex-direction:column; }
    #lobbyScreen .control-head { padding-bottom:11px; border-bottom:2px dashed rgba(185,83,60,.25); }
    #lobbyScreen .settings { display:grid; flex:1; grid-auto-rows:minmax(51px,1fr); gap:7px; margin:12px 0 0; padding:0; }
    #lobbyScreen .setting { min-height:51px; padding:8px 9px 8px 13px; }
    #lobbyScreen .setting-copy { display:grid; min-width:0; align-content:center; gap:5px; }
    #lobbyScreen .setting-copy label { color:var(--deep-green); font-size:14px; font-weight:900; line-height:1.15; }
    #lobbyScreen .setting-copy small { color:#786854; font-size:11px; line-height:1.3; }
    #lobbyScreen .setting select { width:62.5%; min-height:42px; margin-right:-10px; padding:8px 11px; font-size:14px; }
    #lobbyScreen .lobby-status-panel { display:flex; flex:0 0 auto; flex-direction:column; gap:12px; margin-top:14px; }
    #lobbyScreen .lobby-summary { padding:8px 10px; }
    #lobbyScreen .lobby-feedback { padding:9px 12px; }
    #lobbyScreen .lobby-start-actions { grid-template-columns:minmax(155px,.78fr) minmax(220px,1.22fr); gap:12px; margin-top:0; }
    #lobbyScreen .lobby-start-actions .ready-button,
    #lobbyScreen .lobby-start-actions #startGame { min-height:45px; }
    #lobbyScreen .lobby-start-actions #startGame { font-size:13px; }
    @media (min-width:761px) and (max-height:800px) {
      #lobbyScreen .lobby-layout { gap:13px; padding:12px 18px 10px; }
      #lobbyScreen .lobby-grid.lobby-layout > .lobby-main.lobby-overview { grid-template-columns:minmax(250px,.68fr) minmax(470px,1.32fr); gap:18px; padding:10px 19px; }
      #lobbyScreen .lobby-intro > .muted { margin:7px 0 4px; }
      #lobbyScreen .lobby-help { min-height:24px; }
      #lobbyScreen .invite-ticket { padding:8px; }
      #lobbyScreen .room-code { padding-top:12px; padding-bottom:12px; }
      #lobbyScreen .copy { padding:13px 11px; }
      #lobbyScreen .lobby-grid.lobby-layout > .lobby-team,#lobbyScreen .lobby-grid.lobby-layout > .lobby-control { padding:15px 18px; }
      #lobbyScreen .team-head,#lobbyScreen .control-head { padding-bottom:8px; }
      #lobbyScreen .team-head h2,#lobbyScreen .control-head h2 { font-size:21px; }
      #lobbyScreen .team-list { max-height:135px; }
      #lobbyScreen .team-waiting { min-height:48px; margin-top:7px; padding:9px; }
      #lobbyScreen .settings { grid-auto-rows:minmax(43px,1fr); margin-top:8px; }
      #lobbyScreen .setting { min-height:43px; padding:6px 8px 6px 12px; }
      #lobbyScreen .setting-copy { gap:2px; }
      #lobbyScreen .setting-copy small { display:none; }
      #lobbyScreen .lobby-control:has(#categorySetting:not([hidden])) .settings { gap:5px; }
      #lobbyScreen .lobby-control:has(#categorySetting:not([hidden])) .setting { min-height:40px; padding-top:4px; padding-bottom:4px; }
      #lobbyScreen .lobby-status-panel { gap:9px; margin-top:10px; }
      #lobbyScreen .lobby-summary { padding:7px 10px; }
      #lobbyScreen .lobby-feedback { padding:8px 11px; }
      #lobbyScreen .lobby-team .lobby-actions button,
      #lobbyScreen .lobby-start-actions .ready-button,#lobbyScreen .lobby-start-actions #startGame { min-height:42px; padding:9px 11px; }
    }
    @media (max-width:760px) {
      #lobbyScreen .lobby-layout { grid-template-columns:1fr; grid-template-rows:auto; gap:14px; padding:14px; }
      #lobbyScreen .lobby-grid.lobby-layout > .lobby-main.lobby-overview { grid-column:auto; grid-template-columns:minmax(0,1fr); gap:16px; padding:22px 18px; }
      #lobbyScreen .invite-ticket { grid-template-columns:1fr; }
      #lobbyScreen .lobby-grid.lobby-layout > .lobby-team,#lobbyScreen .lobby-grid.lobby-layout > .lobby-control { padding:20px 18px; }
      #lobbyScreen .lobby-team .player { display:grid; grid-template-columns:38px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:2px 9px; width:100%; }
      #lobbyScreen .lobby-team .player .avatar { grid-column:1; grid-row:1 / span 2; align-self:center; }
      #lobbyScreen .lobby-team .player .player-name { grid-column:2; grid-row:1; align-self:end; overflow-wrap:normal; }
      #lobbyScreen .lobby-team .player .host { grid-column:2; grid-row:2; margin:0; align-self:start; font-size:10px; }
      #lobbyScreen .lobby-team .player .ready-state { grid-column:3; grid-row:1 / span 2; align-self:center; margin:0; }
      #lobbyScreen .team-waiting { min-height:58px; }
      #lobbyScreen .lobby-avatar-picker { min-height:178px; flex:none; }
      #lobbyScreen .lobby-avatar-picker + .team-waiting { min-height:0; }
      #lobbyScreen .settings { flex:none; grid-auto-rows:auto; }
      #lobbyScreen .setting-copy { gap:2px; }
      #lobbyScreen .setting-copy small { display:none; }
      #lobbyScreen .setting select { width:auto; max-width:55%; margin-right:0; }
      #lobbyScreen .lobby-status-panel { gap:12px; margin-top:14px; }
      #lobbyScreen .lobby-feedback { padding:10px 12px; }
      #lobbyScreen .lobby-team .lobby-actions,#lobbyScreen .lobby-start-actions { grid-template-columns:1fr; gap:11px; }
    }
    [hidden] { display:none!important; }
    .entry-path-tabs,.avatar-picker-toggle { display:none; }
    .avatar-picker-body { display:contents; }
    .moderation-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; margin-left:auto; }
    .moderation-actions .remove-player { margin:0; }
    .moderation-actions .ban-player { border-color:#b95a46; color:#fff8ec; background:#a94b38; }
    @media (max-width:760px) {
      .entry-path-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0 12px; padding:5px; border:1px solid rgba(29,83,71,.18); background:#f3e6c9; }
      .entry-path-tab { min-height:45px; padding:9px 10px; border:0; color:var(--deep-green); background:transparent; box-shadow:none; font-size:13px; font-weight:900; }
      .entry-path-tab[aria-selected="true"] { color:#fffaf0; background:var(--green); box-shadow:0 3px 0 rgba(10,39,33,.18); }
      .entry-paths { margin-top:0; }
      .entry-paths .entry-path:not(.mobile-active) { display:none; }
      body.invitation-mode .entry-path-tabs { display:none; }
      #lobbyScreen .lobby-avatar-picker { min-height:0; padding:9px 11px; }
      #lobbyScreen .avatar-picker-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; padding:9px 10px; color:var(--deep-green); background:#fff8e8; box-shadow:none; font-size:12px; font-weight:900; text-align:left; }
      #lobbyScreen .avatar-picker-toggle::after { content:"▾"; margin-left:10px; font-size:15px; }
      #lobbyScreen .lobby-avatar-picker.is-open .avatar-picker-toggle::after { transform:rotate(180deg); }
      #lobbyScreen .lobby-avatar-picker .avatar-picker-body { display:none; }
      #lobbyScreen .lobby-avatar-picker.is-open .avatar-picker-body { display:contents; }
      #lobbyScreen .lobby-avatar-picker.is-open .avatar-picker-intro { margin-top:7px; }
      #lobbyScreen .lobby-team .player .moderation-actions { grid-column:1 / -1; grid-row:3; margin:6px 0 0; }
    }