:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light only;color:#292722;font-synthesis:none;text-rendering:optimizelegibility;--paper:#f2eee5;--paper-deep:#e8e1d4;--ink:#292722;--muted:#777168;--hairline:#29272229;--accent:#c33b2b;--accent-dark:#982b20;--surface:#fff3;--surface-hover:#ffffff61;--border-hover:#29272257;--paper-stripe:#ffffff21;--floor-guide:#29272212;--accent-ring:#c33b2b47;--status-surface:#f2eee5c7;--status-dot:#888178;--hint-border:#b8843f59;--hint-ink:#6f512a;--soft-shadow:#3a332a14;--track:#2927221f;background:#f2eee5;font-family:Avenir Next,Avenir,Helvetica Neue,sans-serif}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark only;color:#f4eee4;--paper:#1d1a15;--paper-deep:#29241d;--ink:#f4eee4;--muted:#b9afa0;--hairline:#f4eee426;--accent:#df5a4d;--accent-dark:#f0a098;--surface:#fffaf00f;--surface-hover:#fffaf01f;--border-hover:#f4eee459;--paper-stripe:#fffaf009;--floor-guide:#f4eee41a;--accent-ring:#df5a4d59;--status-surface:#25211bd1;--status-dot:#b9afa0;--hint-border:#e0b2666b;--hint-ink:#f2c47d;--soft-shadow:#00000042;--track:#f4eee429;background:#1d1a15}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;max-width:100%;min-height:100%;margin:0}html{overscroll-behavior-x:none;overflow-x:clip}body{overscroll-behavior-x:none;touch-action:pan-y;background:linear-gradient(var(--paper-stripe) 1px, transparent 1px), var(--paper);background-size:100% 6px;min-height:100vh;overflow-x:clip}body[data-drawing=true],body[data-drawing=true] *{cursor:grabbing!important}button,canvas{-webkit-tap-highlight-color:transparent}button{font:inherit}.app-shell{grid-template-rows:auto 1fr auto;width:min(100%,1440px);max-width:100%;min-height:100vh;margin:0 auto;padding:28px 44px 30px;display:grid;overflow-x:clip}.topbar,.controls{z-index:3;justify-content:space-between;align-items:center;display:flex;position:relative}.topbar{border-bottom:1px solid var(--hairline);min-height:46px}.brand{letter-spacing:.24em;align-items:center;gap:12px;font-size:.72rem;font-weight:700;display:flex}.brand-mark{place-items:center;width:23px;height:23px;display:grid;position:relative;transform:rotate(30deg)skewY(-30deg)scaleX(.86)}.brand-mark i{border:1.5px solid var(--ink);width:10px;height:10px;position:absolute}.brand-mark i:first-child{transform:translate(-5px)}.brand-mark i:nth-child(2){transform:translate(5px)}.brand-mark i:nth-child(3){border-color:var(--accent);transform:translateY(-9px)}.puzzle-selector{text-transform:uppercase;align-items:center;gap:10px;display:flex}.topbar-actions{align-items:center;gap:9px;display:flex}.theme-toggle{border:1px solid var(--hairline);width:32px;height:32px;color:var(--ink);background:var(--surface);cursor:pointer;border-radius:4px;place-items:center;padding:0;transition:border-color .15s,background .15s,transform .15s;display:grid}.ranking-button{border:1px solid var(--hairline);min-height:32px;color:var(--ink);background:var(--surface);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:4px;padding:0 10px;font-size:.65rem;font-weight:650;transition:border-color .15s,background .15s,transform .15s}.ranking-button:hover{border-color:var(--border-hover);background:var(--surface-hover);transform:translateY(-1px)}.ranking-button:focus-visible,.dialog-card button:focus-visible,.dialog-card select:focus-visible,.dialog-card input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.theme-toggle:hover{border-color:var(--border-hover);background:var(--surface-hover);transform:translateY(-1px)}.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.theme-toggle svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:15px;height:15px}.puzzle-selector span{color:var(--muted);letter-spacing:.16em;font-size:.65rem}.puzzle-selector select{border:1px solid var(--hairline);appearance:none;min-height:32px;color:var(--ink);background:linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 13px) 13px / 4px 4px no-repeat, linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 9px) 13px / 4px 4px no-repeat, var(--surface);letter-spacing:.08em;cursor:pointer;border-radius:4px;padding:0 29px 0 11px;font-size:.68rem;font-weight:600}.puzzle-selector select:hover{border-color:var(--border-hover);background-color:var(--surface-hover)}.puzzle-selector select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.game-area{grid-template-columns:minmax(190px,.72fr) minmax(470px,2.15fr) minmax(160px,.62fr);align-items:center;gap:clamp(18px,3vw,52px);min-height:0;padding:24px 0 16px;display:grid}.game-copy{align-self:start;max-width:285px;padding-top:clamp(54px,8vh,118px)}.eyebrow,.progress-label{color:var(--accent-dark);letter-spacing:.19em;margin:0 0 19px;font-size:.63rem;font-weight:700}.game-copy h1{letter-spacing:-.055em;max-width:240px;margin:0;font-family:Iowan Old Style,Baskerville,Times New Roman,serif;font-size:clamp(2.5rem,4.5vw,4.45rem);font-weight:400;line-height:.95}.game-copy>p:last-child{max-width:250px;color:var(--muted);margin:27px 0 0;font-size:.82rem;line-height:1.65}.canvas-frame{cursor:grab;touch-action:none;isolation:isolate;width:100%;height:clamp(480px,68vh,720px);min-height:0;position:relative}.canvas-frame:before,.canvas-frame:after{content:"";z-index:-1;pointer-events:none;position:absolute}.canvas-frame:before{border:1px solid var(--floor-guide);border-radius:50%;inset:12% 6% 5%;transform:perspective(600px)rotateX(68deg)}.canvas-frame:after{background:var(--accent);width:7px;height:7px;box-shadow:0 0 0 5px var(--paper), 0 0 0 6px var(--accent-ring);border-radius:50%;top:20%;left:7%}.canvas-frame canvas{outline:none;display:block;width:100%!important;height:100%!important}.status-chip{border:1px solid var(--hairline);background:var(--status-surface);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:99px;align-items:center;gap:8px;padding:8px 12px;font-size:.66rem;font-weight:600;display:flex;position:absolute;top:19px;right:12px}.status-chip span{background:var(--status-dot);border-radius:50%;width:6px;height:6px}.status-chip--trazando span,.status-chip--resuelto span{background:var(--accent)}.status-chip--resuelto{color:var(--accent-dark);border-color:#c33b2b40}.hint-message{border:1px solid var(--hint-border);background:var(--status-surface);width:min(230px,100% - 24px);color:var(--hint-ink);box-shadow:0 5px 18px var(--soft-shadow);border-radius:4px;margin:0;padding:9px 11px;font-size:.67rem;line-height:1.4;position:absolute;top:64px;right:12px}.gesture-hint{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;pointer-events:none;align-items:center;gap:9px;font-size:.66rem;display:flex;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.gesture-hint span{font-size:1rem}.progress-card{border-top:1px solid var(--hairline);align-self:end;width:100%;max-width:175px;margin-bottom:clamp(44px,9vh,98px);padding-top:17px}.progress-card>div:first-child{justify-content:space-between;align-items:baseline;display:flex}.progress-card .progress-label{color:var(--muted);margin:0}.progress-card strong{font-variant-numeric:tabular-nums;font-size:1rem}.progress-card small{color:var(--muted);font-size:.68rem;font-weight:500}.progress-track{background:var(--track);height:2px;margin-top:13px;overflow:hidden}.progress-track span{background:var(--accent);height:100%;transition:width .18s ease-out;display:block}.timer-row{border-top:1px solid var(--hairline);color:var(--muted);letter-spacing:.16em;text-transform:uppercase;justify-content:space-between;align-items:baseline;margin-top:15px;padding-top:12px;font-size:.63rem;font-weight:700;display:flex}.timer-row strong{color:var(--ink);letter-spacing:.04em;font-size:.86rem}.dialog-backdrop{z-index:30;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#14120f6b;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.dialog-card{border:1px solid var(--hairline);background:var(--paper);border-radius:8px;width:min(100%,430px);max-height:min(720px,100svh - 48px);padding:31px;position:relative;overflow-y:auto;box-shadow:0 24px 80px #231e1838}.dialog-close{width:30px;height:30px;color:var(--muted);cursor:pointer;background:0 0;border:0;padding:0;font-size:1.4rem;line-height:1;position:absolute;top:13px;right:14px}.dialog-kicker{color:var(--accent-dark);letter-spacing:.18em;text-transform:uppercase;margin:0 0 8px;font-size:.62rem;font-weight:700}.dialog-card h2{letter-spacing:-.045em;margin:0;font-family:Iowan Old Style,Baskerville,Times New Roman,serif;font-size:2.05rem;font-weight:400}.dialog-card h2+p,.auth-dialog>p{color:var(--muted);margin:12px 0 21px;font-size:.78rem;line-height:1.55}.dialog-card form{gap:13px;display:grid}.dialog-card label{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;gap:7px;font-size:.65rem;font-weight:650;display:grid}.dialog-card input,.dialog-card select{border:1px solid var(--hairline);min-height:40px;color:var(--ink);background:var(--surface);font:inherit;letter-spacing:0;text-transform:none;border-radius:4px;padding:0 11px}.dialog-card button{border:1px solid var(--hairline);min-height:38px;color:var(--ink);background:var(--surface);font:inherit;cursor:pointer;border-radius:4px;font-size:.71rem;font-weight:650}.dialog-card button:hover:not(:disabled){border-color:var(--border-hover);background:var(--surface-hover)}.dialog-card .primary-action{border-color:var(--accent-ring);color:var(--accent-dark)}.dialog-card button:disabled{opacity:.5;cursor:wait}.solved-dialog-backdrop{z-index:25}.solved-dialog{z-index:1;text-align:center;outline:none;width:min(100%,360px);padding:32px 32px 25px;animation:.26s cubic-bezier(.22,1,.36,1) both solved-dialog-in;overflow:hidden}.solved-dialog .dialog-kicker{padding-right:0}.solved-dialog h2{font-size:2.55rem}.solved-time{border-block:1px solid var(--hairline);gap:7px;margin:22px 0 20px;padding:17px 0 18px;display:grid}.solved-time span,.solved-record-result span{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-size:.62rem;font-weight:700}.solved-time strong{color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.025em;font-family:Iowan Old Style,Baskerville,Times New Roman,serif;font-size:2rem;font-weight:400}.solved-record{gap:9px;display:grid}.solved-record .primary-action{color:#fffaf0;border-color:var(--accent);background:var(--accent);width:100%;min-height:44px}.solved-record .primary-action:hover:not(:disabled){color:#fffaf0;border-color:var(--accent-dark);background:var(--accent-dark)}.solved-record .primary-action:disabled{color:var(--muted);border-color:var(--hairline);background:var(--surface);cursor:not-allowed}.solved-availability,.solved-practice-note,.solved-record-result small{color:var(--muted);font-size:.68rem;line-height:1.5}.solved-practice-note{margin:0}.solved-record-result{border:1px solid var(--accent-ring);border-radius:4px;gap:5px;padding:12px;display:grid}.solved-record-result strong{color:var(--accent-dark);font-variant-numeric:tabular-nums;font-size:1rem}.solved-record-form{text-align:left;padding-top:2px;gap:11px!important}.solved-record-form h3{color:var(--ink);text-align:center;margin:0 0 2px;font-size:.86rem;font-weight:650}.solved-record-form input{width:100%}.solved-record-privacy{color:var(--muted);font-size:.64rem;line-height:1.5}.solved-record-form .form-error{text-align:left;margin:0}.solved-form-cancel{width:100%;color:var(--muted)!important;background:0 0!important;border-color:#0000!important}.solved-secondary-action{width:100%;margin-top:10px;color:var(--muted)!important;background:0 0!important;border-color:#0000!important}:root[data-theme=dark] .solved-dialog{background:var(--paper-deep);border-color:#f4eee43d;box-shadow:0 28px 90px #0000007a}.solved-confetti{z-index:2;pointer-events:none;position:fixed;inset:0;overflow:hidden}.solved-confetti i{background:var(--accent);opacity:0;will-change:transform, opacity;width:6px;height:14px;animation:solved-confetti-fall var(--confetti-duration) cubic-bezier(.2, .58, .32, 1) var(--confetti-delay) both;border-radius:1px;position:absolute;top:max(11%,50% - 220px);left:50%}.solved-confetti i:nth-child(3n+2){background:#b68b52;border-radius:50%;width:9px;height:9px}.solved-confetti i:nth-child(3n){background:var(--ink);width:5px;height:12px}@keyframes solved-dialog-in{0%{opacity:0;transform:translateY(8px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes solved-confetti-fall{0%{opacity:0;transform:translateY(22px)rotate(0)}14%{opacity:.96;transform:translate3d(var(--confetti-x), -42px, 0) rotate(90deg)}78%{opacity:.88}to{opacity:0;transform:translate3d(calc(var(--confetti-x) + var(--confetti-drift)), 520px, 0) rotate(var(--confetti-rotation))}}.otp-form{border-top:1px solid var(--hairline);margin-top:16px;padding-top:16px}.form-message,.form-error{margin:12px 0 0;font-size:.7rem;line-height:1.45}.form-message{color:var(--muted)}.form-error{color:var(--accent-dark)}.leaderboard-heading{justify-content:space-between;align-items:center;gap:16px;display:flex}.leaderboard-heading select{width:116px}.leaderboard-list{counter-reset:leaderboard;margin:25px 0 0;padding:0;list-style:none}.leaderboard-list li{border-bottom:1px solid var(--hairline);grid-template-columns:24px 1fr auto;align-items:baseline;gap:10px;min-height:36px;padding:8px 0;font-size:.76rem;display:grid}.leaderboard-list li>span{color:var(--muted);font-variant-numeric:tabular-nums}.leaderboard-list li>strong{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.leaderboard-list time{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}.empty-state{border:1px solid var(--hairline);color:var(--muted);text-align:center;border-radius:5px;margin:25px 0 0;padding:24px 18px;font-size:.75rem;line-height:1.5}.personal-best{border-block:1px solid var(--accent-ring);color:var(--accent-dark);justify-content:space-between;align-items:baseline;margin-top:17px;padding:13px 0;display:flex}.personal-best span{letter-spacing:.12em;text-transform:uppercase;font-size:.66rem;font-weight:700}.personal-best strong{font-variant-numeric:tabular-nums;font-size:.82rem}.leaderboard-session{color:var(--muted);justify-content:space-between;align-items:center;gap:16px;margin-top:21px;font-size:.68rem;display:flex}.leaderboard-session button{white-space:nowrap;min-height:30px;padding:0 9px}.controls{border-top:1px solid var(--hairline);min-height:58px;padding-top:17px}.controls>p{color:var(--muted);margin:0;font-size:.71rem}.control-actions{gap:7px;display:flex}.control-actions button{border:1px solid var(--hairline);min-height:38px;color:var(--ink);background:var(--surface);cursor:pointer;border-radius:4px;align-items:center;gap:8px;padding:0 13px;font-size:.71rem;font-weight:600;transition:border-color .15s,background .15s,transform .15s;display:inline-flex}.control-actions button:hover:not(:disabled){border-color:var(--border-hover);background:var(--surface-hover);transform:translateY(-1px)}.control-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.control-actions button:disabled{opacity:.36;cursor:not-allowed}.control-actions svg{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:15px;height:15px}@media (width<=900px){.app-shell{padding:22px 24px 24px}.game-area{grid-template-columns:minmax(150px,.65fr) minmax(410px,1.65fr)}.progress-card{display:none}}@media (width<=680px){.app-shell{min-height:100svh;padding:17px 16px 18px}.topbar{min-height:40px}.game-area{flex-direction:column;gap:0;padding:19px 0 13px;display:flex;position:relative}.game-copy{width:100%;max-width:none;padding:0 4px}.eyebrow{margin-bottom:9px}.game-copy h1{max-width:none;font-size:clamp(2.35rem,12vw,3.4rem)}.game-copy>p:last-child{max-width:335px;margin-top:12px;font-size:.76rem;line-height:1.48}.canvas-frame{width:100%;height:min(57svh,540px);min-height:390px;margin:-4px 0 0}.canvas-frame:after{top:19%;left:9%}.status-chip{top:14px;right:12px}.hint-message{top:58px;right:8px}.gesture-hint{white-space:nowrap;bottom:0}.progress-card{border:0;width:166px;margin:0;padding:0;display:block;position:absolute;bottom:13px;right:4px}.progress-card>div:first-child,.progress-track{display:none}.timer-row{margin:0;padding-top:10px}.controls{min-height:auto;padding-top:13px}.controls>p{display:none}.control-actions{width:100%}.control-actions button{flex:1;justify-content:center;min-height:43px}.dialog-backdrop{align-items:end;padding:10px}.dialog-card{border-radius:8px;width:100%;max-height:calc(100svh - 20px);padding:28px 22px 24px}.solved-record-form input{font-size:16px}}@media (width<=460px){.topbar-actions{gap:7px}.puzzle-selector{gap:0}.puzzle-selector>span{display:none}.ranking-button{padding-inline:8px;font-size:.6rem}}@media (height<=720px) and (width>=681px){.app-shell{padding-top:18px;padding-bottom:18px}.canvas-frame{height:540px}.game-copy{padding-top:45px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
