/* Ticket Rush – Layout (Desktop und Smartphone) */
  * { box-sizing:border-box; margin:0; padding:0; }
  html, body { height:100%; background:#0d0b14; overflow:hidden; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
  body { display:flex; align-items:center; justify-content:center; height:100vh; height:100dvh; }
  :root { --side:0px; }
  #wrap { position:relative; width:min(calc(100vw - 2 * var(--side)), calc(100vh * 16 / 9)); width:min(calc(100vw - 2 * var(--side)), calc(100dvh * 16 / 9)); aspect-ratio:16/9; box-shadow:0 0 80px rgba(142,108,255,.25); }
  canvas { display:block; width:100%; height:100%; cursor:pointer; }
  .hidden { display:none !important; }

  /* Smartphone/Tablet: Tasten sitzen links und rechts neben dem Spielfeld und verdecken es nicht */
  body.touch { --side:clamp(104px, 13vw, 170px); }
  #touch { position:fixed; inset:0; display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none;
           padding:0 max(6px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  #touch .pad { width:calc(var(--side) - 8px); display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:auto; }
  #touch .row { display:flex; gap:6px; justify-content:center; }
  #touch button { width:min(48px, calc((var(--side) - 22px) / 2)); aspect-ratio:1; border-radius:50%; border:2px solid rgba(231,223,255,.55); background:rgba(142,108,255,.18);
                  color:#E7DFFF; font:700 18px Arial; touch-action:none; transition:transform .05s, background .05s; }
  #touch button.on { background:rgba(213,244,67,.5); transform:scale(.92); }
  #touch button.small { width:min(44px, calc((var(--side) - 22px) / 2)); font-size:15px; }
  #touch button.tiny { width:30px; font-size:12px; border-width:1px; background:rgba(30,30,27,.5); }
  #touch button.tiny.off { color:#FF6A23; border-color:#FF6A23; text-decoration:line-through; }
  #touch .row:has(.tiny) { gap:4px; }
  #touch button.x { width:min(52px, calc(var(--side) - 30px)); font-size:20px; background:rgba(255,106,35,.3); border-color:rgba(255,106,35,.8); }
  #touch button.a { width:min(66px, calc(var(--side) - 20px)); font-size:22px; background:rgba(213,244,67,.85); color:#1E1E1B; border-color:#D5F443; }
  #touch button.a.on { background:#F1FF9A; }

  /* Namenseingabe auf dem Handy: echtes Eingabefeld über dem Namensfeld, öffnet die Handy-Tastatur */
  #nameInput { position:absolute; left:19.79%; top:39.63%; width:60.42%; height:15.56%; border:3px solid #D5F443; border-radius:12px; background:#fff;
               font-family:"Press Start 2P", monospace; font-size:3.2vw; color:#1E1E1B; padding:0 3%; text-transform:uppercase; outline:none; }

  /* Hochkant auf Touch-Geräten: Hinweis zum Drehen */
  #rotate { display:none; position:fixed; inset:0; z-index:10; background:#1a1430; color:#E7DFFF; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; }
  #rotate .t { font:700 20px "Instrument Sans", Arial, sans-serif; color:#fff; }
  #rotate .s { font:15px "Instrument Sans", Arial, sans-serif; }
  #rotate svg { animation:dreh 2.4s ease-in-out infinite; }
  @keyframes dreh { 0%, 30% { transform:rotate(0); } 60%, 100% { transform:rotate(-90deg); } }
  @media (orientation: portrait) { body.touch #rotate { display:flex; } }