.free-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.free-grid h3 { margin: 0; display: flex; align-items: center; gap: 8px; font: 400 20px var(--display); color: #fff; }
.envelopes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.env { border: 0; border-radius: 14px; background: var(--panel-2); min-height: 130px; display: grid; place-items: center; align-content: center; cursor: pointer;
       transition: transform .15s; color: #fff; padding: 8px; }
.env img { width: 72px; height: 72px; }
.env:not(:disabled):hover { transform: translateY(-4px) rotate(-2deg); }
.env.shut { opacity: .45; cursor: default; }
.env.picked { animation: env-shake .45s; }
.env.open { background: linear-gradient(135deg, #ffd84d, #ff5fa2); color: #1b1240; }
.env.open b { font: 400 24px var(--display); }
.env.open small { font-weight: 700; }
.env.other { background: var(--panel-2); color: var(--muted); opacity: .75; }
.env.other b { font-size: 18px; }
@keyframes env-shake { 25% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
.puzzles { display: grid; gap: 12px; }
.pz { background: var(--panel-2); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.pz-head { display: flex; justify-content: space-between; align-items: center; color: #fff; }
.pz-reward { color: var(--gold); font-weight: 700; }
.pz-prompt { font: 400 26px var(--display); color: #fff; letter-spacing: .06em; text-align: center; padding: 6px 0; word-break: break-word; }
.pz-row { display: flex; gap: 6px; }
.pz-row input { flex: 1; min-width: 0; }
.pz-out { margin: 0; min-height: 1.3em; font-weight: 700; }
.pz-out.good { color: #7dff9b; }
.pz-out.bad { color: #ff8aa8; }
.pz .prog { margin: 0; height: 6px; }
@media (max-width: 820px) { .free-grid { grid-template-columns: 1fr; } }