html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: #102f2c;
    color: white;
}

html,
body,
canvas {
    touch-action: none;
    touch-action-delay: none;
}

#notSupportedWrap {
    margin: 2em auto 1em auto;
    width: 75%;
    max-width: 45em;
    border: 2px solid #aaa;
    border-radius: 1em;
    padding: 2em;
    background-color: #f0f0f0;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    color: black;
}

#notSupportedTitle {
    font-size: 1.8em;
}

.notSupportedMessage {
    font-size: 1.2em;
}

.notSupportedMessage em {
    color: #888;
}

/* bbcode styles */

.bbCodeH1 {
    font-size: 2em;
    font-weight: bold;
}

.bbCodeH2 {
    font-size: 1.5em;
    font-weight: bold;
}

.bbCodeH3 {
    font-size: 1.25em;
    font-weight: bold;
}

.bbCodeH4 {
    font-size: 1.1em;
    font-weight: bold;
}

.bbCodeItem::before {
    content: " • ";
}

/* screen reader text */
#gamify-loading{position:fixed;inset:0;z-index:100;background:#102f2c;display:grid;place-items:center;color:#fff2ce;font-family:Arial,sans-serif;padding:24px;text-align:center}
#gamify-loading[hidden]{display:none}
.loading-card{width:min(320px,100%)}
.loading-card small{letter-spacing:5px;color:#9cdbce}
#gamify-controls{position:fixed;z-index:20;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:12px;padding:7px 12px;border-radius:20px;background:#102c28e8;touch-action:none}
#gamify-controls[hidden]{display:none}
#gamify-audio{position:fixed;z-index:25;left:max(6px,env(safe-area-inset-left));top:max(4px,env(safe-area-inset-top));display:flex;gap:4px}
#gamify-audio button{min-height:32px;padding:5px 8px;background:#102c28ed;color:#fff0c8;border:1px solid #d8bc77;border-radius:9px;font:600 11px Arial,sans-serif}
#gamify-audio button:focus-visible{outline:2px solid white;outline-offset:2px}
#gamify-audio[hidden]{display:none}
#gamify-menu #gamify-audio{pointer-events:auto;position:absolute;left:3%;top:calc(2% + 54px);max-width:90%;flex-wrap:wrap;padding:10px;background:#123a30;border:1px solid #bea66b;border-radius:14px;box-shadow:0 8px 24px #0006;z-index:3}
#gamify-menu #gamify-audio button{min-height:44px;font-size:12px}
#menu-settings{pointer-events:auto;position:absolute;left:3%;top:2%;width:44px;height:44px;border:1px solid #d8bc77;border-radius:13px;background:#153f34;color:#fff1d0;font-size:24px;cursor:pointer}
#menu-best,#live-score{box-sizing:border-box;pointer-events:none;text-align:center;background:#12362feF;border:1px solid #8caa81;border-radius:13px;padding:6px 8px;color:#fff2d0;font-family:Arial,sans-serif;font-variant-numeric:tabular-nums}
#menu-best{position:absolute;left:28%;top:2%;width:44%}#live-score{position:fixed;z-index:21}#live-score[hidden]{display:none}
#menu-best small,#live-score small{display:block;font-size:9px;font-weight:700;letter-spacing:1px;color:#b9d6be}#menu-best strong,#live-score strong{display:block;font-size:clamp(19px,4.5vw,26px);line-height:1.15;letter-spacing:0;margin-top:3px}
@media(max-width:420px){#portal-back{padding:10px 8px;font-size:12px}#menu-best{left:24%;width:44%}}
#gamify-menu{position:fixed;z-index:22;pointer-events:none}#gamify-menu[hidden]{display:none}
#portal-back{pointer-events:auto;position:absolute;right:3%;top:2%;display:flex;align-items:center;gap:6px;padding:10px 12px;min-height:24px;border:1px solid #e6c278;border-radius:13px;background:#153f34;color:#fff1d0;font:700 14px Arial;text-decoration:none}
#portal-play{pointer-events:auto;position:absolute;left:16%;top:85%;width:68%;height:11%;border-radius:18px;border:2px solid #ffdf85;background:linear-gradient(#efcd79,#c89738);box-shadow:0 5px 0 #755524,0 10px 22px #0007;color:#163a2b;font:800 clamp(20px,5vw,32px) Arial;cursor:pointer}#portal-play[hidden]{display:none}#portal-play:active{transform:translateY(2px)}#portal-play:focus-visible,#portal-back:focus-visible{outline:3px solid white;outline-offset:3px}
#portal-help{pointer-events:auto;position:absolute;left:23%;top:77%;width:54%;height:7%;min-height:36px;border:1px solid #b6d3ae;border-radius:12px;background:#163d32f5;color:#fff0d0;font:700 clamp(13px,3vw,18px) Arial;cursor:pointer}#portal-help[hidden]{display:none}
#game-dialog{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;background:#081e19ed;overflow:auto;color:#fff0d0;font-family:Arial,sans-serif}#game-dialog[hidden]{display:none}
.game-dialog-card{box-sizing:border-box;width:min(390px,100%);padding:28px;border:1px solid #bfa567;border-radius:26px;background:linear-gradient(150deg,#244f3d,#102f28);box-shadow:0 24px 70px #0006}.dialog-eyebrow{font-size:11px;letter-spacing:3px;color:#c5d9b5}.game-dialog-card h2{font-size:28px;line-height:1.2;margin:12px 0 24px}.dialog-note{font-size:14px;line-height:1.6;color:#c5d8ca}.help-moves{display:grid;gap:12px}.help-moves>div{display:flex;gap:14px;align-items:center;padding:12px;background:#ffffff08;border-radius:14px}.help-moves b{display:grid;place-items:center;min-width:52px;height:48px;border:1px solid #d6b876;border-radius:12px;font-size:23px;color:#f0ce82}.help-moves span{font-size:13px;line-height:1.5;color:#c9dbcf}.help-moves strong{display:block;font-size:16px;color:#fff1d0}.dialog-actions{display:grid;gap:12px;margin-top:24px}.dialog-actions button{min-height:52px;border:1px solid #bdcfa9;border-radius:14px;background:#204c3e;color:#f6edce;font:700 17px Arial;cursor:pointer}.dialog-actions .primary{background:linear-gradient(#f0d184,#d4a64c);color:#15362b;border-color:#ffe3a1;box-shadow:0 3px 0 #81612b}.dialog-actions button:focus-visible,#portal-help:focus-visible{outline:3px solid white;outline-offset:3px}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.result-stats>div{padding:16px 10px;background:#0b271e;border-radius:14px;text-align:center}.result-stats small{font-size:10px;letter-spacing:1px;display:block;color:#b8ccb7}.result-stats strong{display:block;font-size:30px;margin-top:8px;color:#f0d184}
@media(max-height:520px){.game-dialog-card{padding:16px;width:min(560px,100%)}.game-dialog-card h2{margin:6px 0 12px;font-size:22px}.help-moves{grid-template-columns:repeat(3,1fr);gap:6px}.help-moves>div{flex-direction:column;padding:8px;gap:6px}.dialog-actions{margin-top:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
#gamify-training{position:fixed;inset:0;z-index:110;display:grid;place-items:center;background:#081c18ec;color:#fff0ce;font-family:Arial,sans-serif;padding:16px;touch-action:none;overflow:auto}
#gamify-training[hidden]{display:none}
.training-card{width:min(360px,100%);box-sizing:border-box;padding:22px;border:1px solid #bca365;border-radius:24px;background:#163d32;text-align:center;box-shadow:0 20px 80px #0007}
.training-card small{font-size:11px;letter-spacing:2px;color:#a5d7b9}.training-card h2{font-size:23px;margin:12px 0}.training-card p{font-size:14px;line-height:1.5;min-height:42px}
.training-card button{min-height:44px;border:1px solid #e5c273;border-radius:12px;background:#25563f;color:#fff0ce;font:700 15px Arial;padding:10px 16px;margin:4px;cursor:pointer}.training-card button:disabled{opacity:.4}.training-card button:focus-visible{outline:3px solid #fff;outline-offset:2px}.training-card button[hidden]{display:none}
.training-buttons button{font-size:26px;min-width:58px}#training-skip{background:transparent;border-color:transparent;font-weight:400}#training-feedback{color:#b3e2bd;font-size:12px}
#training-demo{position:relative;height:110px;border-bottom:4px solid #aa8051;background:#102e26;border-radius:14px;overflow:hidden}#training-demo b{position:absolute;top:12px;left:45%;font-size:30px;color:#f5d477}.training-rider{position:absolute;bottom:5px;left:24%;font-size:32px;color:#87d1c0}.training-hazard{position:absolute;bottom:0;left:60%;width:38px;height:72px;border-radius:7px;background:linear-gradient(90deg,#896c43,#bea074,#6c583e);border:2px solid #d0b47e}#training-demo.jump .training-hazard{height:24px}#training-demo.slide .training-hazard{bottom:45px;height:25px;width:75px;left:52%}.steer.animate .training-rider{animation:practice-steer .8s}.jump.animate .training-rider{animation:practice-jump .8s}.slide.animate .training-rider{animation:practice-slide .8s}
@keyframes practice-steer{50%{transform:translateX(-35px)}}@keyframes practice-jump{50%{transform:translate(45px,-55px)}100%{transform:translateX(120px)}}@keyframes practice-slide{50%{transform:translateX(65px) scaleY(.45)}100%{transform:translateX(120px)}}
@media(prefers-reduced-motion:reduce){#training-demo .training-rider{animation:none!important}}
@media(max-height:540px){.training-card{padding:10px;width:min(550px,100%)}#training-demo{height:70px}.training-card h2{font-size:19px;margin:6px}.training-card p{margin:6px;min-height:0}}
#gamify-controls button{width:54px;min-height:54px;border:1px solid #d8bc77;border-radius:14px;background:#18483c;color:#fff0c8;font:700 29px/1 system-ui;touch-action:none;user-select:none}
#gamify-controls button small{display:block;font:700 9px/1.5 system-ui;letter-spacing:.5px}
#gamify-controls button:active{background:#39715b;transform:translateY(1px)}
#gamify-controls button:focus-visible{outline:3px solid #fff3ca;outline-offset:3px}
@media (orientation:landscape) and (max-height:500px) and (min-aspect-ratio:7/5){
 #gamify-controls{left:auto;right:max(10px,env(safe-area-inset-right));transform:none;display:grid;grid-template-columns:repeat(2,54px);gap:8px;padding:8px}
}
.loading-card h1{font:700 36px Georgia,serif;margin:18px 0}
.loading-card p{font-size:14px;line-height:1.6;color:#c0d8cc}
#loading-bar{width:100%;height:14px;accent-color:#e6b958;border:0;border-radius:20px;overflow:hidden;background:#284943}
#loading-bar::-webkit-progress-bar{background:#284943;border-radius:20px}
#loading-bar::-webkit-progress-value{background:linear-gradient(90deg,#73caba,#e6b958);border-radius:20px}
#loading-bar::-moz-progress-bar{background:#e6b958}

.c3-screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}