:root{--bg: #f4f2e9;--surface: #fbfaf5;--surface-2: #ffffff;--ink: #15344e;--ink-soft: #5a6b7b;--line: #c8d3de;--accent: #3e86c9;--accent-hover: #2f73b1;--accent-soft: #afcbe7;--accent-bg: #e8f1fa;--ok: #2c8a67;--error: #b34f46;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 22px;--shadow-sm: 0 1px 2px rgba(21, 52, 78, .08);--shadow-md: 0 6px 18px rgba(21, 52, 78, .12);--shadow-lg: 0 18px 48px rgba(21, 52, 78, .18);--ease: cubic-bezier(.22, .61, .36, 1)}*{box-sizing:border-box}html,body{margin:0}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background-color:var(--bg);background-image:radial-gradient(circle at 12% -10%,rgba(62,134,201,.12),transparent 42%),radial-gradient(circle at 92% 4%,rgba(62,134,201,.1),transparent 40%);background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased}h1,h2,h3{margin:0;letter-spacing:-.01em}button{font:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}.app{max-width:1320px;margin:0 auto;padding:clamp(16px,3vw,32px)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(16px,3vw,28px)}.brand{display:flex;align-items:center;gap:14px}.brand__logo{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(62,134,201,.25));animation:floaty 6s var(--ease) infinite}.brand__text h1{font-size:clamp(1.3rem,3vw,1.7rem);font-weight:800}.brand__text p{margin:2px 0 0;font-size:.82rem;color:var(--ink-soft);letter-spacing:.02em}.topbar__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-weight:600;box-shadow:var(--shadow-sm)}.chip__label{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);font-weight:700}.chip__code{font-variant-ligatures:none;letter-spacing:.04em}.chip__copy{border:none;background:var(--accent-bg);color:var(--accent-hover);border-radius:999px;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;transition:transform .12s var(--ease),background .15s var(--ease)}.chip__copy:hover{background:var(--accent-soft)}.chip__copy:active{transform:scale(.9)}.status-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent}.status-pill:before{content:"";width:8px;height:8px;border-radius:999px;background:currentColor}.status-pill.lobby,.status-pill.setup{background:var(--accent-bg);color:var(--accent-hover);border-color:var(--accent-soft)}.status-pill.running{background:#e7f6ef;color:var(--ok);border-color:#aedcc8}.status-pill.running:before{animation:blink 1.2s steps(2,start) infinite}.status-pill.finished{background:#fbeee0;color:#b07d2e;border-color:#ecd1a6}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(16px,2.4vw,24px);box-shadow:var(--shadow-md)}.panel__title{display:flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:700;margin-bottom:16px}.panel__title .ico{color:var(--accent);flex:none}.unlock-screen{display:grid;place-items:center;min-height:100vh;padding:20px}.unlock-panel{width:100%;max-width:420px;text-align:center;padding:clamp(24px,4vw,40px) clamp(20px,3vw,32px)}.unlock-panel .hero__emblem{width:100px;margin-bottom:20px}.unlock-panel h2{font-size:1.4rem;margin-bottom:8px}.unlock-panel p{color:var(--ink-soft);font-size:.95rem;margin:0 0 24px}.unlock-panel form{display:grid;gap:16px}.landing{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(16px,3vw,28px);align-items:start}.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#ffffff 0%,var(--accent-bg) 100%)}.hero__emblem{width:clamp(120px,26vw,180px);height:auto;display:block;margin:4px auto 14px;animation:floaty 6s var(--ease) infinite}.hero h2{text-align:center;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800}.hero__tag{text-align:center;color:var(--ink-soft);margin:10px auto 0;max-width:36ch;line-height:1.5}.hero__points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}.hero__points li{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink)}.hero__points .ico{color:var(--accent);flex:none}.spark{position:absolute;color:var(--accent-soft);opacity:.7;animation:twinkle 3.5s var(--ease) infinite;pointer-events:none}.spark.s1{top:18px;right:26px;animation-delay:0s}.spark.s2{top:64px;right:70px;animation-delay:.8s}.spark.s3{bottom:28px;left:30px;animation-delay:1.6s}.field{display:grid;gap:7px;margin-bottom:16px}.field>.label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}.input{width:100%;border:1px solid var(--line);border-radius:var(--radius-md);padding:13px 14px;background:var(--surface-2);color:var(--ink);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}.input::placeholder{color:#9aa9b6}.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #3e86c92e}.input.code{text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:1.1rem;text-align:center}.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px;max-height:168px;overflow-y:auto;padding:6px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2)}.avatar-grid button{border:2px solid transparent;background:transparent;border-radius:50%;padding:2px;cursor:pointer;line-height:0;transition:transform .12s var(--ease)}.avatar-grid button:hover{transform:translateY(-2px) scale(1.05)}.avatar-grid img{width:100%;aspect-ratio:1/1;border-radius:50%;display:block}.avatar-grid button.selected{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 3px #3e86c92e}.segmented{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.segmented button{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:var(--radius-md);padding:12px 0;font-weight:700;cursor:pointer;transition:transform .1s var(--ease),background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}.segmented button:hover{border-color:var(--accent-soft)}.segmented button.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}.segmented button:active{transform:scale(.97)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-md);padding:13px 18px;min-height:46px;font-weight:700;cursor:pointer;transition:transform .11s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease),border-color .15s var(--ease)}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px #3e86c94d}.btn--primary:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 8px 22px #3e86c95c}.btn--ghost{background:var(--surface-2);color:var(--ink);border-color:var(--line)}.btn--ghost:hover:not(:disabled){border-color:var(--accent-soft);background:var(--accent-bg)}.btn--ok{background:var(--ok);color:#fff}.btn--block{width:100%}.divider{display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin:18px 0}.divider:before,.divider:after{content:"";height:1px;flex:1;background:var(--line)}.known-rooms{margin-top:16px;display:grid;gap:12px}.known-rooms__group,.known-rooms__list{display:grid;gap:8px}.known-room-btn{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);color:var(--ink);text-align:left;padding:10px 12px;display:grid;gap:3px;cursor:pointer;transition:border-color .15s var(--ease),transform .12s var(--ease)}.known-room-btn strong{font-size:.84rem;letter-spacing:.08em}.known-room-btn span{font-size:.82rem;color:var(--ink-soft)}.known-room-btn:hover{border-color:var(--accent);transform:translateY(-1px)}.room-theme{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:clamp(12px,2vw,18px);padding:clamp(14px,2.4vw,20px) 22px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#ffffff 0%,var(--accent-bg) 100%);border:1px solid var(--line);box-shadow:var(--shadow-sm);text-align:center;animation:pop-in .3s var(--ease)}.room-theme .ico{color:var(--accent);flex:none}.room-theme h2{font-size:clamp(1.25rem,3.4vw,1.9rem);font-weight:800;letter-spacing:-.01em;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.room-theme__title-btn{border:none;background:transparent;color:inherit;display:inline-flex;align-items:center;gap:8px;padding:0;cursor:default}.room-theme__title-btn.is-host{cursor:pointer}.room-theme__title-btn.is-host:hover h2{text-decoration:underline;text-decoration-thickness:2px}.room-theme__editor{display:grid;gap:10px;width:min(100%,520px)}.room-theme__actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.layout{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;gap:clamp(14px,2vw,20px);align-items:start}.players{list-style:none;margin:0;padding:0;display:grid;gap:8px}.player{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 10px;background:var(--surface-2);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}.player.is-me{border-color:var(--accent-soft);box-shadow:0 0 0 2px #3e86c91f}.player.is-winner{border-color:#ecd1a6;background:#fbf3e6}.player__ava{position:relative;width:40px;height:40px}.player__ava img{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:block}.player__ava .ready-dot{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;background:var(--ok);border:2px solid var(--surface);display:grid;place-items:center;animation:pop-in .25s var(--ease)}.player__name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player__tag{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-hover);background:var(--accent-bg);padding:3px 7px;border-radius:999px}.player__tag.win{color:#b07d2e;background:#f6e6cd}.actions{display:grid;gap:9px;margin-top:16px}.ready-meter{margin-top:14px;font-size:.82rem;color:var(--ink-soft)}.ready-meter .bar{margin-top:6px;height:8px;border-radius:999px;background:var(--accent-bg);overflow:hidden}.ready-meter .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-soft));border-radius:999px;transition:width .4s var(--ease)}.center{display:flex;flex-direction:column}.board-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}.board-head h2{font-size:1.2rem;font-weight:800}.board-hint{font-size:.82rem;color:var(--ink-soft)}.grid{display:grid;gap:clamp(7px,1vw,11px)}.cell{position:relative;aspect-ratio:1 / 1;border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);display:flex;flex-direction:column}.cell__index{position:absolute;top:7px;left:9px;font-size:.68rem;font-weight:700;color:var(--ink-soft);opacity:.7}.input-cell{padding:22px 8px 8px;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}.input-cell:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #3e86c929}.input-cell textarea{flex:1;width:100%;border:none;resize:none;background:transparent;color:var(--ink);font:inherit;font-weight:600;text-align:center;line-height:1.25}.input-cell textarea:focus{outline:none}.input-cell textarea::placeholder{color:#aebbc6;font-weight:500}.board-cell{cursor:pointer;align-items:center;justify-content:center;padding:14px 10px;text-align:center;color:var(--ink);transition:transform .12s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),background .2s var(--ease)}.board-cell:hover:not(:disabled){border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}.board-cell:active:not(:disabled){transform:translateY(-1px) scale(.98)}.board-cell .term{font-size:clamp(.82rem,1.7vw,1.05rem);font-weight:700;line-height:1.22;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.board-cell:disabled{cursor:default}.board-cell.empty .term{color:#b6c2cc;font-weight:500}.board-cell.marked{border-color:var(--accent);background:var(--accent-bg)}.board-cell.marked .term{color:var(--accent-hover)}.board-cell.marked.self{background:#d7e9fa;box-shadow:0 0 0 2px #3e86c94d,var(--shadow-md)}.board-cell.marked.propagated{animation:glow-pulse .6s var(--ease)}.seal{position:absolute;top:6px;right:6px;width:26px;height:26px;color:var(--accent);filter:drop-shadow(0 2px 4px rgba(62,134,201,.4));animation:seal-in .22s var(--ease)}.board-cell.self .seal{color:var(--accent-hover)}.feed{list-style:none;margin:0;padding:2px;display:flex;flex-direction:column;gap:10px;max-height:min(64vh,560px);overflow-y:auto}.feed:empty:after{content:"Noch keine Ereignisse.";color:var(--ink-soft);font-size:.86rem}.feed li{display:flex;gap:9px;align-items:flex-start;animation:slide-in .22s var(--ease)}.feed__ava{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);flex:none;background:var(--accent-bg)}.feed__bubble{background:var(--accent-bg);border:1px solid #d6e6f5;border-radius:4px 14px 14px;padding:9px 12px;font-size:.88rem;line-height:1.35;color:var(--ink)}.feed__bubble strong{color:var(--accent-hover)}.feed__bubble.is-bingo{background:#fbf0db;border-color:#ecd1a6;color:#8a6418;font-weight:700}.feed__bubble.is-mark .term{font-weight:700;letter-spacing:.06em;color:var(--accent-hover)}.feed__time{display:block;font-size:.66rem;color:var(--ink-soft);margin-top:3px;opacity:.8}.banner{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border-radius:var(--radius-md);background:linear-gradient(135deg,#fbf0db,#f6e3c1);border:1px solid #ecd1a6;color:#8a6418;font-weight:700;animation:pop-in .3s var(--ease)}.banner .ico{flex:none}.toasts{position:fixed;right:16px;bottom:16px;display:grid;gap:10px;z-index:60}.toast{padding:12px 16px;border-radius:var(--radius-md);color:#fff;max-width:min(90vw,420px);box-shadow:var(--shadow-lg);animation:slide-up .25s var(--ease);font-weight:600}.toast.error{background:var(--error)}.toast.info{background:var(--ok)}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes twinkle{0%,to{opacity:.25;transform:scale(.85)}50%{opacity:.9;transform:scale(1.1)}}@keyframes seal-in{0%{transform:scale(0) rotate(-25deg);opacity:0}70%{transform:scale(1.18) rotate(6deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes glow-pulse{0%{box-shadow:0 0 #3e86c973}to{box-shadow:0 0 0 14px #3e86c900}}@keyframes pop-in{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slide-in{0%{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-up{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@media (max-width: 1024px){.layout{grid-template-columns:minmax(0,1fr)}.center{order:-1}}@media (max-width: 720px){.landing{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}