body {
  font-family: 'Inter', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  margin: 0;
  background:
    radial-gradient(circle at 50% 24%, rgba(26,42,61,.92), rgba(7,10,18,.98) 46%, #04070c 100%);
  color: #e5eef8;
}
.font-heading { font-family: 'Outfit', sans-serif; }

header,
footer {
  background: rgba(7,12,20,.96) !important;
  border-color: rgba(78,101,127,.34) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
main {
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)),
    radial-gradient(circle at 50% 45%, rgba(15,35,31,.30), transparent 58%);
}

#poolCanvas {
  display: block;
  border-radius: 26px;
  background: #07110e;
  box-shadow: 0 26px 70px rgba(0,0,0,.52), 0 0 0 1px rgba(203,213,225,.10);
}
.table-container-glow { box-shadow: 0 26px 70px rgba(0,0,0,.52), 0 0 0 1px rgba(203,213,225,.10) !important; }

.active-player-glow {
  box-shadow: 0 0 0 1px rgba(56,189,248,.70), 0 7px 22px rgba(2,132,199,.14) !important;
  border-color: rgba(56,189,248,.92) !important;
  background: rgba(12,25,39,.96) !important;
}
.btn-active {
  background: linear-gradient(135deg,#06735b,#0f9f79) !important;
  border-color: rgba(110,231,183,.85) !important;
  color: #fff !important;
}

#powerBarContainer { position:relative; display:block; height:.625rem; padding:2px; overflow:hidden; background:#182332; }
#powerBarFill { display:block; height:100%; min-width:4px; opacity:1; visibility:visible; background:linear-gradient(90deg,#22c55e 0%,#f59e0b 58%,#ef4444 100%) !important; transition:width 75ms linear; }

/* Spielaufbau: Tisch bleibt Zentrum, Panels sitzen sauber links/rechts und haben gleiche Sprache. */
#sideControls {
  position:absolute;
  left:calc(100% + 18px);
  top:50%;
  transform:translateY(-50%);
  z-index:30;
  width:176px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#cpuThinkPanel {
  position:absolute !important;
  left:auto !important;
  right:calc(100% + 18px) !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  width:176px;
  height:352px;
  min-height:352px !important;
  max-height:60vh !important;
  padding:12px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(9,17,29,.985),rgba(5,11,19,.985));
  border:1px solid rgba(82,120,148,.34);
  display:flex !important;
  flex-direction:column;
  gap:7px;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto;
  box-shadow:0 18px 44px rgba(0,0,0,.38) !important;
}
#cpuThinkPanel.cpu-think-hidden { display:flex !important; opacity:1 !important; visibility:visible !important; }
#cpuThinkPanel .cpu-think-head {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"dot title" "phase phase";
  align-items:center;
  column-gap:7px;
  row-gap:2px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(71,95,119,.34);
}
#cpuThinkDot { grid-area:dot; width:7px; height:7px; border-radius:50%; background:#38bdf8; }
#cpuThinkTitle { grid-area:title; font:800 11px 'Outfit',sans-serif; color:#d7eefb; letter-spacing:.12em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cpuThinkPhase { grid-area:phase; padding-left:14px; font:700 10px ui-monospace,monospace; color:#7f93a8; }
#cpuThinkLog { flex:1; min-height:0; max-height:calc(60vh - 58px) !important; overflow-y:auto; overflow-x:hidden; padding:2px 4px 2px 1px; font:600 10px/1.42 ui-monospace,SFMono-Regular,Consolas,monospace; color:#c2d0dd; user-select:text; }
.cpu-think-line { padding:3px 0; border-bottom:1px solid rgba(71,95,119,.18); overflow-wrap:anywhere; }
.cpu-intent-line { font-size:12px; line-height:1.5; font-weight:800; color:#f3f8fb; background:linear-gradient(90deg,rgba(14,116,144,.17),rgba(15,23,42,0)); border-left:2px solid rgba(56,189,248,.75); padding:5px 0 5px 6px; }
.cpu-step{color:#67e8f9}.cpu-good{color:#86efac}.cpu-warn{color:#fbbf24}
.cpu-log-ball { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; margin:0 2px; border-radius:999px; font:900 10px/1 'Outfit',sans-serif; vertical-align:-3px; }

#spinSettingsBar,#spinControl,#replayControls { width:176px; box-sizing:border-box; }
.spin-settings-btn,
#spinControl,
#replayControls {
  background:linear-gradient(180deg,rgba(9,17,29,.985),rgba(5,11,19,.985));
  border:1px solid rgba(82,120,148,.34);
  box-shadow:0 18px 44px rgba(0,0,0,.38) !important;
}
.spin-settings-btn { width:176px; min-height:34px; padding:8px 12px; border-radius:13px; color:#d9ecf8; font:800 11px 'Outfit',sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.spin-settings-btn:hover { border-color:rgba(103,232,249,.72); background:linear-gradient(180deg,#0b3242,#07111b); }
#spinControl { padding:13px 12px 11px; border-radius:16px; text-align:center; }
#spinLabel { font:800 11px 'Outfit',sans-serif; color:#e7eef6; letter-spacing:.10em; text-transform:uppercase; }
#spinBall { position:relative; width:146px; height:146px; margin:8px auto 7px; border-radius:50%; cursor:crosshair; touch-action:none; }
#spinBallCanvas { position:absolute; inset:0; width:146px; height:146px; border-radius:50%; pointer-events:none; }
#spinDot { position:absolute; left:50%; top:50%; width:17px; height:17px; margin:-8.5px 0 0 -8.5px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#dbeafe 0 12%,#3b82f6 31%,#1d4ed8 70%,#172554 100%); border:2px solid #dbeafe; box-shadow:0 0 0 3px rgba(37,99,235,.22); pointer-events:none; z-index:5; }
#spinText { min-height:18px; font:700 12px 'Inter',sans-serif; color:#9fc2df; }
#replayControls { padding:11px; border-radius:16px; display:flex; flex-direction:column; gap:7px; }
#replayControls .replay-title { font:800 10px 'Outfit',sans-serif; color:#9ecce0; letter-spacing:.12em; text-transform:uppercase; text-align:center; }
#replayControls button { width:100%; min-height:33px; border-radius:10px; font:800 11px 'Inter',sans-serif; transition:transform .12s ease,filter .12s ease,opacity .12s ease; }
#replayControls button:disabled { opacity:.30; cursor:not-allowed; }
#replaySpeedText { text-align:center; font:800 11px ui-monospace,monospace; color:#7f93a8; }

/* Modale: echter dunkler Fokus statt heller Tailwind-Fallbacks. */
#modalModeSelect,
#modalNpcSelect,
#modalPhysicsSettings {
  background:rgba(2,6,12,.80) !important;
  backdrop-filter:blur(8px);
}
#modalModeSelect.hidden,#modalNpcSelect.hidden,#modalPhysicsSettings.hidden { display:none !important; }
.menu-panel,
.settings-panel,
.npc-panel {
  background:linear-gradient(180deg,#0c1522,#070c14) !important;
  border:1px solid rgba(88,112,137,.40) !important;
  border-radius:22px !important;
  box-shadow:0 32px 100px rgba(0,0,0,.66) !important;
}
.mode-card,
.npc-card {
  background:linear-gradient(180deg,#101b2a,#0b121d) !important;
  border:1px solid rgba(78,101,127,.46) !important;
  color:#dbe7f2 !important;
  box-shadow:none !important;
}
.mode-card:hover,.npc-card:hover,.npc-card.selected { border-color:rgba(56,189,248,.72) !important; background:linear-gradient(180deg,#102436,#0a1723) !important; transform:translateY(-1px); }
.menu-back-btn { background:#111b29 !important; border-color:rgba(78,101,127,.46) !important; color:#dbe7f2 !important; }
.menu-npc-pill { background:#0f1b29; border:1px solid rgba(56,189,248,.36); color:#c8eafa; box-shadow:none; }
.npc-face { width:62px; height:62px; border-radius:20px; display:grid; place-items:center; margin:0 auto 8px; font-size:34px; background:radial-gradient(circle at 35% 20%,rgba(255,255,255,.12),rgba(15,23,42,.96) 62%); border:1px solid rgba(148,163,184,.20); }
.npc-stat-bar { height:5px; border-radius:999px; background:#1e293b; overflow:hidden; }
.npc-stat-bar>span { display:block; height:100%; background:linear-gradient(90deg,#22d3ee,#facc15); }

.settings-sliders { display:flex; flex-direction:column; gap:12px; max-height:64vh; overflow:auto; padding-right:4px; }
.settings-row { padding:10px 12px; border-radius:14px; background:#0d1724; border:1px solid rgba(71,95,119,.40); }
.settings-row-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px; }
.settings-name { color:#d9e5ef; font:800 12px 'Outfit',sans-serif; }
.settings-value { color:#67e8f9; font:800 12px ui-monospace,monospace; }
.settings-desc { color:#718398; font-size:10px; line-height:1.25; margin-top:5px; }
.settings-row input[type='range'] { width:100%; cursor:pointer; }

#foulOverlay { position:fixed; inset:0; z-index:45; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; transform:scale(.9); transition:opacity 140ms ease-out,transform 140ms ease-out; color:#050505; font-family:'Outfit','Inter',sans-serif; font-size:clamp(72px,16vw,230px); font-weight:900; letter-spacing:.08em; line-height:1; text-shadow:0 2px 0 rgba(255,255,255,.34),0 18px 40px rgba(255,255,255,.24); }
#foulOverlay.foul-overlay-hidden{display:none} #foulOverlay.foul-overlay-show{display:flex;opacity:1;transform:scale(1)} #foulOverlay.foul-overlay-out{display:flex;opacity:0;transform:scale(1.08)}

@media (max-width:1180px){
  #cpuThinkPanel{width:156px;right:calc(100% + 10px)!important;height:310px;min-height:310px!important}
  #sideControls{width:156px;left:calc(100% + 10px)}
  #spinSettingsBar,#spinControl,#replayControls,.spin-settings-btn{width:156px}
  #spinBall,#spinBallCanvas{width:132px;height:132px}
}
@media (max-width:900px){
  #cpuThinkPanel{display:none!important}
  #sideControls{left:auto;right:8px;top:8px;transform:none;width:150px}
  #spinSettingsBar,#spinControl,#replayControls,.spin-settings-btn{width:150px}
  #npcGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}