:root {
  --ink: #15241f;
  --paper: #f5f1e8;
  --cream: #fffdf7;
  --moss: #365948;
  --orange: #e27c4d;
  --gold: #e8ba62;
  --line: rgba(21, 36, 31, .14);
  --shadow: 0 18px 50px rgba(21,36,31,.11);
}
* { box-sizing: border-box; }
body { margin: 0; background: #dfe5dc; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font: inherit; }
.app-shell { width: min(100%, 520px); min-height: 100vh; margin: 0 auto; background: var(--paper); box-shadow: 0 0 80px rgba(21,36,31,.15); overflow: hidden; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding: 0; }
.top-banner-wrap { position:relative; height:132px; overflow:hidden; background:#f8e9c5; }
.top-banner { width:100%; height:100%; display:block; object-fit:cover; object-position:center 42%; }
.banner-reset { position:absolute; right:14px; top:14px; border-color:rgba(21,36,31,.22); background:rgba(255,253,247,.82); backdrop-filter:blur(6px); }
.brand-mark { font-weight: 900; letter-spacing: -.05em; font-size: 1.35rem; color: var(--moss); }
.brand-mark span { display:inline-block; margin-left: 5px; color: var(--orange); font-size: .68em; letter-spacing: .14em; vertical-align: middle; }
.icon-button { width: 38px; height:38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--moss); font-size:1.35rem; cursor:pointer; }
main { padding: 0 18px 26px; }
.hero-card { position:relative; min-height: 244px; padding: 27px 24px 22px; border-radius: 24px; overflow:hidden; color: var(--cream); background: radial-gradient(circle at 82% 18%, rgba(232,186,98,.85) 0 8%, transparent 9%), radial-gradient(circle at 110% 80%, rgba(226,124,77,.5), transparent 45%), linear-gradient(135deg, #1f382e, #42634d); box-shadow: var(--shadow); }
.hero-card:after { content:""; position:absolute; width:190px; height:190px; right:-75px; bottom:-82px; border: 1px solid rgba(255,253,247,.3); border-radius:50%; box-shadow: 0 0 0 20px rgba(255,253,247,.06), 0 0 0 40px rgba(255,253,247,.05); }
.eyebrow, .muted-label, .section-heading, footer { font-size:.67rem; letter-spacing:.16em; font-weight:800; }
.hero-card .eyebrow { color: #d7e0d5; }
h1 { margin: 18px 0 12px; font-size: clamp(2.6rem, 12vw, 4.1rem); line-height:.87; letter-spacing:-.08em; font-weight:800; }
h1 em { color: var(--gold); font-family: Georgia, serif; font-weight:400; letter-spacing:-.07em; }
.hero-card p { max-width: 280px; margin:0; color:#edf1e9; line-height:1.42; font-size:.9rem; }
.hero-meta { position:absolute; z-index:1; bottom:20px; left:24px; right:24px; display:flex; justify-content:space-between; font-size:.63rem; letter-spacing:.12em; font-weight:800; color:#d7e0d5; }
.page-title { margin: 20px 5px 4px; color: var(--moss); font-size: clamp(1.05rem, 5.2vw, 2.1rem); line-height:1; letter-spacing:-.06em; white-space:nowrap; text-align:center; }
.powered-by { display:flex; align-items:center; justify-content:center; gap:7px; margin:0 5px 2px; color:#111111; font-size:.62rem; letter-spacing:.04em; }.powered-by img { width:58px; height:28px; object-fit:contain; object-position:center; mix-blend-mode:multiply; }
.player-bar { display:flex; justify-content:space-between; align-items:center; padding:18px 5px 18px; }
.muted-label { display:block; color:#78867b; margin-bottom:4px; }
.player-bar strong { font-size:1rem; }
.score-pill { display:flex; gap:5px; align-items:baseline; padding: 8px 12px; border-radius: 14px; background:#e8eee5; color:var(--moss); font-weight:800; }
.score-pill span { font-size:1.3rem; }.score-pill small { font-size:.58rem; letter-spacing:.12em; }
.section-heading { display:flex; justify-content:space-between; align-items:center; color:var(--moss); }.section-heading strong { letter-spacing:normal; color:#758177; font-size:.73rem; }
.progress-block { padding: 0 5px 20px; }.progress-track { height:7px; margin-top:9px; background:#dbe1d7; border-radius:99px; overflow:hidden; }.progress-fill { width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--orange), var(--gold)); transition:width .45s ease; }
.clue-viewport { overflow:hidden; border-radius:0; touch-action:pan-y; }.clue-track { display:flex; width:300%; transition:transform .35s ease; }.clue-card { flex:0 0 33.333333%; width:33.333333%; min-width:0; min-height:260px; padding:22px 20px 24px; border-radius:0; overflow-wrap:anywhere; }.clue-card.is-found .clue-icon { background:#dcead9; color:var(--moss); }.art-preview-button { display:block; width:100%; margin:0 0 16px; padding:0; border:0; border-radius:14px; overflow:hidden; background:#e8eee5; cursor:pointer; }.clue-art { display:block; width:100%; max-height:190px; object-fit:cover; }.found-button { background:#6e8872; cursor:default; }.swipe-button { width:100%; background:transparent; color:#879287; cursor:default; }
.found-section { padding:25px 5px 0; }.found-list { display:grid; gap:9px; margin-top:10px; }.found-item { display:flex; align-items:center; gap:11px; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,253,247,.5); }.found-art-item { width:100%; text-align:left; cursor:pointer; color:var(--ink); font:inherit; }.found-thumb { width:54px; height:42px; flex:0 0 54px; border-radius:9px; object-fit:cover; background:#e8eee5; }.found-dot { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#dcead9; color:var(--moss); font-size:.85rem; }.found-item strong { font-size:.82rem; }.found-item small { display:block; margin-top:2px; color:#89958a; font-size:.68rem; }.found-chevron { margin-left:auto; color:#93a095; font-size:1.4rem; }.empty-state { padding:16px; color:#879287; text-align:center; font-size:.8rem; border:1px dashed var(--line); border-radius:14px; }
.admin-note { display:flex; gap:11px; margin:25px 5px 0; padding:15px; border-radius:16px; background:#e8eee5; color:var(--moss); }.admin-note > span { font-size:1.2rem; }.admin-note strong { font-size:.78rem; }.admin-note p { margin:4px 0 0; color:#6e7e72; font-size:.7rem; line-height:1.4; }
footer { display:flex; justify-content:space-between; padding: 17px 23px 22px; color:#8d998e; font-size:.58rem; }
.admin-hero { min-height: 220px; }
.admin-panel { margin-top: 18px; padding: 22px 20px; border-radius: 22px; background: var(--cream); box-shadow: var(--shadow); }
.admin-label { display:block; margin-top:24px; margin-bottom:7px; color:#78867b; font-size:.67rem; font-weight:800; letter-spacing:.14em; }.admin-name-row { display:flex; gap:8px; }.admin-name-input { min-width:0; flex:1; padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:#f8faf5; color:var(--ink); font:inherit; font-size:.85rem; outline:none; }.admin-name-input:focus { border-color:var(--moss); box-shadow:0 0 0 3px rgba(54,89,72,.12); }.save-name-button { padding:0 15px; border:0; border-radius:12px; background:var(--moss); color:white; font-size:.78rem; font-weight:800; cursor:pointer; }
.start-main { padding-top:12px; }.start-panel { margin:34px 5px 0; padding:25px 21px 22px; border-radius:22px; background:var(--cream); box-shadow:var(--shadow); }.start-panel h2 { margin:12px 0 8px; color:var(--moss); font-size:1.45rem; line-height:1.02; letter-spacing:-.05em; }.start-panel p { margin:0; color:#6e7e72; font-size:.84rem; line-height:1.45; }.start-name-input { display:block; width:100%; padding:13px; border:1px solid var(--line); border-radius:12px; background:#f8faf5; color:var(--ink); font:inherit; font-size:.9rem; outline:none; }.start-name-input:focus { border-color:var(--moss); box-shadow:0 0 0 3px rgba(54,89,72,.12); }.start-panel .primary-button { width:100%; margin-top:16px; }
.art-modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(21,36,31,.78); opacity:0; pointer-events:none; transition:opacity .2s ease; }.art-modal.open { opacity:1; pointer-events:auto; }.art-modal-card { position:relative; width:min(100%, 500px); padding:14px; border-radius:20px; background:var(--cream); box-shadow:0 24px 80px rgba(0,0,0,.3); }.art-modal-card img { display:block; width:100%; max-height:70vh; object-fit:contain; border-radius:12px; background:#e8eee5; }.art-modal-message { margin:2px 4px 10px; color:var(--orange); font-size:1.05rem; font-weight:900; letter-spacing:-.02em; }.art-modal-message:empty { display:none; }
.art-modal-close { position:absolute; z-index:1; top:7px; right:7px; width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,253,247,.9); color:var(--ink); font-size:1.5rem; line-height:1; cursor:pointer; }
.toast { position:fixed; z-index:12; left:50%; bottom:22px; transform:translate(-50%, 120px); width:min(calc(100% - 38px), 480px); padding:14px 16px; border-radius:14px; background:var(--ink); color:white; box-shadow:var(--shadow); font-size:.82rem; text-align:center; transition:transform .3s ease; }.toast.show { transform:translate(-50%, 0); }
@media (min-width: 700px) { body { padding: 28px 0; }.app-shell { border-radius:30px; min-height:0; } }