/* ── токены: база тёмная, светлая тема зеркалит её ───────────────── */
:root{
  --ground:#12161a;
  --surface:#181e23;
  --surface-2:#1f272d;
  --line:#2a343b;
  --line-soft:#222b31;
  --ink:#e6e2d8;
  --ink-dim:#8b969e;
  --mark:#e8e3d6;
  --mark-empty:#2b353c;
  --brass:#d0a355;
  --brass-ink:#12161a;
  --brass-soft:rgba(208,163,85,.14);
  --danger:#c76b5a;
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 18px 40px rgba(0,0,0,.35);
  --focus:#d0a355;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#e6e9ea;
    --surface:#f6f7f7;
    --surface-2:#edf0f0;
    --line:#d2d8da;
    --line-soft:#e0e5e6;
    --ink:#1a2126;
    --ink-dim:#5f6c74;
    --mark:#28323a;
    --mark-empty:#ccd3d6;
    --brass:#8a6524;
    --brass-ink:#fbf9f4;
    --brass-soft:rgba(138,101,36,.10);
    --danger:#a2452f;
    --shadow:0 1px 0 rgba(255,255,255,.6), 0 14px 30px rgba(26,33,38,.10);
    --focus:#8a6524;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ground:#e6e9ea;
  --surface:#f6f7f7;
  --surface-2:#edf0f0;
  --line:#d2d8da;
  --line-soft:#e0e5e6;
  --ink:#1a2126;
  --ink-dim:#5f6c74;
  --mark:#28323a;
  --mark-empty:#ccd3d6;
  --brass:#8a6524;
  --brass-ink:#fbf9f4;
  --brass-soft:rgba(138,101,36,.10);
  --danger:#a2452f;
  --shadow:0 1px 0 rgba(255,255,255,.6), 0 14px 30px rgba(26,33,38,.10);
  --focus:#8a6524;
  color-scheme:light;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px}

.page{
  width:min(880px, calc(100vw - 32px));
  margin:0 auto;
  padding:40px 0 72px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* ── шапка ────────────────────────────────────────────────────────── */
.masthead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:14px}
.brand > svg{display:block; width:34px; height:auto; flex:none}
.brand h1{
  margin:0;
  font-family:Fraunces, Georgia, serif;
  font-weight:600;
  font-size:32px;
  letter-spacing:-.01em;
  line-height:1;
  text-wrap:balance;
}
.brand p{
  margin:5px 0 0;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.totals{display:flex; gap:26px; margin:0; align-items:flex-end}
.totals > div{display:flex; flex-direction:column; gap:2px}
.totals dt{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.totals dd{
  margin:0;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric:tabular-nums;
  font-size:24px;
  line-height:1.1;
  white-space:nowrap;
}
.totals dd.accent{color:var(--brass)}
.who{
  align-self:flex-end;
  padding-bottom:6px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px;
  color:var(--ink-dim);
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.logout{
  align-self:flex-end;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-dim);
  border-radius:8px;
  padding:5px 10px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .15s, border-color .15s;
}
.logout:hover{color:var(--ink); border-color:var(--ink-dim)}

/* ── список задач ─────────────────────────────────────────────────── */
main{display:flex; flex-direction:column; gap:18px}

.task{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:18px 18px 14px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color .3s ease;
}
.task.is-done{border-color:var(--brass)}

.task-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.task-title{
  flex:1 1 220px;
  min-width:0;
  background:transparent;
  border:1px solid transparent;
  border-radius:7px;
  padding:3px 7px;
  margin:-3px -7px;
  color:var(--ink);
  font-family:Fraunces, Georgia, serif;
  font-size:21px;
  font-weight:600;
  letter-spacing:-.005em;
}
.task-title:hover{border-color:var(--line)}
.task-title:focus{border-color:var(--line); background:var(--surface-2); outline:none}

.task-stat{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric:tabular-nums;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ink-dim);
  white-space:nowrap;
}
.task-stat b{color:var(--ink); font-weight:500}
.task-stat.done{color:var(--brass)}

.icon{
  flex:none;
  width:30px; height:30px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--ink-dim);
  font-size:14px;
  cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.icon:hover:not(:disabled){color:var(--ink); border-color:var(--ink-dim); background:var(--surface-2)}
.icon:disabled{opacity:.3; cursor:default}
.icon.danger:hover{color:var(--danger); border-color:var(--danger)}
.icon.armed{color:var(--brass-ink); background:var(--danger); border-color:var(--danger); width:auto; padding:0 10px; font-size:12px}

/* десять сегментов уровня */
.levels{display:grid; grid-template-columns:repeat(10, 1fr); gap:4px}
.levels span{
  height:4px;
  border-radius:2px;
  background:var(--mark-empty);
  transition:background .35s ease;
}
.levels span.full{background:var(--brass)}
.levels span.current{background:linear-gradient(to right, var(--brass) var(--fill,0%), var(--mark-empty) var(--fill,0%))}

/* ── поле засечек ─────────────────────────────────────────────────── */
.field{
  position:relative;
  display:grid;
  grid-template-columns:repeat(10, minmax(0, 1fr));
  gap:16px 12px;
  padding:18px 16px;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:11px;
  cursor:pointer;
  width:100%;
  text-align:left;
  transition:border-color .2s ease;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.field:hover:not(:disabled){border-color:var(--brass)}
.field:active:not(:disabled){transform:translateY(1px)}
.field:disabled{cursor:default}
.field svg{display:block; width:100%; max-width:54px; height:auto; margin:0 auto}
.field .stroke{
  stroke:var(--mark);
  stroke-width:2.6;
  stroke-linecap:round;
  fill:none;
}
.field .stroke.empty{stroke:var(--mark-empty); stroke-width:2.2}
.field .stroke.fresh{animation:carve .38s ease-out both}
@keyframes carve{
  from{stroke-dasharray:1; stroke-dashoffset:1}
  to{stroke-dasharray:1; stroke-dashoffset:0}
}

.pop{
  position:absolute;
  transform:translate(-50%, -50%);
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:14px;
  color:var(--brass);
  pointer-events:none;
  animation:rise .7s ease-out forwards;
}
@keyframes rise{
  from{opacity:1; transform:translate(-50%, -50%)}
  to{opacity:0; transform:translate(-50%, -180%)}
}
/* каждая десятая палочка роняет монету */
.pop.coin{
  font-size:15px;
  font-weight:500;
  letter-spacing:.02em;
  animation-duration:1s;
}

.seal{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  background:color-mix(in srgb, var(--surface-2) 88%, transparent);
  border-radius:10px;
  font-family:Fraunces, Georgia, serif;
  font-size:20px;
  color:var(--brass);
}
.seal small{
  display:block;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  text-align:center;
  margin-top:6px;
}

.task-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  font-variant-numeric:tabular-nums;
}
.task-foot .today{color:var(--brass)}

/* вспышка при закрытии уровня */
.task.levelup{animation:flare .9s ease-out}
@keyframes flare{
  0%{box-shadow:var(--shadow), 0 0 0 0 var(--brass-soft)}
  35%{box-shadow:var(--shadow), 0 0 0 8px var(--brass-soft)}
  100%{box-shadow:var(--shadow), 0 0 0 0 rgba(0,0,0,0)}
}
.banner{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:color-mix(in srgb, var(--surface-2) 82%, transparent);
  font-family:Fraunces, Georgia, serif;
  font-size:26px;
  color:var(--brass);
  pointer-events:none;
  animation:banner 1.1s ease-out forwards;
}
@keyframes banner{
  0%{opacity:0; letter-spacing:.2em}
  20%{opacity:1; letter-spacing:.02em}
  75%{opacity:1}
  100%{opacity:0}
}

/* ── добавление и пустое состояние ───────────────────────────────── */
.add{display:flex; gap:10px}
.add input{
  flex:1;
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px 14px;
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
}
.add input::placeholder{color:var(--ink-dim)}
.add input:focus{outline:none; border-color:var(--brass)}
.add button{
  border:1px solid var(--brass);
  background:var(--brass);
  color:var(--brass-ink);
  border-radius:10px;
  padding:0 18px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:filter .15s;
}
.add button:hover{filter:brightness(1.08)}

.empty{
  border:1px dashed var(--line);
  border-radius:14px;
  padding:44px 24px;
  text-align:center;
  color:var(--ink-dim);
}
.empty strong{
  display:block;
  font-family:Fraunces, Georgia, serif;
  font-weight:600;
  font-size:20px;
  color:var(--ink);
  margin-bottom:6px;
}

.rule{
  margin:0;
  text-align:center;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

/* ── вкладки ─────────────────────────────────────────────────────── */
.tabs{
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--line);
  margin-top:-10px;
}
.tab{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  margin-bottom:-1px;
  border:none;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--ink-dim);
  font-family:Fraunces, Georgia, serif;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  transition:color .15s, border-color .15s;
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink); border-bottom-color:var(--brass)}
.tab-badge{
  min-width:20px;
  padding:0 6px;
  border-radius:10px;
  background:var(--brass);
  color:var(--brass-ink);
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px;
  line-height:18px;
  font-weight:500;
}
.tab-badge[hidden]{display:none}

.view{display:flex; flex-direction:column; gap:26px}
.view[hidden]{display:none}

/* ── выбор колеса ────────────────────────────────────────────────── */
.wheel-picker{display:flex; gap:10px; flex-wrap:wrap}
.wheel-tab{
  flex:1 1 180px;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.wheel-tab:hover{border-color:var(--ink-dim)}
.wheel-tab.active{border-color:var(--brass); background:var(--brass-soft)}
.wheel-tab-title{
  font-family:Fraunces, Georgia, serif;
  font-size:19px;
  font-weight:600;
}
.wheel-tab-cost{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-dim);
}
.wheel-tab.active .wheel-tab-cost{color:var(--brass)}

/* ── колесо ──────────────────────────────────────────────────────── */
.wheel-layout{
  display:grid;
  grid-template-columns:minmax(300px, 1fr) minmax(260px, 330px);
  gap:26px;
  align-items:start;
}
.wheel-stage{display:flex; flex-direction:column; align-items:center; gap:16px}
.wheel-box{position:relative; width:min(340px, 100%)}
.wheel-svg{display:block; width:100%; height:auto; overflow:visible}
/* крутится сам svg с секторами — так центр вращения совпадает с центром колеса */
.wheel-rotor{transform-origin:50% 50%; will-change:transform}
.wheel-face{position:absolute; inset:0; pointer-events:none}
.wheel-slice{
  fill:color-mix(in srgb, var(--brass) calc(var(--tone) * 100%), var(--surface-2));
  stroke:var(--ground);
  stroke-width:1.5;
}
/* редкий сектор — джекпот: горит латунью, чтобы узкая полоска не потерялась */
.wheel-slice.rare{
  fill:var(--brass);
  stroke:var(--brass);
  stroke-width:2.5;
}
/* пустышка, наоборот, гаснет */
.wheel-slice.blank{fill:var(--surface-2); stroke:var(--ground)}
.wheel-rim{fill:none; stroke:var(--brass); stroke-width:2}
.wheel-label{
  fill:var(--ink);
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  font-size:10.5px;
  font-weight:500;
  pointer-events:none;
}
/* на узком секторе вместо названия — его шанс */
.wheel-label.share{fill:var(--brass-ink); font-size:9.5px; font-weight:600}
.wheel-hub{fill:var(--surface); stroke:var(--brass); stroke-width:2}
.wheel-hub-cost{
  fill:var(--brass);
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:22px;
}
.wheel-hub-note{
  fill:var(--ink-dim);
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:7.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.wheel-pin{fill:var(--brass); stroke:var(--ground); stroke-width:1.5}

.wheel-result{
  width:min(340px, 100%);
  display:grid;
  justify-items:center;
  align-content:center;
  gap:2px;
  min-height:66px;
  padding:10px 16px;
  background:var(--surface-2);
  border:1px solid var(--brass);
  border-radius:12px;
  cursor:pointer;
  animation:pop-in .35s ease-out;
}
/* место под плашку держим всегда — иначе кнопка прыгает после прокрутки */
.wheel-result[hidden]{display:grid; visibility:hidden; animation:none}
.wheel-result strong{
  font-family:Fraunces, Georgia, serif;
  font-size:21px;
  font-weight:600;
  color:var(--brass);
  text-align:center;
  text-wrap:balance;
}
.wheel-result.blank{border-color:var(--line)}
.wheel-result.blank strong{color:var(--ink-dim)}
.result-label{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
@keyframes pop-in{
  from{opacity:0; transform:translateY(8px) scale(.96)}
  to{opacity:1; transform:none}
}

.spin{
  border:1px solid var(--brass);
  background:var(--brass);
  color:var(--brass-ink);
  border-radius:11px;
  padding:12px 30px;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:filter .15s;
}
.spin:hover:not(:disabled){filter:brightness(1.08)}
.spin:disabled{
  background:transparent;
  color:var(--ink-dim);
  border-color:var(--line);
  cursor:default;
}
.spin-note{
  margin:0;
  text-align:center;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ink-dim);
  max-width:36ch;
}

/* ── призы ───────────────────────────────────────────────────────── */
.prizes{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.prizes h2, .spins h2{
  margin:0;
  font-family:Fraunces, Georgia, serif;
  font-size:20px;
  font-weight:600;
}
.prizes-hint{
  margin:-6px 0 2px;
  font-size:12px;
  color:var(--ink-dim);
}
.prize-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.prize{
  display:grid;
  grid-template-columns:1fr 56px 42px 30px;
  align-items:center;
  gap:8px;
}
.prize-title, .prize-weight{
  background:var(--surface-2);
  border:1px solid transparent;
  border-radius:8px;
  padding:7px 9px;
  color:var(--ink);
  font-family:inherit;
  font-size:14px;
  min-width:0;
}
.prize-weight{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  text-align:center;
}
.prize-title:focus, .prize-weight:focus{outline:none; border-color:var(--brass)}
.prize-share{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--brass);
  text-align:right;
}
.prize-empty, .spin-empty{
  color:var(--ink-dim);
  font-size:13px;
  padding:8px 0;
}
.prize-add{display:flex; gap:8px; margin-top:4px}
.prize-add[hidden]{display:none}
.prize-add input{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:9px;
  padding:9px 11px;
  color:var(--ink);
  font-family:inherit;
  font-size:14px;
  min-width:0;
}
.prize-add input:first-child{flex:1}
.prize-add input[type="number"]{width:64px; text-align:center; font-family:"IBM Plex Mono", monospace}
.prize-add input:focus{outline:none; border-color:var(--brass)}
.prize-add button{
  border:1px solid var(--brass);
  background:var(--brass);
  color:var(--brass-ink);
  border-radius:9px;
  width:40px;
  font-size:17px;
  font-weight:600;
  cursor:pointer;
}

/* ── журнал выигрышей ────────────────────────────────────────────── */
.spins{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.spin-log{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.spin-row{
  display:grid;
  grid-template-columns:46px 1fr auto auto;
  align-items:center;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line-soft);
}
.spin-row:last-child{border-bottom:none}
.spin-row.claimed .spin-prize{color:var(--ink-dim); text-decoration:line-through}
.spin-row.blank .spin-prize{color:var(--ink-dim)}
.spin-when{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:12px;
  color:var(--ink-dim);
  font-variant-numeric:tabular-nums;
}
.spin-prize{font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.spin-wheel{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.spin-claim{
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-dim);
  border-radius:8px;
  padding:4px 10px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .15s, border-color .15s;
}
.spin-claim:hover{color:var(--ink); border-color:var(--ink-dim)}
.spin-row.claimed .spin-claim{color:var(--brass); border-color:var(--brass)}

/* ── сообщение об ошибке ─────────────────────────────────────────── */
.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:var(--surface);
  border:1px solid var(--danger);
  color:var(--ink);
  border-radius:10px;
  padding:10px 16px;
  font-size:14px;
  box-shadow:var(--shadow);
  z-index:10;
}
.toast[hidden]{display:none}

/* ── вход ────────────────────────────────────────────────────────── */
.login-wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.login-card{
  width:min(360px, 100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:34px 28px 28px;
  display:flex;
  flex-direction:column;
  gap:16px;
  text-align:center;
}
.login-card svg{width:38px; height:auto; margin:0 auto}
.login-card h1{
  margin:0;
  font-family:Fraunces, Georgia, serif;
  font-size:26px;
  font-weight:600;
}
.login-card p{
  margin:-10px 0 0;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.auth-switch{
  display:flex;
  gap:4px;
  padding:3px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
}
.auth-tab{
  flex:1;
  border:none;
  border-radius:7px;
  background:transparent;
  color:var(--ink-dim);
  padding:7px 10px;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.auth-tab.active{background:var(--surface); color:var(--ink)}
.login-hint{
  margin:-8px 0 0;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10px;
  letter-spacing:.06em;
  color:var(--ink-dim);
}
.login-hint[hidden]{display:none}
.login-card input{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px 14px;
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  text-align:center;
}
.login-card input:focus{outline:none; border-color:var(--brass)}
.login-card button{
  border:1px solid var(--brass);
  background:var(--brass);
  color:var(--brass-ink);
  border-radius:10px;
  padding:11px 18px;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
.login-error{
  min-height:18px;
  font-size:13px;
  color:var(--danger);
}

@media (max-width:640px){
  .page{padding:26px 0 56px; gap:22px}
  .masthead{align-items:flex-start}
  .brand h1{font-size:26px}
  .totals{gap:14px}
  .totals dt{font-size:9px; letter-spacing:.1em}
  .totals dd{font-size:17px}
  .logout{padding:4px 8px; font-size:10px}
  .field{grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px 8px; padding:14px 10px}
  .field svg{max-width:44px}
  .task-foot{flex-wrap:wrap; gap:4px 10px; font-size:10px; letter-spacing:.04em}
  .who{display:none}
  .tab{font-size:16px; padding:9px 12px}
  .wheel-layout{grid-template-columns:1fr; gap:20px}
  .wheel-tab{flex:1 1 100%}
  .spin-row{grid-template-columns:40px 1fr auto; row-gap:4px}
  .spin-wheel{grid-column:2; grid-row:2}
  .spin-claim{grid-column:3; grid-row:1 / span 2}
}

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