/* Theme im Stil des Originalspiels: dunkles Nachtblau, Gold, verzierte Rahmen und Knöpfe aus dem Spiel. */
:root {
  --bg: #0a0d14; --bg2: #10151f; --bg3: #182030; --line: #3a3526;
  --text: #f0e9d8; --muted: #9da3b0; --gold: #d2aa5c; --gold2: #f0d18a;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --f-panel: url(assets/ui/frm_contentbox_small.png);
  --f-modal: url(assets/ui/frm_innercontent.png);
}
html, body { background: radial-gradient(ellipse at 50% -10%, #1a2334 0%, #0a0d14 60%) fixed; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--gold2); text-shadow: 0 1px 0 #000, 0 0 10px rgba(210,170,92,.25); letter-spacing: .04em; }

/* Knöpfe */
button {
  background: none; color: var(--text); font-family: var(--serif); font-weight: 600; letter-spacing: .02em;
  border: 14px solid transparent; border-image: url(assets/ui/btn_simple_normal.png) 14 fill / 14px stretch;
  padding: 0 6px; min-height: 42px; text-shadow: 0 1px 2px #000; transition: filter .12s, transform .06s;
}
button:hover:not(:disabled) { border-color: transparent; border-image-source: url(assets/ui/btn_simple_highlight.png); filter: brightness(1.15); }
button:active:not(:disabled) { border-image-source: url(assets/ui/btn_simple_pressed.png); transform: translateY(1px); }
button:disabled { border-image-source: url(assets/ui/btn_simple_disabled.png); opacity: .6; }
button.primary { border-width: 16px 30px; border-image: url(assets/ui/btn_blue_normal.png) 26 60 fill / 16px 30px stretch; color: #fff8e0; min-height: 50px; }
button.primary:hover:not(:disabled) { border-image-source: url(assets/ui/btn_blue_highlighted.png); }
button.primary:active:not(:disabled) { border-image-source: url(assets/ui/btn_blue_pressed.png); }
button.primary:disabled { filter: grayscale(.7) brightness(.7); }
button.danger { border-width: 16px 30px; border-image: url(assets/ui/btn_red_normal.png) 26 60 fill / 16px 30px stretch; color: #ffe1dc; }
button.danger:hover:not(:disabled) { border-image-source: url(assets/ui/btn_red_highlighted.png); }
button.small { min-height: 32px; font-size: .82rem; border-width: 10px; border-image-width: 10px; padding: 0 2px; }
button.icon-btn { width: 46px; min-height: 46px; border: 0; border-image: none; padding: 0; font-size: 0; background: center / contain no-repeat url(assets/ui/btn_settings_normal.png); }
button.icon-btn:hover:not(:disabled) { background-image: url(assets/ui/btn_settings_highlighted.png); border-image: none; }
#btn-menu { background-image: url(assets/ui/btn_settings_normal.png); }
#btn-info { background-image: url(assets/ui/btn_arrowright_normal.png); transform: rotate(90deg); }
#btn-info::before { content: ''; }
.chat-toggle { background-image: url(assets/ui/btn_chat_normal.png) !important; }
.chat-toggle:hover:not(:disabled) { background-image: url(assets/ui/btn_chat_highlighted.png) !important; }
#chat-close, #sheet-close { background-image: url(assets/ui/btn_xclose_normal.png); width: 38px; min-height: 38px; }
#chat-close:hover, #sheet-close:hover { background-image: url(assets/ui/btn_xclose_highlight.png); }
.map-tools button { width: 42px; min-height: 42px; font-size: 1.2rem; border-width: 10px; border-image-width: 10px; padding: 0; background: none; }

/* Felder */
input, select { background: rgba(3,5,10,.75); border: 12px solid transparent; border-image: url(assets/ui/frm_inputbar.png) 14 fill / 12px stretch; padding: 0 4px; min-height: 42px; }
input::placeholder { color: #6d7484; }

/* Rahmen */
.home-card, .lobby-card { margin: 26px auto; padding: 26px 24px 32px; border: 20px solid transparent; border-image: var(--f-modal) 24 fill / 20px stretch; background: rgba(8,11,18,.9); background-clip: padding-box; }
.players li, .plan-row, .unit-row, .rule-sec, .muster-reg { border: 10px solid transparent; border-image: var(--f-panel) 14 fill / 10px stretch; background: none; padding: 2px 6px; }
.plan-row.sel { filter: drop-shadow(0 0 6px #fff); }
.code { background: rgba(0,0,0,.5); border: 1px solid var(--gold); color: var(--gold2); }
.tag, .chip { background: rgba(0,0,0,.45); border: 1px solid #4b4326; color: #d9cfae; }

/* Kopfleiste und Phasenleiste */
.topbar { background: linear-gradient(#141b29, #0c111a); border-bottom: 0; position: relative; padding-bottom: 8px; }
.topbar::after, .phasebar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 13px; background: url(assets/ui/frm_horizontaldivider2.png) center / 100% 100% no-repeat; pointer-events: none; z-index: 3; }
.phasebar { background: linear-gradient(#0f1420, #0a0e17); border-bottom: 0; position: relative; padding-bottom: 8px; }
.phasebar::after { bottom: -6px; opacity: .7; }
.top-info strong { font-family: var(--serif); font-size: 1.1rem; color: var(--gold2); }
.pb-step { background: rgba(255,255,255,.05); border: 1px solid #2c3242; }
.pb-step.now { background: linear-gradient(#f0d18a, #b98a3a); color: #1a1205; border-color: #ffe9b0; }
.pb-label { color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.pb-house { background: rgba(255,255,255,.05); }
.wild-pip { background: #131a27; border-color: #2c3648; }

/* Bedienfeld */
.panel { background: linear-gradient(#0d121c, #080b12); border-top: 0; border-left: 0; position: relative; }
.panel::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 13px; background: url(assets/ui/frm_horizontaldivider2.png) center / 100% 100% no-repeat; opacity: .8; }
@media (min-width: 900px) {
  .panel { width: 420px; padding-top: 14px; border-left: 3px solid transparent; border-image: linear-gradient(#3d3421, #a98543 50%, #3d3421) 1; }
  .panel::before { display: none; }
  .map-tools { right: 432px; }
}
.panel h3.me-turn { font-size: 1.15rem; border-bottom: 1px solid #3a3526; padding-bottom: 4px; }
.hcard { border: 3px solid transparent; border-radius: 10px; transition: transform .12s, box-shadow .12s; }
.hcard:hover { transform: translateY(-3px); }
.hcard.sel { border-color: var(--gold2); box-shadow: 0 0 14px rgba(240,209,138,.7); }

/* Dialoge */
.sheet-box, .reveal-box, .wbox, .chat { border: 22px solid transparent; border-image: var(--f-modal) 24 fill / 22px stretch; background: rgba(8,11,18,.97); background-clip: padding-box; box-shadow: 0 14px 60px #000; }
.chat { padding: 0; height: min(540px, 72vh); }
.chat-head { border-bottom: 1px solid #3a3526; }
.chat .msg { background: #182030; border: 1px solid #2c3648; }
.chat .msg.mine { background: #2b2614; border-color: #5d4c22; }
.chat-send select { width: 36%; }
.sheet-head { border-bottom: 1px solid #3a3526; }
.tabs button { border-width: 9px; border-image-width: 9px; min-height: 34px; font-size: .85rem; }
.tabs button.on { border-image-source: url(assets/ui/btn_blue_normal.png); border-image-slice: 26 60; border-image-width: 14px 24px; color: #fff8e0; }
.rule-sec summary { font-family: var(--serif); }
.rule-sec[open] { filter: none; }

/* Aufgedeckte Gebote */
.reveal .bid-row { border-bottom: 1px solid rgba(210,170,92,.2); }
.reveal .bid-row b { font-family: var(--serif); font-size: 1.5rem; }

/* Kampfanzeige */
.combatov { position: absolute; z-index: 20; top: 8px; left: 8px; right: 8px; display: flex; justify-content: center; pointer-events: none; }
@media (min-width: 900px) { .combatov { right: 440px; } }
.cb-box { pointer-events: auto; width: min(760px, 100%); max-height: calc(100% - 16px); overflow-y: auto; border: 22px solid transparent; border-image: var(--f-modal) 24 fill / 22px stretch; background: rgba(8,11,18,.97); background-clip: padding-box; box-shadow: 0 16px 60px rgba(0,0,0,.85); animation: cbin .35s ease-out; position: relative; }
@keyframes cbin { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
.cb-title { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--serif); font-size: 1.25rem; color: var(--gold2); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.cb-title small { color: var(--muted); font-size: .8rem; text-transform: none; letter-spacing: 0; }
.cb-title .swordimg { width: 44px; transform: rotate(-8deg); filter: drop-shadow(0 2px 3px #000); }
.cb-grid { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: start; gap: 6px; }
.cb-vs { align-self: center; font-family: var(--serif); font-size: 1.4rem; color: var(--gold); text-shadow: 0 0 10px rgba(210,170,92,.6); text-align: center; }
.cb-side { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px; border-radius: 10px; transition: opacity .4s, filter .4s; position: relative; }
.cb-side.lose { opacity: .55; filter: grayscale(.6); }
.cb-side.win { filter: drop-shadow(0 0 14px rgba(240,209,138,.55)); }
.cb-head { display: flex; align-items: center; gap: 8px; }
.cb-flag { width: 58px; filter: drop-shadow(0 3px 4px #000); }
.cb-flag.neutral { width: 52px; }
.cb-name { display: flex; flex-direction: column; line-height: 1.1; }
.cb-name b { font-family: var(--serif); font-size: 1.05rem; }
.cb-name small { color: var(--muted); }
.cb-shield { position: relative; width: 84px; height: 96px; }
.cb-shield .shimg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px #000); }
.cb-shield .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 800; font-size: 2.3rem; color: #fff3cf; text-shadow: 0 2px 0 #000, 0 0 12px rgba(240,209,138,.7); padding-bottom: 6px; }
.cb-shield .num.bump { animation: bump .6s ease-out; }
@keyframes bump { 30% { transform: scale(1.35); } }
.cb-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.cb-pill { display: inline-flex; gap: 6px; align-items: baseline; padding: 1px 8px; border-radius: 11px; background: rgba(0,0,0,.5); border: 1px solid #4b4326; font-size: .78rem; }
.cb-pill em { font-style: normal; color: var(--muted); }
.cb-pill b { color: var(--gold2); font-family: var(--serif); }
.cb-pill.card { border-color: #7a5aa8; } .cb-pill.sword { border-color: #7fb2e6; }
.cb-card { text-align: center; cursor: pointer; }
.cb-card .flip { width: 118px; margin: 0 auto; perspective: 700px; animation: flipin .7s ease-out; }
.cb-card .cimg { width: 100%; border-radius: 8px; box-shadow: 0 6px 16px #000; display: block; }
.cb-card .flip.back .cimg { filter: brightness(.8); }
@keyframes flipin { from { transform: rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.cb-card .cname { font-family: var(--serif); font-size: .85rem; margin-top: 3px; }
.cb-syms { display: inline-flex; gap: 2px; }
.cb-syms .sym { width: 24px; height: 24px; }
.cb-notes { margin-top: 8px; font-size: .78rem; color: var(--muted); display: grid; gap: 3px; }
.cb-notes .ability b { color: var(--gold2); }
.cb-notes .note { color: var(--gold2); }
.cb-result { margin: 8px auto 0; text-align: center; font-family: var(--serif); font-size: 1.15rem; color: #fff3cf; padding: 5px 12px; background: linear-gradient(90deg, transparent, rgba(210,170,92,.28), transparent); text-shadow: 0 1px 3px #000; }
.cb-close { position: absolute; right: 2px; top: 2px; }
@media (max-width: 700px) {
  .combatov { top: 4px; left: 4px; right: 4px; }
  .cb-box { border-width: 16px; border-image-width: 16px; }
  .cb-title { font-size: 1rem; } .cb-title .swordimg { width: 32px; }
  .cb-grid { grid-template-columns: 1fr 26px 1fr; }
  .cb-flag { width: 38px; } .cb-name b { font-size: .85rem; }
  .cb-shield { width: 60px; height: 70px; } .cb-shield .num { font-size: 1.6rem; }
  .cb-card .flip { width: 78px; } .cb-pill { font-size: .66rem; padding: 0 5px; }
  .cb-syms .sym { width: 18px; height: 18px; } .cb-notes { font-size: .68rem; }
}

/* Kampf kompakter: Schild und Karte nebeneinander */
.cb-mid { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cb-side.defender .cb-mid { flex-direction: row-reverse; }
.cb-card .flip { width: 96px; }
.cb-box { max-height: calc(100vh - 150px); }

/* Befehlsmarker und Karten im Bedienfeld */
.order-btn { border: 0 !important; border-image: none !important; background: none !important; padding: 2px; width: 60px; height: 60px; min-height: 0; transition: transform .1s, filter .1s; }
.order-btn:hover:not(:disabled) { transform: scale(1.1); filter: drop-shadow(0 0 6px var(--gold2)); }
.hcard { border-image: none; min-height: 0; padding: 0; }
.hcard:hover:not(:disabled) { border-image: none; filter: none; }
.map-tools button { background: rgba(10,13,20,.6); }
.units-list .unit-row { min-height: 44px; }

/* Startseite */
.flag-row { display: flex; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.flag-row img { width: 44px; filter: drop-shadow(0 3px 4px #000); transition: transform .15s; }
.flag-row img:hover { transform: translateY(-4px) scale(1.06); }
.house-btn img { width: 64px; height: auto; filter: drop-shadow(0 3px 4px #000); }
.house-btn { padding: 8px 4px; }
.house-btn.mine { filter: drop-shadow(0 0 8px var(--gold2)); }
.house-btn:disabled img { filter: grayscale(1) brightness(.6); }

.cb-grid > * { min-width: 0; }
.cb-grid { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
.cb-tap { display: none; }
@media (max-width: 700px) {
  .cb-grid { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
  .cb-box { max-height: 44dvh; padding: 0; }
  .cb-tap { display: inline; }
  .cb-box.open { max-height: 74dvh; }
  .cb-box:not(.open) .cb-card, .cb-box:not(.open) .cb-pills, .cb-box:not(.open) .cb-notes { display: none; }
  .cb-mid { gap: 4px; }
  .cb-card .flip { width: 62px; } .cb-card .cname { font-size: .7rem; }
  .cb-shield { width: 52px; height: 60px; } .cb-shield .num { font-size: 1.4rem; }
  .cb-side { padding: 2px; } .cb-head { gap: 4px; } .cb-flag { width: 30px; }
  .cb-name small { display: none; }
  .cb-result { font-size: .95rem; }
}
input[type=checkbox] { border: 0; border-image: none; background: none; min-height: 0; width: 18px; height: 18px; padding: 0; margin-right: 6px; vertical-align: middle; accent-color: #d2aa5c; }