/* Game mode: retro-futuristic personal observatory, rendered by Three.js with DOM-readable controls. */
body.workbench-game-open { overflow:hidden; overscroll-behavior:none; background:#050a15; }
#workbench-app.is-game-mode { min-height:100dvh; height:100dvh; }
.game-fallback-notice { display:flex; align-items:center; justify-content:space-between; gap:18px; width:min(100% - 40px,1120px); margin:0 auto 34px; padding:17px 19px; border:1px solid rgba(180,68,90,.25); border-radius:16px; background:#fff7f8; color:#4a2530; box-shadow:0 14px 35px rgba(92,32,45,.08); }
.game-fallback-notice strong,.game-fallback-notice p { margin:0; }.game-fallback-notice strong { font-size:14px; }.game-fallback-notice p { margin-top:3px; color:#835564; font-size:12px; }.game-fallback-notice > div:last-child { display:flex; flex:0 0 auto; gap:8px; }.game-fallback-notice button { border:1px solid #e7b9c4; border-radius:9px; padding:8px 10px; background:#fff; color:#9a344b; font-size:12px; font-weight:700; }.game-fallback-notice button:last-child { border-color:#9bbde5; color:#0066cc; }
.display-mode-options { display:flex; flex-direction:column; gap:10px; padding:17px; border:1px solid #e4e7ed; border-radius:17px; background:linear-gradient(135deg,#f7faff,#f1f5fa); }.display-mode-options .form-section-title { margin:0; color:#1d1d1f; font-size:14px; font-weight:750; }.display-mode-option { position:relative; display:flex!important; flex-direction:row!important; align-items:center; gap:12px!important; padding:13px; border:1px solid #dfe5ee; border-radius:13px; background:#fff; color:#1d1d1f!important; cursor:pointer; transition:border .2s ease,box-shadow .2s ease,transform .2s ease; }.display-mode-option input { position:absolute; opacity:0; pointer-events:none; }.display-mode-option.selected { border-color:#5b9ee2; box-shadow:0 0 0 3px rgba(0,113,227,.1); transform:translateY(-1px); }.display-mode-option > span:last-child { display:flex; flex-direction:column; gap:3px; }.display-mode-option strong { font-size:13px; }.display-mode-option small { color:#74747a; font-size:11px; font-weight:400; line-height:1.35; }.display-mode-icon { display:grid; flex:0 0 auto; width:32px; height:32px; place-items:center; border-radius:10px; color:#1263bc; background:#e8f2ff; font-size:18px; }.game-mode-option .display-mode-icon { color:#fff; background:linear-gradient(135deg,#45d8ff,#746bff); box-shadow:0 0 16px rgba(59,196,255,.35); }
.game-workbench { --game-bg:#e9edf5; --game-surface:rgba(247,250,255,.76); --game-panel:rgba(252,253,255,.9); --game-ink:#15233b; --game-muted:#627188; --game-line:rgba(50,83,124,.18); --game-accent:#176bd5; --game-accent-soft:rgba(23,107,213,.13); --game-danger:#b8445a; position:relative; width:100%; height:100dvh; min-height:100dvh; overflow:hidden; isolation:isolate; color:var(--game-ink); font-family:"Avenir Next", "PingFang SC", "Hiragino Sans GB", sans-serif; background:var(--game-bg); }
.skin-tech .game-workbench { --game-bg:#030816; --game-surface:rgba(7,17,35,.7); --game-panel:rgba(8,20,42,.9); --game-ink:#edf8ff; --game-muted:#9db6c8; --game-line:rgba(104,220,255,.2); --game-accent:#5cdfff; --game-accent-soft:rgba(92,223,255,.13); --game-danger:#ff8fae; }
.game-workbench::before { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; opacity:.5; background:radial-gradient(circle at 50% 40%, transparent 0 32%, rgba(5,12,28,.2) 74%, rgba(2,5,15,.64) 100%); }
.game-workbench::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; opacity:.26; background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size:100% 5px; mix-blend-mode:soft-light; }
.game-stage { position:absolute; z-index:0; inset:0; touch-action:none; }
.game-canvas { display:block; width:100%; height:100%; outline:none; }
.game-camera-tools { position:absolute; z-index:12; right:clamp(16px,2.5vw,36px); top:50%; display:grid; gap:7px; transform:translateY(-50%); }
.game-camera-tools button { width:42px; height:42px; border:1px solid var(--game-line); border-radius:13px; background:var(--game-surface); color:var(--game-ink); font:500 23px "Avenir Next",sans-serif; backdrop-filter:blur(16px); cursor:pointer; transition:background .2s,border-color .2s; touch-action:manipulation; }
.game-camera-tools button:hover,.game-camera-tools button:focus-visible { background:var(--game-panel); border-color:var(--game-accent); outline:2px solid var(--game-accent-soft); }
.game-interaction-hint { position:absolute; z-index:9; bottom:100px; left:50%; width:max-content; max-width:90vw; margin:0; color:var(--game-muted); font-size:11px; letter-spacing:.06em; text-align:center; transform:translateX(-50%); pointer-events:none; }
.game-touch-hint { display:none; }
.game-detail-panel { overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--game-accent) transparent; }
@media (pointer:coarse) { .game-desktop-hint { display:none; } .game-touch-hint { display:inline; } }
@media (max-width:760px) { .game-camera-tools { top:112px; right:12px; transform:none; }.game-camera-tools button { width:35px; height:35px; font-size:20px; }.game-interaction-hint { bottom:82px; font-size:9px; }.game-workbench .game-detail-panel { max-height:43dvh; }.game-detail-panel ~ .game-interaction-hint { display:none; } }
.game-hud { position:absolute; z-index:10; top:clamp(16px,2.5vw,32px); right:clamp(16px,2.5vw,36px); left:clamp(16px,2.5vw,36px); display:flex; align-items:flex-start; justify-content:space-between; gap:18px; pointer-events:none; }
.game-identity,.game-hud-actions,.game-module-rail,.game-detail-panel,.game-loading { pointer-events:auto; }
.game-identity { display:flex; align-items:center; gap:11px; min-width:0; padding:10px 15px 10px 10px; border:1px solid var(--game-line); border-radius:18px; background:var(--game-surface); box-shadow:0 12px 35px rgba(5,16,38,.13); backdrop-filter:blur(16px); }
.game-identity-orb { display:grid; flex:0 0 auto; width:32px; height:32px; place-items:center; border-radius:11px; color:#fff; font-size:13px; font-weight:800; letter-spacing:.08em; background:linear-gradient(135deg,var(--game-accent),#7667ff); box-shadow:0 0 20px var(--game-accent-soft); }
.game-identity p,.game-identity strong,.game-identity small,.game-focus-label,.game-detail-head p,.game-detail-head h2,.game-detail-copy,.game-loading p { margin:0; }
.game-identity p,.game-focus-label { color:var(--game-muted); font-size:9px; font-weight:800; letter-spacing:.16em; }
.game-identity strong { display:block; overflow:hidden; max-width:28vw; color:var(--game-ink); font-size:13px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.game-identity small { display:block; overflow:hidden; max-width:28vw; margin-top:2px; color:var(--game-muted); font-size:10px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.game-hud-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.game-hud button,.game-module-rail button,.game-detail-panel button { border:1px solid var(--game-line); border-radius:12px; color:var(--game-ink); font:inherit; cursor:pointer; }
.game-hud button { min-height:40px; padding:0 13px; background:var(--game-surface); box-shadow:0 10px 28px rgba(5,16,38,.1); backdrop-filter:blur(16px); font-size:12px; font-weight:700; transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,background .25s; }
.game-hud button:hover,.game-hud button:focus-visible { border-color:var(--game-accent); background:var(--game-panel); transform:translateY(-2px); outline:none; }
.game-hud .game-manage { border-color:transparent; color:#fff; background:linear-gradient(135deg,var(--game-accent),#7667ff); }
.game-module-rail { position:absolute; z-index:10; bottom:clamp(18px,3vw,34px); left:50%; display:flex; max-width:calc(100vw - 32px); gap:7px; overflow:auto; padding:8px; border:1px solid var(--game-line); border-radius:18px; background:var(--game-surface); box-shadow:0 16px 40px rgba(5,16,38,.16); backdrop-filter:blur(17px); transform:translateX(-50%); scrollbar-width:none; }
.game-module-rail::-webkit-scrollbar { display:none; }
.game-module-rail button { flex:0 0 auto; min-height:36px; padding:0 11px; background:transparent; color:var(--game-muted); font-size:11px; font-weight:700; transition:background .25s,color .25s,transform .25s cubic-bezier(.2,.8,.2,1); }
.game-module-rail button:hover,.game-module-rail button:focus-visible,.game-module-rail button.active { color:var(--game-ink); background:var(--game-accent-soft); outline:none; transform:translateY(-1px); }
.game-detail-panel { position:absolute; z-index:20; top:50%; left:clamp(16px,4vw,58px); width:min(440px,calc(100vw - 32px)); max-height:min(72dvh,690px); overflow:auto; border:1px solid var(--game-line); border-radius:26px; background:var(--game-panel); box-shadow:0 28px 80px rgba(0,0,0,.22); backdrop-filter:blur(21px); transform:translateY(-47%); animation:game-panel-in .42s cubic-bezier(.2,.85,.2,1); }
.game-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:22px 23px 17px; border-bottom:1px solid var(--game-line); }
.game-detail-head h2 { margin-top:5px; color:var(--game-ink); font-size:clamp(22px,3vw,31px); letter-spacing:-.06em; line-height:1; }
.game-close-detail { display:grid; flex:0 0 auto; width:31px; height:31px; place-items:center; border-radius:50% !important; background:transparent; color:var(--game-muted) !important; font-size:21px !important; }
.game-detail-body { padding:19px 22px 24px; }
.game-detail-copy { color:var(--game-muted); font-size:13px; line-height:1.65; }
.game-detail-grid { display:grid; gap:10px; margin-top:15px; }
.game-data-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border:1px solid var(--game-line); border-radius:15px; background:rgba(255,255,255,.22); }
.skin-tech .game-data-card { background:rgba(101,198,255,.055); }
.game-data-card strong,.game-data-card p,.game-data-card small { margin:0; }
.game-data-card strong { color:var(--game-ink); font-size:13px; }
.game-data-card p,.game-data-card small { color:var(--game-muted); font-size:11px; line-height:1.45; }
.game-data-card .game-number { color:var(--game-accent); font-size:25px; letter-spacing:-.07em; }
.game-progress { width:92px; height:5px; overflow:hidden; border-radius:99px; background:var(--game-line); }
.game-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--game-accent),#866cff); }
.game-detail-link,.game-detail-action { display:inline-flex; align-items:center; justify-content:center; min-height:38px; margin-top:14px; padding:0 13px; border-color:transparent !important; background:var(--game-accent) !important; color:#fff !important; font-size:12px; font-weight:750; text-decoration:none; }
.game-detail-action.is-quiet { border-color:var(--game-line) !important; background:transparent !important; color:var(--game-ink) !important; }
.game-todo-check { display:grid; flex:0 0 auto; width:27px; height:27px; place-items:center; padding:0; border-radius:9px !important; background:transparent; color:var(--game-accent) !important; font-size:13px; }
.game-todo-check:disabled { opacity:.45; cursor:not-allowed; }
.game-social-mark,.game-memory-emoji { display:grid; flex:0 0 auto; width:33px; height:33px; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(135deg,var(--game-accent),#8b6fff); font-size:15px; font-weight:800; }
.game-memory-emoji { background:transparent; font-size:24px; }
.game-mini-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin:16px 0 4px; padding:10px; border:1px solid var(--game-line); border-radius:16px; background:rgba(255,255,255,.16); }.game-calendar-weekday { padding:2px 0 4px; color:var(--game-muted); font-size:9px; font-weight:800; text-align:center; }.game-calendar-day { display:grid; min-height:35px; place-items:center; border:1px solid transparent; border-radius:8px; color:var(--game-muted); font-size:9px; line-height:1; }.game-calendar-day b { color:var(--game-ink); font-size:10px; }.game-calendar-day i { margin-top:1px; font-size:8px; font-style:normal; }.game-calendar-day.today { border-color:var(--game-accent); background:var(--game-accent-soft); }.game-calendar-day.remembered i { font-size:13px; }.game-calendar-day.blank { min-height:0; }
.game-data-card.is-column { align-items:flex-start; flex-direction:column; }
.game-note-content { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:4; }
.game-loading { position:absolute; z-index:30; top:50%; left:50%; width:min(360px,calc(100vw - 40px)); padding:23px; border:1px solid var(--game-line); border-radius:20px; background:var(--game-panel); box-shadow:0 24px 70px rgba(0,0,0,.22); text-align:center; transform:translate(-50%,-50%); backdrop-filter:blur(18px); }
.game-loading .game-loader-orb { width:30px; height:30px; margin:0 auto 13px; border:3px solid var(--game-line); border-top-color:var(--game-accent); border-radius:50%; animation:game-spin .9s linear infinite; }
.game-loading strong { display:block; margin-bottom:7px; color:var(--game-ink); font-size:14px; }
.game-loading .game-detail-action { margin:15px auto 0; }
.game-loading.is-error .game-loader-orb { border-color:var(--game-danger); border-top-color:var(--game-danger); animation:none; }
@keyframes game-panel-in { from { opacity:0; transform:translate(-20px,-47%) scale(.97); } to { opacity:1; transform:translate(0,-47%) scale(1); } }
@keyframes game-spin { to { transform:rotate(360deg); } }
@media (max-width:760px) { .game-fallback-notice { align-items:flex-start; flex-direction:column; width:min(100% - 32px,1120px); }.game-hud { align-items:flex-start; }.game-identity { padding-right:10px; }.game-identity strong { max-width:38vw; }.game-hud-actions { gap:6px; }.game-hud button { min-height:36px; padding:0 10px; font-size:11px; }.game-hud .game-overview { display:none; }.game-module-rail { bottom:15px; border-radius:15px; }.game-detail-panel { top:auto; right:12px; bottom:76px; left:12px; width:auto; max-height:min(58dvh,540px); transform:none; animation:game-panel-mobile-in .35s cubic-bezier(.2,.85,.2,1); }.game-detail-head { padding:18px 19px 14px; }.game-detail-body { padding:16px 19px 20px; }.game-data-card { padding:11px; }.game-loading { top:44%; } }
@keyframes game-panel-mobile-in { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce) { .game-hud button,.game-module-rail button,.game-detail-panel { transition:none; animation:none; }.game-loading .game-loader-orb { animation:none; } }