/* ==========================================================================
   Gartic Phone – Zettel (Sätze), Zeichenblatt + Malkasten wie Skribbl, Album zum Durchblättern
   ========================================================================== */
.gp { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 2px 8px 10px; }
.gp-rail { flex: none; }
.gp-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gp-main .sb-board { width: 100%; }
.gp-tools:empty { display: none; }

/* Zettel mit einem Satz (Vorlage zum Zeichnen, Seiten im Album) */
.gp-slip { flex: none; display: flex; align-items: center; gap: 10px; max-width: min(100%, 560px); padding: 10px 16px 10px 10px; border-radius: 4px; color: var(--ink); background: var(--grain), var(--fibers), var(--card); box-shadow: var(--shadow-1); }
.gp-slip .av { flex: none; }
.gp-slip span { font: 700 24px/1.15 var(--hand); overflow-wrap: anywhere; }
.gp-slip.prompt { margin-top: 2px; }

/* Schreibkarte */
.gp-card { position: relative; flex: none; width: 100%; max-width: 560px; padding: 14px 16px; border-radius: 8px; }
.gp-card.solo { margin: auto 0; padding: 26px 18px 22px; }
.gp-card .sb-clock { right: 8px; top: -18px; }
.gp-hand { display: block; width: 100%; margin: 0; padding: 4px 2px; border: 0; resize: none; background: repeating-linear-gradient(transparent 0 37px, var(--line-2) 37px 38px); font: 700 28px/38px var(--hand); color: var(--ink); outline: none; user-select: text; -webkit-user-select: text; }
.gp-hand::placeholder { color: var(--ink-3); }

/* Zuschauer/Tisch: wer ist schon fertig? */
.gp-wait { margin: auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; max-width: 760px; }
.gp-who { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--on-wood); font: 700 20px/1 var(--hand); opacity: .55; transition: opacity .3s; }
.gp-who.ok { opacity: 1; }
.gp-who.ok .av { box-shadow: 0 0 0 3px var(--teal); border-radius: 50%; }

/* Album */
.gp-album { width: 100%; max-width: 620px; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.gp-pages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 4px 20px; scrollbar-width: thin; }
.gp-page { width: 100%; display: flex; justify-content: center; }
.gp-page:nth-child(even) .gp-slip { align-self: flex-end; }
.gp-pic { position: relative; width: min(100%, 460px); aspect-ratio: 4 / 3; border-radius: 3px; background: #fdfaf1; box-shadow: 0 4px 8px rgba(0, 0, 0, .3), 0 18px 30px -12px rgba(0, 0, 0, .6); }
.gp-pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 3px; }
.gp-pic > .av { position: absolute; left: -8px; top: -8px; box-shadow: 0 2px 5px rgba(0, 0, 0, .4); border-radius: 50%; }

.gp-foot { flex: none; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.gp-foot .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Tisch-Bildschirm */
.gp.table { padding: 8px 24px 20px; }
.gp.table .gp-who { font-size: 28px; }
.gp.table .gp-album { max-width: 900px; }
.gp.table .gp-slip span { font-size: 36px; }
.gp.table .gp-pic { width: min(100%, 600px); }
.gp.watch[data-phase="work"] .gp-rail { display: none; }