/* Full work areas follow the site's shared theme and corner controls. */
.game-library, .game-workspace { font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif; }
.game-library-header, .game-workspace-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.game-library-header h1, .game-workspace-header h1 { font-size:2rem; margin:8px 0; }
.game-library-header p, .game-library-count { color:var(--text-secondary); }
.game-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.game-filters [aria-pressed="true"] { border-color:var(--blue); background:var(--bg-glass); color:var(--blue); }
.game-library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.game-library-card { position:relative; text-align:left; padding:22px; min-height:285px; color:var(--text-primary); cursor:pointer; border:1px solid var(--border-glass); transition:border-color .18s,transform .18s; }
.game-library-card:hover { transform:translateY(-3px); border-color:var(--blue); }.game-library-card[aria-pressed="true"] { border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.game-library-card h2 { font-size:1.25rem; margin:12px 0 6px; }.game-library-card p { color:var(--text-secondary); font-size:.85rem; line-height:1.7; }
.game-player-badge, .game-category { display:inline-block; font-size:.7rem; border-radius:var(--radius-sm); padding:5px 8px; background:var(--bg-glass); color:var(--text-secondary); }.game-player-badge { color:var(--blue); }
.game-card-art { width:100px; height:100px; margin:18px 0 8px; color:var(--blue); }.game-card-art svg,.game-mode-icon svg { width:100%;height:100%; }
.game-card-footer { display:flex; justify-content:space-between; margin-top:18px; color:var(--text-secondary); font-size:.75rem; }
.game-mode-panel { display:flex; align-items:center; gap:24px; padding:28px; margin:24px 0; }.game-mode-icon { flex:none; width:80px; height:80px; color:var(--blue); }.game-mode-copy { flex:1; min-width:0; }.game-mode-copy h2 { margin:6px 0 10px; }.game-mode-copy p { line-height:1.8; color:var(--text-secondary); font-size:.85rem; }.game-mode-actions { display:flex; flex-direction:column; gap:10px; flex:none; }
.game-workspace-actions { display:flex; gap:8px; flex-wrap:wrap; }.game-play-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; }.game-play-card { padding:28px; min-width:0; }.game-rules-card { padding:24px; height:fit-content; }.game-rules-card h2 { margin:12px 0; }.game-rules-card p { color:var(--text-secondary); line-height:1.9; margin-bottom:20px; }.game-workspace:fullscreen { background:var(--bg-page); overflow:auto; padding:28px; }
.game-workspace #game-container { min-width:0; width:100%; display:flex; flex-direction:column; align-items:center; gap:16px; }
.game-workspace #game-container canvas { width:min(100%,680px); height:auto; max-width:100%; touch-action:none; }.game-workspace[data-game="tetris"] #game-container canvas { width:min(100%,340px); }
.game-touch-controls { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:20px; }.game-touch-controls .btn { min-width:48px; min-height:48px; touch-action:none; }
.game-score { display:flex; gap:16px; justify-content:space-between; align-items:center; margin-bottom:18px; font-variant-numeric:tabular-nums; }
.number-game { width:min(100%,540px); }.g2048 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:12px; background:var(--bg-glass); border:1px solid var(--border-glass); border-radius:var(--radius-lg); touch-action:none; }.g2048 .gcell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:clamp(1rem,3vw,2rem); font-weight:650; background:var(--bg-glass); border-radius:var(--radius-md); }.g2048 .gcell:not([data-value="0"]) { background:var(--blue); color:white; }.g2048 .gcell[data-value="4"],.g2048 .gcell[data-value="16"],.g2048 .gcell[data-value="64"],.g2048 .gcell[data-value="256"] { background:#165f99; }.g2048 .gcell[data-value="512"],.g2048 .gcell[data-value="1024"],.g2048 .gcell[data-value="2048"] { background:#8c5d08; }
.mine-grid, .sudoku-grid { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); width:min(100%,570px); gap:3px; }.mine-grid button,.sudoku-grid button { aspect-ratio:1; min-width:0; padding:0; border-radius:var(--radius-sm); font-size:clamp(.8rem,2vw,1.1rem); }.mine-grid button:disabled,.sudoku-grid button:disabled { opacity:1; }.mine-grid [data-revealed="true"] { background:var(--bg-page); }.mine-grid svg { width:60%;height:60%; }.sudoku-grid button { border:1px solid var(--border-glass); background:var(--bg-glass); color:var(--blue); }.sudoku-grid button[data-given="true"] { color:var(--text-primary); font-weight:700; }.sudoku-grid [data-selected="true"] { box-shadow:inset 0 0 0 2px var(--blue); }.sudoku-grid button:nth-child(3n):not(:nth-child(9n)) { border-right:3px solid var(--text-secondary); }.sudoku-grid button:nth-child(n+19):nth-child(-n+27),.sudoku-grid button:nth-child(n+46):nth-child(-n+54) { border-bottom:3px solid var(--text-secondary); }.sudoku-digits { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:18px; }.sudoku-digits button { min-height:44px; min-width:44px; }
#gomoku-overlay { background:var(--bg-page) !important; color:var(--text-primary); padding:90px 20px 28px !important; overflow:auto !important; font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif; }
#gomoku-overlay > canvas { width:min(78dvh,700px,100%) !important; height:auto !important; max-height:none !important; flex-shrink:0; }
#gomoku-overlay > div:not([style*="position:absolute"]) { max-width:760px !important; }
#gomoku-overlay > div[style*="position:absolute"] { background:var(--bg-page); min-height:70px; flex-wrap:wrap; gap:8px; }
@media(max-width:800px) { .game-play-layout { grid-template-columns:minmax(0,1fr); }.game-workspace-header { align-items:flex-start; flex-direction:column; }.game-mode-panel { flex-wrap:wrap; }.game-mode-actions { flex-direction:row; flex-wrap:wrap; width:100%; }.game-rules-card { order:2; } }
@media(max-width:500px) { .game-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.game-library-card { padding:14px; min-height:245px; }.game-card-art { width:80px; height:80px; }.game-library-card h2 { font-size:1.1rem; }.game-library-header h1,.game-workspace-header h1 { font-size:1.6rem; }.game-library-count { display:none; }.game-mode-panel { padding:18px; gap:12px; }.game-mode-icon { width:55px; height:55px; }.game-play-card { padding:12px; }.game-workspace-actions .btn { padding:10px; }.g2048 { gap:6px; padding:8px; }.mine-grid,.sudoku-grid { gap:2px; } }
@media(prefers-reduced-motion:reduce) { .game-library-card { transition:none; }.game-library-card:hover { transform:none; } }
.workspace-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 28px; border-bottom:1px solid var(--border-glass); flex:none; min-height:82px; }
.workspace-header h2 { font-size:1.15rem; font-weight:650; overflow-wrap:anywhere; margin:4px 0 0; }
.workspace-eyebrow { font-size:.7rem; letter-spacing:.12em; color:var(--text-secondary); }
.photo-workspace, .article-workspace { position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column; background:var(--bg-page,#18212d); color:var(--text-primary); }
body.photo-workspace-open, body.article-workspace-open { overflow:hidden; }
.photo-workspace-body { display:grid; grid-template-columns:minmax(0,1fr) 350px; flex:1; min-height:0; }
.photo-workspace-body:not(:has(.photo-discussion)) { grid-template-columns:minmax(0,1fr); }
.photo-main { min-width:0; min-height:0; display:flex; flex-direction:column; padding:16px; background:var(--bg-glass); }
.photo-tools { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; padding:0 0 12px; }
.photo-tools .btn { min-width:44px; min-height:44px; }
.photo-tools span { min-width:55px; text-align:center; font-variant-numeric:tabular-nums; color:var(--text-secondary); }
.photo-stage { position:relative; flex:1; min-height:160px; width:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; border-radius:var(--radius-lg); background:var(--bg-glass); }
.photo-stage.is-dragging { cursor:grabbing; }
.photo-stage img { max-width:none; max-height:none; flex:none; user-select:none; -webkit-user-drag:none; object-fit:contain; will-change:transform; }
.photo-load { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px; background:var(--bg-page); }
.photo-load[hidden] { display:none; }
.photo-hint { text-align:center; font-size:.75rem; color:var(--text-secondary); padding:12px 0 0; }
.photo-discussion { display:flex; flex-direction:column; gap:16px; padding:24px; border-left:1px solid var(--border-glass); min-height:0; }
.photo-discussion h3 { font-size:1rem; }
.photo-discussion #photo-comments { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.photo-comment { padding:16px 0; border-bottom:1px solid var(--border-glass); overflow-wrap:anywhere; }
.photo-comment p { white-space:pre-wrap; line-height:1.7; padding:6px 0; }
.photo-comment small { display:block; color:var(--text-secondary); margin-bottom:8px; }
.photo-discussion form { display:flex; flex-direction:column; gap:10px; }
.photo-comment-status { color:var(--text-secondary); }
.snapshot-error { padding:12px; }
.photo-workspace, .article-workspace, .article-detail { font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif; }
.editor-header-actions { display:flex; align-items:center; gap:12px; }
#article-draft-status { color:var(--text-secondary); font-size:.8rem; }
.editor-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:10px 24px; border-bottom:1px solid var(--border-glass); flex:none; }
.editor-toolbar label { display:flex; align-items:center; gap:8px; font-size:.8rem; padding:0 12px; }
.editor-view-switch { display:flex; gap:4px; margin-left:auto; }
.editor-view-switch [aria-pressed="true"] { background:var(--blue); color:white; }
.editor-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); flex:1; min-height:0; overflow:hidden; }
.editor-writing { overflow:auto; overscroll-behavior:contain; padding:24px 32px; min-width:0; }
.editor-title { font-size:1.6rem !important; padding:16px !important; margin-bottom:16px; font-weight:600; }
.editor-content { display:block; width:100%; min-height:52dvh; resize:vertical; font-family:"Consolas","Microsoft YaHei",monospace; line-height:1.9; font-size:1rem; padding:20px; }
.editor-meta { display:grid; gap:10px; padding:24px 0 12px; }
.editor-preview { border-left:1px solid var(--border-glass); padding:32px 40px; overflow:auto; overscroll-behavior:contain; min-width:0; }
.editor-preview h1 { font-size:2rem; line-height:1.3; margin:16px 0 24px; overflow-wrap:anywhere; }
.editor-footer { display:flex; justify-content:space-between; gap:12px; padding:12px 24px; color:var(--text-secondary); font-size:.75rem; border-top:1px solid var(--border-glass); flex:none; }
.editor-assets summary { font-weight:600; padding:8px 0 16px; cursor:pointer; }
.editor-assets label { display:block; margin-bottom:8px; }
.editor-upload-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0; }
.editor-upload-row span { flex:1; min-width:100px; overflow-wrap:anywhere; }
#article-existing-assets { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0; }
.article-workspace[data-view="write"] .editor-body, .article-workspace[data-view="preview"] .editor-body { grid-template-columns:minmax(0,1fr); }
.article-workspace[data-view="write"] .editor-preview, .article-workspace[data-view="preview"] .editor-writing { display:none; }
.article-workspace[data-view="write"] .editor-writing { width:min(100%,1000px); margin:auto; }
.article-workspace[data-view="preview"] .editor-preview { width:min(100%,900px); margin:0 auto; border:0; }
#article-draft-offer { padding:10px 24px; display:flex; gap:10px; align-items:center; background:var(--bg-glass); border-bottom:1px solid var(--border-glass); font-size:.85rem; }
#article-draft-offer[hidden] { display:none; }
.article-plain { white-space:pre-wrap; line-height:1.9; }
.markdown-body { line-height:1.9; overflow-wrap:anywhere; white-space:normal !important; font-size:1rem; }
.markdown-body p { margin:0 0 1.15em; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { margin:1.6em 0 .6em; line-height:1.4; font-weight:650; }
.markdown-body h1 { font-size:1.85rem; }.markdown-body h2 { font-size:1.5rem; }.markdown-body h3 { font-size:1.2rem; }
.markdown-body ul, .markdown-body ol { padding-left:1.7em; margin:1em 0; }
.markdown-body blockquote { border-left:3px solid var(--blue); padding:12px 20px; color:var(--text-secondary); background:var(--bg-glass); margin:1em 0; }
.markdown-body pre { background:var(--bg-glass); border:1px solid var(--border-glass); border-radius:var(--radius-md); padding:18px; overflow:auto; white-space:pre; }
.markdown-body code { font-family:Consolas,monospace; background:var(--bg-glass); padding:2px 5px; border-radius:4px; }
.markdown-body pre code { padding:0; background:none; }.markdown-body img { display:block; max-width:100%; height:auto; margin:20px auto; border-radius:var(--radius-md); cursor:zoom-in; }
.markdown-body table { border-collapse:collapse; display:block; overflow:auto; margin:20px 0; }.markdown-body th, .markdown-body td { border:1px solid var(--border-glass); padding:8px 14px; }.markdown-body a { color:var(--blue); text-decoration:underline; }.markdown-body hr { border:0; border-top:1px solid var(--border-glass); margin:28px 0; }
.article-reading-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }.article-detail { max-width:980px; margin:auto; }.article-detail-content { padding:40px !important; }.article-detail-title { line-height:1.35; margin:28px 0; }.article-comments { margin:40px 0; padding:28px !important; }
@media(max-width:700px) {
  .workspace-header { padding:12px 16px; min-height:70px; gap:12px; }
  .photo-workspace-body { display:flex; flex-direction:column; overflow:auto; }
  .photo-main { flex:none; height:65dvh; padding:10px; }
  .photo-workspace-body:not(:has(.photo-discussion)) .photo-main { height:100%; flex:1; }
  .photo-discussion { border-left:0; border-top:1px solid var(--border-glass); padding:18px; flex:none; }
  .photo-discussion #photo-comments { max-height:35dvh; flex:none; }
  .photo-hint { font-size:.65rem; }
  .editor-header-actions { gap:6px; } #article-draft-status { display:none; }
  .editor-toolbar { padding:8px 12px; }.editor-view-switch { width:100%; margin-left:0; }
  .editor-body { display:flex; flex-direction:column; overflow:auto; }.editor-writing { overflow:visible; padding:18px; flex:none; }
  .editor-preview { border:0; border-top:1px solid var(--border-glass); padding:24px; overflow:visible; flex:none; }.editor-content { min-height:50dvh; }
  .editor-footer { padding:10px 16px; }.editor-footer span:last-child { max-width:70%; text-align:right; }
  .editor-title { font-size:1.25rem !important; }.article-detail-content { padding:22px !important; }
}

.mines-game, .sudoku-game { width:min(100%,570px); }.mine-grid .mine-cell { border:1px solid var(--border-glass); background:var(--bg-glass); color:var(--text-primary); }