:root{ --bg:#07060f; --panel:rgba(20,18,38,.55); --panel-brd:rgba(255,255,255,.09); --txt:#eae7ff; --muted:#9d97c4; --hot:#ff3d81; --cool:#5ee7ff; --lime:#a6ff5e; --amber:#ffcc4d; --radius:18px; } *{box-sizing:border-box} /* Any class that sets `display` would otherwise out-rank the UA's [hidden] rule, leaving elements we hide via the property still painted. */ [hidden]{display:none !important} /* Any class that sets `display` would otherwise out-rank the UA's [hidden] rule, leaving elements we hide via the property still painted. */ html,body{height:100%;max-width:100%} /* clip, not hidden: hidden on would make the whole page a scroll container */ html{overflow-x:clip} body{ margin:0; background:var(--bg); color:var(--txt); font-family:'Outfit',system-ui,sans-serif; overflow-x:clip; min-height:100vh; } /* ── background ─────────────────────────── */ .aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;filter:blur(90px)} .blob{position:absolute;border-radius:50%;opacity:.55;mix-blend-mode:screen} .b1{width:52vw;height:52vw;left:-12vw;top:-14vw;background:radial-gradient(circle,#ff3d81,transparent 65%);animation:drift1 24s ease-in-out infinite} .b2{width:46vw;height:46vw;right:-10vw;top:6vh;background:radial-gradient(circle,#5ee7ff,transparent 65%);animation:drift2 30s ease-in-out infinite} .b3{width:48vw;height:48vw;left:26vw;bottom:-22vw;background:radial-gradient(circle,#8b5cf6,transparent 65%);animation:drift3 27s ease-in-out infinite} @keyframes drift1{50%{transform:translate(14vw,10vh) scale(1.15)}} @keyframes drift2{50%{transform:translate(-12vw,14vh) scale(.9)}} @keyframes drift3{50%{transform:translate(8vw,-12vh) scale(1.1)}} .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")} /* ── header ─────────────────────────────── */ .topbar{text-align:center;padding:30px 16px 10px} .logo{ margin:0;font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:clamp(30px,5vw,52px);letter-spacing:-.02em; background:linear-gradient(100deg,#fff,var(--cool),var(--hot),#fff); background-size:280% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:shine 8s linear infinite; } @keyframes shine{to{background-position:280% 0}} .logo .dot{color:var(--hot);-webkit-text-fill-color:var(--hot);opacity:.8;font-size:.6em;vertical-align:middle;margin:0 .12em} .tagline{margin:6px 0 0;color:var(--muted);letter-spacing:.22em;text-transform:uppercase;font-size:11px} /* ── lock screen ────────────────────────── */ .lock{ position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px; background:rgba(7,6,15,.86);backdrop-filter:blur(18px); animation:fadeIn .3s ease both; } @keyframes fadeIn{from{opacity:0}} .lock-card{ width:min(380px,100%);text-align:center;padding:32px 26px; background:var(--panel);border:1px solid var(--panel-brd);border-radius:22px; box-shadow:0 30px 90px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08); animation:riseIn .45s cubic-bezier(.2,.9,.3,1.3) both; } .lock-card h2{font-size:26px;margin:0 0 6px} .lock-note{color:var(--muted);font-size:12.5px;margin:0 0 20px;line-height:1.6} .lock-error{color:var(--hot);font-size:12.5px;min-height:18px;margin:10px 0 0} .lock-card .hint.tiny{margin-top:6px;margin-bottom:0} /* ── sync indicator ─────────────────────── */ .sync-pill{ display:inline-block;margin-top:10px;padding:4px 12px;border-radius:99px; font-size:11px;letter-spacing:.12em;text-transform:uppercase; border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--muted); transition:.25s; } .sync-pill.synced{border-color:rgba(166,255,94,.4);background:rgba(166,255,94,.12);color:var(--lime)} .sync-pill.syncing{border-color:rgba(94,231,255,.4);background:rgba(94,231,255,.12);color:var(--cool)} .sync-pill.offline{border-color:rgba(255,204,77,.4);background:rgba(255,204,77,.12);color:var(--amber)} .sync-pill.locked{border-color:rgba(255,61,129,.4);background:rgba(255,61,129,.12);color:var(--hot)} /* ── layout ─────────────────────────────── */ .layout{ display:grid; grid-template-columns:minmax(280px,1fr) minmax(420px,1.5fr) minmax(260px,.9fr); gap:20px;padding:22px clamp(14px,3vw,40px) 60px; align-items:start;max-width:1600px;margin:0 auto; } /* `1fr` floors at min-content, so a long title or a wide control can push the column past the viewport. minmax(0,…) lets it actually shrink. */ @media(max-width:1150px){.layout{grid-template-columns:minmax(0,1fr)}.stage{order:-1}} .panel{ min-width:0; background:var(--panel); border:1px solid var(--panel-brd); border-radius:var(--radius); padding:20px; backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); } .panel-title{margin:0 0 14px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px} .panel-subtitle{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .count{background:rgba(255,255,255,.08);border-radius:99px;padding:2px 9px;color:var(--txt);font-size:11px;letter-spacing:0} .hint{margin:-6px 0 14px;font-size:12px;color:var(--muted);line-height:1.6} .hint .k{padding:1px 6px;border-radius:6px;font-style:normal} .hint .inc{background:rgba(166,255,94,.16);color:var(--lime)} .hint .exc{background:rgba(255,61,129,.16);color:var(--hot)} .spacer{height:14px} .hidden{display:none !important} /* ── form controls ──────────────────────── */ .field{ width:100%;padding:11px 14px;margin-bottom:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:12px;color:var(--txt);font:inherit;font-size:14px; transition:.2s; } .field::placeholder{color:#6f6a94} .field:focus{outline:none;border-color:var(--cool);background:rgba(94,231,255,.07);box-shadow:0 0 0 4px rgba(94,231,255,.1)} .search{margin:14px 0 10px} .row{display:flex;gap:10px;margin-bottom:10px} .seg{display:flex;flex-wrap:wrap;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:3px;flex:1;min-width:0} .seg-btn{flex:1 1 auto;min-width:0;padding:8px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;border-radius:9px;cursor:pointer;transition:.2s} .seg-btn:hover{color:var(--txt)} .seg-btn.is-active{background:linear-gradient(135deg,rgba(255,61,129,.35),rgba(139,92,246,.35));color:#fff;box-shadow:0 4px 14px rgba(255,61,129,.2)} .btn{ width:100%;padding:11px 16px;border:0;border-radius:12px;font:inherit;font-weight:600; cursor:pointer;transition:transform .15s, box-shadow .2s, background .2s; } .btn:active{transform:scale(.98)} .btn.primary{background:linear-gradient(135deg,var(--hot),#8b5cf6);color:#fff;box-shadow:0 8px 24px rgba(255,61,129,.28)} .btn.primary:hover{box-shadow:0 12px 32px rgba(255,61,129,.45)} .btn.ghost{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid rgba(255,255,255,.1)} .btn.ghost:hover{color:var(--txt);background:rgba(255,255,255,.11)} .btn.small{padding:8px 12px;font-size:12px} .data-actions{display:flex;gap:8px} /* ── tmdb search ────────────────────────── */ .search-wrap{position:relative} .spinner{ position:absolute;right:12px;top:13px;width:14px;height:14px;border-radius:50%; border:2px solid rgba(255,255,255,.18);border-top-color:var(--cool); animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .search-note{margin:-4px 0 10px;font-size:11.5px;color:var(--muted);min-height:0;line-height:1.5} .search-note a{color:var(--cool);text-decoration:none;border-bottom:1px dotted} .search-note.err{color:var(--hot)} .tmdb-results{ position:absolute;top:calc(100% - 4px);left:0;right:0;z-index:30; background:rgba(18,16,34,.97); border:1px solid rgba(255,255,255,.14);border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.65); backdrop-filter:blur(20px); overflow:hidden;max-height:340px;overflow-y:auto; animation:pop .18s ease both; } .tmdb-item{display:flex;gap:10px;padding:8px 10px;cursor:pointer;align-items:center;transition:background .15s;border:0;background:none;width:100%;text-align:left;color:inherit;font:inherit} .tmdb-item:hover,.tmdb-item.is-cursor{background:linear-gradient(90deg,rgba(255,61,129,.22),rgba(139,92,246,.12))} .tmdb-item img,.tmdb-item .noimg{width:38px;height:56px;border-radius:6px;object-fit:cover;flex:0 0 auto;background:rgba(255,255,255,.07);display:grid;place-items:center;font-size:16px} .tmdb-item .ti{min-width:0;flex:1} .tmdb-item .tt{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tmdb-item .ts{font-size:11.5px;color:var(--muted);margin-top:2px} .tmdb-empty{padding:14px;font-size:12.5px;color:var(--muted);text-align:center} /* ── tag editor ─────────────────────────── */ .tag-editor{ display:flex;flex-wrap:wrap;gap:6px;align-items:center; padding:8px;margin-bottom:10px;min-height:44px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);border-radius:12px; cursor:text;transition:.2s; } .tag-editor:focus-within{border-color:var(--cool);background:rgba(94,231,255,.07);box-shadow:0 0 0 4px rgba(94,231,255,.1)} .tag-editor input{flex:1;min-width:110px;background:none;border:0;outline:none;color:var(--txt);font:inherit;font-size:13px;padding:3px} .tag-editor input::placeholder{color:#6f6a94} .tag-editor .pill{cursor:default} .tag-editor .pill.auto{--pc:94,231,255} .tag-editor .pill .x{margin-left:2px;opacity:.6;cursor:pointer;font-size:11px} .tag-editor .pill .x:hover{opacity:1;color:#fff} .tag-editor .pill:hover{transform:translateY(-1px) scale(1.03)} .poster-preview{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:11.5px;color:var(--muted)} .poster-preview img{width:40px;height:60px;border-radius:7px;object-fit:cover;box-shadow:0 6px 16px rgba(0,0,0,.5)} /* ── progress row ───────────────────────── */ .progress-row{display:flex;gap:8px;margin-bottom:10px;align-items:center} .pr-fields{display:flex;gap:8px} .pr-fields.hidden{display:none} .np{ display:flex;align-items:center;gap:5px;padding:7px 10px;font-size:12px;color:var(--muted); background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:11px; transition:.2s; } .np:focus-within{border-color:var(--cool);background:rgba(94,231,255,.07)} .np input{ width:42px;background:none;border:0;outline:none;color:var(--txt); font:inherit;font-size:13px;font-weight:600;-moz-appearance:textfield; } .np input::-webkit-outer-spin-button,.np input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .mini-select{ flex:1;padding:8px 10px;font:inherit;font-size:12.5px;color:var(--txt); background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); border-radius:11px;cursor:pointer;transition:.2s; } .mini-select:focus{outline:none;border-color:var(--cool)} .mini-select option{background:#151327;color:var(--txt)} /* ── progress badges ────────────────────── */ .ep-badge{ display:inline-flex;align-items:center;gap:4px;flex:0 0 auto; padding:2px 8px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.04em; background:rgba(255,204,77,.16);border:1px solid rgba(255,204,77,.4);color:var(--amber); } .ep-badge.done{background:rgba(166,255,94,.14);border-color:rgba(166,255,94,.38);color:var(--lime)} .bump-btn{ background:rgba(255,204,77,.14);border:1px solid rgba(255,204,77,.36);color:var(--amber); border-radius:8px;cursor:pointer;font-size:11px;padding:2px 7px;opacity:0;transition:.2s; } .entry:hover .bump-btn{opacity:1} .bump-btn:hover{background:var(--amber);color:#241c00;box-shadow:0 4px 14px rgba(255,204,77,.45)} .entry.watching{border-left:2px solid rgba(255,204,77,.55)} .entry.finished .entry-name{opacity:.6} .result-next{ margin-top:10px;font-size:14px;font-weight:600;color:var(--amber); letter-spacing:.04em;text-shadow:0 0 18px rgba(255,204,77,.5); } .watched-btn{width:auto;margin-top:10px;padding:7px 14px} .watched-btn:hover{background:rgba(166,255,94,.16);border-color:rgba(166,255,94,.4);color:var(--lime)} /* ── inline progress editor ─────────────── */ button.ep-badge{cursor:pointer;font-family:inherit} button.ep-badge:hover{background:var(--amber);color:#241c00;box-shadow:0 4px 14px rgba(255,204,77,.45)} .prog-edit{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px;animation:pop .2s ease both} .prog-edit .np{padding:5px 8px} .prog-edit .np input{width:38px} .prog-hint{font-size:10.5px;color:var(--muted);letter-spacing:.03em} .mini-btn{ padding:5px 9px;font:inherit;font-size:11px;border-radius:9px;cursor:pointer;transition:.2s; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:var(--muted); } .mini-btn:hover{color:#fff;background:rgba(255,255,255,.15)} .mini-btn.go{background:rgba(166,255,94,.15);border-color:rgba(166,255,94,.4);color:var(--lime)} .mini-btn.go:hover{background:var(--lime);color:#12240a} .mini-btn:disabled{opacity:.5;cursor:default} .entry.flash{animation:flash 1.1s ease} @keyframes flash{ 0%,100%{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07)} 25%{background:rgba(255,61,129,.22);border-color:var(--hot);transform:translateX(4px)} 60%{background:rgba(255,61,129,.12);border-color:rgba(255,61,129,.5)} } .tmdb-item.owned{opacity:.62} .tmdb-item.owned .tt{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)} .owned-tag{ flex:0 0 auto;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase; padding:3px 7px;border-radius:99px; background:rgba(166,255,94,.16);border:1px solid rgba(166,255,94,.4);color:var(--lime); } /* ── settings ───────────────────────────── */ .settings{margin-top:18px;border-top:1px solid rgba(255,255,255,.09);padding-top:14px} .settings summary{cursor:pointer;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);list-style:none;transition:.2s;user-select:none} .settings summary::-webkit-details-marker{display:none} .settings summary:hover{color:var(--txt)} .settings[open] summary{margin-bottom:12px} .lbl{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .hint.tiny{font-size:11px;margin:0 0 12px} .ok{color:var(--lime)} .bad{color:var(--hot)} .seg.small{margin-bottom:14px} .seg.small .seg-btn{font-size:12px;padding:7px 4px} /* ── switch ─────────────────────────────── */ .switch{display:flex;align-items:center;gap:10px;margin-top:16px;cursor:pointer;font-size:12.5px;color:var(--muted);line-height:1.4} .switch input{display:none} .track{width:38px;height:21px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;flex:0 0 auto;transition:.25s} .thumb{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.25s} .switch input:checked + .track{background:linear-gradient(135deg,var(--hot),#8b5cf6)} .switch input:checked + .track .thumb{left:20px} .switch b{color:var(--txt)} /* ── pills ──────────────────────────────── */ .pills{display:flex;flex-wrap:wrap;gap:7px} .pill{ --pc:255,255,255; display:inline-flex;align-items:center;gap:6px; padding:5px 12px;border-radius:99px;cursor:pointer;user-select:none; font-size:12px;font-weight:500;letter-spacing:.01em; background:rgba(var(--pc),.08); border:1px solid rgba(var(--pc),.18); color:rgba(var(--pc),.85); transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .2s, color .2s, border-color .2s; position:relative; } .pill:hover{ transform:translateY(-2px) scale(1.05); background:rgba(var(--pc),.2); border-color:rgba(var(--pc),.5); color:#fff; box-shadow:0 6px 18px rgba(var(--pc),.28); } .pill:active{transform:translateY(0) scale(.97)} .pill.static{cursor:default} .pill.static:hover{transform:translateY(-1px) scale(1.03)} .pill.inc{--pc:166,255,94;background:rgba(166,255,94,.18);border-color:rgba(166,255,94,.55);color:#dbffb8;box-shadow:0 0 16px rgba(166,255,94,.18)} .pill.exc{--pc:255,61,129;background:rgba(255,61,129,.18);border-color:rgba(255,61,129,.55);color:#ffc2d8;text-decoration:line-through;box-shadow:0 0 16px rgba(255,61,129,.18)} .pill.this{--pc:255,204,77;font-weight:700} .pill .sign{font-size:10px;opacity:.9} /* ── entry list ─────────────────────────── */ .entry-list{list-style:none;margin:0;padding:0;max-height:430px;overflow-y:auto;display:flex;flex-direction:column;gap:8px} .entry-list::-webkit-scrollbar{width:6px} .entry-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px} .entry{ background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07); border-radius:14px;padding:11px 12px;transition:.2s;animation:pop .3s ease both; } @keyframes pop{from{opacity:0;transform:translateY(6px)}} .entry:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);transform:translateX(3px)} .entry.is-out{opacity:.4} .entry-head{display:flex;align-items:center;gap:8px} .entry-poster{width:26px;height:39px;border-radius:5px;object-fit:cover;flex:0 0 auto;box-shadow:0 3px 10px rgba(0,0,0,.5)} .entry-name{font-weight:600;font-size:14.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .entry-type{font-size:14px;opacity:.8} .icon-btn{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;padding:3px 5px;border-radius:7px;transition:.2s;opacity:0} .entry:hover .icon-btn{opacity:1} .icon-btn:hover{color:#fff;background:rgba(255,255,255,.12)} .icon-btn.del:hover{color:var(--hot);background:rgba(255,61,129,.15)} .entry .pills{margin-top:8px} .empty{color:var(--muted);font-size:13px;text-align:center;padding:22px 8px;line-height:1.6} /* ── wheel ──────────────────────────────── */ .stage{display:flex;flex-direction:column;align-items:center;gap:14px} .wheel-wrap{position:relative;width:min(620px,80vw);aspect-ratio:1} #wheel{width:100%;height:100%;display:block;border-radius:50%; filter:drop-shadow(0 24px 60px rgba(0,0,0,.6));} .wheel-glow{position:absolute;inset:-6%;border-radius:50%;pointer-events:none; background:radial-gradient(circle,transparent 58%,rgba(139,92,246,.22) 66%,transparent 76%); animation:halo 6s ease-in-out infinite} @keyframes halo{50%{opacity:.45;transform:scale(1.03)}} .pointer{ position:absolute;top:-16px;left:50%;transform:translateX(-50%); width:0;height:0;z-index:4; border-left:16px solid transparent;border-right:16px solid transparent; border-top:34px solid #fff; filter:drop-shadow(0 3px 10px rgba(255,61,129,.9)); transition:transform .06s; } .pointer.tick{transform:translateX(-50%) rotate(-9deg)} .spin-btn{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:23%;aspect-ratio:1;border-radius:50%;z-index:3; border:3px solid rgba(255,255,255,.75); background:radial-gradient(circle at 32% 28%,#ff6fa5,#ff3d81 45%,#8b5cf6); color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:clamp(14px,2.1vw,22px);letter-spacing:.08em;cursor:pointer; box-shadow:0 0 0 6px rgba(255,255,255,.06),0 14px 34px rgba(255,61,129,.5); transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; } .spin-btn:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.09);box-shadow:0 0 0 10px rgba(255,255,255,.09),0 18px 44px rgba(255,61,129,.7)} .spin-btn:active:not(:disabled){transform:translate(-50%,-50%) scale(.96)} .spin-btn:disabled{opacity:.55;cursor:not-allowed} .spin-btn.nudge{animation:nudge .7s ease} @keyframes nudge{ 0%,100%{box-shadow:0 0 0 6px rgba(255,255,255,.06),0 14px 34px rgba(255,61,129,.5)} 50%{box-shadow:0 0 0 18px rgba(255,61,129,.28),0 14px 44px rgba(255,61,129,.8)} } .pool-info{margin:0;color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase} /* ── result ─────────────────────────────── */ .result{width:100%;text-align:center;animation:riseIn .5s cubic-bezier(.2,.9,.3,1.3) both} @keyframes riseIn{from{opacity:0;transform:translateY(22px) scale(.94)}} .result-inner{display:flex;align-items:center;justify-content:center;gap:18px;text-align:left;flex-wrap:wrap} .result-inner > div{min-width:0} .result-poster{ width:86px;border-radius:12px;flex:0 0 auto; box-shadow:0 14px 40px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.12); animation:posterIn .6s cubic-bezier(.2,1.4,.4,1) both; } @keyframes posterIn{from{opacity:0;transform:translateX(-16px) rotate(-7deg) scale(.85)}} @media(max-width:520px){.result-inner{text-align:center}} .result-kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .result-title{ font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:clamp(28px,5.2vw,58px);line-height:1.08;letter-spacing:-.02em; background:linear-gradient(100deg,#fff,var(--amber),var(--hot),var(--cool),#fff); background-size:300% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 26px rgba(255,61,129,.45)); animation:shine 5s linear infinite, thump .7s cubic-bezier(.2,1.6,.4,1) both; } @keyframes thump{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}} .result-meta{color:var(--muted);font-size:12.5px;margin-top:8px;letter-spacing:.05em} .veto{margin-top:20px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.14)} .veto-label{font-size:13px;color:var(--muted);font-style:italic;margin-bottom:10px} .veto .pills{justify-content:center} .veto-active{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09)} .veto-active .btn{margin-top:12px} .confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50} /* medium pill — "not in the mood for a film at all" */ .pill.medium{--pc:94,231,255;font-weight:600} /* ── phones ─────────────────────────────── */ @media(max-width:640px){ .topbar{padding:20px 14px 4px} .tagline{letter-spacing:.16em} .layout{gap:14px;padding:16px 12px 44px} .panel{padding:15px;border-radius:16px} /* .wheel-glow sits at inset:-6%, so the wrap must stay under 100/1.12 ≈ 89vw */ .wheel-wrap{width:min(620px,86vw)} .spin-btn{width:27%;border-width:2px} .entry-list{max-height:none} /* four filter buttons don't fit on one line — let them sit two-by-two */ #statusSeg .seg-btn{flex:1 1 42%} .seg-btn{padding:9px 6px;font-size:12.5px} .result-inner{gap:12px} .result-poster{width:64px} .result-title{font-size:clamp(24px,8vw,40px)} .veto .pills,.pills{gap:8px} /* bigger touch targets */ .pill{padding:7px 13px;font-size:12.5px} .icon-btn,.bump-btn{opacity:1} /* no hover on touch — always show */ .btn{padding:13px 16px} .field{padding:13px 14px} } /* long single-word titles must wrap rather than widen the page */ .result-title,.entry-name,.tt{overflow-wrap:break-word} .result-title{overflow-wrap:anywhere}