/* CYCLE shared UX polish layer */
:root{--ux-accent:#d4eda6;--ux-panel:#101d15;--ux-muted:#8ea087;--ux-line:rgba(231,246,220,.11)}body.pond-stage{--ux-accent:#aee4d7;--ux-panel:#0d2020;--ux-muted:#8eaaa5;--ux-line:rgba(207,240,233,.12)}
.hud{align-items:flex-start}.ux-stage-progress{pointer-events:none;margin-left:auto;margin-right:8px;padding:6px 9px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(7,17,11,.46);backdrop-filter:blur(10px);font-size:8px;letter-spacing:.04em;color:#b5c6b0;white-space:nowrap}.pond-stage .ux-stage-progress{background:rgba(6,23,23,.52)}
.top-stats{gap:9px}.stat{padding:7px 8px;border-radius:12px;background:rgba(6,14,9,.28);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.04);min-height:52px}.stat-label{font-size:7px;letter-spacing:.08em}.stat strong{font-size:17px;line-height:1}.ux-stat-state{font-size:7px;line-height:1;margin-top:3px;color:#859581}.stat[data-health="good"] .ux-stat-state{color:#c9e99b}.stat[data-health="warn"] .ux-stat-state{color:#e6cf88}.stat[data-health="low"] .ux-stat-state{color:#d99d8c}
.objective-card{width:min(270px,74%);padding:12px 13px 10px;border-color:rgba(222,244,205,.22);box-shadow:0 12px 34px rgba(0,0,0,.24);cursor:pointer;pointer-events:auto;touch-action:manipulation}.objective-card::after{content:'↓ 操作へ';position:absolute;right:10px;top:8px;font-size:7px;letter-spacing:.04em;color:rgba(210,235,192,.6)}.objective-card:active{transform:scale(.985)}.objective-kicker{font-size:8px}.objective-main{padding-right:26px}.objective-main strong{font-size:13px;line-height:1.25}.objective-main small{font-size:9px;line-height:1.35}.objective-progress{height:4px}
.control-panel{padding-top:20px;scroll-margin-top:18px}.panel-head h2,.chain-head h2{font-size:17px}.eyebrow{font-size:7px}.hint{font-size:9px;max-width:46%;text-align:right;line-height:1.35}.actions{gap:10px;scroll-margin-top:110px}.action-card{min-height:92px;padding:12px 10px;border-radius:18px;scroll-margin:110px;overflow:visible;touch-action:manipulation}.action-icon{font-size:25px}.action-copy b{font-size:12px}.action-copy small{font-size:9px;line-height:1.25}.action-cost{font-size:8px}.action-card.ux-primary{border-color:rgba(215,241,177,.46);box-shadow:0 0 0 1px rgba(215,241,177,.08),0 10px 30px rgba(166,210,103,.11)}
.species-tray{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;scroll-margin-top:100px}.species-card{min-height:112px;padding:12px 11px 10px;scroll-margin:105px;overflow:visible;touch-action:manipulation}.species-card .species-icon{font-size:31px}.species-card b{font-size:12px}.species-card small{font-size:9px;line-height:1.25;max-width:80%}.species-card .pop{font-size:13px}.species-card .lock-copy{font-size:8px;bottom:9px}.species-card.locked{opacity:.31}.species-card.ready{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(220,244,181,.14),0 10px 30px rgba(174,218,111,.14)}
body[data-ux-phase="environment"] .species-tray{opacity:.68;transition:opacity .25s}body[data-ux-phase="species"] .actions{opacity:.68;transition:opacity .25s}body[data-ux-phase="environment"] .actions .suggested{box-shadow:0 0 0 1px rgba(213,240,171,.14),0 0 34px rgba(179,221,116,.15)}
.food-chain-strip span,.food-web-row span{opacity:.36;transition:opacity .25s,background .25s,border-color .25s}.food-chain-strip span.ux-chain-active,.food-web-row span.ux-chain-active{opacity:1;background:rgba(191,224,151,.09);border-color:rgba(206,238,169,.18);color:#d5e9c4}.pond-stage .food-web-row span.ux-chain-active{background:rgba(148,220,206,.1);border-color:rgba(159,226,213,.2);color:#d5efea}
.intro-card{padding-top:38px}.intro-card h2{font-size:36px}.intro-card p{font-size:13px;line-height:1.65;color:#afbeaa;margin-bottom:20px}.intro-card>small{font-size:9px;line-height:1.4}.start-btn{min-height:56px;font-size:13px;touch-action:manipulation}
.ux-pop{position:absolute;z-index:12;left:50%;top:12%;transform:translate(-50%,0);pointer-events:none;white-space:nowrap;padding:5px 8px;border-radius:999px;background:rgba(226,246,195,.92);color:#172315;font-size:9px;font-weight:750;animation:uxPop .72s ease forwards;box-shadow:0 8px 20px rgba(0,0,0,.2)}.pond-stage .ux-pop{background:rgba(187,235,225,.94);color:#102523}.ux-live{position:fixed;z-index:80;left:50%;top:max(72px,calc(env(safe-area-inset-top) + 54px));transform:translate(-50%,-8px);padding:8px 12px;border-radius:999px;background:rgba(8,19,12,.92);border:1px solid rgba(217,241,180,.2);color:#d8edbc;font-size:9px;font-weight:750;letter-spacing:.06em;opacity:0;pointer-events:none;transition:.22s;box-shadow:0 10px 32px rgba(0,0,0,.28)}.ux-live.show{opacity:1;transform:translate(-50%,0)}.pond-stage .ux-live{background:rgba(5,26,26,.92);border-color:rgba(167,229,216,.22);color:#c9eee6}
.ux-world-return{position:fixed;z-index:45;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));height:40px;padding:0 13px;border-radius:999px;border:1px solid rgba(226,244,211,.14);background:rgba(9,20,13,.84);backdrop-filter:blur(12px);color:#c6d9bf;font-size:9px;font-weight:700;box-shadow:0 10px 28px rgba(0,0,0,.24);opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s}.ux-world-return.show{opacity:1;transform:translateY(0);pointer-events:auto}.pond-stage .ux-world-return{background:rgba(5,24,24,.86);border-color:rgba(192,232,224,.15);color:#c9e8e1}
.ux-arrived{animation:uxArrive .8s ease!important}.ux-pressed{transform:scale(.965)!important}.icon-btn{width:auto;min-width:42px;padding:0 10px;border-radius:999px;font-size:10px}.icon-btn::after{content:' 演出';font-size:8px;margin-left:2px;color:#9cb09a}.message{bottom:56px;width:min(90%,390px)}
@keyframes uxArrive{0%,100%{box-shadow:inherit}35%{box-shadow:0 0 0 3px rgba(222,245,184,.18),0 0 38px rgba(192,231,132,.24);transform:scale(1.025)}}@keyframes uxPop{0%{opacity:0;transform:translate(-50%,6px) scale(.9)}20%{opacity:1;transform:translate(-50%,-4px) scale(1)}100%{opacity:0;transform:translate(-50%,-34px) scale(.96)}}
@media(max-width:370px){.species-tray{gap:8px}.species-card{min-height:106px}.objective-card{width:76%}.stat{padding:6px}.stat strong{font-size:15px}.ux-stage-progress{display:none}.intro-card h2{font-size:32px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}