*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}input,select,textarea{-webkit-user-select:text;user-select:text}:root{--bg: #fffdf7;--paper: #fff9ed;--warm: #e8e0cc;--ink: #1a1208;--orange: #f4631e;--teal: #00a896;--yellow: #ffce00;--pink: #ff6b9d;--muted: #9a8f7a}html{height:100%}body{display:flex;flex-direction:column;min-height:100vh;background:var(--bg);color:var(--ink);font-family:Nunito,sans-serif;overflow-x:hidden}.screen{display:none;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;padding:24px 14px 40px;gap:14px;position:relative}.screen.active{display:flex}.winner-gallery{width:100%;max-width:440px;display:flex;flex-direction:column;gap:20px;margin:20px 0}.gallery-item{background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:12px;box-shadow:4px 4px 0 var(--ink);animation:fadeInGal .5s ease backwards}.gallery-label{font-family:Righteous,sans-serif;color:var(--ink);font-size:1rem;margin-bottom:8px}.gallery-img{width:100%;height:auto;display:block;border-radius:8px;border:2px solid var(--ink)}@keyframes fadeInGal{0%{opacity:0;transform:translateY(10px)}}.back{align-self:flex-start;background:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:8px 14px;color:var(--ink);font-size:.85rem;font-weight:800;cursor:pointer;text-decoration:none;z-index:10;transition:all .2s}.back:active{transform:scale(.96)}.title-main{font-family:Righteous,sans-serif;font-size:clamp(2.4rem,10vw,4rem);color:var(--ink);line-height:1;text-align:center}.title-main span{color:var(--orange)}.title-sub{font-size:.9rem;color:var(--muted);max-width:300px;line-height:1.6;text-align:center}.title-sub strong{color:var(--teal)}.btn{display:flex;align-items:center;justify-content:center;padding:15px 28px;border-radius:12px;border:none;font-family:Nunito,sans-serif;font-size:1rem;font-weight:800;cursor:pointer;width:100%;max-width:320px;-webkit-tap-highlight-color:transparent;transition:all .15s}.btn:active{transform:scale(.96)}.btn-orange{background:var(--orange);color:#fff;box-shadow:0 4px 20px #f4631e4d}.btn-ghost{background:transparent;color:var(--muted);border:2px solid var(--warm)}.input-field{width:100%;max-width:320px;padding:15px 18px;border-radius:12px;border:2px solid var(--warm);background:var(--paper);color:var(--ink);font-family:Righteous,sans-serif;font-size:1.4rem;text-align:center;outline:none;-webkit-appearance:none}.input-field:focus{border-color:var(--orange)}.code-big{font-family:Righteous,sans-serif;font-size:3.5rem;color:var(--orange);letter-spacing:6px}.prompt-card{background:var(--paper);border:2.5px solid var(--ink);border-radius:20px;padding:26px 22px;width:100%;max-width:380px;text-align:center;box-shadow:5px 5px 0 var(--ink)}.prompt-cat{font-size:.68rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin-bottom:8px}.prompt-text{font-family:Righteous,sans-serif;font-size:clamp(1.3rem,5vw,1.8rem);line-height:1.25;color:var(--ink)}.half-badge{margin-top:12px;display:inline-flex;align-items:center;gap:8px;background:var(--yellow);border-radius:99px;padding:6px 14px;font-size:.78rem;font-weight:800;color:var(--ink)}.toolbar{display:flex;gap:8px;align-items:center;width:100%;max-width:420px;background:var(--paper);border:2px solid var(--warm);border-radius:12px;padding:10px;flex-wrap:wrap}.color-dot{width:26px;height:26px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s;flex-shrink:0}.color-dot.active{border-color:var(--ink);transform:scale(1.2)}.divider-v{width:1px;height:26px;background:var(--warm);flex-shrink:0}.size-btn{width:34px;height:34px;border-radius:8px;border:2px solid var(--warm);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;transition:all .15s}.size-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}.tool-btn{width:34px;height:34px;border-radius:8px;border:2px solid var(--warm);background:transparent;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .15s}.tool-btn.active{background:var(--pink);border-color:var(--pink)}.color-dot.rainbow{background:linear-gradient(45deg,#f06,#f90,#ff0,#0f0,#0ff,#00f,#90f,#f06)!important;position:relative}.color-dot.rainbow.active:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--c, #000);border-radius:50%;border:1.5px solid white;box-shadow:0 0 2px #00000080}.canvas-wrap{position:relative;width:100%;max-width:420px;border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:5px 5px 0 var(--ink);background:#fff;flex-shrink:0}canvas{display:block;width:100%;touch-action:none}.canvas-divider{position:absolute;left:0;right:0;border-top:2.5px dashed var(--warm);pointer-events:none;z-index:2}.half-label{position:absolute;right:8px;font-size:.6rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);background:#fff;padding:2px 5px;border-radius:4px;pointer-events:none;z-index:3}.vote-row{display:flex;gap:10px;width:100%;max-width:420px}.vote-btn{flex:1;padding:14px;border-radius:12px;border:2.5px solid var(--ink);font-family:Nunito,sans-serif;font-size:.85rem;font-weight:800;cursor:pointer;transition:all .15s;background:var(--paper)}.vote-btn:active{transform:scale(.95)}.score-row{display:flex;gap:12px;width:100%;max-width:380px}.score-card{flex:1;background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;padding:24px 16px;text-align:center;box-shadow:4px 4px 0 var(--ink)}.score-name{font-size:.65rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.score-num{font-family:Righteous,sans-serif;font-size:4rem;color:var(--ink);line-height:1}.score-num.pop{color:var(--orange)}.winner-title{font-family:Righteous,sans-serif;font-size:3rem;color:var(--orange);text-align:center}@keyframes wobble{0%,to{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.1)}}@keyframes shake{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-14px)}}.disconnect-banner{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#dc2626f2;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;padding:14px 24px;border-radius:50px;font-weight:700;box-shadow:0 8px 32px #dc262659;z-index:10000;display:none;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.2);font-size:.9rem;transition:all .3s ease;font-family:inherit}.disconnect-spinner{border:2.5px solid rgba(255,255,255,.3);border-top:2.5px solid white;border-radius:50%;width:16px;height:16px;display:inline-block;animation:disconnect-spin 1s linear infinite}@keyframes disconnect-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}[data-joining=true] .screen{display:none!important}[data-joining=true] #screen-loading{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100vh}.joining-spinner{border:3.5px solid rgba(244,99,30,.15);border-top:3.5px solid var(--orange, #f4631e);border-radius:50%;width:44px;height:44px;animation:joining-spin .8s linear infinite;margin-bottom:20px}@keyframes joining-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}