/**
 * bday-theme-super-mario — racing skin + own sections (0.300.6).
 *
 * Scoped to .rc-bp--super-mario. Look: sky blue, kart red, coin yellow, brick wall —
 * drawn with own SVG and CSS only, no Nintendo characters, logos or artwork. Brand
 * colours and text sizes stay on var(--robbo-*); Plakkaat only for h2.
 */

.rc-bp--super-mario {
    --sm-rot: #e52521;
    --sm-rot-dark: #b3181a;
    --sm-rot-soft: #fde4e3;
    --sm-blau: #049cd8;
    --sm-blau-dark: #0a6fa0;
    --sm-himmel: #e3f4fd;
    --sm-gelb: #fbd000;
    --sm-gelb-dark: #b88f00;
    --sm-gelb-soft: #fff6cc;
    --sm-gruen: #43b047;
    --sm-rosa: #f28fb6;
    --sm-ziegel: #c8642c;
    --sm-ziegel-dark: #8f4119;
    --sm-asphalt: #4a5058;
}

/* ---- Skin on shared components ------------------------------------------ */
.rc-bp--super-mario .rc-comp-hero {
    background:
        radial-gradient(circle at 86% 18%, var(--sm-gelb-soft) 0, rgba(255, 246, 204, 0) 340px),
        radial-gradient(circle at 10% 88%, var(--sm-rot-soft) 0, rgba(253, 228, 227, 0) 300px),
        linear-gradient(180deg, var(--sm-himmel) 0%, var(--robbo-white) 100%);
}
.rc-bp--super-mario .rc-comp-hero-eyebrow { color: var(--sm-rot-dark); background: var(--sm-rot-soft); }
.rc-bp--super-mario .rc-comp-hero-confetti { display: none; }

/* Ablauf: six steps → 3 + 3, kart colours */
.rc-bp--super-mario .rc-comp-program-step { --st: var(--sm-rot); border-top: 5px solid var(--st); }
.rc-bp--super-mario .rc-comp-program-num { background: var(--st); box-shadow: 0 4px 12px rgba(20, 30, 40, 0.18); }
.rc-bp--super-mario .rc-comp-program-step:nth-child(3n+2) { --st: var(--sm-blau); }
.rc-bp--super-mario .rc-comp-program-step:nth-child(3n) { --st: var(--sm-gruen); }

/* ---- Own sections -------------------------------------------------------- */
.rc-sm { padding: 56px 0; font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif; color: var(--robbo-coal); }
.rc-sm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.rc-sm-head { max-width: 780px; margin: 0 auto 28px; text-align: center; }
.rc-sm-eyebrow {
    display: inline-block;
    font-size: var(--robbo-fs-badge);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--robbo-white);
    background: var(--sm-rot);
    padding: 5px 12px;
    border-radius: 999px;
}
.rc-sm-eyebrow--gold { color: #3b2c00; background: var(--sm-gelb); }
.rc-sm-h2 { font-family: 'Plakkaat', 'ProximaNova', sans-serif; font-weight: 500; font-size: 32px; line-height: 1.2; margin: 12px 0 10px; color: var(--robbo-coal); }
.rc-sm-h3 { font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif; font-weight: 800; font-size: 20px; line-height: 1.25; margin: 0 0 10px; color: var(--robbo-coal); }
.rc-sm-lead { font-size: var(--robbo-fs-lg); line-height: 1.6; margin: 0; }
.rc-sm-note { font-size: var(--robbo-fs-md); line-height: 1.55; text-align: center; max-width: 760px; margin: 22px auto 0; }

/* Facts */
.rc-sm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; margin: 0 0 44px; padding: 0; }
.rc-sm-fact { background: var(--robbo-white); border: 1px solid var(--robbo-line); border-left: 4px solid var(--sm-rot); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.rc-sm-fact dt { font-size: var(--robbo-fs-badge); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--robbo-grey); margin: 0 0 4px; }
.rc-sm-fact dd { font-size: var(--robbo-fs-md); font-weight: 700; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }

/* Kart cards */
.rc-sm-karts { background: var(--sm-himmel); }
.rc-sm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rc-sm-kartcard {
    margin: 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: var(--robbo-white);
    border-radius: 20px;
    border-bottom: 6px solid var(--sm-ziegel);
    padding: 22px 16px 18px;
    box-shadow: 0 8px 24px rgba(10, 60, 90, .08);
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.rc-sm-kartcard:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(10, 60, 90, .12); }
.rc-sm-kartcard-art { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 160px; aspect-ratio: 16 / 10; background: radial-gradient(circle at 50% 70%, var(--sm-gelb-soft) 0, rgba(255, 246, 204, 0) 70%); border-radius: 14px; }
.rc-sm-kartcard-name { font-size: var(--robbo-fs-lg); font-weight: 800; line-height: 1.3; }

/* The kart drawing */
.rc-sm-kart { display: block; max-width: 100%; height: auto; }
.rc-sm-kart .rc-sm-kart-hub { fill: #c9cdd2; stroke: #8b9097; stroke-width: 1.5; }
.rc-sm-kart .rc-sm-kart-stud { fill: var(--sm-gelb); }
.rc-sm-kart .rc-sm-kart-body { fill: var(--kb, var(--sm-rot)); }
.rc-sm-kart .rc-sm-kart-seat { fill: var(--ks, var(--sm-rot-dark)); }
.rc-sm-kart .rc-sm-kart-chassis { fill: var(--sm-blau); }
.rc-sm-kart .rc-sm-kart-wheel { fill: #1f2328; }
.rc-sm-kart .rc-sm-kart-rim { fill: #b9bec5; }
.rc-sm-kart--gruen { --kb: var(--sm-gruen); --ks: #2c7a30; }
.rc-sm-kart--rosa  { --kb: var(--sm-rosa); --ks: #c75b88; }
.rc-sm-kart--blau  { --kb: var(--sm-blau); --ks: var(--sm-blau-dark); }

/* Grand Prix game */
.rc-sm-gp { background: var(--robbo-white); }
.rc-sm-game { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.rc-sm-game[hidden] { display: none !important; }
.rc-sm-game-panel { background: var(--sm-himmel); border-radius: 20px; padding: 20px; min-width: 0; }
.rc-sm-game-hint { font-size: var(--robbo-fs-md); line-height: 1.5; margin: 0 0 14px; }
.rc-sm-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.rc-sm-ctrl-label { width: 64px; flex: 0 0 64px; font-size: var(--robbo-fs-badge); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--robbo-grey); }
.rc-sm-chip {
    font-family: inherit; font-size: var(--robbo-fs-md); font-weight: 700; line-height: 1.2;
    min-height: 44px; padding: 10px 14px; border-radius: 10px; cursor: pointer;
    background: var(--robbo-white); color: var(--robbo-coal);
    border: 2px solid var(--chip, #4f7fe0);
    transition: background .15s ease, color .15s ease, transform .1s ease;
}
.rc-sm-chip:hover { transform: translateY(-1px); }
.rc-sm-chip:focus-visible { outline: 3px solid var(--sm-gelb); outline-offset: 2px; }
.rc-sm-chip[aria-pressed="true"] { background: var(--chip, #4f7fe0); color: var(--robbo-white); }
.rc-sm-chip--motor { --chip: #3f6fd8; }
.rc-sm-chip--ctrl  { --chip: #e0731f; }
.rc-sm-chip--event { --chip: #c79a00; }
.rc-sm-chip--event[aria-pressed="true"] { color: #2d2300; background: var(--sm-gelb); border-color: var(--sm-gelb-dark); }
.rc-sm-chip:disabled { opacity: .55; cursor: default; transform: none; }

.rc-sm-code { list-style: none; margin: 14px 0 0; padding: 12px; background: var(--robbo-white); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; counter-reset: rc-sm; }
.rc-sm-code li { margin: 0; padding: 8px 12px; border-radius: 8px; font-size: var(--robbo-fs-md); font-weight: 700; border-left: 6px solid; }
.rc-sm-code .is-motor { background: #e4ecff; border-color: #3f6fd8; }
.rc-sm-code .is-ctrl  { background: #ffe9da; border-color: #e0731f; }
.rc-sm-code .is-event { background: var(--sm-gelb-soft); border-color: var(--sm-gelb-dark); }
.rc-sm-code .is-empty { background: var(--robbo-grey-light); border-color: var(--robbo-grey); color: var(--robbo-grey); }

.rc-sm-track-wrap { min-width: 0; }
.rc-sm-track {
    position: relative; height: 150px; border-radius: 18px; overflow: hidden;
    background:
        linear-gradient(180deg, transparent 0 46%, rgba(255, 255, 255, .85) 46% 49%, transparent 49%) 0 0 / 34px 100% repeat-x,
        linear-gradient(180deg, var(--sm-gruen) 0 14%, var(--sm-asphalt) 14% 86%, var(--sm-gruen) 86% 100%);
}
.rc-sm-track-start { position: absolute; left: 0; top: 14%; bottom: 14%; width: 14px; background: repeating-conic-gradient(var(--robbo-white) 0 25%, #1f2328 0 50%) 0 0 / 14px 14px; }
.rc-sm-wall {
    position: absolute; left: 80%; top: 14%; bottom: 14%; width: 9%;
    background:
        linear-gradient(90deg, transparent 0 48%, var(--sm-ziegel-dark) 48% 52%, transparent 52%) 0 0 / 100% 26px,
        linear-gradient(180deg, transparent 0 85%, var(--sm-ziegel-dark) 85% 100%) 0 0 / 100% 13px,
        var(--sm-ziegel);
    border-radius: 4px;
    box-shadow: inset 0 0 0 2px var(--sm-ziegel-dark);
}
.rc-sm-coin {
    position: absolute; top: 24%; width: 20px; height: 20px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff2a8 0 18%, var(--sm-gelb) 19% 70%, var(--sm-gelb-dark) 71% 100%);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
    transition: opacity .25s ease, transform .25s ease;
}
.rc-sm-coin--a { left: 30%; }
.rc-sm-coin--b { left: 56%; }
.rc-sm-coin.is-taken { opacity: 0; transform: translateY(-14px) scale(1.3); }
.rc-sm-runner { position: absolute; left: 18px; bottom: 24%; width: 84px; line-height: 0; transition-property: left; transition-timing-function: cubic-bezier(.35, .05, .45, 1); }
.rc-sm-runner .rc-sm-kart { width: 100%; height: auto; }
.rc-sm-runner.is-bump { animation: rc-sm-bump .45s ease-out 1; }
@keyframes rc-sm-bump { 0% { transform: translateX(0) rotate(0); } 30% { transform: translateX(-10px) rotate(-6deg); } 60% { transform: translateX(-4px) rotate(3deg); } 100% { transform: translateX(-8px) rotate(0); } }
.rc-sm-count {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: 'ProximaNova', sans-serif; font-weight: 800; font-size: 56px; color: var(--robbo-white);
    text-shadow: 0 3px 0 rgba(0, 0, 0, .35); pointer-events: none;
}
.rc-sm-count:empty { display: none; }
.rc-sm-track-legend { display: flex; justify-content: space-between; font-size: var(--robbo-fs-badge); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--robbo-grey); margin: 6px 4px 0; }
.rc-sm-track-legend span:last-child { margin-right: 6%; }
.rc-sm-game-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.rc-sm-btn {
    font-family: inherit; font-size: var(--robbo-fs-base); font-weight: 800; min-height: 48px; padding: 12px 22px;
    border-radius: 999px; border: 0; cursor: pointer; color: var(--robbo-white); background: var(--sm-rot);
    box-shadow: 0 4px 0 var(--sm-rot-dark); transition: transform .1s ease, box-shadow .1s ease;
}
.rc-sm-btn:hover { transform: translateY(-1px); }
.rc-sm-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sm-rot-dark); }
.rc-sm-btn:focus-visible { outline: 3px solid var(--sm-gelb); outline-offset: 2px; }
.rc-sm-btn:disabled { opacity: .55; cursor: default; transform: none; }
.rc-sm-btn--ghost { color: var(--robbo-coal); background: var(--robbo-white); border: 2px solid var(--robbo-line); box-shadow: none; }
.rc-sm-btn--ghost:active { box-shadow: none; }
.rc-sm-result { font-size: var(--robbo-fs-lg); font-weight: 700; line-height: 1.5; margin: 14px 0 0; min-height: 27px; }
.rc-sm-result.is-good { color: #1f7a2a; }
.rc-sm-result.is-bad { color: var(--sm-rot-dark); }

/* So programmiert */
.rc-sm-prog { background: var(--sm-gelb-soft); }
.rc-sm-progs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rc-sm-progcard { background: var(--robbo-white); border: 1px solid #f1df8f; border-radius: 18px; padding: 18px; min-width: 0; }
.rc-sm-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-sm-b { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: var(--robbo-fs-md); font-weight: 700; line-height: 1.35; border-left: 6px solid; }
.rc-sm-b--motor { background: #e4ecff; border-color: #3f6fd8; }
.rc-sm-b--ctrl  { background: #ffe9da; border-color: #e0731f; }
.rc-sm-b--event { background: #fff2b8; border-color: var(--sm-gelb-dark); }

.rc-sm-legal { max-width: 1180px; margin: 0 auto; padding: 18px 24px 32px; box-sizing: border-box; font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif; font-size: var(--robbo-fs-legal); line-height: 1.5; color: var(--robbo-grey); text-align: center; }

@media (max-width: 1023px) {
    .rc-sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rc-sm-game { grid-template-columns: minmax(0, 1fr); }
    .rc-sm-progs { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin: 0 auto; }
}
@media (max-width: 719px) {
    .rc-sm { padding: 40px 0; }
    .rc-sm-wrap { padding: 0 16px; }
    .rc-sm-h2 { font-size: 26px; }
    .rc-sm-lead { font-size: var(--robbo-fs-base); }
    .rc-sm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 32px; }
    .rc-sm-grid { gap: 10px; }
    .rc-sm-kartcard { padding: 16px 10px 14px; }
    .rc-sm-kartcard-name { font-size: var(--robbo-fs-md); }
    .rc-sm-ctrl-label { width: 100%; flex-basis: 100%; }
    .rc-sm-track { height: 128px; }
    .rc-sm-runner { width: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    .rc-sm *, .rc-sm-runner { animation: none !important; transition: none !important; }
}