/* =========================================================
   ODDY · pantalla de juego (mundo a pantalla completa)
   ========================================================= */
html,body.app{height:100%}
body.app{overflow:hidden;background:#0a0d1c;display:block;min-height:0;overscroll-behavior:none;touch-action:manipulation}
.app button{font-family:var(--f-head)}

/* ---------- escena ---------- */
.scene{position:fixed;inset:0;overflow:hidden;z-index:0}
.sky,.far,.world,.front{position:absolute;left:0;right:0;bottom:0;will-change:transform;pointer-events:none}
.sky{background:linear-gradient(to top,#2d5f57 0%,#234c5c 5%,#223e63 14%,#22325f 26%,#1b2552 38%,#131a3f 50%,#0b0f29 62%,#070915 78%,#05060e 100%)}
.front{z-index:4}
.far-cloud{opacity:.2}
.front .near-cloud{animation:none!important;background:radial-gradient(ellipse at 50% 60%,rgba(230,236,251,.55),rgba(230,236,251,0) 70%);width:calc(260px * var(--sc));height:calc(120px * var(--sc))}
.front .near-cloud::before,.front .near-cloud::after{display:none}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.5;box-shadow:0 0 6px #fff}
.po-flag{position:absolute;left:47%;top:-54px;width:34px;animation:flagw 2s ease-in-out infinite;transform-origin:bottom left}
@keyframes flagw{50%{transform:skewY(-4deg)}}
.house .smoke{position:absolute;left:62%;top:-14px;width:10px;height:10px;border-radius:50%;background:rgba(220,230,240,.35);animation:smoke 4s ease-out infinite}
.house .smoke+.smoke{animation-delay:2s}
@keyframes smoke{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:.7}100%{transform:translate(14px,-60px) scale(2.4);opacity:0}}
.star{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff}
.star.tw{animation:tw 2.8s ease-in-out infinite alternate}
@keyframes tw{to{opacity:.15;transform:scale(.6)}}
.aurora{position:absolute;left:-15%;right:-15%;pointer-events:none;opacity:.5}
.aurora span{position:absolute;left:0;right:0;height:34%;border-radius:50%;animation:aur 9s ease-in-out infinite alternate}
.aurora span{background-blend-mode:normal}
.aurora span:nth-child(1){top:10%;background:radial-gradient(ellipse at 50% 50%,rgba(79,209,165,.75),rgba(221,242,107,.25) 40%,transparent 70%)}
.aurora span:nth-child(2){top:38%;background:radial-gradient(ellipse at 40% 50%,rgba(111,199,232,.7),rgba(169,139,250,.25) 45%,transparent 70%);animation-delay:-3s}
.aurora span:nth-child(3){top:62%;background:radial-gradient(ellipse at 60% 50%,rgba(169,139,250,.7),rgba(79,209,165,.2) 45%,transparent 70%);animation-delay:-6s}
@keyframes aur{0%{transform:translateX(-8%) skewY(-4deg)}100%{transform:translateX(8%) skewY(5deg)}}
.planet{position:absolute;border-radius:50%}
.planet.p1{width:70px;height:70px;background:radial-gradient(circle at 35% 30%,#d9c8ff,#7c5fd6 60%,#3b2a7a);box-shadow:0 0 40px rgba(169,139,250,.35)}
.planet.p2{width:120px;height:120px;background:radial-gradient(circle at 35% 30%,#ffd3a1,#ff9f43 55%,#9a4d12)}
.planet.p2 b{position:absolute;left:-40%;right:-40%;top:42%;height:18%;border:4px solid rgba(255,214,170,.7);border-radius:50%;transform:rotate(-14deg)}
.planet-oddy{position:absolute;left:50%;width:520px;height:520px;margin-left:-260px;border-radius:50%;
  background:radial-gradient(circle at 40% 25%,#f4ffa8,#ddf26b 40%,#9fbd2e 75%,#5f7a14);box-shadow:0 0 120px rgba(221,242,107,.45)}
.planet-oddy i{position:absolute;border-radius:50%;background:rgba(80,100,10,.35)}
.planet-oddy i:nth-child(1){width:70px;height:46px;left:22%;top:12%}
.planet-oddy i:nth-child(2){width:40px;height:28px;left:62%;top:20%}
.planet-oddy i:nth-child(3){width:28px;height:20px;left:44%;top:6%}
.comet{position:absolute;left:-200px;width:150px;height:3px;background:linear-gradient(90deg,transparent,#fff);border-radius:3px;animation:comet 16s linear infinite;transform:rotate(-12deg)}
.comet::after{content:"";position:absolute;right:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px #fff}
@keyframes comet{0%{left:-200px;opacity:0}5%{opacity:1}40%{left:110%;opacity:1}41%,100%{left:110%;opacity:0}}
.sat{position:absolute;width:80px;left:20%;animation:sat 40s linear infinite}
@keyframes sat{0%{left:-10%;transform:rotate(-8deg)}100%{left:105%;transform:rotate(8deg)}}
.ufo{position:absolute;width:90px;left:70%;animation:ufo 7s ease-in-out infinite}
@keyframes ufo{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(-120px,-26px) rotate(5deg)}}
.jelly{position:absolute;width:38px;height:56px;animation:jelly 6s ease-in-out infinite}
.jelly::before{content:"";position:absolute;inset:0 0 40% 0;border-radius:50% 50% 30% 30%;background:var(--c);opacity:.75;box-shadow:0 0 18px var(--c)}
.jelly i,.jelly i::before,.jelly i::after{position:absolute;bottom:0;width:2px;height:24px;background:var(--c);opacity:.5;border-radius:2px}
.jelly i{left:17px}.jelly i::before{content:"";left:-9px;height:20px}.jelly i::after{content:"";left:9px;height:22px}
@keyframes jelly{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-30px) scaleY(.9)}}
.balloon{position:absolute;width:56px;animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-22px)}}
.birds{position:absolute;left:-60px;width:60px;height:20px;animation:fly linear infinite}
.birds i{position:absolute;width:14px;height:7px;border-top:2px solid rgba(225,235,255,.7);border-radius:50% 50% 0 0;animation:flap .5s ease-in-out infinite alternate}
.birds i:nth-child(1){left:0;top:8px}.birds i:nth-child(2){left:18px;top:0;animation-delay:.15s}.birds i:nth-child(3){left:36px;top:10px;animation-delay:.3s}
@keyframes flap{to{transform:scaleY(-.6)}}
@keyframes fly{0%{left:-80px}100%{left:110%}}
.cloud{position:absolute;width:calc(150px * var(--sc));height:calc(46px * var(--sc));background:#e6ecfb;border-radius:999px;animation:drift ease-in-out infinite alternate}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:46%;height:120%;left:16%;bottom:30%}
.cloud::after{width:34%;height:96%;left:50%;bottom:36%}
@keyframes drift{to{transform:translateX(60px)}}
.ruler{position:absolute;right:0;top:0;bottom:0;width:60px;pointer-events:none}
.ruler i{position:absolute;right:0;width:10px;height:1px;background:rgba(255,255,255,.28)}
.ruler i.big{width:20px;background:rgba(255,255,255,.5)}
.ruler b{position:absolute;right:24px;top:-8px;font:500 11px/1 var(--f-mono);color:rgba(255,255,255,.55);white-space:nowrap}
.zone-sign{position:absolute;left:14px;pointer-events:none}
.zone-sign span{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);border-top:1px dashed rgba(255,255,255,.25);padding-top:5px;display:inline-block}

/* suelo */
.ground{position:absolute;left:0;right:0;bottom:0;height:230px}
.hills{position:absolute;left:0;width:100%;bottom:0}
.hills.back{height:210px}
.hills.front{height:170px}
.house{position:absolute;left:7%;bottom:92px;width:100px}
.house svg{width:100%}
.lamp{position:absolute;right:16%;bottom:98px;width:4px;height:64px;background:#55705f;border-radius:2px}
.lamp i{position:absolute;left:-8px;top:-12px;width:20px;height:20px;border-radius:50%;background:#fff3b0;box-shadow:0 0 30px 10px rgba(255,243,176,.35);animation:lamp 3s ease-in-out infinite}
@keyframes lamp{50%{box-shadow:0 0 40px 16px rgba(255,243,176,.45)}}
.shroom{position:absolute;bottom:96px;width:26px;height:30px}
.shroom::before{content:"";position:absolute;left:9px;bottom:0;width:8px;height:16px;background:#f0e6d0;border-radius:4px}
.shroom::after{content:"";position:absolute;left:0;bottom:12px;width:26px;height:16px;border-radius:14px 14px 4px 4px;background:radial-gradient(circle at 30% 40%,#fff 2px,transparent 3px),radial-gradient(circle at 70% 55%,#fff 2px,transparent 3px),#ff7ab6}
.shroom.s1{left:24%}.shroom.s2{left:27%;transform:scale(.7)}.shroom.s3{right:26%;transform:scale(1.2)}
.shroom.s3::after{background:radial-gradient(circle at 35% 45%,#fff 2px,transparent 3px),#a98bfa}
.spiral{position:absolute;bottom:96px;width:22px;height:60px;border-left:4px solid #4fd1a5;border-radius:0 0 0 30px}
.spiral::after{content:"";position:absolute;top:-14px;left:-4px;width:22px;height:22px;border:4px solid #4fd1a5;border-right-color:transparent;border-radius:50%}
.spiral.sp1{left:36%}.spiral.sp2{right:34%;transform:scale(.75) scaleX(-1)}
.tuft{position:absolute;bottom:100px;width:30px;height:14px;background:radial-gradient(ellipse at 50% 100%,#6f9f3a 60%,transparent 62%)}
.tuft.t1{left:15%}.tuft.t2{left:58%}.tuft.t3{right:6%}
.firefly{position:absolute;width:5px;height:5px;border-radius:50%;background:#ddf26b;box-shadow:0 0 10px 3px rgba(221,242,107,.6);animation:ff ease-in-out infinite alternate}
@keyframes ff{0%{transform:translate(0,0);opacity:.2}50%{opacity:1}100%{transform:translate(30px,-40px);opacity:.3}}

/* Oddy en el mundo */
.oddy-holder{position:absolute;left:50%;bottom:0;width:118px;height:124px;z-index:3;will-change:transform}
.oddy-holder .walker{width:100%;height:100%;transition:transform 1.2s cubic-bezier(.45,.05,.35,1)}
.oddy-holder.lift .walker{transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.oddy-holder .oddy-body{width:100%;height:100%;transition:scale .3s}
.oddy-holder .oddy-body.flip{scale:-1 1}
.oddy-holder .oddy{transform-origin:50% 92%}
.walker.walking .oddy-body .oddy{animation:hop .31s ease-in-out 4}
@keyframes hop{50%{transform:translateY(-9px) scale(.97,1.03)}}
.oddy-holder.t4 .aura{opacity:.8;background:radial-gradient(circle,rgba(169,139,250,.5),rgba(169,139,250,0) 62%)}
.oddy-holder .aura{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(221,242,107,.55),rgba(221,242,107,0) 65%);transition:opacity .4s}
.oddy-holder.t5 .aura,.oddy-holder.t6 .aura{opacity:1;animation:aura 1s ease-in-out infinite alternate}
.oddy-holder.t5 .aura{background:radial-gradient(circle,rgba(255,159,67,.5),rgba(255,159,67,0) 65%)}
@keyframes aura{to{transform:scale(1.25)}}
.oddy-holder .rays{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,220,.22) 0deg 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);
  transition:opacity .6s;animation:rays 14s linear infinite}
.oddy-holder.glory .rays{opacity:1}
@keyframes rays{to{transform:rotate(360deg)}}
.oddy-holder .rain{position:absolute;left:50%;top:-58px;width:110px;height:44px;margin-left:-55px;border-radius:999px;background:#5d6773;opacity:0;transition:opacity .4s;pointer-events:none}
.oddy-holder .rain::before{content:"";position:absolute;left:20%;bottom:40%;width:50%;height:120%;background:inherit;border-radius:50%}
.oddy-holder.raining .rain{opacity:1}
.oddy-holder .rain i{position:absolute;top:100%;width:2px;height:12px;background:#7fd3ff;border-radius:2px;opacity:0}
.oddy-holder.raining .rain i{animation:drop .7s linear infinite}
.rain i:nth-child(1){left:20%}.rain i:nth-child(2){left:35%;animation-delay:.2s!important}.rain i:nth-child(3){left:50%;animation-delay:.4s!important}.rain i:nth-child(4){left:65%;animation-delay:.1s!important}.rain i:nth-child(5){left:80%;animation-delay:.5s!important}.rain i:nth-child(6){left:42%;animation-delay:.3s!important}
@keyframes drop{0%{transform:translateY(0);opacity:1}100%{transform:translateY(70px);opacity:0}}

/* nubes-plataforma que deja cada respuesta */
.cloud-pad{position:absolute;left:50%;width:150px;height:34px;transform:translateX(-50%);z-index:2}
.cloud-pad .pad{position:absolute;inset:0;border-radius:999px;background:linear-gradient(180deg,#f3f6ff,#cfd8f0);box-shadow:0 6px 0 rgba(0,0,0,.15)}
.cloud-pad .pad::before,.cloud-pad .pad::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud-pad .pad::before{width:56px;height:46px;left:22px;bottom:12px}
.cloud-pad .pad::after{width:42px;height:36px;left:70px;bottom:14px}
.cloud-pad .flag{position:absolute;left:calc(100% + 10px);bottom:6px;white-space:nowrap;max-width:38vw;overflow:hidden;text-overflow:ellipsis;
  font:700 13px/1.2 var(--f-head);color:#111;background:var(--tc);padding:5px 10px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.cloud-pad.t-0 .pad{background:linear-gradient(180deg,#8d97a3,#69737f)}
.cloud-pad.t-4 .pad{box-shadow:0 6px 0 rgba(0,0,0,.15),0 0 26px rgba(169,139,250,.55)}
.cloud-pad.t-5 .pad{background:linear-gradient(180deg,#fff4e6,#ffc58a);box-shadow:0 6px 0 rgba(0,0,0,.15),0 0 30px rgba(255,159,67,.6)}
.cloud-pad.t-6 .pad{background:linear-gradient(180deg,#fbffd6,#ddf26b);box-shadow:0 6px 0 rgba(0,0,0,.15),0 0 40px rgba(221,242,107,.8);animation:padglow 2s ease-in-out infinite alternate}
@keyframes padglow{to{box-shadow:0 6px 0 rgba(0,0,0,.15),0 0 60px rgba(221,242,107,1)}}
.cloud-pad .crown{position:absolute;left:-6px;top:-30px;font-size:26px;color:#ffd43b;text-shadow:0 0 12px rgba(255,212,59,.8);transform:rotate(-18deg)}
.cloud-pad.pop{animation:padpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes padpop{0%{transform:translateX(-50%) scale(.2);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}


/* ---------- interfaz ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:10px;padding:12px 14px;pointer-events:none}
.topbar>*{pointer-events:auto}
.tb-left,.tb-right{display:flex;gap:8px;align-items:flex-start}
.tb-right{justify-content:flex-end}
.glass{background:rgba(12,16,15,.84);border:1px solid rgba(255,255,255,.1)}
.hudbox{border-radius:14px;padding:6px 12px 7px;min-width:92px}
.hudbox small{display:block;font:500 10px/1.2 var(--f-mono);letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.hudbox b{font:600 20px/1.1 var(--f-mono);color:var(--lime)}
.app .icon-btn{background:rgba(12,16,15,.84);border-color:rgba(255,255,255,.12)}
.tb-dots{display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:6px}
.tb-dots .dots i{width:16px;height:16px;border-radius:4px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.12)}
.tb-dots .dots i.cur{background:transparent;border:2px solid var(--lime);box-shadow:0 0 0 3px rgba(221,242,107,.15)}
.tb-dots small{font:500 10px/1 var(--f-mono);letter-spacing:.14em;color:rgba(255,255,255,.55);text-transform:uppercase}
@media (max-width:560px){.hudbox{min-width:0;padding:5px 9px}.hudbox b{font-size:16px}.tb-dots .dots i{width:11px;height:11px}.hide-s{display:none!important}}

/* portada */
.home{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:84px 20px 20px;overflow:auto;
  background:linear-gradient(180deg,rgba(5,6,14,.55),rgba(5,6,14,0) 60%);transition:opacity .5s, transform .6s}
.home.out{opacity:0;transform:translateY(-40px);pointer-events:none}
.home .kicker{font:500 12px/1 var(--f-mono);letter-spacing:.24em;color:var(--lime);text-transform:uppercase;margin:4vh 0 10px}
.logo{margin:0;font-family:var(--f-head);font-weight:900;font-stretch:125%;font-size:clamp(76px,17vw,168px);line-height:.86;letter-spacing:.02em;color:var(--lime);
  text-shadow:0 6px 0 #8fa82a,0 10px 30px rgba(0,0,0,.45);animation:logo 3.4s ease-in-out infinite}
.logo span{display:inline-block;animation:letter 2.8s ease-in-out infinite}
.logo span:nth-child(2){animation-delay:.15s}.logo span:nth-child(3){animation-delay:.3s}.logo span:nth-child(4){animation-delay:.45s;transform-origin:bottom}
@keyframes letter{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px) rotate(-2deg)}}
.home .tag{font-weight:800;font-size:clamp(18px,3.4vw,24px);margin:18px 0 6px}
.home .rules{font:500 13px/1.5 var(--f-mono);color:#cfd8d2;margin:0 0 22px}
.btn-start{font-weight:900;font-stretch:115%;letter-spacing:.06em;font-size:clamp(18px,3.6vw,24px);padding:18px 34px;min-width:min(420px,88vw);text-transform:uppercase}
.home .chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.chipbtn{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#e7efe6;text-decoration:none;padding:10px 14px;border-radius:12px;cursor:pointer}
.chipbtn:hover{border-color:var(--lime);color:var(--lime)}
.home .result-line{font:500 14px/1.5 var(--f-mono);color:#cfd8d2;margin:10px 0 0}
.home .spacer{flex:1;min-height:200px}
.home .mini-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font:500 12px/1.4 var(--f-mono);margin-top:10px;padding-bottom:6px}
.home .mini-links a,.home .mini-links button{color:rgba(255,255,255,.62);text-decoration:none;background:none;border:0;padding:4px 0;font:inherit;cursor:pointer}
.home .mini-links a:hover,.home .mini-links button:hover{color:var(--lime)}

/* tarjeta de pregunta */
.qcard{position:fixed;z-index:12;top:76px;left:50%;width:min(680px,calc(100% - 24px));transform:translateX(-50%);border-radius:22px;padding:16px 20px 18px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7);transition:transform .45s cubic-bezier(.3,1.3,.5,1),opacity .3s}
.qcard[hidden]{display:block;opacity:0;transform:translate(-50%,-30px);pointer-events:none;visibility:hidden}
.qcard .cat{margin:0}
.qcard .q{font-weight:900;font-stretch:106%;font-size:clamp(24px,5vw,38px);line-height:1.08;margin:6px 0 6px;letter-spacing:-.01em}
.qcard .sub{font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;color:var(--muted);margin:0}
.qcard .fb{min-height:0;margin:8px 0 0;font-weight:700;font-size:15px;color:#ffb4a8}
.qcard .fb:empty{display:none}
.qcard .hintline{margin:10px 0 0;font-size:14.5px;color:#cfd8d2;background:rgba(221,242,107,.08);border:1px dashed rgba(221,242,107,.35);border-radius:12px;padding:8px 10px}
@media (max-width:560px){.qcard{top:64px;padding:12px 14px 14px;border-radius:18px}}

/* revelación dentro de la tarjeta */
.rv{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;margin-top:4px}
.rv .ans{font-weight:900;font-stretch:108%;font-size:clamp(24px,5.4vw,40px);line-height:1.04;word-break:break-word}
.rv .stamp{grid-column:1;justify-self:start;opacity:0;transform:scale(2.2) rotate(-8deg)}
.rv .stamp.in{animation:stamp .45s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stamp{to{opacity:1;transform:scale(1) rotate(-3deg)}}
.rv .num{grid-row:1/span 2;grid-column:2;text-align:right;font:600 clamp(40px,9vw,64px)/1 var(--f-mono);color:var(--tc,var(--lime))}
.rv .num small{display:block;font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.rv .meter{grid-column:1/-1;margin:10px 0 2px;max-width:none}
.rv .next{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;min-height:52px}
.rv .next .zone{font:500 12px/1.4 var(--f-mono);color:var(--muted)}
.rv .next .zone b{color:var(--text)}
.rv .next .btn{opacity:0;transform:translateY(8px);transition:.3s}
.rv .next .btn.in{opacity:1;transform:none}

/* chip de cuenta atrás */
.chip{position:fixed;z-index:12;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateX(-50%);font:500 14px/1 var(--f-mono);letter-spacing:.08em;padding:12px 18px;border-radius:14px;white-space:nowrap}
.chip b{color:var(--lime);font-size:18px}

/* barra de respuesta */
.bar{position:fixed;z-index:14;left:0;right:0;bottom:0;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(5,7,12,.92),rgba(5,7,12,.6) 70%,transparent);transition:transform .35s cubic-bezier(.3,1.2,.5,1)}
.bar[hidden]{display:block;transform:translateY(120%);pointer-events:none}
.bar .in{max-width:760px;margin:0 auto}
.bar .tools{display:flex;justify-content:center;gap:8px;margin-bottom:8px}
.bar .row{display:flex;gap:10px;align-items:center}
.ring{position:relative;width:58px;height:58px;flex-shrink:0}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}
.ring .bg{stroke:rgba(255,255,255,.12)}
.ring .fg{stroke:var(--lime);stroke-linecap:round;transition:stroke .2s}
.ring.low .fg{stroke:var(--danger)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 18px/1 var(--f-mono)}
.ring.pen{animation:pen .35s}
.bar input{flex:1;min-width:0;font:700 19px/1 var(--f-head);color:var(--text);background:rgba(10,13,12,.9);border:2px solid rgba(255,255,255,.18);border-radius:16px;padding:16px;outline:none}
.bar input:focus{border-color:var(--lime);box-shadow:0 0 0 4px var(--lime-soft)}
.bar input.shake{animation:pen .35s;border-color:var(--danger)}
.bar .go{min-height:56px;padding:0 22px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
@media (max-width:560px){.ring{width:50px;height:50px}.bar .go{padding:0 14px}.bar input{font-size:17px;padding:14px 12px}}

/* puntos flotando sobre Oddy */
.float-pts{position:fixed;z-index:13;transform:translate(-50%,-50%);font:600 42px/1 var(--f-mono);color:var(--tc);text-shadow:0 3px 0 rgba(0,0,0,.45);pointer-events:none;animation:floatpts 1.8s ease-out forwards}
@keyframes floatpts{0%{opacity:0;transform:translate(-50%,-10%) scale(.5)}15%{opacity:1;transform:translate(-50%,-80%) scale(1.15)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-230%) scale(1)}}
.zone-toast{position:fixed;z-index:13;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;animation:ztoast 2.4s ease forwards}
.zone-toast small{display:block;font:500 11px/1 var(--f-mono);letter-spacing:.2em;color:var(--lime);text-transform:uppercase;margin-bottom:6px}
.zone-toast b{font-weight:900;font-stretch:112%;font-size:clamp(24px,5vw,34px);text-shadow:0 4px 20px rgba(0,0,0,.6)}
@keyframes ztoast{0%{opacity:0;transform:translate(-50%,-30%) scale(.9)}15%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%)}}
.app .fx{position:fixed;inset:0;z-index:13}
.app .fx i{left:var(--ox,50%);top:var(--oy,50%)}
.app .flash{position:fixed;z-index:13}

/* hoja de resultados */
.sheet{position:fixed;z-index:16;left:50%;bottom:0;width:min(640px,100%);max-height:88dvh;overflow:auto;transform:translateX(-50%);border-radius:28px 28px 0 0;padding:22px 20px calc(26px + env(safe-area-inset-bottom));
  text-align:center;transition:transform .5s cubic-bezier(.3,1.1,.5,1);background:rgba(14,18,17,.94)}
.sheet[hidden]{display:block;transform:translate(-50%,110%);pointer-events:none;visibility:hidden}
.sheet .grab{width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.2);margin:-8px auto 14px}

/* menú lateral */
.menu{position:fixed;z-index:30;inset:0 auto 0 0;width:min(320px,86vw);padding:18px 18px 24px;overflow:auto;transition:transform .35s ease;background:rgba(14,18,17,.97);border-right:1px solid var(--line)}
.menu[hidden]{display:block;transform:translateX(-105%);visibility:hidden}
.menu h2{font-size:14px;font-family:var(--f-mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:18px 0 6px}
.menu a,.menu button.lnk{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);text-decoration:none;font:700 17px/1.2 var(--f-head);padding:10px 4px;border-radius:10px;cursor:pointer}
.menu a:hover,.menu button.lnk:hover{color:var(--lime)}
.menu .small a,.menu .small button.lnk{font:500 14px/1.2 var(--f-head);color:var(--muted);padding:7px 4px}
.scrim{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.5)}
.scrim[hidden]{display:none}

/* bocadillo de Oddy en el mundo */
.say{position:absolute;left:78%;bottom:96%;margin:0;white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis;background:var(--text);color:#111;font:800 14px/1.2 var(--f-head);padding:8px 12px;border-radius:14px 14px 14px 4px;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6);opacity:0;transform:translateY(6px) scale(.9);transform-origin:bottom left;transition:opacity .2s,transform .2s;pointer-events:none}
.say.show{opacity:1;transform:none}
.sheet .summary-list{margin:14px 0}
.topbar [hidden]{display:none!important}
.hudbox b{white-space:nowrap}
body.at-home .zone-sign,body.at-home .ruler{opacity:0}
.zone-sign,.ruler{transition:opacity .5s}
@media (max-width:560px){.tb-dots{padding-top:2px}.tb-dots small{font-size:9px}.home .kicker{font-size:10px;letter-spacing:.16em}.home .rules{font-size:12px}}
.soil{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#2f5c45 0,#2a4232 30px,#21302a 45%,#171f1c)}
.soil .rock{position:absolute;border-radius:45% 55% 50% 50%;background:#33433b}
.soil .r1{width:60px;height:30px;left:12%;top:70px}.soil .r2{width:34px;height:20px;left:64%;top:140px}.soil .r3{width:80px;height:36px;right:8%;top:200px;background:#2b3a33}
.soil .root{position:absolute;left:46%;top:0;width:40px;height:120px;border-left:3px solid #4a6b44;border-radius:0 0 0 40px;opacity:.6}
.topbar .tb-left{grid-column:1}.topbar .tb-dots{grid-column:2}.topbar .tb-right{grid-column:3}

/* canvas de partículas y capas de efecto */
#fxc{position:fixed;inset:0;z-index:11;pointer-events:none}
.dim{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,0) 20%,rgba(0,0,0,.75) 80%);transition:opacity .5s}
.dim.on{opacity:1}
.whiteout{position:fixed;inset:0;z-index:12;pointer-events:none;background:#fff;opacity:0}
/* texto cinético: ¡RARA! ¡RARÍSIMA! ¡ODDÍSIMA! */
.slam{position:fixed;z-index:13;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;white-space:nowrap}
.slam .w{display:block;font-family:var(--f-head);font-weight:900;font-stretch:125%;font-size:clamp(46px,12vw,118px);line-height:.9;letter-spacing:.01em;color:var(--sc);
  -webkit-text-stroke:3px rgba(0,0,0,.35);paint-order:stroke fill;text-shadow:0 6px 0 rgba(0,0,0,.35),0 0 40px var(--glow)}
.slam .w span{display:inline-block;opacity:0;animation:slamIn .55s cubic-bezier(.2,1.6,.4,1) forwards}
.slam.s6 .w{animation:hue 1.6s linear infinite}
.slam.s6 .w span{color:var(--lc);text-shadow:0 6px 0 rgba(0,0,0,.35),0 0 30px var(--lc)}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.slam .sub{display:block;font:600 clamp(16px,3.4vw,24px)/1 var(--f-mono);color:#fff;margin-top:10px;opacity:0;animation:fadeup .4s .35s ease-out forwards;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.slam.out{animation:slamOut .5s ease-in forwards}
@keyframes slamIn{0%{opacity:0;transform:scale(3.2) rotate(var(--r))}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes slamOut{to{opacity:0;transform:translate(-50%,-80%) scale(.85)}}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.slam.small .w{font-size:clamp(28px,6vw,46px);-webkit-text-stroke:2px rgba(0,0,0,.3)}
/* racha rara */
.streak{position:fixed;z-index:13;left:50%;top:calc(50% + 90px);transform:translateX(-50%);font:700 14px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#111;
  background:linear-gradient(90deg,#ff9f43,#ff6b6b);padding:8px 14px;border-radius:999px;box-shadow:0 0 24px rgba(255,107,107,.6);pointer-events:none;animation:streakIn 2.2s ease forwards}
@keyframes streakIn{0%{opacity:0;transform:translateX(-50%) scale(.4)}12%{opacity:1;transform:translateX(-50%) scale(1.15)}20%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-20px)}}
.hudbox.pulse{animation:hpulse .5s ease}
@keyframes hpulse{40%{transform:scale(1.15);box-shadow:0 0 24px rgba(221,242,107,.6)}}
/* tarjetas y barra con muelle */
.qcard{transition:transform .55s cubic-bezier(.2,1.4,.4,1),opacity .3s}
.btn-start{animation:breathe-btn 2.4s ease-in-out infinite}
@keyframes breathe-btn{50%{transform:scale(1.035);box-shadow:0 5px 0 0 #8fa82a,0 0 36px rgba(221,242,107,.45)}}
.btn-start:active{animation:none}

.qcard.compact .meter,.qcard.compact .next{display:none}
.qcard.compact{padding-bottom:14px}

.qcard .note{margin:-2px 0 6px;font:500 14.5px/1.35 var(--f-head);color:#cfd8d2}
@media (max-width:560px){.qcard .note{font-size:13px}}