/* Japan Nature Puzzle CSS */
.jnp-root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.pzl-wrap{
  --base:#fff;--base-dark:#f0f4f8;--main:#1e3a5f;--main-light:#2d5a8f;--main-dark:#0f1e3a;
  --accent:#d4af37;--accent-light:#f4cf5f;--accent-dark:#b8941f;
  --border:#e8e8e8;--shadow:0 4px 20px rgba(30,58,95,0.1);
  --ok:#27ae60;--ng:#e74c3c;--sidebar-w:160px;--mc:#6d3a0f;
  font-family:"Noto Sans JP",sans-serif;line-height:1;
  background:linear-gradient(160deg,#e8f0f8 0%,#f5f0e8 100%);
  display:flex;flex-direction:row;width:100%;height:100vh;max-height:100vh;
  overflow:hidden!important;margin:0!important;padding:0!important;
}
.pzl-sidebar{
  width:var(--sidebar-w);flex-shrink:0;align-self:stretch;background:var(--main);
  border-right:3px solid var(--accent);display:flex;flex-direction:column;
  align-items:center;padding:12px 8px;gap:8px;overflow:hidden;position:relative;
}
.pzl-sidebar::after{
  content:"";position:absolute;left:0;top:-100%;width:100%;height:200%;
  background:linear-gradient(180deg,transparent,rgba(212,175,55,0.08),transparent);
  animation:sideshine 5s infinite;
}
@keyframes sideshine{0%{top:-100%}100%{top:100%}}
.pzl-logo{display:none;font-size:clamp(20px,2.5vw,28px);line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3))}
.pzl-title{color:#fff;font-weight:900;font-size:clamp(13px,1.4vw,15px);text-align:center;line-height:1.4;
  text-shadow:0 1px 6px rgba(0,0,0,0.4);border-bottom:2px solid rgba(212,175,55,0.4);
  padding-bottom:8px;width:100%}
.pzl-mode-tabs{display:flex;flex-direction:column;gap:4px;width:100%}
.pzl-mode-tab{font-size:13px;font-weight:900;font-family:inherit;padding:5px 0;border-radius:8px;
  cursor:pointer;width:100%;border:1.5px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);transition:all 0.2s;text-align:center}
.pzl-mode-tab.active{background:var(--accent);color:var(--main-dark);border-color:var(--accent)}
.pzl-mode-tab:hover:not(.active){background:rgba(255,255,255,0.15);color:#fff}
.pzl-score-list{display:flex;flex-direction:column;gap:6px;width:100%}
.pzl-score-box{background:rgba(255,255,255,0.08);border:1px solid rgba(212,175,55,0.35);
  border-radius:10px;padding:5px 8px;text-align:center}
.pzl-score-label{color:#f4cf5f;font-size:12px;font-weight:700}
.pzl-score-value{color:#fff;font-size:clamp(16px,2vw,22px);font-weight:900;line-height:1}
.pzl-timer{color:#fff;font-size:clamp(12px,1.5vw,15px);font-weight:900;line-height:1}
.pzl-legend{width:100%;background:rgba(255,255,255,0.06);border-radius:8px;padding:6px 8px;
  display:flex;flex-direction:column;gap:5px}
.pzl-legend-item{display:flex;align-items:center;gap:5px;font-size:9px;color:rgba(255,255,255,0.75)}
.pzl-btn-reset{margin-top:auto;background:linear-gradient(135deg,var(--accent-light),var(--accent));
  color:var(--main-dark);border:none;border-radius:12px;padding:8px 0;width:100%;
  font-size:clamp(11px,1.2vw,13px);font-weight:900;cursor:pointer;transition:all 0.2s;
  box-shadow:0 2px 8px rgba(212,175,55,0.3);font-family:inherit}
.pzl-btn-reset:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(212,175,55,0.5)}
.pzl-hint-text{color:rgba(255,255,255,0.45);font-size:10px;text-align:center;line-height:1.5}
.pzl-credit{color:rgba(255,255,255,0.3);font-size:9px;text-align:center;line-height:1.5;margin-top:4px}
.pzl-content{flex:1;min-width:0;display:flex;flex-direction:column;padding:8px;gap:8px;overflow:hidden}
.pzl-map-panel{background:var(--base);border:2px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);position:relative;flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column}
.pzl-map-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-light),var(--accent));
  border-radius:16px 16px 0 0;z-index:2}
.pzl-map-wrapper{flex:1;min-height:0;overflow:hidden;position:relative;
  touch-action:none;cursor:grab;background:#a8c8dc}
.pzl-map-wrapper.panning{cursor:grabbing}
#mapContainer{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
#mapSvg{display:block;overflow:visible}
.drop-zone{fill:#c8dde8;stroke:#6a9ab0;stroke-width:1.2;transition:fill 0.15s,stroke 0.15s}
.drop-zone.hover-active{fill:rgba(244,207,95,0.5);stroke:var(--accent);stroke-width:2}
.drop-zone.placed-ok{stroke:#5a8aa0!important;stroke-width:1.2!important}
.drop-zone.placed-ng{fill:rgba(231,76,60,0.3);stroke:var(--ng);stroke-width:2;animation:ngShake 0.4s ease}
@keyframes ngShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.mountain-hit{fill:none;stroke:transparent;stroke-linecap:round;stroke-linejoin:round;stroke-width:28}
.pzl-test-area{display:flex;flex-direction:column;gap:8px;padding:8px 14px}
.pzl-test-question{color:var(--main,#1e3a5f);font-weight:900;font-size:13px;display:flex;align-items:center;gap:6px}
.pzl-test-question::before{content:'';display:inline-block;width:4px;height:14px;background:#d4af37;border-radius:2px}
.pzl-test-input-row{display:flex;gap:8px;align-items:center}
.pzl-test-input{flex:1;border:2px solid #1e3a5f;border-radius:8px;padding:8px 12px;font-size:16px;font-family:inherit;font-weight:700;outline:none;transition:border-color 0.15s}
.pzl-test-input:focus{border-color:#d4af37}
.pzl-test-input.correct{border-color:#10b981;background:#d1fae5}
.pzl-test-input.wrong{border-color:#ef4444;background:#fee2e2;animation:wrongShake 0.3s ease}
@keyframes wrongShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pzl-test-btn{background:linear-gradient(135deg,#2a5298,#1e3a5f);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:900;cursor:pointer;white-space:nowrap;transition:all 0.15s}
.pzl-test-btn:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(30,58,95,0.3)}
.pzl-test-progress{color:#888;font-size:11px;font-weight:700;text-align:center}
.mtn-highlight{stroke:#d4af37!important;stroke-width:7!important;filter:drop-shadow(0 0 5px rgba(212,175,55,0.8));animation:mtnPulse 1.2s ease-in-out infinite}
@keyframes mtnPulse{0%,100%{opacity:1}50%{opacity:0.5}}
.mtn-ghost{stroke:rgba(180,190,200,0.4)!important;stroke-dasharray:8 6!important}
.mountain-vis{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:5;
  stroke-dasharray:8 6;opacity:0.5;transition:opacity 0.2s,stroke 0.2s,stroke-dasharray 0.2s}

.placed-mtn{fill:none;stroke:var(--mc);stroke-linecap:round;stroke-linejoin:round;stroke-width:5}
@keyframes mtnPlace{0%{stroke:var(--accent);stroke-width:14}100%{stroke-width:5}}
.placed-mtn.flash{animation:mtnPlace 0.5s ease-out forwards}
.current-guide{fill:none;stroke-linecap:round;stroke-linejoin:round;
  opacity:0.22;stroke-dasharray:14 8;transition:opacity 0.2s,stroke-width 0.2s,opacity 0.15s}
.current-guide.near{opacity:0.85;stroke-dasharray:none;stroke-width:12;
  filter:drop-shadow(0 0 6px currentColor)}
.current-line{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0.92}
.current-arrow{fill:inherit;stroke:none}
.current-ghost{opacity:0.25;stroke-dasharray:10 6}
.current-highlight{animation:currentPulse 1.2s ease-in-out infinite;stroke-width:7!important;
  filter:drop-shadow(0 0 6px rgba(255,180,50,0.9))}
@keyframes currentPulse{0%,100%{opacity:1}50%{opacity:0.45}}
.current-label{font-size:13px;font-weight:900;font-family:"Noto Sans JP",sans-serif;
  paint-order:stroke;stroke:rgba(255,255,255,0.95);stroke-width:3.5;stroke-linejoin:round;pointer-events:none}
/* 湖モード */
.lake-body{opacity:0.75;transition:opacity 0.2s,filter 0.2s;cursor:grab}
.lake-body:hover{opacity:1}
.lake-body.solved{opacity:0.9;cursor:default}
.lake-ghost{opacity:0.2;fill:#2980b9}
.lake-highlight{animation:lakePulse 1.2s ease-in-out infinite}
@keyframes lakePulse{0%,100%{opacity:0.85}50%{opacity:0.35}}
.lake-label{font-size:11px;font-weight:900;font-family:"Noto Sans JP",sans-serif;
  paint-order:stroke;stroke:rgba(255,255,255,0.95);stroke-width:3;stroke-linejoin:round;pointer-events:none}
.pzl-lake-piece{display:flex;flex-direction:column;align-items:center;cursor:grab;
  transition:transform 0.15s;flex-shrink:0;user-select:none;touch-action:none;
  background:rgba(41,128,185,0.08);border:1.5px solid rgba(41,128,185,0.4);
  border-radius:8px;padding:5px 8px 7px}
.pzl-lake-piece:hover:not(.dragging):not(.solved){transform:translateY(-3px) scale(1.06);
  border-color:#2980b9;box-shadow:0 4px 12px rgba(41,128,185,0.3)}
.pzl-lake-piece.dragging{opacity:0.3;cursor:grabbing}
.pzl-lake-piece.solved{opacity:0.22;pointer-events:none}
/* 座標確認パネル */
#coordPanel{background:#1e3a5f;color:#fff;border-radius:10px;padding:7px 12px;
  font-family:monospace;font-size:12px;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;flex-shrink:0}
#coordPanel .cp-label{font-weight:900;color:#d4af37;font-size:11px;white-space:nowrap}
#coordPanel .cp-xy{color:#f4cf5f;min-width:140px}
#coordPanel .cp-log{color:#aaa;font-size:10px;flex:1;min-width:0;word-break:break-all;overflow:hidden;max-height:2.5em}
#coordPanel button{border-radius:6px;padding:3px 10px;cursor:pointer;font-size:11px;
  font-weight:900;font-family:monospace;border:none}
.cp-btn-clear{background:rgba(212,175,55,0.2);color:#d4af37;border:1px solid #d4af37!important}
.cp-btn-copy{background:#d4af37;color:#1e3a5f}
.mtn-label{font-size:12px;font-weight:900;font-family:"Noto Sans JP",sans-serif;fill:#4a1f00;
  paint-order:stroke;stroke:rgba(255,255,255,0.95);stroke-width:3.5;
  stroke-linejoin:round;pointer-events:none}
.map-label text{font-family:"Noto Sans JP",sans-serif}
.pzl-zoom-btns{position:absolute;bottom:10px;right:10px;display:flex;flex-direction:column;gap:4px;z-index:10}
.pzl-zoom-btn{width:32px;height:32px;background:var(--main);color:#fff;border:2px solid var(--accent);
  border-radius:8px;font-size:18px;font-weight:900;cursor:pointer;display:flex;
  align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(30,58,95,0.3);
  transition:all 0.15s;user-select:none;line-height:1}
.pzl-zoom-btn:hover{background:var(--main-light);transform:scale(1.1)}
.pzl-zoom-reset-btn{width:32px;height:32px;background:rgba(255,255,255,0.92);color:var(--main);
  border:2px solid var(--border);border-radius:8px;font-size:9px;font-weight:900;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(30,58,95,0.15);transition:all 0.15s;user-select:none}
.pzl-zoom-reset-btn:hover{background:var(--base-dark)}
.pzl-tray-panel{background:var(--base);border:2px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);position:relative;padding:6px 12px 8px;flex-shrink:0}
.pzl-tray-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-light),var(--accent));
  border-radius:16px 16px 0 0}
.pzl-tray-label{color:var(--main);font-weight:900;font-size:12px;margin-bottom:5px;
  display:flex;align-items:center;gap:6px}
.pzl-tray-label::before{content:"";display:inline-block;width:4px;height:14px;
  background:var(--accent);border-radius:2px}
.pzl-tray{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;
  padding:4px 2px;scrollbar-width:thin;scrollbar-color:rgba(30,58,95,0.2) transparent}
.pzl-tray::-webkit-scrollbar{height:4px}
.pzl-tray::-webkit-scrollbar-thumb{background:rgba(30,58,95,0.18);border-radius:2px}
.pzl-piece{display:flex;flex-direction:column;align-items:center;cursor:grab;
  transition:transform 0.15s;flex-shrink:0;user-select:none}
.pzl-piece:hover:not(.dragging){transform:translateY(-3px) scale(1.06)}
.pzl-piece.dragging{opacity:0.35;cursor:grabbing}
.pzl-piece svg{display:block;filter:drop-shadow(0 2px 4px rgba(30,58,95,0.2))}
.pzl-piece-name{font-size:10px;font-weight:900;color:var(--main);white-space:nowrap;
  margin-top:2px;pointer-events:none;letter-spacing:0.2px}
.pzl-mtn-piece{display:flex;flex-direction:column;align-items:center;cursor:grab;
  transition:transform 0.15s;flex-shrink:0;user-select:none;touch-action:none;
  background:rgba(109,58,15,0.06);border:1.5px solid rgba(109,58,15,0.2);
  border-radius:8px;padding:5px 6px 7px;position:relative}
.pzl-mtn-piece::after{content:"";position:absolute;bottom:0;left:6px;right:6px;
  height:2px;background:var(--mc);border-radius:1px}
.pzl-mtn-piece:hover:not(.dragging):not(.solved){transform:translateY(-3px) scale(1.06);
  border-color:var(--accent);box-shadow:0 4px 12px rgba(212,175,55,0.25)}
.pzl-mtn-piece.dragging{opacity:0.3;cursor:grabbing}
.pzl-mtn-piece.solved{opacity:0.22;pointer-events:none}
#dragGhost{position:fixed;pointer-events:none;z-index:9999;opacity:0.88;display:none}
#clearOverlay{position:fixed;inset:0;background:rgba(30,58,95,0.85);
  display:none;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(4px)}
#clearOverlay.show{display:flex;animation:fadeIn 0.5s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.pzl-clear-box{background:var(--base);border:3px solid var(--accent);border-radius:24px;
  padding:clamp(20px,4vw,36px) clamp(24px,5vw,56px);text-align:center;
  box-shadow:0 20px 60px rgba(212,175,55,0.3);max-width:90vw}
.pzl-clear-title{font-size:clamp(28px,5vw,44px);font-weight:900;color:var(--main)}
.pzl-clear-emoji{font-size:clamp(40px,7vw,60px);display:block;margin:8px 0}
.pzl-clear-time{font-size:clamp(14px,2vw,18px);color:#7f8c8d;margin-top:8px}
.pzl-clear-score{font-size:clamp(16px,3vw,24px);font-weight:900;color:var(--accent-dark);margin-top:6px}
.pzl-btn-again{background:linear-gradient(135deg,var(--main-light),var(--main));color:#fff;border:none;
  border-radius:14px;padding:12px 32px;font-size:clamp(14px,2vw,17px);font-weight:900;cursor:pointer;
  margin-top:18px;box-shadow:0 4px 16px rgba(30,58,95,0.3);transition:all 0.2s;
  display:block;width:100%;font-family:inherit}
.pzl-btn-again:hover{transform:translateY(-3px)}
.pzl-btn-map{background:rgba(255,255,255,0.15);color:var(--main);border:2px solid var(--border);
  border-radius:14px;padding:10px 32px;font-size:clamp(12px,1.8vw,15px);font-weight:900;
  cursor:pointer;margin-top:10px;transition:all 0.2s;width:100%;display:block;font-family:inherit}
.pzl-btn-map:hover{background:var(--base-dark);transform:translateY(-2px)}
@media(max-width:768px){
  .pzl-wrap{flex-direction:column}
  .pzl-sidebar{width:100%;flex-direction:row;align-items:center;justify-content:space-between;
    padding:6px 12px;gap:8px;border-right:none;border-bottom:3px solid var(--accent);
    flex-shrink:0;min-height:56px}
  .pzl-sidebar::after{display:none}
  .pzl-logo{font-size:22px}
  .pzl-title{font-size:12px;border-bottom:none;padding-bottom:0;white-space:nowrap}
  .pzl-mode-tabs{flex-direction:row;width:auto}
  .pzl-mode-tab{width:auto;padding:4px 8px;font-size:9px}
  .pzl-score-list{flex-direction:row;gap:6px;width:auto}
  .pzl-score-box{padding:3px 8px;min-width:52px}
  .pzl-score-value{font-size:16px}
  .pzl-timer{font-size:13px}
  .pzl-hint-text,.pzl-credit,.pzl-legend{display:none}
  .pzl-btn-reset{margin-top:0;width:auto;padding:6px 12px;font-size:12px;white-space:nowrap}
  .pzl-content{padding:6px;gap:6px}
}
@media(max-width:480px){
  .pzl-sidebar{padding:4px 8px;min-height:48px;gap:4px}
  .pzl-logo{display:none}
  .pzl-title{font-size:11px}
  .pzl-score-box{padding:2px 6px;min-width:44px}
  .pzl-score-value{font-size:14px}
  .pzl-score-label{font-size:9px}
  .pzl-timer{font-size:12px}
  .pzl-btn-reset{padding:5px 8px;font-size:11px}
  .pzl-zoom-btn{width:28px;height:28px;font-size:16px}
  .pzl-zoom-reset-btn{width:28px;height:28px;font-size:8px}
}