@font-face{font-family:Besley;src:url('/fonts/besley-400.woff2') format('woff2');font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:Besley;src:url('/fonts/besley-500.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/fonts/inter-500.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
:root { --ink:#2e4441; --paper:#f9fff2; --paper-2:#eef3e8; --gold:#b28b52; --rose:#e8b2ad; --muted:#64746f; --danger:#9d3f38; --shadow:0 18px 50px rgba(35,55,51,.12); }
* { box-sizing:border-box; }
html { color-scheme:light; background:var(--paper);overflow-x:hidden; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 8% 2%,rgba(232,178,173,.2),transparent 26rem),radial-gradient(circle at 92% 28%,rgba(178,139,82,.13),transparent 24rem),var(--paper); font:16px/1.55 Inter,system-ui,sans-serif; min-height:100dvh;overflow-x:hidden; }
img { max-width:100%; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
.app-shell { width:100%;min-width:0;min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);max-width:760px;margin:auto;overflow-x:hidden; }
.app-shell.nav-visible { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
.brand { text-align:center; padding:22px 20px 8px; font:300 1.35rem/1.2 Besley,Georgia,serif; letter-spacing:.06em; }
.brand small { display:block; margin-top:3px; font-size:.72rem; letter-spacing:.18em; }
.screen { width:100%;min-width:0;padding:22px 22px 28px;animation:appear .32s ease both; }
.center { text-align:center; display:grid; align-content:center; min-height:calc(100dvh - 130px); }
.eyebrow { color:var(--gold); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3 { font-family:Besley,Georgia,serif; font-weight:300; line-height:1.13; margin:.35em 0; }
h1 { font-size:clamp(2.35rem,11vw,4.4rem); }
h2 { font-size:clamp(2rem,8vw,3.2rem); }
h3 { font-size:1.6rem; }
p { margin:.55rem 0; }
.lede { font-family:Besley,Georgia,serif; font-size:1.12rem; max-width:32rem; margin:1.25rem auto 1.7rem; }
.privacy { color:var(--muted); font-size:.78rem; max-width:28rem; margin:1.2rem auto 0; }
.mascot { display:block;max-width:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 12px 16px rgba(35,55,51,.12)); }
.mascot-welcome { width:min(58vw,260px);height:min(22dvh,180px);margin:-18px auto -6px;animation:mascot-arrive .7s cubic-bezier(.2,.8,.2,1) both; }
.coach-tip { display:grid;grid-template-columns:72px 1fr;align-items:end;gap:10px;margin:0 4px 14px;text-align:left; }
.coach-tip p { position:relative;background:white;border:1px solid rgba(46,68,65,.1);border-radius:18px 18px 18px 5px;padding:11px 13px;margin:0;box-shadow:0 8px 24px rgba(35,55,51,.08);font-size:.82rem; }
.coach-tip strong { color:var(--gold);display:block; }
.mascot-coach { width:72px;height:80px;object-position:bottom; }
.button { border:1px solid rgba(255,255,255,.16); border-radius:999px; min-height:56px; padding:14px 24px; background:linear-gradient(135deg,#2e4441,#3c5a55); color:var(--paper); font:500 1rem Besley,Georgia,serif; letter-spacing:.015em; cursor:pointer; display:inline-flex; justify-content:center; align-items:center; text-decoration:none; width:100%; box-shadow:0 10px 24px rgba(35,55,51,.2),inset 0 1px rgba(255,255,255,.15); transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease; }
.button:active { transform:translateY(1px) scale(.985); box-shadow:0 5px 14px rgba(35,55,51,.18); }.button:disabled { opacity:.55; cursor:wait; }
.button.secondary { background:rgba(255,255,255,.78); color:var(--ink); border:1px solid rgba(46,68,65,.25); box-shadow:0 6px 18px rgba(35,55,51,.08); }
.button.ghost { background:transparent; color:var(--ink); min-height:44px; font-family:Inter,sans-serif; font-size:.88rem; text-decoration:underline; }
.actions { display:grid; gap:11px; margin-top:20px; }
.steps { display:grid; gap:18px; margin:28px 0; text-align:left; }
.step { display:grid; grid-template-columns:50px 1fr; align-items:center; gap:14px; }
.step-icon { width:50px;height:50px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;font-size:1.35rem; }
label { display:block; text-align:left; font-weight:600; font-size:.9rem; }
input[type=text], input[type=password], select { width:100%; margin-top:8px; border:1px solid rgba(46,68,65,.3); background:white; color:var(--ink); min-height:58px; border-radius:16px; padding:12px 16px; font-size:1.05rem; }
:focus-visible { outline:3px solid rgba(178,139,82,.45); outline-offset:3px; }
.error { color:var(--danger); min-height:1.5em; }
.progress-meta { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.75rem; letter-spacing:.1em; }
.progress { height:5px;background:#dce5d5;border-radius:9px;overflow:hidden;margin:9px 0 22px; }.progress span { display:block;height:100%;background:var(--gold);transition:width .4s ease; }
.challenge-card { position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(250,246,237,.9));border:1px solid rgba(46,68,65,.1);box-shadow:var(--shadow);border-radius:30px;padding:28px 24px;text-align:center;min-height:310px;display:grid;align-content:center; }
.challenge-card::after { content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-70px;top:-80px;background:rgba(232,178,173,.16); }
.camera-mark { font-size:2.2rem; }.points { color:var(--gold);font-weight:600;margin-top:18px; }
.field-button { position:relative;overflow:hidden; }.field-button input { position:absolute;inset:0;opacity:0;cursor:pointer;width:100%; }
.preview { width:100%;max-height:58dvh;object-fit:contain;border-radius:24px;background:#dfe6db;box-shadow:var(--shadow); }
.status { color:var(--muted);min-height:1.5em;text-align:center; }
.success-mark { width:86px;height:86px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:2.4rem;margin:0 auto 18px;position:relative;box-shadow:0 8px 25px rgba(35,55,51,.2); }
.profile-card { background:white;border-radius:24px;padding:24px;box-shadow:var(--shadow); }
.bottom-nav { position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,760px);background:rgba(249,255,242,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;justify-content:space-around;gap:2px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));border-top:1px solid rgba(46,68,65,.12);box-shadow:0 -8px 28px rgba(35,55,51,.07);z-index:10; }
.bottom-nav button,.bottom-nav a { border:0;background:transparent;color:var(--ink);padding:7px 4px 6px;text-decoration:none;font-size:.68rem;cursor:pointer;white-space:nowrap;display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:3px;border-radius:14px;transition:background .18s ease,transform .18s ease; }
.bottom-nav button:active,.bottom-nav a:active { background:rgba(46,68,65,.08);transform:scale(.97); }
.nav-icon { font:1.1rem/1 Inter,Arial,sans-serif; }
.player-chip { display:flex;align-items:center;gap:7px;max-width:48%;overflow:hidden;white-space:nowrap; }
.avatar { display:inline-grid;place-items:center;object-fit:cover;border-radius:50%;background:var(--paper-2);color:var(--ink);font-weight:700;flex:none; }
.avatar-header { width:30px;height:30px;font-size:.66rem; }
.avatar-profile { width:112px;height:112px;font:500 2rem Besley,serif; }
.avatar-small { width:44px;height:44px; }
.avatar-tiny { width:34px;height:34px; }
.avatar-fallback { border:1px solid rgba(46,68,65,.14); }
.profile-progress { --progress:0deg;width:132px;height:132px;border-radius:50%;margin:8px auto 18px;padding:7px;background:conic-gradient(var(--gold) var(--progress),#e8ede4 0);display:grid;place-items:center;transition:background .5s ease; }
.profile-avatar-inner { width:118px;height:118px;border-radius:50%;background:white;display:grid;place-items:center; }
.success-screen { position:relative;overflow:hidden; }
.success-screen .success-mark { margin-top:-43px; }
.success-photo { width:min(100%,360px);height:min(42dvh,280px);object-fit:cover;border-radius:28px;box-shadow:var(--shadow); }
.mascot-reaction { position:relative;z-index:3;display:grid;grid-template-columns:92px 1fr;align-items:center;gap:8px;margin:10px 0 14px;background:rgba(255,255,255,.94);border:1px solid rgba(46,68,65,.1);border-radius:22px;padding:8px 14px 8px 6px;text-align:left;box-shadow:0 10px 30px rgba(35,55,51,.1);animation:reaction-pop .45s .15s cubic-bezier(.2,.8,.2,1) both; }
.mascot-reaction>div { min-width:0; }
.mascot-reaction p { margin:2px 0;font:300 1rem/1.35 Besley,serif;overflow-wrap:anywhere; }
.mascot-reaction strong { color:var(--gold);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em; }
.mascot-reaction-image { width:92px;height:92px;object-position:bottom; }
.mascot-waiting { width:145px;height:145px;margin:0 auto -6px; }
.finish-screen .success-mark { margin-top:-34px; }
.mascot-finish { width:min(72vw,310px);height:225px;margin:-30px auto 0; }
.player-badge { display:inline-block;background:linear-gradient(120deg,#f4e8d0,#f8f1e4);color:#775b34;border:1px solid rgba(178,139,82,.24);border-radius:99px;padding:5px 11px;font-size:.72rem;font-weight:700;letter-spacing:.04em; }
.celebration { position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2; }
.celebration i { position:absolute;left:var(--x);top:-16px;width:9px;height:17px;border-radius:2px;animation:confetti 1.65s var(--delay) cubic-bezier(.18,.75,.36,1) both; }
.ranking-list { display:grid;gap:10px;margin:22px 0; }
.ranking-row { display:grid;grid-template-columns:35px 44px 1fr auto;gap:11px;align-items:center;background:rgba(255,255,255,.86);border:1px solid rgba(46,68,65,.09);border-radius:18px;padding:11px 14px; }
.ranking-row[aria-current=true] { border-color:var(--gold);box-shadow:0 8px 24px rgba(178,139,82,.15); }
.ranking-position { color:var(--gold);font:500 1.35rem Besley,serif; }
.ranking-name { overflow:hidden;text-overflow:ellipsis; }
.wall-shell { max-width:760px;margin:auto;min-height:100dvh; }
.wall-screen h1 { font-size:clamp(2rem,10vw,3.8rem);margin-bottom:12px; }
.wall-stats { display:inline-flex;align-items:baseline;gap:8px;color:var(--muted); }
.wall-stats strong { color:var(--ink);font:600 1.5rem Besley,Georgia,serif; }
.wall-intro { margin:4px 0 18px;color:var(--muted);font-size:.88rem; }
.wall-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0; }
.wall-card { aspect-ratio:1;background:rgba(46,68,65,.08);border-radius:3px;overflow:hidden; }
.wall-photo-link { display:block;width:100%;height:100%; }
.wall-card img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s ease,opacity .18s ease; }
.wall-card:active img { transform:scale(.98);opacity:.86; }
.wall-back { margin-top:22px; }
.empty-state { grid-column:1/-1;text-align:center;background:rgba(255,255,255,.72);border:1px dashed rgba(46,68,65,.2);border-radius:28px;padding:55px 24px; }
.empty-state>span { font-size:2.3rem; }
.status-pill { display:inline-block;margin-left:5px;padding:2px 7px;border-radius:99px;background:#ecefe9;color:var(--muted);font-size:.68rem; }
.status-pill.approved { background:#dcebdd;color:#35603b; }
.toast { position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:white;padding:11px 18px;border-radius:99px;box-shadow:var(--shadow);z-index:5;max-width:90%; }
.toast:empty { display:none; }
.admin-shell { max-width:1180px;margin:auto;padding:24px; }.admin-nav { display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 28px; }.admin-nav a { color:var(--ink);padding:9px 14px;border-radius:99px;border:1px solid #cfd8cb;text-decoration:none; }
.stats { display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px; }.stat { background:white;border-radius:20px;padding:20px;box-shadow:0 8px 26px rgba(35,55,51,.07); }.stat strong { display:block;font:300 2rem Besley,serif; }
.gallery { columns:2 240px;column-gap:15px; }.photo-card { break-inside:avoid;background:white;border-radius:18px;overflow:hidden;margin-bottom:15px;box-shadow:0 8px 25px rgba(35,55,51,.08); }.photo-card img { width:100%;height:auto;display:block; }.photo-info { padding:12px;font-size:.82rem; }.photo-actions { display:flex;gap:8px;margin-top:9px; }.photo-actions a,.photo-actions button { border:1px solid #ccd5c8;background:transparent;color:var(--ink);padding:7px 10px;border-radius:99px;text-decoration:none;font-size:.78rem; }
.table-wrap { overflow-x:auto;background:white;border-radius:18px; }.table { width:100%;border-collapse:collapse; }.table th,.table td { text-align:left;padding:12px;border-bottom:1px solid #e4e9e0;vertical-align:top; }.table th { font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted); }
.filter-bar { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px; }.filter-bar input,.filter-bar select { width:auto;min-height:44px;margin:0; }
.login { max-width:430px;margin:15dvh auto;padding:24px; }.login-card { background:white;padding:30px;border-radius:24px;box-shadow:var(--shadow); }
@keyframes appear { from{opacity:0;transform:translateY(8px)} }
@keyframes confetti { from{transform:translate3d(0,-20px,0) rotate(0);opacity:1} to{transform:translate3d(calc((50vw - var(--x)) * .35),105dvh,0) rotate(var(--spin));opacity:.15} }
@keyframes mascot-arrive { from{opacity:0;transform:translateY(18px) scale(.94)} }
@keyframes reaction-pop { from{opacity:0;transform:translateY(12px) scale(.97)} }
@media (max-width:360px){.screen{padding:16px 16px 22px}.brand{padding-top:15px;font-size:1.17rem}.welcome-screen h1{font-size:2.35rem}.coach-tip{grid-template-columns:58px 1fr;margin-inline:0}.mascot-coach{width:58px;height:68px}.mascot-reaction{grid-template-columns:72px 1fr;padding-right:10px}.mascot-reaction-image{width:72px;height:78px}.mascot-reaction p{font-size:.9rem}.bottom-nav button,.bottom-nav a{padding-inline:4px;font-size:.7rem}.challenge-card{min-height:280px;padding:22px 18px}}
@media (max-height:740px){.mascot-welcome{height:112px;width:175px;margin-top:-8px}.welcome-screen h1{font-size:2.35rem}.mascot-finish{height:150px}.mascot-waiting{height:110px}.center{align-content:start;padding-top:14px}}
@media (min-width:700px){.screen{padding:34px}.challenge-card{padding:42px}.gallery{columns:3 260px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}