/* Die Spielflächen benutzen die Farben ihres Materials auch im dunklen Browsermodus. */
.at-game {
  --at-dark: #292744;
  --at-stroke: #292744;
  --at-paper: #fff9e9;
  --at-shadow: #18274c;
  color: var(--at-dark);
  border: 3px solid var(--at-stroke);
  border-radius: 20px;
  overflow: clip;
  isolation: isolate;
  container-type: inline-size;
  font-family: 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif;
  box-shadow: 0 4px 0 var(--at-shadow);
}
.at-game *, .at-game *::before, .at-game *::after { box-sizing: border-box; }
.at-game .at-banner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: clamp(.9rem,2.2vw,1.55rem) clamp(1rem,3vw,2rem);
  background: none;
  color: inherit;
}
.at-banner-copy { position: relative; z-index: 1; min-width: 0; }
.at-game .at-banner h3 {
  color: inherit;
  font: 850 clamp(1.32rem,4cqi,2.25rem)/1.05 'Bricolage Grotesque', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
  margin: .23rem 0 0;
}
.at-game .at-banner p { margin: .4rem 0 0; max-width: 54ch; color: inherit; font-size: clamp(.83rem,1.9cqi,1rem); }
.at-step, .at-annotation {
  display: inline-block;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.play .at-art { display: block; width: clamp(76px,23%,165px); height: auto; flex: none; }
.at-game .spieleingabe { margin: 0; display: flex; flex-wrap: wrap; gap: .55rem; align-items: end; }
.at-game .spieleingabe label { flex: 1 1 11rem; min-width: 0; display: grid; gap: .35rem; color: inherit; font-size: .88rem; font-weight: 750; }
.at-game .spieleingabe input, .at-game .spieleingabe textarea {
  width: 100%; padding: .62rem .72rem;
  border: 2px solid var(--at-stroke); border-radius: 7px;
  background-color: #fffdf5; color: var(--at-dark); font-size: 1rem;
}
.at-game .spieleingabe textarea { resize: vertical; }
.play .at-game button { margin: 0; min-height: 42px; }
.at-game .spieleingabe button, .at-turn-controls button, .at-post-action button {
  border: 2px solid var(--at-stroke); border-radius: 9px;
  color: var(--at-dark); background: #ffcf6b; box-shadow: 0 3px 0 var(--at-stroke);
  font-weight: 800; padding: .55rem .9rem;
}
.at-game button:focus-visible, .at-game canvas:focus-visible {
  outline: none; filter: brightness(1.25);
}
.at-game input:focus-visible, .at-game textarea:focus-visible {
  outline: none;
}
.play .at-game button:enabled:active { transform: translateY(2px); box-shadow: none; }
.at-game .at-secondary { color: #393757; background: transparent; min-height: 36px; border: none; text-decoration: underline; }
.at-board-frame { min-width: 0; margin: 0; border: 2px solid var(--at-stroke); border-radius: 9px; background: #fff; overflow: clip; }
.at-sheet-surface { min-width: 0; position: relative; }
.play .at-game canvas.at-paper { display: block; width: 100%; max-width: 100%; height: auto; background: #fff; }
.at-pen-cursor { position: absolute; display: none; transform: translate(-50%, -50%); width: 14px; height: 14px; border: 2px solid #24243a; border-radius: 50%; box-shadow: 0 0 0 2px white; pointer-events: none; }
.at-pen-cursor[data-lowered=true] { background: #24243a; }
.at-key-guide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.at-paper:focus-visible ~ .at-pen-cursor { display: block; }
.at-paper:focus-visible ~ .at-key-guide { clip-path: none; inset-inline: .35rem; bottom: .35rem; width: auto; height: auto; padding: .3rem; color: #292744; background: #fff9ea; font-size: .7rem; }
.at-game .at-pencils {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem;
  padding: .45rem .65rem; border-top: 2px solid var(--at-stroke); background: #ebecf8;
}
.play .at-game .at-pencil {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-height: 40px; border: 1px solid transparent; border-radius: 6px; padding: .3rem .4rem;
  font-size: .77rem; color: var(--at-dark); background: transparent; outline: 0;
}
.play .at-game .at-pencil[aria-pressed=true] { border: 1px solid var(--at-stroke); background: #fff; box-shadow: 0 2px 0 var(--at-stroke); }
.play .at-game .at-pencil:focus-visible { outline: none; filter: brightness(1.25); }
.at-pencil i { display: inline-block; width: 20px; height: 10px; position: relative; background: var(--at-ink); border-radius: 2px; }
.at-pencil i::after { content: ''; position: absolute; left: -6px; top: 0; width: 7px; height: 10px; clip-path: polygon(100% 0,0 50%,100% 100%); background: var(--at-ink); }
/* Montagsmaler: tintenblauer Zeichentisch, Sticker und ein gemeinsamer Papierblock. */
.at-malen {
  background-color: #354a93;
  background-image: radial-gradient(circle at 6px 6px,#85a5df55 1.5px,transparent 1.8px), repeating-linear-gradient(145deg,transparent 0 55px,#4e64a433 56px 57px,transparent 58px 94px);
  background-size: 15px 15px, 138px 94px;
}
.at-malen .at-banner { background: linear-gradient(116deg,#fff9e9 0 75%,#536fb1 75.1%); border-bottom: 3px solid var(--at-stroke); }
.at-malen .at-step { color: #4e4878; }
.at-word-deck { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: clamp(.55rem,2cqi,1.3rem); padding: clamp(1.6rem,6cqi,3.8rem) clamp(.8rem,4cqi,2.5rem); }
.play .at-word-deck > * {
  display: grid; place-content: center; min-width: 0; min-height: clamp(75px,14cqi,126px);
  position: relative; border: 2px solid #292744; border-radius: 10px 9px 12px 8px;
  color: #292744; background: #ffe09a; padding: 1.4rem .55rem;
  box-shadow: 3px 4px 0 #273264; font-size: clamp(.93rem,2.65cqi,1.55rem); font-weight: 850;
  transform: rotate(-2deg); overflow-wrap: anywhere;
}
.play .at-word-deck > :nth-child(2) { background: #b9e5d6; transform: rotate(1.7deg); }
.play .at-word-deck > :nth-child(3) { background: #e1cbf5; transform: rotate(-.7deg); }
.at-word-deck > *::before, .at-word-deck > *::after { content:''; position:absolute; width:12px; height:12px; border: solid #29274455; }
.at-word-deck > *::before { left:7px; top:7px; border-width:1.5px 0 0 1.5px; }
.at-word-deck > *::after { right:7px; bottom:7px; border-width:0 1.5px 1.5px 0; }
.at-word-deck .at-word-back { background-image: repeating-linear-gradient(35deg,transparent 0 8px,#5a57902a 8px 10px); }
.play .at-word-deck button:hover:enabled { background: #fff5c8; }
.at-desk { display:grid; grid-template-columns: minmax(122px,.27fr) minmax(0,1fr); gap: .7rem; padding: clamp(.65rem,1.6cqi,1.05rem); align-items:start; }
.at-work { grid-column:2;grid-row:1; min-width:0; }
.at-side { grid-column:1;grid-row:1;min-width:0; }
.at-malen .at-board-frame { box-shadow: 0 3px 0 #24336a; }
.at-roster { overflow: hidden; background: #f9f7ed; border: 2px solid #292744; border-radius: 9px; }
.at-roster h4 { margin:0; padding:.5rem .65rem; color:#292744; background: #ffdc79; border-bottom: 2px solid #292744; font-size: .82rem; }
.at-roster ul { margin:0; padding:0; list-style:none; }
.at-roster li { display:flex; gap:.4rem; align-items:center; padding:.46rem .45rem; min-width:0; }
.at-roster li + li { border-top: 1px dashed #c7c0bb; }
.at-face { position:relative; display:block; flex:none; width:25px; height:25px; border:1.5px solid #322d46; border-radius:48% 52% 42% 45%; background:#efa68f; transform:rotate(-5deg); }
.at-face[data-tint="1"] { background:#8bc9b5; transform:rotate(6deg); border-radius:40% 44% 46% 41%; }
.at-face[data-tint="2"] { background:#bfade6; } .at-face[data-tint="3"] { background:#edc86b; }
.at-face i { position:absolute; top:7px; left:5px; width:3px; height:4px; border-radius:50%; background:#292744; box-shadow:9px 0 #292744; }
.at-face b { position:absolute; top:12px; left:8px; width:8px; height:5px; border-bottom:1.6px solid #292744; border-radius:50%; }
.at-roster-name { display:grid; min-width:0;line-height:1.2; }
.at-roster-name strong { font-size:.79rem; overflow-wrap:anywhere; }
.at-roster-name small { font-size:.72rem;color:#514f68; }
.at-roster li[data-role=solved] .at-roster-name small { color:#236650; }
.at-malen .at-malen-status { color:#fff; font-size:.79rem;line-height:1.4; margin:.55rem .1rem 0; overflow-wrap:anywhere; }
.at-malen .at-guess-entry { grid-column:2; background:#f5f2e7; border:2px solid #292744; border-radius:9px; padding:.7rem; }
.at-turn-controls { text-align:right; padding:0 .85rem 1rem; }
@container (min-width:850px) {
  .at-has-guesses { grid-template-columns:minmax(125px,.29fr) minmax(0,1fr) minmax(145px,.36fr); }
  .at-malen .at-has-guesses .at-guess-entry { grid-column:3;grid-row:1; }
}
/* Bilderpost: Pflaumenfarbener Ringblock mit stationenweise wandernden Briefseiten. */
.at-post { --at-stroke:#472342; --at-dark:#36263a; --at-shadow:#432140; background:#b74175; }
.at-post .at-banner { color:#fff4da; background:#503353; padding-bottom:1.65rem; }
.at-post .at-banner::after { content:''; position:absolute; bottom:.2rem; left:1.5rem; right:1.5rem; border-bottom:2px dashed #b792a3; }
.at-post .at-step { color:#f5cdaa; }
.at-post-studio, .at-album { padding: .9rem clamp(.6rem,2.4cqi,1.6rem) 1.05rem; }
.at-route { display:flex; align-items:center; justify-content:center; margin:0 auto .8rem; padding:0; list-style:none; gap:.35rem; flex-wrap:wrap; }
.at-route li { display:flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:750; color:#fff4f4; }
.at-route li + li::before { content:'→'; }
.at-route li[aria-current] { color:#fff0a5; text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:2px; }
.at-letter { position:relative; padding: clamp(1.5rem,3cqi,2.2rem) clamp(.7rem,2.6cqi,1.7rem) 1.1rem; background:#fff8e8; border:2px solid #452741; border-radius:10px; box-shadow:1px 4px 0 #e3c1bc,2px 6px 0 #442640; }
.at-letter::before, .at-letter::after { content:''; position:absolute; top:-9px; width:9px; height:21px; border-radius:7px; background:linear-gradient(90deg,#665c6b,#ebe2da 45%,#787382 90%); border:1px solid #3b2c3a; box-shadow:0 2px 0 2px #594551; }
.at-letter::before { left:21%; } .at-letter::after { right:21%; }
.at-post .at-annotation { color:#77405e; }
.at-post blockquote.at-post-prompt { margin:.35rem 0 .8rem; color:#3f2744; font:700 clamp(1.02rem,3cqi,1.6rem)/1.22 Georgia,serif; overflow-wrap:anywhere; }
.at-post .at-board-frame { display:flex; flex-direction:row-reverse; background:#eecedb; border-color:#583453; }
.at-post .at-sheet-surface { flex:1; width:0; }
.at-post .at-pencils { width:72px; flex-direction:column; justify-content:center; align-items:stretch; gap:.25rem; flex-wrap:nowrap; padding:.35rem; border-top:none; border-right:2px solid #593951; background:#efdae7; }
.at-post .at-pencil { flex-direction:column; font-size:.66rem; padding:.3rem .1rem; }
.at-post-action { margin-top:.7rem; text-align:right; }
.at-post .spieleingabe { display:grid; justify-items:stretch; }
.at-post .spieleingabe button { justify-self:end; }
.at-post .spieleingabe input, .at-post .spieleingabe textarea { padding:.5rem .65rem; border-color:#baa7b0; font: 550 1.12rem/1.8 Georgia,serif; background:repeating-linear-gradient(to bottom,#fffaf0 0 30px,#ded9d6 31px,#fffaf0 32px); }
.at-post .at-post-status { padding:0; margin:.85rem .1rem 0; color:#fffaf3; text-align:center; font-size:.83rem; }
.at-photo { display:grid; place-items:center; padding:.4rem; margin-bottom:1rem; }
.at-post .at-photo .at-paper { width:min(100%,420px); border:6px solid white; outline:1px solid #c1a2b6; box-shadow:1px 3px 5px #62435230; transform:rotate(-.6deg); }
.at-chain { margin:.65rem 0 1.15rem; }
.at-chain h4 { display:inline-block; margin:0 0 -1px .5rem; padding:.35rem .75rem; border-radius:6px 6px 0 0; color:#392741; background:#f5cd89; border:2px solid #452741; font-size:.88rem; }
.at-album-strip { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:0; align-items:stretch; overflow:hidden; border:2px solid #452741; background:#fffae9; border-radius:8px; box-shadow:0 3px 0 #653051; }
.at-album-page { margin:0; padding:1rem .8rem; min-width:0; background:linear-gradient(95deg,#f3e4cf 0,#fff8e6 6%,#fffaed 95%,#efdecd); }
.at-album-page + .at-album-page { border-inline-start:1px dashed #b98e9e; }
.at-album-page figcaption { display:flex; flex-direction:column; margin-bottom:.65rem; }
.at-album-page figcaption small { color:#8a4c61; font-size:.7rem; font-weight:bold; }
.at-album-page figcaption strong { font-size:.88rem; }
.at-album-page p { font:600 clamp(1rem,2.4cqi,1.25rem)/1.35 Georgia,serif; margin:.5rem 0; overflow-wrap:anywhere; }
.at-album-page .at-paper { border:4px solid white; outline:1px solid #cfbfb1; transform:rotate(-1deg); }
/* Ein guter Hinweis: Papierständer auf einem hellen Spieltisch, leere Ständer bleiben verdeckt. */
.at-hinweis { --at-stroke:#20483f; --at-dark:#253b37; --at-shadow:#153d37; background: #f8f4db; }
.at-hinweis .at-banner { color:#fff7d9; background:radial-gradient(ellipse at 84% 70%,#367e72,transparent 45%),#205a52; border-bottom:3px solid #123e3a; }
.at-hinweis .at-step { color:#ffdf97; }
.at-felt {
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:1.15rem;
  padding:clamp(1.25rem,4cqi,2.8rem) clamp(1rem,4cqi,2.25rem);
  border-inline:12px solid transparent;
  background:linear-gradient(110deg,#fff9e7,#f3ecd5) padding-box,
    repeating-conic-gradient(from 45deg at 50% 50%,#dfae7b 0 90deg,#f3e3c1 90deg 180deg,#82bbaa 180deg 270deg,#b6a7cd 270deg 360deg) border-box;
  background-size:auto,26px 26px;
}
.at-term-card, .at-answer {
  width:min(100%,320px); position:relative; display:grid; justify-items:center; text-align:center;
  padding:.65rem 1rem .75rem; border:2px solid #77543b; border-radius:16px 8px 15px 9px;
  background: repeating-conic-gradient(from 12deg at 50% 54%,#ffd98f 0 12deg,#ffe8b4 12deg 27deg);
  color:#3c312d; box-shadow:2px 3px 0 #cfae76;
}
.at-term-card small, .at-answer > span { text-transform:uppercase; letter-spacing:.065em; font-weight:750; font-size:.7rem; }
.at-term-card strong, .at-answer strong { font:800 clamp(1.3rem,4cqi,2.4rem)/1.1 'Trebuchet MS',system-ui,sans-serif; letter-spacing:-.045em; overflow-wrap:anywhere; }
.at-answer small { margin-top:.3rem; }
.at-lineup { display:flex;flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:clamp(.8rem,3.4cqi,1.8rem); width:100%; }
.at-easel { --at-marker:#24757b; position:relative; padding:0 7px 8px 0; flex:1 1 145px; max-width:265px; min-width:0; }
.at-easel[data-tone="1"] { --at-marker:#b14960; } .at-easel[data-tone="2"] { --at-marker:#5d53a0; }
.at-easel[data-tone="3"] { --at-marker:#518246; }
.at-wipe-board {
  position:relative; z-index:1;
  min-height:clamp(78px,14cqi,120px); display:grid; align-content:center; justify-items:center; gap:.3rem;
  padding:1rem .7rem; text-align:center; border:1.8px solid #656860; border-radius:8px 9px 2px 3px;
  background:linear-gradient(112deg,#fffef9,#fff 60%,#edf0e8); color:#3e4641; box-shadow:inset 0 0 0 3px #edf0e6;
}
.at-easel::before { content:''; position:absolute; z-index:0; inset:8px 0 6px 10%; background:#d5d9c7; border:1.8px solid #67695e; transform:skewX(5deg); border-radius:0 10px 2px 0; }
.at-wipe-board > strong { font:italic 700 clamp(1.15rem,3.65cqi,2rem)/1.22 'Avenir Next','Trebuchet MS',sans-serif; letter-spacing:-.04em; overflow-wrap:anywhere; max-width:100%; }
.at-wipe-board > small { font-size:.72rem;color:#486359; }
.at-easel-ledge { position:absolute; z-index:2; bottom:0; left:-2px; right:-2px; height:14px; border:1.5px solid #747769; border-radius:3px 3px 6px 6px; background:linear-gradient(#e6e9d9 0 40%,#bac3ae 45% 100%); box-shadow:0 5px 6px #70664530; }
.at-easel-ledge i { display:block; position:absolute; right:10%; bottom:7px; height:8px; width:48px; border:1px solid #777d6b; border-radius:3px; background:linear-gradient(to right,#eeeede 0 68%,var(--at-marker) 68% 100%); transform:rotate(-2deg); }
.at-write-easel { width:min(100%,540px); max-width:none; }
.at-write-easel .at-wipe-board { padding:1rem clamp(.7rem,2.4cqi,1.8rem) 1.4rem; }
.at-write-easel .spieleingabe { display:grid; grid-template-columns:minmax(0,1fr) auto; justify-items:stretch; width:100%; text-align:left; }
.at-write-easel .spieleingabe input { border:0; border-bottom:2px solid #9aaba3; border-radius:0; font:italic 750 1.22rem/1.3 'Avenir Next','Trebuchet MS',sans-serif; background:transparent; }
.at-hidden-row { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; max-width:100%; }
.at-board-back { display:block; width:clamp(38px,9cqi,82px); aspect-ratio:1.55; position:relative; border:1.5px solid #b4b3a1; border-bottom-width:4px; border-radius:4px; background:repeating-linear-gradient(135deg,#e5e5d4 0 6px,#f0efde 6px 10px); transform:rotate(-3deg); }
.at-board-back:nth-child(even) { transform:rotate(3deg); }
.at-board-back[data-received=true] { border-color:#357260; background:repeating-linear-gradient(135deg,#8ebba7 0 6px,#a3c4b3 6px 10px); }
.at-board-back[data-received=true]::after { content:''; position:absolute; width:25%; height:30%; top:29%; left:39%; border:solid #174b40; border-width:0 0 3px 3px; transform:rotate(-45deg); }
.at-hinweis .at-collection-count, .at-hinweis .at-removed { text-align:center; color:#3a554c; font-size:.85rem; margin:0; }
.at-hinweis .at-removed { flex:1 0 100%; color:#7d3942; font-weight:700; }
.at-answer-form { width:min(100%,470px); border-top:1px dashed #76988a; padding-top:1rem; }
@container (max-width:570px) {
  .at-game .at-banner { padding:.85rem .75rem; gap:.1rem; }
  .at-game .at-banner p { font-size:.81rem; }
  .at-malen .at-banner { background:linear-gradient(116deg,#fff9e9 0 78%,#536fb1 78.2%); }
  .at-word-deck { grid-template-columns:1fr; padding:1.25rem 1rem 1.45rem; gap:.75rem; }
  .play .at-word-deck > * { min-height:54px; padding:.7rem; font-size:1.05rem; }
  .at-desk,.at-has-guesses { display:flex; flex-direction:column; padding:.45rem; gap:.5rem; }
  .at-work,.at-side,.at-malen .at-guess-entry { width:100%; }
  .at-side { order:3; }
  .at-roster { background:#e5e9f9; }
  .at-roster h4 { padding:.25rem .5rem; }
  .at-roster ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .at-roster li,.at-roster li+li { padding:.28rem .42rem; border:none; }
  .at-face { width:22px;height:22px; }
  .at-malen .at-malen-status { margin:.3rem .2rem; font-size:.78rem; }
  .at-game .at-pencils,.at-post .at-pencils { flex-direction:row; align-items:center; width:auto; gap:.2rem; padding:.3rem; border:none; border-top:2px solid var(--at-stroke); }
  .play .at-game .at-pencil { flex-direction:column; gap:.18rem; font-size:.73rem; padding:.26rem .34rem; min-width:48px; min-height:44px; }
  .at-post .at-board-frame { display:block; }
  .at-post .at-sheet-surface { width:100%; }
  .at-album-strip { grid-template-columns:1fr; }
  .at-album-page { padding:.85rem; }
  .at-album-page + .at-album-page { border-inline-start:none;border-top:1px dashed #b98e9e; }
  .at-album-page figcaption { flex-direction:row; gap:.45rem; align-items:center; }
  .at-felt { border-inline-width:6px; padding:1rem .65rem 1.2rem; gap:.8rem; }
  .at-write-easel .spieleingabe { grid-template-columns:1fr; }
  .at-write-easel .spieleingabe button { justify-self:center; }
  .at-lineup .at-easel { flex:1 1 110px; }
}
@media(forced-colors:active) {
  .at-game, .at-banner, .at-game button, .at-wipe-board,.at-board-frame { border-color:CanvasText; }
  .at-face i, .at-face b { forced-color-adjust:none; }
  .play .at-game .at-pencil[aria-pressed=true] { border:2px solid Highlight; }
  .at-game .at-art { opacity:.85; }
}

/* Der gemeinsame Spielraum hält Zeichenfläche, Mitspieler und Nachrichten im Blick. */
.at-malen .at-banner { min-height:58px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.7rem; padding:.4rem .8rem; background:#fff8e5; align-items:center; }
.at-malen .at-art { display:none; }
.at-malen .at-banner h3 { font-size:clamp(1.1rem,2cqi,1.5rem); margin:.08rem 0 0; }
.at-malen .at-step { font-size:.66rem; }
.at-word-mask { grid-column:2;grid-row:1;white-space:pre-wrap;overflow-wrap:anywhere;letter-spacing:.17em;font:750 clamp(.85rem,2.3cqi,1.5rem)/1.15 ui-monospace,monospace;color:#233251; }
.at-draw-clock { grid-column:3;grid-row:1;border-radius:16px;min-width:58px;padding:.3rem .55rem;background:#344a8f;color:white;font-weight:800;text-align:center;font-variant-numeric:tabular-nums; }
.at-draw-clock[data-urgent=true] { background:#904352; }
.at-scribble-layout { display:grid; grid-template-columns:minmax(106px,.24fr) minmax(0,1fr) minmax(178px,.42fr); grid-template-areas:'people drawing chat'; gap:.45rem; padding:.45rem;align-items:stretch; }
.at-scribble-layout .at-side { grid-area:people; }
.at-scribble-layout .at-work { grid-area:drawing;display:grid;align-content:start; min-width:0; }
.at-chat { grid-area:chat; display:flex; flex-direction:column; align-self:stretch; min-width:0; min-height:0; padding:0 .45rem .4rem; overflow:hidden; border:2px solid #292744; border-radius:8px; background:#fffaf0; color:#28283b; }
.at-chat h4 { margin:0 -.45rem; padding:.4rem .55rem; background:#c5dafa;border-bottom:1px solid #353753;font-size:.85rem; }
.at-chat-list { flex:1 1 80px; min-height:52px; overflow:auto; scrollbar-gutter:stable; overscroll-behavior:contain; list-style:none; padding:0;margin:.2rem 0; }
.at-chat-list li { padding:.24rem .12rem; font-size:.81rem; line-height:1.33; overflow-wrap:anywhere; }
.at-chat-list li:nth-child(even) { background:#f2f0e8; }
.at-chat-list li[data-chat-kind=solved] { color:#21624f; }
.at-chat-list li[data-chat-kind=reveal] { color:#674270; }
.at-chat-empty,.at-readonly { color:#555568; font-size:.75rem; }
.at-chat .spieleingabe { margin:0; flex-shrink:0; display:grid; grid-template-columns:1fr; gap:.28rem; padding-top:.25rem; border-top:1px solid #d6d1c3; }
.at-chat .spieleingabe label { font-size:.72rem; gap:.1rem; }
.at-chat .spieleingabe input { padding:.28rem .4rem; min-height:32px; }
.at-chat .spieleingabe button,.at-malen .at-secondary { min-height:30px; font-size:.75rem; padding:.25rem .48rem; }
.at-chat .at-secondary { align-self:end; }
.at-scribble-layout .at-pencils { gap:.18rem; padding:.2rem; }
.at-scribble-layout .at-pencil { min-height:32px; font-size:.7rem; padding:.2rem .35rem; }
.at-widths { display:inline-flex; gap:.1rem; padding-inline:.25rem; border-inline:1px solid #c1bfd4; }
.at-widths button { display:grid; place-items:center; padding:.16rem; width:27px; border:1px solid transparent; background:transparent; }
.play .at-widths button,.play .at-scribble-layout [data-eraser],.play .at-scribble-layout [data-undo] { min-height:30px; font-size:.68rem; }
.at-widths i { display:block; border-radius:50%;background:#28354a; }
.at-scribble-layout [data-eraser],.at-scribble-layout [data-undo] { padding:.2rem .35rem; }
.at-scribble-layout .at-word-deck { grid-template-columns:1fr; gap:.5rem;padding:1rem; }
.at-scribble-layout .at-word-deck>* { min-height:44px; padding:.6rem; }
.at-scribble-layout .at-turn-controls { padding:.35rem 0; }
@container (max-width:850px) {
  .at-scribble-layout {display:grid;grid-template-columns:minmax(0,1.4fr) minmax(165px,.8fr);grid-template-areas:'people people' 'drawing chat';}
  .at-scribble-layout .at-side { display:flex; align-items:center;gap:.4rem; min-width:0; }
  .at-scribble-layout .at-roster { flex:1; }
  .at-scribble-layout .at-roster h4 { display:none; }
  .at-scribble-layout .at-roster ul { display:flex; flex-wrap:wrap; }
  .at-scribble-layout .at-roster li {padding:.2rem .4rem;border:0; }
  .at-scribble-layout .at-roster-name { display:flex; align-items:center;gap:.2rem; }
  .at-scribble-layout .at-face { width:18px;height:17px;}
  .at-scribble-layout .at-face i {top:4px;left:2px;} .at-scribble-layout .at-face b {top:7px;left:5px;}
  .at-scribble-layout .at-malen-status {margin:0;font-size:.7rem;}
}
@container (max-width:530px) {
  .at-malen .at-banner { min-height:44px;gap:.3rem;padding:.25rem .4rem; }
  .at-malen .at-banner h3 { font-size:.95rem; }
  .at-malen .at-step {font-size:.58rem;}
  .at-word-mask { font-size:.78rem;letter-spacing:.04em;}
  .at-draw-clock {min-width:40px;padding:.18rem .35rem;font-size:.76rem;}
  .at-scribble-layout {grid-template-columns:1fr;grid-template-areas:'drawing' 'chat' 'people';gap:.25rem;padding:.3rem;}
  .at-chat { display:grid;grid-template-columns:1fr auto;grid-template-areas:'title title' 'list list' 'form pass';align-items:end;padding:0 .35rem .2rem; }
  .at-chat h4 {grid-area:title;padding:.18rem .5rem;font-size:.76rem;}
  .at-chat-list { grid-area:list; min-height:32px;max-height:68px; margin:.15rem 0; }
  .at-chat .spieleingabe {grid-area:form;display:flex;gap:.22rem;flex-wrap:nowrap;border:0;}
  .at-chat .spieleingabe label { flex:auto;font-size:.66rem; }
  .at-chat .spieleingabe button { flex-shrink:0; }
  .at-chat .at-secondary {grid-area:pass;}
  .at-chat .at-readonly {grid-column:1/-1;font-size:.66rem;}
  .at-scribble-layout .at-side {order:0;}
  .at-scribble-layout .at-roster-name small {display:none;}
  .at-scribble-layout .at-pencil {min-width:36px;min-height:34px;font-size:.67rem;}
}
#main[data-room-status="playing"][data-game="malen"] .at-malen {
  height:100%; min-height:0; display:flex; flex-direction:column; border:0; border-radius:0; box-shadow:none;
}
#main[data-room-status="playing"][data-game="malen"] .at-scribble-layout {
  flex:1; min-height:0; align-content:stretch; grid-template-rows:minmax(0,1fr); gap:clamp(.4rem,.8vw,.85rem);
  padding:clamp(.4rem,1vw,.85rem); grid-template-columns:minmax(120px,.25fr) minmax(0,1fr) minmax(190px,.42fr);
}
#main[data-game="malen"] .at-scribble-layout .at-work {
  min-height:0; display:flex; flex-direction:column; justify-content:center;
}
#main[data-game="malen"] .at-board-frame {
  display:flex; flex-direction:column; max-height:100%; background:#f7f7ff; border-radius:.8rem;
}
#main[data-game="malen"] .at-sheet-surface { min-height:0; display:grid; place-items:center; }
#main[data-game="malen"] .at-sheet-surface:has(canvas:focus-visible) { isolation:isolate; }
#main[data-game="malen"] .at-sheet-surface .at-paper { width:100%; max-height:calc(100dvh - 215px); height:auto; object-fit:contain; }
#main[data-game="malen"] .at-pencils { flex:none; }
#main[data-game="malen"] .at-chat {min-height:0; max-height:100%;}
#main[data-game="malen"] .at-side {max-height:100%;overflow-y:auto;}
#main[data-game="malen"] .at-chat-list {flex:1 1 0; min-height:32px;}
@media(max-width:850px) and (orientation:portrait) {
  #main[data-room-status="playing"][data-game="malen"] .at-scribble-layout {
    grid-template-columns:1fr; grid-template-areas:'people' 'drawing' 'chat';
    grid-template-rows:auto minmax(0,1.65fr) minmax(140px,1fr); padding:.35rem; gap:.3rem;
  }
  #main[data-game="malen"] .at-scribble-layout .at-work {container-type:size; align-items:center;}
  #main[data-game="malen"] .at-board-frame {width:min(100%,calc((100cqh - 62px)*1.66667)); min-width:min(100%,215px);}
  #main[data-game="malen"] .at-sheet-surface .at-paper {max-height:none;}
  #main[data-game="malen"] .at-chat {display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:'title title' 'list list' 'form pass';}
  #main[data-game="malen"] .at-chat h4 {grid-area:title}
  #main[data-game="malen"] .at-chat-list {grid-area:list;min-height:0;max-height:none;align-self:stretch;}
  #main[data-game="malen"] .at-chat .spieleingabe {grid-area:form;display:flex;}
  #main[data-game="malen"] .at-chat .at-secondary {grid-area:pass; align-self:end;}
  #main[data-game="malen"] .at-chat .at-readonly {grid-area:form;}
}
#main[data-room-status="playing"][data-game="malen"] .at-scribble-layout .at-work {container-type:size;align-items:center;}
#main[data-room-status="playing"][data-game="malen"] .at-board-frame {width:min(100%,calc((100cqh - 76px)*1.66667));}
#main[data-room-status="playing"][data-game="malen"] .at-sheet-surface .at-paper {width:100%;height:auto;max-height:none;object-fit:fill;}
#main[data-game="malen"] .at-work .at-word-deck {width:min(100%,540px);}
#main[data-game="malen"] .at-work .at-turn-controls {align-self:end;}

.at-malen .at-mask-info {grid-column:2;grid-row:1;display:grid;justify-items:center;gap:.1rem;min-width:0;}
.at-mask-info .at-word-mask {grid-column:auto;grid-row:auto;}
.at-mask-info small {font-size:.69rem;line-height:1.1;font-weight:700;color:#565272;}