/* Пиксель-арт в стиле Habitica. Тема берётся из Telegram.WebApp.themeParams
   (см. app.js), с дефолтами ниже. */
/* ponytail: пиксельный шрифт Press Start 2P — зашить сюда @font-face data-URI,
   когда будет файл; пока monospace-фолбэк. */
:root{
  --bg:#160f30; --panel:#241748; --panel-2:#2e1c5c;
  --ink:#f3edff; --muted:#b3a2e0; --line:#0c0722;
  --purple:#9a6cff; --gold:#ffc65e; --green:#2fd39c; --red:#ff5d61; --shadow:#0c0722;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    repeating-linear-gradient(0deg,transparent 0 7px,rgba(154,108,255,.06) 7px 8px),
    var(--bg);
  color:var(--ink);
  font-family:"Courier New",ui-monospace,monospace;
  display:flex; justify-content:center; padding:14px;
  min-height:100vh; image-rendering:pixelated;
}
.pixel{letter-spacing:1px; text-transform:uppercase; font-weight:700}
.app{width:100%; max-width:400px; display:flex; flex-direction:column; gap:12px}

.box{background:var(--panel); border:3px solid var(--line); box-shadow:5px 5px 0 0 var(--shadow)}

.bar{padding:10px 12px; display:flex; align-items:center; gap:10px}
.bar h1{font-size:15px; margin:0; flex:1}
.owl rect{fill:var(--purple)} .owl .beak{fill:var(--gold)}
.stat{display:flex; align-items:center; gap:5px; font-size:12px}
.stat b{font-variant-numeric:tabular-nums}

.tabs{display:flex; gap:8px}
.tab{flex:1; padding:9px 4px; text-align:center; font-size:11px; cursor:pointer;
  background:var(--panel-2); border:3px solid var(--line); box-shadow:3px 3px 0 0 var(--shadow); color:var(--muted)}
.tab.on{background:var(--purple); color:#fff; transform:translate(1px,1px)}

.screen{display:none; flex-direction:column; gap:12px}
.screen.on{display:flex}

.card{min-height:190px; padding:18px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center; cursor:pointer; user-select:none; position:relative}
.card .side-label{position:absolute; top:8px; left:10px; font-size:9px; color:var(--muted)}
.card .word{font-size:26px; line-height:1.2; word-break:break-word}
.card .hint{font-size:10px; color:var(--muted)}
.card .reveal{font-size:20px; color:var(--purple); border-top:3px dashed var(--line); padding-top:12px; width:100%; word-break:break-word}

.btns{display:flex; gap:10px}
.btn{flex:1; padding:14px 8px; font-size:12px; cursor:pointer; text-align:center;
  border:3px solid var(--line); box-shadow:4px 4px 0 0 var(--shadow); color:#fff; font-family:inherit}
.btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--shadow)}
.btn.no{background:var(--red)} .btn.yes{background:var(--green)}
.btn.wide{background:var(--purple)} .btn:disabled{opacity:.5; cursor:default}

.field{display:flex; flex-direction:column; gap:12px}
.field label{display:block; font-size:10px; color:var(--muted); margin:0 0 5px 2px}
.field input{width:100%; padding:12px; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--panel); border:3px solid var(--line); box-shadow:inset 3px 3px 0 rgba(0,0,0,.18); outline:none}
.field input:focus{border-color:var(--purple)}
form{display:flex; flex-direction:column; gap:14px}

.list{display:flex; flex-direction:column; gap:10px}
.row{padding:10px 12px; display:flex; align-items:center; gap:10px}
.row .o{font-size:14px; flex:1; word-break:break-word}
.row .t{font-size:12px; color:var(--muted); flex:1; word-break:break-word}
.row .bar-wrap{width:44px; height:9px; border:2px solid var(--line); background:var(--panel-2); flex:none}
.row .bar-fill{height:100%; background:var(--gold)}
.del{width:34px; height:34px; flex:none; display:grid; place-items:center; cursor:pointer;
  background:var(--red); border:3px solid var(--line); box-shadow:3px 3px 0 0 var(--shadow)}
.del:active{transform:translate(1px,1px); box-shadow:2px 2px 0 0 var(--shadow)}

.toast{text-align:center; font-size:10px; color:var(--green); min-height:12px}
.foot{text-align:center; font-size:9px; color:var(--muted)}
.empty{text-align:center; font-size:12px; color:var(--muted); padding:24px 8px}
svg{shape-rendering:crispEdges; display:block}

/* аватар в шапке — вход в профиль/настройки */
.avatar{width:34px; height:34px; flex:none; padding:0; cursor:pointer; overflow:hidden;
  background:var(--panel-2); border:3px solid var(--line); box-shadow:3px 3px 0 0 var(--shadow)}
.avatar:active{transform:translate(1px,1px); box-shadow:2px 2px 0 0 var(--shadow)}
.avatar svg{width:100%; height:100%}
.avatar .ava-body{fill:var(--gold)} .avatar .ava-skin{fill:#f3d9b0} .avatar .ava-dark{fill:var(--line)}
.avatar img{border:0}

/* экран настроек */
.eyebrow{font-size:10px; color:var(--muted); display:flex; align-items:center; gap:7px}
.eyebrow .back{color:var(--purple); font-size:15px}

.set-card{padding:16px 16px 18px; display:flex; flex-direction:column; gap:16px}
.set-head{display:flex; align-items:center; justify-content:space-between; gap:14px}
.set-head .ttl{font-size:14px}
.set-head .set-sub{font-size:10px; color:var(--muted); margin-top:3px; letter-spacing:.5px}

/* нативный select языка — в пиксельном стиле */
.lang-select{font-family:inherit; font-size:14px; color:var(--ink); cursor:pointer;
  background:var(--panel-2); border:3px solid var(--line); box-shadow:inset 3px 3px 0 rgba(0,0,0,.22);
  padding:8px 10px; outline:none}
.lang-select:focus{border-color:var(--purple)}

/* пиксельный тумблер */
.switch{--w:60px; --h:30px; width:var(--w); height:var(--h); flex:none; padding:0; cursor:pointer;
  position:relative; background:var(--panel-2); border:3px solid var(--line);
  box-shadow:inset 3px 3px 0 rgba(0,0,0,.28)}
.switch .knob{position:absolute; top:1px; left:1px; width:calc(var(--h) - 8px); height:calc(var(--h) - 8px);
  background:var(--muted); border:3px solid var(--line); transition:left .12s steps(4)}
.switch[aria-checked="true"]{background:var(--green); box-shadow:inset 3px 3px 0 rgba(0,0,0,.18)}
.switch[aria-checked="true"] .knob{left:calc(var(--w) - (var(--h) - 8px) - 4px); background:#fff}
.switch:focus-visible{outline:3px solid var(--purple); outline-offset:3px}
@media (prefers-reduced-motion:reduce){.switch .knob{transition:none}}

/* крупное поле времени + степпер */
.time-wrap{display:flex; flex-direction:column; gap:8px; border-top:3px dashed var(--line); padding-top:16px}
.time-wrap .lbl{font-size:10px; color:var(--muted); letter-spacing:.5px}
.time-field{display:flex; align-items:stretch; gap:10px}
.time-field .disp{flex:1; display:flex; align-items:center; justify-content:center;
  font-size:30px; letter-spacing:3px; font-variant-numeric:tabular-nums; color:var(--ink);
  background:var(--panel-2); border:3px solid var(--line); box-shadow:inset 3px 3px 0 rgba(0,0,0,.22); padding:10px 6px}
.stepper{display:flex; flex-direction:column; gap:6px}
.stepper button{width:44px; flex:1; cursor:pointer; color:#fff; background:var(--purple);
  border:3px solid var(--line); box-shadow:3px 3px 0 0 var(--shadow); font-family:inherit; font-size:15px;
  display:grid; place-items:center}
.stepper button:active{transform:translate(1px,1px); box-shadow:1px 1px 0 0 var(--shadow)}

/* сноска про системный нудж */
.note{display:flex; align-items:center; gap:9px; font-size:10px; color:var(--muted); line-height:1.5;
  background:var(--panel-2); border:3px solid var(--line); padding:10px 12px}
.note b{color:var(--ink)}
.note .dot{width:14px; height:14px; flex:none} .note .dot rect{fill:var(--gold)}