:root { color-scheme: light dark; --bg: #f6f5f0; --surface: #fffefa; --text: #21372f; --muted: #52675e; --line: #d4dcd3; --accent: #214e40; --on-accent: #fff; --soft: #e8efdf; --purple: #e8e2f5; --danger: #a42c30; --focus: #8b3cf0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.55; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, .button { min-height: 48px; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); color: var(--text); cursor: pointer; font-weight: 650; }
button:hover, .button:hover { border-color: var(--accent); }
button:disabled { opacity: .55; cursor: default; }
button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button.danger { color: var(--danger); }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 10; background: var(--surface); padding: 1rem; }
.skip-link:focus { top: 1rem; }
.site-header { max-width: 1040px; margin: auto; padding: 1.8rem 1.5rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brand { color: var(--text); font-size: 1.8rem; font-weight: 850; letter-spacing: -.08em; text-decoration: none; display: flex; align-items: center; }
.brand-icon { letter-spacing: 0; background: var(--accent); color: var(--on-accent); border-radius: .7rem; width: 42px; height: 42px; display: grid; place-items: center; margin-right: .6rem; }
.brand-dot { color: var(--accent); }
.header-note, .eyebrow { font-size: .72rem; font-weight: 750; letter-spacing: .16em; }
.header-note { color: var(--muted); }
nav { display: flex; gap: .35rem; max-width: 1000px; margin: 0 auto 2.5rem; padding: .5rem 1rem; border-bottom: 1px solid var(--line); }
nav button { background: transparent; border-color: transparent; font-size: .9rem; }
nav button[aria-current="page"] { background: var(--soft); color: var(--accent); }
nav span { margin-right: .35rem; }
main { max-width: 900px; margin: auto; padding: 0 1.5rem; min-height: 55vh; }
main:focus { outline: none; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.055em; line-height: 1.1; margin: .7rem 0 1rem; }
h2 { font-size: 1.25rem; letter-spacing: -.025em; margin: 0 0 .8rem; }
h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
p { margin: .5rem 0 1rem; }
.intro { color: var(--muted); max-width: 42rem; }
.eyebrow { color: var(--accent); }
.panel { padding: clamp(1.1rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: 1.3rem; margin: 1.25rem 0; }
.empty { text-align: center; padding: 3rem 1.25rem; }
.empty-symbol { margin: 0 auto 1.5rem; width: 90px; height: 90px; display: grid; place-items: center; border-radius: 1.6rem; font-size: 3.2rem; background: var(--purple); transform: rotate(-8deg); }
.empty p { max-width: 30rem; margin: 1rem auto 1.5rem; color: var(--muted); }
.row, .actions, .section-heading { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.section-heading { justify-content: space-between; margin: .5rem 0 1rem; }
.section-heading h2 { margin: 0; }
.section-heading button { font-size: .9rem; }
label.field { display: grid; gap: .45rem; margin: 0 0 1rem; font-weight: 650; }
input[type="text"], select { width: 100%; min-height: 50px; padding: .7rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); color: var(--text); }
.category-select { max-width: 32rem; }
fieldset { margin: 1rem 0; padding: 0; border: 0; min-width: 0; }
legend { font-weight: 700; margin-bottom: .65rem; }
.choices { display: grid; gap: .6rem; }
.check { display: flex; align-items: center; gap: .8rem; min-height: 50px; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: .75rem; cursor: pointer; overflow-wrap: anywhere; }
.check:has(input:checked) { background: var(--soft); border-color: #96ad92; }
.check input { width: 21px; height: 21px; flex: 0 0 21px; accent-color: var(--accent); }
.check span { min-width: 0; }
.check small { display: block; color: var(--muted); font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips .check { border-radius: 2rem; font-size: .9rem; }
.hint { color: var(--muted); font-size: .9rem; }
.draw-panel { background: var(--soft); padding: 1.5rem; border-radius: 1.2rem; text-align: center; margin-top: 1.5rem; }
.draw-button { width: min(100%, 26rem); font-size: 1.3rem; min-height: 64px; }
.draw-panel p { margin: .9rem 0 0; }
.sensor { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.sensor button { font-size: .9rem; }
.result-view { text-align: center; padding: 2rem 0; }
.result-label { display: inline-block; background: var(--purple); padding: .5rem 1rem; border-radius: 2rem; font-size: .85rem; font-weight: 650; }
.result-name { font-size: clamp(2.7rem, 11vw, 8rem); line-height: 1.12; letter-spacing: -.045em; margin: 3rem 0; overflow-wrap: anywhere; }
.result-view .actions { justify-content: center; }
.result-view .primary { min-width: 190px; }
.ready-view { max-width: 650px; margin: 0 auto; text-align: center; padding: .5rem 0 2rem; }
.draw-meta { display: flex; justify-content: space-between; gap: .7rem; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.draw-meta span:first-child { color: var(--text); font-weight: 700; }
.ready-badge { color: var(--accent); font-weight: 750; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; margin-top: 2rem; }
.ready-title { font-size: clamp(2.5rem, 9vw, 5rem); }
.ready-help { color: var(--muted); max-width: 28rem; margin: 0 auto; min-height: 3.1rem; }
.shake-orbit { position: relative; margin: 2rem auto; width: min(70vw, 240px); height: 240px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; }
.phone-shape { width: 83px; height: 138px; border: 3px solid var(--accent); border-radius: 22px; background: var(--surface); color: var(--accent); display: grid; place-items: center; font-size: 2.2rem; transform: rotate(-9deg); }
.sensor-ready .phone-shape { animation: phone-wiggle .5s ease-in-out 4 alternate; }
.dice-shape { color: var(--accent); font-size: 5rem; }
.name-slip { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: .65rem; padding: .45rem .65rem; font-size: .8rem; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slip-0 { top: 5px; left: -16px; transform: rotate(-12deg); }
.slip-1 { top: 95px; right: -26px; transform: rotate(10deg); }
.slip-2 { bottom: 5px; left: -8px; transform: rotate(-5deg); }
.ready-actions { display: grid; gap: .55rem; justify-items: center; }
button.text-button { background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; font-size: .9rem; }
.mixing-stage { margin: 2.5rem auto; max-width: 650px; }
.name-reel { display: grid; place-items: center; min-height: 190px; border-radius: 1.4rem; background: var(--purple); padding: 1.5rem; margin-top: 2rem; font-size: clamp(1.5rem, 6vw, 3.7rem); line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; animation: reel-breathe .45s ease-in-out 7 alternate; }
.name-reel span { min-width: 0; max-width: 100%; }
.winner-reveal { animation: winner-reveal .5s ease-out; }
.order-tools { display: flex; gap: .3rem; flex-wrap: wrap; }
.order-tools button { padding: .5rem .7rem; }
.drag-handle { touch-action: none; cursor: grab; font-size: 1.4rem; }
.drag-handle:active { cursor: grabbing; }
.sortable-entity { flex-wrap: wrap; }
.sortable-entity .entity-info { flex: 1 1 180px; }
.sortable-entity.drop-target { background: var(--soft); box-shadow: inset 0 -3px var(--accent); }
@keyframes phone-wiggle { to { transform: translateX(10px) rotate(12deg); } }
@keyframes reel-breathe { to { transform: scale(.97); } }
@keyframes winner-reveal { from { transform: translateY(14px) scale(.94); opacity: .2; } to { transform: none; opacity: 1; } }
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.5rem 0; }
.tabs button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.entity-list { list-style: none; margin: 1rem 0; padding: 0; }
.entity { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); padding: 1rem 0; }
.entity > div:first-child { min-width: 0; }
.entity .actions { flex-shrink: 0; }
.entity p { margin: 0; }
.error, .status { max-width: 900px; margin: 1rem auto; padding: .75rem 1.5rem; overflow-wrap: anywhere; }
.error { border: 2px solid var(--danger); border-radius: .8rem; background: var(--surface); color: var(--danger); }
.status { min-height: 3rem; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 1rem 1rem 2rem; }
input[type="file"] { width: 100%; padding: .7rem 0; }
.file-field { display: block; font-weight: 650; margin-top: 1rem; }
.editor { border: 2px solid var(--accent); }
@media (min-width: 650px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .header-note { display: none; } nav { padding-inline: .5rem; gap: 0; } nav button { padding: .6rem .35rem; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .85rem; line-height: 1.25; } nav span { margin: 0; } main { padding-inline: 1rem; } .entity { align-items: flex-start; flex-direction: column; } .sortable-entity .entity-info { flex: initial; } }
@media (prefers-color-scheme: dark) { :root { --bg: #14231e; --surface: #1b2e26; --text: #f0f3e9; --muted: #b7c8bc; --line: #455c4e; --accent: #c0dfac; --on-accent: #173622; --soft: #2c4432; --purple: #493d60; --danger: #ffabab; --focus: #d0a7ff; } .check:has(input:checked) { border-color: #8fae80; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }