@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#081121;--panel:#0c192be8;--line:#31526a;--cyan:#70e2e2;--red:#f47991;--gold:#f4c982;--muted:#8da6c0}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:#e9f5ff;background:#050b17;font-family:Vazirmatn,Tahoma,Arial,sans-serif;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}a{color:inherit;text-decoration:none}.hidden{display:none!important}.shell{height:100dvh;min-height:500px;display:flex;flex-direction:column;position:relative;isolation:isolate;background:#081321}
.topbar{min-height:77px;padding:9px clamp(10px,2vw,25px);display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,2vw,20px);background:linear-gradient(180deg,#0e1c31,#091728);border-bottom:1px solid #4b779044;box-shadow:0 6px 30px #0005;z-index:3;direction:ltr}.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}.brand a{font:900 17px Arial,sans-serif;direction:ltr;letter-spacing:1px;color:#c6e7ff}.brand a>span{margin-left:4px}.brand-accent{color:#74ddea}.mode-pill{border:1px solid #38bfc04a;background:#0e3e4b;color:#92f6ec;padding:6px 8px;font:800 10px Arial,sans-serif;border-radius:5px;letter-spacing:.6px}.base-head{flex:1;min-width:98px;max-width:250px;display:flex;align-items:center;justify-content:space-between;gap:9px;direction:ltr}.base-info{display:flex;flex-direction:column;gap:1px;text-align:left;min-width:65px}.base-label{font-size:10px;color:#95a8bc}.base-info b{font-size:12px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.enemy-head .base-info b{color:#ffb3bb}.my-head .base-info b{color:#8cece4}.hp-top{min-width:80px;flex:1;text-align:right;font:800 13px Arial,sans-serif}.hp-track{height:7px;background:#263244;border-radius:20px;overflow:hidden;margin-top:4px;border:1px solid #ffffff19}.hp-track i{display:block;height:100%;width:100%;transition:width .32s;background:linear-gradient(90deg,#dd4968,#f68a84);box-shadow:0 0 9px #ed5e77}.my-head .hp-track i{background:linear-gradient(90deg,#338a94,#7cead6)}.hp-hit b{animation:flashText .5s ease-out}.clock-box{border:1px solid #3a5772;background:#0b1a2e;border-radius:10px;padding:8px 14px;text-align:center;min-width:90px}.clock-label{font:700 9px Arial,sans-serif;display:block;color:#849eb4;letter-spacing:1.2px}.clock-box b{font:900 23px Arial,sans-serif;font-variant-numeric:tabular-nums;color:#f2f6ff}.controls{display:flex;gap:6px}.controls button{border:1px solid #30495c;background:#112238;color:#c0d7e7;border-radius:8px;padding:7px 10px;font-size:11px}.controls button:hover{border-color:#8caac0}#surrender{border-color:#753b4d;color:#ffb0b9}
.arena{flex:1;min-height:0;position:relative;overflow:hidden;background:#111d30}#arena-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.lane-cards{position:absolute;inset:0;pointer-events:none}.lane-card{pointer-events:auto;position:absolute;right:clamp(125px,13%,190px);width:clamp(240px,33vw,490px);transform:translateY(-50%);padding:9px 13px 11px;text-align:right;display:block;color:#d9ebf5;border:1px solid #5f80926b;background:linear-gradient(115deg,#0c1a2ae9,#102d3de8);border-radius:13px;box-shadow:0 8px 32px #0009, inset 0 1px #ffffff15;transition:background .14s, box-shadow .14s,border-color .14s;overflow:hidden}.lane-card[data-lane="0"]{top:19%}.lane-card[data-lane="1"]{top:49%}.lane-card[data-lane="2"]{top:79%}.lane-card.active{border-color:#65e5e1;box-shadow:0 0 0 1px #69f0dc63,0 0 28px #22c9bd22,0 8px 32px #000b;background:linear-gradient(115deg,#10324bfa,#133944ef)}.lane-card.cooling{opacity:.84}.lane-mini{display:flex;align-items:center;gap:8px;direction:ltr}.lane-mini em{font:900 11px Arial,sans-serif;color:#70e3e4;font-style:normal}.lane-mini>span{font:700 9px Arial,sans-serif;letter-spacing:1.1px;color:#829bad}.lane-mini strong{margin-left:auto;font-size:10px;color:#7ff0cd}.lane-card.cooling .lane-mini strong{color:#fbc17a}.phrase{display:block;direction:rtl;text-align:right;font-size:clamp(12px,1.16vw,16px);line-height:1.9;font-weight:700;min-height:31px;white-space:normal}.phrase .done{color:#7af2d8}.phrase .wrong{color:#ff899a;text-decoration:underline}.phrase .rest{color:#e1ebf5}.phrase.dim{opacity:.25}.lane-bottom{display:flex;align-items:center;justify-content:space-between;color:#819eb6;font-size:10px;margin-top:2px}.lane-key{border:1px solid #8bc6d65e;border-radius:5px;min-width:23px;padding:1px 6px;font:800 12px Arial,sans-serif;text-align:center;color:#a2f2ec}.cool-fill{position:absolute;bottom:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#61e6cf,#eab26f);transition:width .08s linear}.lane-card.cooling .cool-fill{background:#e7aa68}.vertical-label{position:absolute;writing-mode:vertical-rl;direction:ltr;font:800 10px Arial,sans-serif;letter-spacing:2.8px;opacity:.65;top:50%;transform:translateY(-50%)}.left-label{left:12px;color:#ff8ba6}.right-label{right:12px;color:#76e4e0}.round-banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:#08172bc8;border:1px solid #6a90a34b;border-radius:20px;padding:7px 18px;display:flex;align-items:center;gap:11px;direction:ltr}.round-banner b{font:800 10px Arial,sans-serif;color:#9dc3d9;letter-spacing:.7px}.round-banner span{font-size:10px;color:#75e4d9}.danger-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:inset 0 0 55px #f4436850,inset 0 0 6px #ff7080;border:2px solid #ff728a50}.danger-glow.on{opacity:1;animation:attackGlow .6s ease-out}
.bottom-bar{min-height:100px;display:flex;align-items:center;gap:13px;padding:10px clamp(12px,2.1vw,32px);position:relative;background:linear-gradient(#0f2135,#071221);border-top:1px solid #47718565;z-index:3;direction:rtl}.small-stat{display:flex;flex-direction:column;align-items:center;min-width:96px}.small-stat span{font-size:10px;color:#8bafc3;text-align:center}.small-stat b{font:900 24px Arial,sans-serif;color:#a8e9e6}.compose{display:flex;flex:1;max-width:900px;align-items:center;gap:13px;background:#09172a;border:1px solid #406986;border-radius:13px;padding:8px 14px;box-shadow:0 0 20px #217b8b0d}.compose-icon{color:#72ddde;font-size:22px}.compose-core{flex:1;min-width:0}.compose-core label{font-size:10px;color:#83a8ba;display:block;margin-bottom:3px}.compose-core label b{color:#9ff7e9}.compose-core label span{padding-right:10px;color:#748c9e}.compose-core input{display:block;border:0;outline:none;width:100%;color:#f3fcff;background:none;font-size:15px;font-weight:700;direction:rtl;caret-color:#80f3d8}.compose-core input::placeholder{color:#5d829b;font-weight:400}.enter-key{font:800 10px Arial,sans-serif;color:#7da0b5;border:1px solid #30485d;padding:7px;text-align:center;border-radius:6px}.enter-key strong{font-size:17px;color:#80d9da}.hint-line{position:absolute;bottom:-1px;left:0;right:0;transform:translateY(100%);pointer-events:none;font-size:10px;color:#82a4b5;display:none}kbd{display:inline-block;font:800 11px Arial,sans-serif;border:1px solid #618a9b;border-radius:4px;margin-inline:3px;padding:2px 5px}
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(ellipse at 52% 35%,#0e304bb0,#040a16ea 70%);backdrop-filter:blur(8px);overflow:auto}.intro-card,.lobby-card,.result-card{width:min(510px,100%);max-height:calc(100dvh - 36px);overflow:auto;text-align:center;background:linear-gradient(165deg,#142a43f5,#0a1529f9);border:1px solid #3a6880;border-radius:23px;padding:clamp(18px,3vh,33px);box-shadow:0 25px 90px #000a}.intro-kicker{font:800 10px Arial,sans-serif;letter-spacing:2.2px;color:#61dbd8}.intro-icon{font-size:63px;line-height:1.15;margin-top:10px;color:#b3ffe5;text-shadow:0 0 25px #44e2bd}.intro-card h1{font:900 clamp(27px,4vw,37px) Arial,sans-serif;letter-spacing:4px;color:#fff;margin:4px 0}.intro-card h2,.lobby-card h2{font-size:22px;margin:5px 0 9px}.intro-card p,.lobby-card p{color:#aac1d2;line-height:1.9;font-size:12px;margin:0 auto 15px;max-width:410px}.field-label{display:block;text-align:right;font-size:11px;color:#94adc5;margin-bottom:5px}.text-field{background:#061326;border:1px solid #38627b;border-radius:10px;color:#f2faff;padding:11px 13px;outline:none;width:100%;font-size:13px}.text-field:focus{border-color:#5fe0d0;box-shadow:0 0 0 3px #5fddd018}.language{display:flex;align-items:center;justify-content:space-between;margin:12px 0 14px}.language>span{font-size:12px;color:#9fb5c8}.segments{border:1px solid #37516b;background:#071a2d;padding:4px;border-radius:10px;display:flex;gap:3px}.segments button{border:none;background:transparent;color:#96b2c3;font-size:12px;padding:7px 18px;border-radius:7px}.segments button.active{background:#257d80;color:#eafffd;font-weight:800}.primary,.secondary,.copy{width:100%;border-radius:10px;padding:11px 14px;font-weight:800;font-size:13px}.primary{border:1px solid #77f2df;background:linear-gradient(110deg,#36c5b6,#63dfd7);color:#082334;box-shadow:0 7px 25px #1fa9ae33}.primary:hover{filter:brightness(1.12)}.secondary{background:#142740;color:#d6eafb;border:1px solid #42627e}.entry-actions{display:flex;flex-direction:column;gap:8px}.or{font-size:11px;color:#7a9cba}.join-line{display:flex;gap:8px;direction:ltr}.join-line .text-field{flex:1;min-width:0;text-align:center;text-transform:uppercase;letter-spacing:2px;font-family:Arial,sans-serif;font-weight:700}.join-line button{background:#1e3f5a;color:#c6e3f3;border:1px solid #4a7a92;border-radius:9px;padding:9px 16px;font-size:12px}.return-link{display:block;margin:12px 0 5px;color:#98d7da;font-size:11px}.intro-note{color:#657e94;font-size:10px}.big-code{font:900 38px Arial,sans-serif;letter-spacing:10px;color:#9ef7e1;border:1px dashed #568ba5;padding:16px;margin:20px 0 8px;border-radius:12px;direction:ltr}.copy{border:0;background:transparent;color:#8dcfd3}.lobby-members{margin:12px 0 20px;display:flex;flex-direction:column;gap:10px}.member{background:#102c44;border:1px solid #27546a;border-radius:9px;display:flex;justify-content:space-between;padding:11px;color:#daecf7;font-size:12px}.member small{color:#75dccc}.lobby-meta{display:flex;justify-content:center;gap:10px;margin-bottom:18px}.lobby-meta span{background:#153449;color:#83bcc2;border-radius:6px;padding:6px 10px;font-size:10px}.lobby-card .secondary{margin-top:9px}.medal{font-size:50px;margin:9px 0}.result-card h2{font-size:32px;margin:5px 0}.result-card p{color:#9cb3c7;font-size:12px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.result-grid>div{background:#10283e;border:1px solid #335b73;border-radius:10px;padding:12px 5px;display:flex;flex-direction:column;gap:4px}.result-grid span{color:#8facbe;font-size:10px}.result-grid b{font:900 21px Arial,sans-serif;color:#bcf0ec}.rewards{display:flex;justify-content:space-evenly;gap:10px;margin:12px 0}.rewards span{font-size:12px;color:#acc2cf}.rewards b{color:#f2cf80;font:800 16px Arial}.result-exit{display:block;margin-top:8px}.result-card small{display:block;margin-top:9px;color:#6d8da4;font-size:10px}.toast{position:fixed;bottom:116px;left:50%;transform:translate(-50%,25px);opacity:0;transition:.2s;pointer-events:none;z-index:50;background:#133146;border:1px solid #58adba;border-radius:10px;color:#e3f8f9;padding:10px 18px;font-size:12px;box-shadow:0 10px 30px #0008}.toast.show{opacity:1;transform:translate(-50%,0)}.landscape-tip{display:none}
@keyframes attackGlow{0%{opacity:1}100%{opacity:0}}@keyframes flashText{0%,60%{color:#ff5b70;transform:scale(1.13)}100%{transform:scale(1)}}
@media(max-width:1150px){.mode-pill{display:none}.topbar{gap:8px}.base-head{max-width:190px}.brand a{font-size:14px}.controls button{padding:6px}.lane-card{right:13%;width:37vw}.phrase{font-size:12px}.small-stat{min-width:75px}}@media(max-height:720px){.topbar{min-height:62px;padding:6px 13px}.bottom-bar{min-height:74px;padding:7px 16px}.lane-card{padding:5px 10px}.lane-mini{gap:5px}.lane-mini>span{font-size:8px}.phrase{min-height:25px;font-size:12px}.lane-bottom{font-size:9px}.round-banner{top:3px}.intro-icon{font-size:42px}.intro-card p{margin-bottom:8px}.intro-card,.lobby-card{padding:19px}.result-card{padding:15px}.result-grid{margin:10px 0}}
@media(max-width:800px){.brand{display:none}.base-head{min-width:70px;max-width:150px}.base-info b{font-size:10px}.hp-top{min-width:60px}.clock-box{min-width:65px;padding:7px}.clock-box b{font-size:16px}.controls button{font-size:10px}.round-banner{display:none}.lane-card{right:16%;width:49vw}.lane-mini strong,.lane-mini>span{display:none}.small-stat{display:none}.compose{max-width:none}.bottom-bar{min-height:77px}}@media (orientation:portrait) and (max-width:600px){.landscape-tip{display:block;position:fixed;right:0;left:0;bottom:0;background:#15364aec;text-align:center;color:#ffdeb3;z-index:19;padding:6px;font-size:11px}.lane-card{width:58vw;right:17%;padding:5px}.lane-card .phrase{font-size:10px}.vertical-label{display:none}.topbar{min-height:64px}}

.lane-card .phrase[dir=ltr]{text-align:left}.compose-core input[dir=ltr]{text-align:left;direction:ltr}

/* v0.9.1: automatic phrase-to-lane routing and native surrender dialog */
.lane-card{cursor:default}.lane-card.possible{border-color:#8eaab9;box-shadow:0 0 0 1px #74b2bd44,0 6px 25px #0009}.lane-card.active{border-color:#62eddb;box-shadow:0 0 0 2px #56d5c957,0 0 25px #28e3c333,0 8px 32px #000b}.lane-card .lane-key{font-size:9px;color:#9de9d9;min-width:35px}.compose.has-error{border-color:#d56b85;box-shadow:0 0 0 1px #ff6d8860}.return-modes{display:block;border:0;background:none;color:#a9dde0;font-size:12px;margin:12px auto 0;text-decoration:underline;cursor:pointer}
.confirm-overlay{position:fixed;inset:0;background:#040a18db;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:80;padding:20px}.confirm-card{width:min(440px,100%);text-align:center;background:linear-gradient(155deg,#182d45,#0b1529);border:1px solid #81536b;border-radius:20px;padding:28px;box-shadow:0 22px 80px #000a}.confirm-icon{color:#f49bab;font-size:55px}.confirm-card h2{font-size:25px;margin:4px 0 7px;color:#fff}.confirm-card p{font-size:13px;line-height:1.9;color:#b6c9d9;margin:5px 0 24px}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.confirm-actions .secondary{margin:0}.confirm-danger{border:1px solid #f17a92;border-radius:10px;background:#873044;color:#fff0f2;font-weight:800;padding:11px 8px}.confirm-danger:hover{background:#a93d56}.confirm-danger:disabled{opacity:.5}

[hidden]{display:none!important;}