:root { --navy: #0b2563; --blue: #1c50c0; --yellow: #ffd966; --ink: #fff; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--navy); color: var(--ink); font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif; overflow: hidden; }

#wrap { position: fixed; inset: 0; display: grid; place-items: center; }
#board { width: 100vw; height: 100vh; display: block; }
#pen, #eraser { transition: opacity .25s; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(4, 18, 60, .45)); }

#bar { position: fixed; left: 0; right: 0; bottom: 0; height: 58px; display: flex; align-items: center; gap: 22px; padding: 0 22px;
  background: rgba(7, 26, 78, .82); backdrop-filter: blur(6px); border-top: 1px solid rgba(255, 255, 255, .14); transition: transform .3s; }
#bar[hidden] { display: none; }
body.clean #bar { transform: translateY(100%); }
#state { display: flex; align-items: center; gap: 10px; min-width: 150px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
#meter { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
#meter i { width: 3px; height: 4px; border-radius: 2px; background: var(--yellow); transition: height .09s; }
body[data-state='thinking'] #meter i, body[data-state='sketching'] #meter i { background: #7ce7d6; }
#heard { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
#heard-text { margin: 0; white-space: nowrap; float: right; font-size: 17px; color: rgba(255, 255, 255, .82); }
#heard-text em { font-style: normal; color: #fff; }
#side { display: flex; align-items: center; gap: 14px; font-size: 13px; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; white-space: nowrap; }
#full { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
#full:hover { background: rgba(255, 255, 255, .14); }

#start { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(7, 26, 78, .6); backdrop-filter: blur(3px); overflow: auto; }
#start[hidden] { display: none; }
.card { width: min(640px, 100%); padding: 34px 36px 26px; border-radius: 18px; background: #fff; color: #10224d; box-shadow: 0 30px 80px rgba(3, 12, 44, .5); }
.card h1 { margin: 0 0 10px; font: 400 38px/1.1 'Permanent Marker', system-ui, sans-serif; color: var(--blue); }
.lead { margin: 0 0 22px; font-size: 16px; color: #33456f; text-wrap: pretty; }
.choices { display: grid; gap: 10px; }
.choices button, .choices label { display: grid; gap: 2px; width: 100%; padding: 14px 18px; border: 2px solid #d5def3; border-radius: 12px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.choices button:hover, .choices label:hover { border-color: var(--blue); background: #f2f6ff; }
.choices button:first-child { border-color: var(--blue); background: var(--blue); color: #fff; }
.choices button:first-child:hover { background: #163f9c; }
.choices button:first-child span { color: rgba(255, 255, 255, .8); }
.choices b { font-size: 17px; }
.choices span { font-size: 14px; color: #5b6b90; }
.choices :is(button, label):focus-visible, select:focus-visible, #full:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lang { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: #33456f; }
.lang select { padding: 7px 10px; border: 1px solid #c3cee8; border-radius: 8px; background: #fff; color: inherit; font: inherit; }
#start-error { margin: 12px 0 0; min-height: 0; font-size: 14px; color: #b3261e; }
#start-error:empty { display: none; }
.fine { margin: 16px 0 0; font-size: 12.5px; color: #6c7a9c; }
body.busy .choices { opacity: .5; pointer-events: none; }

@media (max-width: 640px) {
  .card { padding: 24px 20px 20px; }
  #state { min-width: 0; }
  #state-text, #next { display: none; }
}
@media (prefers-reduced-motion: reduce) { #bar, #pen, #eraser { transition: none; } }