:root {
  --bg1: #3b2a6b;
  --bg2: #140d29;
  --tx: #f7f3ff;
  --mu: #c4b8e6;
  --gold: #fbbf24;
  --red: #ef4444;
  --line: rgba(255, 255, 255, 0.14);
  --card: rgba(255, 255, 255, 0.07);
  --title: 'Black Han Sans', 'Noto Sans KR', sans-serif;
  --bs: min(calc(100vw - 16px), calc(100dvh - 312px), 504px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 80% at 50% 0%, var(--bg1) 0%, var(--bg2) 75%) fixed, var(--bg2);
  color: var(--tx); font-family: 'Noto Sans KR', system-ui, sans-serif; font-size: 15px;
  overflow: hidden; user-select: none; -webkit-user-select: none;
}
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 72% 9%, #fff9 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 34%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 33% 41%, #fff7 50%, transparent 51%), radial-gradient(1px 1px at 55% 22%, #fff5 50%, transparent 51%); }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; font-family: var(--title); }
.muted { color: var(--mu); }
.small { font-size: 11px; }
.center { text-align: center; }
#app { max-width: 520px; margin: 0 auto; height: 100dvh; position: relative; }
#screen { height: 100%; overflow-y: auto; overflow-x: hidden; }
.tag { font-family: 'Noto Sans KR', sans-serif; font-size: 11px; font-weight: 700; color: #2a1d4a; background: var(--gold); border-radius: 6px; padding: 1px 5px; vertical-align: 2px; }

/* 버튼 */
.btn { background: linear-gradient(180deg, #5b4a99, #3d2f70); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 12px; padding: 10px 14px; font-weight: 700; transition: transform 0.08s; }
.btn:active { transform: scale(0.96); }
.btn-gold { background: linear-gradient(180deg, #fcd34d, #f59e0b); color: #2a1300; border-color: #fde68a; }
.btn-red { background: linear-gradient(180deg, #ef4444, #991b1b); border-color: #fca5a5; }
.btn-sm { padding: 6px 10px; font-size: 13px; border-radius: 9px; white-space: nowrap; }
.btn.big { font-size: 20px; padding: 14px 24px; margin: 10px 0; }
.ib { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 22px; line-height: 1; display: grid; place-items: center; }
span.ib { border: 0; background: none; }

/* ───── 로비 ───── */
.lobby { padding: calc(env(safe-area-inset-top) + 10px) 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.home-link { color: var(--mu); text-decoration: none; font-size: 13px; align-self: flex-start; padding: 4px 0; }
.logo { text-align: center; }
.logo-pcs { display: flex; justify-content: center; height: 92px; align-items: flex-end; }
.logo-pcs img { width: 70px; height: 70px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.logo-pcs img:nth-child(1) { transform: rotate(-12deg) translate(14px, 4px); }
.logo-pcs img:nth-child(2) { width: 86px; height: 86px; z-index: 1; }
.logo-pcs img:nth-child(3) { transform: rotate(12deg) translate(-14px, 4px); }
.logo h1 { font-size: 52px; line-height: 1.1; color: #fff7d6; text-shadow: 3px 3px 0 #6d28d9, 0 0 22px rgba(251, 191, 36, 0.35); }
.logo p { margin: 2px 0 0; color: var(--mu); letter-spacing: 3px; font-size: 13px; }
.resume { border: 1px solid #fde68a; background: linear-gradient(110deg, rgba(251, 191, 36, 0.25), rgba(251, 191, 36, 0.08)); border-radius: 14px; padding: 12px; font-weight: 900; font-size: 16px; text-align: left; }
.resume small { display: block; font-weight: 400; color: var(--mu); font-size: 12px; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; background: rgba(0, 0, 0, 0.3); padding: 5px; border-radius: 14px; }
.seg button { border: 0; background: none; padding: 8px 2px; border-radius: 10px; font-size: 22px; color: var(--mu); line-height: 1.1; }
.seg button small { display: block; font-size: 12px; font-weight: 700; margin-top: 2px; }
.seg button.on { background: linear-gradient(180deg, #8b5cf6, #5b21b6); color: #fff; box-shadow: 0 0 12px rgba(139, 92, 246, 0.6); }
.opp-list { display: flex; flex-direction: column; gap: 9px; }
.opp-card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(110deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)); }
.opp-card:active { transform: scale(0.98); }
.oc-ava { font-size: 40px; width: 52px; text-align: center; flex: none; }
.opp-card div { flex: 1; min-width: 0; }
.opp-card b { display: block; font-size: 17px; }
.opp-card small { display: block; color: var(--mu); font-size: 12px; margin-top: 2px; }
.opp-card .oc-meta { color: #fde68a; }
.opp-card small.tag { display: inline; color: #2a1d4a; font-size: 11px; margin: 0 0 0 4px; }
.opp-card em { font-style: normal; font-weight: 900; color: var(--gold); flex: none; font-size: 15px; }
.lobby-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sect { display: flex; flex-direction: column; gap: 8px; }
.sect h3 { font-size: 20px; }
.sect p { margin: 0; font-size: 13px; }
.sect.center { align-items: center; gap: 12px; padding: 14px 0; }
.sect.center p { font-size: 15px; line-height: 1.6; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tile:active { transform: scale(0.96); }
.tile img { width: 46px; height: 46px; }
.tile b { font-size: 15px; }
.tile small { font-size: 11px; color: var(--mu); }
.tile.pz b { font-family: var(--title); font-size: 26px; color: var(--gold); }
.tile.pz.done { border-color: #86efac; background: rgba(34, 197, 94, 0.14); }
.tiles + .tiles { margin-top: 4px; }
label.row { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 0; font-size: 15px; }
label.row span { flex: 1; }
label.row small { display: block; color: var(--mu); font-size: 11px; }
label.row input[type='checkbox'] { width: 22px; height: 22px; accent-color: #8b5cf6; order: 2; }
.sect.center label.row input { order: 0; }

/* ───── 대국 화면 ───── */
.game { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: calc(env(safe-area-inset-top) + 6px) 8px calc(env(safe-area-inset-bottom) + 8px); }
.topbar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topbar b { font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.player { width: var(--bs); display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 12px; border: 1px solid transparent; position: relative; min-height: 52px; transition: background 0.2s; }
.player.on { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.45); }
.player .ava { font-size: 30px; width: 38px; height: 38px; text-align: center; line-height: 38px; flex: none; }
.player img.ava { object-fit: contain; }
.pinfo { flex: 1; min-width: 0; }
.pinfo b { font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caps { display: flex; align-items: center; height: 20px; overflow: hidden; }
.caps img { width: 18px; height: 18px; margin-right: -5px; }
.caps em { font-style: normal; font-weight: 900; color: #86efac; font-size: 12px; margin-left: 9px; }
.turn { font-size: 12px; font-weight: 900; color: #2a1300; background: var(--gold); border-radius: 999px; padding: 3px 9px; flex: none; }
.turn i { font-style: normal; animation: blink 1.2s infinite; }
.turn i:nth-child(2) { animation-delay: 0.2s; } .turn i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 50% { opacity: 0.2; } }
.bubble { position: absolute; left: 50px; top: 50%; margin-top: -16px; background: #fff; color: #2a1d4a; font-weight: 700; font-size: 13px; padding: 6px 11px; border-radius: 14px; max-width: 70%; z-index: 30; opacity: 0; transform: translateY(6px) scale(0.9); transition: 0.2s; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.bubble::before { content: ''; position: absolute; left: -6px; top: 10px; border: 6px solid transparent; border-right-color: #fff; border-left: 0; }
.bubble.show { opacity: 1; transform: none; }
.board-wrap { position: relative; width: var(--bs); height: var(--bs); flex: none; }
.view-bar { position: absolute; z-index: 20; left: 50%; top: -6px; transform: translate(-50%, -100%); background: rgba(20, 13, 41, 0.92); border: 1px solid var(--gold); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12px; white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.view-bar[hidden] { display: none; }
.moves { width: var(--bs); display: flex; gap: 2px; align-items: center; overflow-x: auto; white-space: nowrap; padding: 4px 2px; min-height: 32px; scrollbar-width: none; font-size: 13px; }
.moves::-webkit-scrollbar { display: none; }
.moves .no { color: var(--mu); margin: 0 2px 0 6px; font-size: 11px; }
.moves button { border: 0; background: none; padding: 3px 5px; border-radius: 6px; font-weight: 700; }
.moves button.cur { background: var(--gold); color: #2a1300; }
.ctrl { width: var(--bs); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: auto; }
.game > #pTop, .learn > .teacher { margin-top: auto; }
.learn > .lesson-bar { margin-bottom: auto; }
.ctrl button { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; font-size: 20px; line-height: 1.1; }
.ctrl button:active { transform: scale(0.95); }
.ctrl button[hidden] { display: none; }
.ctrl:has(button[hidden]) { grid-template-columns: repeat(3, 1fr); }
.ctrl small { font-size: 12px; font-weight: 700; margin-top: 2px; }

/* ───── 판 ───── */
.board { --lt: #f0d9b5; --dk: #b58863; --lastc: rgba(255, 214, 10, 0.42); position: absolute; inset: 0; border-radius: 6px; overflow: hidden; touch-action: none; box-shadow: 0 0 0 4px #4a3520, 0 0 0 7px #2a1d10, 0 14px 30px rgba(0, 0, 0, 0.55); }
.board.theme-green { --lt: #eeeed2; --dk: #769656; box-shadow: 0 0 0 4px #3f5a2c, 0 0 0 7px #24361a, 0 14px 30px rgba(0, 0, 0, 0.55); }
.board.theme-blue { --lt: #dee8f3; --dk: #6f94bd; box-shadow: 0 0 0 4px #2f4c6e, 0 0 0 7px #1b2e45, 0 14px 30px rgba(0, 0, 0, 0.55); }
.board.theme-pink { --lt: #fde7ef; --dk: #ec8fb0; box-shadow: 0 0 0 4px #b34f78, 0 0 0 7px #7a2c4d, 0 14px 30px rgba(0, 0, 0, 0.55); }
.board.theme-contrast { --lt: #ffffff; --dk: #3f6fb5; --lastc: rgba(255, 170, 0, 0.6); box-shadow: 0 0 0 4px #111, 0 0 0 7px #000, 0 14px 30px rgba(0, 0, 0, 0.55); }
.sqs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.sq { position: relative; }
.sq.lt { background: var(--lt); }
.sq.dk { background: var(--dk); }
.sq i { position: absolute; font-style: normal; font-weight: 900; font-size: max(9px, calc(var(--bs) / 46)); opacity: 0.85; }
.sq.lt i { color: var(--dk); } .sq.dk i { color: var(--lt); }
.sq .rk { left: 3px; top: 2px; }
.sq .fl { right: 4px; bottom: 1px; }
.sq.last::before { content: ''; position: absolute; inset: 0; background: var(--lastc); }
.sq.sel::before { content: ''; position: absolute; inset: 0; background: rgba(139, 92, 246, 0.55); }
.sq.dot::after { content: ''; position: absolute; left: 35%; top: 35%; width: 30%; height: 30%; border-radius: 50%; background: rgba(76, 29, 149, 0.5); z-index: 3; }
.sq.cap::after { content: ''; position: absolute; inset: 4%; border-radius: 50%; border: calc(var(--bs) / 90) solid rgba(76, 29, 149, 0.6); z-index: 3; }
.sq.check::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 0, 0, 0.95) 0%, rgba(231, 0, 0, 0.6) 35%, transparent 75%); animation: pulse 0.9s ease-in-out infinite alternate; }
.sq.danger::after { content: ''; position: absolute; inset: 3%; border-radius: 22%; border: calc(var(--bs) / 110) solid #ef4444; z-index: 3; animation: pulse 0.8s ease-in-out infinite alternate; }
.sq.dot.danger::after, .sq.cap.danger::after { animation: none; }
@keyframes pulse { from { opacity: 0.55; } to { opacity: 1; } }
.star-i { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--bs) / 11); color: #facc15; text-shadow: 0 0 8px #fff59d, 0 2px 0 #a16207; z-index: 2; animation: twinkle 1.4s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(0.85) rotate(8deg); } }
.pcs { position: absolute; inset: 0; pointer-events: none; }
.pc { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; transition: transform 0.24s cubic-bezier(0.3, 0.8, 0.3, 1); z-index: 5; will-change: transform; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }
.pc.lift { z-index: 8; }
.pc.noanim, .pc.dragging { transition: none; }
.pc.dragging { z-index: 10; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.45)); }
.pc.dying { animation: die 0.45s forwards; z-index: 4; }
@keyframes die { to { opacity: 0; scale: 0.3; rotate: 40deg; } }
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; color: rgba(34, 197, 94, 0.85); }
.arrows line { stroke: currentColor; stroke-width: 0.17; stroke-linecap: round; }

/* ───── 체스 학교 ───── */
.teacher { width: var(--bs); display: flex; gap: 8px; align-items: flex-start; }
.teacher .ava { font-size: 36px; flex: none; }
.teacher .say { flex: 1; background: #fff; color: #2a1d4a; border-radius: 14px; padding: 9px 12px; font-size: 14px; line-height: 1.55; position: relative; min-height: 64px; }
.teacher .say::before { content: ''; position: absolute; left: -7px; top: 14px; border: 7px solid transparent; border-right-color: #fff; border-left: 0; }
.learn { gap: 10px; }
.learn .board-wrap { margin-top: 4px; }
.lesson-bar { width: var(--bs); display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.lesson-bar b { color: var(--gold); font-size: 18px; }

/* ───── 모달 ───── */
.modal-wrap { position: fixed; inset: 0; background: rgba(8, 4, 20, 0.6); display: grid; place-items: center; z-index: 100; padding: 16px; animation: fadein 0.15s; backdrop-filter: blur(2px); }
.modal-wrap.out { opacity: 0; transition: 0.18s; }
@keyframes fadein { from { opacity: 0; } }
.modal { width: min(400px, 100%); max-height: 88dvh; overflow-y: auto; background: linear-gradient(180deg, #33275e, #1d1538); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 18px; padding: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); animation: pop 0.22s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }
.modal h3 { font-size: 22px; margin-bottom: 10px; }
.ask-body { line-height: 1.6; margin-bottom: 14px; }
.ask-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 12px; }
.ask-btns .btn { flex: 1; min-width: 96px; }
.menu { display: flex; flex-direction: column; gap: 8px; }
.result { text-align: center; }
.result h2 { font-size: 34px; margin-bottom: 6px; }
.result.w h2 { color: var(--gold); text-shadow: 0 0 18px rgba(251, 191, 36, 0.5); }
.result.l h2 { color: #c4b5fd; }
.result p { margin: 6px 0; }
.big-ava { font-size: 64px; }
.bubble-static { background: #fff; color: #2a1d4a; border-radius: 14px; padding: 8px 12px; display: inline-block; font-weight: 700; }
.colors, .promo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.promo { grid-template-columns: repeat(4, 1fr); }
.colors button, .promo button { border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.colors button:active, .promo button:active { transform: scale(0.95); }
.colors img, .promo img { width: 56px; height: 56px; }
.colors span { font-size: 40px; line-height: 56px; }
.promo button { background: #f0d9b5; color: #2a1d4a; font-weight: 700; }
.set label.row { border-bottom: 1px solid var(--line); }
.set input#nm { width: 120px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: var(--tx); padding: 6px 8px; font: inherit; }
.set input[type='range'] { width: 140px; accent-color: #8b5cf6; }
.themes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 8px 0; }
.th { border: 2px solid transparent; border-radius: 10px; background: none; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.th i { aspect-ratio: 1; display: block; }
.th i:nth-child(1) { background: var(--lt); } .th i:nth-child(2) { background: var(--dk); }
.th.theme-wood { --lt: #f0d9b5; --dk: #b58863; } .th.theme-green { --lt: #eeeed2; --dk: #769656; } .th.theme-blue { --lt: #dee8f3; --dk: #6f94bd; } .th.theme-pink { --lt: #fde7ef; --dk: #ec8fb0; } .th.theme-contrast { --lt: #fff; --dk: #3f6fb5; }
.th small { grid-column: span 2; font-size: 11px; margin-top: 3px; }
.th.on { border-color: var(--gold); }
table.rec { width: 100%; border-collapse: collapse; }
table.rec th, table.rec td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: center; }
table.rec td:first-child, table.rec th:first-child { text-align: left; }
.help p { line-height: 1.65; font-size: 14px; }
.pieces { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.pieces li { display: flex; align-items: center; gap: 10px; }
.pieces img { width: 38px; height: 38px; background: #f0d9b5; border-radius: 8px; }
.pieces b { display: block; } .pieces small { color: var(--mu); }

/* 토스트 */
#toasts { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 90px); transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: rgba(20, 13, 41, 0.94); border: 1px solid var(--gold); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 14px; animation: pop 0.2s; text-align: center; }
.toast.out { opacity: 0; transition: 0.3s; }

/* ───── 연출 ───── */
#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 90; }
.cutin { position: fixed; left: 0; right: 0; top: 40%; z-index: 95; pointer-events: none; display: flex; flex-direction: column; align-items: center; transform: translateY(-50%); animation: ci-in 1.5s forwards; }
.ci-band { position: absolute; inset: -18px -10%; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.6) 80%, transparent); transform: skewY(-4deg); }
.cutin b { position: relative; font-family: var(--title); font-weight: 400; font-size: 64px; letter-spacing: 2px; color: #fff; -webkit-text-stroke: 2px rgba(0, 0, 0, 0.4); text-shadow: 0 0 24px currentColor; }
.cutin small { position: relative; font-size: 16px; font-weight: 700; color: #fff; margin-top: 2px; }
.cutin.red b { color: #ff6b6b; } .cutin.blue b { color: #7dd3fc; } .cutin.purple b { color: #d8b4fe; } .cutin.gold b { color: #fde047; }
.cutin.big b { font-size: 76px; }
@keyframes ci-in { 0% { opacity: 0; transform: translate(60%, -50%) skewX(-18deg); } 14% { opacity: 1; transform: translate(-2%, -50%) skewX(4deg); } 22% { transform: translate(0, -50%); } 78% { opacity: 1; transform: translate(0, -50%) scale(1.03); } 100% { opacity: 0; transform: translate(-60%, -50%) skewX(-18deg); } }
.shake { animation: shake 0.3s; } .shake2 { animation: shake2 0.45s; }
@keyframes shake { 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, 1px); } }
@keyframes shake2 { 15% { transform: translate(-8px, 4px) rotate(-0.6deg); } 35% { transform: translate(8px, -4px) rotate(0.6deg); } 55% { transform: translate(-6px, 2px); } 75% { transform: translate(4px, -1px); } }
@media (prefers-reduced-motion: reduce) { .cutin { animation-duration: 0.9s; } .shake, .shake2 { animation: none; } }
@media (max-height: 640px) { .player { min-height: 44px; } .player .ava { font-size: 24px; width: 30px; } .ctrl button { font-size: 17px; } :root { --bs: min(calc(100vw - 16px), calc(100dvh - 286px), 504px); } }

/* 기록 코드 · 큰 글씨 */
textarea.code { width: 100%; height: 96px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--tx); font: 12px/1.4 monospace; padding: 8px; word-break: break-all; resize: none; }
body.big { font-size: 18px; }
body.big .opp-card b, body.big .pinfo b, body.big .tile b { font-size: 19px; }
body.big .opp-card small, body.big .tile small, body.big label.row small { font-size: 14px; }
body.big .moves { font-size: 16px; }
body.big .ctrl small, body.big .seg button small { font-size: 15px; }
body.big .teacher .say { font-size: 17px; }
body.big .ask-body, body.big .help p { font-size: 17px; }
body.big .btn { font-size: 17px; padding: 12px 16px; }
body.big .toast { font-size: 17px; }