/* GORE KANOID — Stile; alles unter .gk-host, damit das Spiel direkt in der Seite laufen kann (ohne iframe) */
.gk-host {
  --bg: #050205; --text: #eee8df; --red: #9f1525; --red2: #d13a3d; --dark-red: #3c0711; --line: rgba(218,195,170,.13);
      --hud-bg: rgba(7,2,6,.74); --btn-shadow: 0 0 30px rgba(140,8,25,.7), 0 6px 0 #26040a;
    }
.gk-host, .gk-host * { box-sizing: border-box; }
.gk-host { all: initial; display: block; margin: 0; padding: 0; position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
.gk-host { font-family: Inter, system-ui, sans-serif; color: var(--text); }
.gk-host button { cursor: pointer; }
.gk-host .game-root { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; touch-action: none; user-select: none; background: var(--bg); }
.gk-host .game-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.gk-host .decal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gk-host .hidden-canvas { display: none; }
.gk-host .hud-bar { position: absolute; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: max(6px, env(safe-area-inset-top)) 8px 8px; background: var(--hud-bg); backdrop-filter: blur(2px); border-bottom: 1px solid rgba(58,0,20,.6); }
.gk-host .hud-group { display: flex; gap: 12px; align-items: center; }
.gk-host .hud-group.right { gap: 8px; }
.gk-host .hud-label { font-size: 10px; letter-spacing: .2em; opacity: .6; font-family: ui-monospace, monospace; }
.gk-host .hud-trait { font-size: 9px; letter-spacing: .14em; opacity: .5; font-family: ui-monospace, monospace; color: #ff5a6a; }
.gk-host .hud-score { font-size: 18px; color: #e87365; letter-spacing: .05em; font-family: Nosifer, system-ui; text-shadow: 0 0 13px #6d0716, 0 2px 0 #26040a; }
.gk-host .hud-combo { font-size: 13px; color: #d9b46f; font-family: Nosifer, system-ui; text-shadow: 0 0 10px #77460d; animation: gkHudComboPulse .5s ease-in-out infinite alternate; }
@keyframes gkHudComboPulse { from { opacity: .68; transform: scale(1); } to { opacity: 1; transform: scale(1.12); } }
.gk-host .hud-level { font-size: 16px; color: #d8c1a0; font-family: Nosifer, system-ui; }
.gk-host .hud-pause-btn { min-height: 26px; min-width: 26px; padding: 0 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.gk-host .hud-lives { display: flex; align-items: center; gap: 6px; }
.gk-host .hud-life { width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; border: 1px solid #330010; font-size: 13px; }
.gk-host .hud-life.alive { background: #ff102a; border-color: #ff6a80; box-shadow: 0 0 12px #ff0022; }
.gk-host .hud-life.dead { background: #000; opacity: .25; }
.gk-host .hud-lives-extra { font: 700 12px ui-monospace, monospace; color: #ff6a80; text-shadow: 0 0 8px #ff0022; margin-left: 1px; }
/* Bedienleiste unten: eigener Schiebe-Regler fürs Paddle (mit sichtbarem
       Griff, damit klar ist, dass man hier ziehen kann) + separater
       Feuer-Knopf darunter. Bewusst unterhalb des Paddles (das sitzt ca.
       96px/68px über dem unteren Rand, siehe resetLevel), damit der Daumen
       nie das Paddle/den Ball verdeckt. */.gk-host .control-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.gk-host .steer-track { position: relative; width: 82%; max-width: 380px; height: 46px; border-radius: 23px; background: rgba(20,2,6,.78); border: 1px solid rgba(255,138,165,.5); touch-action: none; box-shadow: inset 0 0 14px rgba(0,0,0,.6); }
.gk-host .steer-track__arrow { position: absolute; top: 50%; transform: translateY(-50%); color: rgba(255,138,165,.65); font-size: 15px; pointer-events: none; }
.gk-host .steer-track__arrow.left { left: 16px; }
.gk-host .steer-track__arrow.right { right: 16px; }
.gk-host .steer-track__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 10px ui-monospace, monospace; letter-spacing: .16em; color: rgba(255,186,198,.55); pointer-events: none; }
.gk-host .steer-handle { position: absolute; top: 3px; left: 0; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb0bb, #ff2a4a 60%, #7a0012); border: 1px solid #ffd0d8; box-shadow: 0 0 12px rgba(255,20,50,.6); }
.gk-host .overlay { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: rgba(0,0,0,.82); backdrop-filter: blur(3px); }
.gk-host .overlay-menu { background-image: linear-gradient(90deg, rgba(2,0,3,.92), rgba(10,0,5,.38) 52%, rgba(2,0,3,.62)), url('img/menu-anatomy-eye-v1.webp'); background-size: cover; background-position: center; }
.gk-host .overlay-dark { background: rgba(9,0,1,.92); }
.gk-host .overlay-win { background: radial-gradient(circle at center, #2a0010, #000 78%); }
.gk-host .overlay-glow { position: absolute; border-radius: 999px; filter: blur(42px); pointer-events: none; }
.gk-host .glow-a { top: -64px; left: -56px; width: 192px; height: 192px; background: #ff0022; opacity: .3; }
.gk-host .glow-b { right: -64px; bottom: -64px; width: 256px; height: 256px; background: #6e0012; opacity: .45; filter: blur(48px); }
.gk-host .title-logo { position: relative; margin: 0; line-height: .82; letter-spacing: -.05em; color: #c74945; font-size: clamp(52px, 16vw, 92px); font-family: Nosifer, system-ui; text-shadow: 0 0 22px #5d0613, 0 4px 0 #25030a, 0 0 70px #5d0613; }
.gk-host .version-pills { display: flex; gap: 6px; margin-top: 8px; }
.gk-host .version-pills span { padding: 2px 8px; border-radius: 999px; background: #1a0005; border: 1px solid #4a0014; font: 10px ui-monospace, monospace; letter-spacing: .1em; color: #ff8aa0; }
.gk-host .menu-copy, .gk-host .screen-copy { margin-top: 16px; max-width: 340px; font-size: 13px; line-height: 1.45; color: #ffbac6; }
.gk-host .screen-copy.small { max-width: 320px; font-size: 12px; opacity: .6; line-height: 1.5; }
.gk-host .menu-help, .gk-host .screen-hint, .gk-host .screen-sub { margin-top: 12px; font: 11px ui-monospace, monospace; letter-spacing: .18em; opacity: .7; }
.gk-host .primary-btn, .gk-host .secondary-btn { margin-top: 28px; min-height: 48px; padding: 0 32px; border-radius: 4px; border: 1px solid #d08f7a; background: linear-gradient(#b82e32,#5c0c18); color: #f5e9d4; font-weight: 900; letter-spacing: .12em; box-shadow: var(--btn-shadow); }
.gk-host .badge-row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 340px; }
.gk-host .badge { font: 9px ui-monospace, monospace; letter-spacing: .1em; padding: 3px 7px; border-radius: 3px; border: 1px solid rgba(218,195,170,.25); opacity: .4; }
.gk-host .badge.got { opacity: 1; color: #ffd866; border-color: #ffd866; }
.gk-host .overlay-menu { overflow-y: auto; overflow-x: hidden; justify-content: safe center; }
.gk-host .audio-ctl { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: 360px; font: 11px ui-monospace, monospace; letter-spacing: .1em; color: #ff8aa0; }
.gk-host .audio-ctl input[type=range] { width: 110px; accent-color: #b82e32; }
.gk-host .audio-btn { min-height: 34px; padding: 0 10px; border-radius: 4px; border: 1px solid rgba(218,195,170,.45); background: #271710; color: #eadfce; font: 11px ui-monospace, monospace; letter-spacing: .08em; cursor: pointer; }
.gk-host .audio-btn.off { opacity: .55; text-decoration: line-through; }
.gk-host .hud-life.bonus.dead { opacity: .22; }
.gk-host .hint-toast { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); z-index: 15; max-width: min(92vw, 520px); display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 6px; border: 1px solid #7a2030; background: rgba(10,0,4,.88); color: #f0d8c8; font: 12px/1.45 ui-monospace, monospace; pointer-events: none; animation: gkHintIn .35s ease-out; }
.gk-host .hint-toast b { color: #ff7a86; letter-spacing: .12em; font-size: 11px; }
@keyframes gkHintIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.gk-host .skin-picker { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font: 11px ui-monospace, monospace; letter-spacing: .1em; color: #ff8aa0; }
.gk-host .skin-name { min-width: 84px; text-align: center; color: #ffd866; }
.gk-host .skin-locked { width: 100%; text-align: center; opacity: .55; font-size: 10px; }
.gk-host .help-overlay { justify-content: flex-start; overflow-y: auto; z-index: 30; }
.gk-host .help-body { width: min(92vw, 560px); text-align: left; font: 12px/1.5 ui-monospace, monospace; color: #e8d8cc; }
.gk-host .help-sec h3 { margin: 16px 0 6px; font-size: 12px; letter-spacing: .16em; color: #ff7a86; }
.gk-host .help-sec p { margin: 3px 0; }
.gk-host .help-sec b { color: #ffd9a8; }
.gk-host .perk-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.gk-host .perk-card { display: flex; flex-direction: column; gap: 6px; width: 168px; min-height: 84px; padding: 12px 10px; border-radius: 4px; border: 1px solid rgba(218,195,170,.55); background: #271710; color: #eadfce; cursor: pointer; text-align: center; }
.gk-host .perk-card:hover, .gk-host .perk-card:focus-visible { border-color: #ff5a6a; background: #3a1a14; }
.gk-host .perk-name { font-weight: 900; letter-spacing: .12em; font-size: 13px; color: #ff7a86; }
.gk-host .perk-txt { font: 11px ui-monospace, monospace; opacity: .85; }
@media (max-width: 560px) {
  .gk-host .perk-card { width: 100%; min-height: 0; }
  .gk-host .perk-row { width: 100%; max-width: 340px; flex-direction: column; }
}
.gk-host .secondary-btn { background: #271710; color: #eadfce; border-color: rgba(218,195,170,.55); box-shadow: none; }
.gk-host .menu-endless-btn { margin-top: 12px; font-size: 12px; padding: 0 22px; min-height: 40px; opacity: .88; }
.gk-host .menu-nick-row { margin-top: 16px; display: flex; align-items: center; gap: 8px; font: 11px ui-monospace, monospace; letter-spacing: .1em; color: #ff8aa0; }
.gk-host .menu-nick-row input { background: #1a0005; border: 1px solid #4a0014; color: #ffcc99; font: 12px ui-monospace, monospace; padding: 5px 8px; border-radius: 4px; width: 140px; }
.gk-host .menu-nick-row input[readOnly] { color: #ffd866; cursor: default; }
.gk-host .menu-leaderboard { margin-top: 14px; width: min(280px, 80vw); background: rgba(20,0,4,.5); border: 1px solid #4a0014; border-radius: 6px; padding: 8px 12px; }
.gk-host .menu-leaderboard__title { font: 10px ui-monospace, monospace; letter-spacing: .2em; opacity: .6; margin-bottom: 6px; text-align: center; }
.gk-host .menu-leaderboard__row { display: flex; justify-content: space-between; font: 12px ui-monospace, monospace; color: #ffbac6; padding: 2px 0; }
.gk-host .menu-panel { position: relative; z-index: 1; width: min(100%, 460px); padding: 24px 30px; border: 1px solid rgba(218,195,170,.2); border-radius: 10px; background: linear-gradient(145deg, rgba(5,0,3,.86), rgba(12,0,5,.62)); box-shadow: 0 18px 70px rgba(0,0,0,.55), inset 0 0 30px rgba(80,0,15,.16); backdrop-filter: blur(5px); }
.gk-host .menu-panel .title-logo { align-self: center; }
.gk-host .menu-actions { display: flex; flex-direction: column; align-items: center; }
.gk-host .menu-actions .primary-btn, .gk-host .menu-actions .secondary-btn { margin-top: 12px; min-width: 220px; }
.gk-host .menu-actions .primary-btn { margin-top: 22px; }
.gk-host .menu-options { width: min(100%, 360px); margin-top: 16px; border: 1px solid rgba(218,195,170,.3); border-radius: 6px; background: rgba(8,1,4,.68); text-align: left; }
.gk-host .menu-options > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px; color: #ffd4c4; cursor: pointer; list-style-position: inside; font: 11px ui-monospace, monospace; letter-spacing: .08em; }
.gk-host .badge-count { color: #e7b887; opacity: .8; font-size: 9px; letter-spacing: 0; white-space: nowrap; }
.gk-host .menu-options__body { padding: 2px 14px 14px; border-top: 1px solid rgba(218,195,170,.15); }
.gk-host .menu-options .badge-row { margin-top: 12px; }
.gk-host .badge-empty, .gk-host .badge-explainer { color: #f0d8c8; font: 11px/1.5 ui-monospace, monospace; opacity: .9; }
.gk-host .badge-explainer { margin: 7px 0 0; text-align: center; }
.gk-host .menu-options .audio-ctl { margin: 12px auto 0; }
.gk-host .menu-options .skin-picker { margin-top: 12px; }
.gk-host .menu-help-btn { display: block; margin: 14px auto 0; min-height: 38px; }
.gk-host .menu-nick-row { justify-content: center; margin-top: 14px; padding: 9px 10px; border-radius: 5px; background: rgba(35,3,10,.66); }
.gk-host .menu-nick-row input { min-height: 34px; }
.gk-host .menu-leaderboard { width: 100%; margin-top: 12px; background: rgba(0,0,0,.42); }
.gk-host .menu-help { width: min(100%, 400px); margin: 14px auto 0; padding: 9px 12px; border: 1px solid rgba(218,195,170,.23); border-radius: 5px; background: rgba(0,0,0,.64); color: #f6dfce; font-size: 10px; line-height: 1.55; letter-spacing: .08em; opacity: 1; }
.gk-host .control-label { display: block; margin-bottom: 3px; color: #ff9a9e; font-weight: 700; }
.gk-host .reverse-controls-cue { position: absolute; z-index: 24; top: 54px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 20px); padding: 9px 14px 11px; overflow: hidden; border: 1px solid #ff7882; border-radius: 7px; background: linear-gradient(110deg, rgba(55,0,10,.97), rgba(13,0,5,.96)); box-shadow: 0 0 22px rgba(255,20,50,.34), 0 5px 18px rgba(0,0,0,.6); color: #fff0de; animation: gkCurseCue .24s ease-out both; }
.gk-host .reverse-controls-cue__icon { color: #ff6874; font-size: 25px; line-height: 1; text-shadow: 0 0 12px #ff1736; }
.gk-host .reverse-controls-cue b, .gk-host .reverse-controls-cue small { display: block; white-space: nowrap; }
.gk-host .reverse-controls-cue b { color: #ff9ca3; font: 800 11px/1.3 ui-monospace, monospace; letter-spacing: .1em; }
.gk-host .reverse-controls-cue small { margin-top: 3px; font: 10px/1.3 ui-monospace, monospace; letter-spacing: .04em; }
.gk-host .reverse-controls-cue__arrows { color: #ffd071; font: 700 18px/1 ui-monospace, monospace; }
.gk-host .reverse-controls-cue i { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; transform-origin: left; background: linear-gradient(90deg, #ff354b, #ffcf70); animation: gkCurseTimer 1.8s linear both; }
@keyframes gkCurseTimer { to { transform: scaleX(0); } }
@keyframes gkCurseCue { from { opacity: 0; transform: translate(-50%, -8px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (min-width: 900px) {
  .gk-host .overlay-menu { align-items: flex-start; padding-left: clamp(34px, 8vw, 128px); }
  .gk-host .menu-panel { width: min(42vw, 500px); padding: 28px 34px; }
  .gk-host .menu-panel .title-logo { align-self: flex-start; font-size: clamp(60px, 8vw, 92px); }
  .gk-host .menu-panel .version-pills { margin-top: 12px; }
  .gk-host .menu-copy { max-width: 390px; text-align: left; }
  .gk-host .menu-actions { align-items: flex-start; }
  .gk-host .menu-actions .primary-btn, .gk-host .menu-actions .secondary-btn { min-width: 240px; }
  .gk-host .menu-options { width: 100%; }
  .gk-host .menu-help { margin-left: 0; }
}
@media (max-width: 560px) {
  .gk-host .overlay-menu { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .gk-host .menu-panel { width: 100%; max-width: 420px; padding: 16px 14px; border-radius: 8px; }
  .gk-host .title-logo { font-size: clamp(48px, 15vw, 68px); }
  .gk-host .version-pills { gap: 4px; }
  .gk-host .version-pills span { padding: 2px 6px; font-size: 9px; }
  .gk-host .menu-copy { max-width: 340px; margin: 10px 0 0; font-size: 12px; line-height: 1.4; }
  .gk-host .menu-actions .primary-btn { margin-top: 14px; }
  .gk-host .menu-actions .primary-btn, .gk-host .menu-actions .secondary-btn { min-height: 42px; }
  .gk-host .menu-actions .menu-endless-btn { margin-top: 8px; }
  .gk-host .menu-options { margin-top: 12px; }
  .gk-host .menu-help { margin-top: 10px; }
  .gk-host .reverse-controls-cue { top: 58px; gap: 7px; padding: 8px 10px 10px; }
  .gk-host .reverse-controls-cue__icon { font-size: 21px; }
  .gk-host .reverse-controls-cue b { font-size: 9px; }
  .gk-host .reverse-controls-cue small { font-size: 9px; }
  .gk-host .reverse-controls-cue__arrows { font-size: 15px; }
}
.gk-host .screen-big { font-size: clamp(48px, 14vw, 96px); line-height: 1; font-family: Nosifer, system-ui; text-shadow: 0 0 32px #ff0022, 0 6px 0 #4a0010; }
.gk-host .screen-big.red { color: #ff1f3d; }
.gk-host .screen-big.dark-red { color: #7a0012; text-shadow: 0 0 18px #ff0022; }
.gk-host .win-pill { margin-top: 16px; padding: 8px 16px; border-radius: 999px; background: #ff0a2e; color: #000; font-weight: 900; letter-spacing: .08em; font-size: 13px; }
.gk-host .launch-hint { pointer-events: none; position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 20; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.7); border: 1px solid var(--line); font: 11px ui-monospace, monospace; letter-spacing: .08em; animation: gkPulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes gkPulse { 50% { opacity: .5; } }