/* THE KOLERISCHE KARTOFFEL — Stile; alles unter .tk-host, damit das Spiel direkt in der Seite laufen kann (ohne iframe) */
.tk-host, .tk-host * { box-sizing: content-box; }
.tk-host button, .tk-host select { box-sizing: border-box; }
.tk-host { all: initial; display: block; position: relative; width: 100%; height: 100%; overflow: hidden; background: #0a0f0a;
  font-family: 'Courier New', monospace; -webkit-user-select: none; user-select: none; touch-action: none; color-scheme: dark; }
.tk-host #tkSpiel {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.tk-host #tkCv {display:block;background:#87ceeb;image-rendering:auto;}
.tk-host .tbtn {position:absolute;z-index:10;display:none;align-items:center;justify-content:center;
    width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.5);
    background:rgba(0,0,0,.35);color:#fff;font-size:26px;font-weight:bold;
    font-family:'Courier New',monospace;touch-action:none;-webkit-user-select:none;user-select:none;}
.tk-host .tbtn:active {background:rgba(255,255,255,.25);}
.tk-host #btnL {left:14px;bottom:78px;}
.tk-host #btnR {left:92px;bottom:78px;}
.tk-host #btnJ {right:14px;bottom:78px;}
.tk-host #btnD {right:calc(53px + env(safe-area-inset-right));bottom:calc(104px + env(safe-area-inset-bottom));width:48px;height:48px;font-size:22px;padding:0;cursor:pointer;}
.tk-host #btnK {right:92px;bottom:78px;border-color:rgba(255,80,80,.7);color:#ff8080;}
.tk-host #btnP {position:absolute;top:calc(8px + env(safe-area-inset-top));
    right:calc(52px + env(safe-area-inset-right));z-index:10;width:40px;height:40px;
    border-radius:8px;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.3);
    color:#fff;font-size:18px;display:none;align-items:center;justify-content:center;}
.tk-host #btnV {position:absolute;top:calc(8px + env(safe-area-inset-top));
    right:calc(8px + env(safe-area-inset-right));z-index:10;width:40px;height:40px;
    border-radius:8px;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.3);
    color:#fff;font-size:17px;display:none;align-items:center;justify-content:center;}
/* Bedienknöpfe respektieren Notch und Home-Leiste */.tk-host #btnL {left:calc(14px + env(safe-area-inset-left));}
.tk-host #btnR {left:calc(92px + env(safe-area-inset-left));}
.tk-host #btnJ {right:calc(14px + env(safe-area-inset-right));}
.tk-host #btnK {right:calc(92px + env(safe-area-inset-right));}
.tk-host .tbtn {bottom:calc(24px + env(safe-area-inset-bottom));}
.tk-host #btnM {position:absolute;top:calc(8px + env(safe-area-inset-top));
    right:calc(96px + env(safe-area-inset-right));z-index:10;width:40px;height:40px;
    border-radius:8px;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.3);
    color:#fff;font-size:17px;display:none;align-items:center;justify-content:center;}
@media (pointer:coarse) {
  .tk-host .tbtn, .tk-host #btnP, .tk-host #btnV, .tk-host #btnM {display:flex;}
}
/* ── Namensabfrage für die Bestenliste ──────────────────────────────── */.tk-host #nickFeld {position:absolute;inset:0;z-index:60;display:none;
    align-items:center;justify-content:center;background:rgba(6,9,5,.82);}
.tk-host .nk-kasten {background:#12180e;border:2px solid #88bb44;border-radius:12px;
    padding:22px 24px;display:flex;flex-direction:column;gap:14px;
    font-family:'Courier New',monospace;max-width:min(92vw,380px);}
.tk-host .nk-titel {color:#88bb44;font-size:.8rem;letter-spacing:.14em;text-align:center;}
.tk-host #nickEingabe {font-family:'Courier New',monospace;font-size:1.05rem;padding:10px 12px;
    border-radius:8px;border:2px solid #4a6a34;background:#0a0f08;color:#e8e8dc;
    text-align:center;outline:none;}
.tk-host #nickEingabe:focus {border-color:#88bb44;}
.tk-host .nk-knoepfe {display:flex;gap:10px;}
.tk-host .nk-knoepfe button {flex:1;font-family:'Courier New',monospace;font-size:.82rem;
    padding:11px 8px;border-radius:8px;border:2px solid #4a6a34;background:#1a2412;
    color:#c8e8a0;letter-spacing:.08em;}
.tk-host .nk-knoepfe button:active {background:#26341a;}
.tk-host #nickWeg {border-color:#5a4a34;color:#c8b090;background:#241c12;}
/* ── Hochkant-Sperre: quer halten ist Pflicht ──────────────────────────
     Auf iPhones laesst sich die Lage nicht erzwingen (kein Fullscreen-API
     fuer Elemente, keine Orientation-Lock). Deshalb dieser Vorhang, der das
     Spiel anhaelt, bis das Geraet quer liegt. */.tk-host #tkQuer {position:absolute;inset:0;z-index:50;display:none;
    flex-direction:column;align-items:center;justify-content:center;gap:22px;
    background:#0a0f0a;color:#e8e8dc;text-align:center;padding:24px;
    font-family:'Courier New',monospace;}
.tk-host #tkQuer .handy {width:84px;height:140px;border:5px solid #88bb44;border-radius:12px;
    position:relative;animation:tkDrehen 2.4s ease-in-out infinite;}
.tk-host #tkQuer .handy::after {content:'';position:absolute;left:50%;bottom:7px;
    transform:translateX(-50%);width:26px;height:4px;border-radius:2px;background:#88bb44;}
@keyframes tkDrehen {
    0%,28%{transform:rotate(0deg);} 55%,90%{transform:rotate(-90deg);} 100%{transform:rotate(0deg);}
  }
.tk-host #tkQuer h2 {margin:0;font-size:1.1rem;letter-spacing:.16em;color:#88bb44;}
.tk-host #tkQuer p {margin:0;font-size:.78rem;line-height:1.7;color:#9aa694;max-width:22em;}
/* Gesteuert per Klasse, NICHT per Medienabfrage: im iframe bezieht sich
     'orientation' auf dessen Seitenverhaeltnis, nicht auf die Geraetelage. */.tk-host.hochkant #tkQuer {display:flex;}