:root {
    --bg: #060607;
    --panel: rgba(18, 18, 20, .92);
    --panel-2: rgba(28, 28, 31, .76);
    --text: #f6f8ff;
    --muted: #a9a9ae;
    --line: rgba(255,255,255,.10);
    --red: #ff1e2d;
    --red-dark: #b80012;
    --red-soft: #ff4a56;
    --danger: #ff1e2d;
    --ok: #ff1e2d;
    --shadow: 0 26px 80px rgba(0,0,0,.42);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 0%, rgba(255,30,45,.13), transparent 35%),
        radial-gradient(circle at 90% 15%, rgba(184,0,18,.11), transparent 34%),
        linear-gradient(145deg, #060607 0%, #0d0d0f 48%, #080809 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .25;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 82%);
}
.ambient { position: fixed; width: 420px; height: 420px; filter: blur(110px); opacity: .13; border-radius: 50%; pointer-events: none; }
.ambient-one { top: 13%; left: -170px; background: var(--red); }
.ambient-two { right: -190px; bottom: 5%; background: var(--red-dark); }
.shell { width: min(1180px, calc(100% - 34px)); margin: 0 auto; padding: 72px 0 38px; position: relative; z-index: 1; }
.hero { display: grid; grid-template-columns: 78px 1fr; gap: 24px; align-items: center; max-width: 820px; margin-bottom: 44px; }
.brand-mark { width: 78px; aspect-ratio: 1; border-radius: 23px; display: grid; place-items: center; position: relative; background: linear-gradient(145deg, rgba(255,30,45,.23), rgba(85,0,8,.22)); border: 1px solid rgba(255,30,45,.34); box-shadow: inset 0 0 35px rgba(255,30,45,.11), 0 18px 50px rgba(0,0,0,.32); }
.brand-mark::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; }
.brand-mark span { font-weight: 950; font-size: 38px; letter-spacing: -4px; transform: skew(-8deg); background: linear-gradient(135deg, #fff, var(--red) 72%); -webkit-background-clip: text; color: transparent; }
.eyebrow { margin: 0 0 8px; color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .22em; }
h1 { margin: 0; font-size: clamp(34px, 5vw, 62px); letter-spacing: -.045em; line-height: .98; }
.lead { color: var(--muted); margin: 15px 0 0; font-size: clamp(16px, 2vw, 20px); }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.game-card { position: relative; isolation: isolate; min-height: 410px; overflow: hidden; padding: 28px; border-radius: 28px; background: linear-gradient(155deg, rgba(25,25,28,.95), rgba(10,10,12,.96)); border: 1px solid rgba(255,255,255,.105); box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.game-card::after { content: ""; position: absolute; inset: auto -18% -52% 16%; height: 72%; z-index: -1; background: radial-gradient(circle, rgba(255,30,45,.17), transparent 68%); transform: rotate(-10deg); }
.game-card:nth-child(even)::after { background: radial-gradient(circle, rgba(184,0,18,.16), transparent 68%); }
.game-card:hover { transform: translateY(-4px); border-color: rgba(255,30,45,.42); box-shadow: 0 32px 90px rgba(0,0,0,.52), 0 0 0 1px rgba(255,30,45,.08), 0 0 34px rgba(255,30,45,.08); }
.card-glow { position: absolute; width: 210px; height: 210px; top: -100px; right: -65px; border-radius: 50%; background: var(--red); opacity: .09; filter: blur(35px); z-index: -1; }
.game-card:nth-child(even) .card-glow { background: var(--red-dark); }
.game-topline { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.game-icon { width: 62px; height: 62px; border-radius: 19px; display: grid; place-items: center; font-size: 30px; font-weight: 900; background: rgba(255,30,45,.11); border: 1px solid rgba(255,30,45,.22); box-shadow: inset 0 0 28px rgba(255,30,45,.08); }
.game-card:nth-child(even) .game-icon { background: rgba(255,30,45,.11); border-color: rgba(255,30,45,.22); }
.badge { padding: 8px 11px; border-radius: 999px; background: rgba(255,30,45,.10); border: 1px solid rgba(255,30,45,.22); color: #ff8790; font-weight: 900; font-size: 10px; letter-spacing: .12em; }
.game-kicker { margin: 34px 0 8px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.game-card h2 { margin: 0; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.035em; }
.game-description { color: #b7c0d0; font-size: 15px; line-height: 1.7; margin: 15px 0 28px; max-width: 54ch; }
.play-button { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 0 18px 0 20px; border-radius: 16px; color: #fff; text-decoration: none; font-weight: 950; letter-spacing: .01em; background: linear-gradient(115deg, #ff3442, #c90013); box-shadow: 0 12px 34px rgba(255,30,45,.18); transition: transform .18s ease, filter .18s ease; }
.game-card:nth-child(even) .play-button { color: #fff; background: linear-gradient(115deg, #ff3442, #c90013); box-shadow: 0 12px 34px rgba(255,30,45,.18); }
.play-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.empty-state { padding: 50px 28px; border: 1px solid var(--line); background: var(--panel); border-radius: 26px; text-align: center; }
.empty-state .game-icon { margin: 0 auto 18px; }
.empty-state h2 { margin: 0 0 8px; }
.empty-state p { color: var(--muted); margin: 0; }
.footer { display: flex; gap: 9px; justify-content: center; align-items: center; padding-top: 34px; color: #69758a; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.footer-dot { color: var(--red); }

/* Admin */
.admin-shell { width: min(1220px, calc(100% - 34px)); margin: 0 auto; padding: 42px 0; position: relative; z-index: 2; }
.admin-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; }
.admin-title .eyebrow { margin-bottom:6px; }
.admin-title h1 { font-size: clamp(30px, 4vw, 48px); }
.admin-actions { display:flex; gap:10px; flex-wrap:wrap; }
.admin-actions a, .admin-actions button, .button-secondary { appearance:none; border:1px solid var(--line); background:rgba(255,255,255,.055); color:var(--text); text-decoration:none; border-radius:13px; padding:11px 14px; font-weight:800; cursor:pointer; font:inherit; }
.admin-actions a:hover, .admin-actions button:hover, .button-secondary:hover { border-color:rgba(255,30,45,.34); background:rgba(255,30,45,.08); }
.admin-grid { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:22px; align-items:start; }
.panel { background:linear-gradient(160deg, rgba(22,22,25,.95), rgba(10,10,12,.95)); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); overflow:hidden; }
.panel-head { padding:21px 22px 15px; border-bottom:1px solid var(--line); }
.panel-head h2 { margin:0; font-size:20px; }
.panel-head p { color:var(--muted); margin:6px 0 0; font-size:13px; }
.panel-body { padding:20px 22px 22px; }
.game-admin-list { display:grid; gap:13px; }
.admin-game { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:14px; align-items:center; border:1px solid var(--line); border-radius:18px; padding:14px; background:rgba(255,255,255,.025); }
.admin-game-icon { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-size:24px; background:rgba(255,30,45,.09); border:1px solid rgba(255,30,45,.17); }
.admin-game h3 { margin:0 0 5px; font-size:16px; }
.admin-game p { margin:0; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.status.on { color:#ff9098; background:rgba(255,30,45,.09); border:1px solid rgba(255,30,45,.18); }
.status.off { color:#a5a5aa; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10); }
.row-actions { display:flex; gap:7px; }
.icon-btn { appearance:none; width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); display:grid; place-items:center; cursor:pointer; text-decoration:none; font-size:14px; }
.icon-btn.danger { color:#ff91a3; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1 / -1; }
.field label { font-size:12px; color:#bdc6d6; font-weight:800; }
.field input, .field textarea, .field select { width:100%; border:1px solid rgba(255,255,255,.11); border-radius:12px; background:#101012; color:var(--text); padding:12px 13px; outline:none; font:inherit; }
.field textarea { min-height:112px; resize:vertical; line-height:1.5; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:rgba(255,30,45,.52); box-shadow:0 0 0 3px rgba(255,30,45,.09); }
.checkline { display:flex; gap:10px; align-items:center; min-height:44px; }
.checkline input { width:18px; height:18px; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.button-primary { appearance:none; border:0; border-radius:13px; padding:12px 16px; font:inherit; font-weight:950; cursor:pointer; color:#fff; background:linear-gradient(115deg,#ff3442,#c90013); }
.flash { margin-bottom:18px; padding:13px 15px; border-radius:14px; border:1px solid var(--line); font-size:13px; }
.flash.success { border-color:rgba(255,30,45,.22); background:rgba(255,30,45,.08); color:#ffb1b7; }
.flash.error { border-color:rgba(255,73,103,.22); background:rgba(255,73,103,.08); color:#ffb0bd; }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:30px 17px; }
.login-card { width:min(470px,100%); padding:28px; border-radius:26px; background:linear-gradient(160deg,rgba(23,23,26,.96),rgba(9,9,11,.97)); border:1px solid var(--line); box-shadow:var(--shadow); }
.login-card .brand-mark { width:62px; border-radius:18px; margin-bottom:20px; }
.login-card .brand-mark span { font-size:30px; }
.login-card h1 { font-size:32px; margin-bottom:8px; }
.login-card > p { color:var(--muted); line-height:1.55; }
.login-card .field { margin-top:18px; }
.login-card .button-primary { width:100%; margin-top:16px; min-height:48px; }
.small-note { color:#7f8ba0; font-size:11px; line-height:1.5; margin-top:14px; }
@media (max-width: 860px) {
    .shell { padding-top: 44px; }
    .hero { grid-template-columns: 62px 1fr; gap:17px; }
    .brand-mark { width:62px; border-radius:19px; }
    .brand-mark span { font-size:31px; }
    .game-grid, .admin-grid { grid-template-columns:1fr; }
    .admin-head { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 560px) {
    .shell, .admin-shell { width:min(100% - 22px, 1180px); }
    .shell { padding-top:30px; }
    .hero { grid-template-columns:1fr; margin-bottom:28px; }
    .brand-mark { width:56px; }
    h1 { font-size:36px; }
    .game-card { min-height:360px; padding:22px; border-radius:22px; }
    .game-kicker { margin-top:27px; }
    .game-card h2 { font-size:32px; }
    .form-grid { grid-template-columns:1fr; }
    .field.full { grid-column:auto; }
    .admin-game { grid-template-columns:46px minmax(0,1fr); }
    .admin-game-icon { width:46px; height:46px; }
    .row-actions { grid-column:1 / -1; justify-content:flex-end; }
}

.action-btn { appearance:none; border:1px solid var(--line); background:rgba(255,255,255,.045); color:var(--text); border-radius:11px; padding:9px 11px; font:inherit; font-size:12px; font-weight:900; cursor:pointer; white-space:nowrap; transition:border-color .18s ease, background .18s ease, transform .18s ease; }
.action-btn:hover { transform:translateY(-1px); border-color:rgba(255,30,45,.35); background:rgba(255,30,45,.09); }
.action-btn.show { color:#fff; border-color:rgba(255,30,45,.35); background:rgba(255,30,45,.12); }
.action-btn.hide { color:#d0d0d4; }
.action-btn.danger { color:#ff8f98; border-color:rgba(255,30,45,.24); }
.action-btn.danger:hover { color:#fff; background:rgba(255,30,45,.18); }
.field-help { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }

.row-actions { flex-wrap:wrap; }

/* v1.0.6 – ROXXEN R / schräge Gaming-Embleme */
.brand-mark {
    width: 78px;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.brand-mark::before { display: none; }
.brand-r-logo {
    display: block;
    width: 76px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.46)) drop-shadow(0 0 15px rgba(255,0,24,.12));
}

.game-icon,
.admin-game-icon {
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    place-items: center;
    overflow: visible;
}
.game-icon { width: 70px; height: 62px; }
.admin-game-icon { width: 56px; height: 50px; }
.game-icon::before,
.admin-game-icon::before {
    content: "";
    position: absolute;
    inset: 4px 6px;
    z-index: -1;
    background: #09090a;
    border: 3px solid #f0001c;
    transform: skew(-8deg);
    box-shadow: 0 10px 28px rgba(0,0,0,.34), inset 0 0 18px rgba(255,0,24,.045);
}
.game-icon::after,
.admin-game-icon::after {
    content: "";
    position: absolute;
    left: 7px;
    bottom: 2px;
    width: 42%;
    height: 2px;
    z-index: -1;
    background: #f0001c;
    transform: skew(-8deg);
    box-shadow: 0 0 12px rgba(255,0,24,.48);
}
.game-symbol {
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 950;
    font-style: normal;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.game-icon .game-symbol { font-size: 29px; }
.admin-game-icon .game-symbol { font-size: 23px; }
.game-card:hover .game-icon::before {
    border-color: #ff263c;
    box-shadow: 0 12px 34px rgba(0,0,0,.38), 0 0 20px rgba(255,0,24,.11), inset 0 0 18px rgba(255,0,24,.055);
}

.admin-brand-title {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.admin-r-logo {
    display: block;
    width: 58px;
    height: auto;
    flex: 0 0 auto;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,.42));
}
.login-card .brand-mark {
    width: 68px;
    margin-bottom: 18px;
}
.login-card .brand-r-logo { width: 66px; }

@media (max-width: 860px) {
    .brand-mark { width: 64px; }
    .brand-r-logo { width: 62px; }
    .admin-r-logo { width: 52px; }
}
@media (max-width: 560px) {
    .brand-mark { width: 58px; }
    .brand-r-logo { width: 56px; }
    .game-icon { width: 62px; height: 56px; }
    .game-icon .game-symbol { font-size: 26px; }
    .admin-brand-title { gap: 12px; align-items: flex-start; }
    .admin-r-logo { width: 46px; }
}