@font-face{font-family:"Baloo 2";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/baloo2-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--brand-purple: #967dce;--brand-magenta: #db016b;--brand-orange: #dd4919;--brand-amber: #e39b25;--brand-yellow: #e8e842;--brand-lime: #cae21e;--brand-teal: #69bbc6;--ink: #211915;--paper: #fbfbf7;--white: #ffffff;--gray-100: #f7f7f8;--gray-300: #c2c3c9;--gray-600: #727176;--cw-bg: var(--brand-magenta);--cw-accent: var(--brand-purple);--cw-mascot: var(--brand-lime);--cw-on-bg: var(--paper);--cw-on-accent: var(--ink);--cw-field: #dba7c0;--cw-field-alt: #d69ab7;--stroke-1: 2px;--stroke-2: 3px;--stroke-3: 4px;--shadow-1: 0 3px 0 var(--ink);--shadow-2: 0 5px 0 var(--ink);--shadow-3: 0 7px 0 var(--ink);--shadow-pressed: 0 1px 0 var(--ink);--shadow-panel: 0 7px 0 var(--ink), 0 18px 30px rgba(33, 25, 21, .3);--radius-sm: 10px;--radius-md: 16px;--radius-lg: 24px;--radius-pill: 999px;--font-brand: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;--weight-body: 500;--weight-bold: 700;--weight-display: 800;--text-xs: .7rem;--text-sm: .82rem;--text-md: 1rem;--text-lg: 1.15rem;--text-xl: clamp(1.2rem, 5vw, 1.5rem);--text-2xl: clamp(1.5rem, 6.5vw, 2rem);--text-3xl: clamp(2rem, 9vw, 2.8rem);--text-4xl: clamp(3rem, 20vw, 6rem);--tracking-wide: 1.5px;--tracking-wider: 6px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--tap-min: 52px;--tap-icon: 48px;--ease-pop: cubic-bezier(.18, 1.2, .4, 1);--t-fast: .12s;--t-med: .3s}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;overscroll-behavior:none}body{font-family:var(--font-brand);font-weight:var(--weight-body);color:var(--ink);background:var(--cw-bg);transition:background var(--t-med) ease;touch-action:manipulation;user-select:none;-webkit-user-select:none}#app{height:100vh;height:100dvh;width:100%;position:relative;overflow:hidden}.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:max(var(--space-3),env(safe-area-inset-top)) max(var(--space-3),env(safe-area-inset-right)) max(var(--space-3),env(safe-area-inset-bottom)) max(var(--space-3),env(safe-area-inset-left))}.screen.is-active{display:flex}.screen--auth,.screen--color{align-items:center;overflow-y:auto}.screen--auth>.start-card,.screen--color>.color-card{margin-block:auto;flex:none}.start-card,.color-card,.panel{background:var(--paper);border:var(--stroke-3) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);animation:pop-in .4s var(--ease-pop)}.start-card,.color-card{width:min(430px,100%);padding:var(--space-5) var(--space-5) var(--space-5);text-align:center}.brand-sprite{position:absolute;width:0;height:0;overflow:hidden}.brand-title{margin:0}.brand-mascot{display:block;width:min(230px,62%);height:auto;margin:0 auto var(--space-2);--mascote-pelo: var(--cw-mascot);--mascote-argola: var(--cw-accent);animation:mascot-idle 3.4s ease-in-out infinite}.brand-logo{display:block;width:min(300px,86%);height:auto;margin:0 auto var(--space-3);color:var(--ink)}.brand-logo--hud{width:clamp(104px,30vw,150px);margin:0;color:var(--ink)}.start-form{display:flex;flex-direction:column;gap:var(--space-3)}.field__label{display:block;font-size:var(--text-sm);font-weight:var(--weight-display);text-align:left;margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--gray-600)}.field__input{width:100%;font-family:inherit;font-size:var(--text-lg);font-weight:var(--weight-display);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:var(--stroke-2) solid var(--ink);background:var(--white);color:var(--ink);outline:none;transition:box-shadow var(--t-fast) ease}.field__input::placeholder{color:var(--gray-300);font-weight:var(--weight-bold)}.field__input:focus-visible{box-shadow:0 0 0 var(--stroke-3) var(--cw-accent)}.field__input.is-invalid,.field__input[aria-invalid=true]{box-shadow:0 0 0 var(--stroke-3) var(--brand-magenta);animation:shake .35s}.field__error{display:block;margin-top:var(--space-1);font-size:var(--text-sm);font-weight:var(--weight-bold);line-height:1.3;text-align:left;color:var(--ink)}.field__error:before{content:"● ";color:var(--brand-magenta)}.field__error[hidden],.form-message[hidden]{display:none}.form-message{margin:0;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-bold);line-height:1.35;text-align:left;color:var(--ink);background:var(--gray-100);border:var(--stroke-1) solid var(--ink);border-left:calc(var(--stroke-3) * 2) solid var(--brand-magenta);border-radius:var(--radius-sm)}.btn{font-family:inherit;font-size:var(--text-xl);font-weight:var(--weight-display);border:var(--stroke-2) solid var(--ink);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);min-height:var(--tap-min);cursor:pointer;color:var(--ink);box-shadow:var(--shadow-2);transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease}.btn:active{transform:translateY(4px);box-shadow:var(--shadow-pressed)}.btn--primary{background:var(--cw-accent);color:var(--cw-on-accent)}.btn--ghost{background:var(--paper)}.btn:disabled{cursor:progress;opacity:.7;transform:none;box-shadow:var(--shadow-2)}.link-btn{font-family:inherit;font-size:inherit;font-weight:var(--weight-display);color:var(--ink);background:none;border:0;padding:var(--space-2) var(--space-1);min-height:var(--tap-icon);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}.link-btn:focus-visible{outline:var(--stroke-2) solid var(--ink);outline-offset:2px;border-radius:var(--radius-sm)}.btn:focus-visible,.icon-btn:focus-visible,.dpad__btn:focus-visible,.color-swatch:focus-visible{outline:var(--stroke-2) solid var(--ink);outline-offset:3px}.icon-btn{width:var(--tap-icon);height:var(--tap-icon);border-radius:var(--radius-pill);border:var(--stroke-2) solid var(--ink);background:var(--paper);color:var(--ink);font-size:var(--text-lg);line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-1);transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease;flex:none}.icon-btn:active{transform:translateY(3px);box-shadow:none}.auth-card .brand-mascot{width:min(150px,40%)}.auth-card .brand-logo{width:min(220px,70%);margin-bottom:var(--space-2)}@media (max-height: 740px){.auth-card .brand-mascot{width:min(96px,28%)}}.auth-title{margin:0 0 var(--space-3);font-size:var(--text-2xl);font-weight:var(--weight-display);line-height:1.05;color:var(--ink)}.auth-switch{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-3);border-top:var(--stroke-1) dashed var(--gray-300)}.auth-switch__text{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--gray-600)}.color-title{margin:0 0 var(--space-3);font-size:var(--text-2xl);font-weight:var(--weight-display);line-height:1.05;color:var(--ink)}.color-player{margin:calc(var(--space-2) * -1) 0 var(--space-1);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--gray-600)}.color-player b{color:var(--ink)}.color-mascot{display:flex;justify-content:center}.color-mascot canvas{width:100%;max-width:300px;height:auto}.color-options{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);margin:var(--space-3) 0 var(--space-4)}.color-swatch{font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-1);border:var(--stroke-2) solid var(--ink);border-radius:var(--radius-md);background:var(--white);box-shadow:var(--shadow-1);cursor:pointer;transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease,background var(--t-fast) ease}.color-swatch:active{transform:translateY(3px);box-shadow:none}.color-swatch.is-selected{box-shadow:var(--shadow-2),inset 0 0 0 var(--stroke-2) var(--cw-accent)}.color-swatch__head{width:100%;height:auto;max-width:56px}.color-swatch__label{font-size:var(--text-xs);font-weight:var(--weight-display);color:var(--ink)}.screen--game{gap:var(--space-2)}.hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-2)}.hud__slot{display:flex;min-width:0}.hud__slot--left{justify-content:flex-start}.hud__slot--center{justify-content:center;flex-direction:column;align-items:center;gap:var(--space-1)}.hud__slot--right{justify-content:flex-end}.hud__chip{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:var(--space-1) var(--space-3);background:var(--paper);border:var(--stroke-2) solid var(--ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-1)}.hud__chip--score{align-items:flex-end}.hud__label{font-size:.6rem;font-weight:var(--weight-display);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--gray-600);line-height:1.2}.hud__value{font-size:clamp(.9rem,4vw,1.15rem);font-weight:var(--weight-display);color:var(--ink);line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud__value--score{font-variant-numeric:tabular-nums;letter-spacing:.5px}.hud__value--score.is-compact{font-size:clamp(.76rem,3.4vw,.95rem);letter-spacing:0}.hud__value--score.is-bump{animation:bump var(--t-med) ease}.hud__choco{font-size:var(--text-xs);font-weight:var(--weight-display);color:var(--ink);background:var(--paper);border:var(--stroke-1) solid var(--ink);border-radius:var(--radius-pill);padding:1px var(--space-2);white-space:nowrap}.stage{position:relative;flex:1;display:grid;place-items:center;min-height:0}#board{display:block;border:var(--stroke-3) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-3)}.controls{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.controls__hint{margin:0;flex:1;text-align:center;font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--cw-on-bg);opacity:.85}.overlay{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--radius-lg);z-index:5}.overlay[hidden]{display:none}.overlay--countdown{background:#21191573}.overlay--panel{background:#2119159e;padding:var(--space-3)}.countdown{font-size:var(--text-4xl);font-weight:var(--weight-display);color:var(--paper);text-shadow:4px 0 0 var(--ink),-4px 0 0 var(--ink),0 4px 0 var(--ink),0 -4px 0 var(--ink),3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink),0 10px 0 var(--ink);animation:count-pop .6s ease-out}.countdown.is-go{color:var(--cw-accent);font-size:clamp(2.4rem,16vw,5rem)}.panel{width:min(360px,100%);padding:var(--space-5) var(--space-4);text-align:center}.panel__title{margin:0 0 var(--space-2);font-size:var(--text-2xl);font-weight:var(--weight-display);color:var(--ink)}.panel__text{margin:0 0 var(--space-4);font-size:var(--text-md);font-weight:var(--weight-bold);line-height:1.35;color:var(--gray-600)}.scoreline{background:var(--gray-100);border:var(--stroke-2) solid var(--ink);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-3)}.scoreline__label{display:block;font-size:var(--text-xs);font-weight:var(--weight-display);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--gray-600)}.scoreline__value{display:block;font-size:var(--text-2xl);font-weight:var(--weight-display);font-variant-numeric:tabular-nums;letter-spacing:1px;color:var(--ink)}.badge{margin:0 0 var(--space-3);font-size:var(--text-md);font-weight:var(--weight-display);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--brand-magenta);animation:bump .6s ease infinite alternate}.badge[hidden]{display:none}.panel__actions{display:flex;flex-direction:column;gap:var(--space-2)}.dpad{display:none;grid-template-columns:repeat(4,1fr);gap:var(--space-2);padding:var(--space-1) 0;touch-action:none}@media (hover: none) and (pointer: coarse){.dpad{display:grid}}.dpad__btn{height:clamp(54px,8dvh,70px);border:var(--stroke-2) solid var(--ink);border-radius:var(--radius-md);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-2);display:grid;place-items:center;padding:0;cursor:pointer;transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease,background var(--t-fast) ease}.dpad__btn svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}.dpad__btn:active{transform:translateY(4px);box-shadow:var(--shadow-pressed)}.dpad__btn.is-current{background:var(--cw-accent)}@keyframes pop-in{0%{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}@keyframes count-pop{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes mascot-idle{0%,to{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-6px)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (min-width: 900px) and (orientation: landscape){.controls__hint{font-size:var(--text-sm)}}