html,body{width:100%;height:100%;overscroll-behavior:none;-webkit-text-size-adjust:100%}body{margin:0;padding:0;background-color:#1a1a1a;overflow:hidden;display:flex;justify-content:center;align-items:center;height:100dvh;min-height:100vh}#app{width:100%;height:100%}#ui-root{position:fixed;inset:0;z-index:9000;pointer-events:none}.ui{pointer-events:auto;position:absolute;inset:0;color:#fff;font-family:Plus Jakarta Sans,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}.ui-home{background:linear-gradient(180deg,#0b1015,#0d161c)}.ui-home:before{content:"";position:absolute;inset:0;opacity:.18;background-image:radial-gradient(1px 1px at 25% 25%,white 1px,transparent 0),radial-gradient(1px 1px at 50% 50%,white 1px,transparent 0),radial-gradient(2px 2px at 75% 75%,#2badee 1px,transparent 0),radial-gradient(1.5px 1.5px at 10% 90%,white 1px,transparent 0);background-size:140px 140px;pointer-events:none}.ui-shell{position:relative;height:100%;max-width:480px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}.ui-header{display:flex;align-items:center;justify-content:space-between;padding-top:10px}.ui-icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#00000024;color:#ffffffd9;display:grid;place-items:center}.ui-icon-btn:active{transform:scale(.98)}.ui-icon-btn .material-symbols-outlined{font-size:22px}.ui-brand{display:flex;align-items:center;gap:12px}.ui-brand__icon{width:44px;height:44px;border-radius:12px;background:#15232b;border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px #2badee2e}.ui-brand__icon .material-symbols-outlined{color:#2badee;font-size:24px}.ui-brand__name{font-weight:800;letter-spacing:.12em;font-size:16px}.ui-brand__tag{margin-top:2px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#2badeebf;font-weight:700}.ui-main{flex:1;display:flex;flex-direction:column;gap:12px;overflow:hidden}.ui-tabs{display:flex;gap:8px;background:#161f26b8;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:6px}.ui-tab{flex:1;height:44px;border-radius:10px;border:none;background:transparent;color:#ffffff9e;font-weight:800;letter-spacing:.08em}.ui-tab--active{background:#2badee;color:#0b1015;box-shadow:0 0 10px #2badee59}.ui-field{display:flex;flex-direction:column;gap:8px;padding:10px 0 2px}.ui-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#ffffff8c;font-weight:700}.ui-input{height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#161f26c7;color:#fff;font-size:16px;padding:0 14px;outline:none}.ui-input:focus{border-color:#2badeeb3;box-shadow:0 0 0 3px #2badee2e}.ui-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ui-card{border-radius:14px;background:#161f26b8;border:1px solid rgba(255,255,255,.06);padding:12px;display:flex;flex-direction:column;gap:10px}.ui-card__title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#ffffff8c;font-weight:800}.ui-stepper{display:flex;align-items:center;justify-content:space-between;gap:10px}.ui-stepper__btn{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#0000002e;color:#fff;font-size:20px;font-weight:800}.ui-stepper__btn:active{transform:scale(.98)}.ui-stepper__value{flex:1;text-align:center;font-size:24px;font-weight:900;color:#2badee}.ui-pill{height:44px;border-radius:9999px;border:1px solid rgba(255,255,255,.1);background:#00000024;color:#ffffffe0;font-weight:800;letter-spacing:.06em}.ui-pill--active{background:#2badee2e;border-color:#2badee8c;box-shadow:0 0 10px #2badee33}.ui-hint{font-size:12px;color:#ffffff8c}.ui-primary{height:56px;border-radius:16px;border:none;background:#2badee;color:#0b1015;font-weight:900;letter-spacing:.08em;font-size:16px;box-shadow:0 0 18px #2badee59}.ui-primary:active{transform:scale(.99)}.ui-section-title{margin-top:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#ffffff59;text-align:center}.ui-games{flex:1;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-bottom:8px}.ui-game{text-align:left;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:#161f269e;color:#ffffffeb;padding:12px;font-size:13px;font-weight:700}.ui-game--resume{border-color:#2badee73;box-shadow:0 0 12px #2badee1f}.ui-empty{padding:16px;text-align:center;color:#fff6;font-size:13px}.ui-disabled{opacity:.45}.hud{pointer-events:none;position:absolute;inset:0;z-index:9100;font-family:Plus Jakarta Sans,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#fff}.hud-top{pointer-events:none;position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.hud-top__left{pointer-events:none;padding:10px 12px;border-radius:14px;background:#00000059;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hud-title{font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:#ffffffb3}.hud-subtitle{margin-top:4px;font-size:14px;font-weight:800}.hud-top__right{pointer-events:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.hud-pill{pointer-events:none;padding:10px 12px;border-radius:9999px;background:#2badee38;border:1px solid rgba(43,173,238,.45);font-weight:900;letter-spacing:.1em;font-size:11px}.hud-pill--muted{opacity:.55;background:#00000047;border-color:#ffffff1a}.hud-chip{pointer-events:none;padding:8px 10px;border-radius:9999px;background:#0000004d;border:1px solid rgba(255,255,255,.08);font-weight:800;font-size:11px;color:#ffffffd9}.hud-chip--active{border-color:#2badee73;box-shadow:0 0 12px #2badee24}.hud-panel{pointer-events:auto;position:absolute;right:12px;top:max(86px,env(safe-area-inset-top) + 74px);width:min(320px,calc(100vw - 24px));max-height:calc(100vh - 260px - env(safe-area-inset-bottom));overflow:auto;border-radius:16px;background:#00000059;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px;display:flex;flex-direction:column;gap:10px}.hud-section-title{font-weight:900;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:#ffffff8c}.hud-scores{display:flex;flex-direction:column;gap:6px}.hud-score{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:12px;background:#0000002e;border:1px solid rgba(255,255,255,.06)}.hud-score__name{font-weight:800;font-size:12px;color:#ffffffeb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-score__val{font-weight:900;font-size:12px;color:#2badee}.hud-legend{border-radius:12px;padding:10px;background:#0000002e;border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:8px}.hud-legend__row{display:flex;align-items:center;gap:8px}.hud-swatch{width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.18)}.hud-swatch--rift{background:#a855f7f2}.hud-swatch--sanct{background:#f97316f2}.hud-legend__text{font-size:12px;color:#ffffffb8;font-weight:700}.hud-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hud-btn{height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.1);font-weight:900;letter-spacing:.08em;font-size:12px;color:#fff;background:#00000038}.hud-btn:active{transform:scale(.99)}.hud-btn:disabled{opacity:.45}.hud-btn--primary{background:#2badee;color:#0b1015;border-color:#2badee8c;box-shadow:0 0 14px #2badee40}.hud-btn--secondary{background:#ffffff14}.hud-btn--warn{background:#ffcc002e;border-color:#ffcc003d}.hud-btn--ghost{background:#0000001f}.hud-chat{border-radius:12px;padding:10px;background:#0000002e;border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:8px}.hud-chat__log{max-height:160px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px}.hud-chat__line{font-size:12px;color:#ffffffc7;line-height:1.25}.hud-chat__sender{font-weight:900;color:#2badeef2}.hud-chat__row{display:flex;gap:8px}.hud-chat__input{flex:1;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0003;color:#fff;padding:0 12px;outline:none}.hud-chat__send{height:40px;border-radius:12px;border:1px solid rgba(43,173,238,.45);background:#2badee2e;color:#fff;font-weight:900;letter-spacing:.06em;padding:0 12px}.hud-toast{pointer-events:none;position:absolute;left:50%;bottom:max(110px,env(safe-area-inset-bottom) + 90px);transform:translate(-50%);padding:10px 12px;border-radius:9999px;background:#0000008c;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:900;letter-spacing:.08em;font-size:11px}.hud-toast--hide{opacity:0;transition:opacity .2s ease}.hud-gameover{pointer-events:auto;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0000009e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9200}.hud-gameover__card{width:min(360px,calc(100vw - 28px));border-radius:18px;background:#101c22eb;border:1px solid rgba(255,255,255,.08);padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 80px #0009}.hud-gameover__title{font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:14px;color:#ffffffeb}.hud-gameover__body{font-size:14px;color:#ffffffc7;white-space:pre-line;font-weight:700}.canvas-board{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}.rack{position:absolute;left:0;right:0;bottom:0;z-index:9150;pointer-events:auto;padding:12px 12px calc(12px + env(safe-area-inset-bottom));background:#152028eb;border-top:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.rack__inner{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px 12px;min-width:100%;justify-content:center}.rack-tile{flex:0 0 auto;width:64px;height:64px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#1e293b;border-bottom:4px solid #0f172a;position:relative}.rack-tile--selected{transform:translateY(-6px);box-shadow:0 0 0 2px #2badee99,0 12px 28px #00000073}.rack-tile--active{box-shadow:0 0 0 2px #2badee8c,0 18px 38px #00000073}.rack-tile--dragging{transform:translateY(-10px) scale(1.02);box-shadow:0 0 0 2px #2badeeb3,0 26px 60px #0000008c}.rack-tile__face{position:absolute;inset:0;border-radius:16px;background:transparent;border-bottom:none}.rack-tile__face:after{content:none}.rack-tile__glyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:30px;height:30px;display:grid;place-items:center}.rack-tile__glyph svg{display:block;width:30px;height:30px;filter:drop-shadow(0 0 2px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(0,0,0,.25))}.drag-proxy{position:fixed;left:0;top:0;z-index:9400;pointer-events:none;will-change:transform}.drag-proxy__tile{transform:rotate(-4deg);filter:drop-shadow(0 22px 40px rgba(0,0,0,.55))}.debug-overlay{position:fixed;left:10px;top:10px;z-index:9999;pointer-events:none;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:11px;line-height:1.25;white-space:pre;padding:8px 10px;border-radius:10px;background:#0000008c;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#ffffffe6}.help{position:fixed;inset:0;z-index:9800;display:flex;align-items:center;justify-content:center;padding:18px;background:#0000008c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto}.help__card{width:min(440px,92vw);border-radius:18px;background:#161f26eb;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 80px #0000008c;padding:14px}.help__title{font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:14px;color:#ffffffeb;padding:6px 6px 10px}.help__body{padding:10px 8px 6px;border-radius:14px;background:#00000029;border:1px solid rgba(255,255,255,.06)}.help__step-title{font-size:18px;font-weight:900;color:#2badee}.help__step-text{margin-top:6px;font-size:14px;font-weight:650;color:#ffffffc7;line-height:1.35}.help__dots{display:flex;justify-content:center;gap:8px;padding:12px 0 2px}.help__dot{width:8px;height:8px;border-radius:9999px;background:#ffffff29}.help__dot--active{background:#2badeef2;box-shadow:0 0 12px #2badee73}.help__actions{display:flex;gap:10px;justify-content:flex-end;padding-top:12px}.help__btn{height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#00000029;color:#ffffffeb;font-weight:900;letter-spacing:.06em;padding:0 14px}.help__btn:disabled{opacity:.45}.help__btn--primary{background:#2badee;border-color:#2badee8c;color:#0b1015}.help__btn--ghost{background:#ffffff0f}#stitch-splash{position:fixed;inset:0;z-index:9999;font-family:Plus Jakarta Sans,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#fff;background:#0b1015;overflow:hidden}#stitch-splash.stitch-splash--hidden{opacity:0;transform:scale(1.01);transition:opacity .28s ease,transform .28s ease;pointer-events:none}.stitch-bg{position:absolute;inset:0}.stitch-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#080e11,#101c22 55%,#0d161b)}.stitch-glow{position:absolute;left:50%;top:38%;width:420px;height:420px;transform:translate(-50%,-50%);border-radius:9999px;background:#2badee1f;filter:blur(60px);animation:stitchPulse 4s ease-in-out infinite}.stitch-stars{position:absolute;inset:0;opacity:.35;background-image:radial-gradient(1px 1px at 25% 25%,white 1px,transparent 0),radial-gradient(1px 1px at 50% 50%,white 1px,transparent 0),radial-gradient(2px 2px at 75% 75%,#2badee 1px,transparent 0),radial-gradient(1.5px 1.5px at 10% 90%,white 1px,transparent 0);background-size:120px 120px}.stitch-star{position:absolute;border-radius:9999px;background:#2badee;width:6px;height:6px;opacity:.7;animation:stitchTwinkle 3s ease-in-out infinite}.stitch-star.s1{top:22%;left:16%;animation-delay:0s}.stitch-star.s2{top:42%;right:18%;width:8px;height:8px;background:#fff;animation-delay:1s}.stitch-star.s3{bottom:30%;left:10%;width:5px;height:5px;background:#2badee99;animation-delay:2s}.stitch-content{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom))}.stitch-logo{margin-top:14vh;width:120px;height:120px;border-radius:18px;background:#15232b;border:1px solid rgba(255,255,255,.06);box-shadow:0 18px 60px #0000008c;display:flex;align-items:center;justify-content:center;position:relative}.stitch-logo:before{content:"";position:absolute;inset:-6px;border-radius:22px;background:linear-gradient(90deg,#2badee59,#007aff40);filter:blur(14px);opacity:.55}.stitch-logo .material-symbols-outlined{position:relative;font-size:64px;color:#2badee;text-shadow:0 0 14px rgba(43,173,238,.55)}.stitch-title{margin:24px 0 0;font-size:40px;letter-spacing:.22em;font-weight:800;text-align:center;text-shadow:0 0 22px rgba(43,173,238,.35)}.stitch-subtitle{margin-top:10px;font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:#2badeebf;font-weight:700}.stitch-footer{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:12px}.stitch-loading-text{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ffffff8c;animation:stitchFlicker 1.4s ease-in-out infinite}.stitch-progress{width:100%;border-radius:9999px;background:#1c2e38;padding:4px;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px #00000026}.stitch-progress-bar{height:6px;width:40%;border-radius:9999px;background:#2badee;box-shadow:0 0 12px #2badeeb3;animation:stitchProgress 1.6s ease-in-out infinite}.stitch-version{margin-top:6px;font-size:10px;color:#ffffff47}@keyframes stitchPulse{0%,to{opacity:.65;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}}@keyframes stitchTwinkle{0%,to{opacity:.2;transform:scale(.75)}50%{opacity:1;transform:scale(1.25)}}@keyframes stitchProgress{0%{width:25%}50%{width:78%}to{width:25%}}@keyframes stitchFlicker{0%,to{opacity:.45}50%{opacity:1}}