:root{--ink:#17324d;--muted:#65778a;--paper:#f5f0e7;--card:#fff;--line:#dce4eb;--accent:#d58b4b;--accent2:#17324d;--danger:#d92f3a;--good:#1f9d68;--shadow:0 16px 45px rgba(30,47,63,.12)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(145deg,#f5f0e7,#eef4f7)}button,input{font:inherit}.app-shell{width:min(100%,1080px);margin:0 auto;padding:18px}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:18px}.back-link{color:var(--ink);text-decoration:none;font-weight:700}.brand{display:flex;align-items:center;gap:10px}.brand img{width:48px;height:48px;object-fit:contain}.brand div{display:flex;flex-direction:column;line-height:1.15}.brand span{font-size:.78rem;color:var(--muted);margin-top:4px}.ghost-btn{justify-self:end;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;color:var(--ink);font-weight:800;cursor:pointer}.hero-card,.game-card{background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.8);border-radius:24px;box-shadow:var(--shadow)}.hero-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 28px}.hero-card h1{font-size:clamp(1.55rem,4vw,2.5rem);margin:8px 0 10px}.hero-card p{max-width:730px;margin:0;color:#4b6275;line-height:1.55}.hero-animal{width:150px;height:150px;object-fit:contain;flex:0 0 auto}.badge{display:inline-flex;background:#f3e6d6;color:#9a5a2f;border-radius:999px;padding:7px 11px;font-size:.78rem;font-weight:900;letter-spacing:.06em}.rules-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.rules-mini div{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.75);border:1px solid var(--line);padding:12px;border-radius:16px;color:#4f6375;font-size:.88rem}.rules-mini b{display:grid;place-items:center;width:30px;height:30px;min-width:30px;border-radius:50%;background:#fff;color:var(--accent2);box-shadow:0 3px 10px rgba(22,50,79,.08)}.game-card{padding:18px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}.stats>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:7px;align-items:center;background:#f7f9fb;border:1px solid var(--line);border-radius:15px;padding:10px 12px}.stat-icon{grid-row:1/3;font-size:1.2rem}.stats strong{font-size:1rem}.stats small{color:var(--muted);font-size:.72rem}.message-bar{text-align:center;color:#566c7d;font-weight:700;min-height:26px;margin:4px 0 9px}.board-wrap{display:flex;justify-content:center;overflow:auto;padding:2px}.board{--size:4;width:min(92vw,650px);display:grid;grid-template-columns:repeat(var(--size),1fr);gap:2px;padding:4px;background:#17324d;border-radius:15px;box-shadow:0 12px 30px rgba(23,50,77,.16);user-select:none;touch-action:manipulation}.cell{position:relative;aspect-ratio:1;border:0;display:grid;place-items:center;min-width:0;cursor:pointer;overflow:hidden;padding:0}.cell::after{content:"";position:absolute;inset:0;border:1px solid rgba(23,50,77,.13);pointer-events:none}.cell:not(.locked):active{transform:scale(.96)}.cell.locked{cursor:default}.cell .animal{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));animation:pop .28s ease-out}.mark{font-weight:1000;font-size:clamp(1.1rem,5vw,2.7rem);line-height:1;text-shadow:0 2px 0 rgba(255,255,255,.65)}.mark.red{color:var(--danger)}.mark.green{color:var(--good);opacity:.8}.cell.miss{box-shadow:inset 0 0 0 3px rgba(217,47,58,.38)}.cell.found{box-shadow:inset 0 0 0 4px rgba(31,157,104,.5)}@keyframes pop{0%{transform:scale(.25) rotate(-8deg);opacity:.2}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}.game-actions{display:flex;justify-content:center;gap:10px;margin:16px 0 8px}.secondary-btn,.primary-btn{border:0;border-radius:13px;padding:11px 15px;font-weight:900;cursor:pointer}.secondary-btn{background:#eef3f6;color:var(--ink)}.primary-btn{background:var(--accent2);color:#fff;width:100%}.legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}.legend span{display:flex;align-items:center;gap:6px}.legend i{display:grid;place-items:center;width:24px;height:24px;font-style:normal;font-weight:1000}.legend-hit img{width:24px;height:24px;object-fit:contain}.legend-red{color:var(--danger);font-size:1.4rem}.legend-green{color:var(--good);font-size:1.4rem}.modal{position:fixed;inset:0;background:rgba(8,22,34,.55);display:grid;place-items:center;padding:18px;z-index:50;backdrop-filter:blur(4px)}.modal[hidden]{display:none}.modal-card{position:relative;width:min(100%,520px);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;padding:25px;box-shadow:0 25px 80px rgba(0,0,0,.28)}.modal-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:1.7rem;color:#71808d;cursor:pointer}.modal-card h2{margin:0 32px 8px 0}.modal-card p{color:#5c6e7e;line-height:1.5}.auth-tabs{display:flex;gap:7px;background:#f3f6f8;padding:5px;border-radius:12px;margin:16px 0}.auth-tabs button{flex:1;border:0;background:transparent;border-radius:9px;padding:9px;font-weight:900;color:#6b7c89;cursor:pointer}.auth-tabs button.active{background:#fff;color:var(--ink);box-shadow:0 2px 9px rgba(30,47,63,.08)}.auth-form{display:grid;gap:12px}.auth-form label{display:grid;gap:6px;font-size:.85rem;font-weight:800}.auth-form input{width:100%;border:1px solid #cdd7df;border-radius:12px;padding:12px 13px;outline:none}.auth-form input:focus{border-color:#7a98b1;box-shadow:0 0 0 3px rgba(23,50,77,.08)}.text-btn{border:0;background:none;color:#406884;text-decoration:underline;cursor:pointer;padding:0;font-size:.88rem}.form-note{font-size:.82rem;color:#71818e}.alert{padding:11px 12px;border-radius:12px;margin:10px 0;font-weight:700;font-size:.9rem}.alert.good{background:#e8f6ef;color:#18734f}.alert.bad{background:#fdebed;color:#a62831}.ranking{width:100%;border-collapse:collapse;margin-top:12px}.ranking th,.ranking td{text-align:left;padding:10px 7px;border-bottom:1px solid #edf1f4;font-size:.88rem}.ranking th{color:#71818e}.ranking td:nth-child(1){font-weight:900;width:42px}.finish-animal{display:block;width:120px;height:120px;object-fit:contain;margin:0 auto 10px}.finish-score{text-align:center;font-size:1.15rem;font-weight:900}.standalone{display:grid;place-items:center;min-height:100vh;padding:20px;background:linear-gradient(145deg,#f5f0e7,#eef4f7)}.standalone-card{width:min(100%,500px);background:#fff;border-radius:22px;padding:28px;text-align:center;box-shadow:var(--shadow)}.standalone-card>img{width:130px;height:130px;object-fit:contain}.standalone-card h1{margin:6px 0}.standalone-card p{color:#5d7181}.primary-link{display:inline-block;background:var(--accent2);color:#fff;text-decoration:none;font-weight:900;padding:12px 16px;border-radius:13px;margin-top:10px}.standalone-message{font-weight:800}
@media(max-width:720px){.app-shell{padding:10px}.topbar{grid-template-columns:auto 1fr auto}.brand span{display:none}.brand img{width:38px;height:38px}.brand strong{font-size:.9rem}.hero-card{padding:17px}.hero-animal{width:88px;height:88px}.rules-mini{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.game-card{padding:10px}.board{width:min(96vw,620px);gap:1px;border-radius:10px;padding:3px}.legend{gap:10px}.back-link{font-size:.85rem}.ghost-btn{padding:9px 10px;font-size:.84rem}}
@media(max-width:420px){.hero-card p{font-size:.9rem}.rules-mini div{font-size:.78rem;padding:9px}.stats>div{padding:8px}.modal-card{padding:20px 16px}.cell .animal{width:88%;height:88%}}