@import "https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap";:root{--paper:#f8f6f0;--grid:#bbd4f0;--margin:#fca5a5;--ink-blue:#0f172a;--ink-red:#991b1b;--ink-green:#166534;--font-hand:"Shadows Into Light", cursive;--tape:#fff6}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{height:100%;margin:0;padding:0}body{background-color:var(--paper);color:var(--ink-blue);font-family:var(--font-hand);overscroll-behavior:none;background-image:radial-gradient(circle at 10% 20%,#3b82f60a,#0000 30%),radial-gradient(circle at 90% 80%,#10b9810a,#0000 30%),radial-gradient(circle,#d9770605,#0000 40%);flex-direction:column;width:100vw;font-size:1.05rem;font-weight:500;display:flex;position:relative;overflow:hidden}body:after{content:"";pointer-events:none;z-index:100;background-image:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"noiseFilter\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.8\" numOctaves=\"4\" stitchTiles=\"stitch\"/></filter><rect width=\"100%\" height=\"100%\" filter=\"url(%23noiseFilter)\" opacity=\"0.06\"/></svg>");position:fixed;inset:0}#root{z-index:1;flex-direction:column;flex:1;width:100%;height:100%;display:flex;position:relative}.container{flex-direction:column;justify-content:center;width:100%;max-width:450px;height:100%;margin:0 auto;padding:15px;display:flex}.tape-piece{background:var(--paper);will-change:transform, opacity;background-image:linear-gradient(135deg,#fff6 0%,#fff0 100%);border-radius:2px;padding:20px;animation:.4s cubic-bezier(.34,1.56,.64,1) forwards popInBounce;position:relative;transform:rotate(-1deg);box-shadow:2px 4px 10px #0000001a}.tape-piece:before{content:"";background-color:var(--tape);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-left:2px dashed #fffc;border-right:2px dashed #fffc;width:100px;height:22px;position:absolute;top:-12px;left:50%;transform:translate(-50%)rotate(2deg);box-shadow:0 1px 3px #0000001a}h1,h2,h3{letter-spacing:1px;color:var(--ink-blue);margin-bottom:15px;font-size:1.8rem;font-weight:700;transform:rotate(-1deg)}.text-muted{color:#64748b;font-size:1.1rem}input{border:1px dashed var(--ink-blue);width:100%;color:var(--ink-blue);font-family:var(--font-hand);text-align:center;background:0 0;outline:none;margin-bottom:12px;padding:10px 12px;font-size:1.3rem;font-weight:600}input:focus{background:#ffffff80;border-style:solid}.btn{border:2px solid var(--ink-blue);width:100%;color:var(--ink-blue);font-family:var(--font-hand);cursor:pointer;background:linear-gradient(135deg,#0f172a05 0%,#0f172a14 100%);border-radius:4px;padding:10px;font-size:1.3rem;font-weight:700;transition:all .1s;position:relative;overflow:hidden}.btn:hover:not(:disabled){background:linear-gradient(135deg,#0f172a14 0%,#0f172a26 100%);transform:scale(1.02)rotate(1deg)}.btn:active:not(:disabled){transform:scale(.98)rotate(-1deg)}.btn:disabled{opacity:.3;cursor:not-allowed;border-style:dashed}.game-container{flex-direction:column;flex:1;width:100%;height:100%;display:flex;position:relative}.game-header{padding-top:env(safe-area-inset-top);z-index:10;pointer-events:auto;justify-content:space-between;align-items:center;display:flex;position:absolute;top:15px;left:15px;right:15px}.tape-score{background:var(--paper);will-change:transform, opacity;gap:10px;padding:6px 12px;animation:.4s cubic-bezier(.2,.8,.2,1) forwards slideDownScore;display:flex;position:relative;transform:rotate(2deg);box-shadow:1px 2px 6px #0000001a}.tape-score:after{content:"";background:var(--tape);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);width:35px;height:14px;position:absolute;top:-6px;left:-8px;transform:rotate(-15deg);box-shadow:0 1px 2px #0000000d}.player-score{color:var(--ink-blue);align-items:center;gap:6px;font-size:1.15rem;font-weight:700;transition:opacity .3s,transform .3s;display:flex}.color-dot{border:2px solid var(--ink-blue);opacity:.8;border-radius:50%;width:12px;height:12px}.status-tape{background:var(--paper);color:var(--ink-red);will-change:transform, opacity;padding:4px 10px;font-size:1.15rem;font-weight:700;animation:.5s cubic-bezier(.2,.8,.2,1) forwards slideDownStatus;position:relative;transform:rotate(-3deg);box-shadow:1px 2px 6px #0000001a}.status-tape:after{content:"";background:var(--tape);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);width:25px;height:12px;position:absolute;top:-4px;right:-6px;transform:rotate(20deg)}canvas{-webkit-touch-callout:none;outline:none}@keyframes popInBounce{0%{opacity:0;transform:scale(.8)rotate(-4deg)}60%{opacity:1;transform:scale(1.02)rotate(1deg)}to{opacity:1;transform:scale(1)rotate(-1deg)}}@keyframes slideDownScore{0%{opacity:0;transform:translateY(-30px)rotate(-2deg)}to{opacity:1;transform:translateY(0)rotate(2deg)}}@keyframes slideDownStatus{0%{opacity:0;transform:translateY(-30px)rotate(-6deg)}to{opacity:1;transform:translateY(0)rotate(-3deg)}}