#character-wheel-dialog { width:min(76rem,calc(100vw - 1.5rem - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height:min(92dvh,62rem); overflow:auto; padding:0; border:1px solid var(--tp-ink-700); border-radius:var(--radius-lg); background:var(--tp-ink-950); color:var(--tp-text-100); }
#character-wheel-dialog::backdrop { background:rgb(0 0 0 / .72); }
.character-wheel-editor { --gold:#e8b04b; --gold-deep:#b47f2a; --parchment:#efe3c6; --parchment-dim:#c8b790; --ink-2:#1f170f; --ink-3:#1c1712; --stone-hi:#4d3a28; --green-deep:#3f7a34; --green:#5aa64a; padding:1rem; font-family:var(--font-sans); }
.character-wheel-editor *, .character-wheel-editor *::before, .character-wheel-editor *::after { box-sizing:border-box; }
.character-wheel-editor__header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 0 .75rem; border-bottom:1px solid var(--stone-hi); }
.character-wheel-editor__header h2 { margin:0; color:var(--gold); font:700 .9rem/1.2 var(--font-ui); letter-spacing:.06em; text-transform:uppercase; }
.character-wheel-status { margin:.6rem 1rem 0; color:var(--tp-text-300); }
.character-wheel-status[data-state="error"] { color:#ffb3a8; }
.character-wheel-presets { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:1rem 0; font-family:var(--font-ui); }
.character-wheel-presets > span:first-child { color:var(--parchment-dim); }
.character-wheel-presets button, .character-wheel-code button, .wod-sel-buttons button, .wheel-quality { min-height:32px; padding:5px 10px; border:1px solid var(--stone-hi); border-radius:6px; background:#332619; color:var(--parchment); font:600 .68rem/1.2 var(--font-ui); cursor:pointer; }
.character-wheel-presets button:hover, .character-wheel-code button:hover, .wod-sel-buttons button:hover, .wheel-quality:hover { border-color:var(--gold); }
.character-wheel-presets .wheel-chip.selected, .wheel-quality.is-selected { border-color:var(--gold-deep); color:var(--gold); }
.character-wheel-code { display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 12px; margin-bottom:1rem; }
.character-wheel-code, .character-wheel-code-row { min-width:0; }
.character-wheel-code button, .character-wheel-code a { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.character-wheel-points { width:100%; }
.wheel-points-line { width:100%; color:var(--parchment-dim); font-family:var(--font-ui); }
.wheel-points-line b { color:var(--gold); }
.wheel-points-unlimited { width:100%; margin:6px 0; color:var(--parchment-dim); font:400 .82rem/1.4 var(--font-ui); }
.wheel-sources { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; width:100%; margin:6px 0; color:var(--parchment-dim); font:400 .82rem/1.4 var(--font-ui); }
.wheel-sources label { display:flex; align-items:center; gap:5px; cursor:pointer; }
/* Hunting Task Points im Design der Skill-Felder (styles.css .character-skills). */
.wheel-sources .wheel-task { display:grid; gap:.2rem; width:9rem; margin:0; cursor:default; }
.wheel-sources .wheel-task > span:first-child { color:var(--color-fg); font-size:.8rem; font-weight:650; }
.wheel-sources .wheel-task input[type="number"] { width:100%; min-width:0; min-height:2.3rem; padding:.2rem 2.5rem .2rem .45rem; appearance:textfield; -moz-appearance:textfield; font-size:.9375rem; font-weight:650; }
@media (pointer: coarse) { .wheel-sources .wheel-task input[type="number"] { min-height:3rem; } }
.wheel-sources .number-stepper__buttons button { min-height:0; padding:0; border:0; border-left:1px solid var(--stone-hi); border-radius:0; background:transparent; color:var(--parchment); }
.wheel-sources .number-stepper__buttons button + button { border-top:1px solid var(--stone-hi); }
/* Bonus Points: Knopf und Popup mit den per Haken gesetzten Punktequellen. */
.wheel-sources .wheel-bonus-open { align-self:end; min-height:2.3rem; padding:5px 12px; border:1px solid var(--stone-hi); border-radius:6px; background:#332619; color:var(--parchment); font:600 .72rem/1.2 var(--font-ui); cursor:pointer; }
.wheel-sources .wheel-bonus-open:hover { border-color:var(--gold); }
.wheel-bonus { width:min(22rem, calc(100vw - 2rem)); padding:.75rem; border:1px solid var(--stone-hi); border-radius:10px; background:var(--ink-2); color:var(--parchment); font:400 .9rem/1.4 var(--font-ui); }
.wheel-bonus::backdrop { background:rgb(0 0 0 / .55); }
.wheel-bonus__head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.wheel-bonus__head h3 { margin:0; color:var(--gold); font:700 .9rem/1.2 var(--font-ui); letter-spacing:.06em; text-transform:uppercase; }
.wheel-bonus__head .icon-button { flex:none; width:2rem; min-height:2rem; font-size:1rem; }
.wheel-bonus__list { display:grid; gap:.25rem; }
.wheel-bonus__list label { display:flex; align-items:center; gap:.5rem; min-height:2.5rem; margin:0; cursor:pointer; }
/* Preset-Aktionen Speichern, Umbenennen, Loeschen als kompakte Symbolknoepfe. */
.character-wheel-presets .wheel-icon-action { display:inline-grid; place-items:center; width:32px; min-width:32px; padding:0; }
.character-wheel-presets .wheel-icon-action svg { width:18px; height:18px; fill:currentColor; }
@media (pointer:coarse) { .character-wheel-presets .wheel-icon-action { width:44px; min-width:44px; min-height:44px; } }
.wheel-sources select, .wod-gem-slots select { max-width:100%; padding:5px 6px; border:1px solid var(--stone-hi); border-radius:6px; background:var(--ink-2); color:var(--parchment); font:inherit; }
.character-wheel-code-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; }
#wheel-code { flex:1 1 13rem; min-width:0; padding:6px 8px; border:1px solid var(--stone-hi); border-radius:6px; background:var(--ink-2); color:var(--parchment-dim); font:400 .78rem/1.35 monospace; overflow-wrap:anywhere; }
#wheel-code-status { flex:1 0 100%; margin:0; color:var(--parchment-dim); font-size:.8rem; }
/* Code-Kasten nach dem Layout des Tibia-Planers: Titelzeile, links Code und Importfeld, rechts die Knoepfe. */
.wheel-codebox { width:100%; border:1px solid var(--stone-hi); border-radius:8px; overflow:hidden; }
.wheel-codebox h3 { margin:0; padding:6px 12px; background:#332619; color:var(--parchment); font:700 .85rem/1.3 var(--font-ui); letter-spacing:.04em; }
.wheel-codebox__grid { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:start; gap:8px 12px; padding:10px 12px; }
.wheel-codebox__fields { display:grid; gap:8px; min-width:0; }
.wheel-codebox__grid code { display:block; width:100%; min-width:0; height:48px; min-height:48px; max-height:48px; padding:5px 8px; line-height:18px; overflow-x:auto; overflow-y:hidden; overflow-wrap:normal; white-space:nowrap; }
.wheel-codebox__grid input { width:100%; min-width:0; }
.wheel-codebox__actions { display:grid; gap:8px; align-self:start; }
.wheel-codebox__grid button { display:grid; place-items:center; width:44px; min-width:44px; height:30px; min-height:30px; max-height:30px; padding:4px 0; }
.wheel-codebox__grid button svg { width:20px; height:20px; fill:currentColor; }
.wheel-codebox__grid button[data-wheel="reset"] svg { fill:none; }
.wheel-codebox__grid button[data-wheel="reset"] path { stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wheel-codebox__grid p { min-width:0; margin:0; color:var(--parchment-dim); font:400 .82rem/1.4 var(--font-ui); }
#wheel-code-status:empty { display:none; }
#wheel-import { overflow-wrap:anywhere; }
.character-wheel-code :focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
#wheel-import { flex:1 1 13rem; min-width:0; }
.character-wheel-main { display:grid; grid-template-columns:minmax(15rem,280px) minmax(0,1fr); gap:18px; align-items:start; }
.character-wheel-main aside { display:flex; flex-direction:column; gap:14px; min-width:0; }
.character-wheel-selection, .character-wheel-information { min-width:0; padding:12px; border:1px solid var(--stone-hi); border-radius:10px; background:var(--ink-2); overflow-wrap:anywhere; }
/* Info-Boxen kompakt: enge Absatzabstaende und Zeilenhoehe. */ .character-wheel-selection, .character-wheel-information { line-height:1.35; } .character-wheel-selection p, .character-wheel-information p { margin:.15rem 0; }
.character-wheel-selection h3 { margin:.15rem 0; color:var(--gold); }
.wod-label { margin:6px 0 0; color:var(--parchment-dim); font:600 .72rem/1.35 var(--font-ui); letter-spacing:.03em; text-transform:uppercase; }
.wod-locked { color:var(--parchment-dim); opacity:.6; }
.wod-bar { height:8px; overflow:hidden; border:1px solid var(--stone-hi); border-radius:4px; background:var(--ink-3); }
.wod-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--green-deep),var(--green)); }
.wod-autofill { display:flex; align-items:center; gap:.35rem; margin:4px 0 0; color:var(--parchment-dim); font:600 .72rem/1.35 var(--font-ui); letter-spacing:.03em; text-transform:uppercase; }
.wod-autofill input { margin:0; }
.wod-sel-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:10px; }
.wod-sel-buttons button { min-width:0; min-height:36px; padding:5px 2px; }
.wheel-point-buttons { margin:10px 0 0; }
.wheel-point-buttons button:disabled { opacity:.45; cursor:not-allowed; }
@media (pointer:coarse) { .wheel-point-buttons button { min-height:44px; } }
.character-wheelbox { width:100%; max-width:560px; min-width:0; margin:0 auto; }
.character-wheelbox svg { display:block; width:100%; height:auto; overflow:visible; background:transparent; image-rendering:pixelated; }
.wod-slice { cursor:pointer; }
.wod-slice .wod-slice-bg { stroke:rgb(0 0 0 / .35); stroke-width:1; transition:filter .12s; }
.wod-slice:hover .wod-slice-bg { filter:brightness(1.5); }
.wod-slice.is-selected .wod-slice-bg { stroke:#fff; stroke-width:2; }
.wod-slice.is-locked { cursor:default; }
.wod-slice:focus-visible, .wod-corner:focus-visible, .wod-vessel:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.wod-corner, .wod-vessel { cursor:pointer; fill:transparent; stroke:transparent; stroke-width:2; transition:stroke .12s; }
.wod-corner:hover, .wod-vessel:hover { stroke:rgb(255 255 255 / .6); }
.wod-corner.is-selected { stroke:#fff; }
.wod-gem-qualities { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.wod-gem-slots { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.wod-gem-slots label { display:flex; flex-direction:column; gap:3px; color:var(--parchment-dim); font:400 .7rem/1.35 var(--font-ui); }
.wod-gem-active { display:flex; gap:8px; align-items:flex-start; margin:6px 0; min-width:0; }
.wod-gem-active .character-gem-icon { display:block; position:relative; flex:0 0 32px; width:32px; height:32px; min-width:32px; overflow:hidden; }
.wod-gem-active .character-gem-icon img { position:absolute; top:0; left:calc(var(--gem-sprite,0) * -32px); width:auto; max-width:none; height:32px; image-rendering:pixelated; }
.wod-gem-active > div { min-width:0; overflow-wrap:anywhere; }
.wod-gem-slots select { width:100%; }
.wod-info { color:var(--parchment-dim); font-size:.8rem; line-height:1.35; }
.wod-sum-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:18px; margin-top:16px; }
.wod-sum-grid table { width:100%; border-collapse:collapse; }
.wod-sum-grid td { padding:4px; border-bottom:1px solid rgb(255 255 255 / .08); overflow-wrap:anywhere; }
/* Einspaltig steht das Wheel ueber den Info-Boxen: deren Hoehe wechselt je Auswahl und liesse das Wheel sonst springen. */
@media (max-width:820px) { .character-wheel-main { grid-template-columns:minmax(0,1fr); } .character-wheelbox { order:-1; } }
/* Ohne Hover (Touch) und einspaltig entfaellt die Vorschau-Box: unter der Auswahl-Box aenderte sie beim Hovern die Seitenhoehe und liess das Wheel springen. */
@media (hover:none), (max-width:820px) { .character-wheel-information { display:none; } }
@media (max-width:560px) { #character-wheel-dialog { width:calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width:calc(100vw - 1rem); max-height:calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } .character-wheel-editor { padding:.75rem; } }
@media (pointer:coarse) { .character-wheel-code button:not(.wheel-icon-action), .character-wheel-code a { min-height:44px; } }
/* Die Pfeile des Zahlenfelds teilen sich die Feldhoehe; die 44-Pixel-Regel oben schob den unteren Pfeil aus dem Feld. */
@media (pointer:coarse) { .wheel-sources .number-stepper__buttons button { min-height:0; } }
/* Desktop (Tobi 2026-10-10): Code-Kasten schmaler neben den Promotion Points statt darunter. */
@media (min-width:900px) { .character-wheel-code { flex-wrap:nowrap; gap:12px 24px; } .character-wheel-points { flex:0 0 auto; width:auto; } .wheel-codebox { flex:1 1 0; width:auto; min-width:18rem; max-width:34rem; margin-inline-start:auto; } }
@media (prefers-reduced-motion:reduce) { .character-wheel-editor * { scroll-behavior:auto !important; transition:none !important; } }