:root {
  --accent: #f39c12;
  --accent-strong: #e67e22;
  --bg: #181a20;
  --text: #e3e6eb;
  --muted: #b9bbbe;
  --border-soft: rgba(255,255,255,0.12);
  --dash-accent: #f39c12;
}
.soft-divider { height: 1px; width: 100%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.28), rgba(255,255,255,0)); }
.visually-hidden { position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

body { font-family: 'Segoe UI', Arial, sans-serif; background: #181a20; color: #e3e6eb; margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
.header { background:#23272a; color:#fff; padding:24px 0 12px; text-align:center; font-size:2.2em; letter-spacing:1px; font-weight:600; border-bottom:1px solid #23272a; }
.tabs { position: sticky; top:56px; z-index:1030; display:flex; justify-content:center; gap:6px; border-bottom:1px solid #202429; background:#23272a; padding:8px 8px 0; }
/* Tabs burger (mobile) */
.tabs { flex-wrap: wrap; }
.tabs-burger { display:none; appearance:none; margin:6px 6px 0 6px; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.12); background:#1f2228; color:#e3e6eb; cursor:pointer; font-size:1.25rem; line-height:1; box-shadow:0 2px 10px rgba(0,0,0,0.25); }
.tabs-burger:hover { background:#242830; color:#ffffff; }
/* Slightly bigger touch target */
.tabs-burger { min-width:44px; min-height:36px; align-items:center; justify-content:center; }
@media (max-width: 820px){
  .tabs { justify-content:flex-start; }
  /* push burger to the right; tabs flow below */
  .tabs { position:sticky; top:56px; z-index:1030; }
  .tabs-burger { display:inline-flex; margin-left:auto; order:1; }
  /* make tabs take full width and appear below */
  .tabs .tab { order:2; display:none; width:100%; text-align:left; }
  .tabs.open .tab { display:block; }
}
.tab-sep { width:1px; align-self:stretch; margin:0 4px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0)); opacity:0.65; }
.floating-panel.blinking #restartCountdown { animation: fp-blink 1s linear infinite; }
.floating-panel.restarting { opacity:0.7; filter:grayscale(0.9); }
@keyframes fp-blink { 50% { opacity:0.35; } }
.tab { appearance:none; padding:14px 20px; cursor:pointer; border:1px solid transparent; border-bottom:none; background:transparent; font-size:1.00em; color:#b9bbbe; outline:none; transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease; position:relative; border-top-left-radius:8px; border-top-right-radius:8px; }
.tab:hover { color:#ffffff; background:#20242a; border-color:#2c3137; }
.tab:hover::after { content:""; position:absolute; left:10%; right:10%; bottom:-1px; height:2px; background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.35), rgba(255,255,255,0.15)); border-bottom-left-radius:2px; border-bottom-right-radius:2px; }
.tab:focus-visible { outline:2px solid var(--dash-accent); outline-offset:2px; }
.tabs:hover .tab:not(:hover) { color:#9aa0a6; }
.tab.active { color:#e3e6eb; background:#1f2228; border-color:#30353b; }
.tab.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background: linear-gradient(90deg, #5c74d6, #7289da); border-bottom-left-radius:2px; border-bottom-right-radius:2px; }
.tab-content { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap:20px; row-gap:20px; justify-content:center; align-items:start; padding:40px 16px 24px; min-height:300px; max-width:1210px; margin:0 auto; font-size:0.95em; }
.card-col { flex:1 1 380px; width:100%; max-width:none; display:flex; flex-direction:column; gap:20px; align-items:stretch; }
.card { background:#23272a; border-radius:16px; box-shadow:0 2px 12px #000a; padding:28px 24px 18px; margin-bottom:0; min-width:0; width:100%; max-width:none; transition: box-shadow 0.2s; }
.card h3 { margin-top:0; margin-bottom:14px; font-size:1.20em; color:#7289da; font-weight:600; letter-spacing:0.5px; text-align:center; }
.card table { width:100%; border-collapse: collapse; font-size:0.95em; }
.card, .card td, .card th { color:#e3e6eb; }
.card td { padding:8px 0; border:none; }
.card a { color:#9ecbff; text-decoration:none; }
.card a:hover { color:#cfe5ff; text-decoration:underline; }
.card em { color:#c9ccd3; font-style:italic; }
.card td:first-child { padding-right:12px; }
.card td + td { padding-left:12px; border-left:1px solid rgba(255,255,255,0.08); }
.card tr:not(:last-child) td { border-bottom:1px solid #23272a; }
#customizer { z-index: 9999 !important; }
#customizer > div { position: relative; z-index: 10000; }
@media (max-width:1100px) {
  .tab-content { gap:24px; padding:24px 20px 12px; grid-template-columns:1fr; }
  .card-col { gap:20px; max-width:100%; }
  .card { max-width:100%; padding:20px 8px 12px; }
}
@media (max-width: 820px){
  .tab-content { margin-top: 8px; }
}
.floating-panel .restart-box { text-align:center; }
.floating-panel .restart-box .fp-section-title { font-size:0.80rem; line-height:1.2; }
.floating-panel .restart-box #restartCountdown { font-size:1.25rem !important; }
.floating-panel .restart-box #restartStatus { font-size:0.85rem !important; }

.dashboard-hero { background:url('/images/logo.jpg') no-repeat center center/cover; color:#fff; padding:48px 0; text-align:center; border-bottom:1px solid rgba(255,255,255,0.1); min-height:180px; position:relative; }
.dashboard-hero::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.35); pointer-events:none; }
.dashboard-hero .container { position:relative; z-index:1; }
.dashboard-hero h1 { margin:0; font-size:2.2rem; }
.dashboard-hero p { font-size:1.05rem; }
/* Subtle shimmer for mastered player name */
.hero-player.mastered-name {
  position: relative;
}
.hero-player.mastered-name::after {
  content: "";
  position: absolute;
  left: -10%; top: 0; bottom: 0; width: 20%;
  background: linear-gradient(75deg, rgba(255,255,255,0), rgba(255,255,255,0.14), rgba(255,255,255,0));
  transform: skewX(-18deg) translateX(-120%);
  filter: blur(1px);
  pointer-events: none;
  animation: nameShimmer 3.2s ease-in-out infinite;
}
@keyframes nameShimmer {
  0% { transform: skewX(-18deg) translateX(-120%); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: skewX(-18deg) translateX(520%); opacity: 0.9; }
  60% { opacity: 0; }
  100% { transform: skewX(-18deg) translateX(520%); opacity: 0; }
}
/* Ensure role badges sit above any overlays and remain clickable */
.dashboard-hero .role-badge { position: relative; z-index: 2; }
/* tabs already positioned via sticky top */
.tab.active::after { background: linear-gradient(90deg, var(--dash-accent), rgba(243,156,18,0.75)); }
.card h3 { color: var(--dash-accent); font-size:1.30em; }
.card tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,0.08); }
#customizer { z-index:1055 !important; }
.floating-panel { position:fixed; right:16px; bottom:96px; width:216px; background: rgba(23,23,23,0.92); color:#e3e6eb; border:1px solid rgba(255,255,255,0.12); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.35); backdrop-filter: blur(4px); overflow:hidden; z-index:1040; display:flex; flex-direction:column; max-height:calc(100vh - 32px); font-size:0.9em; }
.floating-panel .fp-header { display:flex; align-items:center; justify-content:space-between; padding:7px 9px; background: linear-gradient(90deg, rgba(139,0,0,0.4), rgba(139,0,0,0.25)); border-bottom:1px solid rgba(255,255,255,0.1); }
.floating-panel .fp-toggle { background:none; border:none; color:#e3e6eb; cursor:pointer; }
.floating-panel .fp-body { overflow-y:auto; flex:1 1 auto; min-height:0; }
.floating-panel .fp-section { padding:9px; }
.floating-panel .fp-section + .fp-section { border-top: 1px solid rgba(255,255,255,0.08); }
.floating-panel .fp-section-title { font-weight:600; margin-bottom:6px; color:#ffb3b3; }
.floating-panel .fp-links { list-style:none; padding:0; margin:0; }
.floating-panel .fp-links li { margin:4px 0; }
.floating-panel .fp-links a { color:#cfd3da; text-decoration:none; }
.floating-panel .fp-links a:hover { text-decoration:underline; }
.floating-panel.collapsed .fp-body { display:none; }
.floating-panel.collapsed .fp-toggle { transform: rotate(-90deg); }
.floating-panel .btn-outline-light,
.container > a.btn.btn-outline-light[href$="/dash/logout"] { color:#e3e6eb !important; border-color:rgba(255,255,255,0.25) !important; background:transparent; }
.floating-panel .btn-outline-light:hover,
.container > a.btn.btn-outline-light[href$="/dash/logout"]:hover { background: rgba(255,255,255,0.12) !important; color:#e3e6eb !important; border-color: rgba(255,255,255,0.35) !important; }

/* Dev toggle footer and collapsible dev section */
.floating-panel .fp-footer { padding:6px 8px; border-top:1px solid rgba(255,255,255,0.08); background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.05)); display:flex; justify-content:center; }
.floating-panel .fp-dev-toggle { appearance:none; background:transparent; border:none; color:#cfd3da; cursor:pointer; font-size:0.85rem; display:inline-flex; align-items:center; gap:6px; padding:4px 6px; border-radius:6px; }
.floating-panel .fp-dev-toggle:hover { background: rgba(255,255,255,0.06); color:#fff; }
.floating-panel .fp-dev-toggle .chev { display:inline-block; transition: transform .15s ease; }
.floating-panel.dev-open .fp-dev-toggle .chev { transform: rotate(180deg); }
.floating-panel:not(.dev-open) .fp-dev { display:none; }

/* Mini round button for dashboard tools */
.fp-mini { position:fixed; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); background: rgba(23,23,23,0.92); color:#e3e6eb; box-shadow:0 6px 18px rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:1040; left:16px; top:100px; user-select:none; }
.fp-mini:hover { background: rgba(28,28,28,0.95); }
.fp-mini:active { transform: scale(0.98); }

/* Attribute Dials */
.attr-dials { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:22px; place-items: center; margin-top:10px; }
.attr-item { display:flex; flex-direction:column; align-items:center; min-width:0; }
.attr-dial { position:relative; --dial-size: clamp(150px, 20vw, 198px); width: var(--dial-size); height: var(--dial-size); border-radius:50%;
  background:
    radial-gradient(closest-side, #1b1f25 62%, #0e0f12 63%),
    conic-gradient(#2f8cff 0deg, #2f8cff 360deg);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.06),
    0 0 20px rgba(0,0,0,0.4);
}
.attr-dial::before { content:""; position:absolute; inset: calc(var(--dial-size) * 0.05); border-radius:50%; border:1px solid rgba(255,255,255,0.1); }
.attr-dial .value { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size: calc(var(--dial-size) * 0.18); font-weight:700; color:#cfe5ff; text-shadow:0 0 10px rgba(47,140,255,0.45); }
.attr-dial .value .label { font-size: calc(var(--dial-size) * 0.065); color:#c7cbd1; letter-spacing:0.2px; opacity:0.95; }
.attr-item .attr-caption { margin-top:8px; font-size:0.86rem; color:#b9bbbe; text-align:center; }
.attr-item .attr-sub { margin-top:2px; font-size:0.75rem; color:#9aa0a6; text-align:center; }
.attr-item .attr-badge { margin-top:2px; font-size:0.75rem; color:#f7e26b; text-align:center; }
.attr-item { display:flex; flex-direction:column; align-items:center; min-width:0; }
@media (max-width: 980px){
  .tabs { position:sticky; top:56px; z-index:1030; padding:8px; align-items:center; }
}
@media (max-width: 520px){
  .attr-dials { grid-template-columns: 1fr; }
}
/* Hide Dashboard Tools panel on mobile */
@media (max-width: 820px){
  .floating-panel { display: none !important; }
  /* Show mini button on mobile if present */
  .fp-mini { display:flex; }
}
.attr-dial.attr-max {
  background:
    radial-gradient(closest-side, #1e1a0f 62%, #19150c 63%),
    conic-gradient(#f7e26b 0deg, #ffe58b 360deg);
  box-shadow:
    inset 0 0 0 2px rgba(247,226,107,0.35),
    0 0 18px rgba(212,167,44,0.30),
    0 0 20px rgba(0,0,0,0.40);
}
.attr-dial.attr-max::before { border-color: rgba(212,167,44,0.9); box-shadow: inset 0 0 8px rgba(247,226,107,0.25), 0 0 8px rgba(247,226,107,0.35); }
.attr-dial.attr-max::after { content:""; position:absolute; inset: 0; border-radius:50%; border:2px solid #d4a72c; box-shadow: 0 0 12px rgba(212,167,44,0.35), inset 0 0 4px rgba(0,0,0,0.5); pointer-events:none; }
.attr-dial.attr-max .value { color:#f7e26b; text-shadow:0 0 10px rgba(247,226,107,0.45), 0 0 2px rgba(0,0,0,0.6); }
.attr-dial.attr-missing { background:
    radial-gradient(closest-side, #1b1f25 62%, #0e0f12 63%),
    conic-gradient(#3a3f46 0deg, #3a3f46 360deg);
}
.attr-dial.attr-missing .value { color:#9aa0a6; text-shadow:none; }

/* Keep full size on small screens; they still wrap and have room */

/* Attribute alternative view: bars */
.attr-card .attr-controls { display:flex; gap:8px; justify-content:center; margin: 0 0 8px; }
.attr-card .attr-controls .view-toggle { appearance:none; border:1px solid rgba(255,255,255,0.14); background:#1f2329; color:#cfd3da; padding:6px 10px; border-radius:8px; cursor:pointer; font-size:0.85rem; }
.attr-card .attr-controls .view-toggle:hover { background:#23272d; color:#fff; border-color: rgba(255,255,255,0.22); }
.attr-card .attr-controls .view-toggle.active { background: linear-gradient(180deg, #2a2f36, #23272d); color:#fff; border-color:#3a4048; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.attr-card.mode-bars h3::after { content:" — Balken"; color:#b9bbbe; font-weight:400; font-size:0.9em; }
.attr-card.mode-dials h3::after { content:" — Kreise"; color:#b9bbbe; font-weight:400; font-size:0.9em; }
.attr-bars { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.attr-bar { padding:8px 10px; border:1px solid rgba(255,255,255,0.08); border-radius:10px; background:#1f2329; }
.attr-bar .attr-bar-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.attr-bar .attr-bar-label { color:#cfd3da; font-weight:600; }
.attr-bar .attr-bar-value { color:#e3e6eb; font-variant-numeric: tabular-nums; }
.attr-bar .attr-badge { color:#f7e26b; margin-left:6px; font-size:0.85em; }
.attr-bar .track { position:relative; width:100%; height:10px; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25)); border:1px solid rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; }
.attr-bar .fill { position:absolute; left:0; top:0; bottom:0; width: calc(var(--pct, 0) * 1%); background: linear-gradient(90deg, #2f8cff, #86b5ff); box-shadow: 0 0 8px rgba(47,140,255,0.35); }
.attr-bar.max .fill { background: linear-gradient(90deg, #f7e26b, #ffe58b); box-shadow: 0 0 10px rgba(247,226,107,0.45); }
.attr-bar.missing .fill { background: #3a3f46; box-shadow: none; }
.attr-bar.missing .attr-bar-label, .attr-bar.missing .attr-bar-value { color:#9aa0a6; }
/* Maxed attribute bar: golden frame and subtle glow */
.attr-bar.max { border-color:#d4a72c; background: linear-gradient(180deg, #2b240e, #1f1a0a); box-shadow: 0 0 0 1px rgba(212,167,44,0.25) inset, 0 0 12px rgba(212,167,44,0.18); }
.attr-bar.max .attr-bar-label { color:#ffe9a3; }
.attr-bar.max .attr-bar-value { color:#e6c46a; }
.attr-bar.max .track { border-color: rgba(212,167,44,0.45); background: linear-gradient(180deg, rgba(247,226,107,0.08), rgba(0,0,0,0.35)); }
.attr-bar.max .fill { box-shadow: 0 0 12px rgba(247,226,107,0.55), 0 0 2px rgba(0,0,0,0.6) inset; }

/* Fishing page/table specific styles */
.fishing-card { grid-column: 1 / -1; }
.fishing-container { max-width: 1210px; margin: 0 auto; }
.fishing-container table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0 auto; }
.fishing-container thead th { text-align:center; background:#232a33; color:#d7dbe2; font-weight:600; padding:8px 10px; border-bottom:1px solid #3b3b3b; }
.fishing-container thead th:first-child { border-top-left-radius:8px; }
.fishing-container thead th:last-child { border-top-right-radius:8px; }
.fishing-container tbody td { padding:4px 8px; }
.fishing-container tbody td + td { padding-left:10px; border-left:1px solid rgba(255,255,255,0.08); }
.fishing-container tbody tr:not(:last-child) td { border-bottom:1px solid rgba(255,255,255,0.08); }
/* Center the TOP-Spieler column (4th) in fishing tables */
.fishing-container tbody td:nth-child(4) { text-align: center; }
.fishing-container tbody td:nth-child(5) { text-align: center !important; }

@media (max-width: 1280px) { .fishing-container { max-width: 100%; } }
@media (max-width: 1100px) {
  .fishing-container { max-width: 100%; padding: 0 8px; }
}

/* Make the /fischen tab area wider and single-column */
#fischen.tab-content { grid-template-columns: 1fr; max-width: 1210px; }

/* Events page/table specific styles (mirror fishing) */
.events-card { grid-column: 1 / -1; }
.events-container { max-width: 1210px; margin: 0 auto; }
.events-container table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0 auto; }
.events-container thead th { text-align:center; background:#232a33; color:#d7dbe2; font-weight:600; padding:8px 10px; border-bottom:1px solid #3b3b3b; }
.events-container thead th:first-child { border-top-left-radius:8px; }
.events-container thead th:last-child { border-top-right-radius:8px; }
.events-container tbody td { padding:4px 8px; }
.events-container tbody td + td { padding-left:10px; border-left:1px solid rgba(255,255,255,0.08); }
.events-container tbody tr:not(:last-child) td { border-bottom:1px solid rgba(255,255,255,0.08); }
/* Center the TOP-Spieler and Platz columns */
.events-container tbody td:nth-child(4) { text-align: center; }
.events-container tbody td:nth-child(5) { text-align: center !important; }

@media (max-width: 1280px) { .events-container { max-width: 100%; } }
@media (max-width: 1100px) {
  .events-container { max-width: 100%; padding: 0 8px; }
}

/* Make the /events tab area wider and single-column */
#events.tab-content { grid-template-columns: 1fr; max-width: 1210px; }

/* Title points badges and info pills */
.tp-badge { display:inline-block; min-width:38px; padding:2px 8px; border-radius:999px; font-weight:600; font-variant-numeric: tabular-nums; border:1px solid rgba(255,255,255,0.12); }
.tp-ach { background: linear-gradient(180deg, #223246, #1e2b3b); color:#93c5fd; box-shadow:0 0 8px rgba(147,197,253,0.18) inset; }
.tp-miss { background: linear-gradient(180deg, #3a2a1f, #332418); color:#f4c7aa; box-shadow:0 0 8px rgba(244,199,170,0.18) inset; }
.title-info-btn { appearance:none; border:1px solid rgba(255,255,255,0.12); background:#1f2228; color:#cfd3da; border-radius:999px; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; margin-left:8px; cursor:pointer; }
.title-info-btn:hover { background:#242a33; color:#ffffff; border-color: rgba(255,255,255,0.2); }
.title-info-btn i { font-size:14px; line-height:1; }
.ti-pill { display:inline-block; padding:3px 8px; border-radius:999px; background:#1f2228; border:1px solid rgba(255,255,255,0.12); color:#cfd3da; font-size:0.9em; }
.ti-ach { color:#93c5fd; border-color: rgba(147,197,253,0.35); }
.ti-miss { color:#f4c7aa; border-color: rgba(244,199,170,0.35); }