/* 年会像素风 · 共用样式 */
:root {
  --ink: #e8ecf4; --dim: #8b95a8; --gold: #ffd54a; --cyan: #22e0e0;
  --pink: #ff3fd0; --red: #ff5a5a; --green: #3ddc84; --panel: #1c2029; --line: #333a48;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #14161d; color: var(--ink);
  font: 15px/1.6 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
.pixel { font-family: "Fusion Pixel", "Zpix", ui-monospace, monospace; letter-spacing: .5px; }
img.pixelated { image-rendering: pixelated; }
button {
  font: inherit; color: var(--ink); background: #262c38; border: 3px solid var(--line);
  padding: 10px 16px; cursor: pointer; border-radius: 0;
  box-shadow: inset -2px -2px 0 #0006, inset 2px 2px 0 #ffffff12;
}
button:active { transform: translate(1px, 1px); }
button.primary { background: #16414a; border-color: var(--cyan); color: #b9feff; }
button.gold { background: #4a3a12; border-color: var(--gold); color: #ffe9a8; }
button.danger { background: #4a1620; border-color: var(--red); color: #ffc9c9; }
button:disabled { opacity: .45; cursor: default; }
input, select {
  font: inherit; color: var(--ink); background: #12151b; border: 3px solid var(--line);
  padding: 10px 12px; border-radius: 0; width: 100%;
}
.card { background: var(--panel); border: 3px solid var(--line); padding: 16px; }
.row { display: flex; gap: 10px; align-items: center; }
.spacer { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.gold { color: var(--gold); }
.tiny { font-size: 12px; }
h1, h2, h3 { margin: 0 0 10px; }
h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 15px; }

/* 场景容器（大屏页在 screen.html 内自行覆盖为 absolute 定位） */
.scene { display: none; flex-direction: column; }
.scene.on { display: flex; }
.scene-pad { padding: 18px; }

/* 员工页 */
#play { background: #0f1117; }
.play-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #1a1e26; border-bottom: 3px solid var(--line); flex: 0 0 auto; }
.play-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px; display: flex; flex-direction: column; }
.play-body > .scene.on { flex: 1 0 auto; }
.play-body > .scene[data-scene="catch"].on { flex: 1 1 auto; min-height: 100%; padding: 0; }
.avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.avatar-cell { background: #1a1e26; border: 3px solid var(--line); padding: 6px; text-align: center; cursor: pointer; }
.avatar-cell.sel { border-color: var(--gold); background: #2a2412; }
.avatar-cell img { width: 100%; aspect-ratio: 3/4; object-fit: contain; image-rendering: pixelated; background: #12151b; }
.avatar-cell img:not(.ok) { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { background: #12151b; } 50% { background: #232936; } }
#ipLoading { text-align: center; padding: 10px; color: var(--gold); }
.avatar-cell .nm { font-size: 12px; margin-top: 4px; }
.avatar-cell .tr { font-size: 11px; color: var(--gold); }

/* 盲盒 */
.boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.box {
  aspect-ratio: 1; border: 3px solid var(--line); background: #1a1e26;
  display: flex; align-items: center; justify-content: center; font-size: 34px;
  cursor: pointer; transition: transform .12s;
}
.box:active { transform: scale(.96); }
.box.opened { background: #2a2412; border-color: var(--gold); }
.box.win { background: #1d3a24; border-color: var(--green); }
.box.empty { background: #241a1a; border-color: #4a2a2a; }

/* 接福画布 */
#catchCanvas { width: 100%; height: 100%; display: block; touch-action: none; }

/* 弹幕 */
#barrageLayer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.barrage-item {
  position: absolute; white-space: nowrap; font-weight: 700;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; will-change: transform;
}
.barrage-item .who { font-size: .8em; opacity: .85; margin-right: 6px; }

/* 大屏 */
#screen { background: #0b0d12; }
.screen-bg { position: fixed; inset: 0; background-size: cover; background-position: center; opacity: .55; }
.screen-layer { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
.qr-panel { display: flex; align-items: center; gap: 28px; padding: 26px 34px; background: #12151bdd; border: 4px solid var(--cyan); }
.qr-panel img { width: 190px; height: 190px; image-rendering: pixelated; background: #fff; padding: 8px; }
.countdown-big { font-size: 74px; font-weight: 800; color: var(--gold); line-height: 1; }

/* 签到墙 */
.wall { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.wall-item { width: 92px; text-align: center; animation: pop .35s ease-out; }
.wall-item img { width: 92px; height: 110px; object-fit: contain; image-rendering: pixelated; background: #1a1e26; border: 3px solid var(--line); }
.wall-item .nm { font-size: 12px; margin-top: 2px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 排行榜 */
.board-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 2px solid #22262f; }
.board-row .rank { width: 34px; color: var(--gold); font-weight: 800; }
.board-row .score { color: var(--cyan); font-weight: 700; }

/* 后台 */
#admin { background: #14161d; }
.admin-grid { display: grid; grid-template-columns: 300px 1fr; gap: 14px; height: 100%; padding: 14px; }
.admin-side { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.admin-main { overflow-y: auto; }
.scene-btn { width: 100%; margin-bottom: 6px; text-align: left; }
.scene-btn.on { border-color: var(--gold); background: #2a2412; }
.log { font-family: ui-monospace, monospace; font-size: 12px; max-height: 220px; overflow-y: auto; color: var(--dim); }