:root{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#f2f3e9;background:#171918;color-scheme:dark}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:16px;min-height:48px;flex-shrink:0;padding:0 16px;background:#171918;border-bottom:1px solid #3a403c}
a{color:#ffc39e;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:6px}.title{font-size:15px}
#sync{margin-left:auto;min-width:0;font-size:12px;color:#ccd3c7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button{font:inherit;font-weight:600;border:0;border-radius:22px;padding:8px 16px;background:#ff936c;color:#241a16;cursor:pointer;min-height:44px;flex:none}button.quiet{background:transparent;color:#ffc39e;padding:8px 6px}
#account{font-size:13px;font-weight:600;max-width:28vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;line-height:44px;flex:none}
a:focus-visible,button:focus-visible{outline:3px solid #d8ffae;outline-offset:2px}
#supporter-notice{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:8px 16px;background:#363629;border-bottom:1px solid #666549;color:#eee9c2;font-size:12px;line-height:1.4}
#supporter-state{flex:1;min-width:0}#retry-supporter{flex-shrink:0;font-size:12px}#retry-supporter:disabled{opacity:.6;cursor:wait}
#game-frame{position:relative;flex:1;min-height:0;width:100%;overflow:hidden}
#ComposeTarget{position:absolute;inset:0;overflow:hidden;background:#eef6fb}
#gate{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:#eef6fb;color:#13243a}
#gate h1{margin:0;font-size:24px}#gate p{margin:0;max-width:460px;line-height:1.6;color:#4b5e72}#gate button{margin-top:8px;background:#1450d2;color:#fff}
.spinner{width:34px;height:34px;border-radius:50%;border:4px solid #dce8ff;border-top-color:#1450d2;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
.narrow{display:none}[hidden]{display:none!important}
@media(max-width:600px){header{gap:10px;padding:0 12px}.title,.wide{display:none}.narrow{display:inline}#account{max-width:24vw}}