:root { --ink:#191919; --paper:#f6f1e7; --orange:#ff6546; --muted:#807b70; --line:#d8d1c3; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:Manrope, sans-serif; }
button { font:inherit; cursor:pointer; } .game-shell { width:min(900px, calc(100% - 38px)); margin:auto; min-height:100vh; display:flex; flex-direction:column; }
header { display:flex; justify-content:space-between; align-items:center; padding:28px 0 22px; } .brand { color:var(--ink); text-decoration:none; font:700 29px Fraunces,serif; letter-spacing:-1.5px; } .brand span { color:var(--orange); } .round, footer { font:500 11px "DM Mono",monospace; letter-spacing:.08em; } .round i { display:inline-block; width:36px; height:1px; background:var(--ink); margin:0 8px 3px; }
.start-screen,.end-screen { margin:auto 0; padding:clamp(30px,7vw,75px) 0; } .start-screen h1,.end-screen h1 { max-width:760px; } h1 em { color:var(--orange); font-style:normal; } .intro { max-width:450px; color:var(--muted); font-size:16px; line-height:1.65; margin:28px 0; } .start-details { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; } .start-details span { color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:7px 10px; text-transform:uppercase; font:500 10px "DM Mono",monospace; letter-spacing:.05em; } .start { border:0; border-radius:8px; background:var(--ink); color:#fff; padding:17px 21px; font-size:15px; font-weight:800; } .start span { margin-left:18px; font-size:20px; } .start:hover { transform:translateY(-1px); }.final-score { margin:34px 0 20px; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:14px; }.final-score span,.final-score small { color:var(--muted); font:500 10px "DM Mono",monospace; letter-spacing:.08em; }.final-score strong { font:700 clamp(55px,9vw,92px)/.85 Fraunces,serif; letter-spacing:-.07em; }.end-copy { color:var(--muted); max-width:440px; font-size:15px; line-height:1.6; margin:0 0 27px; }
.card { background:#fffdf8; border:1px solid var(--line); border-radius:18px; padding:clamp(28px,6vw,70px); box-shadow:0 12px 34px #2c21120d; } .eyebrow { margin:0 0 18px; text-transform:uppercase; color:var(--orange); font:700 11px "DM Mono",monospace; letter-spacing:.13em; } h1 { font:700 clamp(34px,5.5vw,65px)/1.02 Fraunces,serif; max-width:740px; letter-spacing:-.055em; margin:0; } .hint { color:var(--muted); margin:20px 0 42px; font-size:14px; }
.picker-section { border-top:1px solid var(--line); padding-top:24px; } .scale-toggle { display:flex; width:max-content; border:1px solid var(--line); border-radius:99px; padding:3px; gap:2px; } .scale { border:0; color:var(--muted); background:transparent; padding:8px 13px; border-radius:99px; font-size:11px; font-weight:800; } .scale.active { background:var(--ink); color:#fff; } .instruction { font-size:12px; color:var(--muted); margin:22px 0 16px; }
.lock { display:flex; flex-wrap:wrap; gap:22px 18px; align-items:flex-start; padding:10px 0 30px; } .unit { display:flex; align-items:flex-end; gap:8px; } .digits { display:flex; border:1px solid #b9b2a5; background:#fbf8f0; border-radius:8px; overflow:hidden; box-shadow:inset 0 0 0 2px #fff; } .digit { width:35px; height:57px; border:0; border-right:1px solid #d7d0c3; background:transparent; position:relative; color:var(--ink); font:500 27px "DM Mono",monospace; padding:0; } .digit:last-child { border-right:0; } .digit:hover { background:#f0eadf; } .digit:focus-visible { outline:2px solid var(--orange); outline-offset:-2px; } .unit-name { font:700 10px "DM Mono",monospace; color:var(--muted); text-transform:uppercase; padding-bottom:7px; }
.submit,.next { border:0; border-radius:8px; background:var(--orange); color:#1e140e; padding:15px 19px; font-size:14px; font-weight:800; } .submit span,.next span { font-size:20px; margin-left:13px; line-height:0; } .submit:hover,.next:hover { filter:brightness(.95); transform:translateY(-1px); }
.hidden { display:none; } .result { border-top:1px solid var(--line); padding-top:26px; } .verdict { font:700 clamp(30px,4vw,43px)/1 Fraunces,serif; color:var(--orange); letter-spacing:-.04em; margin-bottom:29px; } .comparison { display:grid; grid-template-columns:1fr 1fr; gap:15px; } .comparison div { padding:17px; border-radius:9px; background:#f6f1e7; } .comparison span { display:block; color:var(--muted); text-transform:uppercase; font:500 10px "DM Mono",monospace; letter-spacing:.08em; margin-bottom:7px; } .comparison strong { font:700 clamp(17px,3vw,25px)/1.1 Fraunces,serif; letter-spacing:-.035em; } .difference { font:600 14px/1.6 Manrope,sans-serif; margin:20px 0 13px; } .duration-bar { margin:0 0 22px; }.bar-key { display:flex; justify-content:space-between; color:var(--muted); font:500 10px "DM Mono",monospace; letter-spacing:.03em; margin-bottom:8px; }.bar-key span { display:flex; align-items:center; gap:5px; }.bar-key i { width:7px; height:7px; border-radius:50%; display:inline-block; }.actual-dot { background:var(--orange); }.guess-dot { background:var(--ink); }.bar-track { height:14px; background:#e8e1d5; border-radius:99px; position:relative; overflow:hidden; }.actual-bar,.guess-bar { position:absolute; left:0; height:100%; border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.2,1); }.actual-bar { background:var(--orange); }.guess-bar { background:var(--ink); opacity:.92; height:6px; top:4px; }.fact { background:#1c1b19; color:#fff; border-radius:9px; padding:18px 20px; font:500 13px/1.55 Manrope,sans-serif; } .fact::before { content:"DID YOU KNOW?"; display:block; color:#ff9b81; font:500 10px "DM Mono",monospace; letter-spacing:.1em; margin-bottom:7px; } .next { margin-top:23px; background:var(--ink); color:#fff; }
footer { display:flex; justify-content:space-between; color:var(--muted); margin-top:auto; padding:20px 0 25px; } #score { color:var(--ink); } @media (max-width:540px) { .game-shell{width:min(100% - 24px,900px)} header{padding:18px 0}.card{padding:28px 22px;border-radius:13px}.hint{margin-bottom:32px}.lock{gap:16px 12px}.digit{width:29px;height:52px;font-size:23px}.comparison{grid-template-columns:1fr} footer span:first-child{display:none} }