:root{color:#2f2b2a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f9f4ee;font-family:Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{background:#f9f4ee}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{border:none}#root{min-height:100vh}img{max-width:100%;display:block}.app-shell{background:linear-gradient(#9ad369 0%,#6bb65e 100%);min-height:100vh}.main-panel{place-items:center;min-height:100vh;padding:18px;display:grid}.auth-panel{background:#fffbf4e6;border:3px solid #d9be8d;border-radius:26px;width:min(100%,460px);padding:28px;box-shadow:0 18px 38px #58462c1f}.eyebrow{color:#7a5d36;letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px;font-size:.7rem;font-weight:700}.auth-panel h2,.sheep-meta h2,.detail-header h2{color:#2d2a26;margin:0 0 18px;font-size:clamp(2rem,4vw,2.7rem)}.toggle-row{background:#f1eee7;border-radius:12px;gap:12px;margin-bottom:22px;padding:6px;display:flex}.tab{color:#534b44;cursor:pointer;background:0 0;border:0;border-radius:10px;flex:1;padding:12px 14px;font-weight:700}.tab.active{background:#fff;box-shadow:0 8px 18px #4e4a4414}.auth-form,.guess-form{flex-direction:column;gap:18px;display:flex}.field-label{color:#3d352f;flex-direction:column;gap:10px;font-weight:700;display:flex}.field-label input{font:inherit;color:#2d2a26;background:#fffc;border:2px solid #e5d5bb;border-radius:12px;padding:14px 16px}.field-label input:focus{border-color:#7da884;outline:3px solid #6c976b38}.primary-button,.close-button,.settings-button,.key-button{font:inherit;cursor:pointer;border:none;font-weight:700}.primary-button{color:#f4fff2;background:linear-gradient(#7eb06f 0%,#659a58 100%);border-radius:12px;padding:14px 18px;box-shadow:0 10px 18px #4f734b33}.primary-button:disabled{opacity:.72;cursor:wait}.form-error{color:#8a3a29;background:#c2674f1a;border-radius:10px;margin:0;padding:10px 12px;font-size:.92rem}.meadow-shell{flex-direction:column;justify-content:flex-start;width:100%;min-height:calc(100vh - 36px);display:flex;position:relative}.meadow-header{justify-content:space-between;align-items:center;padding:8px 12px 0;display:flex;position:relative}.brand-tag{color:#27402d;letter-spacing:.08em;text-transform:uppercase;background:#ffffffb3;border:2px solid #34482926;border-radius:999px;justify-content:center;align-items:center;padding:10px 18px;font-size:clamp(1.8rem,2vw,2.6rem);font-weight:900;display:inline-flex}.settings-wrap{position:relative}.settings-button{color:#2b2d2a;background:#ffffffb3;border-radius:999px;padding:10px 14px;font-weight:700}.settings-menu{z-index:20;background:#fffbf4f5;border:2px solid #80664133;border-radius:14px;flex-direction:column;min-width:170px;padding:10px;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 18px 32px #3128201f}.settings-menu-item{color:#2a2a2a;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;padding:10px 12px;font-weight:700}.settings-menu-item:hover{background:#f0eadf}.meadow-field{background:linear-gradient(#a7d575 0%,#7ec65a 52%,#5faa47 100%);border-radius:28px;flex:1;place-items:center;min-height:620px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 3px #5f784847}.meadow-field:before{content:"";background:linear-gradient(#ffffff1f,#0000);position:absolute;inset:0}.hud-panel{z-index:2;background:#fff8eed1;border:3px solid #80664138;border-radius:22px;gap:16px;width:min(100%,420px);padding:16px 18px;display:grid;position:absolute;top:24px;left:24px;box-shadow:0 18px 30px #342c1c1f}.hud-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.hud-stat{background:#fff9;border:2px solid #82694829;border-radius:14px;flex-direction:column;gap:8px;padding:12px 14px;display:flex}.hud-stat span{letter-spacing:.12em;text-transform:uppercase;color:#6b5a42;font-size:.65rem}.hud-stat strong{color:#2e2d29;font-size:1.5rem}.stat-large strong{font-size:2rem}.meter{background:#e7e2d8;border-radius:999px;height:10px;position:relative;overflow:hidden}.meter-fill{border-radius:inherit;background:linear-gradient(90deg,#96c084,#6fa564);position:absolute;inset:0 auto 0 0}.sheep-button-wrap{z-index:2;justify-content:center;align-items:center;display:inline-flex;position:relative}.sheep-quick-menu{z-index:6;background:#fffbf4f5;border:2px solid #80664133;border-radius:18px;flex-direction:column;align-items:stretch;gap:10px;min-width:240px;padding:12px;display:flex;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%);box-shadow:0 16px 28px #31282024}.sheep-status-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.mini-status{background:#f4ead9e6;border-radius:12px;flex-direction:column;gap:4px;padding:8px 10px;display:flex}.mini-status span{letter-spacing:.12em;text-transform:uppercase;color:#7a5d36;font-size:.65rem}.mini-status strong{color:#2f2b27;font-size:1.1rem}.sheep-actions{gap:8px;display:flex}.quick-menu-button{color:#f4fff2;font:inherit;cursor:pointer;background:linear-gradient(#7eb06f 0%,#659a58 100%);border:0;border-radius:10px;flex:1;padding:10px 16px;font-weight:700}.quick-menu-button.secondary{color:#3a2e1a;background:linear-gradient(#f0d7aa 0%,#d7b77d 100%)}.sheep-button{z-index:2;cursor:pointer;background:0 0;border:none;padding:0;position:relative}.sheep-button.sad{transform:translateY(4px)}.sheep-placeholder{background:linear-gradient(#fff 0%,#f2f0ee 100%);border:4px solid #5f7354b3;border-radius:18px;place-items:center;width:150px;height:120px;display:grid;position:relative;box-shadow:0 16px 28px #1a1d142e}.sheep-placeholder:before{content:"";background:#fff;border:3px solid #71756733;border-radius:14px;width:82px;height:82px}.sheep-placeholder.has-sprite{box-shadow:none;background:0 0;border-color:#0000}.sheep-placeholder.has-sprite:before{visibility:hidden}.sheep-image{width:128px;height:128px;image-rendering:pixelated;visibility:hidden;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.has-sprite .sheep-image{visibility:visible}.sheep-name-tag{color:#1c1d1f;letter-spacing:.04em;opacity:0;pointer-events:none;white-space:nowrap;background:#fffffff5;border-radius:4px;padding:6px 10px;font-size:.68rem;font-weight:700;transition:opacity .12s;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.sheep-button:hover .sheep-name-tag,.sheep-button:focus-visible .sheep-name-tag{opacity:1}.sheep-info-card{color:#1d1d1d;box-sizing:border-box;background:#fff;border:2px solid #7d827d47;border-radius:10px;flex-direction:column;gap:10px;width:280px;min-width:280px;max-width:100%;padding:10px;display:flex}.info-card-header{letter-spacing:.18em;text-transform:uppercase;color:#6b6b6b;text-align:center;font-size:.7rem;font-weight:800}.sheep-name-row{align-items:center;gap:8px;width:100%;min-width:0;height:40px;display:flex}.sheep-name-input{width:100%;min-width:0;height:100%;font:inherit;color:#1d1d1d;box-sizing:border-box;background:#fff;border:2px solid #d7d7d7;border-radius:8px;flex:1;padding:0 10px}.sheep-name-input:focus{border-color:#8bb287;outline:2px solid #698c6e40}.sheep-info-name{color:#202020;overflow-wrap:anywhere;flex:1;align-items:center;height:100%;font-size:1rem;font-weight:700;display:flex}.name-edit-button{color:#2a2a2a;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;padding:0;font-weight:700;display:inline-flex}.name-edit-button.cancel{background:#e8e8e8}.close-button{color:#2b2a28;background:#ead8ba;border-radius:50%;width:36px;height:36px;font-size:1.6rem;line-height:1}.modal-backdrop{z-index:20;background:#11120f80;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.wordle-modal{background:#1b1d1f;border:3px solid #ffffff14;border-radius:24px;width:min(100%,420px);padding:20px 16px 16px;box-shadow:0 18px 40px #00000073}.modal-topbar{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;display:flex}.modal-topbar h3{color:#f5f5f5;margin:0;font-size:clamp(1.5rem,3vw,2rem)}.board-grid{background:#ffffff05;border:2px solid #ffffff14;border-radius:18px;grid-template-rows:repeat(6,minmax(0,auto));gap:8px;margin:18px 0;padding:10px;display:grid}.board-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.board-cell{aspect-ratio:1;letter-spacing:.08em;text-transform:uppercase;color:#f5f5f5;background:#121213;border:2px solid #ffffff14;border-radius:10px;place-items:center;font-size:clamp(1.2rem,2vw,1.6rem);font-weight:800;display:grid}.board-cell.correct{color:#f4fff4;background:#6aaa64;border-color:#6aaa64}.board-cell.present{color:#1f1b11;background:#c9b458;border-color:#c9b458}.board-cell.absent{color:#f3f3f3;background:#3a3a3c;border-color:#3a3a3c}.board-cell.empty{background:#ffffff05}.keyboard-block{flex-direction:column;gap:8px;margin:10px 0 18px;display:flex}.keyboard-row{justify-content:center;gap:6px;display:flex}.key-button{color:#f3f3f3;text-transform:uppercase;background:#818384;border-radius:8px;min-width:28px;height:42px;padding:8px 10px;font-size:.9rem}.key-button.wide{min-width:58px}.key-button.correct{color:#fff;background:#6aaa64}.key-button.present{color:#1f1b11;background:#c9b458}.key-button.absent{color:#f3f3f3;background:#3a3a3c}.key-button.empty{background:#818384}.wordle-hint{color:#5d554d;text-align:center;margin:0;font-size:.9rem;font-weight:600}.status-copy{color:#544b43;margin:0;font-weight:600}@media (width<=720px){.meadow-header{padding-inline:4px}.hud-panel{width:auto;left:12px;right:12px}.hud-row{grid-template-columns:1fr}.sheep-detail-panel{width:calc(100% - 18px);bottom:18px}}.streak-badge{z-index:30;color:#222;background:#fff;border:2px solid #777;align-items:center;gap:8px;padding:8px;display:flex;position:fixed;bottom:12px;right:12px}.friends-panel{color:#222;background:#fff;border:2px solid #777;margin:12px;padding:12px}.side-panel-toggle{z-index:42;background:#fffbf4;border:2px solid #80664133;border-radius:12px;position:fixed;top:12px;right:12px}.side-panel{z-index:40;visibility:hidden;background:#fffbf4;border-left:2px solid #80664133;width:min(420px,100%);height:100dvh;padding:18px 48px 18px 18px;transition:transform .18s,visibility .18s;position:fixed;inset:0 0 0 auto;overflow-y:auto;transform:translate(100%);box-shadow:-12px 0 28px #3128201f}.side-panel.is-open{visibility:visible;transform:translate(0)}.side-panel-header{justify-content:space-between;align-items:center;margin-bottom:16px;padding-right:48px;display:flex}.side-panel-header h2{margin:0}.side-panel-tabs{gap:4px}.side-panel-tabs .tab{min-width:0;padding:10px 6px}.side-panel .friends-panel{margin:0}.side-panel input,.side-panel textarea{min-width:0;max-width:100%}.side-panel li{overflow-wrap:anywhere}@media (width<=480px){.side-panel{width:100%;padding-left:12px}}@media (prefers-reduced-motion:reduce){.side-panel{transition:none}}.friends-panel summary{cursor:pointer;font-weight:700}.friends-panel form,.friends-panel label{flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;display:flex}.friends-panel input,.friends-panel button{font:inherit;padding:8px}.chat-panel{background:#fff;border:2px solid #777;margin-top:12px;padding:12px}.chat-messages{max-height:300px;padding-left:24px;overflow-y:auto}.chat-messages li{overflow-wrap:anywhere;margin-block:8px}.chat-messages span{white-space:pre-wrap}.chat-messages time{font-size:.75rem;display:block}.chat-panel textarea{width:min(100%,400px);min-height:60px;font:inherit;padding:8px}.streak-icon{color:#2b2a28;background:#ead8ba;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:inline-flex}.streak-icon svg{width:22px;height:22px}@media (width<=768px){html,body,#root,.app-shell{max-width:100%;min-height:100dvh}.main-panel{min-height:100dvh;padding:12px}.auth-panel{padding:20px}.field-label input{width:100%;min-width:0;font-size:16px}button,input,textarea,summary{min-height:44px}button{min-width:44px}.meadow-shell{min-width:0;min-height:calc(100dvh - 24px)}.meadow-header{min-height:60px;padding:0 56px 12px 0}.brand-tag{padding:8px 12px;font-size:clamp(1.2rem,5vw,1.8rem)}.meadow-field{border-radius:18px;min-height:660px}.hud-panel{width:auto;padding:12px;top:12px;left:12px;right:12px}.hud-row{grid-template-columns:repeat(2,minmax(0,1fr))}.hud-stat{padding:10px}.hud-stat span,.mini-status span{letter-spacing:.06em;font-size:.75rem}.stat-large strong{font-size:1.5rem}.sheep-button-wrap{margin-top:240px}.sheep-quick-menu{width:min(310px,100vw - 48px);min-width:0}.sheep-info-card{width:100%;min-width:0}.sheep-name-row{height:44px}.name-edit-button,.close-button{flex-shrink:0;width:44px;height:44px}.app-shell:has(.wordle-modal){height:100dvh;min-height:0;overflow:hidden}body:has(.wordle-modal){overflow:hidden}.modal-backdrop{z-index:50;height:100dvh;padding:0;display:block;overflow:hidden}.wordle-modal{--key-height:clamp(44px, 7dvh, 58px);--key-gap:4px;width:100%;min-width:0;height:100dvh;padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));border:0;border-radius:0;flex-direction:column;margin:0;display:flex}.wordle-modal .modal-topbar{flex-shrink:0;align-items:center;min-height:44px;margin-bottom:8px}.wordle-modal .eyebrow{display:none}.modal-topbar h3{max-width:calc(100vw - 180px);font-size:clamp(1.1rem,4.5vw,1.4rem);line-height:1.2}.board-grid{width:min(100%, 320px, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 3 * var(--key-height) - 150px) * .8));background:0 0;border:0;border-radius:0;flex-shrink:0;gap:4px;margin:auto;padding:0}.board-row{gap:4px}.board-cell{border-radius:4px;min-width:0;font-size:clamp(1.1rem,4dvh,1.8rem)}.keyboard-block{flex-shrink:0;order:2;gap:6px;width:100%;margin:auto 0 0}.keyboard-row{gap:var(--key-gap);display:flex}.keyboard-row:nth-child(2):before,.keyboard-row:nth-child(2):after{content:"";flex:.5 1 0}.key-button,.key-button.wide{min-width:0;height:var(--key-height);touch-action:manipulation;border-radius:4px;flex:1 1 0;padding:0;font-size:clamp(.8rem,3.4vw,1rem);font-weight:800}.key-button.wide{flex-grow:1.5;font-size:clamp(.6rem,2.6vw,.75rem)}.keyboard-row:last-child .key-button:last-child{font-size:clamp(1.1rem,5vw,1.4rem)}.key-button.empty{color:#121213;background:#d3d6da}.guess-form{flex-shrink:0;order:1;gap:0;margin-block:4px}.guess-form .wordle-hint,.guess-form .primary-button{display:none}.wordle-modal .form-error{color:#ffb4a2}.wordle-modal .status-copy{color:#e1ddd7}.status-actions{margin-top:12px}.app-shell:has(.wordle-modal) .streak-badge{top:calc(12px + env(safe-area-inset-top));gap:4px;padding:4px;font-size:.7rem;bottom:auto;right:64px}.app-shell:has(.wordle-modal) .streak-icon{width:24px;height:24px}.app-shell:has(.wordle-modal) .streak-icon svg{width:16px;height:16px}.side-panel{padding:12px 12px calc(84px + env(safe-area-inset-bottom))}.side-panel-header{padding-right:52px}.side-panel input,.side-panel textarea{font-size:16px}.friends-panel,.chat-panel{min-width:0;padding:10px}.friends-panel form,.friends-panel label{align-items:stretch}.friends-panel input{width:100%}.friends-panel summary{align-items:center;display:flex}.streak-badge{bottom:max(8px, env(safe-area-inset-bottom));z-index:60;padding:6px;font-size:.875rem;right:8px}}