:root{
  color-scheme:dark;
  --ink:#06100c;--panel:#0b1912;--panel2:#10241a;
  --line:#4a7c6f;--soft:rgba(74,124,111,.26);
  --cream:#f5ecd0;--muted:#91a096;--gold:#c8a84b;--gold2:#ead27d;
  --cyan:#79d9c0;--danger:#cf726a;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0d1812}
body{display:grid;place-items:center;font-family:Arial,Helvetica,sans-serif;color:var(--cream)}
button,a,input{font:inherit}
button{touch-action:manipulation}
#game-shell{
  position:relative;width:min(620px,100vw);height:min(900px,100dvh);overflow:hidden;
  border:2px solid var(--line);border-radius:10px;background:var(--ink);
  box-shadow:0 28px 80px rgba(0,0,0,.58);isolation:isolate
}
#bg{--bg-opacity:.24;position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.82) brightness(.58) contrast(1.04);transition:opacity .34s ease}
#bg img.active{opacity:var(--bg-opacity)}
#bg:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(3,12,8,.40),rgba(3,12,8,.74))}
#topbar{position:relative;z-index:7;height:48px;padding:7px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:7px;align-items:center}
#hud{display:flex;gap:12px;flex-wrap:wrap;color:#cdd5cf;font-size:11px;letter-spacing:.25px}
.tiny{min-height:30px;padding:4px 9px;border:1px solid var(--line);border-radius:5px;color:#b6c3bb;background:rgba(6,16,12,.76);cursor:pointer}
.tiny:hover{border-color:var(--gold);color:var(--cream)}
.tiny.close{font-size:20px;line-height:18px;min-width:32px}
#game-area{position:relative;z-index:2;height:calc(100% - 48px);display:flex;flex-direction:column;align-items:center;padding:2px 14px 16px}
#title-block{text-align:center;flex:0 0 auto}
.brand,.kicker{margin:0;color:var(--gold);font-size:9px;font-weight:700;letter-spacing:6px}
#title-block h1{margin:1px 0 0;font:500 clamp(28px,7vw,42px)/1 Georgia,serif;letter-spacing:3px}
#subtitle{margin:5px 0 0;color:var(--cyan);font-size:9px;font-weight:700;letter-spacing:1.45px}

#play-panel{position:relative;width:min(100%,500px);flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 4px 10px}
#goal-line{width:min(430px,92%);display:flex;justify-content:space-between;align-items:flex-end;margin:0 0 8px;color:#9caaa1;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
#goal-line strong{color:var(--gold2);font:600 18px/1 Georgia,serif;letter-spacing:1px}
#progress-track{width:min(430px,92%);height:5px;border-radius:99px;overflow:hidden;background:rgba(74,124,111,.24);box-shadow:inset 0 0 0 1px rgba(74,124,111,.22)}
#progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--line),var(--cyan),var(--gold2));transition:width .18s ease-out}

#gain-button{
  position:relative;width:clamp(190px,49vw,260px);aspect-ratio:1;border-radius:50%;margin:30px 0 20px;
  display:grid;place-items:center;border:1px solid rgba(200,168,75,.72);color:var(--cream);
  background:radial-gradient(circle at 45% 37%,rgba(121,217,192,.2),rgba(9,24,17,.92) 49%,rgba(2,9,6,.98) 72%);
  box-shadow:0 0 0 8px rgba(200,168,75,.035),0 0 50px rgba(121,217,192,.08),inset 0 0 38px rgba(121,217,192,.08);
  cursor:pointer;user-select:none;-webkit-user-select:none;outline:none;transition:transform .08s ease,border-color .2s ease,box-shadow .2s ease
}
#gain-button:hover{border-color:var(--gold2);box-shadow:0 0 0 9px rgba(200,168,75,.05),0 0 60px rgba(121,217,192,.12),inset 0 0 42px rgba(121,217,192,.12)}
#gain-button:active,#gain-button.hit{transform:scale(.965)}
#gain-button>span#total-value{position:relative;z-index:3;font:600 clamp(42px,10vw,66px)/1 Georgia,serif;letter-spacing:-2px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
#gain-button small{position:absolute;z-index:3;bottom:52px;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:1.2px}

#lifeform{--growth:.68;position:absolute;inset:19%;z-index:1;pointer-events:none;transform:scale(var(--growth));transition:transform .2s ease}
#lifeform b{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:42% 58% 53% 47%;border:1px solid rgba(234,210,125,.48);background:radial-gradient(circle at 38% 34%,rgba(234,210,125,.3),rgba(121,217,192,.12) 40%,rgba(5,14,10,.12) 72%);box-shadow:0 0 24px rgba(121,217,192,.12);animation:lifeCore 5s ease-in-out infinite}
#lifeform i{--a:calc(var(--i)*36deg);position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;border:1px solid rgba(121,217,192,.24);background:rgba(5,18,13,.7);opacity:.25;transform:rotate(var(--a)) translateY(-58px) rotate(calc(-1*var(--a)));transition:opacity .18s,background .18s,box-shadow .18s,transform .18s}
#lifeform i.on{opacity:.86;background:var(--cyan);border-color:#dffff7;box-shadow:0 0 10px rgba(121,217,192,.62)}
#lifeform.hot i.on{background:var(--gold2);border-color:#fff1aa;box-shadow:0 0 12px rgba(234,210,125,.72)}
#lifeform.hot b{box-shadow:0 0 30px rgba(234,210,125,.2)}
@keyframes lifeCore{0%,100%{border-radius:42% 58% 53% 47%;transform:translate(-50%,-50%) rotate(0deg)}50%{border-radius:57% 43% 46% 54%;transform:translate(-50%,-50%) rotate(16deg)}}
#drift-status{min-width:88px;color:#7f9086;text-align:left;letter-spacing:.7px}
#drift-status.falling{color:var(--danger);text-shadow:0 0 8px rgba(207,114,106,.18)}

.pulse-ring{position:absolute;inset:6%;border-radius:50%;border:1px solid rgba(121,217,192,.22);opacity:.65;pointer-events:none}
.ring-a{animation:pulseA 2.4s ease-out infinite}
.ring-b{animation:pulseA 2.4s 1.2s ease-out infinite}
@keyframes pulseA{0%{transform:scale(.78);opacity:0}30%{opacity:.45}100%{transform:scale(1.15);opacity:0}}
#gain-button.streaking{box-shadow:0 0 0 9px rgba(200,168,75,.06),0 0 70px rgba(234,210,125,.18),inset 0 0 50px rgba(121,217,192,.16)}

#streak-wrap{display:flex;align-items:center;justify-content:center;gap:9px;min-height:20px;color:#7f9086;font-size:9px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;flex-wrap:wrap}
.streak-dots{display:flex;gap:4px}
.streak-dots i{display:block;width:7px;height:7px;border-radius:50%;border:1px solid #48665a;background:transparent;transition:.14s ease}
.streak-dots i.on{background:var(--gold2);border-color:var(--gold2);box-shadow:0 0 10px rgba(234,210,125,.45)}
#game-hint{max-width:410px;margin:13px 0 0;text-align:center;color:#93a298;font-size:10px;line-height:1.5}
#float-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.float-gain{position:absolute;left:50%;top:49%;color:var(--gold2);font-weight:800;font-size:13px;text-shadow:0 2px 5px #000;animation:floatGain .65s ease-out forwards}
@keyframes floatGain{from{transform:translate(-50%,0) scale(.9);opacity:1}to{transform:translate(calc(-50% + var(--dx)), -70px) scale(1.08);opacity:0}}

.screen{position:absolute;inset:0;z-index:10;display:none;align-items:center;justify-content:center;padding:54px 18px 18px;background:rgba(3,12,8,.84);backdrop-filter:blur(7px)}
.screen.open{display:flex}
.card{width:min(510px,100%);max-height:100%;overflow:auto;border:1px solid rgba(74,124,111,.6);border-radius:12px;padding:28px 26px;background:linear-gradient(180deg,rgba(12,28,20,.97),rgba(5,15,10,.985));box-shadow:0 24px 70px rgba(0,0,0,.5);text-align:center}
.card h2{margin:7px 0 5px;font:500 clamp(31px,8vw,48px)/1 Georgia,serif;letter-spacing:2px}
.card-sub{margin:8px auto 18px;color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:1.55px}
.intro{max-width:440px;margin:0 auto;color:#c9d0cb;font-size:13px;line-height:1.62}
.choice-box{margin:24px auto 22px;padding:19px 20px 14px;border:1px solid var(--soft);border-radius:10px;background:rgba(121,217,192,.035)}
.choice-box label{display:block;color:#c4cec7;font-size:12px;line-height:1.45}
.choice-box output{display:block;margin:11px 0 6px;color:var(--gold2);font:600 42px/1 Georgia,serif}
.choice-box input{width:100%;accent-color:var(--gold);cursor:pointer}
.range-labels{display:flex;justify-content:space-between;color:#65766c;font-size:9px;margin-top:2px}
.start-actions,.decision-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}
.primary,.secondary,.decision{min-height:43px;border-radius:7px;padding:9px 12px;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10px;letter-spacing:.9px}
.primary{border:1px solid var(--gold);background:linear-gradient(180deg,#d6b75d,#a88835);color:#08110d;box-shadow:0 7px 22px rgba(200,168,75,.15)}
.primary:hover{filter:brightness(1.08)}
.secondary,.decision{border:1px solid var(--line);background:rgba(6,16,12,.7);color:#c3cec7}
.secondary:hover,.decision:hover{border-color:var(--gold);color:var(--cream)}
.full{grid-column:1/-1}
.note{margin:15px 0 0;color:#718279;font-size:9px;line-height:1.45}

.milestone-card{padding-top:31px}
.milestone-number{margin:13px 0 8px;color:var(--gold2);font:600 clamp(52px,14vw,84px)/1 Georgia,serif;text-shadow:0 0 28px rgba(234,210,125,.1)}
.milestone-card h2{font-size:clamp(23px,6vw,34px);line-height:1.12;margin:5px 0 14px}
.decision-actions{margin-top:24px}
.decision.primary{border-color:var(--gold);background:linear-gradient(180deg,#d6b75d,#a88835);color:#08110d;box-shadow:0 7px 22px rgba(200,168,75,.15)}

.result-card h2{font-size:clamp(25px,6.3vw,38px);line-height:1.1;margin-bottom:18px}
#result-numbers{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:4px 0 20px;padding:15px 12px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.result-num small{display:block;color:#73877b;font-size:8px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:5px}
.result-num strong{display:block;color:var(--cream);font:600 clamp(27px,7vw,39px)/1 Georgia,serif}
.result-arrow{color:var(--gold);font-size:23px}
.reflection{margin:18px auto 0;padding:15px 16px;max-width:440px;border-left:2px solid var(--gold);background:rgba(200,168,75,.045);color:#e0dfd5;font:italic 15px/1.55 Georgia,serif;text-align:left}

@media(max-height:680px){
  .card{padding:20px 22px}.card h2{font-size:32px}.choice-box{margin:15px auto}.intro{font-size:12px;line-height:1.48}
  #gain-button{width:170px;margin:18px 0 13px}#gain-button small{bottom:39px}.card-sub{margin-bottom:12px}
}
@media(max-width:420px){
  #game-shell{border-radius:0;border-left:0;border-right:0}.card{padding-left:19px;padding-right:19px}
  .start-actions,.decision-actions{grid-template-columns:1fr}.full{grid-column:1}.decision-actions .primary{order:-1}
  #hud{gap:7px;font-size:10px}#reset-btn{padding-inline:7px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* TOP 20 compartido: enlace discreto sin alterar la mecánica. */
#records-button{border-color:rgba(200,168,75,.56);color:#ead27d;white-space:nowrap;font:700 10px/1.2 Georgia,serif;letter-spacing:.25px}
#records-button:hover,#records-button:focus-visible{border-color:#f6da86;color:#fff0c3}
@media(max-width:420px){#topbar{gap:4px;padding-inline:5px}#records-button{font-size:9px;padding:4px 5px;min-height:29px}#hud{min-width:0;font-size:9px}#reset-btn{font-size:9px}}