/* BATTLESPHERE – Design nach Vorlage des Schachzimmers (Papier, Glas, dunkelgrüne Kopfleiste) */
:root {
  color-scheme: light;
  --ink: #1c2927; --muted: #72807a; --paper: #f3f2eb; --panel: #fffefa; --line: #dedfd5;
  --green: #567465; --green-dark: #294c3d; --gold: #d3a85e; --danger: #a64c3c;
  --blue: #2f6fd6; --red: #c43c3c;
  --radius-sm: 10px; --radius-md: 18px; --radius-lg: 26px;
  --glass-border: rgba(255, 255, 255, .72);
  --glass-shadow: 0 18px 48px rgba(37, 51, 43, .11), 0 2px 8px rgba(37, 51, 43, .05);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  background: radial-gradient(ellipse at 12% 8%, rgba(196, 218, 198, .48), transparent 34%), radial-gradient(ellipse at 89% 31%, rgba(237, 211, 170, .3), transparent 30%), linear-gradient(145deg, var(--paper), #e9eee7 64%, #f6f1e7);
  font: 15px/1.5 "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; letter-spacing: .005em;
}
button, select, input { font: inherit; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; margin: 0 0 .4em; }
h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; }
h2 { font-size: 22px; }
h3 { margin: 0 0 .4em; font-size: 16px; }
h4 { margin: 14px 0 6px; color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.eyebrow { margin-bottom: 6px; color: var(--green); font-size: 11px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.lead { max-width: 560px; margin: 0; color: var(--muted); }

/* Kopfleiste – wie im Schachzimmer */
.topbar {
  position: sticky; z-index: 20; top: 0; min-height: 70px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 0 clamp(16px, 3vw, 44px); color: #f6f3e8;
  background: linear-gradient(112deg, rgba(20, 35, 31, .97), rgba(34, 54, 46, .94) 56%, rgba(28, 44, 39, .96));
  border-bottom: 1px solid rgba(231, 236, 218, .18); box-shadow: 0 10px 34px rgba(18, 30, 25, .19), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(20px) saturate(145%); -webkit-backdrop-filter: blur(20px) saturate(145%);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: max-content; color: inherit; text-decoration: none; }
.brand-copy { display: grid; }
.brand-mark img { display: block; filter: drop-shadow(0 2px 6px rgba(232,199,125,.25)); }
.brand-name { font: 600 19px/1 Georgia, "Times New Roman", serif; letter-spacing: .08em; }
.brand-sub { margin-top: 4px; color: #aeb8af; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; }
.site-nav { display: flex; justify-content: center; align-items: center; gap: 4px; min-width: 0; flex-wrap: wrap; }
.site-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; color: #dce5db; border: 1px solid transparent; border-radius: 12px; font-size: 12px; font-weight: 650; text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff8e9; border-color: rgba(235, 219, 180, .24); background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.055)); box-shadow: inset 0 1px rgba(255,255,255,.09); }
.site-nav a:hover { transform: translateY(-1px); }
.nav-icon { color: #e8c77d; font-size: 14px; }
.top-actions { display: flex; gap: 8px; }
.top-back { color: #f6f3e8 !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.2) !important; text-decoration: none; }

main { width: min(1400px, 100%); margin: 0 auto; padding: 30px clamp(14px, 3vw, 36px) 48px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.page-card { padding: clamp(16px, 3vw, 28px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel) 82%, transparent); box-shadow: var(--glass-shadow); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); min-width: 0; }
.side-panel { overflow: hidden; background: color-mix(in srgb, var(--panel) 78%, transparent); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); min-width: 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 10px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font-size: 20px; }
.panel-body { padding: 16px 18px; }
.foot { padding: 24px; color: var(--muted); font-size: 12px; letter-spacing: .1em; text-align: center; }

/* Buttons wie im Schachzimmer */
.primary-btn, .quiet-btn, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.primary-btn, .btn.primary { color: #fffdf5; border: 1px solid transparent; background: linear-gradient(120deg, #294c3d, #63816b); box-shadow: 0 8px 20px rgba(41,76,61,.2); }
.quiet-btn, .btn { color: var(--ink); border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 86%, transparent); }
.primary-btn:hover:not(:disabled), .quiet-btn:hover:not(:disabled), .btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled, .quiet-btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.on { border-color: #c7923b; color: #8a5f17; box-shadow: 0 0 0 2px rgba(199,146,59,.18); }
.btn.sm { min-height: 32px; padding: 4px 10px; font-size: 12px; border-radius: 10px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
select, input:not([type]), input[type=text] { min-height: 38px; padding: 7px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
input[type=range], input[type=checkbox] { accent-color: var(--green-dark); }
.field { display: grid; gap: 5px; margin: 8px 0; }
.start-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.start-settings .wide { grid-column: 1 / -1; }
.setup { max-width: 720px; }

/* Brett-Rahmen wie das Holzbrett */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.board-frame { padding: clamp(8px, 1.4vw, 16px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ead9b9, #8e6548 72%, #5e412c); box-shadow: 0 26px 60px rgba(37,51,43,.28), inset 0 2px 6px rgba(255,255,255,.35); max-width: min(76vh, 720px); margin: 0 auto; }
.bigboard { width: 100%; }
.board { width: 100%; height: auto; display: block; user-select: none; }
.board .fld, .board .unit { cursor: pointer; }
.board .fld:hover circle:first-of-type { stroke: #9cc3ff; }
.board .sel-ring { fill: none; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 6px #fff); }
.fld-lbl { fill: #4a5d72; font-size: 11px; font-weight: 700; pointer-events: none; }
.tk-lbl { fill: #fff; font-size: 9px; font-weight: 800; letter-spacing: .06em; pointer-events: none; }
.tk-badge { font-size: 14px; pointer-events: none; }
.mk-lbl { fill: #fff; font-size: 12px; font-weight: 800; }
.hl-mv { fill: #3ddc97; opacity: .9; } .hl-pl { fill: #36d1dc; opacity: .9; }
.hl-at { fill: none; stroke: #ff5a5a; stroke-width: 4; animation: pulse 1.2s infinite; }
.hl-ab { fill: none; stroke: #f5b942; stroke-width: 4; stroke-dasharray: 8 5; }
@keyframes pulse { 50% { opacity: .35; } }
.fx { fill: none; stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: fx .9s ease-out forwards; }
.fx-boom { stroke: #ff8a3d; } .fx-shield { stroke: #3ddc97; } .fx-ping { stroke: #f5b942; }
@keyframes fx { from { transform: scale(.4); opacity: 1; } to { transform: scale(5); opacity: 0; } }

/* Seitenleiste / Erklärungsleiste */
.status { padding: 11px 13px; border-radius: 13px; background: color-mix(in srgb, var(--green) 10%, var(--panel)); border-left: 4px solid var(--green); font-weight: 700; }
.status.win { border-color: #3a9a68; background: #e6f4ea; } .status.loss { border-color: var(--danger); background: #f8e7e2; } .status.draw { border-color: var(--gold); background: #f8efdc; }
.meta { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; color: var(--muted); font-size: 12px; }
.ucard { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel) 90%, transparent); }
.ucard-h { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ucard-h b { font: 400 18px Georgia, serif; }
.ucard-h .muted { margin-left: auto; font-size: 12px; }
.ucard dl { margin: 0; display: grid; grid-template-columns: 80px 1fr; gap: 4px 10px; font-size: 13px; }
.ucard dt { color: var(--muted); } .ucard dd { margin: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; } .dot.B { background: var(--blue); } .dot.R { background: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chips span, .chipbtn { padding: 3px 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 82%, transparent); font-size: 11px; }
.chipbtn { cursor: pointer; } .chipbtn.on { border-color: #c7923b; }
.hint { padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--green) 7%, var(--panel)); font-size: 13px; }
.hint.warn { border-color: rgba(199,146,59,.45); background: #fbf2df; }
.hint.ok { border-color: rgba(58,154,104,.45); background: #e6f4ea; }
.react { margin: 12px 0; padding: 12px 14px; border: 1px solid rgba(166,76,60,.45); border-radius: 14px; background: #f8e7e2; }
.modes .btn { min-height: 34px; padding: 5px 10px; font-size: 12px; }
.help { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.help summary { cursor: pointer; font-weight: 700; }
.help ul { margin: 6px 0; padding-left: 18px; }
.log { max-height: 260px; margin: 0; padding-left: 18px; overflow: auto; color: #3d4a47; font-size: 12.5px; }
.log li { margin: 3px 0; }

/* Arena */
.toolbar-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--panel) 80%, transparent); box-shadow: var(--glass-shadow); }
.arena-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.agrid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agrid.n8, .agrid.n16 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acard { min-width: 0; padding: 12px 14px; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel) 84%, transparent); box-shadow: var(--glass-shadow); }
.card-h { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.arena-lbl { color: var(--green); font-weight: 800; }
.hot { color: #c4621f; letter-spacing: 0; text-transform: none; }
.st { padding: 2px 9px; border-radius: 999px; background: #eef0e8; color: var(--muted); font-size: 11px; letter-spacing: 0; text-transform: none; }
.st-run { color: #2e7d55; } .st-done { color: #8a5f17; background: #f8efdc; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin: 8px 0; }
.vs .x { color: var(--muted); font: italic 13px Georgia, serif; }
.pl { display: grid; min-width: 0; padding: 4px 9px; border: 1px solid transparent; border-radius: 10px; }
.pl b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 16px Georgia, serif; }
.pl small { color: var(--muted); font-size: 11px; }
.pl.B { border-left: 3px solid var(--blue); } .pl.R { border-right: 3px solid var(--red); text-align: right; }
.pl.turn { background: #eef2ea; border-color: var(--line); }
.mini { max-width: 420px; margin: 0 auto; padding: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ead9b9, #8e6548 72%, #5e412c); cursor: zoom-in; }
.prog { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; font-size: 12px; }
.prog .B { color: var(--blue); } .prog .R { color: var(--red); text-align: right; }
.turnline { color: var(--muted); font-size: 11px; text-align: center; }
.last { min-height: 3.2em; margin: 6px 0; font-size: 13px; }
.card-a { display: flex; flex-wrap: wrap; gap: 6px; }
.agrid.n8 .last, .agrid.n16 .last { min-height: 4.2em; font-size: 12px; }
.agrid.n16 .vs small, .agrid.n16 .card-a .btn:nth-child(2), .agrid.n16 .prog { display: none; }
.director { position: sticky; top: 86px; max-height: calc(100vh - 100px); overflow: auto; }
.dstats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 11px; }
.dstats span { padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; }
.dstats .good { color: #2e7d55; } .dstats .bad { color: var(--danger); }
.feed, .hl { margin: 0; padding-left: 16px; font-size: 12.5px; }
.feed li, .hl li { margin: 5px 0; }
.feed b { margin-right: 4px; color: var(--green); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.feed .f-hl { color: #8a5f17; } .feed .f-end { color: #2e7d55; font-weight: 600; } .feed .f-error { color: var(--danger); }

/* Modale Fenster wie im Schachzimmer */
.modal-backdrop { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(24, 35, 30, .46); backdrop-filter: blur(6px); }
.modal { width: min(520px, 100%); max-height: 94vh; overflow: auto; padding: 20px 22px; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: 0 30px 80px rgba(20,35,27,.28); }
.modal.wide { width: min(1180px, 100%); }
.modal-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 10px; }
.modal-heading h2 { font-size: 18px; }
.modal-close { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 22px; line-height: 1; cursor: pointer; }
.focus { display: grid; grid-template-columns: minmax(260px, 600px) minmax(240px, 1fr); gap: 20px; }
.focus-board { padding: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ead9b9, #8e6548 72%, #5e412c); }
.rpboard { max-width: 560px; margin: 12px auto; padding: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ead9b9, #8e6548 72%, #5e412c); }
#rpRange { width: 100%; }

/* Turnier & Rangliste */
#bracket { margin-bottom: 18px; }
#bracket h3 { font: 400 22px Georgia, serif; }
.bracket { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; overflow-x: auto; }
.bcol { display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
.bcol h4 { margin-top: 0; }
.bm { padding: 7px 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 13px; }
.bm div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm small { color: var(--muted); } .bm .w { color: #2e7d55; font-weight: 750; }
.tblwrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 8px 9px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.roster, .arch { max-height: 340px; margin: 0; padding-left: 18px; overflow: auto; font-size: 13.5px; }
.lnk { padding: 0; color: var(--green-dark); border: 0; background: none; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.pbar { display: grid; grid-template-columns: 130px 1fr 52px; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.pbar i { position: relative; height: 8px; overflow: hidden; border-radius: 99px; background: #e7e9e0; }
.pbar i::after { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, #294c3d, #d3a85e); content: ""; }
.pbar b { text-align: right; }

/* Lernmodus & Kreativ */
.learn { display: grid; grid-template-columns: 230px minmax(280px, min(68vh, 620px)) minmax(260px, 1fr); gap: 20px; align-items: start; }
.learn .board-frame { max-width: none; width: 100%; }
.lessons { display: flex; flex-direction: column; gap: 6px; }
.lesson { display: flex; gap: 10px; align-items: center; padding: 9px 11px; color: var(--ink); border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--panel) 84%, transparent); font-size: 13.5px; text-align: left; cursor: pointer; }
.lesson span { display: grid; flex: none; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fffdf5; background: var(--green); font-size: 11px; }
.lesson.on { border-color: #c7923b; box-shadow: 0 0 0 2px rgba(199,146,59,.18); }
.creative { display: grid; grid-template-columns: minmax(260px, 460px) minmax(260px, 1fr); gap: 20px; align-items: start; }
#drawCanvas { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); touch-action: none; cursor: crosshair; }

/* Regeln */
.rules { max-width: 880px; margin: 0 auto; }
.rules h2 { font-size: 34px; } .rules h3 { margin-top: 24px; font: 400 23px Georgia, serif; color: var(--green-dark); } .rules h4 { color: var(--ink); font-size: 12px; }
.rules td { white-space: normal; }
.rules code { padding: 1px 5px; border-radius: 5px; background: #eef0e8; }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: auto 1fr; padding-block: 8px; } .site-nav { grid-column: 1 / -1; order: 3; justify-content: flex-start; }
  .arena-layout, .layout { grid-template-columns: 1fr; }
  .director { position: static; max-height: none; }
  .agrid.n8, .agrid.n16 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn { grid-template-columns: 1fr; } .lessons { flex-direction: row; flex-wrap: wrap; }
  .cols3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .site-nav a { padding: 7px 8px; } .nav-label { font-size: 11px; }
  .focus, .creative, .start-settings { grid-template-columns: 1fr; }
  .agrid { grid-template-columns: 1fr; }
  .bracket { grid-template-columns: repeat(4, 160px); }
}