/* Kvarcműhely — the workshop UI in the cel + ink style: wood, brass, cream paper, thick black outlines.
   Phone: full screen, panels above and below the scene. Wide screens (.game.wide): the scene fills the
   window, the question sits on top, the input at the bottom, result and summary panels on the right. */
:root {
  --ink: #140c08; --woodD: #2e1c12; --woodM: #5c3a22; --woodL: #8c5c34; --woodT: #b5844f;
  --brassD: #6e4f1e; --brass: #c29a46; --brassL: #f2d68c; --paper: #fff6e6;
  --kavics: #b8b0a4; --kvarc: #b583ff; --borostyan: #ffb03a; --rubin: #ff4058; --gyemant: #ffffff;
  --hot: #ff4a3a;
  --fh: "Bangers", Impact, sans-serif; --fb: "Patrick Hand", "Comic Sans MS", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #1f1917; color: var(--ink); font: 17px/1.35 var(--fb); overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
.loading { color: var(--brassL); text-align: center; margin-top: 40vh; font-family: var(--fh); font-size: 24px; letter-spacing: .05em; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Keyboard focus: an ink ring on paper, a brass ring over the dark scene. */
:is(.sheet, .cabinet, .suggest) :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
:is(.head, .form) :focus-visible { outline: 3px solid var(--brassL); outline-offset: 2px; }

.game { position: fixed; left: 0; right: 0; top: 0; height: 100%; overflow: hidden; background: #1f1917; }
.stage { position: absolute; inset: 0; }
.stage canvas { display: block; width: 100%; height: 100%; }
.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3; background: radial-gradient(circle at 50% 45%, #fff, #fffdf2ee 30%, #e6f2ff99 60%, #fff0 85%); }
.ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.ui button, .ui input, .ui .sheet, .ui .vitrin, .ui .plaque { pointer-events: auto; }

/* Header: today's five stones, the name, sound, the vitrine, the timer. */
.head { position: absolute; top: env(safe-area-inset-top); left: 0; right: 0; height: 54px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: linear-gradient(#000b, #0000); }
.slots { display: flex; gap: 4px; }
.slots i { width: 14px; height: 14px; background: #0007; border: 2px solid var(--woodL); }
.slots i.cur { border-color: var(--brassL); }
.slots i.done { border-color: var(--ink); }
.slots i.done.kavics { background: var(--kavics); } .slots i.done.kvarc { background: var(--kvarc); } .slots i.done.borostyan { background: var(--borostyan); }
.slots i.done.rubin { background: var(--rubin); } .slots i.done.gyemant { background: #fff; box-shadow: 0 0 8px #fff; } .slots i.done.none { background: var(--ink); border-color: var(--kavics); }
.brand { flex: 1; min-width: 0; font: 25px/1 var(--fh); letter-spacing: .04em; color: var(--brassL); -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--ink); white-space: nowrap; overflow: hidden; }
.brand #num { font-size: 15px; color: var(--brassL); margin-left: 4px; -webkit-text-stroke: 0; text-shadow: none; }

.tag { font: 14px var(--fh); letter-spacing: .06em; background: var(--brassL); border: 2px solid var(--ink); padding: 1px 6px; text-transform: uppercase; }
/* 44 px touch targets; the negative margin keeps the header laid out as for 34 px icons. */
.iconbtn { width: 44px; height: 44px; margin: 0 -5px; border: 0; padding: 0; background: none; position: relative; flex: none; }
.help { font: 27px/44px var(--fh); color: var(--brassL); -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--ink); }
.mute::before { content: ""; position: absolute; inset: 14px 16px 14px 11px; background: var(--brassL); clip-path: polygon(0 30%, 35% 30%, 75% 0, 75% 100%, 35% 70%, 0 70%); }
.mute::after { content: ""; position: absolute; right: 9px; top: 16px; width: 6px; height: 12px; border: 2px solid var(--brassL); border-left: 0; border-radius: 0 8px 8px 0; }
.mute.off::after { border: 0; width: 12px; height: 2px; top: 21px; right: 7px; background: var(--hot); transform: rotate(45deg); border-radius: 0; }
/* A tiny cabinet: frame, two shelves, three stones. */
.cab::before { content: ""; position: absolute; inset: 11px 13px; border: 2px solid var(--brassL); background: linear-gradient(var(--brassL), var(--brassL)) 0 45% / 100% 2px no-repeat; }
.cab::after { content: ""; position: absolute; left: 17px; top: 15px; width: 4px; height: 4px; background: var(--kvarc); box-shadow: 6px 0 var(--rubin), 0 9px var(--borostyan), 6px 9px #fff; }
.timer { min-width: 50px; height: 38px; display: grid; place-items: center; background: var(--brassL); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.timer b { font: 28px/1 var(--fh); color: var(--ink); font-variant-numeric: tabular-nums; }
.timer.hot { background: var(--hot); animation: pulse 1s steps(2, jump-none) infinite; } .timer.hot b { color: #fff; }
.timer.stopped { background: #d9c08a; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .timer.hot { animation: none; } }

/* The question: a wooden plaque with an ink outline. */
.plaque { position: absolute; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 60px); padding: 9px 13px 11px; background: var(--woodT); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.kicker { font: 15px var(--fh); letter-spacing: .08em; text-transform: uppercase; color: var(--woodM); }
.plaque .kicker { color: var(--woodD); }
.prompt { font: 24px/1.15 var(--fb); margin: 3px 0 0; text-wrap: balance; }

/* Bottom: feedback, suggestion, wrong guesses, the input strip. */
.bottom { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 14px); display: flex; flex-direction: column; gap: 6px; }
.feedback { font-size: 19px; color: var(--ink); background: var(--hot); border: 3px solid var(--ink); align-self: flex-start; padding: 3px 10px; }
.feedback:empty { display: none; }
.feedback.bump { animation: bump .35s; }
@keyframes bump { 30% { transform: translateX(-6px); } 60% { transform: translateX(5px); } }
.suggest { background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 8px 10px; font: 18px var(--fh); letter-spacing: .04em; }
.suggest .opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.suggest button { font: 18px var(--fb); background: var(--brassL); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 4px 12px; }
.suggest button.no { background: var(--paper); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips span { font-size: 15px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); text-decoration: line-through; padding: 0 6px; }
.form { display: flex; gap: 6px; padding: 6px; background: var(--woodL); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.form input { flex: 1; min-width: 0; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font: 20px var(--fb); padding: 7px 10px; outline: none; border-radius: 0; }
.form input:focus { box-shadow: 0 0 0 2px var(--brassL); }
.form input::placeholder { color: #7a5a40; opacity: 1; }
.form button, .btn { border: 3px solid var(--ink); background: var(--brassL); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 20px var(--fh); letter-spacing: .06em; padding: 7px 14px; }
.form button:active, .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn { display: block; width: 100%; margin-top: 10px; padding: 10px 14px; }
.btn.alt { background: var(--paper); }

/* Sheets: intro, result, summary, no puzzle. Cream paper rising from the bottom. */
.sheet { position: absolute; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 12px); max-height: calc(100% - 140px); overflow-y: auto; padding: 12px 14px 14px; background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); animation: rise .45s cubic-bezier(.2, 1.3, .45, 1) both; scrollbar-width: thin; }
.sheet.intro { max-height: calc(100% - 80px); }
@keyframes rise { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.title { font: 30px/1.05 var(--fh); letter-spacing: .03em; margin: 4px 0 8px; }
.rules { margin: 0 0 10px; padding-left: 20px; } .rules li { margin-bottom: 4px; }
.when { margin: -2px 0 10px; font-size: 15px; color: var(--woodM); }
.sheet.intro p { margin: 0 0 4px; }
.sheet.intro .hint { margin-top: 10px; text-align: center; }
.cabinet.rulesbox { max-width: 560px; }
.rulesbox .rules { margin-top: 4px; }
.legend { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 10px; align-items: center; padding: 8px 10px; background: var(--woodD); color: var(--paper); border: 2px solid var(--ink); }
.legend .rng { color: var(--woodT); }
.legend .tn { -webkit-text-stroke: 0; }
.tn { font: 19px var(--fh); letter-spacing: .05em; -webkit-text-stroke: 1px var(--ink); }
.tn-kavics { color: var(--kavics); } .tn-kvarc { color: var(--kvarc); } .tn-borostyan { color: var(--borostyan); } .tn-rubin { color: var(--rubin); }
.tn-gyemant { color: #fff; text-shadow: 0 0 6px #9fd8ff; } .tn-timeout { color: var(--woodL); -webkit-text-stroke: 0; }
.small { font-size: 15px; color: var(--woodM); }
.note { background: #ffe7a3; border: 2px solid var(--ink); padding: 6px 10px; margin-bottom: 8px; font-size: 15px; }
.res-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tier { font: 46px/1 var(--fh); letter-spacing: .04em; -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
[data-tier="kavics"] .tier { color: var(--kavics); } [data-tier="kvarc"] .tier { color: var(--kvarc); } [data-tier="borostyan"] .tier { color: var(--borostyan); }
[data-tier="rubin"] .tier { color: var(--rubin); } [data-tier="gyemant"] .tier { color: #fff; text-shadow: 3px 3px 0 var(--ink), 0 0 18px #9fd8ff; } [data-tier="timeout"] .tier { color: var(--woodL); font-size: 36px; }
.pts { font: 22px var(--fh); letter-spacing: .03em; color: var(--ink); white-space: nowrap; }
.ans { font-size: 22px; margin-top: 2px; }
.share .pc { font-size: 15px; color: var(--woodM); white-space: nowrap; }
/* The tier scale on the result sheet: five tiers from common to rare, the player's raised in its colour. */
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 12px 0 2px; }
.st { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 8px 0 5px; background: #efe2c8; color: var(--woodM); border: 2px solid var(--ink); box-shadow: inset 0 5px 0 var(--c); }
.st b { font: 18px/1 var(--fh); letter-spacing: .03em; color: var(--ink); }
.st span { font-size: 12px; white-space: nowrap; }
.st.on { padding-top: 5px; background: var(--c); color: var(--ink); border-width: 3px; box-shadow: 3px 3px 0 var(--ink); transform: translateY(-3px); }
.st-kavics { --c: var(--kavics); } .st-kvarc { --c: var(--kvarc); } .st-borostyan { --c: var(--borostyan); } .st-rubin { --c: var(--rubin); } .st-gyemant { --c: #fff; } .st-gyemant:not(.on) { box-shadow: inset 0 5px 0 #9fd8ff; }
.scale-ends { display: flex; justify-content: space-between; font-size: 14px; color: var(--woodM); margin: 2px 0 10px; }
.share { margin: 3px 0 10px; }
.top3 { list-style: none; margin: 4px 0 0; padding: 0; }
.top3 li { position: relative; display: flex; justify-content: space-between; padding: 4px 8px; margin-bottom: 4px; z-index: 0; font-size: 18px; }
.top3 .bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * .8); z-index: -1; background: var(--brassL); border: 2px solid var(--ink); }
.top3 li.tb-kavics .bar { background: var(--kavics); } .top3 li.tb-kvarc .bar { background: var(--kvarc); } .top3 li.tb-borostyan .bar { background: var(--borostyan); }
.top3 li.tb-rubin .bar { background: var(--rubin); } .top3 li.tb-gyemant .bar { background: #fff; }
.top3 li.mine .bar { border-width: 3px; box-shadow: 2px 2px 0 var(--ink); }
.top3 em { font-style: normal; }
.top3 .p { font-variant-numeric: tabular-nums; }
.total { font: 60px/1 var(--fh); letter-spacing: .03em; margin: 2px 0 4px; } .total b { color: var(--brassL); -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--ink); font-weight: normal; }
.emoji { font-size: 30px; letter-spacing: 6px; margin-bottom: 6px; }
.total { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stamp { font: 18px/1 var(--fh); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--brassL); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 5px 9px 4px; transform: rotate(-6deg); }
.ctx { margin: 0 0 8px; font-size: 16px; color: var(--woodM); } .ctx b { color: var(--ink); font-weight: normal; }
/* The share ticket: the exact text that is copied, selectable in one tap. */
.ticket { margin: 0 0 10px; padding: 8px 12px 9px; background: #fffdf7; border: 2px dashed var(--ink); font: 17px/1.3 var(--fb); -webkit-user-select: all; user-select: all; cursor: text; overflow-wrap: anywhere; }
.ticket .big { font-size: 26px; letter-spacing: 4px; line-height: 1.25; }
.ticket ::selection, .ticket::selection { background: var(--brassL); color: var(--ink); }
.rows { list-style: none; margin: 0 0 4px; padding: 0; }
.rows li { padding: 6px 0; border-top: 2px dashed #d7c6a6; }
.rows summary { display: grid; grid-template-columns: 1fr auto 34px; grid-template-areas: "q q q" "a t p"; gap: 1px 8px; align-items: baseline; cursor: pointer; list-style: none; }
.rows summary::-webkit-details-marker { display: none; }
.rows summary .q::before { content: ""; display: inline-block; margin-right: 6px; vertical-align: 1px; border: 5px solid transparent; border-left: 7px solid var(--woodM); border-right: 0; transition: transform .15s; }
.rows details[open] summary .q::before { transform: rotate(90deg); }
.rows summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rows .all { margin: 6px 0 2px; padding: 6px 8px; background: #f3e6cc; border: 2px solid var(--ink); }
.rows .grp { margin: 3px 0; font-size: 15px; line-height: 1.3; }
.rows .grp .tn { font-size: 15px; padding: 0 5px; }
.rows .grp b { font: 15px var(--fh); letter-spacing: .04em; }
.rows mark { background: var(--brassL); color: var(--ink); border: 1px solid var(--ink); padding: 0 3px; }
.rows .q { grid-area: q; font-size: 15px; line-height: 1.2; color: var(--woodM); }
.rows .a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .a { grid-area: a; } .rows .tn { grid-area: t; font-size: 17px; -webkit-text-stroke: 0; background: var(--woodD); padding: 1px 6px 0; }
.rows .tn-timeout { background: none; color: var(--woodM); } .rows b { grid-area: p; text-align: right; font: 18px var(--fh); }
.answers { margin: 10px 0 4px; }
.privacy { font-size: 16px; } .privacy p { margin: 4px 0; } .privacy ul { margin: 4px 0; padding-left: 20px; } .privacy li { margin-bottom: 3px; }
.privacy a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.top3box { margin: 0 0 4px; }
.top3box summary { font: 15px var(--fh); letter-spacing: .08em; text-transform: uppercase; color: var(--woodM); cursor: pointer; list-style: none; padding: 4px 0; }
.top3box summary::-webkit-details-marker { display: none; }
.answers > summary { font: 16px var(--fh); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; list-style: none; padding: 4px 0; }
.answers > summary::-webkit-details-marker { display: none; }
:is(.answers, .top3box) > summary::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 8px; vertical-align: 1px; border: 6px solid transparent; border-left: 8px solid var(--ink); border-right: 0; transition: transform .15s; }
:is(.answers, .top3box)[open] > summary::before { transform: rotate(90deg); }
:is(.answers, .top3box) > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.row2 { display: flex; gap: 8px; } .row2 .btn { flex: 1; }
.countdown { text-align: center; margin-top: 10px; } .countdown b { font: 22px var(--fh); letter-spacing: .05em; }
.picker { margin-top: 12px; }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.days button { font: 17px var(--fh); letter-spacing: .04em; background: var(--brassL); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 6px 0; }

/* The full vitrine (stats): a cabinet with a shelf per week. */
.vitrin { position: absolute; inset: 0; overflow-y: auto; padding: calc(env(safe-area-inset-top) + 10px) 10px 18px; background: #0d0907d9; z-index: 4; }
.cabinet { max-width: 720px; margin: 0 auto; padding: 12px 12px 14px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.vt-head { display: flex; justify-content: space-between; align-items: flex-start; }
.vt { font: 38px/1 var(--fh); letter-spacing: .03em; margin: 2px 0 10px; }
.close { border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--brassL); font: 18px var(--fh); letter-spacing: .05em; padding: 5px 12px; }
.totals { display: flex; justify-content: space-between; gap: 4px; padding: 8px 6px 10px; background: var(--brassL); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tot { display: flex; flex-direction: column; align-items: center; min-width: 0; flex: 1; }
.tot img.big, .tot .emo.big { width: 52px; height: 52px; font-size: 34px; display: grid; place-items: center; }
.tot b { font: 22px var(--fh); } .tot span { font-size: 13px; color: var(--woodM); text-transform: uppercase; letter-spacing: .04em; }
.vstats { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin: 12px 2px; }
.vstats b { font: 22px var(--fh); margin-right: 3px; }
.shelfrow { margin-bottom: 12px; padding: 4px 8px 6px; background: var(--brassL); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.wk { display: flex; justify-content: space-between; font: 15px var(--fh); letter-spacing: .08em; text-transform: uppercase; padding: 2px 0 4px; }
.day { display: grid; grid-template-columns: 54px 1fr 40px; align-items: center; gap: 6px; }
.day.today { background: #fff6; }
.dl { font: 16px var(--fh); letter-spacing: .04em; }
.stones { display: flex; gap: 2px; }
.stones img, .stones .emo { width: 34px; height: 34px; font-size: 22px; display: grid; place-items: center; }
.dp { text-align: right; font: 17px var(--fh); }
.empty { padding: 14px 4px; font-size: 18px; }
.toast { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 176px); transform: translateX(-50%); z-index: 6; background: var(--brassL); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 18px var(--fb); padding: 6px 12px; max-width: 90%; text-align: center; }

/* Tablets in portrait: keep the panels phone-sized. */
@media (min-width: 600px) { .game:not(.wide) :is(.sheet, .plaque, .bottom) { max-width: 560px; margin: 0 auto; } }

/* ── wide screens: the scene fills the window, panels sit on the right ─────── */
.game.wide .head { padding: 0 22px; height: 64px; }
.game.wide .brand { font-size: 32px; }
.game.wide .plaque { left: 50%; right: auto; width: min(720px, 56vw); transform: translateX(-50%); top: 72px; padding: 12px 18px 14px; transition: left .4s; }
.game.wide .prompt { font-size: 30px; }
.game.wide .bottom { left: 50%; right: auto; width: min(580px, 48vw); transform: translateX(-50%); bottom: 26px; transition: left .4s; }
.game.wide .sheet { left: auto; right: 24px; top: 82px; bottom: auto; width: 420px; max-height: calc(100% - 106px); animation-name: slide; }
.game.wide[data-ui="sheet"] .plaque { left: calc((100% - 444px) / 2); width: min(640px, calc(100vw - 500px)); }
@keyframes slide { from { transform: translateX(80px); opacity: 0; } to { transform: none; opacity: 1; } }
.game.wide .sheet.result { top: auto; bottom: 24px; }
.game.wide .vitrin { padding-top: 40px; }
@media (max-height: 640px) { .game.wide .sheet { top: 72px; max-height: calc(100% - 84px); } .game.wide .sheet.result { bottom: 12px; } .game.wide .plaque { top: 66px; } }

/* Narrow phones: during a round the header shows the day number instead of a clipped name;
   on the other screens the name alone (the sheets carry the number). */
@media (max-width: 440px) {
  .brand { font-size: 22px; }
  .game:is([data-screen="round"], [data-screen="submitting"], [data-screen="result"]) .bname { display: none; }
  .game:is([data-screen="round"], [data-screen="submitting"], [data-screen="result"]) .brand #num { margin: 0; font-size: 22px; -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--ink); }
  .game:not([data-screen="round"], [data-screen="submitting"], [data-screen="result"]) .brand #num { display: none; }
  .qbox.long .prompt { font-size: 21px; }
  .totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 4px; }
  .res-head { flex-wrap: wrap; row-gap: 2px; }
}
/* The smallest phones (320 px): smaller tier headline and vitrine stones. */
@media (max-width: 360px) {
  .tier { font-size: 40px; }
  .day { grid-template-columns: 46px 1fr 34px; gap: 4px; }
  .stones img, .stones .emo { width: 28px; height: 28px; font-size: 18px; }
}