:root {
    --ink: #141727;
    --muted: #70758b;
    --line: #e7e9f1;
    --paper: #ffffff;
    --purple: #7657ff;
    --purple-dark: #5b3fe0;
    --cyan: #3ad8e3;
    --green: #29bd83;
    --danger: #e5546d;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --shadow: 0 20px 50px rgba(23, 27, 56, .10);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
svg { width: 1.25em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(118, 87, 255, .35); outline-offset: 3px; }
[hidden] { display: none !important; }

.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; }
.eyebrow { display: block; color: #8e94ad; font-size: .7rem; font-weight: 800; letter-spacing: .17em; line-height: 1.2; text-transform: uppercase; }

/* Game */
.game-page {
    position: relative;
    overflow-x: hidden;
    background: #090b16;
    color: #f7f8ff;
}

.game-page::before {
    position: fixed;
    inset: 0;
    z-index: -3;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 52px 52px;
    content: "";
    mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

.ambient { position: fixed; z-index: -2; width: 42rem; height: 42rem; border-radius: 50%; filter: blur(100px); opacity: .16; pointer-events: none; }
.ambient-one { top: -25rem; left: -10rem; background: #7657ff; }
.ambient-two { right: -20rem; top: 22rem; background: #25d3df; }

.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1440px, calc(100% - 56px));
    height: 88px;
    margin: auto;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand { display: inline-flex; align-items: center; gap: 13px; min-width: 0; }
.brand > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.brand strong { overflow: hidden; font-size: .97rem; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.brand small { margin-top: 2px; color: #898fa9; font-size: .68rem; }
.brand-mark { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 13px; background: linear-gradient(135deg, #886cff, #5e40e3); box-shadow: 0 8px 28px rgba(118,87,255,.38); color: white; font-weight: 900; }

.header-actions { display: flex; gap: 9px; }
.icon-button { display: grid; width: 42px; height: 42px; cursor: pointer; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.045); color: #b7bcd0; transition: .2s ease; }
.icon-button:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: white; transform: translateY(-2px); }

.game-shell { width: min(1440px, calc(100% - 56px)); margin: 28px auto 48px; }
.game-console { display: grid; grid-template-columns: minmax(240px, .78fr) minmax(500px, 1.7fr); min-height: 286px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); background: rgba(20,22,39,.75); box-shadow: 0 30px 80px rgba(0,0,0,.25); backdrop-filter: blur(18px); }

.letter-panel { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 27px; overflow: hidden; border-right: 1px solid rgba(255,255,255,.09); background: radial-gradient(circle at 50% 55%, rgba(118,87,255,.22), transparent 58%); }
.letter-panel::before { position: absolute; width: 250px; height: 250px; border: 1px solid rgba(255,255,255,.045); border-radius: 50%; content: ""; }
.letter-orbit { position: relative; display: grid; width: 150px; height: 150px; margin: 7px 0 3px; place-items: center; }
.letter-orbit::before, .letter-orbit::after { position: absolute; inset: 0; border: 1px solid rgba(139,112,255,.25); border-radius: 50%; content: ""; }
.letter-orbit::after { inset: 15px; border-style: dashed; animation: orbit 16s linear infinite; }
#letter-display { z-index: 1; font-size: clamp(4.7rem, 7vw, 6.8rem); font-weight: 900; letter-spacing: -.07em; line-height: 1; text-shadow: 0 0 38px rgba(134,102,255,.48); transition: color .3s; }
.letter-orbit.is-shuffling #letter-display { filter: blur(.6px); transform: scale(.92); }
.letter-orbit.is-picked { animation: letter-pop .55s cubic-bezier(.2,.9,.2,1); }
.round-status { z-index: 1; min-height: 20px; margin: 3px 0 0; color: #a9aec3; font-size: .82rem; font-weight: 650; }

.timer-panel { display: grid; grid-template-columns: 185px minmax(200px, 1fr) minmax(160px, .78fr); align-items: center; gap: clamp(20px, 3vw, 44px); padding: 32px clamp(28px, 4vw, 62px); }
.timer-ring { display: grid; width: 160px; aspect-ratio: 1; padding: 7px; place-items: center; border-radius: 50%; background: conic-gradient(var(--cyan) calc(var(--progress) * 1%), rgba(255,255,255,.07) 0); box-shadow: 0 0 42px rgba(58,216,227,.09); transition: background .3s; }
.timer-ring-inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; flex-direction: column; border-radius: 50%; background: #111421; box-shadow: inset 0 0 30px rgba(0,0,0,.25); }
.timer-ring strong { margin-top: 5px; font-variant-numeric: tabular-nums; font-size: 2rem; letter-spacing: -.05em; }
.timer-ring.is-urgent { background: conic-gradient(#ff5c78 calc(var(--progress) * 1%), rgba(255,255,255,.07) 0); box-shadow: 0 0 45px rgba(255,92,120,.17); }
.timer-ring.is-urgent strong { color: #ff8ca0; }
.timer-settings > label { display: block; margin-bottom: 10px; color: #a6abc0; font-size: .75rem; font-weight: 700; }
.duration-control { display: grid; grid-template-columns: 38px minmax(100px, 150px) 38px; gap: 7px; }
.step-button { display: grid; height: 42px; cursor: pointer; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.05); color: #c6cad8; font-size: 1.3rem; transition: .18s; }
.step-button:hover { background: rgba(255,255,255,.11); color: white; }
.step-button:disabled, .preset-row button:disabled { cursor: not-allowed; opacity: .38; }
.duration-input-wrap { display: flex; align-items: center; height: 42px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(4,6,13,.4); }
.duration-input-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: white; font-weight: 750; text-align: center; -moz-appearance: textfield; }
.duration-input-wrap input::-webkit-inner-spin-button { appearance: none; }
.duration-input-wrap span { padding-right: 12px; color: #71778f; font-size: .7rem; }
.preset-row { display: flex; gap: 6px; margin-top: 10px; }
.preset-row button { min-width: 48px; padding: 6px 10px; cursor: pointer; border-radius: 8px; background: transparent; color: #777d94; font-size: .68rem; font-weight: 750; }
.preset-row button:hover, .preset-row button.is-active { background: rgba(118,87,255,.16); color: #a999ff; }
.primary-actions { display: flex; flex-direction: column; gap: 9px; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; cursor: pointer; border-radius: 14px; color: white; font-weight: 800; gap: 9px; transition: .2s ease; }
.primary-button { background: linear-gradient(135deg, #8365ff, #6546e9); box-shadow: 0 12px 30px rgba(103,70,233,.3); }
.primary-button:hover { box-shadow: 0 15px 38px rgba(103,70,233,.42); transform: translateY(-2px); }
.primary-button svg { fill: currentColor; stroke: none; }
.secondary-button { border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.05); color: #cbd0df; }
.secondary-button:hover { background: rgba(255,255,255,.1); }

.categories-section { margin-top: 36px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.section-heading h1 { margin: 5px 0 0; font-size: clamp(1.4rem, 2vw, 1.8rem); letter-spacing: -.04em; }
.category-count { padding: 6px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #8d93a9; font-size: .7rem; font-weight: 750; }
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.category-card { position: relative; display: flex; align-items: center; min-height: 100px; padding: 20px 19px; overflow: hidden; border: 1px solid rgba(255,255,255,.085); border-radius: 18px; background: linear-gradient(140deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.035); isolation: isolate; transition: .22s ease; }
.category-card:hover { border-color: rgba(255,255,255,.17); background: linear-gradient(140deg, rgba(255,255,255,.105), rgba(255,255,255,.035)); transform: translateY(-3px); }
.category-number { align-self: flex-start; margin-right: 15px; color: #666c82; font-size: .65rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.category-card strong { z-index: 1; overflow-wrap: anywhere; font-size: clamp(.88rem, 1.2vw, 1.04rem); line-height: 1.25; }
.card-glow { position: absolute; right: -28px; bottom: -55px; z-index: -1; width: 110px; height: 110px; border-radius: 50%; background: hsl(calc(255 + (var(--card-index) * 19)) 85% 65%); filter: blur(36px); opacity: .12; }
.empty-state { padding: 55px 20px; border: 1px dashed rgba(255,255,255,.13); border-radius: 22px; text-align: center; }
.empty-state .empty-icon { color: var(--cyan); font-size: 2rem; }.empty-state h2 { margin: 10px 0 4px; }.empty-state p { margin: 0 0 20px; color: #9398ad; }.empty-state .primary-button { width: fit-content; margin: auto; }
.noscript { position: fixed; right: 15px; bottom: 15px; padding: 12px; border-radius: 10px; background: #d83e59; color: white; }

/* Admin */
.admin-page { background: #f5f7fb; color: var(--ink); }
.admin-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(21,25,45,.08); background: rgba(255,255,255,.86); backdrop-filter: blur(18px); }
.admin-header-inner { display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 48px)); height: 78px; margin: auto; }
.brand-dark .brand-mark { border-color: transparent; }
.brand-dark strong { color: var(--ink); }
.view-game-button { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 12px; background: #171a2c; color: white; font-size: .8rem; font-weight: 800; gap: 8px; transition: .2s; }
.view-game-button:hover { background: var(--purple); transform: translateY(-1px); }.view-game-button svg { fill: currentColor; stroke: none; }
.admin-shell { width: min(1180px, calc(100% - 48px)); margin: 42px auto 70px; }
.admin-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.admin-intro h1 { margin: 7px 0 7px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.055em; line-height: 1; }
.admin-intro p, .manager-heading p { margin: 0; color: var(--muted); font-size: .88rem; }
.admin-page .eyebrow { color: var(--purple); }
.stats { display: flex; overflow: hidden; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 8px 28px rgba(23,27,56,.05); }
.stats div { display: flex; min-width: 86px; padding: 12px 16px; flex-direction: column; text-align: center; }
.stats div + div { border-left: 1px solid var(--line); }
.stats strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }.stats span { color: var(--muted); font-size: .64rem; font-weight: 700; text-transform: uppercase; }
.toast { display: flex; align-items: center; gap: 10px; margin: -8px 0 20px; padding: 12px 15px; border-radius: 12px; font-size: .82rem; font-weight: 650; }
.toast > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; font-weight: 900; }.toast-success { background: #e9f9f2; color: #197755; }.toast-success span { background: #c7f0df; }.toast-warning { background: #fff7e4; color: #946311; }.toast-warning span { background: #ffe7ad; }.toast-error { background: #fff0f2; color: #a82d43; }.toast-error span { background: #ffd4dc; }
.creation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.creation-card { display: grid; grid-template-columns: 46px 1fr; padding: 21px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 10px 35px rgba(23,27,56,.055); gap: 0 13px; }
.creation-icon { display: grid; grid-row: 1; width: 44px; height: 44px; place-items: center; border-radius: 13px; font-size: 1.25rem; font-weight: 850; }.creation-icon-purple { background: #eeeaff; color: var(--purple); }.creation-icon-cyan { background: #ddf9fb; color: #159aa4; }
.creation-copy h2 { margin: 1px 0 3px; font-size: .98rem; letter-spacing: -.025em; }.creation-copy p { margin: 0; color: var(--muted); font-size: .72rem; }
.field-action-row { display: flex; grid-column: 1 / -1; gap: 8px; margin-top: 17px; }
.field-action-row > input, .select-wrap { min-width: 0; flex: 1; }
.field-action-row input, .select-wrap select, .rename-dialog input { width: 100%; height: 44px; border: 1px solid #dcdfeb; border-radius: 11px; outline: none; background: #fafbfe; color: var(--ink); font-size: .78rem; transition: .18s; }
.field-action-row input, .rename-dialog input { padding: 0 13px; }
.field-action-row input:focus, .select-wrap select:focus, .rename-dialog input:focus { border-color: var(--purple); background: white; box-shadow: 0 0 0 3px rgba(118,87,255,.1); }
.select-wrap { position: relative; }.select-wrap select { padding: 0 36px 0 13px; appearance: none; cursor: pointer; }.select-wrap svg { position: absolute; top: 12px; right: 11px; color: #8d92a5; pointer-events: none; }
.add-button { flex: 0 0 auto; min-height: 44px; padding: 0 17px; cursor: pointer; border-radius: 11px; background: var(--purple); color: white; font-size: .75rem; font-weight: 800; box-shadow: 0 8px 20px rgba(118,87,255,.2); transition: .18s; }.add-button:hover { background: var(--purple-dark); transform: translateY(-1px); }.add-button-cyan { background: #1cabb5; box-shadow: 0 8px 20px rgba(28,171,181,.2); }.add-button-cyan:hover { background: #148e97; }.add-button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.category-manager { margin-top: 22px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow); }
.manager-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.manager-heading h2 { margin: 0 0 4px; font-size: 1.12rem; letter-spacing: -.025em; }.drag-hint { color: #9a9eb0; font-size: .67rem; font-weight: 650; }
.category-list { display: flex; flex-direction: column; gap: 7px; }
.admin-category { display: grid; grid-template-columns: 82px minmax(0,1fr) auto; align-items: center; min-height: 72px; overflow: hidden; border: 1px solid #ebeef4; border-radius: 14px; background: #fff; transition: .18s; }.admin-category:hover { border-color: #d9ddea; box-shadow: 0 7px 22px rgba(20,23,39,.055); transform: translateY(-1px); }.admin-category.is-inactive { background: #fafbfc; }
.order-controls { display: flex; align-items: center; align-self: stretch; justify-content: center; gap: 4px; border-right: 1px solid #eef0f5; background: #fafbfe; }.order-controls form { line-height: 0; }.order-controls button { display: grid; width: 21px; height: 28px; cursor: pointer; place-items: center; background: transparent; color: #8c91a4; }.order-controls button:hover:not(:disabled) { color: var(--purple); }.order-controls button:disabled { cursor: default; opacity: .18; }.order-controls button svg { width: 16px; }.order-controls > span { width: 22px; color: #b0b4c2; font-size: .61rem; font-weight: 800; text-align: center; }
.category-identity { display: flex; align-items: center; min-width: 0; padding: 0 20px; gap: 12px; }.category-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(41,189,131,.11); }.is-inactive .category-dot { background: #b5b9c5; box-shadow: 0 0 0 4px rgba(181,185,197,.13); }.category-identity > div { display: flex; min-width: 0; flex-direction: column; }.category-identity strong { overflow: hidden; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }.is-inactive .category-identity strong { color: #85899a; }.category-identity small { margin-top: 3px; color: #9da1b0; font-size: .64rem; }
.category-actions { display: flex; align-items: center; padding: 0 13px; gap: 5px; }.toggle-form, .delete-form { display: flex; margin: 0; }.switch-button { display: flex; align-items: center; min-width: 104px; padding: 7px 10px; cursor: pointer; border-radius: 9px; background: transparent; color: #5f657a; gap: 7px; }.switch-button > span { position: relative; width: 31px; height: 18px; border-radius: 99px; background: #c9ccd5; transition: .2s; }.switch-button > span::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); content: ""; transition: .2s; }.switch-button[aria-checked="true"] > span { background: var(--green); }.switch-button[aria-checked="true"] > span::after { transform: translateX(13px); }.switch-button em { font-size: .68rem; font-style: normal; font-weight: 750; }
.row-icon-button { display: grid; width: 34px; height: 34px; cursor: pointer; place-items: center; border-radius: 9px; background: transparent; color: #9a9eae; transition: .18s; }.row-icon-button svg { width: 16px; }.row-icon-button:hover { background: #f0edff; color: var(--purple); }.delete-button:hover { background: #fff0f2; color: var(--danger); }
.admin-empty { padding: 48px 15px; border: 1px dashed var(--line); border-radius: 14px; text-align: center; }.admin-empty > span { color: var(--purple); font-size: 1.8rem; }.admin-empty h3 { margin: 8px 0 4px; }.admin-empty p { margin: 0; color: var(--muted); font-size: .8rem; }
.rename-dialog { width: min(430px, calc(100% - 30px)); padding: 0; border: 0; border-radius: 22px; box-shadow: 0 28px 90px rgba(10,12,25,.28); }.rename-dialog::backdrop { background: rgba(13,15,28,.56); backdrop-filter: blur(4px); }.rename-dialog form { position: relative; display: flex; padding: 28px; flex-direction: column; }.rename-dialog h2 { margin: 6px 0 22px; font-size: 1.45rem; letter-spacing: -.04em; }.rename-dialog label { margin-bottom: 7px; color: #5f6475; font-size: .72rem; font-weight: 750; }.dialog-close { position: absolute; top: 16px; right: 17px; width: 34px; height: 34px; cursor: pointer; border-radius: 9px; background: #f3f4f8; color: #777c8d; font-size: 1.25rem; }.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.cancel-button { padding: 0 16px; cursor: pointer; border-radius: 11px; background: #f0f1f5; color: #64697a; font-size: .75rem; font-weight: 750; }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes letter-pop { 0% { transform: scale(.78); opacity: .5; } 55% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

@media (max-width: 1050px) {
    .game-console { grid-template-columns: 240px 1fr; }
    .timer-panel { grid-template-columns: 150px 1fr; padding: 28px; }
    .timer-ring { width: 140px; }.primary-actions { grid-column: 1 / -1; flex-direction: row; }.primary-actions > * { flex: 1; }
    .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .game-header, .game-shell { width: min(100% - 32px, 700px); }
    .game-console { grid-template-columns: 1fr; }
    .letter-panel { min-height: 218px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); }.letter-orbit { width: 125px; height: 125px; }.letter-panel::before { width: 210px; height: 210px; }
    .timer-panel { grid-template-columns: 140px minmax(0,1fr); }.primary-actions { grid-column: 1 / -1; }
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .creation-grid { grid-template-columns: 1fr; }.admin-shell { margin-top: 32px; }.admin-intro { align-items: flex-start; flex-direction: column; }.stats { align-self: stretch; }.stats div { flex: 1; }
}

@media (max-width: 600px) {
    .game-header { width: calc(100% - 24px); height: 70px; }.brand small { display: none; }.brand-mark { width: 36px; height: 36px; }.game-shell { width: calc(100% - 24px); margin-top: 14px; }
    .game-console { border-radius: 22px; }.letter-panel { min-height: 190px; padding: 20px; }.letter-orbit { width: 112px; height: 112px; margin: 2px 0; }.letter-panel::before { width: 180px; height: 180px; }.round-status { margin-top: 1px; }
    .timer-panel { grid-template-columns: 106px minmax(0,1fr); gap: 15px; padding: 20px 15px; }.timer-ring { width: 106px; padding: 5px; }.timer-ring strong { font-size: 1.45rem; }.duration-control { grid-template-columns: 34px minmax(74px, 1fr) 34px; }.step-button, .duration-input-wrap { height: 38px; }.duration-input-wrap span { padding-right: 7px; }.preset-row { justify-content: center; }.preset-row button { min-width: 40px; padding-inline: 6px; }
    .primary-actions { flex-direction: column; }.primary-button, .secondary-button { min-height: 46px; }.categories-section { margin-top: 26px; }.category-grid { gap: 9px; }.category-card { min-height: 90px; padding: 16px 13px; border-radius: 15px; }.category-number { margin-right: 9px; }.category-card strong { font-size: .82rem; }
    .admin-header-inner, .admin-shell { width: calc(100% - 24px); }.admin-header-inner { height: 68px; }.view-game-button { padding: 0 12px; }.view-game-button span { display: none; }.admin-shell { margin-top: 27px; }.admin-intro { margin-bottom: 22px; }.admin-intro h1 { font-size: 2rem; }.stats div { min-width: 0; padding-inline: 8px; }
    .creation-card { padding: 17px; }.field-action-row { align-items: stretch; flex-direction: column; }.field-action-row .add-button { min-height: 42px; }.category-manager { padding: 15px 10px; border-radius: 18px; }.manager-heading { padding: 3px 4px 0; }.drag-hint { display: none; }
    .admin-category { grid-template-columns: 65px minmax(0,1fr) auto; min-height: 76px; }.order-controls { gap: 0; }.order-controls > span { width: 17px; }.category-identity { padding: 0 10px; gap: 8px; }.category-identity small { display: none; }.category-actions { padding: 0 7px 0 0; gap: 1px; }.switch-button { min-width: auto; padding: 7px 5px; }.switch-button em { display: none; }.row-icon-button { width: 31px; }.rename-dialog form { padding: 24px 20px; }
}

@media (max-width: 380px) {
    .game-header .brand > span:last-child { display: none; }.brand strong { max-width: 170px; font-size: .85rem; }.category-grid { grid-template-columns: 1fr; }.category-card { min-height: 72px; }.timer-panel { grid-template-columns: 1fr; }.timer-ring { width: 112px; margin: auto; }.timer-settings { width: 100%; }.duration-control { grid-template-columns: 38px 1fr 38px; }
    .admin-category { grid-template-columns: 56px minmax(0,1fr) auto; }.edit-category { display: none; }.category-dot { display: none; }.category-identity { padding-left: 8px; }.order-controls button { width: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Theme system */
.game-page {
    --game-bg: #090b16;
    --game-surface: rgba(20,22,39,.75);
    --game-solid: #111421;
    --game-card: linear-gradient(140deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    --game-card-hover: linear-gradient(140deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
    --game-text: #f7f8ff;
    --game-muted: #989db3;
    --game-dim: #6d7288;
    --game-border: rgba(255,255,255,.10);
    --game-accent: #7657ff;
    --game-accent-2: #3ad8e3;
    --game-button-end: #5e40e3;
    --game-accent-soft: rgba(118,87,255,.22);
    --game-grid: rgba(255,255,255,.018);
    background: var(--game-bg);
    color: var(--game-text);
    transition: background-color .35s, color .35s;
}

html[data-theme="midnight"] .game-page { --game-bg:#030817; --game-surface:rgba(7,17,39,.82); --game-solid:#071127; --game-card:linear-gradient(140deg,rgba(30,96,190,.15),rgba(5,14,35,.5)); --game-card-hover:linear-gradient(140deg,rgba(38,113,215,.22),rgba(5,14,35,.55)); --game-text:#edf5ff; --game-muted:#95a8c5; --game-dim:#657a9a; --game-border:rgba(102,165,255,.15); --game-accent:#246bfe; --game-accent-2:#50b8ff; --game-button-end:#154fd2; --game-accent-soft:rgba(36,107,254,.22); --game-grid:rgba(90,153,245,.035); }
html[data-theme="aurora"] .game-page { --game-bg:#080b19; --game-surface:rgba(19,20,46,.8); --game-solid:#11142c; --game-card:linear-gradient(140deg,rgba(146,83,255,.13),rgba(35,231,186,.045)); --game-card-hover:linear-gradient(140deg,rgba(146,83,255,.2),rgba(35,231,186,.075)); --game-text:#f7f5ff; --game-muted:#a5a2bd; --game-dim:#77758e; --game-border:rgba(185,142,255,.14); --game-accent:#a45cff; --game-accent-2:#30e1b6; --game-button-end:#6435cf; --game-accent-soft:rgba(164,92,255,.23); --game-grid:rgba(157,107,255,.03); }
html[data-theme="forest"] .game-page { --game-bg:#06100e; --game-surface:rgba(10,31,27,.82); --game-solid:#0b211c; --game-card:linear-gradient(140deg,rgba(69,217,145,.105),rgba(6,31,25,.4)); --game-card-hover:linear-gradient(140deg,rgba(69,217,145,.17),rgba(6,31,25,.48)); --game-text:#effcf5; --game-muted:#94b3a5; --game-dim:#668276; --game-border:rgba(99,224,164,.14); --game-accent:#22b879; --game-accent-2:#b5e851; --game-button-end:#16875a; --game-accent-soft:rgba(34,184,121,.22); --game-grid:rgba(106,215,161,.028); }
html[data-theme="sunset"] .game-page { --game-bg:#180912; --game-surface:rgba(43,15,31,.82); --game-solid:#2a101f; --game-card:linear-gradient(140deg,rgba(255,90,132,.13),rgba(255,158,78,.04)); --game-card-hover:linear-gradient(140deg,rgba(255,90,132,.2),rgba(255,158,78,.07)); --game-text:#fff3f6; --game-muted:#c2a1ac; --game-dim:#8c6976; --game-border:rgba(255,124,157,.15); --game-accent:#f34880; --game-accent-2:#ff9c4a; --game-button-end:#c73164; --game-accent-soft:rgba(243,72,128,.23); --game-grid:rgba(255,117,154,.028); }
html[data-theme="graphite"] .game-page { --game-bg:#111214; --game-surface:rgba(31,32,35,.86); --game-solid:#202124; --game-card:linear-gradient(140deg,rgba(255,255,255,.075),rgba(255,255,255,.022)); --game-card-hover:linear-gradient(140deg,rgba(255,255,255,.12),rgba(255,255,255,.035)); --game-text:#f7f7f4; --game-muted:#aaa9a3; --game-dim:#74736f; --game-border:rgba(255,255,255,.11); --game-accent:#f0c64f; --game-accent-2:#f17a53; --game-button-end:#c69f34; --game-accent-soft:rgba(240,198,79,.18); --game-grid:rgba(255,255,255,.02); }
html[data-theme="ivory"] .game-page { --game-bg:#f5f2eb; --game-surface:rgba(255,255,255,.78); --game-solid:#fffdf8; --game-card:linear-gradient(140deg,rgba(255,255,255,.95),rgba(244,239,230,.8)); --game-card-hover:linear-gradient(140deg,#fff,rgba(240,233,220,.92)); --game-text:#242337; --game-muted:#777486; --game-dim:#9b98a3; --game-border:rgba(47,43,63,.12); --game-accent:#7151dc; --game-accent-2:#269ca8; --game-button-end:#5137b7; --game-accent-soft:rgba(113,81,220,.15); --game-grid:rgba(41,37,56,.035); color-scheme:light; }
html[data-theme="sky"] .game-page { --game-bg:#edf7ff; --game-surface:rgba(255,255,255,.8); --game-solid:#fafdff; --game-card:linear-gradient(140deg,#fff,rgba(220,241,255,.75)); --game-card-hover:linear-gradient(140deg,#fff,rgba(203,234,255,.9)); --game-text:#17304b; --game-muted:#607a95; --game-dim:#8aa0b4; --game-border:rgba(29,89,143,.13); --game-accent:#2677d8; --game-accent-2:#19aebe; --game-button-end:#175cad; --game-accent-soft:rgba(38,119,216,.14); --game-grid:rgba(36,101,157,.04); color-scheme:light; }
html[data-theme="sand"] .game-page { --game-bg:#f5eddf; --game-surface:rgba(255,251,244,.82); --game-solid:#fffaf1; --game-card:linear-gradient(140deg,#fffaf3,rgba(236,219,193,.75)); --game-card-hover:linear-gradient(140deg,#fffdf8,rgba(229,207,174,.88)); --game-text:#3e3025; --game-muted:#826f5f; --game-dim:#a18e7e; --game-border:rgba(91,67,46,.13); --game-accent:#d66c36; --game-accent-2:#d5a329; --game-button-end:#ae4d24; --game-accent-soft:rgba(214,108,54,.14); --game-grid:rgba(89,65,44,.04); color-scheme:light; }
html[data-theme="mint"] .game-page { --game-bg:#eaf8f3; --game-surface:rgba(255,255,255,.8); --game-solid:#fafffd; --game-card:linear-gradient(140deg,#fff,rgba(210,241,230,.78)); --game-card-hover:linear-gradient(140deg,#fff,rgba(193,234,220,.92)); --game-text:#173c33; --game-muted:#617f77; --game-dim:#89a39b; --game-border:rgba(27,104,83,.13); --game-accent:#198f70; --game-accent-2:#3ab6c3; --game-button-end:#126c55; --game-accent-soft:rgba(25,143,112,.14); --game-grid:rgba(27,104,83,.04); color-scheme:light; }

.game-page::before { background-image: linear-gradient(var(--game-grid) 1px, transparent 1px), linear-gradient(90deg, var(--game-grid) 1px, transparent 1px); }
.game-page .ambient-one { background: var(--game-accent); }.game-page .ambient-two { background: var(--game-accent-2); }
.game-page .game-header { border-color: var(--game-border); }
.game-page .brand small, .game-page .round-status, .game-page .timer-settings > label { color: var(--game-muted); }
.game-page .brand-mark, .game-page .primary-button { background: linear-gradient(135deg, var(--game-accent), var(--game-button-end)); }
.game-page .icon-button, .theme-trigger { border-color: var(--game-border); background: color-mix(in srgb, var(--game-text) 5%, transparent); color: var(--game-muted); }
.game-page .icon-button:hover, .theme-trigger:hover { border-color: color-mix(in srgb, var(--game-text) 22%, transparent); background: color-mix(in srgb, var(--game-text) 10%, transparent); color: var(--game-text); }
.game-page .game-console { border-color: var(--game-border); background: var(--game-surface); }
.game-page .letter-panel { border-color: var(--game-border); background: radial-gradient(circle at 50% 55%, var(--game-accent-soft), transparent 58%); }
.game-page #letter-display { text-shadow: 0 0 38px var(--game-accent-soft); }
.game-page .timer-ring { background: conic-gradient(var(--game-accent-2) calc(var(--progress) * 1%), color-mix(in srgb, var(--game-text) 7%, transparent) 0); }
.game-page .timer-ring.is-urgent { background: conic-gradient(#ff5c78 calc(var(--progress) * 1%), color-mix(in srgb, var(--game-text) 7%, transparent) 0); }
.game-page .timer-ring-inner { background: var(--game-solid); }
.game-page .step-button, .game-page .secondary-button { border-color: var(--game-border); background: color-mix(in srgb, var(--game-text) 5%, transparent); color: var(--game-muted); }
.game-page .duration-input-wrap { border-color: var(--game-border); background: color-mix(in srgb, var(--game-bg) 72%, transparent); }.game-page .duration-input-wrap input { color: var(--game-text); }.game-page .duration-input-wrap span, .game-page .preset-row button, .game-page .category-number { color: var(--game-dim); }.game-page .preset-row button:hover, .game-page .preset-row button.is-active { background: var(--game-accent-soft); color: var(--game-accent); }
.game-page .category-count { border-color: var(--game-border); color: var(--game-muted); }
.game-page .category-card { border-color: var(--game-border); background: var(--game-card); }.game-page .category-card:hover { border-color: color-mix(in srgb, var(--game-text) 20%, transparent); background: var(--game-card-hover); }

/* Theme picker */
.theme-picker { position: relative; }
.theme-trigger { display: inline-flex; align-items: center; height: 42px; padding: 0 12px; cursor: pointer; border: 1px solid; border-radius: 13px; font-size: .72rem; font-weight: 780; gap: 8px; transition: .2s; }
.theme-trigger svg { width: 14px; transition: transform .2s; }.theme-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.theme-current-swatch { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-radius: 50%; background: linear-gradient(135deg,var(--game-accent),var(--game-accent-2)); box-shadow: 0 0 10px var(--game-accent-soft); }
.theme-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: 330px; padding: 14px; border: 1px solid var(--game-border); border-radius: 18px; background: color-mix(in srgb, var(--game-solid) 94%, transparent); box-shadow: 0 24px 70px rgba(0,0,0,.28); color: var(--game-text); backdrop-filter: blur(22px); }
.theme-menu-heading { display: flex; justify-content: space-between; padding: 2px 3px 12px; }.theme-menu-heading strong { font-size: .78rem; }.theme-menu-heading small { color: var(--game-muted); font-size: .6rem; }
.theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.theme-options button { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: 1fr 1fr; min-height: 49px; padding: 7px 9px; cursor: pointer; border: 1px solid transparent; border-radius: 11px; background: color-mix(in srgb, var(--game-text) 4%, transparent); color: var(--game-text); text-align: left; column-gap: 8px; }.theme-options button:hover { border-color: var(--game-border); background: color-mix(in srgb, var(--game-text) 8%, transparent); }.theme-options button[aria-checked="true"] { border-color: var(--game-accent); box-shadow: inset 0 0 0 1px var(--game-accent-soft); }.theme-options em { align-self: end; font-size: .68rem; font-style: normal; font-weight: 800; }.theme-options small { align-self: start; color: var(--game-muted); font-size: .56rem; }.theme-swatch { grid-row: 1 / 3; align-self: center; width: 23px; height: 23px; border: 2px solid rgba(255,255,255,.5); border-radius: 8px; }
.swatch-nebula { background:linear-gradient(135deg,#090b16 45%,#7657ff 46%,#3ad8e3);}.swatch-midnight { background:linear-gradient(135deg,#030817 45%,#246bfe 46%,#50b8ff);}.swatch-aurora { background:linear-gradient(135deg,#080b19 45%,#a45cff 46%,#30e1b6);}.swatch-forest { background:linear-gradient(135deg,#06100e 45%,#22b879 46%,#b5e851);}.swatch-sunset { background:linear-gradient(135deg,#180912 45%,#f34880 46%,#ff9c4a);}.swatch-graphite { background:linear-gradient(135deg,#111214 45%,#f0c64f 46%,#f17a53);}.swatch-ivory { background:linear-gradient(135deg,#f5f2eb 45%,#7151dc 46%,#269ca8);}.swatch-sky { background:linear-gradient(135deg,#edf7ff 45%,#2677d8 46%,#19aebe);}.swatch-sand { background:linear-gradient(135deg,#f5eddf 45%,#d66c36 46%,#d5a329);}.swatch-mint { background:linear-gradient(135deg,#eaf8f3 45%,#198f70 46%,#3ab6c3);}

/* Categories-only fullscreen */
.section-heading-actions { display: flex; align-items: center; gap: 9px; }
.board-fullscreen-button { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; cursor: pointer; border-radius: 11px; background: linear-gradient(135deg,var(--game-accent),var(--game-accent-2)); box-shadow: 0 8px 24px var(--game-accent-soft); color: white; font-size: .69rem; font-weight: 820; gap: 7px; transition: .2s; }.board-fullscreen-button:hover { transform: translateY(-2px); filter: brightness(1.08); }.board-fullscreen-button svg { width: 15px; }
.board-hud { display: none; }
.categories-section:fullscreen, .categories-section:-webkit-full-screen, .categories-section.is-board-fullscreen { width: 100%; height: 100%; min-height: 100dvh; margin: 0; padding: clamp(14px,2.2vw,34px); overflow: auto; background: var(--game-bg); color: var(--game-text); }
.categories-section.is-board-fullscreen { position: fixed; inset: 0; z-index: 1000; }
body.has-board-overlay { overflow: hidden; }
.categories-section:fullscreen .board-hud, .categories-section:-webkit-full-screen .board-hud, .categories-section.is-board-fullscreen .board-hud { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: clamp(84px,13vh,126px); margin-bottom: clamp(12px,2vh,22px); padding: 12px clamp(18px,3vw,38px); border: 1px solid var(--game-border); border-radius: clamp(17px,2vw,27px); background: color-mix(in srgb, var(--game-solid) 90%, transparent); box-shadow: 0 16px 50px rgba(0,0,0,.18); backdrop-filter: blur(20px); }
.board-hud-letter, .board-hud-time { display: flex; align-items: center; gap: 16px; }.board-hud-time { justify-content: flex-end; }.board-hud-letter > span, .board-hud-time > span { color: var(--game-muted); font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.board-hud-letter strong, .board-hud-time strong { font-size: clamp(2.5rem,7vh,5rem); font-variant-numeric: tabular-nums; letter-spacing: -.07em; line-height: 1; }.board-hud-letter strong { color: var(--game-accent); }.board-hud-time strong { color: var(--game-accent-2); }
.board-hud-title { display: flex; align-items: center; gap: 11px; }.board-hud-title > div { display: flex; flex-direction: column; }.board-hud-title strong { font-size: .82rem; }.board-hud-title small { margin-top: 2px; color: var(--game-muted); font-size: .64rem; }
.categories-section:fullscreen .section-heading, .categories-section:-webkit-full-screen .section-heading, .categories-section.is-board-fullscreen .section-heading { margin-bottom: clamp(11px,1.5vh,18px); }.categories-section:fullscreen .section-heading h1, .categories-section:-webkit-full-screen .section-heading h1, .categories-section.is-board-fullscreen .section-heading h1 { font-size: clamp(1.15rem,2.4vw,2rem); }.categories-section:fullscreen .category-count, .categories-section:-webkit-full-screen .category-count, .categories-section.is-board-fullscreen .category-count { display:none; }
.categories-section:fullscreen .board-fullscreen-button span, .categories-section:-webkit-full-screen .board-fullscreen-button span, .categories-section.is-board-fullscreen .board-fullscreen-button span { font-size: 0; }.categories-section:fullscreen .board-fullscreen-button span::after, .categories-section:-webkit-full-screen .board-fullscreen-button span::after, .categories-section.is-board-fullscreen .board-fullscreen-button span::after { font-size: .69rem; content: "Esci"; }
.categories-section:fullscreen .category-grid, .categories-section:-webkit-full-screen .category-grid, .categories-section.is-board-fullscreen .category-grid { grid-template-columns: repeat(auto-fit,minmax(min(220px,40vw),1fr)); gap: clamp(9px,1.4vw,18px); }.categories-section:fullscreen .category-card, .categories-section:-webkit-full-screen .category-card, .categories-section.is-board-fullscreen .category-card { justify-content: center; min-height: clamp(84px,13vh,150px); border-color: color-mix(in srgb,var(--game-accent) 28%,var(--game-border)); border-radius: clamp(15px,2vw,24px); box-shadow: inset 0 1px color-mix(in srgb,var(--game-text) 8%,transparent),0 10px 35px rgba(0,0,0,.1); text-align:center; }.categories-section:fullscreen .category-card strong, .categories-section:-webkit-full-screen .category-card strong, .categories-section.is-board-fullscreen .category-card strong { font-size: clamp(1rem,2.1vw,1.7rem); }.categories-section:fullscreen .category-number, .categories-section:-webkit-full-screen .category-number, .categories-section.is-board-fullscreen .category-number { position:absolute; top:12px; left:14px; }

@media (max-width:600px) {
    .theme-trigger { width:42px; padding:0; justify-content:center; }.theme-trigger > span:not(.theme-current-swatch), .theme-trigger > svg { display:none; }.theme-menu { position:fixed; top:74px; right:12px; width:min(330px,calc(100% - 24px)); }
    .section-heading { align-items:center; }.section-heading-actions { gap:6px; }.board-fullscreen-button { width:38px; padding:0; justify-content:center; }.board-fullscreen-button span { display:none; }
    .categories-section:fullscreen, .categories-section:-webkit-full-screen, .categories-section.is-board-fullscreen { padding:10px; }.categories-section:fullscreen .board-hud, .categories-section:-webkit-full-screen .board-hud, .categories-section.is-board-fullscreen .board-hud { grid-template-columns:1fr 1fr; min-height:78px; padding:10px 16px; }.board-hud-title { display:none; }.board-hud-letter, .board-hud-time { flex-direction:column; align-items:flex-start; gap:2px; }.board-hud-time { align-items:flex-end; }.board-hud-letter strong, .board-hud-time strong { font-size:clamp(2.2rem,11vw,3.8rem); }.categories-section:fullscreen .category-grid, .categories-section:-webkit-full-screen .category-grid, .categories-section.is-board-fullscreen .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.categories-section:fullscreen .category-card, .categories-section:-webkit-full-screen .category-card, .categories-section.is-board-fullscreen .category-card { min-height:clamp(76px,12vh,115px); padding:16px 9px; }.categories-section:fullscreen .category-card strong, .categories-section:-webkit-full-screen .category-card strong, .categories-section.is-board-fullscreen .category-card strong { font-size:clamp(.84rem,4vw,1.15rem); }.categories-section:fullscreen .category-number, .categories-section:-webkit-full-screen .category-number, .categories-section.is-board-fullscreen .category-number { top:8px;left:9px; }
}