*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--green: #538d4e;--yellow: #b59f3b;--orange: #c87941;--red: #b53e3e;--correct-bg: #538d4e;--border: #d3d6da;--text: #1a1a1b;--subtext: #787c7e;--bg: #ffffff;--header-border: #d3d6da}@media (prefers-color-scheme: dark){:root{--border: #3a3a3c;--text: #d7dadc;--subtext: #818384;--bg: #121213;--header-border: #3a3a3c}}body{font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;display:flex;flex-direction:column;align-items:center}header{width:100%;max-width:500px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--header-border);padding:12px 16px;position:relative}header h1{font-size:2rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}header h1 span{color:var(--green)}.date-label{position:absolute;right:16px;font-size:.75rem;color:var(--subtext)}main{width:100%;max-width:500px;padding:20px 16px;display:flex;flex-direction:column;gap:16px}.slogan-card{border:2px solid var(--border);border-radius:8px;padding:20px 16px;text-align:center}.slogan-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--subtext);margin-bottom:10px}.slogan-text{font-size:1.15rem;font-style:italic;line-height:1.5;font-weight:600}.guess-counter{font-size:.8rem;color:var(--subtext);text-align:center}.input-wrapper{position:relative}.guess-form{display:flex;gap:8px}.guess-input{flex:1;padding:10px 14px;border:2px solid var(--border);border-radius:6px;font-size:1rem;background:var(--bg);color:var(--text);outline:none;transition:border-color .15s}.guess-input:focus{border-color:var(--green)}.guess-btn{padding:10px 18px;background:var(--green);color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:700;cursor:pointer;transition:opacity .15s}.guess-btn:hover{opacity:.85}.suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg);border:1px solid var(--border);border-radius:6px;z-index:10;box-shadow:0 4px 12px #0000001f;overflow:hidden}.suggestion-item{padding:9px 14px;cursor:pointer;font-size:.95rem;transition:background .1s}.suggestion-item:hover,.suggestion-item.active{background:#f0faf0}@media (prefers-color-scheme: dark){.suggestion-item:hover,.suggestion-item.active{background:#1e2a1e}}.error-msg{font-size:.85rem;color:var(--red);text-align:center;min-height:1.2em}.guess-list{display:flex;flex-direction:column;gap:6px}.guess-row{display:flex;flex-direction:column;gap:6px;padding:10px 14px;border-radius:6px;border:1px solid var(--border);font-size:.95rem;animation:slideIn .2s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.guess-row.correct{background:var(--correct-bg);color:#fff;border-color:var(--correct-bg)}.guess-info{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px}.guess-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guess-dist{font-size:.85rem;white-space:nowrap}.guess-row:not(.correct) .guess-dist{color:var(--subtext)}.guess-arrow{font-size:1.1rem;min-width:1.5em;text-align:center}.guess-bar-wrap{display:flex;align-items:center;gap:8px}.guess-bar-track{flex:1;height:10px;border-radius:5px;background:#0000001a;overflow:hidden}@media (prefers-color-scheme: dark){.guess-bar-track{background:#ffffff1f}}.guess-bar{height:100%;border-radius:5px;transition:width .5s ease;min-width:2px}.guess-bar-pct{font-size:.72rem;color:var(--subtext);white-space:nowrap;min-width:3em;text-align:right}.guess-row.correct .guess-bar-pct{color:#ffffffd9}.end-message{text-align:center;padding:8px 0;display:flex;flex-direction:column;gap:12px;align-items:center}.win-text{font-size:1.05rem;font-weight:600;color:var(--green)}.lose-text{font-size:1.05rem;font-weight:600}.share-btn{padding:10px 24px;background:var(--green);color:#fff;border:none;border-radius:6px;font-size:.95rem;font-weight:700;cursor:pointer;transition:opacity .15s}.share-btn:hover{opacity:.85}