:root { --bg:#171025; --panel:#251b34; --panel2:#302340; --cream:#fff9e8; --ink:#3b2b24; --muted:#a69aaf; --orange:#ff9e32; --yellow:#ffd358; --green:#69cf76; --mint:#80e0c2; --red:#ec6170; --purple:#9b71d5; --line:rgba(255,255,255,.1); }
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; min-width:320px; min-height:100vh; color:#fffaf0; font-family:Inter,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; background:radial-gradient(circle at 8% 5%,rgba(255,180,61,.12),transparent 28rem),radial-gradient(circle at 92% 82%,rgba(155,113,213,.15),transparent 32rem),var(--bg); }
button { font:inherit; }
button:focus-visible { outline:3px solid white; outline-offset:3px; }
.sun-glow { position:fixed; z-index:-1; top:-12rem; right:-8rem; width:32rem; aspect-ratio:1; border-radius:50%; background:#ffbf3e; opacity:.12; filter:blur(100px); pointer-events:none; }
.app-shell { width:min(1440px,calc(100% - 30px)); margin:auto; padding:22px 0 18px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:16px; }
.brand > span,.tiny-label { color:var(--orange); font-size:.6rem; font-weight:950; letter-spacing:.22em; }
.brand h1 { margin:3px 0 0; font-size:clamp(1.5rem,3vw,2.35rem); line-height:1; letter-spacing:-.06em; }
.brand h1 span { color:var(--yellow); text-shadow:0 0 22px rgba(255,211,88,.45); }
.top-actions { display:flex; gap:9px; }
.round-button,.help-button { height:42px; border:1px solid var(--line); border-radius:13px; color:white; background:rgba(255,255,255,.07); cursor:pointer; }
.round-button { width:42px; font-weight:900; }
.round-button.muted { opacity:.45; text-decoration:line-through; }
.help-button { padding:0 17px; font-weight:850; }
.resource-strip { display:grid; grid-template-columns:.65fr 1fr 1fr 1.35fr; gap:8px; margin-bottom:12px; }
.resource-strip > div { min-height:64px; padding:11px 15px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035)); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.resource-strip span { display:block; color:var(--muted); font-size:.52rem; font-weight:900; letter-spacing:.12em; }
.resource-strip strong { display:block; margin-top:5px; font-size:1.2rem; font-variant-numeric:tabular-nums; }
.resource-strip strong b { color:var(--yellow); font-size:.7rem; }
.resource-strip strong i { font-style:normal; }.money-resource > small { display:block; margin-top:2px; color:var(--muted); font-size:.43rem; font-weight:800; }.money-resource > small i { color:var(--red); font-style:normal; }
.legend-progress { border-color:rgba(255,211,88,.25)!important; background:linear-gradient(135deg,rgba(255,211,88,.1),rgba(255,255,255,.03))!important; }
.legend-progress strong { color:var(--yellow); }
.main-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:12px; align-items:start; }
.left-column { min-width:0; }
.chicken-card { display:grid; grid-template-columns:minmax(350px,1.25fr) minmax(330px,.9fr); overflow:hidden; min-height:335px; border:1px solid var(--line); border-radius:24px; background:var(--panel); box-shadow:0 22px 60px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.08); }
.farm-scene { position:relative; overflow:hidden; min-height:335px; background:linear-gradient(#9adbf3 0 55%,#83cc72 55% 78%,#5eaa58 78%); }
.farm-scene::after { content:""; position:absolute; inset:auto 0 0; height:25%; opacity:.16; background:repeating-linear-gradient(90deg,transparent 0 32px,#285f2c 32px 34px); transform:skewY(-3deg); }
.cloud { position:absolute; width:75px; height:22px; border-radius:999px; background:rgba(255,255,255,.7); }
.cloud::before,.cloud::after { content:""; position:absolute; bottom:0; border-radius:50%; background:inherit; }
.cloud::before { left:12px; width:34px; height:34px; }.cloud::after { right:10px; width:27px; height:27px; }
.cloud-a { left:10%; top:14%; }.cloud-b { right:9%; top:25%; transform:scale(.7); }
.mountains { position:absolute; inset:28% 0 auto; height:29%; opacity:.28; background:linear-gradient(145deg,transparent 40%,#406f62 41% 58%,transparent 59%) 0 0/190px 100%; }
.coop { position:absolute; right:8%; bottom:18%; width:105px; height:88px; background:#b95a34; border:5px solid #74351f; }
.coop::before { content:""; position:absolute; left:-14px; top:-49px; width:125px; height:55px; background:#703520; clip-path:polygon(50% 0,100% 100%,0 100%); }
.coop i { position:absolute; left:31px; bottom:0; width:43px; height:58px; background:#2e241f; border-radius:24px 24px 0 0; }.coop b { position:absolute; right:7px; top:7px; width:18px; height:18px; background:#ffe09b; border:3px solid #71371f; }
.chicken-avatar { position:absolute; z-index:3; left:45%; bottom:15%; width:148px; height:148px; display:grid; place-items:center; transform:translateX(-50%); animation:chicken-idle 2.2s ease-in-out infinite; }
.chicken-emoji { position:relative; z-index:2; font-size:7.5rem; line-height:1; filter:drop-shadow(0 12px 7px rgba(37,47,27,.3)); }
.chicken-shadow { position:absolute; z-index:2; left:45%; bottom:12%; width:115px; height:24px; border-radius:50%; background:rgba(34,56,26,.3); transform:translateX(-50%); filter:blur(3px); }
.trait-aura { position:absolute; inset:6px; border:2px dashed rgba(255,255,255,.45); border-radius:50%; opacity:0; animation:spin 9s linear infinite; }
.chicken-avatar.trait-active .trait-aura { opacity:1; }
.chicken-avatar.sick { filter:grayscale(.45); animation:chicken-sick .7s ease-in-out infinite; }
.scene-badge { position:absolute; z-index:4; left:15px; bottom:14px; padding:8px 12px; border-radius:999px; color:#31532a; background:rgba(255,255,255,.82); backdrop-filter:blur(5px); font-size:.62rem; font-weight:900; }
@keyframes chicken-idle { 50% { transform:translateX(-50%) translateY(-7px) rotate(1deg); } }
@keyframes chicken-sick { 50% { transform:translateX(-50%) rotate(-4deg); } }
@keyframes spin { to { transform:rotate(360deg); } }
.chicken-summary { padding:24px; }
.identity-row { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.identity-row h2 { margin:4px 0 3px; font-size:clamp(1.7rem,3vw,2.5rem); letter-spacing:-.06em; }
.identity-row p { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.identity-row p b,.identity-row p span { padding:4px 7px; border-radius:7px; font-size:.55rem; }
.identity-row p b { color:#4c3218; background:var(--yellow); }.identity-row p span { color:#d8cce1; background:rgba(255,255,255,.07); }
.level-badge { display:grid; place-items:center; width:64px; aspect-ratio:1; border:1px solid rgba(255,211,88,.32); border-radius:17px; background:rgba(255,211,88,.07); }
.level-badge span { color:var(--muted); font-size:.5rem; font-weight:900; }.level-badge strong { color:var(--yellow); font-size:1.65rem; line-height:1; }
.xp-wrap { margin-top:20px; }.xp-wrap > div:first-child { display:flex; justify-content:space-between; color:var(--muted); font-size:.57rem; font-weight:800; }
.bar { height:7px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); }
.bar i { display:block; width:50%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--red),var(--orange)); transition:width .35s; }
.xp-bar { margin-top:7px; }.xp-bar i { background:linear-gradient(90deg,var(--purple),#d087e8); }
.condition-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px 12px; margin-top:22px; }
.condition-grid > div { display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px; }
.condition-grid span { color:var(--muted); font-size:.55rem; font-weight:800; }.condition-grid strong { font-size:.7rem; }.condition-grid .bar { grid-column:1/-1; height:6px; }
.condition-grid .energy i { background:linear-gradient(90deg,#ef9b42,var(--yellow)); }.condition-grid .clean i { background:linear-gradient(90deg,#54bde0,#8beae1); }.condition-grid .mood i { background:linear-gradient(90deg,#c870d4,#f08fc9); }
.game-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:10px 0; }
.game-tabs button { height:57px; border:1px solid var(--line); border-radius:15px; color:var(--muted); background:rgba(255,255,255,.045); font-weight:900; cursor:pointer; transition:.2s; }.game-tabs button span { margin-right:6px; }.game-tabs button.active { color:#392516; border-color:rgba(255,211,88,.45); background:linear-gradient(145deg,#ffe792,var(--yellow)); box-shadow:0 8px 25px rgba(255,211,88,.12); }
.tab-panel { padding:22px; border:1px solid var(--line); border-radius:22px; background:rgba(37,27,52,.92); box-shadow:inset 0 1px rgba(255,255,255,.06); }.tab-panel.hidden { display:none; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; }.section-heading h3 { margin:3px 0 0; font-size:1.15rem; }.section-heading > small { color:var(--muted); font-size:.56rem; }
.action-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.action-card { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:11px; min-height:78px; padding:10px 13px; border:1px solid var(--line); border-radius:14px; color:white; background:rgba(255,255,255,.045); text-align:left; cursor:pointer; transition:.18s; }.action-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); }.action-card:disabled { opacity:.36; cursor:not-allowed; transform:none; }
.action-card > b { display:grid; place-items:center; width:43px; aspect-ratio:1; border-radius:12px; background:rgba(255,255,255,.08); font-size:1.35rem; }.action-card span strong,.action-card span small { display:block; }.action-card span strong { font-size:.73rem; }.action-card span small { margin-top:4px; color:var(--muted); font-size:.52rem; }.action-card em { color:var(--yellow); font-size:.54rem; font-style:normal; font-weight:900; white-space:nowrap; }
.growth-card,.diary-card,.roster-section { margin-top:13px; padding:18px; border:1px solid var(--line); border-radius:17px; background:rgba(10,8,24,.18); }
.growth-head { display:flex; justify-content:space-between; align-items:center; }.growth-head h3 { margin:3px 0 0; font-size:1rem; }.point-badge { padding:7px 10px; border-radius:10px; color:var(--muted); background:rgba(255,255,255,.06); font-size:.53rem; font-weight:900; }.point-badge strong { margin-left:5px; color:var(--yellow); font-size:1rem; }
.stat-list { margin-top:13px; }.stat-list > div { display:grid; grid-template-columns:38px 1fr 45px 48px; align-items:center; gap:9px; min-height:57px; border-bottom:1px solid var(--line); }.stat-list > div:last-child { border:0; }.stat-icon { display:grid; place-items:center; width:34px; aspect-ratio:1; border-radius:10px; background:rgba(255,255,255,.07); }.stat-list p { margin:0; }.stat-list p b,.stat-list p small { display:block; }.stat-list p b { font-size:.66rem; }.stat-list p small { margin-top:2px; color:var(--muted); font-size:.49rem; }.stat-list > div > strong { font-size:1.05rem; text-align:center; }.stat-list button { height:31px; border:1px solid rgba(255,211,88,.28); border-radius:9px; color:#3b2814; background:var(--yellow); font-size:.63rem; font-weight:950; cursor:pointer; }.stat-list button:disabled { opacity:.28; cursor:not-allowed; }
.potential-line { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--line); }.potential-line span,.potential-line b { color:var(--muted); font-size:.53rem; }.potential-line .bar i { background:linear-gradient(90deg,var(--green),var(--mint)); }
.log-list { display:flex; flex-direction:column; gap:6px; max-height:170px; overflow:auto; margin-top:13px; }.log-item { display:grid; grid-template-columns:56px 1fr; gap:9px; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.035); font-size:.57rem; line-height:1.5; }.log-item time { color:var(--orange); font-weight:900; }.log-item.important { border:1px solid rgba(255,211,88,.2); background:rgba(255,211,88,.05); }
.race-list { display:flex; flex-direction:column; gap:9px; margin-top:16px; }.race-card { display:grid; grid-template-columns:52px 1fr auto 115px; align-items:center; gap:13px; min-height:88px; padding:11px 13px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.035); }.race-rank { display:grid; place-items:center; width:48px; aspect-ratio:1; border-radius:14px; color:#2f2316; background:var(--yellow); font-size:1.4rem; font-weight:1000; }.race-card > div:nth-child(2) span { color:var(--orange); font-size:.5rem; font-weight:900; letter-spacing:.1em; }.race-card h4 { margin:3px 0; font-size:.86rem; }.race-card p { margin:0; color:var(--muted); font-size:.52rem; }.race-card > strong { color:var(--yellow); font-size:.62rem; }.race-card button { height:39px; border:0; border-radius:10px; color:#2b1d0e; background:linear-gradient(145deg,#ffe996,var(--yellow)); font-size:.58rem; font-weight:950; cursor:pointer; }.race-card button:disabled { color:#7d7184; background:#332b3b; cursor:not-allowed; }.race-card.won { border-color:rgba(105,207,118,.35); }.race-card.won::after { content:"WIN"; color:var(--green); font-size:.5rem; font-weight:950; }.race-card.won { grid-template-columns:52px 1fr auto 90px 28px; }.race-card.legendary { background:linear-gradient(135deg,rgba(255,211,88,.1),rgba(155,113,213,.08)); border-color:rgba(255,211,88,.26); }.race-card.legendary .race-rank { color:white; background:linear-gradient(145deg,#c89b31,#8f5727); box-shadow:0 0 18px rgba(255,211,88,.2); }.race-card.locked { filter:grayscale(.65); opacity:.68; }
.race-tip,.breeding-note { display:flex; align-items:center; gap:13px; margin-top:13px; padding:13px; border:1px solid rgba(128,224,194,.2); border-radius:14px; background:rgba(128,224,194,.05); }.race-tip > b,.breeding-note > span { font-size:1.7rem; }.race-tip p,.breeding-note p { margin:0; }.race-tip strong,.race-tip span,.breeding-note strong,.breeding-note small { display:block; }.race-tip strong,.breeding-note strong { font-size:.65rem; }.race-tip span,.breeding-note small { margin-top:4px; color:var(--muted); font-size:.53rem; line-height:1.55; }
.bloodline-guide { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:14px; }.bloodline-guide article { min-width:0; padding:10px 8px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.035); }.bloodline-guide b,.bloodline-guide span,.bloodline-guide small { display:block; }.bloodline-guide b { font-size:.56rem; white-space:nowrap; }.bloodline-guide span { margin-top:7px; color:white; font-size:.48rem; font-weight:850; }.bloodline-guide small { margin-top:2px; color:var(--muted); font-size:.43rem; }.bloodline-guide .normal b { color:var(--yellow); }.bloodline-guide .gale b { color:#63d6ff; }.bloodline-guide .hardy b { color:var(--green); }.bloodline-guide .spirit b { color:var(--red); }.bloodline-guide .prodigy b { color:#bd92ff; }
.mate-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:15px; }.mate-card { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.035); }.mate-portrait { display:grid; place-items:center; height:90px; background:linear-gradient(145deg,rgba(255,211,88,.12),rgba(155,113,213,.1)); font-size:3.7rem; }.mate-info { padding:12px; }.mate-info h4 { margin:0; font-size:.77rem; }.mate-info > span { display:block; margin-top:3px; color:var(--orange); font-size:.5rem; font-weight:850; }.mate-stats { display:flex; justify-content:space-between; margin:10px 0; color:var(--muted); font-size:.48rem; }.mate-info p { min-height:31px; margin:0 0 10px; color:var(--muted); font-size:.5rem; line-height:1.5; }.mate-info button { width:100%; height:35px; border:0; border-radius:9px; color:#312113; background:var(--yellow); font-size:.55rem; font-weight:950; cursor:pointer; }.mate-info button:disabled { color:#766d7a; background:#3b3243; cursor:not-allowed; }
.roster-list { display:flex; flex-direction:column; gap:7px; margin-top:12px; }.roster-item { display:grid; grid-template-columns:42px 1fr auto auto; align-items:center; gap:10px; padding:9px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03); }.roster-item.active { border-color:rgba(255,211,88,.38); background:rgba(255,211,88,.055); }.roster-item > span { font-size:1.7rem; }.roster-item p { margin:0; }.roster-item p strong,.roster-item p small { display:block; }.roster-item p strong { font-size:.65rem; }.roster-item p small { margin-top:2px; color:var(--muted); font-size:.49rem; }.roster-stats { color:var(--muted); font-size:.48rem; }.roster-item button { height:30px; border:1px solid var(--line); border-radius:8px; color:white; background:rgba(255,255,255,.07); font-size:.5rem; cursor:pointer; }.roster-item button:disabled { color:var(--yellow); cursor:default; }
.right-column { display:flex; flex-direction:column; gap:10px; }.right-column > section,.save-card { border:1px solid var(--line); border-radius:18px; background:rgba(37,27,52,.92); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.goal-card { padding:18px; text-align:center; }.trophy { margin:8px 0 3px; font-size:3.2rem; filter:drop-shadow(0 8px 12px rgba(255,179,47,.25)); }.goal-card h3 { margin:0; font-size:1rem; }.goal-card > p { margin:6px 0 15px; color:var(--muted); font-size:.55rem; }.goal-steps { text-align:left; }.goal-steps > div { display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:8px; min-height:38px; border-top:1px solid var(--line); }.goal-steps i { display:grid; place-items:center; width:22px; aspect-ratio:1; border-radius:7px; color:#8e8398; background:rgba(255,255,255,.06); font-size:.5rem; font-style:normal; font-weight:900; }.goal-steps span { font-size:.55rem; }.goal-steps b { color:#7d7286; font-size:.48rem; }.goal-steps .done i { color:#26351c; background:var(--green); }.goal-steps .done b { color:var(--green); }
.health-card { padding:17px; }.health-heading { display:flex; align-items:center; gap:11px; }.health-heading h3 { margin:2px 0 0; font-size:.92rem; }.health-icon { display:grid; place-items:center; width:40px; aspect-ratio:1; border-radius:12px; color:#15371c; background:var(--green); font-weight:1000; }.health-card.sick .health-icon { color:white; background:var(--red); }.health-card > p { margin:12px 0; color:var(--muted); font-size:.55rem; line-height:1.6; }.risk-row { display:flex; justify-content:space-between; padding-top:10px; border-top:1px solid var(--line); font-size:.56rem; }.risk-row strong { color:var(--green); }.health-card.sick .risk-row strong { color:var(--red); }.treatment-buttons { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }.treatment-buttons.hidden { display:none; }.treatment-buttons button { min-height:43px; border:1px solid var(--line); border-radius:10px; color:white; background:rgba(255,255,255,.07); font-size:.54rem; font-weight:850; cursor:pointer; }.treatment-buttons button small { display:block; margin-top:2px; color:var(--muted); font-size:.46rem; }.treatment-buttons button:disabled { opacity:.35; cursor:not-allowed; }
.trait-card { padding:17px; text-align:center; }.trait-symbol { display:grid; place-items:center; width:55px; aspect-ratio:1; margin:11px auto 8px; border:1px solid rgba(155,113,213,.35); border-radius:50%; color:#d7b8ff; background:rgba(155,113,213,.09); font-size:1.5rem; box-shadow:0 0 20px rgba(155,113,213,.1); }.trait-card h3 { margin:0; font-size:.82rem; }.trait-card p { margin:7px 0 0; color:var(--muted); font-size:.52rem; line-height:1.55; }
.loan-card { padding:17px; }.loan-heading { display:flex; align-items:center; gap:11px; }.loan-heading > span { display:grid; place-items:center; width:42px; aspect-ratio:1; border-radius:12px; background:rgba(255,211,88,.12); font-size:1.35rem; }.loan-heading h3 { margin:2px 0 0; font-size:.9rem; }.loan-card > p { margin:11px 0; color:var(--muted); font-size:.52rem; line-height:1.55; }.loan-meter { padding:10px; border:1px solid var(--line); border-radius:11px; background:rgba(0,0,0,.15); }.loan-meter > div:first-child { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; font-size:.51rem; }.loan-meter strong { color:#ffb668; }.loan-meter strong b { font-size:.85rem; }.loan-meter .bar i { width:0; background:linear-gradient(90deg,var(--yellow),var(--red)); }.loan-buttons { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }.loan-buttons button { min-height:46px; border:1px solid rgba(255,211,88,.24); border-radius:10px; color:#392711; background:linear-gradient(145deg,#ffe99a,var(--yellow)); font-size:.54rem; font-weight:950; cursor:pointer; }.loan-buttons button:last-child { color:white; border-color:var(--line); background:rgba(255,255,255,.07); }.loan-buttons button small { display:block; margin-top:2px; color:inherit; opacity:.65; font-size:.42rem; }.loan-buttons button:disabled { color:#746a78; border-color:var(--line); background:#352d3d; cursor:not-allowed; }.loan-card.maxed { border-color:rgba(236,97,112,.4); }.loan-card.maxed .loan-heading > span { background:rgba(236,97,112,.14); }
.save-card { display:flex; align-items:center; gap:11px; width:100%; padding:13px 16px; color:white; text-align:left; cursor:pointer; }.save-card > span { font-size:1.5rem; }.save-card p { margin:0; }.save-card strong,.save-card small { display:block; }.save-card strong { font-size:.65rem; }.save-card small { margin-top:2px; color:var(--muted); font-size:.48rem; }.reset-button { border:0; color:#6e6378; background:transparent; font-size:.52rem; cursor:pointer; }.reset-button:hover { color:var(--red); }
.modal-backdrop { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:20px; background:rgba(12,8,20,.82); backdrop-filter:blur(10px); transition:opacity .25s; }.modal-backdrop.hidden { visibility:hidden; opacity:0; pointer-events:none; }
.modal-card { position:relative; width:min(680px,100%); max-height:calc(100vh - 35px); overflow:auto; padding:34px; border:1px solid rgba(255,255,255,.16); border-radius:25px; text-align:center; background:linear-gradient(145deg,#392848,#1d152b 72%); box-shadow:0 30px 100px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.09); }.modal-card h2 { margin:5px 0; font-size:clamp(1.7rem,4vw,2.8rem); letter-spacing:-.05em; }.modal-card > p { margin:11px auto 20px; max-width:520px; color:var(--muted); font-size:.7rem; line-height:1.7; }.modal-close { position:absolute; right:15px; top:15px; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; color:white; background:rgba(255,255,255,.07); font-size:1.2rem; cursor:pointer; }
.welcome-chicken { margin:8px 0; font-size:5.5rem; animation:chicken-idle 2s ease infinite; }.welcome-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:8px; margin:20px 0; }.welcome-flow div { padding:11px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04); }.welcome-flow b,.welcome-flow span { display:block; }.welcome-flow b { color:var(--orange); font-size:.6rem; }.welcome-flow span { margin-top:3px; font-size:.65rem; font-weight:850; }.welcome-flow i { color:#74677e; font-size:1.5rem; font-style:normal; }
.primary-button { width:100%; min-height:58px; border:0; border-radius:13px; color:#35230e; background:linear-gradient(145deg,#ffea94,var(--yellow)); box-shadow:0 7px 0 #aa6a24,0 14px 28px rgba(255,177,49,.17); font-weight:950; cursor:pointer; transition:.12s; }.primary-button:active { transform:translateY(4px); box-shadow:0 3px 0 #aa6a24; }
.help-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0; text-align:left; }.help-grid > div { padding:14px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.04); }.help-grid b { font-size:1.6rem; }.help-grid strong { display:block; margin-top:7px; font-size:.68rem; }.help-grid p { margin:5px 0 0; color:var(--muted); font-size:.54rem; line-height:1.55; }
.race-modal-card { width:min(900px,100%); }
.race-power-preview { display:grid; grid-template-columns:1fr 48px 1fr; align-items:center; gap:9px; margin:17px auto 10px; max-width:620px; }.race-power-preview > div { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 12px; padding:11px 14px; border:1px solid var(--line); border-radius:13px; text-align:left; background:rgba(255,255,255,.04); }.race-power-preview .player-power { border-color:rgba(255,211,88,.4); background:rgba(255,211,88,.08); }.race-power-preview > b { color:var(--orange); font-size:.72rem; }.race-power-preview span { color:var(--muted); font-size:.52rem; font-weight:850; }.race-power-preview strong { grid-row:span 2; color:white; font-size:1.45rem; }.race-power-preview .player-power strong { color:var(--yellow); }.race-power-preview small { color:var(--muted); font-size:.45rem; }
.race-live-board { display:grid; grid-template-columns:150px 1fr; gap:7px; margin-bottom:8px; }.race-live-board > div { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:42px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.18); }.race-live-board span { color:var(--muted); font-size:.48rem; font-weight:850; }.race-live-board strong { font-size:.68rem; }.race-live-board > div:first-child strong { color:var(--yellow); font-size:1rem; }
.track { --start-x:135px; position:relative; overflow:hidden; margin:8px 0 10px; padding:12px 0; border:4px solid #8c5d31; border-radius:13px; background:repeating-linear-gradient(#be8a55 0 55px,#a87342 55px 58px); box-shadow:inset 0 0 24px rgba(69,35,14,.34); }.track::before { content:""; position:absolute; inset:0; opacity:.16; background:repeating-linear-gradient(90deg,transparent 0 55px,#fff 55px 57px); }.start-label,.finish-label { position:absolute; z-index:3; top:4px; padding:3px 6px; border-radius:5px; color:white; background:rgba(51,31,18,.82); font-size:.42rem; font-weight:950; letter-spacing:.08em; }.start-label { left:var(--start-x); transform:translateX(-22px); }.finish-label { right:24px; }.lane { position:relative; height:58px; display:flex; align-items:center; border-bottom:1px dashed rgba(255,255,255,.38); }.lane:last-child { border:0; }.lane.player-lane { background:linear-gradient(90deg,rgba(255,211,88,.22),rgba(255,211,88,.04) 55%,transparent); box-shadow:inset 4px 0 var(--yellow); }.lane-number { position:absolute; z-index:2; left:8px; width:23px; height:23px; display:grid; place-items:center; border-radius:6px; color:#392817; background:rgba(255,255,255,.78); font-size:.55rem; font-weight:900; }.lane-name { position:absolute; z-index:2; left:38px; width:88px; overflow:hidden; color:#3d2817; font-size:.5rem; text-align:left; text-overflow:ellipsis; white-space:nowrap; }.player-lane .lane-name { color:#fff7c2; text-shadow:0 1px 2px #573813; }.race-runner { position:absolute; z-index:2; left:var(--start-x); font-size:2.25rem; font-style:normal; transform:scaleX(-1); filter:drop-shadow(0 5px 3px rgba(0,0,0,.25)); }.player-runner { --duration:var(--player-time,2.25s); filter:drop-shadow(0 0 7px #fff3a2) drop-shadow(0 5px 3px rgba(0,0,0,.28)); }.player-runner::after { content:"YOU"; position:absolute; left:50%; bottom:-8px; padding:1px 4px; border-radius:5px; color:#432e13; background:var(--yellow); font-size:.31rem; font-weight:1000; transform:translateX(-50%) scaleX(-1); }.rival-a { --duration:var(--rival-a-time,2.42s); }.rival-b { --duration:var(--rival-b-time,2.5s); }.rival-c { --duration:var(--rival-c-time,2.6s); }.track.running .race-runner { animation:race-run var(--duration,2.4s) cubic-bezier(.18,.68,.2,1) forwards; animation-delay:var(--delay,0s); }.finish-line { position:absolute; z-index:1; right:42px; top:0; bottom:0; width:15px; background:repeating-conic-gradient(#fff 0 25%,#222 0 50%) 0/15px 15px; box-shadow:0 0 0 2px rgba(255,255,255,.3); }.race-countdown { position:absolute; z-index:8; left:50%; top:50%; width:92px; height:92px; display:grid; place-items:center; border:4px solid white; border-radius:50%; color:#392310; background:linear-gradient(145deg,#fff7b8,var(--yellow)); box-shadow:0 8px 35px rgba(0,0,0,.45); font-size:2.8rem; font-weight:1000; transform:translate(-50%,-50%); animation:count-pop .35s ease; }.race-countdown.go { width:130px; border-radius:18px; color:white; background:linear-gradient(145deg,var(--green),#248f57); }.race-countdown.hidden { display:none; }
@keyframes count-pop { from { opacity:0; transform:translate(-50%,-50%) scale(.45); } } @keyframes race-run { 0% { left:var(--start-x); } 18% { transform:scaleX(-1) translateY(-5px) rotate(-3deg); } 45% { transform:scaleX(-1) translateY(4px) rotate(3deg); } 100% { left:calc(100% - 83px); transform:scaleX(-1); } }
.race-comment { min-height:50px; display:grid; place-items:center; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:10px; color:#fff7d4; background:rgba(0,0,0,.22); font-size:.68rem; font-weight:900; }.race-result { margin-top:12px; padding:15px; border:1px solid rgba(255,211,88,.25); border-radius:14px; background:rgba(0,0,0,.18); }.race-result.hidden { display:none; }.race-result > strong { display:block; color:var(--yellow); font-size:1.6rem; }.race-score-compare { display:grid; grid-template-columns:1fr 30px 1fr; align-items:center; gap:8px; max-width:360px; margin:11px auto; }.race-score-compare span { padding:8px; border-radius:10px; background:rgba(255,255,255,.06); }.race-score-compare small,.race-score-compare b { display:block; }.race-score-compare small { color:var(--muted); font-size:.46rem; }.race-score-compare b { margin-top:2px; font-size:1.3rem; }.race-score-compare span:first-child b { color:var(--yellow); }.race-score-compare i { color:var(--muted); font-size:.5rem; font-style:normal; }.race-result > p { margin:7px 0; color:var(--muted); font-size:.58rem; }.race-result > em { display:block; margin:9px 0 15px; padding:8px; border-radius:8px; color:#fff4bf; background:rgba(255,211,88,.08); font-size:.52rem; font-style:normal; line-height:1.5; }
.egg-animation { margin:8px; font-size:5rem; animation:egg-wobble .8s ease-in-out infinite; }.breed-modal-card > p { white-space:pre-line; }.breed-modal-card .primary-button { margin-top:12px; }.champion-trophy { font-size:6rem; animation:trophy-pop 1s ease infinite alternate; }.champion-modal-card { border-color:rgba(255,211,88,.45); background:radial-gradient(circle at 50% 20%,rgba(255,211,88,.22),transparent 40%),linear-gradient(145deg,#4a3343,#1e152b); }.champion-modal-card > strong { display:block; margin:-7px 0 20px; color:var(--yellow); font-size:1.35rem; }
@keyframes egg-wobble { 25% { transform:rotate(-9deg); } 75% { transform:rotate(9deg); } } @keyframes trophy-pop { to { transform:scale(1.08) rotate(2deg); } }
.toast { position:fixed; z-index:60; left:50%; bottom:24px; max-width:calc(100% - 32px); padding:12px 20px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:white; background:rgba(40,28,53,.96); box-shadow:0 14px 45px rgba(0,0,0,.45); font-size:.64rem; font-weight:900; transform:translate(-50%,25px); opacity:0; pointer-events:none; transition:.3s; }.toast.show { transform:translate(-50%,0); opacity:1; }
.confetti-layer { position:fixed; z-index:55; inset:0; overflow:hidden; pointer-events:none; }.confetti { position:absolute; top:-25px; width:9px; height:15px; border-radius:2px; animation:confetti-fall var(--fall) linear forwards; } @keyframes confetti-fall { to { transform:translate(var(--drift),110vh) rotate(850deg); } }
@media (max-width:1080px) { .main-layout { grid-template-columns:1fr; }.right-column { display:grid; grid-template-columns:1fr 1fr; }.goal-card { grid-row:span 2; }.reset-button { text-align:left; } }
@media (max-width:760px) { .app-shell { width:calc(100% - 16px); padding-top:12px; }.resource-strip { grid-template-columns:1fr 1fr; }.chicken-card { grid-template-columns:1fr; }.farm-scene { min-height:285px; }.chicken-summary { padding:18px; }.action-grid { grid-template-columns:1fr; }.race-card { grid-template-columns:42px 1fr; }.race-rank { width:40px; }.race-card > strong,.race-card > button { grid-column:2; }.race-card > button { width:100%; }.race-card.won { grid-template-columns:42px 1fr; }.race-card.won::after { position:absolute; right:16px; }.race-card { position:relative; }.bloodline-guide { grid-template-columns:repeat(2,1fr); }.mate-list { grid-template-columns:1fr; }.mate-card { display:grid; grid-template-columns:110px 1fr; }.mate-portrait { height:100%; }.right-column { grid-template-columns:1fr; }.goal-card { grid-row:auto; }.modal-card { padding:28px 15px; }.help-grid { grid-template-columns:1fr; }.game-tabs button { font-size:.72rem; }.tab-panel { padding:15px; } }
@media (max-width:460px) { .topbar { gap:5px; }.top-actions { gap:4px; }.round-button { width:38px; }.round-button,.help-button { height:38px; } .brand > span { font-size:.38rem; letter-spacing:.1em; }.brand h1 { font-size:1.2rem; }.help-button { padding:0 8px; font-size:.56rem; }.resource-strip > div { min-height:57px; padding:9px 11px; }.resource-strip strong { font-size:.92rem; }.condition-grid { grid-template-columns:1fr; }.action-card { grid-template-columns:40px 1fr auto; }.action-card > b { width:38px; }.stat-list > div { grid-template-columns:35px 1fr 35px 42px; }.section-heading { align-items:start; }.section-heading > small { max-width:110px; text-align:right; }.welcome-flow { gap:3px; }.welcome-flow div { padding:8px 3px; }.roster-item { grid-template-columns:36px 1fr auto; }.roster-stats { display:none; }.track { margin-inline:-8px; }.race-runner { font-size:1.8rem; } }
@media (max-width:520px) { .race-modal-card { padding-inline:10px; }.race-power-preview { grid-template-columns:1fr 28px 1fr; gap:4px; }.race-power-preview > div { padding:8px; }.race-power-preview span { font-size:.43rem; }.race-power-preview strong { font-size:1.1rem; }.race-live-board { grid-template-columns:105px 1fr; }.track { --start-x:105px; margin-inline:0; }.lane-name { left:35px; width:65px; font-size:.43rem; }.race-runner { font-size:1.85rem; }.finish-line { right:31px; }.finish-label { right:15px; }.race-comment { font-size:.56rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; } }