html, body { height:100%; }
body { touch-action:none; margin:0; border:0; padding:0; text-align:center; background:#000; overflow:hidden; }
#canvas { display:block; margin:0; color:#fff; width:100vw; height:100vh; height:100dvh; }
#canvas:focus { outline:none; }
.godot { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#e0e0e0;
    background:#3b3943; background-image:linear-gradient(to bottom,#403e48,#35333c);
    border:1px solid #45434e; box-shadow:0 0 1px 1px #2f2d35; }
#status { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; visibility:hidden; z-index:9999; pointer-events:none; }
#status-progress { width:366px; height:7px; background:#38363A; border:1px solid #444246; padding:1px; box-shadow:0 0 2px 1px #1B1C22; border-radius:2px; visibility:visible; }
@media (orientation:portrait) { #status-progress { width:61.8%; } }
#status-progress-inner { height:100%; width:0; box-sizing:border-box; transition:width .5s linear;
    background:#202020; border:1px solid #222223; box-shadow:0 0 1px 1px #27282E; border-radius:3px; }
#status-indeterminate { height:42px; visibility:visible; position:relative; }
#status-indeterminate > div { width:4.5px; height:0; border-style:solid; border-width:9px 3px 0 3px;
    border-color:#2b2b2b transparent transparent transparent; transform-origin:center 21px; position:absolute; }
#status-indeterminate > div:nth-child(1){transform:rotate( 22.5deg)} #status-indeterminate > div:nth-child(2){transform:rotate( 67.5deg)}
#status-indeterminate > div:nth-child(3){transform:rotate(112.5deg)} #status-indeterminate > div:nth-child(4){transform:rotate(157.5deg)}
#status-indeterminate > div:nth-child(5){transform:rotate(202.5deg)} #status-indeterminate > div:nth-child(6){transform:rotate(247.5deg)}
#status-indeterminate > div:nth-child(7){transform:rotate(292.5deg)} #status-indeterminate > div:nth-child(8){transform:rotate(337.5deg)}
#status-notice { margin:0 100px; line-height:1.3; visibility:visible; padding:4px 6px; }

/* Always-available restore button; shown when controls are hidden (no persistence used if prefs denied) */
#controls-restore { position:fixed; top:.5rem; right:.5rem; z-index:10000; display:none;
    padding:.4rem .6rem; font:600 14px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    border-radius:8px; border:0; cursor:pointer; background:#2a2a2a; color:#eee; box-shadow:0 2px 8px rgba(0,0,0,.35); }
#controls-restore:focus { outline:2px solid #6aa9ff; outline-offset:2px; }













/* Minimal extras to integrate with site chrome */
.game-shell { position: relative; }
#canvas { display:block; width:100%; height:auto; max-width: 100%; outline: none; }
#status { position:relative; margin-top: .75rem; min-height: 32px; }
#status[hidden] { display:none !important; }

/* Toolbar (Fullscreen + Controls restore) */
.game-toolbar {
    display:flex; gap:.5rem; align-items:center; justify-content:flex-end; margin:.5rem 0 0;
}
.game-toolbar .btn {
    --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .9rem;
}

/* Simple fullscreen class for the wrapper */
.game-shell.is-fullscreen,
.game-shell.is-fullscreen *:where(#canvas){
    width:100vw !important; height:100vh !important; max-width:unset !important; max-height:unset !important;
}
.game-shell.is-fullscreen { position:fixed; inset:0; z-index: 1050; background:#000; }
body:has(.game-shell.is-fullscreen) { overflow:hidden; }
#controls-restore { display:none; }

#status-progress {
    display: none;
}

#status-indeterminate {
    display: none;
}

#status-notice {
    display: none;
}