/* STELLA TEST 2026 */
:root{--wine:#4a0e1e;--wine2:#781d38;--gold:#e4bd58;--cream:#fff9eb;--ink:#25151a}*{box-sizing:border-box}html{scroll-behavior:smooth}

body{
    margin:0;
    font-family:Inter,Segoe UI,sans-serif;
    color:var(--cream);
    min-height:100vh;

    background:
        linear-gradient(
            rgba(255,250,243,.45),
            rgba(255,250,243,.45)
        ),
        url("../assets/gallery/lehrer.webp");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

button,select,input{font:inherit}.topbar{max-width:1280px;margin:auto;padding:clamp(14px,2vw,26px);display:flex;justify-content:space-between;align-items:center;gap:16px}

.brand,
.brand{
    color:var(--wine);
    text-decoration:none;
    font-weight:800;
}

.back{
    color:white;
    text-decoration:none;
    font-weight:800;
}
    
    .brand{font-size:clamp(18px,2vw,25px)}
    .brand span{color:var(--gold)}
    .top-actions{display:flex;align-items:end;gap:14px}
    .language-label{display:grid;gap:4px;font-size:12px;font-weight:800;color:#f6d985}
    .language-label select,.back{border:1px solid #e5c76c;border-radius:12px;background:#3a0d1a;color:white;padding:10px 13px}main{width:min(1180px,calc(100% - 28px));margin:auto;padding-bottom:70px}.hero{text-align:center;padding:clamp(35px,7vw,85px) 10px 35px}.eyebrow{letter-spacing:.28em;color:#b58a28;font-weight:900}
.hero h1{
    font-family:Georgia,serif;
    font-size:clamp(42px,7vw,82px);
    margin:8px;
    color:var(--wine);
}    .hero>p:last-child{
    font-size:clamp(17px,2vw,23px);
    color:#5e5249;}
    
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}
    
.steps div{
    background:#fff1d4;
    border:1px solid #e6d0a0;
    color:var(--wine);
    border-radius:16px;
    padding:15px;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    box-shadow:0 8px 24px rgba(74,14,30,.08);
    backdrop-filter:blur(6px);
}

    .steps b{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--gold);
    color:var(--wine);
    font-weight:900;
}

    .game-card{background:var(--cream);color:var(--ink);border-radius:clamp(20px,3vw,38px);overflow:hidden;box-shadow:0 30px 80px #16050a99;border:1px solid #f4d982}
    .game-intro{display:grid;grid-template-columns:minmax(260px,38%) 1fr;align-items:center;background:#fff1d4}
    .game-intro img{width:100%;height:100%;min-height:240px;object-fit:cover}.game-intro>div{padding:clamp(24px,5vw,60px)}
    .game-intro h2{font-family:Georgia,serif;color:var(--wine);font-size:clamp(35px,5vw,62px);margin:10px 0}.game-intro p{font-size:18px;line-height:1.6}
    .tag{color:var(--wine2);font-weight:900;letter-spacing:.12em;text-transform:uppercase}form{padding:clamp(18px,4vw,45px);display:grid;gap:18px}
    .panel{border:1px solid #decda8;background:white;border-radius:22px;padding:clamp(18px,3vw,30px)}
    .panel h3{margin:0 0 18px;color:var(--wine);font-size:22px}
    .panel h3>span:first-child{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--wine);color:var(--gold);margin-right:8px}
    .grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:14px}
    label{font-weight:800;display:grid;gap:7px}
    select,input{width:100%;min-height:48px;border:1px solid #cdbd9a;border-radius:12px;padding:10px;background:#fffdf7;color:var(--ink)}
    .drop-zone{border:2px dashed #b98d28;background:#fff8e8;border-radius:18px;padding:28px;text-align:center;cursor:pointer;display:grid;gap:8px}
    .drop-zone.drag{background:#f8e7b9}
    .player-list{display:grid;gap:9px;margin-top:14px}
    .player-row{display:grid;grid-template-columns:42px 1fr 42px 42px 42px;gap:7px;align-items:center}
    .player-row .number{font-weight:900;color:var(--wine);text-align:center}
    .player-row button,.small-button{border:1px solid #c9a449;background:#fff8e4;color:var(--wine);border-radius:10px;min-height:40px;cursor:pointer;font-weight:900}.small-button{padding:9px 15px;margin-top:12px}.status{color:#6c4b10;font-weight:700}.launch-row{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#2f0b16;color:white;border-radius:22px;padding:20px 25px}.launch{border:0;border-radius:15px;padding:16px 30px;background:linear-gradient(135deg,#c99925,#f2d87e);color:#3b0c18;font-weight:950;font-size:19px;cursor:pointer;white-space:nowrap}.future{margin-top:22px;border:1px dashed #d6b858;border-radius:22px;padding:25px;display:flex;gap:20px;align-items:center;color:#f8eacf}.future>span{font-size:45px;color:var(--gold)}.future h2,.future p{margin:4px}.future h2{font-family:Georgia,serif}@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}.game-intro{grid-template-columns:1fr}.game-intro img{max-height:260px}.grid{grid-template-columns:1fr 1fr}.topbar{align-items:flex-start}.top-actions{flex-wrap:wrap;justify-content:flex-end}.back{font-size:0}.back:after{content:"✕";font-size:18px}}@media(max-width:520px){main{width:min(100% - 16px,1180px)}.steps,.grid{grid-template-columns:1fr}
    .steps div{padding:10px}
    .launch-row{align-items:stretch;flex-direction:column}
    .launch{width:100%}.player-row{grid-template-columns:32px 1fr 38px 38px 38px}
    .language-label span{display:none}}
.fullscreen-option{display:flex;align-items:center;gap:14px;border:1px solid #decda8;background:#fff8e7;border-radius:18px;padding:16px 20px;cursor:pointer;color:#2b1d20}
.fullscreen-option input{width:24px;height:24px;min-height:0;accent-color:#71172f;flex:0 0 auto}
.fullscreen-option span{display:grid;gap:3px}.fullscreen-option strong{color:#64182d}.fullscreen-option small{font-weight:600;color:#705e55}

.demo-launch{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #9ab8d7;background:linear-gradient(135deg,#eef7ff,#e5f1fb);border-radius:18px;padding:17px 20px;color:#17283d}
.demo-launch>div{display:grid;gap:4px}.demo-launch strong{font-size:18px;color:#17385d}.demo-launch small{font-weight:600;color:#526b83}
.demo-launch button{border:0;border-radius:13px;background:linear-gradient(135deg,#245c91,#347eb6);color:white;padding:13px 19px;font-weight:900;cursor:pointer;white-space:nowrap}
@media(max-width:650px){.demo-launch{align-items:stretch;flex-direction:column}.demo-launch button{width:100%}}

.demo-tour-guide{position:fixed;z-index:1000;right:clamp(12px,3vw,34px);bottom:clamp(12px,3vw,30px);width:min(390px,calc(100% - 24px));border:1px solid #f0cf70;border-radius:18px;background:rgba(34,18,25,.96);color:white;padding:15px 18px;box-shadow:0 18px 55px #0008;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;pointer-events:none}
.demo-tour-guide b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e0b84e;color:#4a0e1e;font-size:18px}.demo-tour-guide span{font-weight:800;line-height:1.4}
.demo-tour-focus{position:relative;z-index:20;outline:4px solid #f0c95e!important;outline-offset:5px;box-shadow:0 0 0 10px rgba(240,201,94,.18),0 15px 45px #0005!important;transition:.35s}
body.demo-tour-running:before{content:"DEMO / TEST MODE";position:fixed;z-index:999;left:50%;top:8px;transform:translateX(-50%);background:#4a0e1eee;color:#ffe6a3;border:1px solid #e0b84e;border-radius:99px;padding:7px 14px;font-size:12px;font-weight:950;letter-spacing:.12em}
select.demo-tour-open{min-height:170px;background:#fffaf0;color:#281b1d}
.hero-logo{
    width:190px;
    height:190px;
    object-fit:contain;
    margin-bottom:1rem;
    filter:drop-shadow(0 .4rem .8rem rgba(0,0,0,.35));
}
.footer-credit{
    text-align:center;
    font-size:.72rem;
    color:#8d8d8d;
    opacity:.75;
    margin:1.2rem 0 .8rem;
    user-select:none;
}