:root { --bright:#ffd98a; --accent:#c84b16; --dark:#5d1608; --border:#ffb34d; --glow:rgba(255,136,38,.5); --page:#6b3415; --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px); }
* { box-sizing:border-box; }
html { min-height:100%; min-height:100dvh; overflow-y:auto; touch-action:manipulation; }
body { min-height:100vh; min-height:100dvh; margin:0; overflow:visible; background:radial-gradient(circle at 50% 0%, var(--page), #1b0e08 52%, #060303 100%); color:#fff8e8; font-family:'Exo',sans-serif; transition:background .6s ease; }
body[data-forge-status="1"] { --bright:#fff0a6; --accent:#d77b19; --dark:#61310a; --border:#f5bd4f; --glow:rgba(245,189,79,.5); --page:#8a4d12; }
body[data-forge-status="2"] { --bright:#f4ffb0; --accent:#8bad22; --dark:#314509; --border:#c8e85a; --glow:rgba(174,211,54,.5); --page:#526b15; }
body[data-forge-status="3"] { --bright:#c5ffd5; --accent:#2aaf62; --dark:#0a4d2b; --border:#67e898; --glow:rgba(54,210,112,.5); --page:#17613a; }
body[data-forge-status="4"] { --bright:#d5fffa; --accent:#1aa99d; --dark:#07524e; --border:#8ff9ec; --glow:rgba(66,216,200,.5); --page:#166d66; }
body[data-forge-status="5"] { --bright:#d7f8ff; --accent:#1b9bc6; --dark:#06445e; --border:#79dcfa; --glow:rgba(54,183,225,.5); --page:#17627e; }
body[data-forge-status="6"] { --bright:#e4f0ff; --accent:#357fca; --dark:#112f59; --border:#9ac5f5; --glow:rgba(95,168,255,.52); --page:#255c91; }
body[data-forge-status="7"] { --bright:#f0e4ff; --accent:#7650c8; --dark:#2f165f; --border:#bda2f5; --glow:rgba(150,105,232,.52); --page:#4e347d; }
body[data-forge-status="8"] { --bright:#ffe3f0; --accent:#d34583; --dark:#681638; --border:#f598bf; --glow:rgba(236,83,148,.52); --page:#842c55; }
body[data-forge-status="9"] { --bright:#fff; --accent:#e85b4f; --dark:#6b1010; --border:#fff2bd; --glow:rgba(255,239,190,.68); --page:#9d3b2f; }
.FullscreenButton { display:grid; width:36px; height:34px; place-items:center; border:1px solid var(--border); border-radius:5px; background:#28150b; color:#fff7d1; cursor:pointer; font-size:1.35rem; }
.FullscreenButton[hidden] { display:none; }
.FullscreenExitIcon { display:none; grid-template-columns:repeat(2,12px); grid-template-rows:repeat(2,12px); place-items:center; font-family:monospace; font-size:.8rem; line-height:1; }
.FullscreenButton.active .FullscreenEnterIcon { display:none; }
.FullscreenButton.active .FullscreenExitIcon { display:grid; }
.CoreForgePage { width:min(560px,calc(100% - 2em)); margin:0 auto; padding:3em 0; text-align:center; }
#game-title { margin:0; color:#fff7d1; font-family:'Orbitron',sans-serif; font-size:clamp(2rem,10vw,3.5rem); letter-spacing:.08em; text-shadow:0 0 24px #ff9d38; }
#game-subtitle { margin:.6em 0 1.6em; color:#ffc77a; font-size:1.2rem; font-style:italic; }
.ForgePanel { position:relative; padding:1.25em; border:1px solid var(--border); border-radius:14px; background:rgba(41,18,6,.9); box-shadow:0 0 30px var(--glow); }
.ForgeStats { display:grid; grid-template-columns:1fr minmax(150px,1.25fr) 1fr; align-items:center; gap:.75em; color:#e8b879; font-family:'Orbitron',sans-serif; font-size:.8rem; }
body:not([data-forge-status]) .ForgeStats { grid-template-columns:repeat(2,1fr); }
.ForgeStats strong { color:#fff7d1; font-size:1.15rem; }
.CurrentStatusBadge { position:relative; display:flex; min-width:0; align-items:center; justify-content:center; gap:.55em; padding:.45em .6em .8em; border:1px solid var(--border); border-radius:6px; background:rgba(0,0,0,.2); }
.CurrentStatusBadge[hidden] { display:none; }
.CurrentStatusBadge strong { display:block; overflow:hidden; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.StatusProgress { position:absolute; right:.6em; bottom:.3em; left:.6em; height:3px; overflow:hidden; border:1px solid rgba(255,247,209,.32); border-radius:2px; background:rgba(0,0,0,.35); }
.StatusProgressFill { display:block; width:var(--status-progress,0%); height:100%; background:var(--bright); box-shadow:0 0 6px var(--glow); transition:width .3s ease; }
.StatusMedallion { display:block; flex:0 0 44px; width:44px; aspect-ratio:1; border:1px solid var(--border); border-radius:50%; background-image:url('../images/status-badges.svg?v=20260826-160729'),radial-gradient(circle at 35% 30%,var(--bright),var(--accent) 55%,var(--dark)); background-position:var(--badge-x,0%) var(--badge-y,0%),center; background-repeat:no-repeat; background-size:500% 400%,auto; box-shadow:0 0 12px var(--glow); }
.ForgeStage { position:relative; display:grid; width:min(360px,100%); aspect-ratio:1; margin:.3em auto; overflow:hidden; place-items:center; border-radius:50%; }
.ForgeEnergyBurst { position:absolute; z-index:3; top:30%; color:var(--bright); font-family:'Orbitron',sans-serif; font-size:1.15rem; font-weight:800; opacity:0; pointer-events:none; }
.ForgeEnergyBurst.active { animation:energyBurst .6s ease-out; }
.ForgeButton { position:relative; z-index:1; display:flex; width:min(260px,72%); aspect-ratio:1; align-items:center; justify-content:center; flex-direction:column; gap:.4em; border:3px solid var(--border); border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--bright),var(--accent) 55%,var(--dark)); color:#fff7d1; cursor:pointer; font-family:'Orbitron',sans-serif; font-size:clamp(1.2rem,6vw,2rem); font-weight:900; box-shadow:0 0 25px var(--glow),inset 0 0 20px rgba(255,255,255,.25); }
.ForgeButton:hover,.ForgeButton:focus-visible { outline:3px solid var(--bright); outline-offset:4px; }
.ForgeButton.tapPulse { animation:forgeTap .26s ease-out; }
.UpgradeBox { padding:1em; border:1px solid var(--border); border-radius:8px; background:rgba(0,0,0,.18); }
#upgradeInfo { margin:0 0 .8em; color:#e8b879; font-size:1.05rem; }
.HandednessPreference { display:none; }
.GameButton,.QuitButton { display:inline-block; border:1px solid var(--border); border-radius:6px; background:#6b2d12; color:#fff7d1; cursor:pointer; font-family:'Orbitron',sans-serif; padding:.6em 1em; text-decoration:none; }
.GameButton:disabled { cursor:not-allowed; opacity:.5; }
.QuitButton { margin-top:1em; background:transparent; color:#ffc77a; }
#gameStatus { min-height:1.5em; margin:.9em 0 0; color:var(--bright); }
.ForgeActions { position:relative; display:flex; min-height:34px; align-items:center; justify-content:flex-start; margin-top:.9em; }
.ForgeActions .GameButton { position:absolute; left:50%; margin:0; transform:translateX(-50%); }
.ForgeActions .QuitButton { display:inline-grid; width:36px; height:34px; place-items:center; margin:0 0 0 auto; padding:0; font-size:1.25rem; }
.GameHelp { margin-top:1.5em; color:rgba(255,239,201,.7); font-size:1.05rem; line-height:1.4; }
.ultimate-forge { --bright:#fffef0; --accent:#f0b82e; --dark:#7d1712; --border:#fff0a6; --glow:rgba(255,221,105,.78); --page:#a84626; }
.ultimate-forge .ForgePanel { animation:ultimatePanelGlow 4s ease-in-out infinite; }
.ultimate-forge .ForgeButton { animation:ultimateCorePulse 2.8s ease-in-out infinite; }
.ultimate-forge .ForgeButton::before,.ultimate-forge .ForgeButton::after { position:absolute; display:block; border-radius:50%; content:''; pointer-events:none; }
.ultimate-forge .ForgeButton::before { inset:-14%; border:2px dashed rgba(255,240,166,.8); animation:ultimateRing 9s linear infinite; }
.ultimate-forge .ForgeButton::after { inset:-27%; border:1px solid rgba(255,255,255,.45); border-right-color:#f0b82e; border-left-color:#f0b82e; animation:ultimateRingReverse 13s linear infinite; }
.ultimate-forge .StatusMedallion { animation:ultimateCrown 2.8s ease-in-out infinite; }
.unlockedPulse { animation:statusUnlock .7s ease-out; }
@keyframes statusUnlock { 45% { transform:scale(1.08); box-shadow:0 0 26px rgba(255,224,154,.7); } }
@keyframes forgeTap { 40% { transform:scale(.94); box-shadow:0 0 12px var(--glow),inset 0 0 10px rgba(255,255,255,.18); } 100% { transform:scale(1); } }
@keyframes energyBurst { 0% { opacity:0; transform:translateY(10px) scale(.8); } 30% { opacity:1; } 100% { opacity:0; transform:translateY(-45px) scale(1.15); } }
@keyframes ultimateCorePulse { 0%,100% { box-shadow:0 0 28px var(--glow),0 0 55px rgba(255,196,46,.28),inset 0 0 22px rgba(255,255,255,.3); } 50% { box-shadow:0 0 42px var(--glow),0 0 95px rgba(255,196,46,.58),inset 0 0 35px rgba(255,255,255,.55); } }
@keyframes ultimatePanelGlow { 0%,100% { box-shadow:0 0 30px var(--glow); } 50% { box-shadow:0 0 48px rgba(255,221,105,.58); } }
@keyframes ultimateRing { to { transform:rotate(360deg); } }
@keyframes ultimateRingReverse { to { transform:rotate(-360deg); } }
@keyframes ultimateCrown { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@media (max-width:600px) { .CoreForgePage { width:calc(100% - 1em); padding-top:2em; } .ForgeStats { grid-template-columns:repeat(2,minmax(0,1fr)); } .CurrentStatusBadge { grid-column:1 / -1; grid-row:2; justify-self:center; width:min(100%,240px); } .ForgeStage { width:min(280px,82vw); } }
@media (max-width:600px) and (orientation:portrait) { .CoreForgePage { padding-top:calc(var(--safe-top) + 1em); padding-bottom:calc(var(--safe-bottom) + 6em); } #game-title { font-size:clamp(2rem,10vw,2.5rem); } #game-subtitle { margin:.25em 0 .55em; font-size:1rem; } .ForgePanel { padding:.75em; } .ForgeStats { gap:.4em; } .ForgeStage { width:min(200px,58vw); margin:.1em auto; } .ForgeButton { width:min(170px,82%); font-size:1.25rem; } .UpgradeBox { padding:.65em; } #upgradeInfo { margin-bottom:.45em; font-size:.9rem; } #gameStatus { margin-top:.45em; } .ForgeActions { margin-top:.45em; } .GameHelp { margin-top:.45em; font-size:.9rem; } }
@media (orientation:landscape) and (max-height:500px) { body { padding-right:var(--safe-right); padding-left:var(--safe-left); } .CoreForgePage { width:min(760px,calc(100% - 1em)); padding:calc(var(--safe-top) + 1em) 0 calc(var(--safe-bottom) + 1em); } #game-title { font-size:clamp(1.5rem,8vh,2rem); } #game-subtitle { margin:.2em 0 .7em; font-size:.9rem; } .ForgePanel { display:grid; grid-template-columns:1fr minmax(150px,190px); grid-template-areas:'stats stats' 'upgrade forge' 'handedness forge' 'status forge' 'reset forge'; gap:.4em 1em; align-items:center; padding:.65em; } body[data-handedness='left'] .ForgePanel { grid-template-columns:minmax(150px,190px) 1fr; grid-template-areas:'stats stats' 'forge upgrade' 'forge handedness' 'forge status' 'forge reset'; } .ForgeStats { grid-area:stats; } .ForgeStage { grid-area:forge; width:min(190px,42dvh); margin:0 auto; } .ForgeButton { width:min(170px,38dvh); padding:.5em; font-size:1rem; } .UpgradeBox { grid-area:upgrade; padding:.55em; } .HandednessPreference { grid-area:handedness; display:flex; align-items:center; justify-content:center; gap:.45em; color:#ffc77a; font-size:.85rem; } #gameStatus { grid-area:status; margin:0; } .ForgeActions { grid-area:reset; margin:0; } .GameHelp { margin-top:.1em; } }
@media (prefers-reduced-motion:reduce) { .ultimate-forge .ForgePanel,.ultimate-forge .ForgeButton,.ultimate-forge .ForgeButton::before,.ultimate-forge .ForgeButton::after,.ultimate-forge .StatusMedallion,.unlockedPulse,.ForgeButton.tapPulse,.ForgeEnergyBurst.active { animation:none; } }