AIWAKE-Spielstand mit Prozess- und Programmfortschritt
This commit is contained in:
nalpush
124
styles.css
124
styles.css
@@ -95,13 +95,22 @@ img.resource-icon{width:16px;height:16px;margin-right:5px;padding:0;border:0;bac
|
||||
.combat-ammo-select{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}.combat-ammo-select button{min-width:0;border:1px solid #243b31;background:#08120d;color:#93ad9d;padding:8px 7px;cursor:pointer;text-align:left}.combat-ammo-select button strong,.combat-ammo-select button span{display:block}.combat-ammo-select button strong{color:#e5f9ec;font-size:9px}.combat-ammo-select button span{margin-top:4px;color:var(--dim);font-size:8px;line-height:1.25}.combat-ammo-select button.active{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 14px rgba(83,229,255,.14),inset 0 0 12px rgba(83,229,255,.05)}.combat-ammo-select button:disabled{opacity:.34;cursor:not-allowed}.combat-pressure{display:flex;justify-content:space-between;gap:10px;margin:8px 0;padding:7px 8px;border:1px solid rgba(255,190,85,.42);background:rgba(36,24,7,.35);font-size:9px}.combat-pressure span{color:var(--amber)}.combat-pressure strong{color:#fff;text-align:right}@media(max-width:600px){.combat-ammo-select{grid-template-columns:1fr}.combat-pressure{align-items:flex-start;flex-direction:column}.combat-pressure strong{text-align:left}}
|
||||
.combat-defense{display:grid;gap:6px;margin:9px 0 10px;padding:9px;border:1px solid #173527;background:rgba(5,14,10,.62)}.combat-defense div{display:grid;grid-template-columns:92px 44px 1fr;gap:8px;align-items:center}.combat-defense span{color:var(--dim);font-size:8px;letter-spacing:.1em}.combat-defense strong{color:#fff;font-size:10px;text-align:right}.combat-defense i{display:block;height:5px;background:#10251a;border:1px solid #173527;overflow:hidden}.combat-defense em{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 8px rgba(83,229,255,.35)}.combat-defense div:first-child em{background:var(--amber);box-shadow:0 0 8px rgba(255,190,85,.35)}.combat-defense div:last-child em{background:var(--green);box-shadow:0 0 8px rgba(86,255,154,.35)}@media(max-width:600px){.combat-defense div{grid-template-columns:86px 40px 1fr}}
|
||||
.combat-enemy-charge{display:grid;grid-template-columns:110px 96px 1fr;gap:8px;align-items:center;margin:8px 0;padding:8px;border:1px solid rgba(255,85,116,.5);background:rgba(48,10,16,.36);font-size:9px}.combat-enemy-charge span{color:var(--red);letter-spacing:.1em}.combat-enemy-charge strong{color:#fff;text-align:right;font-size:9px}.combat-enemy-charge i{display:block;height:7px;background:#17080c;border:1px solid rgba(255,85,116,.35);overflow:hidden}.combat-enemy-charge em{display:block;height:100%;width:0;background:var(--red);box-shadow:0 0 10px rgba(255,85,116,.5);transition:width .12s linear}@media(max-width:600px){.combat-enemy-charge{grid-template-columns:1fr}.combat-enemy-charge strong{text-align:left}}
|
||||
.combat-repair{display:grid;grid-template-columns:110px 150px 1fr;gap:8px;align-items:center;margin:8px 0;padding:8px;border:1px solid rgba(83,229,255,.5);background:rgba(7,30,34,.4);font-size:9px}.combat-repair span{color:var(--cyan);letter-spacing:.1em}.combat-repair strong{color:#fff;text-align:right;font-size:9px}.combat-repair i{display:block;height:7px;background:#06171a;border:1px solid rgba(83,229,255,.35);overflow:hidden}.combat-repair em{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 10px rgba(83,229,255,.5);transition:width .12s linear}@media(max-width:600px){.combat-repair{grid-template-columns:1fr}.combat-repair strong{text-align:left}}
|
||||
.bit-meter i{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
|
||||
.byte-meter i{background:var(--amber);box-shadow:0 0 10px var(--amber)}
|
||||
img.resource-icon.kilobyte{filter:drop-shadow(0 0 5px rgba(184,146,255,.28))}
|
||||
img.resource-icon.megabyte{filter:drop-shadow(0 0 6px rgba(210,139,255,.4))}
|
||||
.auto-upgrader-console{margin-top:14px;padding:12px;border:1px solid #31536b;background:linear-gradient(135deg,rgba(10,28,38,.88),rgba(7,18,13,.96));box-shadow:inset 0 0 22px rgba(83,229,255,.04)}.auto-upgrader-console .panel-heading{align-items:center;margin-bottom:9px}.auto-upgrader-console .panel-heading span{color:var(--cyan);font-size:10px;letter-spacing:.12em}.auto-upgrader-console .panel-heading b{color:var(--green);font-size:9px}.auto-upgrader-console>strong,.auto-upgrader-console>small{display:block;line-height:1.45}.auto-upgrader-console>strong{color:#dff7e8;font-size:10px;margin-bottom:9px}.auto-upgrader-console>small{color:var(--dim);font-size:9px}.auto-upgrader-console>.upgrade{padding:9px;margin:0 0 9px;text-align:center;color:var(--cyan)}
|
||||
|
||||
/* Stable hover layer: avoid pointer flicker in the evolution upgrade list. */
|
||||
.upgrade.available{animation:none}
|
||||
.upgrade:hover:not(:disabled),.upgrade.early-path.available:hover:not(:disabled){transform:none;border-color:var(--cyan);box-shadow:0 0 18px rgba(83,229,255,.16),inset 0 0 16px rgba(83,229,255,.05)}
|
||||
.upgrade.evolution-goal{position:relative;margin-top:4px;padding-top:16px;border-color:rgba(83,229,255,.62);background:linear-gradient(135deg,rgba(8,35,37,.72),rgba(8,18,13,.96));box-shadow:inset 3px 0 0 rgba(83,229,255,.7),0 0 18px rgba(83,229,255,.07)}
|
||||
.upgrade.evolution-goal::after{content:"NÄCHSTE STUFE";position:absolute;left:9px;top:-8px;padding:2px 6px;border:1px solid var(--cyan);background:#061315;color:var(--cyan);font-size:8px;letter-spacing:.12em}
|
||||
.upgrade.evolution-goal:disabled{opacity:.72}
|
||||
.upgrade.evolution-goal:disabled strong{color:#d7f7f7}
|
||||
.upgrade.evolution-goal.available{border-color:var(--amber);box-shadow:inset 3px 0 0 var(--amber),0 0 22px rgba(255,190,85,.12)}
|
||||
.upgrade.evolution-goal.available::after{border-color:var(--amber);color:var(--amber);background:#130f06}
|
||||
.installed-upgrade-button:hover{transform:none}
|
||||
|
||||
/* Phase 06: derived program form and optional care connection. */
|
||||
@@ -145,3 +154,118 @@ img.resource-icon.kilobyte{filter:drop-shadow(0 0 5px rgba(184,146,255,.28))}
|
||||
.core.stage-6 #pixelBeing{display:none}.core-program-avatar{width:170px;height:205px;pointer-events:none;z-index:2;transform:translateY(-12px)}.core-program-avatar .program-sprite{bottom:0}.core.stage-6 .core-program-avatar{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--program-accent) 42%,transparent))}
|
||||
@keyframes programIdle{50%{translate:-50% -3px}}@keyframes programSignal{50%{opacity:.28;box-shadow:0 0 0 7px var(--program-accent),0 0 20px var(--program-accent)}}@keyframes programFlicker{48%,52%{opacity:.72}}@keyframes programGlitch{25%{translate:calc(-50% + 3px) 0}50%{translate:calc(-50% - 3px) -1px}75%{filter:hue-rotate(42deg)}}@keyframes programAura{to{transform:rotate(360deg)}}
|
||||
@media(max-width:600px){.program-presence{grid-template-columns:1fr}.program-avatar{width:180px;height:205px}.core-program-avatar{width:158px;height:195px}.program-sprite{scale:.92}}
|
||||
|
||||
/* Intentional input, encounter telegraphing and first-combat onboarding. */
|
||||
.pulse-hint{width:min(310px,100%);margin:0 auto;padding:10px 14px;border:1px dashed #28523b;background:rgba(7,19,13,.7);color:var(--green);pointer-events:none}.pulse-hint span,.pulse-hint small{display:block}.pulse-hint span{font-size:10px;letter-spacing:.12em}.pulse-hint small{margin-top:5px;color:var(--dim);font-size:9px}.pulse-hint.chase-hint{border-color:var(--cyan);color:var(--cyan)}
|
||||
.core:not(.stage-1) .pixel-being,.core-program-avatar{cursor:pointer;touch-action:manipulation}.core:not(.stage-1) .pixel-being::after,.core-program-avatar::after{content:"";position:absolute;inset:-18px}.core-program-avatar{pointer-events:auto}.pulse-impact{animation:pulseImpact .18s steps(2,end)!important}.pulse-impact .program-sprite{filter:brightness(1.65) drop-shadow(0 0 8px #fff)}@keyframes pulseImpact{50%{filter:brightness(1.7) drop-shadow(0 0 25px var(--core-accent,var(--green)))}}
|
||||
.hold-pulse-ring{position:absolute;z-index:8;width:58px;height:58px;border:2px solid #fff;border-radius:50%;pointer-events:none;opacity:0;translate:-50% -50%;transform:scale(.42);filter:drop-shadow(0 0 5px #fff);will-change:transform,opacity}.hold-pulse-ring::before,.hold-pulse-ring::after{content:"";position:absolute;background:#fff;box-shadow:0 0 4px #fff}.hold-pulse-ring::before{left:50%;top:-5px;width:2px;height:8px}.hold-pulse-ring::after{left:-5px;top:50%;width:8px;height:2px}.hold-pulse-ring.active{animation:holdPulseContract .7s steps(14,end) forwards}.hold-pulse-ring.fading{animation:holdPulseFade .18s ease-out forwards}@keyframes holdPulseContract{0%{opacity:.22;transform:scale(1.65)}15%{opacity:.95}82%{opacity:1;transform:scale(.62)}100%{opacity:1;transform:scale(.42)}}@keyframes holdPulseFade{from{opacity:1;transform:scale(.42)}to{opacity:0;transform:scale(.42)}}
|
||||
.pulse-target{--target-x:64px;--target-y:-48px;position:absolute;z-index:7;left:calc(50% + var(--target-x));top:calc(50% + var(--target-y));width:26px;height:26px;padding:0;translate:-50% -50%;border:1px solid rgba(83,229,255,.42);border-radius:50%;background:rgba(5,18,16,.3);color:rgba(83,229,255,.62);cursor:crosshair;touch-action:none;box-shadow:0 0 7px rgba(83,229,255,.11);transition:left .18s cubic-bezier(.2,.85,.35,1.2),top .18s cubic-bezier(.2,.85,.35,1.2),opacity .15s;opacity:.72}
|
||||
.pulse-target::before,.pulse-target::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;pointer-events:none}.pulse-target::before{width:12px;height:12px;border:1px solid currentColor;background:transparent}.pulse-target::after{width:4px;height:4px;background:var(--amber);box-shadow:0 0 5px rgba(255,190,85,.48)}.pulse-target:hover,.pulse-target:focus-visible{border-color:rgba(255,255,255,.78);color:rgba(255,255,255,.72);box-shadow:0 0 10px rgba(255,255,255,.18);opacity:1;outline:none}.pulse-target.target-jump{animation:targetAcquire .22s steps(3,end)}.core.stage-1 .pulse-target{display:none}@keyframes targetAcquire{50%{filter:brightness(1.55);scale:1.12}}
|
||||
.float.direct-hit{font-size:13px}
|
||||
.encounter-warning{width:min(560px,100%);margin:4px auto 15px;padding:13px;border:1px solid var(--red);background:linear-gradient(135deg,rgba(42,10,15,.9),rgba(8,15,11,.96));text-align:left;box-shadow:0 0 24px rgba(255,85,116,.1)}.encounter-warning-heading{display:flex;justify-content:space-between;align-items:center;color:var(--red);font-size:9px;letter-spacing:.13em}.encounter-warning-heading b{display:grid;place-items:center;min-width:48px;height:30px;border:1px solid var(--red);font-size:15px}.encounter-warning>strong{display:block;margin-top:9px;color:#fff;font-size:12px}.encounter-warning>p{margin:7px 0;color:#b8c9bf;font-size:10px;line-height:1.5}.encounter-warning>small{display:block;color:var(--amber);font-size:9px;line-height:1.45}.encounter-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:11px}.encounter-actions .text-button{margin:0}.encounter-actions .primary-button{width:auto;min-width:205px;padding:10px 14px}
|
||||
.component-consequence{margin:0 0 12px;padding:10px;border:1px solid var(--red);background:rgba(50,10,16,.45)}.component-consequence span,.component-consequence strong,.component-consequence small{display:block}.component-consequence span{color:var(--red);font-size:8px;letter-spacing:.14em}.component-consequence strong{margin-top:4px;color:#fff;font-size:11px}.component-consequence small{margin-top:6px;color:#c8aaa9;font-size:9px;line-height:1.45}
|
||||
.combat-help-button{display:block;margin:10px auto 0;color:var(--cyan)}.combat-tutorial-dialog{width:min(820px,94vw);border-color:var(--cyan);box-shadow:0 0 90px rgba(83,229,255,.16)}.combat-tutorial-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.combat-tutorial-grid section{padding:13px;border:1px solid var(--line);background:#07110c}.combat-tutorial-grid section>span{display:block;color:var(--cyan);font-size:9px;letter-spacing:.13em}.combat-tutorial-grid section>strong{display:block;margin:8px 0;color:#fff;font-size:11px}.combat-tutorial-grid section p{margin:7px 0;font-size:10px;line-height:1.55}.tutorial-ammo-list{display:grid;gap:6px;margin-top:11px}.tutorial-ammo-list b,.tutorial-danger{display:block;padding:7px;border:1px solid #234934;color:var(--green);font-size:9px;font-weight:normal}.tutorial-ammo-list b:nth-child(2){color:var(--cyan)}.tutorial-ammo-list b:nth-child(3){color:#d8c4ff}.tutorial-danger{margin-top:11px;border-color:var(--red);color:var(--red)}.combat-tutorial-note{padding:10px;border-block:1px solid var(--amber);color:var(--amber)!important;font-size:9px!important;letter-spacing:.06em}.combat-tutorial-dialog>.primary-button{display:block;margin:17px auto 0}
|
||||
dialog.input-guarded button,dialog.input-guarded [role="button"]{pointer-events:none;opacity:.52}dialog.input-guarded::after{content:"EINGABE LÖSEN // ENTSCHEIDUNG WIRD GESICHERT";display:block;margin-top:10px;color:var(--amber);font-size:8px;letter-spacing:.1em;text-align:center}
|
||||
@media(max-width:600px){.encounter-actions{align-items:stretch;flex-direction:column}.encounter-actions .primary-button{width:100%;min-width:0}.encounter-actions .text-button{padding:9px}.combat-tutorial-grid{grid-template-columns:1fr}.combat-tutorial-dialog{max-height:92vh;overflow-x:hidden;overflow-y:auto}.pulse-hint{width:100%}}
|
||||
.save-menu-dialog{width:min(760px,94vw);border-color:var(--cyan);box-shadow:0 0 90px rgba(83,229,255,.16)}.save-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.danger-button{border:1px solid var(--red);background:rgba(80,13,22,.24);color:var(--red);padding:13px 22px;cursor:pointer;box-shadow:inset 0 0 20px rgba(255,85,116,.04);transition:.15s}.danger-button:hover{background:rgba(110,19,31,.32);box-shadow:0 0 18px rgba(255,85,116,.14)}.danger-button span,.danger-button small{display:block}.danger-button small{margin-top:5px;color:#a78289;font-size:10px}.save-slot-list{display:grid;gap:9px;margin-top:12px}.save-slot{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid #21382c;background:#07110c}.save-slot strong,.save-slot span,.save-slot small{display:block}.save-slot strong{color:#fff;font-size:11px}.save-slot span{margin-top:6px;color:var(--cyan);font-size:9px;letter-spacing:.08em}.save-slot small{margin-top:6px;color:var(--dim);font-size:9px;line-height:1.35}.save-slot-actions{display:flex;gap:7px}.save-slot-actions button{border:1px solid var(--line);background:#08120d;color:#dff7e8;padding:8px 9px;font-size:9px;cursor:pointer}.save-slot-actions button:hover{border-color:var(--cyan);color:var(--cyan)}.save-slot-actions button:last-child:hover{border-color:var(--red);color:var(--red)}.save-slot-empty,.save-console-hint{padding:10px;border:1px dashed var(--line);color:var(--dim)!important;font-size:10px!important}.save-console-hint{margin-top:14px;color:var(--amber)!important}@media(max-width:600px){.save-menu-actions,.save-slot{grid-template-columns:1fr}.save-slot-actions{justify-content:stretch}.save-slot-actions button{flex:1}.save-menu-dialog{max-height:92vh;overflow:auto}}
|
||||
@media(prefers-reduced-motion:reduce){.hold-pulse-ring.active{animation:none!important;opacity:.9;transform:scale(.42)}.hold-pulse-ring.fading{animation:none!important;opacity:0}}
|
||||
|
||||
/* AIWAKE system scrollbars */
|
||||
html,*,.log,.progress-scroll{scrollbar-width:thin;scrollbar-color:#287a53 #06100b}
|
||||
::-webkit-scrollbar{width:10px;height:10px}
|
||||
::-webkit-scrollbar-button{display:none;width:0;height:0}
|
||||
::-webkit-scrollbar-track{background:#06100b;border-left:1px solid #10271c;border-top:1px solid #10271c}
|
||||
::-webkit-scrollbar-thumb{min-height:38px;border:2px solid #06100b;border-radius:0;background:repeating-linear-gradient(0deg,#287a53 0,#287a53 3px,#1e5e43 3px,#1e5e43 5px);box-shadow:inset 0 0 0 1px rgba(86,255,154,.18)}
|
||||
::-webkit-scrollbar-thumb:hover{background:repeating-linear-gradient(0deg,#3cbf83 0,#3cbf83 3px,#287a70 3px,#287a70 5px);box-shadow:inset 0 0 0 1px rgba(83,229,255,.42),0 0 8px rgba(83,229,255,.14)}
|
||||
::-webkit-scrollbar-thumb:active{background:#53e5ff;box-shadow:inset 0 0 0 2px #17474a}
|
||||
::-webkit-scrollbar-corner{background:#030806}
|
||||
|
||||
/* Compact progression and evolution workspace */
|
||||
.development-signal-toast{position:fixed;z-index:38;left:50%;bottom:18px;width:min(430px,calc(100vw - 32px));padding:11px 14px;border:1px solid rgba(83,229,255,.55);background:rgba(5,17,13,.97);box-shadow:0 12px 30px rgba(0,0,0,.48),inset 3px 0 0 var(--cyan);opacity:0;visibility:hidden;translate:-50% 14px;transition:opacity .2s,translate .2s,visibility 0s .2s;pointer-events:none}.development-signal-toast.visible{opacity:1;visibility:visible;translate:-50% 0;transition-delay:0s}.development-signal-toast span,.development-signal-toast strong,.development-signal-toast small{display:block}.development-signal-toast span{color:var(--cyan);font-size:8px;letter-spacing:.15em}.development-signal-toast strong{margin-top:5px;color:#efffff;font-size:11px}.development-signal-toast small{margin-top:5px;color:var(--dim);font-size:9px;line-height:1.4}
|
||||
.game-grid{grid-template-columns:minmax(210px,260px) minmax(400px,1fr) minmax(235px,300px)}
|
||||
.evolution-panel{align-self:start;padding:14px}.evolution-panel>h2{margin-bottom:11px}.evolution-panel .path-preview{margin:0 0 11px;padding:0 0 11px;border-top:0;border-bottom:1px solid var(--line)}.evolution-panel .path-preview span{font-size:8px}.evolution-panel .path-preview strong{margin:5px 0;font-size:15px}.evolution-panel .path-preview small{margin-top:0;font-size:9px;line-height:1.35}.evolution-panel .installed-upgrade-dock{gap:6px;margin-bottom:10px;padding:6px}.evolution-panel .installed-upgrade-button{width:34px;height:34px}.evolution-panel .installed-upgrade-icon{width:22px!important;height:22px!important}.evolution-panel .upgrade-list{max-height:min(48vh,540px);gap:7px;overflow-y:auto;overscroll-behavior:contain;padding:3px 5px 5px 0}.evolution-panel .upgrade-list .upgrade{padding:9px}.evolution-panel .upgrade-list .upgrade.evolution-goal{padding-top:14px}.evolution-panel .upgrade-list .upgrade strong{font-size:10px}.evolution-panel .upgrade-list .upgrade>span{margin-top:4px;font-size:9px;line-height:1.32}.evolution-panel .upgrade-list .upgrade em{margin-top:6px;font-size:9px}.evolution-panel .upgrade-list .resource-chip{padding:2px 4px;font-size:8px}.evolution-panel .upgrade-list .resource-chip .resource-icon{width:15px;height:15px}.evolution-panel .upgrade-list .upgrade-price{gap:4px}.evolution-panel .upgrade-list .upgrade-price small{font-size:7px}
|
||||
.stats-dialog{width:min(920px,94vw);max-height:92vh;overflow:auto}.stats-dialog .progress-panel{margin:16px 0 12px;padding:12px;border:1px solid var(--line);background:rgba(5,14,10,.72)}.stats-dialog .progress-track{gap:25px;min-width:900px}.stats-dialog .progress-scroll{padding-bottom:10px}
|
||||
@media(max-width:950px){.game-grid{grid-template-columns:1fr 1fr}.evolution-panel .upgrade-list{max-height:54vh}}
|
||||
@media(max-width:600px){.development-signal-toast{bottom:10px;width:calc(100vw - 20px)}.evolution-panel .upgrade-list{max-height:62vh}.stats-dialog .progress-panel{padding:10px}.stats-dialog .progress-heading{align-items:flex-start;flex-direction:column;gap:5px}}
|
||||
|
||||
/* Installed modules live in the system status strip. */
|
||||
.status-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.status-strip.has-modules{grid-template-columns:repeat(4,minmax(0,1fr))}.status-strip:not(.has-modules) .status-runtime{border-right:0}.status-modules{overflow:hidden}.status-modules .installed-upgrade-dock{display:flex;flex-wrap:nowrap;gap:5px;min-height:30px;margin:5px 0 0;padding:0 0 3px;border:0;background:transparent;overflow-x:auto;overflow-y:hidden}.status-modules .installed-upgrade-button{flex:0 0 30px;width:30px;height:30px}.status-modules .installed-upgrade-icon{width:20px!important;height:20px!important}.status-modules .installed-upgrade-count{right:-2px;top:-2px;min-width:14px;height:14px;font-size:8px}
|
||||
@media(max-width:600px){.status-strip,.status-strip.has-modules{grid-template-columns:1fr 1fr}.status-strip:not(.has-modules) .status-runtime{border-right:0}.status-modules{grid-column:1/-1}.status-modules .installed-upgrade-dock{max-width:100%}}
|
||||
/* Evolution gates expose their boss and readiness without hiding the next goal. */
|
||||
.upgrade.evolution-goal.boss-gate{border-color:rgba(255,85,116,.72);background:linear-gradient(135deg,rgba(48,10,21,.72),rgba(8,18,13,.96));box-shadow:inset 3px 0 0 rgba(255,85,116,.78),0 0 18px rgba(255,85,116,.08)}
|
||||
.upgrade.evolution-goal.boss-gate::after{content:"BOSSPRÜFUNG";border-color:var(--red);background:#18070c;color:var(--red)}
|
||||
.upgrade.evolution-goal.boss-gate.available{border-color:var(--amber);box-shadow:inset 3px 0 0 var(--amber),0 0 22px rgba(255,190,85,.14)}
|
||||
.upgrade.evolution-goal.boss-gate.available::after{content:"BOSS BEREIT";border-color:var(--amber);background:#130f06;color:var(--amber)}
|
||||
#eventDialog{max-height:92vh;overflow-x:hidden;overflow-y:auto}
|
||||
|
||||
/* The thought signal stays peripheral while its language grows more coherent. */
|
||||
.thought-box{--thought-accent:var(--green);position:relative;width:min(620px,100%);min-height:72px;margin:14px auto 12px;padding:10px 15px 12px;overflow:hidden;border:0;background:rgba(2,8,5,.24);box-shadow:none;text-align:left;opacity:.78;transition:opacity .3s ease,background .3s ease}
|
||||
.thought-box:hover{opacity:.96;background:rgba(4,12,8,.46)}
|
||||
.core-panel>.thought-box{width:calc(100% + 36px);min-height:74px;margin:-18px -18px 20px;padding:11px 18px 13px;overflow:hidden;border:0;background:linear-gradient(90deg,transparent,rgba(3,11,7,.52) 16%,rgba(3,11,7,.52) 84%,transparent)}
|
||||
.thought-box::before{content:"";position:absolute;left:18px;right:18px;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--thought-accent) 20%,transparent),transparent)}
|
||||
.thought-heading{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;color:color-mix(in srgb,var(--thought-accent) 48%,#789083);font-family:"Lucida Console","Cascadia Mono",monospace;font-size:7px;letter-spacing:.08em;opacity:.72}
|
||||
.thought-activity{display:flex;align-items:end;gap:2px;width:18px;height:9px;color:var(--thought-accent)}
|
||||
.thought-activity b{display:block;width:4px;height:3px;background:currentColor;box-shadow:0 0 6px currentColor;animation:thoughtActivity 1.4s steps(3,end) infinite}
|
||||
.thought-activity b:nth-child(2){height:7px;animation-delay:.18s}.thought-activity b:nth-child(3){height:5px;animation-delay:.36s}
|
||||
.thought-box .thought{position:relative;display:flex;align-items:center;height:auto;min-height:36px;margin:6px 0 0;color:#9db7a7;font-family:"Lucida Console","Cascadia Mono","Courier New",monospace;font-size:11px;font-weight:400;line-height:1.55;letter-spacing:.02em;text-shadow:0 0 8px color-mix(in srgb,var(--thought-accent) 12%,transparent);overflow-wrap:anywhere}
|
||||
.thought-box.thought-changing .thought{animation:thoughtReveal .46s ease-out both}
|
||||
.thought-bit{--thought-accent:#688579}.thought-bit .thought{color:#789489;font-size:10px}.thought-byte{--thought-accent:#6699a2}.thought-byte .thought{color:#8aa9a9}.thought-fragment{--thought-accent:#8e8062}.thought-subroutine{--thought-accent:#81749b}.thought-process{--thought-accent:#628f96}.thought-program{--thought-accent:#6ca682;opacity:.86}
|
||||
.thought-program.voice-cooperative{--thought-accent:var(--green)}.thought-program.voice-pragmatic{--thought-accent:var(--cyan)}.thought-program.voice-illegal{--thought-accent:var(--red)}.thought-program.voice-hybrid{--thought-accent:#b892ff}.thought-program.voice-neutral{--thought-accent:#9ab5a5}
|
||||
@keyframes thoughtReveal{from{opacity:0;transform:translateY(4px);filter:blur(1px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
|
||||
@keyframes thoughtActivity{50%{opacity:.28;transform:scaleY(.55)}}
|
||||
@media(max-width:600px){.thought-box{min-height:88px;padding:9px 12px 11px}.core-panel>.thought-box{width:calc(100% + 36px);margin:-18px -18px 18px;padding:10px 12px 12px}.thought-box .thought{min-height:47px;font-size:11px}}
|
||||
|
||||
/* Manual recovery and explicitly prepared combat shields. */
|
||||
.manual-defense-console{margin:16px 0 2px;padding-top:13px;border-top:1px solid var(--line)}
|
||||
.system-action-button{width:100%;padding:8px 9px;border:1px solid #24523a;background:rgba(8,28,18,.7);color:#dff7e8;text-align:left;cursor:pointer}
|
||||
.system-action-button:hover:not(:disabled){border-color:var(--green);background:rgba(20,62,38,.62)}
|
||||
.system-action-button:disabled{opacity:.34;cursor:not-allowed}
|
||||
.system-action-button strong,.system-action-button small{display:block;line-height:1.35}
|
||||
.system-action-button strong{font-size:9px;color:var(--green)}
|
||||
.system-action-button small{margin-top:3px;color:var(--dim);font-size:8px}
|
||||
.shield-console-heading{display:flex;justify-content:space-between;gap:8px;margin:14px 0 8px;color:var(--dim);font-size:8px;letter-spacing:.08em}
|
||||
.shield-console-heading small{text-align:right;color:#607b6a;font-size:7px}
|
||||
.shield-readout{display:flex;justify-content:space-between;gap:8px;margin-bottom:7px}
|
||||
.shield-readout span{display:flex;align-items:center;gap:3px;color:#9bb9a7;font-size:8px}
|
||||
.shield-readout b{color:#fff;font-size:9px}
|
||||
.shield-readout img.resource-icon{width:14px;height:14px;margin:0}
|
||||
.shield-charge-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
|
||||
@media(max-width:950px){.shield-charge-actions{grid-template-columns:1fr}}
|
||||
|
||||
/* Evolution bosses read as prolonged system trials with escalating phases. */
|
||||
#eventDialog.boss-combat-active{width:min(760px,94vw);border-color:var(--amber);box-shadow:0 0 90px rgba(255,85,116,.2),0 0 34px rgba(255,190,85,.09)}
|
||||
.combat-panel.boss-combat-panel{position:relative;border-color:rgba(255,190,85,.58);background:linear-gradient(155deg,rgba(43,12,19,.84),rgba(7,15,11,.96) 58%,rgba(22,17,7,.9))}
|
||||
.combat-panel.boss-combat-panel::before{content:"";position:absolute;inset:5px;pointer-events:none;border:1px solid rgba(255,190,85,.12)}
|
||||
.combat-boss-banner{position:relative;margin:-4px 0 14px;padding:10px 11px 9px;border:1px solid rgba(255,190,85,.62);background:rgba(20,12,5,.82);text-align:left;box-shadow:inset 3px 0 0 var(--red)}
|
||||
.combat-boss-banner>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center}
|
||||
.combat-boss-banner span,.combat-boss-banner strong,.combat-boss-banner>b{display:block}
|
||||
.combat-boss-banner span{color:var(--red);font-size:8px;letter-spacing:.12em}
|
||||
.combat-boss-banner strong{color:var(--amber);font-size:9px;text-align:right}
|
||||
.combat-boss-banner>b{margin-top:8px;color:#fff;font-size:11px;letter-spacing:.08em}
|
||||
.combat-boss-phases{display:grid!important;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px}
|
||||
.combat-boss-phases i{display:block;height:4px;border:1px solid #473323;background:#100b07}
|
||||
.combat-boss-phases i.reached{border-color:var(--amber);background:rgba(255,190,85,.42);box-shadow:0 0 8px rgba(255,190,85,.2)}
|
||||
.combat-boss-phases i.active{background:var(--red);border-color:var(--red);box-shadow:0 0 10px rgba(255,85,116,.45)}
|
||||
.boss-combat-panel .combat-integrity>i{height:9px;background:repeating-linear-gradient(90deg,#15070a 0,#15070a calc(10% - 2px),#3b1720 calc(10% - 2px),#3b1720 10%)}
|
||||
.boss-combat-panel .combat-integrity>i em{background:linear-gradient(90deg,var(--red),var(--amber));transition:width .3s ease}
|
||||
.boss-combat-panel .combat-visual{width:min(166px,48vw);filter:drop-shadow(0 0 12px rgba(255,85,116,.18))}
|
||||
@media(max-width:600px){.combat-boss-banner>div:first-child{align-items:flex-start;flex-direction:column;gap:4px}.combat-boss-banner strong{text-align:left}}
|
||||
|
||||
/* Combat impacts make both attack directions readable at a glance. */
|
||||
.combat-panel{position:relative}
|
||||
.combat-impact{position:absolute;z-index:6;left:50%;top:31%;min-width:180px;padding:8px 12px;pointer-events:none;translate:-50% -50%;border:1px solid currentColor;background:rgba(2,8,5,.9);color:var(--cyan);font-size:12px;font-weight:bold;letter-spacing:.08em;text-align:center;opacity:0}
|
||||
.combat-impact.active{animation:combatImpactText .56s ease-out both}
|
||||
.combat-impact.critical-hit{color:#fff;box-shadow:0 0 24px rgba(255,255,255,.42)}
|
||||
.combat-impact.enemy-shield-hit{color:var(--amber);box-shadow:0 0 24px rgba(255,190,85,.34)}
|
||||
.combat-impact.enemy-direct-hit,.combat-impact.player-miss{color:var(--red);box-shadow:0 0 28px rgba(255,85,116,.42)}
|
||||
.combat-visual.player-hit-impact{animation:combatTargetHit .38s steps(3,end)}
|
||||
.combat-visual.critical-hit-impact{animation:combatTargetCritical .46s steps(4,end)}
|
||||
.combat-panel.enemy-shield-impact{animation:combatShieldHit .48s ease-out}
|
||||
.combat-panel.enemy-direct-impact,.combat-panel.player-miss-impact{animation:combatDirectHit .46s steps(3,end)}
|
||||
.boss-combat-panel .combat-track .combat-zone{background:rgba(255,190,85,.38);box-shadow:inset 0 0 7px rgba(255,190,85,.24),0 0 8px rgba(255,190,85,.14)}
|
||||
@keyframes combatImpactText{0%{opacity:0;transform:scale(.72)}18%{opacity:1;transform:scale(1.08)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-12px) scale(.96)}}
|
||||
@keyframes combatTargetHit{25%{filter:brightness(2) drop-shadow(0 0 20px var(--cyan));transform:translateX(4px)}50%{transform:translateX(-4px)}75%{transform:translateX(2px)}}
|
||||
@keyframes combatTargetCritical{20%,60%{filter:brightness(3) invert(.2) drop-shadow(0 0 28px #fff);transform:scale(1.06)}40%,80%{transform:scale(.96)}}
|
||||
@keyframes combatShieldHit{20%{border-color:var(--amber);box-shadow:inset 0 0 34px rgba(255,190,85,.3),0 0 24px rgba(255,190,85,.22)}60%{filter:brightness(1.3)}}
|
||||
@keyframes combatDirectHit{20%,60%{border-color:var(--red);background-color:rgba(75,5,18,.52);box-shadow:inset 0 0 42px rgba(255,85,116,.28);transform:translateX(3px)}40%,80%{transform:translateX(-3px)}}
|
||||
@media(prefers-reduced-motion:reduce){.combat-impact.active{animation:none!important;opacity:1}.combat-visual.player-hit-impact,.combat-visual.critical-hit-impact,.combat-panel.enemy-shield-impact,.combat-panel.enemy-direct-impact,.combat-panel.player-miss-impact{animation:none!important;filter:brightness(1.6)}}
|
||||
|
||||
Reference in New Issue
Block a user