/* Flaggenjagd — spielspezifische Styles (eigene Optik, Chrome aus ../style.css) */

/* Home-Hero */
.hero-flag { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.hero-flag .fp {
    width: 46px; height: 56px; border-radius: 9px; display: grid; place-items: center;
    font-weight: 800; font-size: 20px; color: #fff;
    background: linear-gradient(150deg, #4f6fb5, #33487c); box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.hero-flag .fp.b { background: linear-gradient(150deg, #a04448, #6e2b2e); transform: rotate(5deg); }
.hero-flag .fp.f { background: linear-gradient(150deg, #3f8f5f, #2a6242); transform: rotate(-5deg); }
.hero-flag .fp:first-child { transform: rotate(-6deg); }

/* Brett */
.fj-board {
    /* G3: explizite Zeilen — Inhalte dürfen die Zellen NIE aufblähen */
    display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
    gap: 2px;
    /* S15: zusätzlich an die Viewport-HÖHE gedeckelt (aspect-ratio 1 → Höhe = Breite),
       damit Brett + Action-Box gemeinsam sichtbar bleiben; Untergrenze 300px */
    /* 100% statt 96vw: 96vw ignorierte das Screen-Padding → 2px Quer-Scroll */
    width: min(100%, 640px);   /* Fallback ohne dvh (Safari < 15.4) */
    width: clamp(280px, min(100%, calc(100dvh - 330px)), 640px);
    max-width: 100%; aspect-ratio: 1; margin: 0 auto;
    background: linear-gradient(135deg, #17251c, #101a22);
    border: 1px solid var(--panel-border); border-radius: 12px; padding: 5px;
}
.fcell {
    border: 0; padding: 0; border-radius: 4px; background: rgba(255, 255, 255, .05);
    position: relative; font: inherit; min-width: 0; min-height: 0; overflow: hidden;
    cursor: default; display: grid; place-items: center;
    font-size: clamp(11px, 3vw, 22px); font-weight: 800; color: #fff; line-height: 1;
}
.fcell.lm { box-shadow: inset 0 0 0 2px rgba(79, 140, 255, .65); }   /* G2: letzter Zug */
.fcell.lake { background: rgba(79, 140, 255, .22); box-shadow: inset 0 0 10px rgba(79, 140, 255, .3); }
.fcell.mine { background: linear-gradient(150deg, #4f6fb5, #33487c); }
.fcell.enemy { background: linear-gradient(150deg, #a04448, #6e2b2e); }
.fcell.enemy.hidden-rank { font-size: clamp(12px, 3.2vw, 24px); }
.fcell.revealed { box-shadow: inset 0 0 0 2px rgba(242, 193, 78, .7); }
.fcell.sel { outline: 3px solid var(--gold); outline-offset: 1px; transform: scale(1.06); z-index: 2; }
.fcell.can { cursor: pointer; }
.fcell.target { outline: 2px dashed rgba(79, 140, 255, .9); outline-offset: -2px; cursor: pointer; animation: fj-target 1.2s infinite; }
.fcell.target.attack { outline-color: rgba(229, 72, 77, .95); }
@keyframes fj-target { 50% { outline-color: rgba(255, 255, 255, .35); } }
/* G4: Rangnamen nur, wenn Platz — sonst abgeschnittener Müll */
.fcell .sub {
    position: absolute; bottom: 1px; left: 0; right: 0; text-align: center;
    font-size: 9px; font-weight: 600; opacity: .75;
    white-space: nowrap; overflow: hidden;
}
@media (max-width: 700px) { .fcell .sub { display: none; } }

/* Friedhof */
.grave { display: flex; justify-content: center; gap: 3px; flex-wrap: wrap; min-height: 22px; margin: 6px 0; }
.grave span {
    width: 20px; height: 24px; border-radius: 4px; display: grid; place-items: center;
    font-size: 11px; font-weight: 800; color: #fff; opacity: .8;
}
.grave.enemy span { background: #6e2b2e; }
.grave.mine span { background: #33487c; }

/* Kampf-Drama */
.combat-box {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: fit-content; margin: 12px auto; padding: 10px 22px; border-radius: 14px;
    background: var(--panel); border: 1px solid rgba(242, 193, 78, .5);
    animation: cb-in .3s cubic-bezier(.2, 1.6, .4, 1);
}
.combat-box[hidden] { display: none; }
.cb-piece {
    width: 52px; height: 62px; border-radius: 10px; display: grid; place-items: center;
    font-size: 24px; font-weight: 800; color: #fff;
}
.cb-piece.att { background: linear-gradient(150deg, #4f6fb5, #33487c); }
.cb-piece.def { background: linear-gradient(150deg, #a04448, #6e2b2e); }
.cb-piece.lost { opacity: .35; filter: grayscale(.8); transform: rotate(12deg); }
.cb-vs { font-size: 22px; }
.cb-result { font-size: 14px; font-weight: 700; max-width: 180px; }
@keyframes cb-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Aufstellen */
.action-box { width: min(560px, 100%); margin: 10px auto; }
.action-title { font-size: 15px; color: var(--muted); margin-bottom: 10px; }
.action-box.focus .action-title { font-size: 17px; font-weight: 800; color: var(--text); }
.place-btns { display: flex; gap: 10px; justify-content: center; }
.place-btns .btn { min-height: 48px; min-width: 140px; }

/* §4.16 Desktop-Fill */
@media (min-width: 1100px) {
    .fj-board { width: min(78vh, 780px); }
}