:root{--ink:#203e3b;--muted:#7c8981;--accent:#e17453;--paper:#f7f6f2}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif}main{max-width:1140px;margin:auto;padding:30px 40px}header{display:flex;justify-content:space-between;align-items:center}.brand{font-size:14px;letter-spacing:2px;font-weight:800;text-decoration:none;color:var(--ink)}.mark{font-size:28px;vertical-align:middle;margin-right:8px}.pill{font-size:10px;letter-spacing:2px;border:1px solid #cbd2c9;border-radius:20px;padding:9px 13px}.intro{margin:52px 0 32px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:700}h1{font-size:48px;letter-spacing:2px;margin:15px 0}.dot{font-size:14px;color:var(--accent);margin-left:10px}p{font-size:14px;line-height:1.9;color:#6a7d75}.mobile{display:none}.layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:40px}.draw-card{border:1px solid #d7ded5;border-radius:18px;background:#fffefa;overflow:hidden;box-shadow:0 8px 30px #243c3310}.card-top{height:48px;padding:16px 22px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px}.north{color:#82958a}.canvas-wrap{position:relative;width:100%;aspect-ratio:1/1; background-image:radial-gradient(#cbd6cb 1px,transparent 1px);background-size:24px 24px}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}#placeholder{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;pointer-events:none;color:#a2ada3;gap:12px}#placeholder span{font-size:44px;font-weight:normal}#placeholder b{font-size:14px}#placeholder small{font-size:10px}.corner{position:absolute;bottom:15px;left:20px;font-size:8px;letter-spacing:2px;color:#9baa9d;pointer-events:none}.toolbar{padding:12px 16px;display:flex;gap:8px;align-items:center;border-top:1px solid #e6e9e0}button{font:inherit;cursor:pointer;border:0}button:disabled{opacity:.4;cursor:default}.toolbar button{background:#f0f2ec;color:#60766b;padding:10px 12px;border-radius:8px;font-size:12px}.toolbar label{margin-left:auto;font-size:11px;display:flex;align-items:center;gap:3px}input{accent-color:#345f50}aside{padding-top:20px}h2{font-size:26px;line-height:1.6;margin:18px 0}ol{padding:0;list-style:none;counter-reset:item}li{counter-increment:item;position:relative;padding:0 0 25px 34px}li:before{content:'0' counter(item);position:absolute;left:0;color:var(--accent);font-size:11px;top:3px}li b{display:block;font-size:13px}li span{display:block;color:#87938b;font-size:11px;margin-top:8px}.tip{border-left:2px solid #c4d1bd;background:#edf0e7;padding:14px;font-size:12px;color:#728169;line-height:1.8}.primary,.secondary{width:100%;padding:18px;border-radius:10px;font-weight:700}.primary{background:var(--ink);color:white;display:flex;justify-content:space-between}.secondary{background:#ecefe7;color:var(--ink);margin:18px 0 0}#notice{font-size:12px;min-height:20px;margin:16px 0 6px;color:#ae654d}.best{display:flex;align-items:center;gap:8px;font-size:11px;margin:22px 0;color:#7f8e83}.best b{color:var(--ink);font-size:16px}.best span{margin-left:auto;font-size:9px}.score{font-size:92px;line-height:1.2;color:var(--accent);font-weight:800;letter-spacing:-5px;margin-top:20px}.score small{font-size:28px;letter-spacing:0;margin-left:6px}.legend{font-size:11px;display:flex;gap:20px;margin:20px 0;color:var(--ink)}.legend span+span{color:var(--accent)}.overlay{font-size:12px}footer{display:flex;justify-content:space-between;gap:30px;margin:30px 0 0;font-size:10px;color:#96a091}details{max-width:440px;text-align:right}details p{text-align:left;font-size:11px}summary{cursor:pointer}[hidden]{display:none!important}button:hover:not(:disabled){filter:brightness(.95)}button:focus-visible,a:focus-visible{outline:3px solid #e17453;outline-offset:3px}@media(max-width:700px){main{padding:18px 18px 30px}.intro{margin:30px 0 22px}h1{font-size:35px;line-height:1.4;margin:12px 0}.intro p{font-size:12px;margin:0}.mobile{display:block}h1 .mobile{display:none}.layout{display:flex;flex-direction:column;gap:16px}aside{padding:0}#guide{display:none}.canvas-wrap{aspect-ratio:1/1}.toolbar{padding:10px}.toolbar button{padding:10px}#notice{margin:0 0 8px;min-height:0}.best{margin:15px 0 0}.score{font-size:70px}#result h2{margin:4px 0;font-size:22px}#result p{font-size:12px}.legend{margin:12px 0}.secondary{margin:12px 0}.primary{min-height:54px}footer{margin-top:24px;font-size:9px}details{max-width:55%}}
.okinawa-inset{position:absolute;left:3%;top:3%;width:32%;background:#fffefa;border-right:1.5px solid #9bad9e;border-bottom:1.5px solid #9bad9e;clip-path:polygon(0 0,100% 0,100% 83%,83% 100%,0 100%);padding:0 6px 16px 0;isolation:isolate}.okinawa-inset:after{content:'';position:absolute;right:0;bottom:0;width:24%;height:1.5px;background:#9bad9e;transform:rotate(-45deg);transform-origin:right center;bottom:17%;pointer-events:none}.inset-title{font-size:11px;color:#647c71;padding:6px 7px}.inset-title small{font-size:8px;color:#91a18f;margin-left:4px}#okinawa{width:100%;aspect-ratio:1;height:auto;background-image:radial-gradient(#d6ded3 1px,transparent 1px);background-size:18px 18px}.inset-help{position:absolute;left:8px;top:54%;font-size:9px;color:#a4ada1;pointer-events:none}.canvas-wrap>#placeholder{padding-top:70px}#breakdown{font-size:12px;background:#edf0e7;padding:8px 12px;border-radius:6px}
.mode-picker{display:flex;gap:8px;background:#e9ede5;padding:5px;border-radius:13px;max-width:540px}.mode-picker button{flex:1;background:transparent;color:#667e70;padding:14px 8px;border-radius:9px;font-weight:700;font-size:14px}.mode-picker small{display:block;font-weight:400;font-size:10px;margin-top:5px}.mode-picker .selected,#hardTools .selected{background:var(--ink);color:#fff}#modeDescription{font-size:12px;margin:12px 0 20px}#hardInfo{text-align:left;max-width:none;margin:0 0 20px;background:#edf0e7;padding:14px;border-radius:10px;font-size:12px}#hardInfo a{color:#385f50}#hardTools{display:flex;align-items:center;gap:7px;padding:10px 12px;border-top:1px solid #e6e9e0;flex-wrap:wrap}#hardTools button{padding:9px 11px;border-radius:7px;background:#edf0e7;color:#60766b;font-size:12px}#hardTools span{font-size:10px;color:#87938b}#islandResults{text-align:left;font-size:12px;margin:12px 0}#islandList p{font-size:11px;margin:4px 0}
header{gap:14px}.brand{margin-right:auto}.menu-trigger{width:42px;height:42px;border:1px solid #cbd2c9;border-radius:12px;background:#fffefa;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0}.menu-trigger span{display:block;width:18px;height:2px;background:var(--ink)}#mapMenu{margin:0 auto 0 0;height:100dvh;max-height:100dvh;width:390px;max-width:92vw;border:0;background:var(--paper);color:var(--ink);padding:26px 24px;box-shadow:15px 0 80px #203e3b30;overflow-y:auto}#mapMenu::backdrop{background:#142b2666;backdrop-filter:blur(3px)}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start}.drawer-head h2{font-size:23px;margin:10px 0 18px}.drawer-head button{background:#e8ede4;border-radius:50%;width:34px;height:34px;font-size:24px;color:var(--ink)}.nav-label{font-size:10px;letter-spacing:1.5px;color:#829183;margin:24px 0 10px}.nav-map{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;border:1px solid #d5ded1;border-radius:12px;background:#fffefa;color:var(--ink);padding:15px;margin-bottom:8px;font-size:14px;font-weight:700}.nav-map small{display:block;font-weight:400;color:#81917e;font-size:10px;margin-top:6px}.nav-best{font-size:9px;color:#93a08f;white-space:nowrap}.world-choice{background:#e6eee4}.continent-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.continent-choice{background:#fffefa;border:1px solid #d5ded1;border-radius:12px;padding:12px;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:700}.continent-choice svg{width:90px;height:54px;fill:#d1dfce;stroke:#6f8c73;stroke-width:1}.continent-choice.current,.nav-map.current{border-color:#355e4d;background:#dde8d8;box-shadow:inset 0 0 0 1px #355e4d}.drawer-foot{font-size:10px;color:#829183;margin-top:28px}#mapTitle{font-size:clamp(28px,4.2vw,48px)}@media(max-width:700px){header{gap:9px}.brand{font-size:11px;letter-spacing:1px}.mark{font-size:22px}.pill{font-size:8px;padding:8px;letter-spacing:1px}.intro{margin-top:24px}#mapTitle{font-size:30px;letter-spacing:0}#mapMenu{padding:22px 18px}}