:root {
  --bg: #f0f2f5; --panel: #ffffff; --card: #f7f8fa;
  --primary: #4a7cff; --primary-hover: #3565d9;
  --danger: #e0556a; --success: #2ea362; --warning: #e89230;
  --text: #1a1a2e; --text-dim: #8888a0; --border: #dde0e5;
  --radius: 10px; --radius-sm: 6px; --shadow: 0 2px 16px rgba(0,0,0,0.08);
  --toolbar-bg: #ffffff; --main-grad: radial-gradient(ellipse at center, #eef1f6 0%, #f0f2f5 70%);
  --btn-bg: #eef0f5; --btn-hover: #dde1ea; --btn-text: #444;
  --overlay-bg: rgba(0,0,0,0.35); --board-bg: #f7f8fa;
  --palette-bg: rgba(255,255,255,0.94); --input-bg: #ffffff;
  --upload-hover-bg: #f0f4ff;
  --texture: none;
}
* { margin:0; padding:0; box-sizing:border-box; }
a { text-decoration:none; color:inherit; }
body {
  font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg); color:var(--text);
  height:100vh; overflow:hidden; user-select:none; -webkit-user-select:none;
  position:relative;
}
body::after {
  content:''; position:fixed; top:0;left:0;right:0;bottom:0;
  background:var(--texture); pointer-events:none; z-index:0;
}
#app { height:100vh; display:flex; flex-direction:column; }
#toolbar {
  display:flex; align-items:center; gap:6px; padding:10px 16px;
  background:var(--toolbar-bg); border-bottom:1px solid var(--border);
  flex-wrap:wrap; min-height:52px; z-index:100;
}
#toolbar .sep { width:1px; height:20px; background:var(--border); margin:0 8px; }
#toolbar .tb-group { font-size:10px; color:var(--text-dim); padding:0 2px; margin-right:2px; }
#toolbar .grow { flex:1; }
.btn {
  padding:8px 12px; border:none; border-radius:var(--radius-sm);
  background:var(--btn-bg); color:var(--btn-text); cursor:pointer;
  font-size:12px; white-space:nowrap; transition:all 0.15s; font-family:inherit;
}
.btn:hover { background:var(--btn-hover); color:#fff; }
.btn.active { background:var(--primary); color:#fff; }
.btn.primary { background:var(--primary); color:#fff; font-weight:600; }
.btn.primary:hover { background:var(--primary-hover); }
.btn.sm { padding:5px 10px; font-size:11px; }
.btn.lg { padding:12px 20px; font-size:15px; }
.btn.success { background:var(--success); color:#fff; }
.btn.success:hover { background:#3db86a; }
.btn.danger { background:rgba(240,91,108,0.25); color:var(--danger); }
.btn.danger:hover { background:var(--danger); color:#fff; }
.btn:disabled { opacity:0.3; cursor:not-allowed; }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
#main {
  flex:1; display:flex; align-items:center; justify-content:center;
  overflow:auto; position:relative;
  background:var(--main-grad);
}
#upload-view { flex-direction:column; align-items:center; justify-content:center; gap:24px; display:flex; }
#draw-view { display:flex; align-items:center; justify-content:center; width:100%; height:100%; position:relative; }
#play-view { display:flex; flex-direction:column; align-items:center; width:100%; height:100%; position:relative; }
.upload-zone {
  width:480px; max-width:90vw; height:280px;
  border:2px dashed var(--border); border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; cursor:pointer;
  transition:all 0.25s; background:var(--panel);
}
.upload-zone:hover,.upload-zone.drag-over { border-color:var(--primary); background:var(--upload-hover-bg); }
.upload-zone svg { width:56px; height:56px; opacity:0.5; }
.upload-zone p { color:var(--text-dim); font-size:15px; }
.upload-zone .hint { font-size:12px; color:var(--text-dim); }
#file-input { display:none; }
#draw-container { position:relative; box-shadow:var(--shadow); border-radius:4px; overflow:hidden; line-height:0; }
#image-canvas { display:block; }
#text-canvas { position:absolute; top:0; left:0; pointer-events:none; }
#draw-canvas { position:absolute; top:0; left:0; }
#draw-palette {
  position:absolute; left:12px; top:50%; transform:translateY(-50%); z-index:30;
  display:flex; flex-direction:column; gap:3px;
  background:var(--palette-bg); backdrop-filter:blur(6px);
  border:1px solid var(--border); border-radius:var(--radius); padding:6px;
}
#draw-palette .palette-btn {
  padding:6px 8px; border:1px solid transparent; border-radius:5px;
  background:transparent; color:var(--text); cursor:pointer;
  font-size:11px; white-space:nowrap; display:flex;
  align-items:center; gap:4px; transition:all 0.12s; font-family:inherit;
}
#draw-palette .palette-btn:hover { background:var(--card); border-color:var(--border); }
#draw-palette .palette-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
#draw-palette.collapsed .palette-txt { display:none; }
#draw-palette.collapsed .palette-btn { padding:5px; justify-content:center; min-width:28px; }
#pal-toggle {
  text-align:center; cursor:pointer; color:var(--text-dim);
  font-size:10px; padding:2px 0; border-bottom:1px solid var(--border);
  margin-bottom:2px; user-select:none;
}
#pal-toggle:hover { color:var(--text); }
#text-bar {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  z-index:20; background:var(--panel); padding:7px 10px;
  border-radius:var(--radius-sm); border:1px solid var(--border);
  gap:6px; align-items:center;
}
#text-input {
  width:150px; padding:4px 8px; border:1px solid var(--border);
  border-radius:4px; background:var(--card); color:var(--text);
  font-size:13px; font-family:inherit; outline:none;
}
#text-input:focus { border-color:var(--primary); }
#text-size {
  height:28px; border:1px solid var(--border); border-radius:4px;
  background:var(--card); color:var(--text); font-size:12px; cursor:pointer;
}
#game-scroll {
  flex:1; width:100%; overflow:auto; display:flex;
  align-items:flex-start; justify-content:center; padding:20px;
}
#game-board { position:relative; flex-shrink:0; background:var(--border); border-radius:4px; }
.ghost-image {
  position:absolute; opacity:0.88; pointer-events:none; z-index:0;
  border:2px solid #64646a; border-radius:2px;
}
.puzzle-piece {
  position:absolute; cursor:grab; image-rendering:auto;
  border-radius:2px;
  filter:drop-shadow(2px 3px 5px rgba(0,0,0,0.5));
  transition:filter 0.25s ease;
  will-change:transform;
  backface-visibility:hidden;
}
.puzzle-piece:active { filter:drop-shadow(1px 1px 3px rgba(0,0,0,0.4)) brightness(1.02); }
.puzzle-piece img { display:block; pointer-events:none; }
.puzzle-piece { touch-action:none; -webkit-touch-callout:none; }
.puzzle-piece img { -webkit-user-drag:none; }
#game-board,#play-board { touch-action:none; }
#game-area,#play-area { overscroll-behavior:contain; }
.puzzle-piece:hover { filter:drop-shadow(3px 5px 8px rgba(0,0,0,0.55)); }
.puzzle-piece.placed { cursor:default; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.22)); transition:filter 0.3s ease; }
.puzzle-piece.placed:hover { filter:drop-shadow(0 1px 3px rgba(0,0,0,0.22)); }
.puzzle-piece.dragging {
  cursor:grabbing; z-index:9999 !important;
  filter:drop-shadow(4px 6px 10px rgba(0,0,0,0.6)) brightness(1.05);
  transition:none;
}
@keyframes cycleFlash { 0%{outline:3px solid rgba(255,220,60,0.9);outline-offset:0} 100%{outline:3px solid rgba(255,220,60,0);outline-offset:2px} }
.puzzle-piece.cycle-flash { animation:cycleFlash 0.2s ease-out; }
#progress-text { font-size:14px; color:var(--text-dim); }
.modal-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:var(--overlay-bg); display:flex; align-items:center;
  justify-content:center; z-index:10001; backdrop-filter:blur(4px);
}
.modal {
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px;
  min-width:520px; max-width:90vw; max-height:80vh;
  overflow-y:auto; box-shadow:var(--shadow);
  scrollbar-width:none; -ms-overflow-style:none;
}
.modal::-webkit-scrollbar { display:none; }
.modal h2 { font-size:18px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.modal-close { margin-left:auto; background:none; border:none; color:var(--text-dim); font-size:22px; cursor:pointer; padding:0 4px; }
.modal-close:hover { color:var(--text); }
.template-list { display:flex; flex-direction:column; gap:10px; }
.template-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  background:var(--card); border-radius:var(--radius-sm); border:1px solid var(--border);
}
.template-item img { width:144px; height:96px; object-fit:cover; border-radius:3px; border:1px solid var(--border); }
.template-info { flex:1; }
.template-info .name { font-weight:600; font-size:14px; }
.template-info .date { font-size:11px; color:var(--text-dim); margin-top:2px; }
.template-actions { display:flex; gap:4px; }
.template-actions .btn { padding:5px 10px; font-size:12px; }
.import-row { display:flex; gap:8px; margin-bottom:16px; align-items:center; }
.import-row input { flex:1; }
.input-text {
  padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--card); color:var(--text); font-size:13px; font-family:inherit; width:100%;
}
.input-text:focus { outline:none; border-color:var(--primary); }
.save-row { display:flex; gap:8px; align-items:center; }
.save-row .input-text { flex:1; }
#toast-container { position:fixed; top:60px; right:16px; z-index:10002; display:flex; flex-direction:column; gap:8px; }
.toast {
  padding:10px 18px; border-radius:var(--radius-sm); font-size:13px; color:#fff;
  animation:slideIn 0.25s ease; pointer-events:none; max-width:320px;
}
.toast.info { background:var(--primary); }
.toast.success { background:var(--success); }
.toast.error { background:var(--danger); }
@keyframes slideIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
#victory { flex-direction:column; align-items:center; gap:16px; }
#victory h1 { font-size:36px; color:var(--success); }
#victory p { color:var(--text-dim); font-size:15px; }
#victory .actions { display:flex; gap:10px; margin-top:8px; justify-content:center; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes snapPop { 0%{outline:4px solid var(--success);outline-offset:0} 50%{outline:6px solid var(--success);outline-offset:4px} 100%{outline:0px solid transparent;outline-offset:0} }
.puzzle-piece.snapping {
  animation:snapPop 0.3s ease;
  filter:drop-shadow(0 0 8px var(--success)) drop-shadow(2px 3px 3px rgba(0,0,0,0.5)) !important;
}
.puzzle-piece.selected { z-index:9998 !important; }
#zoom-indicator.show { display:block !important; }
#loading-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:var(--overlay-bg); z-index:10003;
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:16px;
}
#loading-overlay.show { display:flex !important; }
@keyframes spin { to{transform:rotate(360deg)} }
#lang-switch { position:fixed; top:14px; right:20px; z-index:200; display:flex; gap:4px; }
#lang-switch button {
  padding:3px 8px; border:1px solid var(--border); border-radius:4px;
  background:transparent; color:var(--text-dim); cursor:pointer; font-size:11px; font-family:inherit;
}
#lang-switch button.active { border-color:var(--primary); color:var(--primary); }
@media (max-width:700px) {
  .modal { min-width:auto; width:94vw; padding:16px; }
  .template-item { flex-wrap:wrap; }
  #toolbar { padding:8px; gap:4px; }
  .btn { padding:5px 10px; font-size:12px; }
  #draw-palette { left:4px; transform:translateY(-50%) scale(0.85); }
  #draw-palette.collapsed { transform:translateY(-50%) scale(0.75); }
  #community-grid, .level-grid { grid-template-columns:repeat(2,1fr) !important; }
  .stats { grid-template-columns:repeat(2,1fr); }
  #level-grid { grid-template-columns:repeat(3,1fr); }
}

#community-view, #profile-view { display:flex; }

/* ═══════ 图片悬停游戏启动浮层（两级菜单） ══════ */
.game-hover{cursor:pointer}
.game-hover-card{position:fixed;z-index:9000;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.22);min-width:220px;max-width:320px;max-height:75vh;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:ghIn .18s cubic-bezier(.4,0,.2,1)}
@keyframes ghIn{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.gh-inner{display:flex;flex-direction:column}

/* 第一级：难度行 */
.gh-level-row{border-bottom:1px solid var(--border)}
.gh-level-row:last-child{border-bottom:none}
.gh-lv-header{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;transition:background .15s;user-select:none}
.gh-lv-header:hover{background:var(--card)}
.gh-active>.gh-lv-header{background:var(--card);border-bottom:1px solid var(--border)}
.gh-lv-icon{font-size:14px;min-width:44px;text-align:center;flex-shrink:0}
.gh-lv-name{flex:1;font-size:13px;font-weight:600;color:var(--text);letter-spacing:.3px}
.gh-lv-count{font-size:11px;color:var(--text-dim);background:var(--bg);padding:2px 8px;border-radius:12px;min-width:22px;text-align:center;font-weight:500}
.gh-lv-arrow{font-size:9px;color:var(--text-dim);transition:transform .25s cubic-bezier(.4,0,.2,1);flex-shrink:0}
.gh-active .gh-lv-arrow{transform:rotate(90deg)}

/* 第二级：模板列表（默认隐藏） */
.gh-lv-body{display:none;max-height:220px;overflow-y:auto;overscroll-behavior:contain}
.gh-lv-body.gh-open{display:block;animation:ghSlide .22s cubic-bezier(.4,0,.2,1)}
@keyframes ghSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.gh-tpl-row{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 8px 44px;text-decoration:none;color:var(--text);transition:all .12s;gap:8px;border-left:3px solid transparent}
.gh-tpl-row:hover{background:var(--primary);color:#fff;border-left-color:rgba(255,255,255,.3)}
.gh-tpl-row:hover .gh-tpl-pc{color:rgba(255,255,255,.75)}
.gh-tpl-name{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gh-tpl-pc{font-size:11px;color:var(--text-dim);flex-shrink:0;font-variant-numeric:tabular-nums}

@media(max-width:600px){
.game-hover-card{max-width:260px;min-width:180px;border-radius:10px}
.gh-lv-header{padding:9px 10px;gap:6px}
.gh-lv-icon{min-width:36px;font-size:12px}
.gh-lv-name{font-size:12px}
.gh-lv-count{font-size:10px;padding:1px 6px}
.gh-tpl-row{padding:7px 10px 7px 34px}
.gh-tpl-name{font-size:11px}
.gh-tpl-pc{font-size:10px}
}

/* ── Site Footer (shared) ── */
footer{background:var(--panel);border-top:1px solid var(--border);padding:36px 24px 20px;margin-top:48px}
footer .f-inner{max-width:1100px;margin:0 auto;display:flex;gap:48px;flex-wrap:wrap}
footer .f-col{flex:1;min-width:120px}
footer .f-col h4{font-size:13px;font-weight:600;margin-bottom:12px;color:var(--text)}
footer .f-col a{display:block;font-size:12px;color:var(--text-dim);text-decoration:none;margin-bottom:8px;transition:color .15s,transform .15s}
footer .f-col a:hover{color:var(--primary);transform:translateX(3px)}
footer .f-copy{max-width:1100px;margin:0 auto;text-align:center;font-size:11px;color:var(--text-dim);padding-top:18px;margin-top:24px;border-top:1px solid var(--border)}
footer .f-copy a{color:var(--text-dim);text-decoration:none}
footer .f-copy a:hover{color:var(--primary);text-decoration:underline}
@media(max-width:800px){
footer{padding:24px 14px 16px;margin-top:32px}
footer .f-inner{gap:20px}
footer .f-col{min-width:100px}
}