:root{
  --coal:#1E2126; --steel:#2A2F37; --card:#333A44; --edge:#454E5A;
  --ink:#ECEFF3; --dim:#8E99A8;
  --rail:#5A6472; --sign:#E8B54A; --go:#4FB477; --stop:#D4574C;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--coal);color:var(--ink)}
body{font-family:"Manrope",system-ui,sans-serif;user-select:none;-webkit-user-select:none;
  overscroll-behavior:none;touch-action:manipulation}

#app{height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:7px;
  padding:calc(env(safe-area-inset-top) + 8px) 10px calc(env(safe-area-inset-bottom) + 9px)}

/* планка */
.bar{flex:none;display:flex;align-items:center;gap:9px;height:36px}
.brand{flex:none;line-height:1}
.brand b{display:block;font-family:"Oswald",sans-serif;font-weight:700;font-size:15px;letter-spacing:.09em}
.brand span{display:block;font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.16em;
  color:var(--dim);margin-top:3px}
.lvl{flex:1;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl b{color:var(--sign);font-weight:500}
.bar button{flex:none;width:32px;height:32px;border-radius:9px;background:var(--steel);
  border:1px solid var(--edge);color:var(--dim);font-size:14px;cursor:pointer}

/* сцена */
.stage{flex:1 1 auto;min-height:0;position:relative;background:#191C21;
  border:1px solid var(--edge);border-radius:12px;overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.veil{position:absolute;inset:0;background:rgba(25,28,33,.94);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center}
.veil.on{display:flex}
.veil h2{margin:0;font-family:"Oswald",sans-serif;font-weight:700;font-size:21px;color:var(--sign);
  text-transform:uppercase;letter-spacing:.03em}
.veil p{margin:0;font-size:13px;color:var(--dim);max-width:34ch;line-height:1.5}
.veil .code{font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:38px;color:var(--sign);
  letter-spacing:.16em;border:1px solid rgba(232,181,74,.45);border-radius:12px;
  background:rgba(232,181,74,.09);padding:8px 14px 8px 20px;margin:2px 0}
.veil .code small{display:block;font-family:"Manrope";font-weight:400;font-size:10px;
  letter-spacing:.14em;color:var(--dim);margin-bottom:4px}
.veil button{margin-top:4px;font-family:"Manrope";font-weight:700;font-size:14px;padding:11px 22px;
  border:0;border-radius:10px;background:var(--sign);color:#2B2205;cursor:pointer}

/* строка */
.line{flex:none;min-height:30px;display:flex;align-items:center;gap:10px;justify-content:space-between;
  font-size:12.5px;line-height:1.35;color:var(--dim)}
.line b{color:var(--ink);font-weight:500}
.line .need{font-family:"IBM Plex Mono",monospace;color:var(--sign);font-weight:500;white-space:nowrap}
.line.bad{color:var(--stop)}
.line.bad b,.line.bad .need{color:var(--stop)}

/* кнопки */
.pads{flex:none;display:grid;gap:7px}
.pads.one{grid-template-columns:1fr 1fr}
.pads.two{grid-template-columns:1fr 1fr}
.pad{display:grid;grid-template-columns:1fr 1fr;gap:7px;background:var(--steel);
  border:1px solid var(--edge);border-radius:11px;padding:7px}
.pad .tag{grid-column:1 / -1;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.12em;
  color:var(--dim);text-align:center}
.pads button{font-family:"Manrope";font-weight:600;font-size:12px;padding:13px 2px;border-radius:9px;
  border:1px solid var(--edge);background:var(--card);color:var(--ink);cursor:pointer;line-height:1.15}
.pads button:active{transform:translateY(1px)}
.pads button:disabled{opacity:.32;pointer-events:none}
.pads button.in{border-color:rgba(79,180,119,.5);color:#B9E9CE}
.pads button.out{border-color:rgba(232,181,74,.5);color:#F6DFA8}
.acts{flex:none;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:7px}
.acts button{font-family:"Manrope";font-weight:600;font-size:12.5px;padding:12px 2px;border-radius:9px;
  background:var(--steel);border:1px solid var(--edge);color:var(--ink);cursor:pointer}
.acts button.no{border-color:rgba(212,87,76,.55);color:#F3B3AD}
.acts button:disabled{opacity:.32;pointer-events:none}
button:focus-visible{outline:2px solid var(--sign);outline-offset:2px}

/* модалка */
.modal{position:fixed;inset:0;background:rgba(12,14,17,.86);display:none;
  align-items:flex-end;justify-content:center;z-index:20}
.modal.on{display:flex}
.sheet{width:100%;max-width:520px;max-height:88dvh;overflow-y:auto;background:var(--steel);
  border:1px solid var(--edge);border-radius:16px 16px 0 0;
  padding:16px 15px calc(env(safe-area-inset-bottom) + 18px)}
.sheet h3{margin:0 0 9px;font-family:"Oswald",sans-serif;font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.04em}
.sheet p{font-size:13px;line-height:1.65;color:#BCC6D2;margin:0 0 12px}
.sheet p b{color:var(--ink)}
.sheet .lvls{display:grid;gap:6px;margin-bottom:14px}
.sheet .lvls button{display:flex;align-items:center;gap:9px;text-align:left;background:var(--card);
  border:1px solid var(--edge);border-radius:9px;padding:9px 11px;color:var(--ink);
  font-family:"Manrope";font-size:12.5px;cursor:pointer}
.sheet .lvls button u{text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--dim);width:16px;flex:none}
.sheet .lvls button.ok{border-color:rgba(79,180,119,.45)}
.sheet .lvls button.ok u{color:var(--go)}
.sheet .lvls button.lock{opacity:.4;pointer-events:none}
.sheet .lvls button i{margin-left:auto;font-style:normal;font-family:"IBM Plex Mono",monospace;
  font-size:13px;color:var(--sign);letter-spacing:.08em}
.sheet .close{width:100%;padding:13px;border:0;border-radius:10px;background:var(--card);
  color:var(--ink);font-family:"Manrope";font-weight:600;font-size:14px;cursor:pointer}
.codeRow{display:flex;gap:7px;margin-bottom:14px}
.codeRow input{flex:1;min-width:0;background:var(--card);border:1px solid var(--edge);border-radius:9px;
  color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:15px;letter-spacing:.2em;
  text-align:center;padding:11px 8px}
.codeRow button{flex:none;background:var(--card);border:1px solid var(--edge);border-radius:9px;
  color:var(--ink);font-family:"Manrope";font-size:13px;padding:11px 14px;cursor:pointer}