/* ==========================================================================
   Skribbl – Zeichenblatt, Holzplättchen fürs Wort, Rate-Chat
   ========================================================================== */
.sb { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 2px 8px 10px; }
/* Wort-Plättchen liegen frei auf dem Tisch (kein Balken); Platz bleibt reserviert, damit das Blatt nicht springt */
.sb-head { flex: none; display: flex; align-items: center; min-height: 40px; }
.sb-word { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sb-word .tiles { --t: 28px; gap: 3px; flex-wrap: wrap; justify-content: center; }
.sb-word .tile { animation: none; }
.sb-word .tile.fx-flipin { animation: fxFlipIn .55s var(--ease) both; }
.sb-word .tile.blank { background: var(--grain), linear-gradient(160deg, #e6d0a2, #d3b47c); color: transparent; }
.sb-word .tile.blank::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 22%; height: 2px; border-radius: 2px; background: rgba(44, 29, 16, .35); }
.sb-word .tile.blank::after { content: none; }
.sb-gap { width: 10px; }
.sb-sep { font: 800 20px var(--display); color: var(--ink-2); }
.sb-len { flex: none; font: 800 11px var(--text); color: var(--on-wood-3); align-self: flex-end; margin-bottom: 4px; }
/* Restzeit oben rechts auf dem Blatt */
.sb-clock { position: absolute; right: 8px; top: 8px; z-index: 4; pointer-events: none; }
.sb-clock:empty { display: none; }
.sb-clock span { display: inline-block; min-width: 46px; padding: 6px 10px; border-radius: 99px; font: 800 18px var(--display); font-variant-numeric: tabular-nums; color: var(--paper); background: var(--grain), var(--ink); }
.sb-clock.hot span { background: var(--grain), var(--red); animation: pulseHot 1s ease-in-out infinite; }
@keyframes pulseHot { 50% { transform: scale(1.08); } }
.sb-rail { flex: none; }
.rail-chip.guessed { background: var(--grain), #dcebd6; }
.rail-chip.guessed .val { color: var(--teal); }

/* Zeichenblatt */
.sb-board { flex: 1; min-height: 120px; display: grid; place-items: center; container-type: size; }
.sb-paper { position: relative; width: min(100cqw, 133.3cqh); aspect-ratio: 4 / 3; border-radius: 3px; background: #fdfaf1; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 8px rgba(0, 0, 0, .3), 0 18px 30px -12px rgba(0, 0, 0, .6); }
.sb-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 3px; touch-action: none; }
.sb.drawer .sb-paper canvas { cursor: crosshair; }
.sb-over { position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; padding: 10px; border-radius: 3px; background: rgba(43, 35, 30, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.sb-over.on { display: flex; animation: fadeIn .25s; }
.sb-msg { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--on-wood); font: 800 18px var(--display); text-align: center; }
.sb-choose { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.sb-choose small { font: 800 11px var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--on-wood-2); }
.sb-cards { display: flex; gap: 10px; justify-content: center; width: 100%; }
.sb-wcard { flex: 1 1 0; min-width: 0; max-width: 150px; height: min(64cqh, 190px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 6px; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--ink); background: var(--grain), var(--card); box-shadow: inset 0 0 0 4px #fff8ea, inset 0 0 0 5px var(--line-2), var(--shadow-1); font: 800 clamp(13px, 4.2cqw, 20px)/1.15 var(--display); word-break: break-word; hyphens: auto; transition: transform .25s var(--spring); }
.sb-wcard:hover { transform: translateY(-6px); }
.sb-wcard .dd { display: inline-flex; gap: 3px; }
.sb-wcard .dd i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--teal)); }
.sb-wcard.sb-d2 { --c: var(--mustard); } .sb-wcard.sb-d3 { --c: var(--red); }
.sb-reveal { width: 100%; display: flex; justify-content: center; }
.sb-rcard { width: min(100%, 340px); max-height: 100%; overflow: auto; padding: 12px 14px; border-radius: 8px; color: var(--ink); background: var(--grain), var(--fibers), var(--paper); box-shadow: var(--shadow-2); text-align: center; }
.sb-rcard small { font: 800 10px var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sb-rcard > b { display: block; margin: 2px 0 8px; font: 800 26px/1.1 var(--display); color: var(--red); }
.sb-gain > div { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-top: 1px solid var(--line); text-align: left; font: 700 17px/1.1 var(--hand); }
.sb-gain > div span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-gain em { font: 700 10px var(--text); font-style: normal; color: var(--ink-3); }
.sb-gain b { font: 800 15px var(--display); color: var(--teal); }
.sb-gain .zero { opacity: .5; } .sb-gain .zero b { color: var(--ink-3); }

/* Werkzeuge (nur Zeichner) */
.sb-tools { flex: none; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 480px; margin: 0 auto; }
.sb-tools:empty { display: none; }
.sb-pal { display: grid; grid-template-columns: repeat(9, minmax(0, 40px)); justify-content: space-between; gap: 5px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.sb-pal button { width: 100%; max-width: 34px; height: auto; aspect-ratio: 1; padding: 0; align-self: center; border: 0; border-radius: 50%; cursor: pointer; background: var(--c); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .4); transition: transform .2s var(--spring); justify-self: center; width: 100%; }
.sb-pal button.on { transform: scale(1.18); box-shadow: 0 0 0 2.5px #fff8ea, 0 0 0 4.5px var(--ink), 0 3px 6px rgba(0, 0, 0, .4); }
.sb-row { display: flex; gap: 6px; }
.sb-sizes, .sb-tbtn { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--grain), var(--paper); box-shadow: var(--shadow-1); }
.sb-tbtn { flex: 1; min-width: 0; justify-content: space-between; }
.sb-sizes button, .sb-tbtn button { flex: 0 1 38px; min-width: 28px; height: 38px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--ink-2); }
.sb-sizes button.on, .sb-tbtn button.on { background: var(--ink); color: var(--paper); }
.sb-sizes i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6); }
.sb-tbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Chat */
.sb-chat { flex: none; display: flex; flex-direction: column; gap: 6px; height: 34%; min-height: 150px; }
.sb-chat.hidden { display: none; }
.sb.drawer .sb-chat { height: 86px; min-height: 0; }
.sb-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); user-select: text; -webkit-user-select: text; }
.sb-log .m { display: flex; align-items: center; gap: 6px; font: 600 14px/1.3 var(--text); color: var(--on-wood); animation: cueIn .3s var(--spring); }
.sb-log .m .av { --s: 20px; flex: none; }
.sb-log .m > b { flex: none; font: 700 17px/1 var(--hand); }
.sb-log .m > span { min-width: 0; overflow-wrap: anywhere; }
.sb-log .m.sys { color: var(--on-wood-2); font-size: 12.5px; font-style: italic; justify-content: center; }
.sb-log .m.ok { align-self: center; padding: 3px 12px; border-radius: 99px; color: #f1fbf8; background: var(--grain), var(--teal); font: 700 13px var(--text); font-style: normal; }
.sb-log .m.ok b { color: #fff !important; }
.sb-log .m.close { align-self: center; padding: 3px 12px; border-radius: 99px; color: #2b1d08; background: var(--grain), var(--mustard); font: 700 13px var(--text); font-style: normal; }
.sb-log .m.secret > span { color: #9fd8c0; }
.sb-in { flex: none; display: flex; gap: 6px; }
.sb-in[hidden] { display: none; }
.sb-in input { flex: 1; min-width: 0; padding: 11px 14px; border: 0; border-radius: 10px; font: 700 16px var(--text); color: var(--ink); background: var(--grain), var(--paper); box-shadow: var(--shadow-1); outline: none; user-select: text; -webkit-user-select: text; }
.sb-in.guess input { box-shadow: 0 0 0 2.5px var(--mustard), var(--shadow-1); }
.sb-in .btn { flex: none; padding: 9px 13px; }
.sb-in .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

/* Lobby */
.sb-cfg .row { display: flex; align-items: center; justify-content: space-between; }
.sb-cfg .row > span { font: 800 10.5px var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.sb-cfg .row small { font: 800 13px var(--display); color: var(--ink-2); }
.sb-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.sb-wchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 3px; border-radius: 99px; background: rgba(43, 35, 30, .07); font: 700 17px/1 var(--hand); color: var(--ink); animation: popIn .3s var(--spring); }
.sb-wchip button { width: 22px; height: 22px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(43, 35, 30, .1); color: var(--ink-2); }
.sb-wchip button svg { width: 12px; height: 12px; }

/* Tisch-Bildschirm: Blatt links groß, Rate-Verlauf rechts */
.sb.table { display: grid; grid-template-columns: 1fr minmax(260px, 28%); grid-template-rows: auto auto 1fr; gap: 10px 18px; padding: 8px 20px 18px; }
.sb.table .sb-head { grid-column: 1 / -1; }
.sb.table .sb-rail { grid-column: 1 / -1; }
.sb.table .sb-board { grid-column: 1; grid-row: 3; }
.sb.table .sb-chat { grid-column: 2; grid-row: 3; height: auto; }
.sb.table .sb-tools { display: none; }
.sb.table .sb-word .tiles { --t: 46px !important; }
.sb.table .sb-log .m { font-size: 18px; } .sb.table .sb-log .m > b { font-size: 22px; } .sb.table .sb-log .m .av { --s: 28px; }
.sb.table .sb-clock span { font-size: 26px; padding: 8px 16px; }
.sb.table .sb-head { min-height: 56px; }
@media (max-height: 700px) { .sb-chat { min-height: 120px; } .sb-pal button { max-width: 28px; } }