/* Standalone compact Buchstabenplanet; does not affect the other two game worlds. */
body:has(#lw-app) .lw-wrap{max-width:1280px;padding:5px 12px 0;display:flex;flex-direction:column;min-height:100dvh}
body:has(#lw-app) .lw-top{margin:0 0 5px;min-height:32px}
body:has(#lw-app) .lw-home{padding:4px 11px;font-size:.8rem}
body:has(#lw-app) .lw-brand{font-size:.75rem}
body:has(#lw-app) .lw-panel{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:15px;overflow:hidden}
body:has(#lw-app) .lw-hero{display:flex;flex-direction:row;padding:5px 15px;gap:12px;min-height:55px;max-height:65px;align-items:center}
body:has(#lw-app) .lw-hero h1{font-size:clamp(1.13rem,2vw,1.6rem);margin:0}
body:has(#lw-app) .lw-hero p{font-size:.8rem;margin:0}
body:has(#lw-app) .lw-hero img{width:70px;height:52px;object-fit:contain;margin-left:auto}
body:has(#lw-app) .lw-body{flex:1;display:flex;min-height:0;flex-direction:column;padding:7px 12px;overflow:hidden}
body:has(#lw-app) .lw-footer{display:none}
#lw-app .rr-bar{display:flex;align-items:center;gap:12px;justify-content:space-between;min-height:32px;background:#eaf4ff;border-radius:12px;padding:3px 10px;font-size:.82rem}
#lw-app .rr-exit{border:1px solid #adc4ea;border-radius:11px;padding:4px 9px;background:white;color:#35599a;cursor:pointer;font-size:.82rem;font-weight:750}
#lw-app .rr-game{flex:1;display:flex;flex-direction:column;min-height:0;align-items:stretch}
#lw-app .rr-controls{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
#lw-app .rr-controls .lw-btn{padding:9px 14px;min-height:41px;border-radius:13px;font-size:.95rem}
#lw-app h2{font-size:clamp(1.14rem,2.3vw,1.6rem);margin:3px 0}
#lw-app p{margin:3px 0}
#lw-app .rr-welcome{display:flex;align-items:center;justify-content:center;gap:min(8vw,70px);flex:1;text-align:center}
#lw-app .rr-characters{font-size:clamp(4rem,13vw,9rem);white-space:nowrap}
#lw-app .rr-menu-letter{color:#6353d2;font-size:clamp(5rem,14vh,9rem);font-weight:1000;line-height:1.1;text-shadow:4px 5px #ffd557}
#lw-app .rr-message{color:#586a92}
#lw-app .rr-parent{padding:6px 12px;background:#f2f1ff;border-radius:11px;margin:5px 0}
#lw-app .rr-parent summary{cursor:pointer;color:#5743bd;font-weight:800}
#lw-app .rr-letter-shelf{display:grid;grid-template-columns:repeat(13,1fr);gap:5px;max-height:150px;overflow:auto;margin:6px 0}
#lw-app .rr-letterpick{border:1px solid #b9b9ec;border-radius:9px;background:#fff;min-height:34px;font-size:1.2rem;cursor:pointer}
#lw-app .rr-intro{display:flex;align-items:center;justify-content:center;gap:min(10vw,110px);flex:1}
#lw-app .rr-letter-show{font-size:clamp(14rem,45vh,32rem);font-family:Arial,sans-serif;font-weight:900;color:#6353d2;line-height:1;text-shadow:8px 8px #ffdb64}
#lw-app .rr-intro-details{max-width:440px}
#lw-app .rr-mascots{font-size:3.9rem}
#lw-app .rr-quiet{color:#5b6792;font-size:.83rem}
#lw-app .rr-stage-info{display:flex;gap:10px;align-items:center;justify-content:space-between;min-height:35px}
#lw-app .rr-title{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
#lw-app .rr-stage-label{background:#eaf4ff;border-radius:20px;padding:3px 12px;font-size:.9rem}
#lw-app .rr-stage-dots{display:flex;gap:5px}
#lw-app .rr-stage-dots span{width:14px;height:14px;border-radius:50%;background:#e1e5f3;border:1px solid #bec6dc}
#lw-app .rr-stage-dots .selected{background:#45cba4}
#lw-app .rr-drawspace{flex:1;min-height:0;position:relative;border-radius:17px;border:3px solid #cfc3f5;background:radial-gradient(circle at center,#fff8c0,#f8edff 64%,#d4efff);overflow:hidden;display:flex;align-items:center;justify-content:center}
#lw-app #rr-svg{width:100%;height:100%;touch-action:none;cursor:crosshair;max-height:100%}
#lw-app .rr-letter-outline{fill:#a2a9ff;fill-opacity:.32;stroke:#7158cf;paint-order:stroke;stroke-linejoin:round;font-family:Arial,Helvetica,sans-serif;font-weight:900;user-select:none;pointer-events:none}
#lw-app .rr-pencil{stroke:#ee458d;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;fill:none;pointer-events:none}
#lw-app .rr-dino{position:absolute;right:10px;bottom:7px;font-size:2.7rem;pointer-events:none}
#lw-app .rr-bottom{display:flex;align-items:center;gap:9px;justify-content:space-between;min-height:56px}
#lw-app .rr-tip{font-size:.82rem;color:#575b8f;max-width:55%}
#lw-app .rr-seek-head{min-height:55px;text-align:center}
#lw-app .rr-seek-head p{font-size:.9rem}
#lw-app .rr-search-scene{position:relative;flex:1;min-height:0;background-color:#d4f6ff;background-position:center;background-size:cover;border:3px solid #fff;border-radius:20px;box-shadow:0 0 0 2px #c1c8ec inset;overflow:hidden}
#lw-app .rr-hidden-letter{position:absolute;transform:translate(-50%,-50%);font-size:clamp(1.4rem,4vh,2.3rem);min-width:50px;min-height:51px;line-height:1;border:3px solid #fff;color:#272c75;border-radius:15px;background:linear-gradient(130deg,#fffbcaea,#f4fcffdd);text-shadow:1px 1px #fff;box-shadow:0 4px 10px #172a6170;cursor:pointer;font-weight:1000;transition:transform .15s}
#lw-app .rr-hidden-letter:hover{transform:translate(-50%,-50%) scale(1.13)}
#lw-app .rr-hidden-letter.rr-hinted{animation:rr-hint .7s infinite alternate;outline:5px solid #ffca26}
@keyframes rr-hint{to{box-shadow:0 0 0 12px #fff3aa,0 5px 13px #172a6170}}
#lw-app .rr-hidden-letter.rr-wobble{animation:rr-wobble .25s 2}
@keyframes rr-wobble{25%{transform:translate(-65%,-50%)}75%{transform:translate(-35%,-50%)}}
#lw-app .rr-finish{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;flex:1;text-align:center}
#lw-app .rr-party{font-size:clamp(3rem,10vh,5.4rem)}
#lw-app .rr-shiny-letter{font-size:clamp(7rem,23vh,13rem);line-height:1;color:#5949bf;text-shadow:7px 7px #ffd65c;font-weight:900}
#lw-app #rr-svg.rr-pulse{animation:rr-pulse .3s}
@keyframes rr-pulse{50%{filter:brightness(1.2)}}
@media(min-width:720px) and (min-height:550px){body:has(#lw-app){height:100dvh;overflow:hidden}}
@media(max-width:719px), (max-height:549px){body:has(#lw-app) .lw-wrap{min-height:100dvh}body:has(#lw-app) .lw-body{min-height:480px;overflow:visible}body:has(#lw-app) .lw-panel{overflow:visible}#lw-app .rr-drawspace{min-height:330px}#lw-app .rr-search-scene{min-height:330px}#lw-app .rr-welcome{flex-wrap:wrap}#lw-app .rr-characters{font-size:3.9rem}#lw-app .rr-intro{gap:10px}#lw-app .rr-letter-show{font-size:8rem}#lw-app .rr-mascots{font-size:2.4rem}#lw-app .rr-bottom{flex-wrap:wrap;padding:8px 0}#lw-app .rr-tip{max-width:100%}#lw-app .rr-letter-shelf{grid-template-columns:repeat(6,1fr)} }

.robo-sound-toggle{position:fixed;z-index:4000;top:7px;right:8px;bottom:auto;border:2px solid #8bd3f5;border-radius:20px;padding:6px 9px;background:#fffef4;color:#174e78;box-shadow:0 2px 6px #0b4a8655;font-size:.8rem;font-weight:800}

/* V4.2.1: actual fixed-height flex layout on desktop. The old min-height:100dvh
   let the oversized SVG determine page height; meanwhile wheel was blocked. */
@media (min-width:720px) and (min-height:550px) {
  html, body { height:100%; }
  body:has(#lw-app) { height:100dvh; min-height:0; overflow:hidden; }
  body:has(#lw-app) .lw-wrap {
    height:100dvh; min-height:0; max-height:100dvh;
    overflow:hidden; display:flex; flex-direction:column;
  }
  body:has(#lw-app) .lw-top { flex:0 0 auto; }
  body:has(#lw-app) .lw-panel {
    flex:1 1 0; height:0; min-height:0; max-height:100%;
    display:flex; flex-direction:column; overflow:hidden;
  }
  body:has(#lw-app) .lw-hero { flex:0 0 auto; }
  body:has(#lw-app) .lw-body {
    flex:1 1 0; height:0; min-height:0; overflow:hidden;
  }
  #lw-app .rr-bar { flex:0 0 auto; }
  #lw-app .rr-game { flex:1 1 0; height:0; min-height:0; overflow:hidden; }
  #lw-app .rr-stage-info, #lw-app .rr-bottom { flex:0 0 auto; }
  #lw-app .rr-drawspace, #lw-app .rr-search-scene {
    flex:1 1 0; height:0; min-height:0; overflow:hidden;
  }
  #lw-app #rr-svg { display:block; width:100%; height:100%; min-height:0; }
}

/* An audio warning must never sit on top of the Next button. */
body:has(#lw-app) .robo-audio-message { pointer-events:none; }

/* RoboRex v4.4 – proper hide-and-seek on top of colorful illustrated worlds. */
#lw-app .rr-search-scene{background:#093f5f;isolation:isolate;}
#lw-app .rr-scene-img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;pointer-events:none;}
#lw-app .rr-hidden-letter{z-index:2;border:0!important;background:transparent!important;box-shadow:none!important;outline:0;min-width:42px;min-height:42px;width:42px;height:42px;padding:0;border-radius:50%;font-family:Arial,Helvetica,sans-serif;font-size:var(--rr-font);font-weight:900;color:var(--rr-color);line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transform:translate(-50%,-50%) rotate(var(--rr-rot));text-shadow:0 1px 1px #ffffff80,1px 2px 1px #00000046;transition:transform .1s;}
#lw-app .rr-hidden-letter span{display:block;pointer-events:none;}
#lw-app .rr-hidden-letter:hover{transform:translate(-50%,-50%) scale(1.12) rotate(var(--rr-rot));filter:brightness(1.15);}
#lw-app .rr-hidden-letter:focus-visible{outline:2px dashed #fff;outline-offset:1px;}
#lw-app .rr-hidden-letter.rr-hinted{animation:rr-hint .8s infinite alternate;outline:2px solid #fff;box-shadow:0 0 0 5px #ffcb31!important;}
#lw-app .rr-loader{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:3px dashed #72b6eb;border-radius:20px;background:linear-gradient(135deg,#fff2bd,#c6f9ff);}
#lw-app .rr-robot-busy{font-size:clamp(3rem,12vh,7rem);animation:rr-busy 1.2s ease-in-out infinite alternate;}
@keyframes rr-busy{to{transform:translateY(-9px)}}
#lw-app .rr-seek-head{flex:0 0 auto;min-height:40px;}
#lw-app .rr-seek-head h2{font-size:clamp(1rem,1.7vw,1.35rem)}
#lw-app .rr-seek-head p{font-size:clamp(.68rem,1.1vw,.85rem)}
#lw-app .rr-search-bottom{flex:0 0 auto;}
@media(max-width:719px),(max-height:549px){#lw-app .rr-scene-img{object-fit:cover}}

/* RoboRex V4.5: readable seek letters, still without badges or boxes.
   A soft thin outline prevents dark strokes from vanishing in darker parts of the illustration. */
#lw-app .rr-hidden-letter {
  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
  font-weight: 1000;
  color: var(--rr-color);
  -webkit-text-stroke: 1px rgba(255,255,242,.86);
  paint-order: stroke fill;
  text-shadow: 0 1px 1px rgba(255,255,245,.6);
  width: 52px; height: 52px; min-width: 52px; min-height: 52px;
}
#lw-app .rr-hidden-letter span { line-height: 1; }