@font-face{font-family:Anton;src:url(fonts/Anton-Latin.woff) format('woff'),url(fonts/Anton-Regular.ttf) format('truetype');font-display:block}
:root{
  --bg:#101014;--slot:#1C1C22;--slotLine:#2E2E38;--key:#2A2A33;--mute:#6E6E7C;--soft:#B9B9C6;--gold:#FFC21A;--chip:#FF8C2E;
  --rh:60px;--fs:42px;--cw:25px;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:#fff;overflow:hidden}
body{font-family:Anton,Impact,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{all:unset;box-sizing:border-box;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:2px solid #fff;outline-offset:2px}
[hidden]{display:none!important}
#app{position:relative;height:100vh;height:100dvh;max-width:480px;margin:0 auto;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);user-select:none;-webkit-user-select:none;overflow:hidden}
.scr{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.hd{height:52px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.hd h1{font-weight:400;font-size:26px;letter-spacing:.05em;white-space:nowrap}
.ttl{display:flex;flex-direction:column;justify-content:center;min-width:0}
.from{font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:.14em;color:var(--gold);line-height:12px;margin-top:-1px;white-space:nowrap}
.ttl:has(.from:not([hidden])) h1{line-height:30px}
.prog{font-size:19px;color:var(--gold);letter-spacing:.05em;white-space:nowrap}

/* ---- the chain: one full-width band per word ---- */
.chain{flex:none}
.chain.scroll{flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
.chain.scroll::-webkit-scrollbar{display:none}
.row{position:relative;height:var(--rh);display:flex;align-items:center;padding:0 20px;background:var(--slot);color:var(--c);box-shadow:inset 0 1px var(--slotLine)}
.row::before{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left;pointer-events:none}
.row.lit{color:var(--bg);box-shadow:none}
.row.lit::before{transform:none}
.row.lit.anim::before{animation:sweep .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes sweep{from{transform:scaleX(0)}to{transform:none}}
.row.cur{box-shadow:inset 0 0 0 3px var(--c)}
.word{position:relative;display:flex;align-items:flex-end;z-index:1}
.ch{width:var(--cw);text-align:center;font-size:var(--fs);line-height:1;height:calc(var(--fs) * 1.0);position:relative}
.ch.wide{width:calc(var(--cw) * 1.3)}
.ch.u::after{content:"";position:absolute;left:12%;right:12%;bottom:6%;height:max(3px,calc(var(--rh) * .08));background:var(--mute)}
.ch.cursor::after{background:#fff}
.ch.typ{color:#fff}
.ch.pop{animation:pop .3s ease-out}
@keyframes pop{0%{transform:scale(1.5);}100%{transform:none}}
.dots{margin-left:auto;display:flex;gap:2px;z-index:1;font-family:var(--ui);font-weight:700;font-size:max(15px,calc(var(--rh) * .33));line-height:1}
.tag{position:absolute;right:16px;top:-10px;height:20px;line-height:20px;padding:0 9px;border-radius:10px;background:var(--bg);color:#fff;
  font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:.12em;z-index:3;white-space:nowrap;pointer-events:none}
.tag.anim{animation:tagIn .35s .18s cubic-bezier(.3,1.6,.5,1) both}
@keyframes tagIn{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.row.shake{animation:shake .32s linear}
/* no room for another letter: a small nudge, not the miss shake */
.row.nudge .word{animation:nudge .18s linear}
@keyframes nudge{0%,100%{transform:none}35%{transform:translateX(3px)}70%{transform:translateX(-2px)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.chain .row{transition:filter .25s}
.chain.dim .row{filter:brightness(.3)}
.chain.wave .row.lit{animation:wave .5s ease-out both;animation-delay:calc(var(--i) * 60ms)}
@keyframes wave{0%{filter:none}40%{filter:brightness(1.35)}100%{filter:none}}

/* ---- small text buttons under the chain ---- */
.bar{flex:none;display:flex;justify-content:center;gap:4px;padding:8px 8px 0;flex-wrap:wrap}
.bar button,.links button{font-family:var(--ui);font-weight:800;font-size:11px;letter-spacing:.1em;color:var(--soft);padding:9px 10px;border-radius:6px}
.bar button:active,.links button:active{background:var(--slot)}
#resultsBtn{color:var(--gold)}

/* ---- keyboard ---- */
.kb{flex:none;padding:6px 6px 4px}
.kr{display:flex;justify-content:center;gap:5px;margin-top:6px}
.kr:first-child{margin-top:0}
.k{flex:1 1 0;max-width:40px;height:46px;border-radius:7px;background:var(--key);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:700;font-size:17px}
.k.w{flex:1.6 1 0;max-width:62px;font-size:11px;letter-spacing:.02em}
.k svg{width:22px;height:22px}
.k.enter{flex:1 1 auto;max-width:none;height:50px;border-radius:8px;background:var(--gold);color:var(--bg);font-family:Anton,Impact,sans-serif;font-weight:400;font-size:23px;letter-spacing:.08em}
.k[data-k="enter"]:active{background:#E0A800}
.k:active{background:#3C3C48}
.kb.off{opacity:.35;pointer-events:none}
.kb.gone{visibility:hidden}
.credit{flex:none;text-align:center;font-family:var(--ui);font-size:10px;line-height:16px;color:var(--mute);padding:2px 0 4px}
.credit a{color:var(--mute)}

/* ---- result / made screens ---- */
.pad{padding:0 18px}
.col{flex:1 1 0;min-height:0;display:flex;flex-direction:column;padding-top:4px;padding-bottom:10px}
.big{font-size:46px;line-height:1;letter-spacing:.03em;flex:none}
.cardWrap{flex:0 1 auto;min-height:120px;display:flex;align-items:flex-start;justify-content:center;margin:16px 0 20px}
.cardWrap img{max-width:100%;max-height:100%;width:290px;height:auto;object-fit:contain;object-position:top;display:block}
.btn{flex:none;width:100%;height:54px;border-radius:8px;background:var(--gold);color:var(--bg);display:flex;align-items:center;justify-content:center;
  font-size:24px;letter-spacing:.06em;text-align:center}
.btn.s{background:transparent;color:#fff;box-shadow:inset 0 0 0 3px #fff;margin-top:10px}
.btn.off{background:var(--slot);color:#D0D0DA;font-size:18px;box-shadow:inset 0 0 0 2px var(--mute)}
.btn.off:not([disabled]){background:var(--gold);color:var(--bg);box-shadow:none;font-size:24px}
.btn[disabled]{cursor:default}
.links{flex:none;display:flex;justify-content:center;gap:6px;margin-top:6px}
.linkBox{flex:none;font-family:var(--ui);font-weight:700;font-size:12px;color:var(--soft);background:var(--slot);border-radius:6px;padding:9px 10px;
  margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:text;-webkit-user-select:text}

/* ---- make screen ---- */
.makeTools{flex:none;padding-bottom:4px}
.lab{font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:.1em;margin:14px 0 10px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;flex-wrap:wrap;gap:8px;max-height:88px;overflow:hidden;min-height:40px}
.chips button{border-radius:6px;padding:4px 12px 6px;font-size:26px;line-height:30px;background:var(--chip);color:var(--bg);letter-spacing:.04em}
.chips button:active{filter:brightness(1.15)}
.chips .none{font-family:var(--ui);font-weight:700;font-size:13px;color:var(--mute);align-self:center}
.notice{display:flex;align-items:center;gap:10px;margin-top:10px;font-family:var(--ui);font-weight:700;font-size:13px;color:#fff}
.notice span{flex:1}
.notice button{flex:none;font-family:var(--ui);font-weight:800;font-size:12px;letter-spacing:.06em;padding:9px 12px;border-radius:6px;box-shadow:inset 0 0 0 2px #fff}
#sendBtn{margin-top:16px}
.row.free .ch.cursor::after{background:#fff}

/* ---- overlays ---- */
.toast{position:absolute;left:50%;top:64px;transform:translate(-50%,-6px);background:#fff;color:var(--bg);font-family:var(--ui);font-weight:800;
  font-size:13px;letter-spacing:.06em;padding:9px 14px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:20;white-space:nowrap;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}
.flash{position:absolute;left:0;right:0;top:40%;margin-top:-26px;text-align:center;font-size:min(52px,13.5vw);line-height:1;color:#fff;letter-spacing:.03em;
  text-shadow:0 3px 0 var(--bg),0 0 24px rgba(0,0,0,.6);opacity:0;pointer-events:none;z-index:15}
.flash.on{animation:flash 1.3s ease-out both}
@keyframes flash{0%{opacity:0;transform:scale(.7)}20%{opacity:1;transform:scale(1.04)}30%{transform:none}80%{opacity:1}100%{opacity:0}}
.help{position:absolute;inset:0;background:rgba(10,10,13,.86);display:flex;align-items:center;justify-content:center;padding:18px;z-index:30}
.helpCard{width:100%;max-width:380px;background:var(--slot);border-radius:14px;padding:22px 20px 20px;box-shadow:0 0 0 3px #34343F;max-height:100%;overflow:auto}
.helpCard h2{font-weight:400;font-size:30px;letter-spacing:.05em;margin-bottom:10px}
.helpCard p{font-family:var(--ui);font-weight:600;font-size:15px;line-height:1.45;color:#E6E6EE;margin-bottom:10px}
.helpCard .ex{font-family:var(--ui);font-weight:600;font-size:14px;line-height:1.65;margin:4px 0 14px;padding:10px 12px;border-radius:8px;background:var(--bg);color:var(--soft)}
.helpCard .ex span{display:block;white-space:nowrap}
.helpCard .ex b{font-family:Anton,sans-serif;font-weight:400;color:#fff;letter-spacing:.06em;font-size:17px}
.helpCard .btn{margin-top:8px}

/* ---- broken link ---- */
.brokenBox{justify-content:center;gap:22px;padding-bottom:80px}
.brokenText{font-family:var(--ui);font-weight:700;font-size:18px;line-height:1.45;color:#fff}

/* small screens */
@media (max-height:640px){
  .k{height:42px}
  .k.enter{height:44px;font-size:21px}
  .chips{max-height:40px}
  .kr{margin-top:5px}
  .big{font-size:36px}
  .btn{height:48px;font-size:21px}
  .cardWrap{margin:10px 0 12px}
  .lab{margin:10px 0 8px}
}
@media (max-width:350px){
  .hd{padding:0 12px}
  .hd h1{font-size:23px}
  .kr{gap:4px}
  .k{font-size:15px}
  .bar{gap:0;padding-left:2px;padding-right:2px}
  .bar button{padding:9px 5px;letter-spacing:.03em;font-size:10px}
  .helpCard{padding:18px 16px 16px}
  .helpCard .ex{font-size:12px;padding:9px 10px}
  .helpCard .ex b{font-size:15px;letter-spacing:.04em}
  .toast{font-size:12px;letter-spacing:.04em;padding:9px 11px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}