/* 市町村パズル 共通CSS */
.jmp-root {
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  position: relative;
  height: 100dvh;
  height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* ダークテーマ（デフォルト）*/
:root{
  --main:#1e3a5f;--gold:#d4af37;--ok:#27ae60;--ng:#e74c3c;--sidebar-w:160px;
  --bg:#1a2a40;--map-bg:#2a3f5f;--tray-bg:rgba(15,25,45,0.95);
  --text:#ffffff;--text-sub:rgba(255,255,255,0.7);--text-muted:rgba(255,255,255,0.45);
  --score-bg:rgba(255,255,255,0.07);--score-label:#f4cf5f;
  --piece-bg:rgba(212,175,55,0.08);--piece-border:rgba(212,175,55,0.4);
  --drop-fill:#8aabcc;--input-bg:rgba(255,255,255,0.08);--input-border:rgba(255,255,255,0.2);
  --clear-bg:rgba(0,0,0,0.7);--btn-secondary:rgba(255,255,255,0.15);
}
/* ライトテーマ */
.jmp-root.jmp-light{
  --main:#1e3a5f;--gold:#d4af37;--ok:#27ae60;--ng:#e74c3c;
  --bg:#a8d4e8;--map-bg:#a8d4e8;--tray-bg:rgba(240,244,248,0.97);
  --text:#1a2a40;--text-sub:rgba(255,255,255,0.7);--text-muted:rgba(255,255,255,0.45);
  --score-bg:rgba(255,255,255,0.07);--score-label:#f4cf5f;
  --piece-bg:rgba(184,134,11,0.08);--piece-border:rgba(184,134,11,0.4);
  --drop-fill:#7ab648;--input-bg:rgba(255,255,255,0.9);--input-border:rgba(37,99,168,0.3);
  --clear-bg:rgba(0,0,0,0.5);--btn-secondary:rgba(37,99,168,0.15);
}
*{box-sizing:border-box;margin:0;padding:0}
.jmp-root .pzl-wrap{display:flex;flex:1;overflow:hidden;min-height:0;}
.pzl-sidebar{width:var(--sidebar-w);flex-shrink:0;align-self:stretch;background:var(--main);display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px;overflow-y:auto;}
.pzl-title{color:#fff;font-weight:900;font-size:clamp(13px,1.4vw,15px);text-align:center;line-height:1.4;border-bottom:1px solid rgba(255,255,255,0.15);padding-bottom:8px;width:100%;}
.pzl-mode-tab{transition:background 0.15s,color 0.15s,border-color 0.15s;}
.pzl-score-list{width:100%;display:flex;flex-direction:column;gap:4px;}
.pzl-score-box{background:var(--score-bg);border-radius:6px;padding:4px 6px;text-align:center;}
.pzl-score-label{color:var(--score-label);font-size:12px;font-weight:700;}
.pzl-score-value{color:#fff;font-size:22px;font-weight:900;line-height:1.1;}
.pzl-timer{color:#fff;font-size:18px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;}
.pzl-btn-reset{width:100%;padding:6px 0;border-radius:8px;cursor:pointer;font-size:12px;font-weight:900;font-family:inherit;border:1.5px solid rgba(255,255,255,0.3);background:var(--input-bg);color:var(--text-sub);}
.pzl-hint-text{color:var(--text-muted);font-size:10px;text-align:center;line-height:1.5;}
.pzl-credit{color:var(--text-muted);font-size:9px;text-align:center;}
.pzl-content{flex:1;display:flex;flex-direction:row;min-width:0;overflow:hidden;}
.pzl-map-panel{flex:1;position:relative;overflow:hidden;min-height:0;display:flex;flex-direction:column;}
.pzl-map-wrapper{width:100%;height:100%;overflow:hidden;cursor:default;position:relative;}
[id$="-mapContainer"]{position:absolute;top:0;left:0;transform-origin:0 0;}
[id$="-mapSvg"]{display:block;}
.pzl-zoom-btns{position:absolute;bottom:10px;right:10px;display:flex;flex-direction:column;gap:4px;}
.pzl-zoom-btn{width:36px;height:36px;border-radius:8px;border:none;background:rgba(30,58,95,0.85);color:#fff;font-size:20px;font-weight:900;cursor:pointer;}
.pzl-zoom-reset-btn{width:36px;height:20px;border-radius:6px;border:none;background:rgba(30,58,95,0.85);color:#fff;font-size:9px;font-weight:900;cursor:pointer;}
.pzl-tray-panel{background:var(--tray-bg);border-left:2px solid var(--gold);
  width:190px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;}
.pzl-tray-label{color:var(--gold);font-size:11px;font-weight:900;padding:6px 8px 4px;flex-shrink:0;}
.pzl-tray{display:flex;flex-direction:column;gap:5px;overflow-y:auto;overflow-x:hidden;padding:4px 6px 6px;}
.jmp-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:var(--piece-bg);border:1.5px solid var(--piece-border);
  border-radius:8px;padding:6px 6px 8px;width:100%;}
.jmp-piece:hover:not(.dragging){transform:scale(1.03);border-color:var(--gold);box-shadow:0 4px 12px rgba(212,175,55,0.3);}
.jmp-piece.dragging{opacity:0.3;cursor:grabbing;}
.jmp-piece-name{font-size:16px;font-weight:900;color:var(--gold);white-space:nowrap;margin-top:3px;pointer-events:none;}
.jmp-piece-ruby{font-size:12px;font-weight:700;color:rgba(212,175,55,0.7);white-space:nowrap;margin-top:1px;pointer-events:none;}
.jmp-drop-zone{fill:var(--drop-fill);stroke:#fff;stroke-width:1.5;stroke-linejoin:round;opacity:0.5;vector-effect:non-scaling-stroke;transition:fill 0.2s,stroke 0.15s,opacity 0.15s;}
.jmp-hover-active{fill:#d4af37!important;stroke:#d4af37!important;stroke-width:3!important;opacity:0.7!important;vector-effect:non-scaling-stroke!important;}
.jmp-placed-ok{opacity:1!important;stroke:#fff!important;stroke-width:1.5!important;stroke-linejoin:round!important;vector-effect:non-scaling-stroke!important;}
.jmp-placed-ng{fill:rgba(231,76,60,0.5)!important;opacity:0.8!important;stroke:#e74c3c!important;stroke-width:2!important;vector-effect:non-scaling-stroke!important;animation:jmpNgShake 0.4s ease;}
@keyframes jmpNgShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes jmpPulse{0%,100%{opacity:1}50%{opacity:0.4}}
.jmp-muni-pulse{animation:jmpPulse 1.2s ease-in-out infinite;}
.pzl-test-area{background:var(--tray-bg);border-top:2px solid var(--gold);padding:8px 12px;flex-shrink:0;width:100%;}
.jmp-test-question{color:var(--text);font-size:14px;font-weight:900;margin-bottom:6px;}
.pzl-test-input-row{display:flex;gap:6px;align-items:center;}
.jmp-test-input{flex:1;padding:6px 10px;border-radius:8px;border:1.5px solid rgba(255,255,255,0.2);background:var(--input-bg);color:var(--text);font-size:14px;font-family:inherit;}
.jmp-test-input.correct{border-color:var(--ok);background:rgba(39,174,96,0.15);}
.jmp-test-input.wrong{border-color:var(--ng);background:rgba(231,76,60,0.15);}
.pzl-test-btn{padding:6px 14px;border-radius:8px;border:none;cursor:pointer;background:var(--gold);color:var(--main);font-size:13px;font-weight:900;font-family:inherit;}
.pzl-test-progress{color:var(--text-muted);font-size:11px;margin-top:4px;}
[id$="-clearOverlay"]{display:none;position:absolute;inset:0;background:var(--clear-bg);z-index:100;align-items:center;justify-content:center;}
[id$="-clearOverlay"].show{display:flex;}
.pzl-clear-box{background:var(--main);border:2px solid var(--gold);border-radius:16px;padding:28px 36px;text-align:center;display:flex;flex-direction:column;gap:10px;}
.pzl-clear-emoji{font-size:48px;}
.pzl-clear-title{color:var(--gold);font-size:24px;font-weight:900;}
.pzl-clear-time,.pzl-clear-score{color:var(--text);font-size:15px;}
.pzl-btn-again,.pzl-btn-map{padding:8px 20px;border-radius:8px;border:none;cursor:pointer;font-size:14px;font-weight:900;font-family:inherit;}
.pzl-btn-again{background:var(--gold);color:var(--main);}
.pzl-btn-map{background:var(--btn-secondary);color:var(--text);margin-top:4px;}
[id$="-dragGhost"]{position:fixed;pointer-events:none;z-index:9999;opacity:0;display:block;transform:translateZ(0);left:-9999px;top:-9999px;}

/* テーマ切り替えボタン */
.jmp-theme-btn{
  width:100%;padding:5px 0;border-radius:8px;cursor:pointer;font-size:11px;
  font-weight:900;font-family:inherit;border:1.5px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.08);color:var(--text-sub);margin-top:2px;
}
.jmp-root.jmp-light .jmp-theme-btn{
  border-color:rgba(37,99,168,0.3);background:rgba(37,99,168,0.08);color:var(--text-sub);
}