/* Streichholz-Pyramide — spielspezifische Styles (Chrome aus ../style.css) */

.hero-nim { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.hero-nim i {
    width: 8px; height: 56px; border-radius: 4px; background: #d9b98c; position: relative; display: inline-block;
}
.hero-nim i::after { content: ''; position: absolute; top: -7px; left: -2px; width: 12px; height: 14px; border-radius: 50%; background: #e5484d; }
.hero-nim i:nth-child(2) { transform: rotate(6deg); }
.hero-nim i:nth-child(3) { transform: rotate(-8deg); }

.players { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.pl {
    display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 12px;
    background: var(--panel); border: 1px solid var(--panel-border); font-size: 14px;
}
.pl .nm { display: flex; align-items: center; gap: 6px; }
.pl .score { color: var(--gold); font-weight: 800; }
.pl.turn { border-color: var(--gold); box-shadow: 0 0 18px rgba(242, 193, 78, .25); animation: focus-pulse 1.6s infinite; }

/* Pyramide */
.pyramid {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: min(100%, 560px); margin: 8px auto 12px; padding: 16px 8px;
    background: var(--panel); border: 1px solid var(--panel-border); border-radius: 16px;
}
.nrow { display: flex; gap: 8px; justify-content: center; min-height: 64px; }
.stick {
    width: 26px; height: 64px; border: 0; padding: 0; background: none; cursor: default;
    position: relative; display: grid; justify-items: center; align-items: end;
    -webkit-tap-highlight-color: transparent;
}
.stick::before {
    content: ''; width: 7px; height: 52px; border-radius: 3px;
    background: linear-gradient(#e8d5b5, #c9a06a); box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}
.stick .head {
    position: absolute; top: 2px; width: 13px; height: 15px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff7a6e, #c0392b);
}
.stick.can { cursor: pointer; }
.stick.can:hover::before, .stick.can:focus-visible::before { box-shadow: 0 0 0 2px var(--accent), 0 3px 8px rgba(0, 0, 0, .35); }
.stick.sel::before { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(242, 193, 78, .5); }
.stick.sel .head { background: radial-gradient(circle at 35% 30%, #ffe08a, var(--gold)); }
.stick.sel { transform: translateY(-6px); }
.stick.gone { pointer-events: none; animation: stick-fall .9s ease-in forwards; }
@keyframes stick-fall {
    30% { transform: rotate(18deg); opacity: 1; }
    100% { transform: translateY(60px) rotate(70deg); opacity: 0; }
}

.action-box { width: min(560px, 100%); margin: 0 auto 12px; }
.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); }
.act-btns { display: flex; gap: 10px; justify-content: center; }
.act-btns .btn { min-height: 48px; min-width: 170px; }

/* Kleine Screens: Hölzer bleiben tippbar (S15: ≥44px-Spalten via Gap) */
@media (max-width: 420px) {
    .stick { width: 22px; }
    .nrow { gap: 6px; }
}

/* §4.16 Desktop-Fill */
@media (min-width: 1100px) {
    .stick { width: 34px; height: 76px; }
    .stick::before { width: 9px; height: 62px; }
}