:root{--bg:#0e0b1a;--surf:#1c1633;--surf2:#2a2148;--txt:#f4f0ff;--dim:#a79fc4;--acc:#c8ff3d;--on-acc:#14102a;--bad:#ff5470;--ok:#4ade80;--disp:ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Segoe UI Black", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);color:var(--txt);margin:0;font:17px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow-x:hidden}body{background:radial-gradient(120% 60% at 50% -10%, #2b1d5c 0%, var(--bg) 60%) no-repeat fixed var(--bg)}.app{max-width:480px;min-height:100dvh;padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));flex-direction:column;gap:14px;margin:0 auto;display:flex}.app>*{animation:.35s both rise}h1,h2,h3{font-family:var(--disp);letter-spacing:-.02em;margin:0;font-weight:900;line-height:1.05}h1{font-size:40px}h2{font-size:30px}h3{color:var(--dim);text-transform:uppercase;letter-spacing:.08em;font-size:18px}p{margin:0}.dim{color:var(--dim)}.small{font-size:14px}.center{text-align:center}.grow{flex:1}.row{align-items:center;gap:10px;display:flex}.row>.grow{min-width:0}.col{flex-direction:column;gap:10px;display:flex}.card{background:var(--surf);border-radius:20px;padding:16px}.btn{font:800 18px var(--disp);background:var(--surf2);width:100%;min-height:56px;color:var(--txt);cursor:pointer;border:0;border-radius:18px;padding:12px 18px;transition:transform .1s}.btn:active{transform:scale(.97)}.btn.pri{background:var(--acc);color:var(--on-acc);box-shadow:0 6px #7aa11c}.btn.pri:active{transform:translateY(4px);box-shadow:0 2px #7aa11c}.btn.bad{background:var(--bad);color:#fff}.btn.ghost{color:var(--dim);background:0 0;min-height:44px}.btn.sm{border-radius:14px;width:auto;min-height:44px;padding:8px 14px;font-size:16px}.btn:disabled{opacity:.4;box-shadow:none;transform:none}input[type=text],textarea{width:100%;min-height:56px;font:700 20px var(--disp);background:var(--surf);color:var(--txt);border:2px solid var(--surf2);border-radius:16px;outline:none;padding:10px 14px}input[type=text]:focus,textarea:focus{border-color:var(--acc)}.err{border:2px solid var(--bad);background:#3a1325;border-radius:16px;padding:12px 14px}.hint{background:var(--surf);border-radius:16px;align-items:flex-start;gap:10px;padding:12px 14px;font-size:15px;display:flex}.dot{background:var(--bad);border-radius:50%;flex:none;width:12px;height:12px}.dot.on{background:var(--ok)}.pl{border-bottom:1px solid var(--surf2);align-items:center;gap:10px;padding:10px 0;font-weight:700;display:flex}.pl:last-child{border:0}.pl.dead{opacity:.4;text-decoration:line-through}.tag{background:var(--surf2);color:var(--dim);border-radius:8px;padding:2px 8px;font-size:12px;font-weight:700}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:2px solid var(--surf2);min-height:44px;color:var(--txt);font:700 15px var(--disp);cursor:pointer;background:0 0;border-radius:22px;padding:8px 14px}.chip.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}.step{justify-content:space-between;align-items:center;gap:10px;display:flex}.step b{font:900 28px var(--disp);text-align:center;min-width:2ch}.step .btn{width:56px;padding:0}.sum{font:800 20px var(--disp);color:var(--acc)}.banner{z-index:9;padding:calc(6px + env(safe-area-inset-top)) 12px 6px;text-align:center;color:#1a1200;background:#ffb020;font-size:14px;font-weight:800;position:sticky;top:0}.bar{background:var(--surf2);border-radius:5px;height:10px;overflow:hidden}.bar>i{background:var(--acc);height:100%;transition:width .3s;display:block}.sel{text-align:left;width:100%;min-height:60px;font:800 20px var(--disp);background:var(--surf);color:var(--txt);cursor:pointer;border:3px solid #0000;border-radius:18px;padding:12px 16px;display:block}.sel.on{border-color:var(--acc);background:var(--surf2)}.sel .tag{float:right}.turn{font:900 44px var(--disp);text-align:center;color:var(--acc);word-break:break-word}.tabs{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.tabs .chip{text-align:center;border-radius:14px;padding:8px 2px}.vh{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.media{border-radius:14px;max-width:100%;max-height:50dvh}.big{font:900 48px/1.1 var(--disp);text-align:center;word-break:break-word;overflow-wrap:anywhere}.emoji{text-align:center;font-size:120px;line-height:1}.thumb{border-bottom:1px solid var(--surf2);align-items:center;gap:10px;padding:8px 0;display:flex}.thumb .cl{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:15px;overflow:hidden}.flip{perspective:1000px;min-height:52dvh;display:flex}.flip-in{transform-style:preserve-3d;flex:1;transition:transform .55s cubic-bezier(.3,1.4,.5,1);position:relative}.flip.on .flip-in{transform:rotateY(180deg)}.face{backface-visibility:hidden;border-radius:28px;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:18px;display:flex;position:absolute;inset:0;overflow:auto}.face.front{background:linear-gradient(145deg, var(--acc), #7be36b);color:var(--on-acc);cursor:pointer;font:900 28px var(--disp);text-align:center}.face.back{background:var(--surf);border:3px solid var(--acc);transform:rotateY(180deg)}.pulse{animation:1.4s ease-in-out infinite pulse}.reveal{text-align:center;padding:28px 16px}.reveal .role{font:900 44px var(--disp);color:var(--acc);animation:.6s cubic-bezier(.3,1.6,.5,1) both pop}.win{font:900 38px var(--disp);text-align:center;color:var(--acc);animation:.6s cubic-bezier(.3,1.6,.5,1) both pop}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}@keyframes pop{0%{opacity:0;transform:scale(.4)rotate(-6deg)}}@keyframes pulse{50%{transform:scale(1.05)}}@media (width<=340px){h1{font-size:32px}.big{font-size:38px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.banner button{min-height:32px;font:800 14px var(--disp);color:#fff;background:#1a1200;border:0;border-radius:10px;margin-left:8px;padding:4px 12px}.banner.lost{background:var(--bad);color:#fff}.banner.lost button{color:#3a1325;background:#fff}.flip:not(.on) .face.back,.flip.on .face.front{pointer-events:none}input::placeholder{color:var(--dim);opacity:.75}.fin .big{font-size:clamp(22px,8vw,32px)}.fin .emoji{font-size:64px}.card .media{margin-top:8px}.app-inner{flex-direction:column;flex:1;gap:14px;display:flex}.topbar{justify-content:flex-end;margin:-6px 0 -8px;display:flex}.topbar .btn{min-height:36px;padding:4px 8px;font-size:15px}.modal{z-index:20;background:#080612db;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal>.card{width:100%;max-width:448px}.modal.full{background:var(--bg,#0e0b1a);padding-top:calc(16px + env(safe-area-inset-top));justify-content:center;align-items:flex-start;overflow-y:auto}.qr{aspect-ratio:1;background:#fff;border-radius:12px;width:min(240px,70vw);padding:4px;line-height:0}.qr svg{width:100%;height:100%;display:block}.url{font:700 15px var(--disp);color:var(--acc);word-break:break-all;text-align:center;-webkit-user-select:all;user-select:all}.notice{color:#ffb020}.hint b{color:var(--acc)}label.btn{cursor:pointer;display:block}
