/* 나무꾼 챌린지 — 새벽 숲 / 가죽·황동 UI */
#lj-game { position:relative; width:100%; max-width:560px; margin:0 auto; border:1px solid #52614a; border-radius:20px; overflow:hidden; background:#18251e; color:#f8f1df; box-shadow:0 18px 45px rgba(17,30,20,.28); user-select:none; -webkit-user-select:none; }
#lj-game, #lj-game * { box-sizing:border-box; }
#lj-game [hidden] { display:none !important; }
#lj-game button { font-family:inherit; }
.lj-toolbar { position:relative; z-index:9; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; background:linear-gradient(110deg,#233429,#15211a); border-bottom:1px solid #ffffff12; }
.lj-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.14em; font-size:.72rem; color:#deba76; }
.lj-brand > i { font-size:23px; color:#b5c095; }
.lj-brand small { display:block; margin-top:2px; font-size:.65rem; font-weight:600; color:#bdc7b8; letter-spacing:.02em; }
.lj-tools { display:flex; gap:6px; flex-shrink:0; }
.lj-tools button { min-height:36px; padding:0 11px; border-radius:8px; border:1px solid #d8cda633; background:#ffffff08; color:#e4e7da; font-weight:700; font-size:.74rem; cursor:pointer; }
.lj-tools button[aria-pressed="true"] { color:#f0cc85; border-color:#c3a36470; background:#d6ad5a10; }
.lj-tools button:disabled { opacity:.35; cursor:default; }
#lj-game button:focus-visible { outline:3px solid #f5d695; outline-offset:-4px; }
.lj-hud { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:8px; padding:12px 16px 9px; align-items:center; }
.lj-hud > div { text-align:center; border-left:1px solid #ffffff12; }
.lj-hud > div:first-child { border-left:0; }
.lj-hud small { display:block; font-size:.63rem; font-weight:600; color:#b3c0ac; letter-spacing:.04em; }
.lj-hud strong { display:block; line-height:1.4; font-size:1.25rem; font-weight:800; font-variant-numeric:tabular-nums; }
.lj-hud .lj-scorebox strong { color:#f0cc85; font-size:1.7rem; }
.lj-timetrack { margin:0 16px 12px; height:6px; border-radius:3px; background:#0c160f; overflow:hidden; }
#lj-timebar { display:block; height:100%; width:100%; border-radius:3px; background:linear-gradient(90deg,#768853,#b7c989,#eed49a); transition:width .06s linear; box-shadow:0 0 10px #e3d39555; }
#lj-timebar.low { background:linear-gradient(90deg,#bd553f,#edac66); animation:lj-blink .6s linear infinite; }
@keyframes lj-blink { 50% { opacity:.55; } }
#lj-field { position:relative; margin:0 10px; border:1px solid #c7c7a229; border-radius:10px; overflow:hidden; cursor:pointer; outline:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; background:#536455 url('/img/lumberjack/forest-v2.webp') center/cover; }
#lj-field:focus-visible { box-shadow:0 0 0 2px #e7c27b; }
#lj-canvas { display:block; width:100%; }
.lj-scene-label { position:absolute; top:16px; left:0; right:0; text-align:center; pointer-events:none; color:#fff9e5; text-shadow:0 1px 8px #15271b; }
.lj-scene-label span { display:block; font-size:.58rem; letter-spacing:.25em; font-weight:800; }
.lj-scene-label small { display:block; margin-top:4px; font-size:.63rem; opacity:.8; }
#lj-hint { position:absolute; left:10px; right:10px; bottom:12px; text-align:center; font-size:.72rem; font-weight:600; color:#f2e8ce; text-shadow:0 2px 5px #101b10; pointer-events:none; }
.lj-controls { display:flex; gap:10px; padding:12px 12px 16px; }
.lj-controls button { flex:1; min-width:0; min-height:61px; border:1px solid #b7996570; border-radius:10px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; color:#fff1d6; font-size:.95rem; font-weight:800; box-shadow:0 4px 0 #0b160f,inset 0 1px 0 #ffffff18; transition:transform .08s,filter .08s; }
.lj-controls button:active, .lj-controls button.is-chopping { transform:translateY(3px); filter:brightness(1.2); box-shadow:0 1px 0 #0b160f; }
.lj-controls button small { display:block; font-size:.62rem; font-weight:500; opacity:.65; margin-top:4px; }
#lj-left { background:linear-gradient(150deg,#796042,#4d3827); }
#lj-right { background:linear-gradient(150deg,#4d654c,#2c4235); }
.lj-overlay { position:absolute; inset:62px 0 0; z-index:8; display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(180deg,#10201655,#102016b8 35%,#0a150fe8); }
.lj-panel { width:100%; max-width:420px; text-align:center; padding:25px 18px; border:1px solid #d8c49b3b; border-radius:16px; background:linear-gradient(155deg,#28392bef,#14251ef5); box-shadow:0 16px 45px #07100966,inset 0 1px 0 #ffffff0c; }
.lj-eyebrow { display:inline-block; font-size:.67rem; font-weight:700; letter-spacing:.12em; color:#c7b788; margin-bottom:10px; }
.lj-panel h2 { margin:0 0 20px; color:#fff0cf; font-size:1.9rem; font-weight:900; word-break:keep-all; letter-spacing:-.04em; }
.lj-panel p { margin:0 0 16px; color:#c0cbbb; line-height:1.8; font-size:.85rem; word-break:keep-all; }
.lj-panel p b { color:#efdaae; }
.lj-demo { display:flex; gap:10px; justify-content:center; margin:0 0 18px; }
.lj-demo span { padding:8px 17px; border:1px solid #d3c09833; border-radius:7px; font-size:.75rem; font-weight:700; background:#e5c5860b; color:#e0d3b5; }
.lj-primary { min-width:200px; padding:14px 25px; border:1px solid #ffe4a580; border-radius:9px; cursor:pointer; color:#2c2518; background:linear-gradient(130deg,#edce91,#c99f61); font-size:1rem; font-weight:900; box-shadow:0 4px 0 #7a5c35,0 10px 24px #0003; }
.lj-primary:active { transform:translateY(2px); box-shadow:0 2px 0 #7a5c35; }
.lj-primary span { opacity:.7; margin-left:9px; }
.lj-best { margin:0 0 16px; color:#aebb9d; font-size:.8rem; font-weight:700; min-height:1em; }
.lj-best b { color:#f0cc85; }
.lj-sound-note { display:block; margin-top:17px; color:#a4ae9b; font-size:.59rem; line-height:1.5; }
.lj-final { margin:4px 0 12px; font-size:4.5rem; line-height:1; font-weight:900; color:#f1ce8d; font-variant-numeric:tabular-nums; }
.lj-final small { font-size:.85rem; color:#aebb9d; margin-left:6px; }
.lj-grade { margin:4px 0 12px; font-size:1.25rem; font-weight:800; }
.lj-detail { display:flex; flex-wrap:wrap; justify-content:center; gap:7px 12px; margin:0 0 22px; color:#aebb9d; font-size:.78rem; }
.lj-detail b { color:#f3ead6; }
.lj-newrecord { display:inline-block; margin:0 0 15px; padding:6px 16px; border-radius:20px; background:#e9c57f12; border:1px solid #e9c57f60; color:#f0cc85; font-size:.78rem; font-weight:800; }
.lj-guide { margin-top:14px; padding:14px 16px; border-radius:16px; }
.lj-guide h3 { margin:0 0 6px; font-size:1rem; font-weight:900; }
.lj-guide p { margin:0 0 4px; font-size:.9rem; line-height:1.6; }
.lj-guide small { font-size:.8rem; opacity:.75; }
@media (max-width:420px) { .lj-toolbar { padding:10px 12px; } .lj-brand { font-size:.65rem; gap:7px; } .lj-brand > i { font-size:19px; } .lj-tools button { padding:0 9px; } .lj-overlay { inset:59px 0 0; padding:16px; } .lj-panel { padding:22px 12px; } .lj-panel h2 { font-size:1.6rem; } .lj-panel p { font-size:.78rem; } .lj-controls button { font-size:.81rem; min-height:56px; } .lj-final { font-size:3.6rem; } }
@media (prefers-reduced-motion:reduce) { #lj-timebar.low { animation:none; } #lj-timebar, .lj-controls button { transition:none; } }