:root{font-family:"Hiragino Sans","Yu Gothic",system-ui,sans-serif;color:#17364e;--blue:#126fa8;--line:#b8cedb;--good:#18855e}*{box-sizing:border-box}body{margin:0;background:linear-gradient(#edf8ff,#fff 38%);overscroll-behavior:none}.lab{width:min(100%,760px);margin:auto;padding:12px max(12px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}header{display:flex;justify-content:space-between;align-items:center}header span{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--blue)}h1{margin:3px 0 9px;font-size:23px}button,select{font:inherit}header button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--blue);font-size:24px}.settings{display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings label{display:grid;gap:3px;font-size:11px;font-weight:700;color:#607789}.settings select{height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 9px;color:#17364e;font-size:15px}.check{grid-column:1/3;display:flex!important;align-items:center;justify-content:center;min-height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#17364e!important;font-size:13px!important}.check input{width:20px;height:20px;margin-right:7px;accent-color:var(--blue)}.status{margin:8px auto 5px;width:min(100%,650px)}.status>div{display:flex;justify-content:space-between;font-size:13px}.status span{color:#607789}.status>i{display:block;height:7px;margin-top:5px;border-radius:9px;background:#dae8ef;overflow:hidden}.status b{display:block;width:0;height:100%;background:#2bb184;transition:width .2s}.status p{min-height:19px;margin:5px 0 0;text-align:center;font-size:13px;font-weight:700}.status p.good{color:var(--good)}.status p.bad{color:#bd3f32}.board{position:relative;width:min(100%,650px);aspect-ratio:var(--map-aspect,1.18);max-height:min(52vh,520px);touch-action:none;margin:auto;border:1px solid var(--line);border-radius:20px;background:#9dc9e3;overflow:hidden;box-shadow:0 7px 24px #17466516}.board svg{display:block;width:100%;height:100%;touch-action:none}.country{fill:#e3edf3;stroke:#5c7f96;stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer}.country.in-scope{fill:#fdfefe}.country.placed{fill:#37b98a;stroke:#147856}#map.continent-mode .country{stroke:none}#map.continent-mode .country.in-scope{fill:#f4f9fc}#map.continent-mode .country.placed{fill:#37b98a}.country.hinting{fill:#ffd25f;filter:drop-shadow(0 0 12px #ffad22)}.zoom{position:absolute;left:10px;top:10px;display:flex;gap:6px}.zoom button,.hint{height:44px;min-width:44px;border:0;border-radius:12px;background:#fffffff2;color:var(--blue);font-weight:800;box-shadow:0 3px 13px #17384b2b;touch-action:manipulation}.zoom button{font-size:21px}.zoom button:last-child{font-size:11px}.zoom button:disabled{opacity:.4}.hint{position:absolute;right:10px;bottom:10px;padding:0 13px}.tray{width:min(100%,650px);margin:9px auto 0;display:grid;grid-template-columns:1fr 145px;gap:9px;align-items:center;border:1px solid var(--line);border-radius:17px;background:#fff;padding:10px 12px}.tray small{display:block;color:#607789;font-weight:700}.tray strong{display:block;font-size:21px;margin-top:3px}.tray p{font-size:11px;color:#607789;line-height:1.4}.piece{height:118px;border:2px dashed #67a2c5;border-radius:14px;background:#eaf7fd;color:var(--blue);touch-action:none}.piece.selected{border-style:solid;background:#fff2cb;box-shadow:0 0 0 4px #ffd25f55}.piece svg{display:block;width:100%;height:86px}.piece .shape,.floater .shape{fill:#ee6955;stroke:#a73a2c;stroke-width:2;vector-effect:non-scaling-stroke}.piece span{font-size:11px;font-weight:800}.floater{position:fixed;z-index:30;width:110px;height:110px;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 7px #17384b55)}.floater svg{width:100%;height:100%;overflow:visible}dialog{width:min(calc(100% - 30px),390px);border:0;border-radius:22px;text-align:center;padding:25px;box-shadow:0 20px 70px #102f4855}dialog::backdrop{background:#102f4866}dialog>b{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#dcf6ec;color:var(--good);font-size:32px}dialog h2{margin:6px}dialog button{height:48px;border:0;border-radius:13px;padding:0 25px;background:var(--blue);color:#fff;font-weight:800}@media(max-width:380px){.tray{grid-template-columns:1fr 132px}.tray strong{font-size:18px}}@media(min-width:600px){.settings{grid-template-columns:1.2fr 1fr auto}.check{grid-column:auto;padding:0 12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* 別ウィンドウ（「別画面で開く」）では画面全体を使えるので地図を大きく見せる。
   埋め込み時は教材ページのiframe高さに合わせるため、これらは適用しない。 */
:root[data-standalone] .lab{width:min(100%,940px)}
/* スマホでは地図の大きさが横幅で決まるため、左右の余白を詰めて可能な限り広げる */
:root[data-standalone] .board{max-height:min(64vh,760px)}
@media(max-width:559px){
  :root[data-standalone] .lab{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
}
@media(min-width:900px){
  /* 横に余裕があるときは地図とトレイを左右に並べ、地図に高さを譲る */
  :root[data-standalone] .lab{width:min(100%,1200px)}
  /* 地図の縦横比は保ったまま、高さの上限だけ広げる（枠を固定すると余白が生まれるため） */
  :root[data-standalone] .board{max-height:min(78vh,860px)}
  :root[data-standalone] .work{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
  :root[data-standalone] .work .tray{width:100%;margin:0;position:sticky;top:12px;grid-template-columns:1fr;text-align:center}
  :root[data-standalone] .work .piece{width:100%;height:190px}
  :root[data-standalone] .work .piece svg{height:150px}
}