:root{color:#dcf8f2;background:#020b13;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden;background:#020b13}button{font:inherit}.app-shell{width:min(100%,680px);min-height:100svh;margin:0 auto}.game-panel{position:relative;min-height:100svh;overflow:hidden;background:#04141e;box-shadow:0 18px 70px #000b11cc}#game{min-height:100svh;touch-action:none}canvas{display:block;width:100%!important;height:auto!important}.hud-top{position:absolute;z-index:12;top:max(9px,env(safe-area-inset-top));left:10px;right:10px;display:flex;align-items:center;gap:8px;pointer-events:none}.icon-button,.dock-item,#context-action,.sheet-close{border:0;color:#dffff6;cursor:pointer}.icon-button{width:30px;height:30px;border-radius:10px;background:#071923c9;border:1px solid #2a5964;font-size:1.5rem;line-height:1;pointer-events:auto}.lineage-block{display:grid;gap:1px;min-width:82px;padding:5px 8px;border-radius:10px;background:#061a24b5;border:1px solid #1e4b59}.lineage-block span,.vital span,.storage-readout span{color:#7bc9c0;font-size:.48rem;letter-spacing:.13em;font-weight:780}.lineage-block strong{color:#e2fff7;font-size:.72rem;font-weight:720;max-width:106px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.state-chip,.connection{border:1px solid #2a6570;border-radius:999px;padding:5px 7px;background:#061923b8;color:#9edbd1;font-size:.58rem;white-space:nowrap}.state-chip{margin-left:auto;text-transform:uppercase;letter-spacing:.07em}.connection{display:none}.connection.live{border-color:#67daa9;color:#91f1c5;box-shadow:0 0 14px #4ad89b33}.connection.error{border-color:#cf716c;color:#ffaaa0}.connection.pending{border-color:#6ba5bc;color:#b8ddec}.vitals-strip{position:absolute;z-index:12;top:max(48px,calc(env(safe-area-inset-top) + 42px));left:12px;right:12px;display:grid;grid-template-columns:1fr 1fr auto;gap:6px;pointer-events:none}.vital,.storage-readout{min-height:38px;padding:5px 7px;border:1px solid #1a4d58;border-radius:10px;background:#061b25a8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.vital{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 5px;gap:2px 4px}.vital.stat-help{width:100%;color:inherit;text-align:left;cursor:pointer;pointer-events:auto}.stat-help{border:0;background:transparent;color:inherit;min-width:0;cursor:pointer;pointer-events:auto}.vital.stat-help:active,.storage-readout .stat-help:active{background:#1d53602e}.vital b{color:#edfff8;font-size:.67rem;font-variant-numeric:tabular-nums}.vital i,.storage-readout i{display:block;grid-column:1 / -1;height:4px;border-radius:999px;overflow:hidden;background:#12333d}.vital em,.storage-readout em{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8be8c5,#a7f6dd);transition:width .35s ease}.vital:nth-child(2) em{background:linear-gradient(90deg,#e5bd70,#bff6db)}.storage-readout{display:grid;grid-template-columns:auto auto;align-content:center;gap:3px 7px;min-width:92px}.storage-readout .stat-help{color:#7bc9c0;letter-spacing:.06em;font-size:.5rem;padding:0;text-align:left}.storage-readout b{color:#d8fff2;font-size:.57rem}.storage-readout em{background:linear-gradient(90deg,#d1e56e,#92ddc9)}.stat-tip{position:absolute;z-index:18;top:max(94px,calc(env(safe-area-inset-top) + 88px));left:12px;right:12px;max-width:286px;padding:8px 10px;border:1px solid #37717a;border-radius:10px;color:#c7eee5;background:#061923ec;box-shadow:0 8px 24px #0009;font-size:.64rem;line-height:1.35;opacity:0;transform:translateY(-5px);pointer-events:none;transition:opacity .15s ease,transform .15s ease}.stat-tip.visible{opacity:1;transform:translateY(0)}.resource-callout{position:absolute;z-index:12;display:grid;gap:1px;width:max-content;max-width:104px;padding:1px 0 1px 5px;border-left:1px solid #80d7d0b8;color:#bfece1;background:transparent;font-size:.45rem;line-height:1.1;letter-spacing:.02em;opacity:0;pointer-events:none;transform:translate(5px,-50%);transition:opacity .16s ease}.resource-callout:before{content:"";position:absolute;left:-15px;top:50%;width:14px;border-top:1px solid #80d7d0a8}.resource-callout span:first-child{color:#e1fff6;font-size:.5rem;font-weight:790;letter-spacing:.08em;text-transform:uppercase}.resource-callout span:last-child{color:#8bc7c1}.resource-callout.visible{opacity:1}.resource-context{position:absolute;z-index:13;width:58px;height:58px;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.74);transition:transform .16s ease,opacity .16s ease}.resource-context.visible{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}#context-action{position:relative;display:grid;place-items:center;width:44px;height:44px;margin:0 auto;padding:0;border:1px solid #70dcca;border-radius:50%;background:radial-gradient(circle at 35% 28%,#2a827b,#10343e 70%);color:#dbfff4;box-shadow:0 0 0 4px #67dbc517,0 5px 16px #0009;touch-action:none}#context-action svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#context-action svg circle{fill:#d4ffab;stroke:none}#context-action span{position:absolute;top:46px;left:50%;padding:2px 4px;border-radius:5px;color:#bcf5e8;background:#061923b8;font-size:.42rem;font-weight:800;letter-spacing:.05em;transform:translate(-50%);white-space:nowrap}#context-action.absorbing{background:radial-gradient(circle at 35% 28%,#4e9b6d,#184d44 70%);box-shadow:0 0 0 5px #a9f4c62b,0 0 18px #9cf7c16b;animation:absorb-pulse .85s ease-in-out infinite}#context-action[disabled]{border-color:#31565c;background:#18353d;color:#6c9e9e}@keyframes absorb-pulse{50%{transform:scale(.91)}}.control-tip{position:absolute;z-index:11;left:50%;bottom:calc(124px + env(safe-area-inset-bottom));width:max-content;max-width:86%;padding:5px 8px;transform:translate(-50%);border-radius:999px;color:#a9d8d0;background:#071923a8;font-size:.56rem;pointer-events:none;animation:tip-fade 9s ease forwards}@keyframes tip-fade{0%,58%{opacity:1}to{opacity:0;visibility:hidden}}.bottom-dock{position:absolute;z-index:14;left:8px;right:8px;bottom:max(7px,env(safe-area-inset-bottom));height:55px;display:grid;grid-template-columns:repeat(4,1fr);padding:4px;border:1px solid #285661;border-radius:17px;background:#061a24ec;box-shadow:0 8px 26px #000a}.dock-item{display:grid;place-items:center;gap:1px;border-radius:12px;background:transparent;color:#8abcb8;font-size:.53rem}.dock-item span{font-size:1rem;line-height:.82;color:#6fbfc1}.dock-item.active{background:#123b45;color:#d8fff4}.dock-item.active span{color:#a7f5d4}.bottom-sheet{position:absolute;z-index:20;left:8px;right:8px;bottom:max(7px,env(safe-area-inset-bottom));min-height:160px;padding:20px 14px 14px;border:1px solid #306673;border-radius:18px;background:#061923f5;box-shadow:0 -12px 36px #000a;transform:translateY(calc(100% + 20px));transition:transform .25s ease}.bottom-sheet.open{transform:translateY(0)}.sheet-close{position:absolute;top:5px;right:8px;width:26px;height:26px;border-radius:8px;background:#12333d;font-size:1.15rem}.sheet-title{margin:0 0 8px;color:#d9fff5;font-size:.88rem}.sheet-copy{margin:0;color:#95c5bf;font-size:.68rem;line-height:1.4}.sheet-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px}.sheet-stat{padding:7px;border:1px solid #194653;border-radius:10px;background:#0a2731;color:#d6fff3;font-size:.66rem;text-align:left}button.sheet-stat{cursor:pointer}button.sheet-stat:active{background:#123641}.sheet-stat small{display:block;margin-bottom:2px;color:#75b4ad;font-size:.49rem;text-transform:uppercase;letter-spacing:.07em}#readout,#gesture-hint{display:none}@media(min-width:700px){.app-shell{padding:10px 0}.game-panel{min-height:calc(100svh - 20px);border-radius:24px}#game{min-height:calc(100svh - 20px)}.bottom-dock,.resource-context{left:16px;right:16px}}@media(max-width:360px){.lineage-block{min-width:64px}.lineage-block strong{max-width:68px}.vitals-strip{grid-template-columns:1fr 1fr}.storage-readout{grid-column:1 / -1;grid-template-columns:auto auto 1fr;min-height:27px}.storage-readout i{grid-column:3}}
