/* Retro-Handy (docs/COMMUNITY.md) – ersetzt standardmäßig das ⌨-Symbol; Tastatur-Option in den Einstellungen */
.rh{--lcd:#a9c08f;--ink:#1d2b17;--body:#3d3a33;--body2:#23262b;--accent:#9bc06a}
.rh[data-welt=vampir]{--lcd:#c7a9a9;--ink:#2a0f14;--body:#2b1d22;--body2:#120a0d;--accent:#b0303c}
.rh[data-welt=mafia_ny]{--lcd:#c9c2a3;--ink:#2a2418;--body:#2c2c30;--accent:#c9a45c}
.rh[data-welt=mafia_sizilien]{--lcd:#b7c79a;--ink:#24301c;--body:#3b4048;--accent:#e0b04a}
.rh.halloween{--lcd:#f39a2b;--ink:#140a02;--body:#1b1410;--body2:#000;--accent:#ff7a00}
.rh-fab{position:fixed;right:18px;bottom:18px;z-index:60;width:50px;height:78px;border-radius:14px 14px 18px 18px;background:linear-gradient(var(--body),var(--body2));box-shadow:0 6px 18px #000a;border:2px solid #0006;cursor:pointer;padding:0}
.rh-fab:before{content:"";position:absolute;left:8px;right:8px;top:9px;height:24px;background:var(--lcd);border-radius:3px;box-shadow:inset 0 0 4px #0007}
.rh-fab:after{content:"";position:absolute;left:11px;right:11px;top:41px;height:28px;background:radial-gradient(circle,#cfd2d6 2px,transparent 2.5px) 0 0/10px 10px}
.rh.halloween .rh-fab:after{background:radial-gradient(circle,#ff7a00 2px,transparent 2.5px) 0 0/10px 10px}
.rh-fab .badge{position:absolute;top:-8px;right:-8px;background:#c0392b;color:#fff;font:bold 12px sans-serif;border-radius:10px;padding:2px 6px;z-index:2}
.rh-phone{position:fixed;right:18px;bottom:18px;z-index:61;width:240px;padding:16px 16px 20px;border-radius:40px 40px 52px 52px;background:linear-gradient(160deg,var(--body),var(--body2));box-shadow:0 14px 40px #000c,inset 0 2px 0 #fff2;border:2px solid #000;font-family:Georgia,serif}
.rh-brand{text-align:center;color:#cfd3d8;font:bold 11px sans-serif;letter-spacing:3px;margin-bottom:8px;opacity:.85}
.rh.halloween .rh-brand{color:#ff9a3c}
.rh-lcd{background:var(--lcd);color:var(--ink);height:168px;border-radius:8px;padding:5px 8px 20px;box-shadow:inset 0 0 10px #0006,0 0 0 6px #15171a;font:bold 14px/1.2 "Courier New",monospace;overflow:hidden auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;position:relative;
 background-image:linear-gradient(transparent 50%,#0000000d 50%),linear-gradient(90deg,transparent 50%,#0000000a 50%);background-size:3px 3px}
.rh-lcd .top{display:flex;justify-content:space-between;font-size:11px;border-bottom:2px solid var(--ink);margin-bottom:3px}
.rh-lcd .it{cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rh-lcd .it.sel,.rh-lcd .it:hover{background:var(--ink);color:var(--lcd)}
.rh-lcd .it.off{opacity:.5}
.rh-lcd small{font-size:11px}
.rh-lcd input,.rh-lcd select{width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:2px solid var(--ink);color:var(--ink);font:inherit;outline:0}
.rh-lcd .soft{position:sticky;bottom:-20px;margin:4px -8px -20px;padding:1px 8px;display:flex;justify-content:space-between;font-size:12px;border-top:2px solid var(--ink);background:var(--lcd)}
.rh-lcd .soft span{cursor:pointer}
.rh-lcd .m{margin:2px 0}.rh-lcd .m.me{text-align:right}
.rh-lcd .err{font-size:11px}
.rh-keys{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.rh-k{height:28px;border:0;border-radius:14px/12px;background:linear-gradient(#e6e8eb,#a9aeb5);box-shadow:0 3px 0 #555,0 4px 6px #0008;font:bold 14px sans-serif;color:#222;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:.9;cursor:pointer}
.rh.halloween .rh-k{background:linear-gradient(#ffb35c,#d15f00)}
.rh-k i{font:8px sans-serif;font-style:normal;opacity:.7}
.rh-nav{display:grid;grid-template-columns:1fr .7fr .7fr 1fr;gap:7px;margin-top:12px;align-items:center}
.rh-k.g{background:linear-gradient(#7fd08a,#2f8a3d);color:#fff}.rh-k.r{background:linear-gradient(#f08a7c,#a8322a);color:#fff}
.rh-k.n{border-radius:50%;height:34px}
body.rh-on #phone-pad-on{display:none!important}
@media(max-width:600px){.rh-phone{left:0;right:0;bottom:0;width:auto;border-radius:30px 30px 0 0;padding:12px 22px 16px}.rh-lcd{height:150px}.rh-k{height:32px}}
/* Minimiert: kleiner Knopf + optionale Tastenleiste am unteren Rand; body.rh-pad reserviert den Platz, damit nichts die Szene überdeckt */
.rh-phone{position:fixed}.rh-min{position:absolute;z-index:3;top:10px;right:22px;width:26px;height:20px;border:0;border-radius:6px;background:#0005;color:#cfd3d8;font:bold 12px sans-serif;cursor:pointer;line-height:1}
.rh-mini{position:fixed;right:10px;bottom:10px;z-index:62;width:44px;height:44px;border-radius:50%;border:2px solid #000;background:linear-gradient(var(--body),var(--body2));color:var(--lcd);font:20px sans-serif;box-shadow:0 4px 12px #000a;cursor:pointer;padding:0}
.rh-mini.live{background:linear-gradient(#7fd08a,#2f8a3d);color:#fff}
.rh-mini .badge{position:absolute;top:-6px;right:-6px;background:#c0392b;color:#fff;font:bold 11px sans-serif;border-radius:10px;padding:1px 5px}
.rh-mini-hang{position:fixed;right:60px;bottom:10px;z-index:62;width:44px;height:44px;border-radius:50%;border:2px solid #000;background:linear-gradient(#f08a7c,#a8322a);color:#fff;font:bold 18px sans-serif;cursor:pointer}
.rh-strip{position:fixed;left:0;right:64px;bottom:0;z-index:61;height:64px;box-sizing:border-box;padding:8px;display:grid;grid-template-columns:repeat(14,1fr);gap:4px;background:linear-gradient(var(--body),var(--body2));border-top:2px solid #000}
.rh-strip .rh-k{height:44px;border-radius:10px;font-size:15px}
body.rh-pad{padding-bottom:72px}
@media(max-width:600px){.rh-strip{grid-template-columns:repeat(7,1fr);height:104px}body.rh-pad{padding-bottom:112px}.rh-strip .rh-k{height:40px}}
.rh-brand{cursor:grab;touch-action:none;user-select:none}.rh-drag{transition:none!important}.rh-drag .rh-brand{cursor:grabbing}
@keyframes rh-in{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}
.rh-in{animation:rh-in .22s ease-out;transform-origin:bottom right}
@media(max-width:600px){.rh-brand{cursor:default}.rh-phone{max-height:55vh;padding:8px 18px 10px;transform-origin:bottom center}.rh-brand{margin-bottom:4px}.rh-lcd{height:min(150px,22vh);max-height:calc(55vh - 190px);min-height:96px}.rh-keys{margin-top:8px;gap:5px}.rh-nav{margin-top:8px;gap:5px}.rh-k{height:26px}.rh-k.n{height:28px}}
@media(prefers-reduced-motion:reduce){.rh-in{animation:none}}
.rh-out{transition:transform .2s ease-in,opacity .2s ease-in;transform:translateY(24px) scale(.9);opacity:0}
@media(prefers-reduced-motion:reduce){.rh-out{transition:none}}
/* Tastenleiste offen: andere unten angedockte Leisten (Dock, Musik, Web-Telefon, Mobil-Tabs) rutschen darüber */
body.rh-pad .dock,body.rh-pad #musicbar,body.rh-pad .phone,body.rh-pad .mtabs{margin-bottom:64px}
body.rh-pad .rh-mini{bottom:74px}
@media(max-width:600px){body.rh-pad .dock,body.rh-pad #musicbar,body.rh-pad .phone,body.rh-pad .mtabs{margin-bottom:104px}body.rh-pad .rh-mini{bottom:114px}.rh-strip{right:0}body.rh-pad{padding-bottom:calc(112px + 4rem)}}
