:root { color-scheme: light; font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif; background: #5fc5eb; color: #24506a; }
* { box-sizing: border-box; }
html, body, #app, #game-shell, #game { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: linear-gradient(#b5e7f9, #5fc5eb 60%, #45b3de); }
.card { width: min(340px, calc(100% - 32px)); margin: 16vh auto 0; padding: 24px; border-radius: 14px; background: #fff; box-shadow: 0 6px 0 rgba(21,86,115,.15); }
.card h1 { margin: 0 0 14px; font-size: 26px; text-align: center; color: #ee8022; }
label { display: grid; gap: 5px; margin: 12px 0; font-weight: bold; font-size: 14px; }
input { border: 2px solid #9ed4ea; border-radius: 8px; padding: 10px 12px; font: inherit; outline: none; background: #f4fbfe; }
input:focus { border-color: #45b3de; background: #fff; }
button { width: 100%; margin-top: 6px; border: 0; border-radius: 10px; padding: 12px; background: #f68b1f; color: #fff; font: bold 16px/1 inherit; cursor: pointer; box-shadow: 0 4px 0 #cf6a0d; }
button:hover { background: #fd9836; }
button:active { transform: translateY(2px); box-shadow: 0 2px 0 #cf6a0d; }
button:disabled { opacity: .6; cursor: wait; }
.error { min-height: 1.2em; margin: 12px 0 0; color: #c43c2f; font-size: 14px; text-align: center; }
.note { margin: 14px 0 0; color: #7f9fb0; font-size: 12px; text-align: center; }
.note a { color: #3f97c4; }
#hosted-note { margin-top: 16px; padding: 9px 11px; border-radius: 9px; background: #eaf6fc; color: #4a7f88; }
#loading { position: fixed; inset: auto 24px 44px auto; padding: 10px 15px; border-radius: 20px; background: #15384dcc; color: white; font-weight: bold; }
.warn { margin: 14px 0 0; padding: 10px 12px; border-radius: 9px; background: #fff4e0; color: #7a5320; font-size: 12px; line-height: 1.4; text-align: left; }
.warn p { margin: 7px 0 0; }
.warn code { padding: 1px 4px; border-radius: 4px; background: #f0e0c4; font-size: 11px; }
#exit { position: fixed; z-index: 21; right: 7px; bottom: 7px; width: auto; margin: 0; padding: 3px 9px; border-radius: 6px; background: #15384d73; color: #eaf6fc; box-shadow: none; font-family: inherit; font-size: 11px; font-weight: normal; line-height: 1.4; opacity: .5; }
#exit:hover { background: #15384dd9; opacity: 1; }
#exit:active { transform: none; box-shadow: none; }
/* The player is sized to the exact 815x495 stage of base.swf by fitPlayerToStage()
   in app.js, so Ruffle never has a letterbox area of its own (it paints those
   bars black inside its canvas) and the page gradient shows around the game.
   These values are only the pre-script fallback. */
#game { display: grid; place-items: center; }
ruffle-player { display: block; width: 100%; height: 100%; }
#debug-state { position: fixed; z-index: 20; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 7px 10px; border-radius: 7px; background: #061b25d9; color: #9ff0a8; font: 12px/1.35 Consolas, monospace; overflow-wrap: anywhere; pointer-events: none; }