/* 그림 맞히기 화면 (스케치북 느낌: 크림색 종이, 진한 테두리, 스티커 그림자) */
:root {
  --ink: #2f3550; --muted: #7a809c; --paper: #fff8e7; --line: #2f3550; --soft: #f3f0ff;
  --pink: #ff7aa2; --violet: #8b7cf6; --mint: #5fdc9a; --sky: #5fb8ff; --sun: #ffd23d;
  --hand: "Gaegu", "Pretendard", sans-serif;
}
.kit-root { --kit-accent: #8b7cf6; --kit-accent2: #ff7aa2; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; color: var(--ink); word-break: keep-all;
  background-color: var(--paper);
  background-image: radial-gradient(circle, #e9dcbc 1.2px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-tap-highlight-color: transparent;
}
body.in-play { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }

/* 공통 버튼 (스티커 모양) */
.btn { border: 2.5px solid var(--line); background: #fff; border-radius: 16px; padding: 11px 16px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 var(--line); transition: transform .08s, box-shadow .08s; color: var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--pink); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; border-style: dashed; color: var(--muted); }
.btn.big { padding: 15px 14px; font-size: 18px; border-radius: 18px; }

/* ---------- 첫 화면 ---------- */
.home { max-width: 520px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0 6px; }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand h1 { margin: 0; font-family: var(--hand); font-size: 30px; letter-spacing: -.5px; white-space: nowrap; line-height: 1; }
.brand-ic { width: 30px; height: 30px; border-radius: 9px; border: 2.5px solid var(--line); background: var(--sun); position: relative; flex: none; transform: rotate(-6deg); }
.brand-ic::after { content: ""; position: absolute; left: 5px; right: 5px; top: 11px; height: 4px; border-radius: 3px; background: var(--pink); box-shadow: 0 -6px 0 var(--sky); }
.hero { margin: 8px 0 6px; padding: 12px 10px 14px; border: 2.5px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 5px 0 var(--line); text-align: center; }
.hero-svg { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
.hero-svg .bub { animation: bub 3.6s infinite both; transform-box: fill-box; transform-origin: left center; }
.hero-svg .b2 { animation-delay: .5s; } .hero-svg .b3 { animation-delay: 1s; }
@keyframes bub { 0%, 8% { opacity: 0; transform: scale(.6); } 16%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.hero-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); font-weight: 600; }
.menu { display: grid; gap: 12px; margin-top: 14px; }
.menu-group { padding: 12px; border-radius: 22px; background: #ffe9f0; border: 2.5px solid var(--line); }
.menu-group h2 { margin: 0 0 10px 4px; font-family: var(--hand); font-size: 24px; line-height: 1; }
.menu-group h2 small { font-family: "Pretendard", sans-serif; font-size: 13px; color: var(--muted); font-weight: 800; margin-left: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn.tile { display: grid; gap: 3px; text-align: left; padding: 13px 14px; border-radius: 18px; }
.btn.tile b { font-size: 17px; }
.btn.tile small { font-size: 12.5px; color: var(--muted); font-weight: 700; }
#practiceBtn { background: #e3f6ff; } #shopBtn { background: #fff4c9; }
.steps { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.steps li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .7); border: 2px dashed #d8cfb8; font-size: 14px; font-weight: 700; }
.steps b { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; font-size: 14px; }

/* ---------- 게임 화면 배치 (휴대폰: 위에서 아래로) ---------- */
.play {
  position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hud" "stage" "tools" "players" "chat";
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 6px; padding: max(6px, env(safe-area-inset-top)) 6px calc(6px + env(safe-area-inset-bottom));
}
.hud { grid-area: hud; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 6px; border-radius: 16px; background: #fff; border: 2.5px solid var(--line); }
.stage { grid-area: stage; display: grid; place-items: center; min-height: 0; min-width: 0; }
.tools { grid-area: tools; }
.players { grid-area: players; min-width: 0; }
.chat { grid-area: chat; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; min-height: 0; }

.hud-btn { flex: none; border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 6px 9px; font-weight: 900; font-size: 13px; cursor: pointer; }
.hud-btn.save { background: var(--mint); color: #fff; display: none; }
.hud-round { flex: none; display: flex; align-items: baseline; gap: 1px; font-weight: 900; }
.hud-round b { font-size: 20px; color: var(--violet); }
.hud-round small { font-size: 11px; color: var(--muted); }
.hud-word { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; text-align: center; }
.hw-title { font-family: var(--hand); font-size: 26px; }
.hw-wait { font-size: 14px; font-weight: 800; color: var(--muted); }
.hw-wait b { color: var(--ink); }
.hw-label { font-size: 11px; font-weight: 900; padding: 2px 7px; border-radius: 99px; background: var(--soft); color: var(--violet); }
.hw-answer { font-family: var(--hand); font-size: 28px; line-height: 1; letter-spacing: 1px; }
.hw-answer.ok { color: #1f9b5d; }
.hw-boxes { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.hw-boxes i { font-style: normal; width: 30px; height: 32px; border-radius: 8px; border: 2px solid var(--line); border-bottom-width: 4px; display: grid; place-items: center; font-weight: 900; font-size: 18px; background: #fffdf5; }
.hw-boxes i.on { background: #fff4c9; animation: pop .3s; }
.hw-len { font-size: 11px; font-weight: 800; color: var(--muted); }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.15); } }
.hud-timer { flex: none; position: relative; width: 42px; height: 42px; }
.hud-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tr-bg { fill: #fff; stroke: #eee6d2; stroke-width: 5; }
.tr-fg { fill: none; stroke: var(--violet); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 106.8; transition: stroke .3s; }
.hud-timer b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 15px; }
.hud-timer.hurry .tr-fg { stroke: #ff5d7d; }
.hud-timer.hurry b { color: #e0365e; animation: tick 1s infinite; }
@keyframes tick { 50% { transform: scale(1.2); } }

/* 그림판 */
.paper { position: relative; width: 300px; height: 225px; border-radius: 14px; border: 2.5px solid var(--line); background: #fff; box-shadow: 0 5px 0 var(--line); overflow: hidden; }
.paper canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.paper.can-draw canvas { cursor: crosshair; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; z-index: 2; pointer-events: none; }
.overlay.dim { background: rgba(255, 248, 231, .82); backdrop-filter: blur(2px); }
.ov-card { pointer-events: auto; max-width: 92%; padding: 14px 16px; border-radius: 20px; background: #fff; border: 2.5px solid var(--line); box-shadow: 0 5px 0 var(--line); text-align: center; animation: ovIn .25s ease-out; }
.ov-card h3 { margin: 4px 0 8px; font-size: 18px; line-height: 1.35; }
.ov-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.ov-choices { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.btn.choice { font-size: 19px; padding: 10px 14px; background: #fff4c9; }
.btn.choice:nth-child(2) { background: #e3f6ff; } .btn.choice:nth-child(3) { background: #ffe9f0; }
.ov-word { font-family: var(--hand); font-size: 32px; color: var(--pink); }
.ov-gains { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.ov-gains span { font-size: 13px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--pc) 18%, #fff); border: 1.5px solid var(--pc); }
.ov-card.reveal { background: #fffdf5; }
.ov-pencil { width: 46px; height: 12px; margin: 2px auto 6px; border-radius: 4px; background: var(--sun); border: 2px solid var(--line); position: relative; animation: wig 1s infinite ease-in-out; }
.ov-pencil::after { content: ""; position: absolute; right: -11px; top: -2px; border: 6px solid transparent; border-left: 9px solid var(--line); }
@keyframes wig { 0%, 100% { transform: rotate(-12deg) translateX(-6px); } 50% { transform: rotate(8deg) translateX(6px); } }
@keyframes ovIn { from { transform: scale(.9); opacity: 0; } }
.pop { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 3; font-family: var(--hand); font-size: 40px; color: #1f9b5d; -webkit-text-stroke: 1px #fff; text-shadow: 0 3px 0 #fff, 0 0 12px #fff; animation: popUp 1.4s ease-out forwards; pointer-events: none; white-space: nowrap; }
@keyframes popUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%); } }

/* 도구함 */
.tools { display: grid; gap: 5px; padding: 6px; border-radius: 16px; background: #fff; border: 2.5px solid var(--line); }
.tl-colors { display: flex; gap: 5px; overflow-x: auto; padding: 3px 3px 3px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.tl-colors::-webkit-scrollbar { display: none; }
.sw { flex: none; width: 27px; height: 27px; border-radius: 50%; border: 2px solid var(--line); background: var(--c); cursor: pointer; padding: 0; }
.sw.on { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--violet); transform: scale(1.06); }
.tl-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: space-between; }
.tl-tools, .tl-acts, .tl-sizes { display: flex; gap: 3px; align-items: center; }
.tb { display: grid; justify-items: center; gap: 0; width: 46px; padding: 3px 0 2px; border-radius: 11px; border: 2px solid transparent; background: #f7f3ea; cursor: pointer; }
.tb small { font-size: 10px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.tb.on { border-color: var(--line); background: #fff4c9; box-shadow: 0 2px 0 var(--line); }
.tb:disabled { opacity: .35; }
.sz { width: 30px; height: 30px; border-radius: 10px; border: 2px solid transparent; background: #f7f3ea; display: grid; place-items: center; cursor: pointer; padding: 0; }
.sz i { width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); border: 1px solid rgba(47, 53, 80, .3); }
.sz.on { border-color: var(--line); background: #fff; }

/* 점수판 (휴대폰: 가로 띠) */
.players h3 { display: none; margin: 0 0 8px; font-family: var(--hand); font-size: 24px; }
.pl-list { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.pl-list::-webkit-scrollbar { display: none; }
.pl { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border-radius: 99px; background: #fff; border: 2px solid var(--line); position: relative; }
.pl.me { background: #f6f2ff; }
.pl.drawing { background: #fff4c9; }
.pl.ok { background: #dcf7ea; }
.pl-rank { display: none; }
.pl-av { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--pc); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 14px; border: 2px solid var(--line); }
.pl-main { display: grid; line-height: 1.15; min-width: 0; }
.pl-name { font-weight: 900; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.pl-score { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.pl-score em { font-style: normal; color: #1f9b5d; }
.pl-tag { font-size: 10.5px; font-weight: 900; padding: 2px 6px; border-radius: 99px; white-space: nowrap; }
.pl-tag.draw { background: var(--sun); }
.pl-tag.ok { background: var(--mint); color: #fff; }
/* 이름표 테두리 (상점) */
.pl-name.fr { padding: 0 5px; border-radius: 7px; }
.fr.fr-star { border: 2px solid #ffbf47; }
.fr.fr-star::after { content: "★"; color: #ffbf47; margin-left: 2px; }
.fr.fr-crown { border: 2px solid #f5a524; background: #fff8dc; }
.fr.fr-crown::before { content: "♛"; color: #e0a000; margin-right: 2px; }
.fr.fr-rainbow { border: 2.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #b18cff) border-box; }

/* 채팅 */
.log { overflow-y: auto; padding: 8px 10px; border-radius: 16px; background: rgba(255, 255, 255, .92); border: 2.5px solid var(--line); font-size: 14px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; }
.ln { line-height: 1.4; overflow-wrap: anywhere; }
.ln b { margin-right: 6px; }
.ln.sys { color: var(--muted); font-size: 12.5px; font-weight: 700; text-align: center; }
.ln.sys.hint, .ln.sys.turn { color: var(--violet); }
.ln.sys.warn { color: #e0365e; }
.ln.ok { align-self: center; padding: 3px 12px; border-radius: 99px; background: #dcf7ea; font-weight: 800; }
.ln.ok em { font-style: normal; color: #1f9b5d; }
.ln.close { align-self: center; padding: 3px 12px; border-radius: 99px; background: #fff1c2; color: #8a6200; font-size: 13px; }
.ln.reveal { align-self: center; padding: 3px 12px; border-radius: 99px; background: #ffe9f0; font-size: 13.5px; }
.ln.sec { padding: 2px 8px; border-radius: 10px; background: #f1ecff; }
.ln.sec small { margin-left: 6px; font-size: 10.5px; color: var(--violet); font-weight: 800; }
.ln.mine span { font-weight: 700; }
.say { display: flex; gap: 6px; }
.say input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 11px 14px; border-radius: 14px; border: 2.5px solid var(--line); background: #fff; outline: none; color: var(--ink); }
.say input:focus { box-shadow: 0 0 0 3px #d9d1ff; }
.say input.bump { animation: bump .4s; }
.say .btn { padding: 8px 14px; box-shadow: 0 3px 0 var(--line); }
@keyframes bump { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* 연습장 모드: 점수·채팅·시간 숨기고 저장 버튼 */
.mode-practice .players, .mode-practice .chat, .mode-practice .hud-timer, .mode-practice .hud-round { display: none !important; }
.mode-practice .hud-btn.save { display: block; }
.mode-practice .play { grid-template-rows: auto auto auto auto; align-content: start; }
.ptip { display: none; grid-area: chat; padding: 12px 14px; border-radius: 16px; background: #fffdf5; border: 2.5px dashed #d8cfb8; }
.mode-practice .ptip { display: grid; gap: 6px; justify-items: start; }
.ptip > b { font-family: var(--hand); font-size: 22px; }
.ptip p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #4a5070; }
.ptip .btn { padding: 8px 14px; font-size: 14px; background: #fff4c9; box-shadow: 0 3px 0 var(--line); }

/* ---------- 넓은 화면 (PC): 왼쪽 점수판 · 가운데 그림판 · 오른쪽 채팅 ---------- */
@media (min-width: 860px) and (min-height: 520px) {
  .play {
    grid-template-columns: 220px minmax(0, 1fr) 300px;
    grid-template-areas: "hud hud hud" "players stage chat" "players tools chat";
    grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px 16px; max-width: 1500px; margin: 0 auto; right: 0;
  }
  .hud { min-height: 60px; padding: 6px 12px; }
  .hw-boxes i { width: 38px; height: 40px; font-size: 22px; }
  .hw-answer { font-size: 34px; }
  .hud-timer { width: 50px; height: 50px; }
  .players { padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, .92); border: 2.5px solid var(--line); overflow-y: auto; }
  .players h3 { display: block; }
  .pl-list { flex-direction: column; overflow: visible; }
  .pl { border-radius: 16px; padding: 7px 8px; }
  .pl-rank { display: block; width: 16px; font-weight: 900; color: var(--muted); font-size: 13px; text-align: center; }
  .pl-av { width: 34px; height: 34px; }
  .pl-name { font-size: 14.5px; max-width: 120px; }
  .pl-tag { position: absolute; right: 6px; top: -9px; border: 1.5px solid var(--line); }
  .tools { justify-self: center; width: min(100%, 760px); }
  .tl-colors { flex-wrap: wrap; justify-content: center; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .sw { width: 30px; height: 30px; }
  .ov-card h3 { font-size: 22px; }
  .btn.choice { font-size: 24px; padding: 12px 20px; }
  .mode-practice .ptip { display: none; }
  .mode-practice .play { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hud" "stage" "tools"; grid-template-rows: auto minmax(0, 1fr) auto; max-width: 1100px; }
}

/* ---------- 마지막 결과 ---------- */
.final { position: fixed; inset: 0; z-index: 9150; display: grid; place-items: center; padding: 16px; background: rgba(255, 248, 231, .9); backdrop-filter: blur(3px); overflow-y: auto; }
.fn-card { width: 100%; max-width: 460px; padding: 20px 16px; border-radius: 26px; background: #fff; border: 3px solid var(--line); box-shadow: 0 7px 0 var(--line); text-align: center; animation: ovIn .3s ease-out; }
.fn-card h2 { margin: 0 0 12px; font-family: var(--hand); font-size: 32px; }
.podium { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: end; gap: 6px; margin: 4px 0 10px; }
.pd { display: grid; gap: 4px; }
.pd-who { display: grid; justify-items: center; gap: 2px; animation: ovIn .5s both; }
.pd-who .pl-av { width: 42px; height: 42px; font-size: 18px; }
.pd-who b { font-size: 14px; max-width: 100%; }
.pd-who small { font-size: 12px; font-weight: 800; color: var(--muted); }
.pd-block { border: 2.5px solid var(--line); border-radius: 12px 12px 4px 4px; display: grid; place-items: center; font-family: var(--hand); font-size: 30px; color: #fff; -webkit-text-stroke: 1px var(--line); }
.p1 .pd-block { height: 96px; background: var(--sun); }
.p2 .pd-block { height: 70px; background: #c9d4e8; }
.p3 .pd-block { height: 52px; background: #f0b98a; }
.p1 .pd-who { animation-delay: .5s; } .p2 .pd-who { animation-delay: .3s; } .p3 .pd-who { animation-delay: .1s; }
.fn-rest { display: grid; gap: 4px; margin-bottom: 10px; }
.fn-rest div { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 12px; background: #faf6ec; border-left: 5px solid var(--pc); font-size: 14px; }
.fn-rest span { font-weight: 900; color: var(--muted); width: 32px; }
.fn-rest small { margin-left: auto; font-weight: 800; color: var(--muted); }
.fn-me { padding: 10px; border-radius: 16px; background: var(--soft); font-size: 14px; line-height: 1.6; }
.fn-gold { display: inline-block; margin-top: 4px; padding: 3px 14px; border-radius: 99px; background: linear-gradient(135deg, #ffe08a, #ffc24b); font-weight: 900; font-size: 17px; color: #5a3a00; border: 2px solid var(--line); }
.fn-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 14px; }
.confetti { position: fixed; inset: 0; z-index: 9160; pointer-events: none; }

/* 놀이 방법 창 */
.how { display: grid; gap: 8px; }
.how div { padding: 10px 12px; border-radius: 14px; background: #faf6ec; }
.how b { font-size: 15px; }
.how p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: #4a5070; }
.kl-pack { margin: 0; font-size: 12.5px; color: var(--muted); font-weight: 700; }

/* 혼자 맞히기 */
.btn.tile.solo { background: #e3f4ff; }
.say #skipBtn { padding: 8px 10px; font-size: 14px; }
.fn-solo { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 6px 0 10px; font-family: var(--hand); }
.fn-solo b { font-size: 64px; line-height: 1; color: #ff6fae; }
.fn-solo span { font-size: 26px; }

/* ---------- 휴대폰 가로: 왼쪽 그림판 · 오른쪽 도구·점수·채팅 ---------- */
@media (orientation: landscape) and (max-height: 519px) {
  .play {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "hud hud" "stage tools" "stage players" "stage chat";
    grid-template-rows: auto auto auto minmax(0, 1fr);
    padding: 4px max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)); gap: 4px 8px;
  }
  .hud { min-height: 40px; padding: 2px 6px; }
  .hud-timer { width: 36px; height: 36px; }
  .hw-boxes i { width: 26px; height: 28px; font-size: 16px; }
  .hw-answer { font-size: 24px; }
  .stage { align-self: start; }
  .tools { padding: 4px; gap: 3px; }
  .tb { width: 40px; }
  .sw { width: 24px; height: 24px; }
  .sz { width: 26px; height: 26px; }
  .say input { padding: 8px 12px; }
  .mode-practice .play { grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "hud hud" "stage tools" "stage chat"; align-content: stretch; }
  .mode-practice .ptip { align-self: start; }
}
.chat, .log, .say { min-width: 0; }