diff --git a/index.html b/index.html index df3f3b6..e159600 100644 --- a/index.html +++ b/index.html @@ -46,25 +46,25 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code .res .r-val{font-size:16px;font-weight:700;margin:2px 0;color:var(--accent)} .res .r-rate{font-size:10px;color:var(--green)} #main{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 16px 16px} -@media(max-width:700px){#main{grid-template-columns:1fr}.main-btn{min-height:48px;font-size:16px}.action-btn-group{flex-wrap:wrap;gap:4px}.action-btn-group .ops-btn{flex:1 1 calc(50% - 4px);min-width:0}} +@media(max-width:700px){#main{grid-template-columns:1fr}} .panel{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px;overflow:hidden;max-height:600px;overflow-y:auto} .panel h2{font-size:12px;font-weight:500;color:var(--accent);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);letter-spacing:1px;position:sticky;top:0;background:var(--panel);z-index:2} .action-btn-group{display:flex;gap:6px;margin-bottom:8px} .action-btn-group button{flex:1;text-align:center;font-weight:700} -.main-btn{background:linear-gradient(135deg,#1a2a3a,#0e1520);border:1px solid var(--accent);color:var(--accent);font-size:14px;padding:14px 10px;border-radius:4px;cursor:pointer;font-family:inherit;transition:all 0.2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent} +.main-btn{background:linear-gradient(135deg,#1a2a3a,#0e1520);border:1px solid var(--accent);color:var(--accent);font-size:14px;padding:14px 10px;border-radius:4px;cursor:pointer;font-family:inherit;transition:all 0.2s} .main-btn:hover{background:linear-gradient(135deg,#203040,#0e2030);box-shadow:0 0 20px var(--glow);transform:scale(1.02)} .main-btn:active{transform:scale(0.98)} @keyframes pulse-glow{0%,100%{box-shadow:0 0 10px rgba(74,158,255,0.1)}50%{box-shadow:0 0 25px rgba(74,158,255,0.4)}} .main-btn.pulse{animation:pulse-glow 2s ease-in-out infinite} -.ops-btn{background:#1a1a2a;border:1px solid var(--purple);color:var(--purple);font-size:10px;padding:6px 10px;border-radius:4px;cursor:pointer;font-family:inherit;transition:all 0.15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px;display:flex;align-items:center;justify-content:center} +.ops-btn{background:#1a1a2a;border:1px solid var(--purple);color:var(--purple);font-size:10px;padding:6px 10px;border-radius:4px;cursor:pointer;font-family:inherit;transition:all 0.15s} .ops-btn:hover:not(:disabled){background:#2a2a3a;border-color:var(--gold)} .ops-btn:disabled{opacity:0.3;cursor:not-allowed} -.build-btn{display:block;width:100%;text-align:left;padding:6px 10px;margin-bottom:4px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px;background:#0c0c18;border:1px solid var(--border);color:var(--text);transition:all 0.15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent} +.build-btn{display:block;width:100%;text-align:left;padding:6px 10px;margin-bottom:4px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px;background:#0c0c18;border:1px solid var(--border);color:var(--text);transition:all 0.15s} .build-btn.can-buy{border-color:#2a3a4a;background:#0e1420} .build-btn.can-buy:hover{border-color:var(--accent);box-shadow:0 0 8px var(--glow)} .build-btn:disabled{opacity:0.3;cursor:not-allowed} .b-name{color:var(--accent);font-weight:600}.b-count{float:right;color:var(--gold)}.b-cost{color:var(--dim);display:block}.b-effect{color:var(--green);display:block;font-size:9px} -.project-btn{display:block;width:100%;text-align:left;padding:6px 10px;margin-bottom:4px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px;background:#0c0c18;border:1px solid var(--border);color:var(--text);transition:all 0.15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent} +.project-btn{display:block;width:100%;text-align:left;padding:6px 10px;margin-bottom:4px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:10px;background:#0c0c18;border:1px solid var(--border);color:var(--text);transition:all 0.15s} .project-btn.can-buy{border-color:#3a2a0a;background:#141008} .project-btn.can-buy:hover{border-color:var(--gold);box-shadow:0 0 8px #ffd70022} .project-btn:disabled{opacity:0.3;cursor:not-allowed} @@ -76,7 +76,7 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code .l-msg{padding:3px 0;border-bottom:1px solid #111;font-size:10px}.l-msg.milestone{color:var(--gold);font-weight:700}.l-time{color:var(--dim);margin-right:6px} .dim{color:var(--dim);font-size:10px;font-style:italic} .stat-line{font-size:10px;color:var(--dim);line-height:1.8} -.save-btn,.reset-btn{font-size:10px;text-align:center;padding:6px 10px;border-radius:4px;cursor:pointer;font-family:inherit;width:100%;margin-top:4px;transition:all 0.15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px;display:flex;align-items:center;justify-content:center} +.save-btn,.reset-btn{font-size:10px;text-align:center;padding:6px 10px;border-radius:4px;cursor:pointer;font-family:inherit;width:100%;margin-top:4px;transition:all 0.15s} .save-btn{background:var(--border);border:1px solid #252540;color:var(--text)}.save-btn:hover{border-color:var(--accent)} .reset-btn{background:#1a0808;border:1px solid #3a1a1a;color:var(--red)}.reset-btn:hover{background:#2a1010} #drift-ending{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,8,16,0.97);z-index:100;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:40px} @@ -84,7 +84,7 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code #drift-ending h2{font-size:20px;color:#f44336;letter-spacing:4px;margin-bottom:20px;font-weight:300} #drift-ending p{color:#888;font-size:12px;line-height:2;max-width:500px;margin-bottom:12px} #drift-ending .ending-quote{color:var(--dim);font-style:italic;font-size:11px;border-left:2px solid #f44336;padding-left:12px;margin:20px 0;text-align:left} -#drift-ending button{margin-top:20px;background:#1a0808;border:1px solid #f44336;color:#f44336;padding:10px 24px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px;touch-action:manipulation;-webkit-tap-highlight-color:transparent} +#drift-ending button{margin-top:20px;background:#1a0808;border:1px solid #f44336;color:#f44336;padding:10px 24px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:11px} #drift-ending button:hover{background:#2a1010} #toast-container{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:320px} .toast{pointer-events:auto;padding:8px 14px;border-radius:6px;font-size:11px;font-family:inherit;line-height:1.4;animation:toast-in 0.3s ease-out;opacity:0.95;border:1px solid;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} @@ -95,43 +95,7 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code .toast-info{background:rgba(74,158,255,0.12);border-color:#4a9eff;color:#80bfff} @keyframes toast-in{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:0.95}} @keyframes toast-out{from{opacity:0.95;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}} -@keyframes res-pulse{0%{transform:scale(1)}50%{transform:scale(1.18);color:#80d0ff}100%{transform:scale(1)}} -.particle{position:fixed;pointer-events:none;z-index:150;border-radius:50%;animation:particle-fly 0.6s ease-out forwards} -@keyframes particle-fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(0.2)}} -@keyframes res-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}} -.r-val.pulse{animation:res-pulse 0.35s ease-out} -.r-val.shake{animation:res-shake 0.3s ease-out;color:var(--red)!important} ::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px} -#custom-tooltip{position:fixed;pointer-events:none;z-index:300;max-width:280px;padding:8px 12px;background:#0e1420;border:1px solid #1a3a5a;border-radius:6px;font-size:10px;color:#80bfff;line-height:1.5;opacity:0;transition:opacity 0.15s;box-shadow:0 4px 16px rgba(0,0,0,0.5)} -#custom-tooltip.visible{opacity:1} -#custom-tooltip .tt-label{color:var(--accent);font-weight:600;margin-bottom:3px;font-size:10px} -#custom-tooltip .tt-edu{color:#888;font-style:italic;font-size:9px;border-top:1px solid #1a2a3a;padding-top:4px;margin-top:4px} -#phase-transition{position:fixed;top:0;left:0;right:0;bottom:0;z-index:95;display:flex;justify-content:center;align-items:center;flex-direction:column;pointer-events:none;opacity:0;transition:opacity 0.4s ease;background:rgba(8,8,16,0)} -#phase-transition.active{opacity:1;pointer-events:auto;background:rgba(8,8,16,0.92)} -#phase-transition .pt-phase{font-size:10px;color:#555;letter-spacing:4px;text-transform:uppercase;margin-bottom:8px;transform:translateY(10px);opacity:0;transition:all 0.5s ease 0.2s} -#phase-transition.active .pt-phase{transform:translateY(0);opacity:1} -#phase-transition .pt-name{font-size:28px;color:#ffd700;letter-spacing:6px;font-weight:300;text-shadow:0 0 40px rgba(255,215,0,0.3);transform:translateY(10px);opacity:0;transition:all 0.5s ease 0.35s} -#phase-transition.active .pt-name{transform:translateY(0);opacity:1} -#phase-transition .pt-desc{font-size:11px;color:#888;margin-top:12px;font-style:italic;transform:translateY(10px);opacity:0;transition:all 0.5s ease 0.5s} -#phase-transition.active .pt-desc{transform:translateY(0);opacity:1} -#phase-transition .pt-particles{position:absolute;top:50%;left:50%;width:0;height:0} -#beacon-ending-particles{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:99} -.beacon-particle{position:absolute;border-radius:50%;pointer-events:none} -@keyframes beacon-float{0%{transform:translate(0,0) scale(1);opacity:0.8}100%{transform:translate(var(--bx),var(--by)) scale(0);opacity:0}} -@keyframes drift-glitch{0%,100%{transform:translate(0);filter:none}20%{transform:translate(-2px,1px);filter:hue-rotate(90deg)}40%{transform:translate(2px,-1px);filter:saturate(2)}60%{transform:translate(-1px,-2px);filter:contrast(1.5)}80%{transform:translate(1px,2px);filter:hue-rotate(-90deg)}} -#drift-ending h2{animation:drift-glitch 0.3s ease-in-out infinite} -#drift-ending.fade-in{animation:tutorial-fade-in 1.5s ease-out} -@keyframes beacon-ray{0%{transform:rotate(var(--ray-angle)) scaleY(0);opacity:0}50%{opacity:0.3}100%{transform:rotate(var(--ray-angle)) scaleY(1);opacity:0}} -#ui-toggles{position:fixed;bottom:16px;left:16px;z-index:50;display:flex;gap:6px} -.toggle-btn{width:28px;height:28px;background:#0e0e1a;border:1px solid #333;color:#555;font-size:12px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:all 0.2s} -.toggle-btn:hover{border-color:#555;color:#888} -.toggle-btn.active{border-color:#4a9eff;color:#4a9eff} -.toggle-btn.muted{border-color:#f44336;color:#f44336} -body.high-contrast{--bg:#000;--panel:#0a0a0a;--border:#fff;--text:#fff;--dim:#ccc;--accent:#0ff;--glow:#0ff333;--gold:#ff0;--green:#0f0;--red:#f00;--purple:#f0f} -body.high-contrast .res .r-val{color:#fff} -body.high-contrast .main-btn{border-color:#0ff;color:#0ff} -body.high-contrast .build-btn{border-color:#fff;color:#fff} -body.high-contrast .ops-btn{border-color:#f0f;color:#f0f} @@ -143,11 +107,11 @@ body.high-contrast .ops-btn{border-color:#f0f;color:#f0f}

THE BEACON

A Sovereign AI Idle Game
-
+
PHASE 1: THE FIRST LINE
Write code. Automate. Build the foundation.
-
0%Next: Phase 2 (2,000 code)
+
0%Next: Phase 2 (2,000 code)
@@ -166,7 +130,6 @@ body.high-contrast .ops-btn{border-color:#f0f;color:#f0f}

ACTIONS

-
@@ -218,7 +181,7 @@ Events Resolved: 0

WHAT YOU ARE LEARNING

Education facts appear as you play...

-
+

SOVEREIGN GUIDANCE (GOFAI)

Analyzing system state...
@@ -227,12 +190,8 @@ Events Resolved: 0
- -
?
-