/* =============================================================================
 *  styles.css  ·  Seitenrahmen, Touch-Bedienung, Safe-Area
 *  Das Spiel selbst wird vollstaendig im Canvas gezeichnet.
 * ===========================================================================*/

:root {
  --ink: #0d1122;
  --gold: #f4c542;
  --gg: #c1272d;
  --paper: #fdf8ee;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* iOS: kein Gummiband-Scrollen, kein Doppeltipp-Zoom, keine Textauswahl */
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}

#game-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  background: var(--ink);
}

/* ---------- Touch-Bedienung ------------------------------------------------ */

.touch-ui { display: none; }

body.touch .touch-ui {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Die Knoepfe erscheinen nur waehrend des Spiels. Menues, Zwischenbilanz und
   Auswertung werden direkt angetippt — dort waeren sie nur im Weg. */
body.touch .pad,
body.touch .tbtn-pause {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

body.touch.playing .pad,
body.touch.playing .tbtn-pause {
  opacity: 1;
}

body.touch.playing .pad { pointer-events: none; }
body.touch.playing .tbtn { pointer-events: auto; }

.pad {
  position: absolute;
  bottom: calc(14px + var(--safe-b));
  display: flex;
  gap: 14px;
  pointer-events: none;
}

.pad-left  { left:  calc(16px + var(--safe-l)); }
.pad-right { right: calc(16px + var(--safe-r)); align-items: flex-end; }

.tbtn {
  pointer-events: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.42);
  background: rgba(20, 26, 46, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 60ms ease, background 60ms ease;
  padding: 0;
}

.tbtn span { pointer-events: none; display: block; margin-top: -2px; }

.tbtn.is-down {
  transform: scale(0.92);
  background: rgba(244, 197, 66, 0.55);
  border-color: rgba(255, 255, 255, 0.8);
  color: #241d08;
}

.tbtn-jump {
  width: 96px;
  height: 96px;
  font-size: 30px;
  background: rgba(47, 191, 113, 0.30);
  border-color: rgba(160, 255, 205, 0.55);
}

.tbtn-book {
  background: rgba(193, 39, 45, 0.34);
  border-color: rgba(255, 190, 190, 0.55);
  font-size: 21px;
  margin-bottom: 10px;
}

.tbtn-pause {
  position: absolute;
  top: calc(10px + var(--safe-t));
  right: calc(14px + var(--safe-r));
  width: 46px;
  height: 46px;
  font-size: 16px;
  letter-spacing: 1px;
}

/* Auf breiten Touchgeräten (iPad) etwas größer und weiter außen */
@media (min-width: 900px) and (pointer: coarse) {
  .tbtn { width: 86px; height: 86px; font-size: 30px; }
  .tbtn-jump { width: 112px; height: 112px; }
}

/* ---------- Hochformat-Hinweis --------------------------------------------- */

#rotate-hint {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(9, 12, 24, 0.94);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.rotate-box { max-width: 320px; }
.rotate-box p { margin: 8px 0; font-size: 15px; line-height: 1.5; opacity: 0.85; }
.rotate-box strong { font-size: 19px; opacity: 1; }

.rotate-icon {
  font-size: 54px;
  color: var(--gold);
  animation: spin 2.6s ease-in-out infinite;
}

@keyframes spin {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(90deg); }
}

/* ---------- Ladeanzeige ------------------------------------------------------ */

#boot {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.boot-box p { margin: 16px 0 4px; font-size: 20px; font-weight: 700; }
.boot-box small { opacity: 0.55; font-size: 13px; }

.boot-book {
  width: 54px;
  height: 40px;
  margin: 0 auto;
  border-radius: 4px;
  background: var(--gg);
  border: 2px solid #7d1418;
  position: relative;
  animation: flip 1.4s ease-in-out infinite;
}

.boot-book::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 5px;
  width: 9px;
  height: 26px;
  background: var(--paper);
}

@keyframes flip {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(8deg) translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-icon, .boot-book { animation: none; }
}