:root { --paper:#0d1118; --ink:#f1ede4; --muted:#a9a7a1; --orange:#d85a66; --cream:#171d27; --line:#3d4654; --sage:#526b61; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 92% 5%,#243042 0 7%,transparent 28%),radial-gradient(circle at 0% 100%,#182419 0,transparent 25%),var(--paper); font-family:"DM Mono",monospace; }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { max-width:1120px; min-height:100svh; margin:auto; padding:26px 44px 22px; display:flex; flex-direction:column; }
.topbar, footer { display:flex; justify-content:space-between; align-items:center; }.header-actions { display:flex; align-items:center; gap:10px; }
.wordmark { color:var(--ink); font-family:"Cormorant Garamond",serif; font-size:29px; font-weight:700; text-decoration:none; letter-spacing:-1.4px; line-height:.8; }.wordmark span { color:var(--orange); font-style:italic; }
.help-button { width:29px; height:29px; border:1px solid var(--ink); border-radius:100%; color:var(--paper); background:var(--ink); line-height:1; }
.archive-button { width:29px; height:29px; display:grid; place-items:center; border:1px solid var(--line); border-radius:100%; color:var(--ink); background:transparent; }.archive-button:hover { border-color:var(--orange); color:var(--orange); }.archive-button svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-width:1.7; }
.game { width:min(100%,620px); margin:clamp(40px,8vh,88px) auto 20px; text-align:center; }.eyebrow { margin:0 0 15px; color:var(--orange); font-size:11px; letter-spacing:.11em; text-transform:uppercase; }.game h1 { margin:0; font:400 clamp(48px,7vw,76px)/.86 "Bebas Neue",sans-serif; letter-spacing:.025em; text-transform:uppercase; }.subhead { margin:20px 0 32px; color:var(--muted); font-size:13px; line-height:1.6; }
.frame-wrap { padding:10px; border:1px solid var(--line); background:var(--cream); box-shadow:0 18px 42px #00000070; }.film-frame { aspect-ratio:16/9; position:relative; overflow:hidden; background-color:#26333d; background-size:cover; background-repeat:no-repeat; isolation:isolate; transition:filter .5s ease,transform .5s ease,background-position .5s ease; }.film-frame::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#06101688,transparent 45%); }.film-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0c141b38,transparent 38% 62%,#0c141b30); pointer-events:none; }
.reveal-1 { filter:blur(7px) saturate(.82); transform:scale(1.004); }.reveal-2 { filter:blur(3px) saturate(.94); }.reveal-3 { filter:none; }.frame-caption { display:flex; justify-content:space-between; padding:10px 2px 1px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.attempts { display:flex; justify-content:center; gap:8px; margin:21px 0; }.attempt { width:39px; height:3px; background:var(--line); }.attempt.filled { background:var(--orange); }.attempt.used { background:#bdb7ae; }
.guess-form { display:flex; gap:8px; }.guess-form input { flex:1; min-width:0; padding:15px 16px; color:var(--ink); border:1px solid var(--ink); outline-offset:3px; background:var(--cream); font-size:13px; }.guess-form input::placeholder { color:#9a958d; }.guess-form button,.dialog-cta { border:1px solid var(--ink); padding:0 20px; color:var(--cream); background:var(--ink); font-size:12px; transition:transform .15s,background .15s; }.guess-form button:hover,.dialog-cta:hover { background:var(--orange); transform:translateY(-2px); }.guess-form button:disabled { opacity:.5; cursor:not-allowed; }.suggestions { position:relative; z-index:2; margin:0; padding:4px; list-style:none; text-align:left; border:1px solid var(--ink); border-top:0; background:var(--cream); box-shadow:0 10px 16px #332d2112; }.suggestions button { display:flex; width:100%; justify-content:space-between; border:0; padding:10px 11px; color:var(--ink); background:transparent; text-align:left; font-size:12px; }.suggestions button:hover,.suggestions button:focus-visible { color:var(--cream); background:var(--ink); outline:0; }.suggestions span { color:var(--muted); font-size:10px; }.suggestions button:hover span,.suggestions button:focus-visible span { color:#ded8cd; }.feedback { height:22px; margin:10px 0 10px; color:var(--muted); font-size:12px; }.feedback.success { color:#517148; }.feedback.failure { color:#a94f37; }.feedback em { font-family:Fraunces,serif; font-style:normal; font-size:15px; }
.hints { display:grid; justify-items:center; gap:6px; margin-top:12px; }.hint-label { margin:0; color:var(--muted); font-size:8px; letter-spacing:.13em; text-transform:uppercase; }.hint-controls { display:flex; justify-content:center; gap:10px; }.hint { width:36px; height:36px; display:flex; align-items:center; overflow:hidden; border:1px solid var(--line); border-radius:18px; padding:0 9px; color:var(--muted); background:transparent; font-size:10px; white-space:nowrap; transition:width .2s ease,border-color .2s ease,background .2s ease; }.hint:hover,.hint:focus-visible { width:128px; border-color:var(--orange); color:var(--ink); outline:0; }.hint-icon { width:16px; height:18px; display:grid; flex:0 0 16px; place-items:center; color:var(--orange); font-size:17px; line-height:1; }.hint-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; }.hint-prompt { margin-left:8px; opacity:0; transform:translateX(-4px); transition:opacity .14s ease,transform .2s ease; }.hint:hover .hint-prompt,.hint:focus-visible .hint-prompt { opacity:1; transform:translateX(0); }.hint:disabled { cursor:default; opacity:.32; }.hint.chosen:disabled { width:auto; min-width:132px; padding-right:4px; color:var(--muted); opacity:1; }.hint.chosen .hint-prompt { margin-left:8px; opacity:1; transform:none; }.hint-value { display:none; margin-left:7px; color:#121722; }.hint.chosen .hint-value { display:inline-block; border-radius:10px; padding:4px 8px; color:#121722; background:var(--orange); font-size:9px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; }
footer { margin-top:auto; padding-top:20px; color:var(--muted); font-size:10px; }.image-credit,.inspiration-credit { color:var(--muted); font-size:8px; letter-spacing:.06em; text-decoration:none; text-transform:uppercase; opacity:.55; }.image-credit:hover { color:var(--orange); opacity:1; }.inspiration-credit { margin-left:auto; }
.win-toast { position:fixed; z-index:10; top:50%; left:50%; min-width:190px; padding:21px 28px; color:white; background:#668c5a; box-shadow:9px 9px 0 #334a2c; font:500 20px/1 Fraunces,serif; letter-spacing:-.5px; text-align:center; transform:translate(-50%,-50%); animation:toast-pop .22s cubic-bezier(.2,1.4,.5,1) both; }.win-toast span { margin-right:7px; font-family:"DM Mono",monospace; font-size:14px; }@keyframes toast-pop { from { transform:translate(-50%,-50%) scale(.72); opacity:0; } to { transform:translate(-50%,-50%) scale(1); opacity:1; } }
.glitch-flash { position:fixed; z-index:30; inset:0; pointer-events:none; opacity:0; mix-blend-mode:screen; background:repeating-linear-gradient(0deg,transparent 0 4px,#ff26341c 4px 6px),linear-gradient(90deg,#f0293838,transparent 11%,transparent 89%,#f0293838),linear-gradient(0deg,#f029382c,transparent 12%,transparent 88%,#f029382c); box-shadow:inset 0 0 50px 10px #ee243e88; }.glitch-flash.active { animation:miss-glitch .38s steps(2,end) both; }@keyframes miss-glitch { 0% { opacity:0; transform:translateX(0); } 18% { opacity:.9; transform:translateX(-5px); } 32% { opacity:.15; transform:translateX(6px); } 52% { opacity:.75; transform:translateX(-2px); } 100% { opacity:0; transform:translateX(0); } }
dialog { width:min(440px,calc(100% - 32px)); border:1px solid var(--ink); padding:35px; color:var(--ink); background:var(--cream); box-shadow:12px 12px 0 var(--sage); }dialog::backdrop { background:#030509a8; backdrop-filter:blur(4px); }.dialog-close { position:absolute; top:9px; right:12px; border:0; color:var(--ink); background:none; font-size:25px; }.dialog-cta { height:42px; padding:0 19px; color:var(--cream); }.dialog-cta:hover { color:var(--cream); }.dialog-cta + * { margin:0; } dialog h2 { margin:0 0 14px; font:600 37px/.98 Fraunces,serif; letter-spacing:-2px; } dialog p:not(.eyebrow) { margin:0 0 23px; color:var(--muted); font-size:13px; line-height:1.65; }
.result-dialog { overflow:hidden; text-align:center; }.result-dialog::before { content:""; position:absolute; top:0; right:0; left:0; height:8px; background:var(--sage); }.success-splash { width:45px; height:45px; display:grid; place-items:center; margin:2px auto 12px; border-radius:50%; color:#fff; background:#668c5a; font-size:19px; animation:pop .32s cubic-bezier(.2,1.4,.5,1) both; }.result-dialog h2 { margin-bottom:5px; }.result-film { margin-bottom:22px!important; color:var(--orange)!important; font-size:12px!important; }.player-stats { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:22px; }.player-stats div { padding:14px 8px; }.player-stats div+div { border-left:1px solid var(--line); }.player-stats strong,.player-stats span { display:block; }.player-stats strong { font:600 29px/1 Fraunces,serif; letter-spacing:-1px; }.player-stats span,.score-title { color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }.player-stats span { margin-top:6px; }.global-score { margin:0 0 23px; text-align:left; }.score-title { display:flex; justify-content:space-between; margin-bottom:9px; }.score-title span:last-child { color:#aaa49b; font-size:8px; }.score-bars { display:grid; gap:6px; }.bar-row { display:grid; grid-template-columns:12px 1fr 30px; align-items:center; gap:7px; font-size:10px; }.bar-row i { display:block; height:12px; position:relative; background:#293341; overflow:hidden; }.bar-row i::after { content:""; display:block; width:var(--bar); height:100%; background:var(--orange); animation:bar-grow .65s ease both; }.bar-row:nth-child(2) i::after { animation-delay:.1s; background:#a64b55; }.bar-row:nth-child(3) i::after { animation-delay:.2s; background:#663c48; }.bar-row b { font-weight:400; color:var(--muted); }.result-close { display:block; margin:13px auto 0; border:0; padding:0; color:var(--muted); background:none; font-size:10px; text-decoration:underline; text-underline-offset:3px; }@keyframes pop { from { transform:scale(.3) rotate(-20deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }@keyframes bar-grow { from { transform:scaleX(0); transform-origin:left; } to { transform:scaleX(1); transform-origin:left; } }
.result-dialog { overflow:hidden; text-align:center; }.result-dialog::before { content:""; position:absolute; top:0; right:0; left:0; height:8px; background:var(--sage); }.result-dialog .dialog-cta { color:#121722; background:var(--orange); border-color:var(--orange); }.result-dialog .dialog-cta:hover { color:#121722; background:#dfb662; border-color:#dfb662; }.success-splash { width:45px; height:45px; display:grid; place-items:center; margin:2px auto 12px; border-radius:50%; color:#fff; background:#668c5a; font-size:19px; animation:pop .32s cubic-bezier(.2,1.4,.5,1) both; }.result-dialog h2 { margin-bottom:5px; }.result-film { margin-bottom:22px!important; color:var(--orange)!important; font-size:12px!important; }.player-stats { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:22px; }.player-stats div { padding:14px 8px; }.player-stats div+div { border-left:1px solid var(--line); }.player-stats strong,.player-stats span { display:block; }.player-stats strong { font:600 29px/1 Fraunces,serif; letter-spacing:-1px; }.player-stats span,.score-title { color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }.player-stats span { margin-top:6px; }.global-score { margin:0 0 23px; text-align:left; }.score-title { display:flex; justify-content:space-between; margin-bottom:9px; }.score-title span:last-child { color:#aaa49b; font-size:8px; }.score-bars { display:grid; gap:6px; }.bar-row { display:grid; grid-template-columns:12px 1fr 30px; align-items:center; gap:7px; font-size:10px; }.bar-row i { display:block; height:12px; position:relative; background:#293341; overflow:hidden; }.bar-row i::after { content:""; display:block; width:var(--bar); height:100%; background:var(--orange); animation:bar-grow .65s ease both; }.bar-row:nth-child(2) i::after { animation-delay:.1s; background:#a57e44; }.bar-row:nth-child(3) i::after { animation-delay:.2s; background:#705c43; }.bar-row b { font-weight:400; color:var(--muted); }.result-close { display:block; margin:13px auto 0; border:0; padding:0; color:var(--muted); background:none; font-size:10px; text-decoration:underline; text-underline-offset:3px; }@keyframes pop { from { transform:scale(.3) rotate(-20deg); opacity:0; } to { transform:scale(1) rotate(0); opacity:1; } }@keyframes bar-grow { from { transform:scaleX(0); transform-origin:left; } to { transform:scaleX(1); transform-origin:left; } }
.archive-dialog { width:min(430px,calc(100% - 32px)); }.archive-dialog h2 { margin-bottom:9px; font:400 51px/.86 "Bebas Neue",sans-serif; letter-spacing:.025em; text-transform:uppercase; }.archive-intro { margin-bottom:22px!important; }.archive-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }.archive-list li { display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center; padding:13px 2px; border-bottom:1px solid var(--line); font-size:12px; }.archive-list li span { color:var(--orange); font-size:10px; }.archive-list li strong { font-weight:400; }.archive-list li em { color:var(--muted); font-size:10px; font-style:normal; }.archive-list .archive-empty { display:block; padding:18px 0; color:var(--muted); font-size:12px; line-height:1.6; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:600px) { .shell{padding:20px 18px 16px}.game{margin-top:55px}.game h1{letter-spacing:-2px}.subhead{margin-bottom:27px}.hints{gap:12px;flex-wrap:wrap}.hint{font-size:10px}.guess-form button{padding:0 15px}.frame-caption{font-size:9px} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}