@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');

:root {
  --ink:#283d50;
  --blue:#285e83;
  --blue-hover:#387498;
  --blue-deep:#203f5c;
  --blue-soft:#e2e8dc;
  --yellow:#efc932;
  --paper:#fff3cf;
  --paper-shade:#ecdfb7;
  --paper-line:#c6b588;
  --paper-print:var(--blue);
  --red:#b8424d;
  --red-deep:#8f303e;
  --cream:#fff8e5;
  --title-blue:#227da0;
  font-family:'Noto Sans KR',sans-serif; color:var(--ink); font-synthesis:none; color-scheme:light; background:#f6ecd3;
}
* { box-sizing:border-box; }
body { margin:0; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:default; }
a { color:inherit; }
[hidden] { display:none!important; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.icon,.mascot-icon { display:block; flex:none; pointer-events:none; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mascot-icon { width:24px; height:24px; fill:currentColor; }
.paper-art { display:block; width:100%; height:100%; pointer-events:none; }

/* Every control uses the same icon box and alignment, independent of fonts. */
.text-button,.new-board-button,.primary-button,.dialog-close { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:11px 16px; border-radius:5px; font-size:14px; font-weight:600; line-height:1.5; }
.text-button { border:0; background:transparent; white-space:nowrap; }
.text-button:hover { background:#eadfbf; }
.primary-button { min-height:48px; border:1px solid var(--red-deep); background:var(--red); color:var(--cream); font-weight:700; }
.primary-button:hover:not(:disabled) { background:#a33644; }
.primary-button:disabled { background:#9a6c68; }
.new-board-button { width:100%; border:1px solid #c7b892; background:transparent; }
.new-board-button:hover { background:#ebe0c0; }
.dialog-close { width:44px; height:44px; min-width:44px; padding:0; border:0; background:transparent; color:#746653; }
.dialog-close:hover:not(:disabled) { background:#ebdfbf; color:var(--ink); }
.dialog-close:disabled { opacity:.4; }

.site-header { background:var(--cream); border-bottom:3px solid var(--blue); }
.header-inner { max-width:1320px; min-height:80px; padding:16px 40px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-size:20px; font-weight:900; letter-spacing:-.7px; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:34px; height:38px; background:var(--blue); color:var(--paper); border-radius:2px; transform:rotate(-6deg); box-shadow:2px 2px 0 var(--yellow); }
.brand-mark .mascot-icon { width:32px; height:32px; }
.header-actions { display:flex; align-items:center; gap:2px; }
a.text-button,a.primary-button { text-decoration:none; }
.layout { max-width:1320px; margin:auto; padding:32px 40px 40px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:start; }
.game-area { min-width:0; }
.lottery-board { position:relative; padding:0 20px 20px; background:var(--yellow); border:2px solid #bc941e; border-radius:5px; box-shadow:0 4px 0 #af8722,0 9px 22px #29273418; }
.board-top { position:relative; padding:16px 0; text-align:center; }
.pin { position:absolute; top:13px; width:13px; height:13px; border:1px solid #445774; border-radius:50%; background:radial-gradient(circle at 35% 25%,#bacad7,#526d8a 55%,#273e60); box-shadow:1px 3px 2px #453f2866; }
.pin-left { left:-9px; }
.pin-right { right:-9px; }
.board-title { margin:0; font:400 clamp(38px,4.8vw,62px)/1.45 'Black Han Sans','Noto Sans KR',sans-serif; letter-spacing:-2px; color:var(--title-blue); transform:rotate(-2deg); paint-order:stroke fill; -webkit-text-stroke:6px var(--paper); filter:drop-shadow(3px 3px 0 var(--blue-deep)); }
.board-title b { font-weight:400; font-size:1.2em; }
.board-stats { display:flex; align-items:baseline; justify-content:space-between; margin-top:16px; padding-top:10px; border-top:1px solid #ac8f1b; font-size:14px; font-variant-numeric:tabular-nums; }
.board-stats strong { font-size:19px; }
.ticket-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); gap:7px 5px; max-height:58dvh; min-height:58px; padding:3px 4px 8px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#9c8123 transparent; align-content:start; }
/* The 166 × 122 body and 12-unit stub share one 166 × 134 coordinate system. */
.ticket { position:relative; isolation:isolate; min-width:0; min-height:48px; aspect-ratio:166/134; padding:0; border:0; background:transparent; outline-offset:0!important; }
.ticket::before { content:''; position:absolute; inset:0 1px; border:1px dashed #c5a525; border-radius:1px; background:#aa931f3b; pointer-events:none; }
.ticket-face { position:absolute; inset:0; filter:drop-shadow(0 1px 1px #876c3b66); pointer-events:none; }
.ticket-face>.paper-art { position:absolute; inset:0; overflow:visible; }
.ticket-piece,.ticket-stub { visibility:hidden; }
.ticket.is-hovered { z-index:2; }
.ticket.is-hovered .ticket-piece,.ticket.is-hovered .ticket-stub,.ticket.is-drawn .ticket-stub { visibility:visible; }
.ticket.is-hovered .ticket-stock,.ticket.is-drawn .ticket-stock,.ticket.is-drawn .ticket-piece { display:none; }
.ticket-result { display:none; position:absolute; inset:calc(100% * 12 / 134) 0 0; place-items:center; pointer-events:none; }
.ticket.is-drawn .ticket-result { display:grid; }
.ticket-result-label { font-size:12px; font-weight:600; line-height:1; color:var(--ink); }
.has-pending .ticket { pointer-events:none; }
.board-empty-note { grid-column:1/-1; text-align:center; padding:12px 0; margin:0; font-size:14px; font-weight:700; }

.side-panel { position:sticky; top:24px; display:flex; flex-direction:column; align-items:stretch; gap:24px; min-width:0; }
.prize-sheet { position:relative; padding:20px 20px 8px; background:#fff8e5; border:1px solid #d7c59e; box-shadow:0 2px 8px #27273e09; }
.prize-sheet::before { content:''; position:absolute; top:-9px; left:calc(50% - 32px); width:64px; height:18px; background:#ccbd82a3; transform:rotate(-5deg); pointer-events:none; }
.sheet-heading,.record-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sheet-heading { margin-bottom:12px; }
.sheet-heading h2,.record-heading h2 { margin:0; font-size:16px; font-weight:800; line-height:1.5; letter-spacing:-.5px; }
.sheet-caption,.record-heading>span { font-size:12px; color:#726550; white-space:nowrap; }
.prize-list { list-style:none; margin:0; padding:0; }
.prize-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:66px; padding:14px 0; border-top:1px dashed #cebf9b; }
.rank-badge { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:var(--blue-soft); color:var(--blue); font-size:13px; font-weight:800; line-height:1; white-space:nowrap; }
/* Rank colors are shared by forms, prizes and history. */
.rank-1 { background:#e9bd2c; color:#4b371e; }
.rank-2 { background:#b8424d; color:#fff8e5; }
.rank-3 { background:#28688a; color:#fff8e5; }
.rank-4 { background:#626d3e; color:#fff8e5; }
.rank-5 { background:#795568; color:#fff8e5; }
.prize-name { font-size:14px; font-weight:600; line-height:1.6; overflow-wrap:anywhere; }
.prize-count { white-space:nowrap; font-size:12px; color:#726550; font-variant-numeric:tabular-nums; }
.prize-count strong { color:var(--ink); font-size:16px; font-weight:800; }
.last-result { display:flex; align-items:center; justify-content:center; gap:12px; min-height:86px; margin-top:12px; padding:16px; border:1px dashed #d5c49c; border-radius:4px; background:#eaddb770; }
.last-result p { margin:0; color:#726550; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.last-result.has-result { justify-content:flex-start; background:#fff5d8; border-style:solid; }
.last-result.has-result p { color:var(--ink); font-size:16px; font-weight:700; }
.last-result .rank-badge { width:42px; height:42px; font-size:15px; }
.last-result small { display:block; margin-top:4px; font-size:12px; font-weight:400; color:#726550; }
.history-list { list-style:none; padding:0; margin:0; }
/* Dialog content and controls occupy separate, stable layout areas. */
dialog { color:var(--ink); width:100%; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); padding:24px; border:1px solid #c6b38a; border-radius:9px; background:#fff6de; box-shadow:0 25px 90px #10153150; overflow:auto; overscroll-behavior:contain; }
dialog::backdrop { background:#20334499; backdrop-filter:blur(5px); }
.draw-dialog { width:430px; text-align:center; }
.draw-heading { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; }
.draw-heading h2 { grid-column:2; margin:0; color:#6f614e; font-size:16px; font-weight:600; }
.draw-heading .dialog-close { grid-column:3; }
/* Folded paper and action controls occupy separate hit-test areas. */
.paper-stage {height:280px;position:relative;isolation:isolate;}
.paper-stage .pf-stage {pointer-events:none;}
.paper-hit {position:absolute;top:18px;left:calc(50% - 83px);width:166px;height:122px;padding:0;border:0;background:transparent;touch-action:none;border-radius:0;}
.paper-hit:disabled {pointer-events:none;}
.reveal-summary { display:grid; place-items:center; min-height:48px; margin-bottom:8px; }
.reveal-summary p { margin:0; font-size:20px; font-weight:800; line-height:1.5; overflow-wrap:anywhere; }
.reveal-summary p.is-long { font-size:16px; line-height:24px; }
.draw-dialog>.primary-button { width:100%; }
.result-share-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.result-share-actions .new-board-button { min-width:0; padding:10px 8px; font-size:13px; gap:6px; }
.result-share-actions .new-board-button:disabled { opacity:.6; }
.result-share-actions .icon { width:18px; height:18px; }
.shared-result-card { text-align:center; }
.shared-result-card h1 { overflow-wrap:anywhere; }
.shared-result-card h1,.shared-prize,.reveal-summary p { word-break:keep-all; }
.shared-result-card .field-label { text-align:left; }
.shared-result-card #result-nickname-field .field-label { margin-top:0; }
.shared-result-card #shared-meta { margin-bottom:0; }
.shared-prize { margin:0 0 20px; font-size:22px; font-weight:800; overflow-wrap:anywhere; }
.shared-result-card form { border-top:1px solid var(--paper-line); padding-top:20px; margin-top:20px; }
.shared-result-card form .primary-button { margin-top:16px; }
.host-picker-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.setup-card .host-picker-heading h1 { margin:0; }
.host-picker-heading .primary-button { flex-shrink:0; }
.host-picker>.field-help { margin:16px 0 24px; }
.host-rooms { display:grid; gap:14px; }
.host-room-card { display:block; padding:20px; border:1px solid var(--paper-line); border-left:4px solid var(--blue); border-radius:4px; text-decoration:none; background:var(--cream); }
.host-room-card:hover { background:var(--paper); border-color:var(--blue); }
.host-room-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.host-room-heading strong { font-size:18px; line-height:1.5; overflow-wrap:anywhere; min-width:0; }
.host-room-status { flex-shrink:0; padding:4px 8px; color:var(--blue-deep); background:var(--blue-soft); border-radius:3px; font-size:12px; font-weight:700; }
.host-room-status.is-open { color:var(--cream); background:var(--blue); }
.host-room-card .field-help { margin:14px 0 0; }
.host-room-card .field-help span { display:block; }
.host-room-count { display:block; margin-top:12px; font-size:13px; color:#726550; }
.settings-dialog { width:520px; overflow:hidden; }
#settings-form { display:flex; flex-direction:column; max-height:calc(100dvh - 84px); }
.settings-content { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:3px 8px 8px 3px; margin:-3px -8px 0 -3px; scrollbar-width:thin; }
.settings-heading { display:flex; flex:none; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.settings-heading h2 { margin:0; font-size:22px; line-height:1.4; }
.settings-columns,.settings-row { display:grid; grid-template-columns:34px minmax(0,1fr) 80px; gap:12px; align-items:center; }
.settings-columns { margin-bottom:8px; color:#726550; font-size:13px; }
.settings-columns span:last-child { text-align:right; }
.settings-row { margin-bottom:12px; }
.settings-row input { min-width:0; width:100%; min-height:44px; padding:10px; border:1px solid #bdab85; border-radius:4px; color:var(--ink); background:var(--cream); font-size:16px; line-height:1.5; }
.settings-row input[type=number] { text-align:right; }
.settings-total { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; padding-top:16px; border-top:1px solid #d6c49c; font-size:14px; }
.settings-total strong { font-size:19px; }
.form-error { margin:12px 0; font-size:14px; line-height:1.6; color:#a33228; }
.form-error:empty { display:none; }
.settings-warning { margin:20px 0 0; color:#726550; font-size:13px; line-height:1.7; }
.dialog-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; }
.settings-dialog .dialog-actions { flex:none; margin-top:0; padding-top:16px; }
.reset-dialog { width:440px; }
.reset-dialog h2 { margin:0 0 16px; font-size:22px; }
.reset-dialog p { margin:0; font-size:14px; line-height:1.8; color:#6f614e; }
.confetti { position:fixed; top:-15px; width:7px; height:13px; pointer-events:none; animation:confetti-fall 1.8s ease-in forwards; z-index:5; }
@keyframes confetti-fall { to { transform:translate(var(--drift),85vh) rotate(650deg); opacity:0; } }

@media(max-width:1050px) {
  .header-inner { padding-inline:24px; }
  .layout { padding-inline:24px; grid-template-columns:minmax(0,1fr) 280px; gap:24px; }
  .lottery-board,.prize-sheet { padding-inline:16px; }
}
@media(max-width:760px) {
  .header-inner { min-height:72px; padding:12px 18px; gap:10px; }
  .brand { font-size:18px; gap:8px; }
  .brand-mark { width:28px; height:32px; }
  .brand-mark .mascot-icon { width:28px; height:28px; }
  #settings-button { padding-inline:8px; }
  .layout { grid-template-columns:minmax(0,1fr); padding:24px 18px 32px; gap:28px; }
  .side-panel { position:static; gap:22px; }
  .board-title { font-size:46px; }
  .board-stats { margin-top:12px; }
  .prize-sheet { padding-inline:20px; }
  .ticket-grid { max-height:52dvh; }
}
@media(max-width:380px) {
  .header-inner { padding-inline:14px; gap:8px; flex-wrap:wrap; }
  .header-actions { margin-left:auto; }
  .header-actions .text-button { padding-inline:10px; }
  .brand { font-size:16px; }
  #settings-button { gap:6px; padding-inline:6px; }
  .layout { padding-inline:14px; }
  .lottery-board { padding-inline:12px; }
  .board-title { font-size:40px; }
  dialog { padding:18px; max-width:calc(100vw - 24px); }
  #settings-form { max-height:calc(100dvh - 64px); }
  .settings-columns,.settings-row { grid-template-columns:34px minmax(0,1fr) 64px; gap:8px; }
  .settings-row input { padding-inline:6px; }
  .settings-heading h2 { font-size:20px; }
  .dialog-actions { gap:8px; }
  .dialog-actions .primary-button { padding-inline:14px; }
}
@media(max-height:540px) {
  .draw-dialog { padding:16px; }
  .paper-stage { height:160px; }
  .paper-stage .pf-stage { transform:scale(.55); transform-origin:center top; }
  .paper-hit { transform:scale(.55); transform-origin:center top; top:10px; }
  .reveal-summary { min-height:32px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-delay:0ms!important; transition-duration:.01ms!important; transition-delay:0ms!important; scroll-behavior:auto!important; }
}

/* Shared-room controls extend the existing paper-board palette. */
input,textarea {width:100%;min-width:0;min-height:46px;padding:10px 12px;border:1px solid #bcaa85;border-radius:4px;background:var(--cream);color:var(--ink);font:inherit;font-size:16px;line-height:1.5;}
input::placeholder {color:#7e705b;opacity:1;}
.full-width {width:100%;}
.muted {color:#726550;font-size:14px;line-height:1.65;}
.field-label {display:block;margin:0 0 8px;font-size:14px;font-weight:700;}
.field-label .muted {font-weight:400;}
.setup-screen {max-width:680px;margin:36px auto 60px;padding:0 24px;}
.setup-card {padding:28px;background:#fff8e5;border:1px solid #d2bf95;border-top:5px solid var(--red);border-radius:5px;box-shadow:0 5px 20px #283d5008;}
.setup-card h1 {font-size:25px;margin:0 0 24px;letter-spacing:-.7px;}
.form-section-title {display:flex;align-items:center;justify-content:space-between;gap:8px;margin:26px 0 8px;}
.form-section-title h2,.form-section-title h3 {font-size:16px;margin:0;}
.form-section-title .text-button {padding-inline:8px;}
.prize-columns,.prize-input-row {display:grid;grid-template-columns:38px minmax(0,1fr) 104px 44px;gap:10px;align-items:center;}
.prize-columns {font-size:13px;color:#726550;margin-bottom:8px;}
.prize-columns span:nth-child(3) {text-align:right;}
.prize-input-row {margin-bottom:10px;}
.prize-input-row input[type=number] {text-align:right;padding-inline:8px;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield;}
.prize-input-row input[type=number]::-webkit-inner-spin-button,.prize-input-row input[type=number]::-webkit-outer-spin-button {appearance:none;margin:0;}
.prize-input-row .dialog-close {width:44px;min-width:44px;}
.nickname-label {margin-top:24px;}
#create-submit {margin-top:24px;}
.setup-card .settings-total {margin-top:20px;}
.entry-screen {max-width:470px;margin:70px auto;padding:0 24px;}
.entry-card {padding:28px;border:1px solid #d2bf95;border-top:5px solid var(--red);background:#fff8e5;border-radius:5px;}
.entry-card h1 {font-size:26px;line-height:1.5;overflow-wrap:anywhere;margin:8px 0;}
.entry-card .field-label {margin-top:28px;}
.entry-card .primary-button {margin-top:18px;}
.entry-label {font-size:14px;font-weight:700;color:#285e83;}
.entry-card .text-button {margin-top:10px;}
.room-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1320px;margin:auto;padding:20px 40px 0;}
.room-identity {display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;min-width:0;}
#my-identity {overflow-wrap:anywhere;}
.host-badge {background:var(--blue-soft);color:var(--blue);padding:3px 7px;border-radius:3px;font-size:12px;font-weight:700;white-space:nowrap;}
.connection-state {font-size:12px;color:#a34031;white-space:nowrap;}
.connection-state.is-online {color:#726550;}
.room-actions {display:flex;flex-shrink:0;gap:4px;}
.room-notice {width:calc(100% - 80px);max-width:1240px;margin:16px auto 0;padding:10px 16px;background:#fff2c8;border:1px solid #dfcb78;font-size:14px;font-weight:600;}
.board-title {overflow-wrap:anywhere;word-break:keep-all;text-wrap:balance;font-size:clamp(30px,4.2vw,52px);line-height:1.5;letter-spacing:-1px;-webkit-text-stroke:4px var(--paper);padding:4px 14px;transform:rotate(-1deg);}
.board-stats {gap:8px;}
.board-stats>span:first-child {display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;}
.board-pagination {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid #ac8f1b;padding-top:10px;margin-top:8px;font-size:13px;}
.page-controls {display:flex;align-items:center;gap:2px;margin-left:auto;max-width:100%;}
.page-controls .dialog-close {color:var(--ink);}
.page-input {display:flex;align-items:center;gap:8px;min-width:0;}
.page-input>span {overflow-wrap:anywhere;}
.page-input input {width:60px;min-height:44px;text-align:center;padding:6px;background:#fff8de;border-color:#c3a538;appearance:textfield;-moz-appearance:textfield;}
.page-input input::-webkit-inner-spin-button,.page-input input::-webkit-outer-spin-button {appearance:none;margin:0;}
.ticket.is-reserved .ticket-result-label {font-size:11px;}
.sheet-caption {font-size:13px;}
.prize-name {font-size:15px;}
.copy-records {margin-top:8px;padding:8px 0;min-height:44px;}
.empty-record {color:#726550;font-size:14px;text-align:center;margin:14px 0;padding:20px;border:1px dashed #cfbc92;border-radius:4px;}
.history-list .history-row {display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #d6c49f;}
.history-content {min-width:0;}
.history-content strong {display:block;font-size:15px;line-height:1.6;overflow-wrap:anywhere;}
.history-meta {display:block;font-size:13px;line-height:1.7;color:#726550;overflow-wrap:anywhere;}
.history-seq {font-size:12px;color:#726550;}
.settings-dialog {width:570px;}
.visibility-settings {padding:20px 0;margin:24px 0 0;border:0;border-top:1px solid #d7c59e;display:flex;gap:24px;flex-wrap:wrap;}
.visibility-settings legend {padding:0 8px 0 0;font-size:14px;font-weight:700;}
.visibility-settings label {display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:15px;cursor:pointer;}
.visibility-settings input {width:20px;height:20px;min-height:20px;padding:0;accent-color:var(--blue);}
.management-link .muted {margin:8px 0 0;font-size:13px;}
.compact-dialog {width:400px;}
.compact-dialog h2 {font-size:22px;margin-top:0;}
.compact-dialog>p {font-size:14px;line-height:1.8;}
#qr-code {max-width:280px;width:100%;margin:0 auto 20px;background:var(--cream);}
#qr-code svg {display:block;width:100%;height:auto;}
.copy-actions {display:grid;gap:12px;}
.archives-dialog {width:600px;}
.archive-note {margin:0 0 18px;}
.archive-item {padding:18px 0;border-top:1px solid #d7c59e;}
.archive-heading {display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.archive-heading h3 {font-size:17px;margin:0;overflow-wrap:anywhere;}
.archive-heading p {margin:4px 0 0;font-size:13px;}
.archive-controls {display:flex;flex:none;}
.archive-item details {margin-top:12px;}
.archive-item summary {font-size:14px;cursor:pointer;min-height:44px;line-height:44px;}
.danger {color:#a23e32;}
.danger-button {background:#a23e32;border-color:#8e372d;}
.toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 18px;border-radius:6px;background:#283d50;color:white;box-shadow:0 4px 20px #18213630;font-size:14px;line-height:1.6;max-width:calc(100vw - 32px);width:max-content;z-index:100;pointer-events:none;}
#clipboard-text {min-height:160px;resize:vertical;font-size:14px;}
@media(max-width:1050px) {.room-toolbar {padding-inline:24px;}.room-notice {width:calc(100% - 48px);}}
@media(max-width:760px) {
  .room-toolbar {padding:16px 18px 0;flex-wrap:wrap;gap:10px;}
  .room-identity {flex-basis:100%;}
  .room-actions {width:100%;display:grid;grid-template-columns:1fr 1fr auto;gap:6px;}
  .room-actions .text-button {border:1px solid #bcaa85;background:var(--cream);padding-inline:12px;}
  .layout {padding-top:20px;}
  .room-notice {width:auto;margin-inline:18px;}
  .board-title {font-size:36px;}
  .history-list .history-row {padding:13px 2px;}
  .setup-screen {padding-inline:18px;margin-top:24px;}
  .setup-card {padding:22px 18px;}
  .entry-screen {margin-top:36px;padding-inline:18px;}
  .entry-card {padding:24px;}
}
@media(max-width:380px) {
  .setup-screen {padding-inline:12px;}
  .setup-card {padding-inline:14px;}
  .prize-columns,.prize-input-row {grid-template-columns:30px minmax(0,1fr) 72px 44px;gap:6px;}
  .prize-input-row .rank-badge {width:30px;height:30px;font-size:12px;}
  .prize-input-row input {padding-inline:6px;}
  .room-toolbar {padding-inline:14px;}
  .room-notice {margin-inline:14px;}
  .room-actions .text-button {padding-inline:8px;font-size:13px;gap:6px;}
  .board-title {font-size:30px;}
  .settings-heading h2 {font-size:20px;}
}

/* Warm stationery stock, painted signs and five printing inks. */
.title-red { color:var(--red); }
.brand { color:var(--blue-deep); }
.period-field { margin-top:24px; }
.duration-input { display:flex; align-items:center; gap:10px; }
.duration-input input { width:96px; text-align:right; }
.duration-input .muted { margin-left:6px; font-size:13px; }
.field-help { font-size:13px; line-height:1.65; color:#726550; margin:8px 0 0; }
.board-expiry { margin:5px 0 0; font-size:12px; line-height:1.6; text-align:left; color:#59451e; }
#settings-expiry { min-height:46px; }
#qr-code { background:white; }
.board-expiry,#join-expiry,#create-period-preview { display:flex; flex-wrap:wrap; column-gap:8px; row-gap:0; }
.period-start,.period-end { white-space:nowrap; }
.period-setting-start { margin:0 0 10px; }
.period-duration-label { margin-top:16px; }
input:disabled { opacity:1; color:#726550; background:#eaddbf; }
#room-retention { color:#665020; font-size:11px; margin-top:2px; }
#save-closed-records { margin-top:8px; }