:root{font-family:Inter,system-ui,"Segoe UI",sans-serif;color:#542b25;background:#fff8ed}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}
.game{min-height:100vh;background:linear-gradient(180deg,#fff9f0,#f6ecd9)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fffdf8;padding:10px clamp(12px,3vw,40px);box-shadow:0 4px 20px #5d30291a}
.brandlink{display:flex;align-items:center;gap:12px;text-decoration:none;color:#981b22;font-size:21px;font-weight:900;white-space:nowrap}.brandlink img{height:76px;width:72px;object-fit:contain}.brandlink strong{color:#bd8b38}.brandlink small{display:block;letter-spacing:3px;font-size:10px;color:#735b52;font-weight:700}
.head-title{text-align:center}.head-title h1{font-size:clamp(21px,2.5vw,37px);margin:0;color:#981b22}.head-title p{font-size:15px;font-weight:800;color:#981b22;margin:5px 0 0}
.utility{border:2px solid #ead3a5;border-radius:15px;background:#fff9ec;color:#981b22;font-weight:800;padding:13px}
.game-layout{max-width:1800px;margin:auto;padding:18px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,420px);gap:18px}
.scene{position:relative;min-height:620px;overflow:hidden;isolation:isolate;border-radius:28px;background:linear-gradient(0deg,#314f36aa,#ffffff09 50%),url('/games/foal/school-building.jpg') center/cover no-repeat;box-shadow:0 10px 30px #6a4b2220}
.scene-message{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:max-content;max-width:92%;text-align:center;padding:15px 22px;border-radius:25px;background:#fffdf5ed;color:#981b22;font-weight:900;font-size:clamp(17px,2.2vw,28px);z-index:4;box-shadow:0 5px 18px #482b241a}
.foal-wrap{position:absolute;z-index:3;left:35%;bottom:3%;width:min(70%,570px);transform:translateX(-50%);transition:opacity .35s}.foal-wrap img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;filter:drop-shadow(0 12px 10px #253d243f);animation:breathe 2.8s ease-in-out infinite}
.scene-caption{position:absolute;bottom:14px;right:18px;z-index:4;background:#fffef0e0;color:#981b22;border-radius:12px;padding:9px 13px;font-size:12px;font-weight:900;letter-spacing:1px}
.scene[data-state="listen"] .foal-wrap img{animation:listen .4s ease-in-out infinite alternate}.scene[data-state="awake"] .foal-wrap img{animation:hop .5s ease-in-out infinite alternate}.scene[data-state="run"] .foal-wrap{animation:escape 2.4s ease-in-out infinite}
.controls{align-self:start;background:#fff;border-radius:28px;padding:clamp(18px,2.4vw,30px);box-shadow:0 10px 30px #6a4b2217}.status{display:flex;gap:10px;align-items:center;color:#7a675f;font-size:14px;font-weight:700}.status-dot{width:12px;height:12px;border-radius:50%;background:#c7bdb5}.status-dot.live{background:#41b95d;box-shadow:0 0 0 5px #41b95d22}
.controls h2{font-size:26px;margin:17px 0 8px;color:#981b22}.intro{color:#816e62;line-height:1.5}.meter-label,.slider-label{display:flex;justify-content:space-between;gap:10px;margin:18px 0 8px;font-weight:800}.meter{height:24px;background:#f0e7dc;border-radius:30px;position:relative;overflow:hidden}.meter-fill{height:100%;width:0;background:linear-gradient(90deg,#69c56b,#f6bf55,#d63c40);transition:width .12s}.threshold-mark{position:absolute;top:0;left:45%;height:100%;width:4px;background:#981b22}input[type=range]{width:100%;accent-color:#981b22}select{width:100%;padding:12px;border:1px solid #dec6a6;border-radius:13px;background:#fff}.timer{display:flex;align-items:center;gap:10px;background:#fff4e2;padding:14px;border-radius:15px;font-size:24px;font-weight:900;margin:18px 0}.timer-note{font-size:12px;color:#7b6959;margin-left:auto}.actions{display:flex;gap:9px}.actions button{border:0;border-radius:14px;padding:15px 12px;font-weight:900}.primary{flex:2;background:#981b22;color:white}.secondary{flex:1;background:#f1e6dc;color:#672f2f}.demo{width:100%;padding:13px;margin-top:10px;border:2px solid #dfbc75;border-radius:14px;background:#fff9ec;color:#981b22;font-weight:900}.notice{font-size:12px;line-height:1.5;color:#7d7066;min-height:35px}.notice.error{color:#b32a35}
.legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1800px;margin:auto;padding:0 18px 20px}.legend>div{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #f0dfc2;border-radius:17px;padding:9px 13px;color:#981b22;min-width:0}.legend img{height:65px;width:80px;object-fit:contain}.legend span{display:block;font-size:14px}.legend small{display:block;color:#816e62;font-size:12px;margin-top:3px}
@keyframes breathe{50%{transform:scale(1.018)}}@keyframes listen{to{transform:rotate(-2deg)}}@keyframes hop{to{transform:translateY(-16px) rotate(2deg)}}@keyframes escape{0%,12%{transform:translateX(0)}55%{transform:translateX(125%)}65%{opacity:0}78%{transform:translateX(-125%);opacity:0}100%{transform:translateX(0);opacity:1}}
@media(max-width:1100px){.game-layout{grid-template-columns:1fr}.scene{min-height:540px}.controls{width:100%}}@media(max-width:750px){.legend{grid-template-columns:repeat(2,minmax(0,1fr))}.head-title p{display:none}.brandlink span{display:none}.brandlink img{height:55px;width:50px}.utility{font-size:12px;padding:9px}.game-layout{padding:9px;gap:9px}.scene{min-height:440px}.foal-wrap{width:85%;left:43%;bottom:6%}.controls{border-radius:18px}.timer{flex-wrap:wrap}.timer-note{margin-left:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important}}
.scene, .scene[data-state="awake"], .scene.awake {
    background: url('/games/foal/garden-background.jpg') center center / cover no-repeat !important;
}
    /* Hide old decorative scenery so the garden remains visible */
    .scene .sun, .scene .cloud, .scene .hill, .scene .sky {
        display: none !important;
    }

/* PHONE PAIRING */

.phone-pairing {
    margin-top: 20px;
    padding: 20px;
    background: #fff8ed;
    border: 2px solid #ead7b6;
    border-radius: 18px;
}

.pairing-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

    .pairing-header > span {
        font-size: 30px;
    }

    .pairing-header h3 {
        margin: 0 0 5px;
        font-size: 18px;
        color: #702329;
    }

    .pairing-header p {
        margin: 0;
        font-size: 13px;
        color: #735e57;
    }

.pairing-content {
    margin-top: 18px;
    text-align: center;
}

    .pairing-content[hidden] {
        display: none;
    }

.qr-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    padding: 12px;
    background: white;
    border-radius: 14px;
}

    .qr-container canvas,
    .qr-container img {
        max-width: 100%;
        height: auto;
    }

.room-code {
    margin-top: 12px;
    font-size: 15px;
}

    .room-code strong {
        display: block;
        margin-top: 5px;
        font-size: 28px;
        letter-spacing: 5px;
        color: #981b22;
    }

.pairing-help {
    font-size: 13px;
    color: #735e57;
}

.pairing-status {
    padding: 12px;
    background: #f1e8d8;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
}