:root{--ink: #3b2f3a;--bg: #2a2238;--bg2: #3a2f4f;--card: #fffaf3;--accent: #ff7a59;--accent2: #2bb3a3;--poo: #8a5a2b;--sun: #ffd23f;--muted: #7d6f7f;--font: "Trebuchet MS", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);overflow:hidden}body{background:radial-gradient(circle at 20% 15%,#4a3b66 0,transparent 40%),radial-gradient(circle at 85% 80%,#3f2f55 0,transparent 45%),var(--bg)}button,input,select{font-family:inherit}#game-wrap{position:fixed;inset:0;display:none}#game-wrap.on{display:block}#game{width:100%;height:100%}#ui{position:fixed;inset:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:24px 16px 40px}#ui:empty{display:none}.screen{width:100%;max-width:980px;margin:auto 0;animation:rise .35s ease-out}@keyframes rise{0%{opacity:0;transform:translateY(14px)}}.card{background:var(--card);border:4px solid var(--ink);border-radius:28px;box-shadow:0 10px #00000040;padding:28px}h1,h2,h3{margin:0 0 12px;line-height:1.1}h2{font-size:clamp(26px,4vw,38px)}p{line-height:1.5}.muted{color:var(--muted)}.title{text-align:center;color:#fff}.logo{font-size:clamp(56px,12vw,128px);font-weight:900;letter-spacing:-2px;margin:0;color:#fff;text-shadow:0 6px 0 var(--ink),0 0 0 var(--ink);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;transform:rotate(-3deg);display:inline-block}.logo .o{color:var(--sun)}.logo .v{color:#c98a4f}.tagline{font-size:clamp(16px,2.4vw,22px);margin:26px 0 22px;color:#ffe9d6}.hero{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:6px 0 18px;min-height:110px}.hero img{image-rendering:auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))}.hero .bob{animation:bob 1.6s ease-in-out infinite}.hero .bob2{animation:bob 1.3s ease-in-out infinite reverse}.hero .splat{width:70px;height:40px;background:var(--poo);border:4px solid #4b2a12;border-radius:50% 60% 45% 55%;animation:wob 1s ease-in-out infinite;margin-bottom:6px}@keyframes bob{50%{transform:translateY(-10px) rotate(3deg)}}@keyframes wob{50%{transform:scale(1.1,.9)}}.menu{display:grid;gap:14px;max-width:420px;margin:0 auto}.btn{appearance:none;border:4px solid var(--ink);border-radius:18px;padding:14px 22px;font-size:20px;font-weight:800;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 6px 0 var(--ink);transition:transform .08s,box-shadow .08s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}.btn:focus-visible{outline:4px solid var(--sun);outline-offset:3px}.btn.primary{background:var(--accent);color:#fff}.btn.teal{background:var(--accent2);color:#fff}.btn.sun{background:var(--sun)}.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;text-decoration:underline}.btn.small{padding:8px 14px;font-size:16px;border-width:3px;box-shadow:0 4px 0 var(--ink)}.btn.ghost.small{box-shadow:none}.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.row.center{justify-content:center}.spread{justify-content:space-between}.footer{margin-top:22px;color:#cdbfd8;font-size:14px}.footer a{color:#ffe9d6}.invite{background:var(--sun);border:4px solid var(--ink);border-radius:18px;padding:12px 16px;margin:0 auto 16px;max-width:420px;color:var(--ink);font-weight:700}.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.choice{text-align:left;border:4px solid var(--ink);border-radius:22px;padding:18px;background:#fff;cursor:pointer;box-shadow:0 6px 0 var(--ink);font-size:16px;color:var(--ink);transition:transform .08s}.choice:hover{transform:translateY(-3px)}.choice:focus-visible{outline:4px solid var(--sun);outline-offset:3px}.choice h3{font-size:22px}.choice .emoji{font-size:36px}.choice.locked{background:#efe9ef;cursor:default;box-shadow:0 6px #9a8f9c;border-color:#9a8f9c;color:#6d636f}.choice.locked:hover{transform:none}.badge{display:inline-block;font-size:13px;font-weight:800;border-radius:999px;padding:3px 10px;background:var(--ink);color:#fff;margin-bottom:8px}.badge.sun{background:var(--sun);color:var(--ink)}.stars{font-size:22px;letter-spacing:2px;color:#d6cdd8}.stars .on{color:#ffc145;text-shadow:0 2px 0 var(--ink)}.seg{display:inline-flex;border:3px solid var(--ink);border-radius:14px;overflow:hidden}.seg button{border:0;padding:10px 16px;font-size:16px;font-weight:800;background:#fff;cursor:pointer;color:var(--ink)}.seg button+button{border-left:3px solid var(--ink)}.seg button.on{background:var(--accent2);color:#fff}.players{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.pcard{border:3px solid var(--ink);border-radius:20px;padding:16px;background:#fff}.looks{display:flex;gap:8px;flex-wrap:wrap}.looks button{border:3px solid #ddd;border-radius:14px;background:#f7f2ea;padding:4px;cursor:pointer}.looks button.on{border-color:var(--accent);background:#ffe6dc}.looks img{width:48px;height:65px;display:block}label{font-weight:700}input[type=text]{width:100%;font-size:18px;padding:10px 12px;border:3px solid var(--ink);border-radius:12px;margin:6px 0 12px}.check{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-weight:600}.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--accent2)}.note{background:#eef8f6;border-left:6px solid var(--accent2);padding:10px 14px;border-radius:10px;font-size:15px}.code{font-family:ui-monospace,Courier New,monospace;font-size:clamp(40px,9vw,72px);font-weight:900;letter-spacing:8px;background:#fff;border:4px dashed var(--ink);border-radius:18px;padding:6px 18px;display:inline-block}.linkbox{display:flex;gap:8px;margin:12px 0}.linkbox input{margin:0;font-size:15px}.plist{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}.plist li{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 12px;font-weight:700}.plist img{width:34px;height:46px}.dot{width:12px;height:12px;border-radius:50%;background:#52b788;display:inline-block}.dot.off{background:#e63946}.err{background:#ffe3e3;border:3px solid #e63946;border-radius:12px;padding:10px 14px;color:#8b1e28;font-weight:700}table.keys{border-collapse:collapse;width:100%;font-size:16px}table.keys td,table.keys th{border-bottom:2px solid #eee3ea;padding:8px;text-align:left;vertical-align:top}kbd{display:inline-block;border:2px solid var(--ink);border-bottom-width:4px;border-radius:8px;padding:1px 8px;font-family:inherit;font-weight:800;background:#fff;font-size:14px;margin:1px}#hud-buttons{position:fixed;top:max(10px,env(safe-area-inset-top));right:12px;display:flex;gap:8px;z-index:5}#hud-buttons[hidden]{display:none}.icon-btn{width:52px;height:52px;border-radius:16px;border:3px solid var(--ink);background:#fff;font-size:24px;cursor:pointer;box-shadow:0 4px 0 var(--ink)}.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}#overlay{position:fixed;inset:0;background:#1e162cb8;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10;overflow-y:auto}#overlay[hidden]{display:none}#overlay .card{max-width:640px;width:100%;text-align:center;animation:rise .3s ease-out}.result-stars{font-size:clamp(54px,10vw,80px);letter-spacing:6px;margin:4px 0}.result-stars span{color:#ddd3df;display:inline-block;-webkit-text-stroke:3px var(--ink)}.result-stars span.on{color:#ffc145;animation:starpop .5s ease-out backwards}.result-stars span.on:nth-child(2){animation-delay:.35s}.result-stars span.on:nth-child(3){animation-delay:.7s}@keyframes starpop{0%{transform:scale(2.4) rotate(-30deg);opacity:0}}.big-score{font-size:48px;font-weight:900}.breakdown{display:grid;grid-template-columns:1fr auto;gap:4px 16px;text-align:left;max-width:380px;margin:12px auto;font-size:17px}.breakdown .neg{color:#c1121f}.breakdown .pos{color:#2a9d8f}.statline{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}.statline span{background:#f1eaf2;border-radius:999px;padding:4px 12px;font-size:14px;font-weight:700}.tip{background:#fff3c4;border-radius:14px;padding:10px 14px;margin:12px 0;font-size:15px}#toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:14px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .25s;z-index:20;max-width:90vw;text-align:center}#toast.on{opacity:1}.tutorial{position:fixed;top:max(84px,11vh);left:50%;transform:translate(-50%);width:min(640px,calc(100vw - 24px));background:#fffaf3;border:4px solid var(--ink);border-radius:20px;padding:12px 18px;z-index:6;box-shadow:0 6px #0000004d;font-size:18px}.tutorial.pop{animation:tutpop .4s ease-out}@keyframes tutpop{0%{transform:translate(-50%) scale(.9);background:#d8fff4}}.tut-step{font-size:13px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:1px}.tut-text{margin:4px 0 8px;line-height:1.4}.tut-actions{text-align:right}.netbar{position:fixed;top:12px;left:50%;transform:translate(-50%);z-index:4}@media(max-width:640px){.card{padding:18px;border-radius:22px}.btn{font-size:18px}.tutorial{font-size:15px;top:70px}}