/* Georges 留声机整屏页面(2026-10-16):仿 SPARICA 的窗口,顶上一条标题栏,只留关闭按钮;下面整块是播放器 */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; }
body {
    color: #e2e0f0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
button { font: inherit; }

.spool-window { position: fixed; inset: 0; display: flex; flex-direction: column; }

.spool-titlebar {
    flex: none;
    display: flex; align-items: center; justify-content: space-between;
    min-height: calc(34px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 4px 0 12px;
    background: linear-gradient(180deg, #3c3c3c 0%, #2b2b2b 100%);
    border-bottom: 1px solid #111;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    user-select: none; -webkit-user-select: none;
}
.spool-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; letter-spacing: .06em; color: #e6e6e6; }
.spool-title svg { width: 16px; height: 16px; flex: none; }

/* 关闭:看上去是 22px 的小圆钮,可点区域 40×34(手机好按) */
.spool-close {
    width: 40px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.spool-close span {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.16);
    background: radial-gradient(circle at 40% 35%, #5b5b5b, #2c2c2c);
    color: #ddd; font-size: 15px; line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}
.spool-close:hover span, .spool-close:focus-visible span { background: #b8392b; color: #fff; border-color: #d0574a; }
.spool-close:focus { outline: none; }

.spool-window-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.spool-window-body > .reel-app { width: 100%; height: 100%; }