/* Deutsch mit Cookie — cuaderno cuadriculado alemán.
   Color con significado: der = azul, das = verde (convención escolar alemana). Resaltador = acierto/foco. */
@import url('/fonts/fonts.css');
:root{
  --paper:#F8FAFD; --grid:#DFE8F3; --margin:#F3AFBC;
  --ink:#1F2A44; --ink-soft:#5B6782; --line:#C9D5E4;
  --der:#2E6BE6; --der-soft:#E3ECFD; --das:#1F9D5C; --das-soft:#DDF3E7;
  --mark:#FFE066; --cookie:#FF6B8A; --err:#E4572E; --err-soft:#FCE6DF; --card:#FFFFFF;
  --font-w:'Fredoka',ui-rounded,system-ui,sans-serif; --font-b:'Nunito',system-ui,sans-serif;
  --r:14px; --gut:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100dvh;color:var(--ink);font:500 16px/1.45 var(--font-b);
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px;background-position:-1px -1px}
body::before{content:"";position:fixed;top:0;bottom:0;left:28px;width:2px;background:var(--margin);opacity:.8;pointer-events:none;z-index:0}
@media(min-width:720px){body::before{left:calc(50% - 360px - 24px)}}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--der);outline-offset:3px}
img{display:block;max-width:100%}
.wrap{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) var(--gut) calc(28px + env(safe-area-inset-bottom)) calc(var(--gut) + 22px)}
@media(min-width:720px){.wrap{padding-left:var(--gut)}}

/* palabras alemanas: la tipografía es la protagonista */
.w{font-family:var(--font-w);font-weight:600;letter-spacing:.01em}
.art{font-family:var(--font-w);font-weight:700}
.art.der{color:var(--der)} .art.das{color:var(--das)}
.noun.der{text-decoration-line:underline;text-decoration-color:var(--der);text-decoration-thickness:3px;text-underline-offset:5px}
.noun.das{text-decoration-line:underline;text-decoration-color:var(--das);text-decoration-thickness:3px;text-underline-offset:5px}
.es{color:var(--ink-soft);font-weight:600}
mark{background:linear-gradient(transparent 38%,var(--mark) 38%,var(--mark) 88%,transparent 88%);color:inherit;padding:0 .15em}

/* ---------- Cookie ---------- */
.cookie{display:flex;align-items:flex-end;gap:10px}
.cookie .pic{width:78px;height:78px;flex:none;margin-bottom:-6px}
.bubble{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:18px 18px 18px 4px;padding:10px 14px;
  font-weight:700;max-width:34ch;box-shadow:3px 3px 0 var(--line)}
.bubble .w{font-size:1.05em}

/* ---------- inicio ---------- */
.hello{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.title{font-family:var(--font-w);font-weight:700;font-size:clamp(34px,8vw,48px);line-height:1;margin:6px 0 0;text-wrap:balance}
.title .de{color:var(--der)}
.sub{margin:4px 0 0;color:var(--ink-soft)}
.tabs{display:flex;gap:6px;margin:10px 0 0;border-bottom:2px solid var(--ink);overflow-x:auto}
.tab{flex:1 1 0;min-width:0;background:transparent;border:2px solid transparent;border-bottom:0;border-radius:12px 12px 0 0;padding:9px 12px 7px;
  font-family:var(--font-w);font-weight:600;font-size:17px;color:var(--ink-soft);display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-bottom:-2px}
.tab small{font:700 12px/1.2 var(--font-b);color:var(--ink-soft);text-align:left}
.tab[aria-selected="true"]{background:var(--card);border-color:var(--ink);color:var(--ink)}
.sheet{background:var(--card);border:2px solid var(--ink);border-top:0;border-radius:0 0 var(--r) var(--r);padding:14px}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px;margin-bottom:6px}
.chip-word{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;text-align:center}
.chip-word .th{width:58px;height:46px;display:grid;place-items:center;border-radius:10px;background:var(--paper);position:relative}
.chip-word .th img{max-height:40px;max-width:52px}
.lv{display:flex;gap:2px}.lv i{width:7px;height:7px;border-radius:50%;background:var(--line)}.lv i.on{background:var(--das)}
.legend{font-size:12.5px;color:var(--ink-soft);margin:6px 0 0}
.path{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.step{width:100%;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;text-align:left;
  background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:10px 12px;box-shadow:3px 3px 0 var(--line);transition:transform .08s}
.step:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.step .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 18px var(--font-w);border:2px solid var(--ink)}
.step .t{font:600 18px/1.15 var(--font-w)}
.step .d{font-size:13.5px;color:var(--ink-soft)}
.step .st{font-size:14px;letter-spacing:1px;white-space:nowrap}
.step.exam{border-color:var(--der);box-shadow:3px 3px 0 var(--der-soft)} .step.exam .n{border-color:var(--der);color:var(--der)}
.step[disabled]{opacity:.45;cursor:default}
.review{margin-top:14px;width:100%;border:2px dashed var(--ink);background:var(--mark);border-radius:var(--r);padding:12px;font:700 16px var(--font-b)}
.foot{margin-top:18px;font-size:12.5px;color:var(--ink-soft);display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;color:var(--ink-soft);font-size:12.5px}

/* ---------- actividad ---------- */
.bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.back{background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:6px 12px;font-weight:800}
.bar h2{flex:1;margin:0;font:600 20px/1.1 var(--font-w)}
.count{font:700 14px var(--font-b);background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:4px 10px;white-space:nowrap}
.progress{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:-4px 0 14px}
.progress i{display:block;height:100%;background:var(--das);transition:width .3s}
.stage{display:flex;flex-direction:column;gap:14px}
.feedback{min-height:84px}
.card{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);box-shadow:3px 3px 0 var(--line)}
.say{border:2px solid var(--ink);background:var(--card);border-radius:999px;width:40px;height:40px;display:inline-grid;place-items:center;font-size:18px;flex:none}
body.no-voice .say{display:none}

/* memoria */
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(min-width:560px){.mem{gap:10px}}
.mc{display:block;width:100%;aspect-ratio:3/4;min-height:96px;perspective:600px;border:0;background:none;padding:0}
.mc .in{display:block;position:relative;width:100%;height:100%;transition:transform .35s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.mc.open .in,.mc.done .in{transform:rotateY(180deg)}
.mc .f,.mc .b{position:absolute;inset:0;border-radius:12px;border:2px solid var(--ink);-webkit-backface-visibility:hidden;backface-visibility:hidden;display:grid;place-items:center;padding:6px}
.mc .f{background:var(--der) repeating-linear-gradient(45deg,transparent 0 8px,rgba(255,255,255,.12) 8px 16px);color:#fff;font:700 24px var(--font-w)}
.mc .b{background:var(--card);-webkit-transform:rotateY(180deg);transform:rotateY(180deg);text-align:center;font-size:clamp(13px,3.6vw,19px);line-height:1.1;overflow-wrap:normal;word-break:normal}
.mc .b img{max-height:78%;max-width:92%}
.mc.done .b{background:var(--das-soft);border-color:var(--das)}
@media(prefers-reduced-motion:reduce){.mc .in{transition:none}}

/* recorta y une */
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:620px){.slots{grid-template-columns:repeat(3,1fr)}}
.slot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border:2px dashed var(--ink-soft);border-radius:var(--r);background:var(--card);min-height:150px;justify-content:space-between}
.slot img{max-height:92px;max-width:100%}
.slot .drop{width:100%;min-height:40px;border-radius:10px;background:var(--paper);display:grid;place-items:center;font-size:18px;padding:4px}
.slot.target{border-color:var(--der);background:var(--der-soft)}
.slot.ok{border-style:solid;border-color:var(--das)} .slot.ok .drop{background:var(--das-soft)}
.slot.bad{animation:shake .35s} 
.tray{position:sticky;bottom:0;z-index:5;background:rgba(248,250,253,.96);border-top:2px solid var(--ink);margin:0 calc(-1 * var(--gut));padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.wchip{border:2px solid var(--ink);background:var(--card);border-radius:10px;padding:8px 12px;font-size:18px;touch-action:none;box-shadow:2px 2px 0 var(--line)}
.wchip.sel{background:var(--mark);transform:translateY(-3px)}
.ghost{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-50%) rotate(-3deg);box-shadow:4px 6px 0 rgba(31,42,68,.2)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* der o das */
.big{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px}
.big img{max-height:180px;max-width:90%}
.big .w{font-size:clamp(30px,8vw,44px)}
.houses{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.house{position:relative;border:0;padding:44px 0 18px;background:none;display:flex;flex-direction:column;align-items:center}
.house .roof{position:absolute;top:0;left:6%;right:6%;height:48px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.house .body{width:84%;border:3px solid;border-top:0;border-radius:0 0 14px 14px;padding:16px 0 12px;font:700 38px var(--font-w);text-align:center;background:var(--card)}
.house.der .roof{background:var(--der)} .house.der .body{border-color:var(--der);color:var(--der)}
.house.das .roof{background:var(--das)} .house.das .body{border-color:var(--das);color:var(--das)}
.house:active .body{transform:translateY(2px)}
.house.bad .body{animation:shake .35s;background:var(--err-soft)}
.tip{font-size:14px;color:var(--ink-soft);text-align:center;margin:0}

/* cuál es */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{border:2px solid var(--ink);background:var(--card);border-radius:var(--r);padding:14px 8px;font-size:clamp(18px,5vw,24px);box-shadow:3px 3px 0 var(--line);min-height:64px}
.opt img{max-height:90px;margin:0 auto}
.opt.ok{background:var(--das-soft);border-color:var(--das)}
.opt.bad{background:var(--err-soft);border-color:var(--err);animation:shake .35s}
.opt[disabled]{cursor:default}

/* escríbelo */
.slotsL{display:flex;flex-wrap:nowrap;justify-content:center;gap:4px}
.sl{--w:min(42px,calc((min(100vw,720px) - 80px) / var(--n,8) - 4px));width:var(--w);height:calc(var(--w) * 1.25);border:0;border-bottom:3px solid var(--ink);background:transparent;font:700 calc(var(--w) * .72) var(--font-w);display:grid;place-items:center;padding:0;color:var(--ink)}
.sl.cur{border-bottom-color:var(--der);background:var(--der-soft);border-radius:8px 8px 0 0}
.sl.bad{color:var(--err)} .sl.good{color:var(--das)}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tile{width:clamp(40px,11vw,52px);height:clamp(44px,12vw,56px);border:2px solid var(--ink);border-radius:10px;background:var(--card);font:700 clamp(22px,6vw,28px) var(--font-w);box-shadow:2px 2px 0 var(--line)}
.tile.used{visibility:hidden}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{border:2px solid var(--ink);background:var(--card);border-radius:999px;padding:10px 18px;font-weight:800;box-shadow:2px 2px 0 var(--line)}
.btn.pri{background:var(--der);color:#fff;border-color:var(--der);box-shadow:2px 2px 0 var(--der-soft)}
.btn.go{background:var(--das);color:#fff;border-color:var(--das)}

/* resultados */
.result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px}
.result .stars{font-size:40px;letter-spacing:6px}
.result h3{margin:0;font:700 28px var(--font-w)}
.grade{font:700 44px var(--font-w);color:var(--der)}
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;width:100%;text-align:center}
.rv{border:2px solid var(--das);border-radius:12px;padding:6px;background:var(--das-soft);font-size:13px}
.rv.bad{border-color:var(--err);background:var(--err-soft)}
.rv img{max-height:52px;margin:0 auto 4px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px;font-weight:800;transition:.25s;z-index:200;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.hidden{display:none!important}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---------- Cookie animada (arte de Pomerá-GO) ---------- */
.pom-svg{display:block;overflow:visible}
.pom-svg *{transform-box:view-box}
.pup-tail{transform-origin:70px 66px;animation:pup-wag .75s ease-in-out infinite alternate;animation-delay:var(--pup-delay,0s)}
.pup-body{transform-origin:50px 92px;animation:pup-breathe 3.4s ease-in-out infinite;animation-delay:var(--pup-delay,0s)}
.pup-head{transform-origin:50px 62px;animation:pup-bob 3.4s ease-in-out infinite;animation-delay:var(--pup-delay,0s)}
.pup-ear-l{transform-origin:33px 30px;animation:pup-ear 6.5s ease-in-out infinite;animation-delay:var(--pup-delay,0s)}
.pup-ear-r{transform-origin:67px 30px;animation:pup-ear-r 9s ease-in-out infinite;animation-delay:var(--pup-delay,0s)}
.pup-eye{transform-box:fill-box;transform-origin:center;animation:pup-blink 4.2s linear infinite;animation-delay:var(--pup-delay,0s)}
.pup-shine{animation:pup-shine 4.2s ease-in-out infinite;animation-delay:var(--pup-delay,0s)}
.pup-tongue{transform-origin:50px 56px;animation:pup-pant .55s ease-in-out infinite alternate;animation-delay:var(--pup-delay,0s)}
@keyframes pup-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.018,1.035)}}
@keyframes pup-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-.9px) rotate(-1.2deg)}}
@keyframes pup-wag{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
@keyframes pup-blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}96%{transform:scaleY(1)}}
@keyframes pup-shine{0%,85%,100%{opacity:1}92%{opacity:.35}}
@keyframes pup-ear{0%,72%,84%,100%{transform:rotate(0)}75%{transform:rotate(-10deg)}79%{transform:rotate(5deg)}}
@keyframes pup-ear-r{0%,40%,50%,100%{transform:rotate(0)}43%{transform:rotate(8deg)}46%{transform:rotate(-4deg)}}
@keyframes pup-pant{from{transform:scaleY(.9)}to{transform:scaleY(1.12)}}
@media (prefers-reduced-motion:reduce){
  .pup-tail,.pup-body,.pup-head,.pup-ear-l,.pup-ear-r,.pup-shine,.pup-tongue{animation:none}
  .pup-eye{animation-duration:7s}
}

/* =================== capa lúdica =================== */
/* galletas */
.topline{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:10px}
.topline .title{font-size:clamp(26px,6.5vw,36px);margin:0}
.cookies{display:inline-flex;align-items:center;gap:6px;background:var(--mark);border:2px solid var(--ink);border-radius:999px;
  padding:6px 12px;font:700 18px var(--font-w);box-shadow:2px 2px 0 var(--line);white-space:nowrap}
.cookies.bump{animation:bump .4s}
@keyframes bump{50%{transform:scale(1.25)}}
.fly{position:fixed;z-index:300;font-size:28px;pointer-events:none;transition:transform .7s cubic-bezier(.5,-.3,.7,1),opacity .7s}

/* Cookie con accesorios y saltito */
.pic{position:relative;container-type:inline-size}
.acc{position:absolute;transform:translate(-50%,-50%);font-size:20px;font-size:26cqw;line-height:1;pointer-events:none;z-index:3}
.pic.hop{animation:hop .6s}
@keyframes hop{0%,100%{transform:translateY(0)}30%{transform:translateY(-22%) rotate(-6deg)}60%{transform:translateY(0) rotate(4deg)}}

/* casa de Cookie */
.house-scene{position:relative;aspect-ratio:4/3;border:3px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:4px 4px 0 var(--line);
  background:linear-gradient(#FFE9C7 0 58%,#E7B98A 58% 100%)}
.house-scene::before{content:"";position:absolute;left:0;right:0;top:58%;height:4px;background:#C98F5B}
.house-scene::after{content:"";position:absolute;inset:58% 0 0;background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(0,0,0,.06) 46px 48px)}
.hs-row{position:absolute;left:3%;right:3%;display:flex;justify-content:space-between;gap:1.5%;z-index:1}
.hs-row.frames{top:4%}
.hs-row.board{top:26%;background:#D9A46C;border:2px solid #9C6A3C;border-radius:8px;padding:1% 1.5%;left:6%;right:6%}
.frame,.sticker{position:relative;flex:0 0 12.2%;aspect-ratio:1;border-radius:6px}
.sticker{flex-basis:10.8%}
.frame{background:#fff;border:3px solid #8E5A2E}
.sticker{background:#FFFDF6;box-shadow:1px 1px 0 rgba(0,0,0,.15)}
.frame img,.sticker img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}
.furn{position:absolute;z-index:2}
.furn > div{position:absolute;inset:0}
.furn img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.hole{border:2px dashed rgba(31,42,68,.35);border-radius:8px;display:grid;place-items:center;color:rgba(31,42,68,.45);font:700 clamp(12px,3.4vw,20px) var(--font-w);background:rgba(255,255,255,.35)}
.frame.hole,.sticker.hole{border-width:2px}
.new-in{animation:newin .7s cubic-bezier(.2,1.5,.5,1)}
@keyframes newin{from{transform:scale(.2);opacity:0}}
.hs-cookie{position:absolute;left:73%;bottom:2%;width:17%;z-index:3}
.hs-tap{cursor:pointer}

/* tienda */
.modal{position:fixed;inset:0;z-index:250;background:rgba(31,42,68,.55);display:grid;place-items:center;padding:16px}
.shop{background:var(--card);border:3px solid var(--ink);border-radius:20px;width:100%;max-width:520px;max-height:90dvh;overflow:auto;padding:16px}
.shop h3{margin:0;font:700 24px var(--font-w)}
.shop-top{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.shop-top .pic{width:120px;height:120px;flex:none}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:10px 0}
.item{border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;font-weight:800}
.item .em{font-size:34px;line-height:1.1}
.item.owned{background:var(--das-soft)} .item.on{background:var(--mark)}
.item[disabled]{opacity:.5}

/* confeti */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:280}

/* lluvia de muebles (¿der o das?) */
.rain{position:relative;height:min(62dvh,520px);border:3px solid var(--ink);border-radius:18px;overflow:hidden;
  background:linear-gradient(#CFE8FF,#EAF5FF 70%,#BFE3B0 70%)}
.drop-item{position:absolute;left:50%;top:0;transform:translateX(-50%);width:clamp(110px,30vw,150px);background:var(--card);border:3px solid var(--ink);border-radius:14px;
  padding:6px;text-align:center;box-shadow:3px 3px 0 rgba(31,42,68,.15);z-index:2}
.drop-item img{height:clamp(56px,14vw,76px);margin:0 auto;object-fit:contain}
.drop-item .w{font-size:clamp(18px,5vw,24px)}
.drop-item.into-der{transition:all .45s ease-in;left:22%!important;top:78%!important;transform:translateX(-50%) scale(.3);opacity:0}
.drop-item.into-das{transition:all .45s ease-in;left:78%!important;top:78%!important;transform:translateX(-50%) scale(.3);opacity:0}
.rain .houses{position:absolute;left:0;right:0;bottom:0;padding:0 4%;z-index:1}
.rain .house .body{font-size:clamp(28px,8vw,40px);padding:10px 0 8px}
.runner{position:absolute;bottom:23%;left:50%;width:clamp(70px,18vw,96px);transform:translateX(-50%);transition:left .35s ease-out;z-index:3}
.runner img{width:100%}
.runner.flip img{transform:scaleX(-1)}
.speedo{font:700 13px var(--font-b);color:var(--ink-soft);text-align:center;margin:0}

/* carrera del simulacro */
.race{position:relative;height:64px;border:2px solid var(--ink);border-radius:14px;background:repeating-linear-gradient(90deg,#DDF3E7 0 20px,#CDEBD9 20px 40px);overflow:hidden}
.race .goal{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:28px}
.race .runner{bottom:2px;width:64px;transition:left .5s ease-out}
.race .ticks{position:absolute;left:0;right:0;bottom:4px;height:4px;background:repeating-linear-gradient(90deg,rgba(31,42,68,.25) 0 2px,transparent 2px calc(100%/21))}

.hs-num{display:inline-block;background:var(--mark);border-radius:999px;padding:0 8px;margin-right:4px;font:700 14px var(--font-w)}

/* estado de la voz */
.voicebox{margin-top:12px;background:var(--card);border:2px dashed var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;font-size:14px}
.voicebox small{flex-basis:100%;color:var(--ink-soft)}

/* ---------- laptop / Chrome de escritorio ---------- */
.kbd{display:none;margin:0;text-align:center;font-size:13px;color:var(--ink-soft)}
.opt{position:relative}
.kn{display:none;position:absolute;top:6px;left:8px;font:700 12px var(--font-b);color:var(--ink-soft);border:1.5px solid var(--line);border-radius:6px;padding:0 5px}
@media (hover:hover) and (pointer:fine){
  .kbd{display:block} .kn{display:inline-block}
  button:not([disabled]):hover{filter:brightness(.97)}
  .step:not([disabled]):hover,.opt:not([disabled]):hover,.wchip:hover,.tile:hover,.item:not([disabled]):hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}
  .mc:hover .f{filter:brightness(1.08)}
  .hs-tap:hover{outline:3px solid var(--mark);outline-offset:2px;border-radius:6px}
}
@media (min-width:1000px){
  .wrap{max-width:1040px}
  body::before{left:calc(50% - 520px - 24px)}
  .home-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:start}
  .h-left{position:sticky;top:14px}
  .tabs{margin-top:0}
  .mem{grid-template-columns:repeat(6,1fr);width:100%;max-width:900px;margin:0 auto}
  .slots{grid-template-columns:repeat(4,1fr)}
  .stage{max-width:860px;margin:0 auto;width:100%}
  .bar{max-width:860px;margin-left:auto;margin-right:auto}
  .progress{max-width:860px;margin-left:auto;margin-right:auto}
  .big img{max-height:150px}
  .rain{height:min(58dvh,460px)}
  .opts{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1000px) and (max-height:820px){
  .house-scene{width:min(100%,calc((100dvh - 200px) * 4 / 3));margin:0 auto}
}
.mc .b .long{font-size:.78em;letter-spacing:-.01em}
@media (min-width:1000px){.mc .b{font-size:20px}}