:root {
  --plum-900: #1f0a24; --plum-700: #3a1442; --plum-500: #5a2266;
  --chili: #f0321e; --lime: #b9e02c; --sun: #ffc83a; --cream: #fff3d6; --ink: #1a0a1e;
  --display: 'Bagel Fat One', 'Arial Black', system-ui, sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  --cw: clamp(62px, 17vw, 104px);
  --hard: 0 5px 0 var(--ink);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font: 500 16px/1.5 var(--body); color: var(--cream); background: var(--plum-900);
  background-image: radial-gradient(120% 70% at 50% 110%, #7a1420 0%, transparent 60%), radial-gradient(80% 50% at 50% -10%, #4a1a55 0%, transparent 70%);
  background-attachment: fixed; overflow: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
[hidden] { display: none !important; }
.ico { width: 1em; height: 1em; color: var(--chili); vertical-align: -.12em; }

/* ---------- Start & Lobby ---------- */
.screen { height: 100dvh; }
#home, #lobby { overflow-y: auto; padding: 24px 16px 48px; }
.home-inner { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.logo {
  font: 400 clamp(64px, 21vw, 112px)/.8 var(--display); color: var(--sun); letter-spacing: -.01em;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink), 0 12px 0 var(--chili);
  display: flex; flex-direction: column; align-items: center; margin-top: 12px; transform: rotate(-4deg); position: relative;
}
.logo span:last-of-type { color: var(--chili); text-shadow: 0 7px 0 var(--ink), 0 12px 0 var(--sun); margin-left: .5em; }
.logo-chili { position: absolute; width: .62em; height: .62em; right: -.12em; top: -.16em; color: var(--chili); transform: rotate(18deg); animation: wobble 2.6s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(4deg) translateY(4px); } }
.tagline { font-size: 18px; font-weight: 700; max-width: 26ch; margin-top: 12px; }
.demo-fan { display: flex; justify-content: center; height: calc(var(--cw) * 1.5); margin: 4px 0 -8px; --cw: 70px; }
.demo-fan .card { margin: 0 -14px; transform: translateY(var(--y)) rotate(var(--r)); animation: fanin .7s cubic-bezier(.2,.9,.3,1.3) backwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes fanin { from { transform: translateY(120px) rotate(0); opacity: 0; } }
.panel { width: 100%; background: var(--plum-700); border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--hard); padding: 20px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.panel label, .lobby-label, legend { font-weight: 900; font-size: 14px; }
input:not([type=radio]) { background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; padding: 12px 14px; font-weight: 700; font-size: 18px; width: 100%; min-height: 52px; }
input::placeholder { color: #9b8a97; }
#codeInput { text-transform: uppercase; letter-spacing: .25em; font-family: var(--display); text-align: center; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.btn { background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; padding: 12px 20px; font: 400 20px/1.1 var(--display); min-height: 54px; box-shadow: var(--hard); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .45; }
.btn-hot { background: var(--chili); color: #fff; }
.or { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; opacity: .8; }
.or::before, .or::after { content: ''; flex: 1; height: 2px; background: var(--plum-500); }
.error { color: var(--sun); font-weight: 700; min-height: 1.5em; }
.hint { font-size: 15px; opacity: .85; }
.code-big { font: 400 clamp(64px, 22vw, 104px)/1 var(--display); letter-spacing: .08em; color: var(--sun); background: none; border: 0; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); padding: 0 8px; }
.lobby-list { list-style: none; padding: 0; width: 100%; display: grid; gap: 8px; }
.lobby-list li { display: flex; align-items: center; gap: 12px; background: var(--plum-700); border: 3px solid var(--ink); border-radius: 16px; padding: 8px 12px; font-weight: 900; font-size: 18px; text-align: left; animation: pop .3s cubic-bezier(.2,.9,.3,1.4) backwards; }
.lobby-list li.empty { background: none; border-style: dashed; border-color: var(--plum-500); font-weight: 500; font-size: 15px; opacity: .8; min-height: 58px; }
.lname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 12px; font-weight: 900; background: var(--lime); color: var(--ink); border-radius: 99px; padding: 2px 10px; }
.kick { background: none; border: 0; text-decoration: underline; font-size: 14px; font-weight: 700; min-height: 44px; padding: 0 6px; }
.limit { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.limit legend { margin-bottom: 6px; }
.limit label { flex: 1; }
.limit input { position: absolute; opacity: 0; }
.limit span { display: block; text-align: center; padding: 10px 6px; border: 3px solid var(--ink); border-radius: 12px; background: var(--plum-900); font-weight: 900; cursor: pointer; white-space: nowrap; }
.limit input:checked + span { background: var(--sun); color: var(--ink); }
.limit input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 3px; }
.rules { width: 100%; text-align: left; background: var(--plum-900); border: 2px solid var(--plum-500); border-radius: 16px; padding: 12px 16px; }
.rules summary { font-weight: 900; cursor: pointer; min-height: 32px; }
.rules ol { padding-left: 1.3em; margin: 8px 0; display: grid; gap: 6px; }
.rules b { color: var(--sun); }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: var(--ink); border: 3px solid var(--ink); display: grid; place-items: center; font: 400 20px/1 var(--display); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* ---------- Karten ---------- */
.card {
  width: var(--cw); aspect-ratio: 5 / 7; flex: none; position: relative; border-radius: calc(var(--cw) * .13);
  background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink), 0 12px 18px rgba(10, 0, 14, .45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; user-select: none;
}
.card .big { font: 400 calc(var(--cw) * .52)/1 var(--display); }
.card .cap { font: 900 calc(var(--cw) * .13)/1.1 var(--body); text-align: center; padding: 0 4px; }
.card.num { background: radial-gradient(circle at 50% 46%, #fff 0 34%, transparent 35%), linear-gradient(160deg, var(--cream) 0 58%, color-mix(in srgb, var(--heat) 28%, var(--cream)) 58%); }
.card.num .big { color: var(--heat); -webkit-text-stroke: calc(var(--cw) * .03) var(--ink); paint-order: stroke fill; margin-top: -6%; }
.card.num .corner { position: absolute; top: 5%; left: 8%; font: 400 calc(var(--cw) * .2)/1 var(--display); color: var(--ink); }
.card.num::after { content: ''; position: absolute; inset: auto 0 0 0; height: 20%; background: var(--heat); border-top: 3px solid var(--ink); }
.card .pips { position: absolute; bottom: 3.5%; z-index: 1; display: flex; gap: 1px; font-size: calc(var(--cw) * .15); }
.card .pips .ico { color: var(--cream); }
.card.joker { background: conic-gradient(from 20deg, #6fbe1e, #f0b200, #f47a1a, #e3261b, #b0128f, #6fbe1e); color: #fff; }
.card.joker .big { -webkit-text-stroke: calc(var(--cw) * .03) var(--ink); paint-order: stroke fill; }
.card.joker .cap { background: var(--ink); border-radius: 99px; padding: 3px 8px; }
.card.wende { background: var(--ink); color: var(--lime); border-color: var(--lime); }
.card.wende .sp-ico { width: 56%; height: auto; aspect-ratio: 1; }
.card.scharf { background: var(--chili); color: #fff; }
.card.scharf::before { content: ''; position: absolute; inset: 6%; border: 2px dashed rgba(255, 255, 255, .6); border-radius: calc(var(--cw) * .09); }
.sp-chilis { display: flex; font-size: calc(var(--cw) * .36); margin-bottom: 4%; }
.sp-chilis .ico { color: var(--sun); }
.card.back { background: repeating-linear-gradient(45deg, var(--chili) 0 10px, #d4230f 10px 20px); }
.card.back .back-ico { width: 56%; height: 56%; color: var(--sun); transform: rotate(-20deg); }

/* ---------- Spieltisch ---------- */
#game { display: grid; grid-template-rows: auto 1fr auto; position: relative; }
.topbar { display: flex; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 12px 4px; align-items: center; z-index: 5; }
.spacer { flex: 1; }
.chip { background: var(--plum-700); border: 2px solid var(--ink); border-radius: 99px; padding: 6px 14px; font-weight: 900; font-size: 14px; min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
.chip-mission { background: var(--sun); color: var(--ink); font: 400 16px/1 var(--display); box-shadow: 0 3px 0 var(--ink); }
#table { position: relative; min-height: 0; }
#felt {
  position: absolute; inset: 9% 5% 2%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #6a2a78 0%, #45184f 55%, #2e0f36 100%);
  border: 3px solid var(--ink); box-shadow: 0 0 0 10px #2a0d31, 0 0 0 13px var(--ink), 0 30px 60px rgba(0, 0, 0, .55), inset 0 0 80px rgba(0, 0, 0, .35);
}
#felt::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 3px dashed color-mix(in srgb, var(--lime) 45%, transparent); }
.seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 3; transition: transform .2s; }
.seat-head { display: flex; align-items: center; gap: 6px; background: var(--plum-900); border: 3px solid var(--ink); border-radius: 99px; padding: 3px 12px 3px 3px; box-shadow: 0 3px 0 var(--ink); }
.seat-info { display: flex; flex-direction: column; line-height: 1.15; }
.sname { font-weight: 900; font-size: 14px; max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats { display: flex; gap: 8px; font-size: 14px; font-weight: 900; align-items: center; }
.bidstat { background: var(--plum-500); border-radius: 8px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.bidstat.hit { background: var(--lime); color: var(--ink); }
.bidstat.over { background: var(--chili); color: #fff; }
.chilistat { display: inline-flex; align-items: center; gap: 2px; }
.seat.turn .seat-head, #meBar.turn { border-color: var(--sun); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 40%, transparent), 0 3px 0 var(--ink); animation: glow 1.1s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--sun) 18%, transparent), 0 3px 0 var(--ink); } }
.seat.off { opacity: .5; }
.seat .mini { display: flex; --cw: 26px; height: 36px; }
.seat .mini .card { margin: 0 -8px; border-width: 2px; box-shadow: 0 2px 0 var(--ink); }
.seat .mini .card .pips, .seat .mini .card .corner, .seat .mini .card .cap { display: none; }
.seat .mini .card.num .big { font-size: 15px; -webkit-text-stroke: 0; color: var(--ink); margin: 0; }
.seat .mini .card.num { background: color-mix(in srgb, var(--heat) 45%, var(--cream)); --cw: 30px; }
.seat .mini .card.num::after { display: none; }
.shake { animation: shake .5s; }
@keyframes shake { 20% { translate: -7px 0; } 40% { translate: 7px 0; } 60% { translate: -5px 0; } 80% { translate: 4px 0; } }
#trick { position: absolute; inset: 0; z-index: 2; pointer-events: none; --cw: clamp(50px, 11vmin, 88px); }
.tcard { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: scale .25s cubic-bezier(.2,.9,.3,1.5); }
.tname { font-size: 12px; font-weight: 900; background: var(--ink); border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
.tcard.winner { z-index: 20 !important; scale: 1.25; }
.tcard.winner .card { box-shadow: 0 0 0 5px var(--sun), 0 0 40px 12px rgba(255, 200, 58, .7); }
.tcard.winner .tname { background: var(--sun); color: var(--ink); }
#centerNote { position: absolute; left: 50%; top: 20%; transform: translateX(-50%) scale(0); z-index: 4; background: var(--ink); color: var(--lime); border: 2px solid var(--lime); border-radius: 99px; padding: 4px 14px; font-weight: 900; font-size: 14px; display: flex; gap: 6px; align-items: center; white-space: nowrap; transition: transform .3s cubic-bezier(.2,.9,.3,1.5); }
#centerNote.on { transform: translateX(-50%) scale(1); }
#centerNote .ico { color: var(--lime); }

/* ---------- Eigener Bereich ---------- */
#mine { position: relative; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 12px max(8px, env(safe-area-inset-bottom)); }
#meBar { display: flex; align-items: center; gap: 8px; background: var(--plum-900); border: 3px solid var(--ink); border-radius: 99px; padding: 3px 14px 3px 3px; box-shadow: 0 3px 0 var(--ink); }
#meBar .avatar { width: 34px; height: 34px; font-size: 17px; }
#meBar .sname { max-width: 14ch; }
#status { font: 400 clamp(18px, 4.6vw, 24px)/1.2 var(--display); text-align: center; min-height: 1.2em; text-shadow: 0 2px 0 var(--ink); }
#status.mine { color: var(--sun); }
#bidPicker { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; animation: pop .3s cubic-bezier(.2,.9,.3,1.4); }
.bidbtn { width: 56px; height: 56px; border-radius: 50%; background: var(--sun); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--hard); font: 400 26px/1 var(--display); transition: transform .08s, box-shadow .08s; }
.bidbtn:hover:not(:disabled) { transform: translateY(-3px) scale(1.06); }
.bidbtn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.bidbtn:disabled { background: var(--plum-500); color: var(--plum-900); box-shadow: none; opacity: .7; text-decoration: line-through; }
#hand { display: flex; justify-content: center; align-items: flex-end; min-height: calc(var(--cw) * 1.4 + 26px); padding-top: 26px; width: 100%; }
.hcard { background: none; border: 0; padding: 0; border-radius: calc(var(--cw) * .13); transform: translateY(var(--y)) rotate(var(--r)); transform-origin: 50% 120%; transition: transform .16s cubic-bezier(.2,.9,.3,1.4), filter .2s; position: relative; }
.hcard.can { cursor: pointer; }
.hcard.can .card { box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--sun), 0 12px 18px rgba(10, 0, 14, .45); }
.hcard.can:hover, .hcard.can:focus-visible { transform: translateY(calc(var(--y) - 24px)) rotate(var(--r)) scale(1.08); z-index: 5; }
.hcard.can:active { transform: translateY(calc(var(--y) - 34px)) rotate(var(--r)) scale(1.12); }
.hcard.dim { filter: brightness(.5) saturate(.6); }
.hcard:disabled { opacity: 1; }
.hcard.deal { animation: deal .5s cubic-bezier(.2,.9,.3,1.25) backwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes deal { from { transform: translateY(-55vh) rotate(200deg) scale(.4); opacity: 0; } }
.hcard.reveal { animation: reveal .5s ease-out backwards; animation-delay: calc(var(--i) * 60ms); }
@keyframes reveal { from { transform: translateY(var(--y)) rotate(var(--r)) rotateY(90deg); } }
#emotes { display: flex; gap: 2px; }
.emo { background: none; border: 0; font-size: 22px; width: 44px; height: 44px; border-radius: 50%; transition: transform .1s; }
.emo:hover { background: var(--plum-700); transform: scale(1.15); }
.emo:active { transform: scale(.9); }

/* ---------- Overlays ---------- */
#intro, #summary, #jokerAsk { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(15, 3, 18, .72); }
#intro { background: rgba(15, 3, 18, .55); }
.mission-card { width: min(340px, 86vw); background: var(--sun); color: var(--ink); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 9px 0 var(--ink), 0 30px 60px rgba(0, 0, 0, .6); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; text-align: center; transform: rotate(-3deg); animation: slam .55s cubic-bezier(.2,.9,.3,1.3); }
@keyframes slam { 0% { transform: scale(3) rotate(25deg); opacity: 0; } 60% { transform: scale(.94) rotate(-5deg); opacity: 1; } }
.m-round { font-weight: 900; font-size: 15px; }
.m-name { font: 400 clamp(40px, 12vw, 54px)/.95 var(--display); color: var(--chili); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.m-text { font-size: 18px; font-weight: 700; line-height: 1.35; }
.m-cards { font-size: 14px; font-weight: 900; background: var(--ink); color: var(--cream); border-radius: 99px; padding: 4px 12px; align-self: center; }
.sheet { width: min(360px, 100%); background: var(--plum-700); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 9px 0 var(--ink); padding: 22px; display: flex; flex-direction: column; gap: 12px; text-align: center; animation: pop .35s cubic-bezier(.2,.9,.3,1.3); max-height: 92dvh; overflow-y: auto; }
.sheet.wide { width: min(520px, 100%); }
.sheet h2 { font: 400 28px/1.1 var(--display); color: var(--sun); text-shadow: 0 3px 0 var(--ink); }
.over-kicker { font-weight: 900; }
.over-title { font-size: clamp(34px, 9vw, 46px) !important; }
table { width: 100%; border-collapse: collapse; font-weight: 700; font-variant-numeric: tabular-nums; }
th { font-size: 12px; font-weight: 900; opacity: .75; padding: 4px; }
td { padding: 9px 4px; border-top: 2px solid var(--plum-500); }
td:first-child, th:first-child { text-align: left; }
tr.you td { background: rgba(255, 200, 58, .14); }
td.bad { color: #ff8d7e; } td.good { color: var(--lime); }
td.tot { font: 400 20px/1 var(--display); white-space: nowrap; }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.fly { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; color: var(--chili); }
.bubble { position: absolute; font-size: 40px; transform: translate(-50%, -100%); animation: bubble 2s ease-out forwards; }
@keyframes bubble { 0% { scale: 0; } 15% { scale: 1.3; } 25% { scale: 1; } 100% { translate: 0 -70px; opacity: 0; } }
#game.burn::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 35; box-shadow: inset 0 0 140px 50px var(--chili); animation: burn .9s ease-out forwards; }
@keyframes burn { from { opacity: 1; } to { opacity: 0; } }
#game.burn #table { animation: shake .5s; }
#toast { position: fixed; left: 50%; top: 64px; transform: translate(-50%, -30px); opacity: 0; pointer-events: none; z-index: 50; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; box-shadow: var(--hard); padding: 10px 16px; font-weight: 700; max-width: min(440px, 92vw); text-align: center; transition: transform .25s cubic-bezier(.2,.9,.3,1.4), opacity .2s; }
#toast.on { transform: translate(-50%, 0); opacity: 1; }
#offline { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--chili); color: #fff; font-weight: 900; text-align: center; padding: 10px; }

@media (max-width: 560px) {
  .topbar { gap: 6px; }
  .chip { padding: 6px 10px; font-size: 13px; }
  .chip-mission { font-size: 15px; }
  #roundInfo { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 26px; }
  .seat-head { padding: 2px 8px 2px 2px; }
  .seat .avatar { width: 30px; height: 30px; font-size: 15px; border-width: 2px; }
  .sname { font-size: 12px; max-width: 7ch; }
  .stats { font-size: 12px; gap: 5px; }
  .seat .mini { --cw: 20px; height: 28px; }
  #felt { inset: 12% -6% 2%; }
  .emo { width: 40px; height: 40px; font-size: 20px; }
}
@media (max-height: 620px) { :root { --cw: clamp(52px, 13vh, 80px); } #emotes { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }