:root{font-family:"Nunito",system-ui,sans-serif;color:#263c40;background:#f6efda;font-size:16px;--ink:#263c40;--paper:#fff9e7;--teal:#397f77;--coral:#bd6450;--yellow:#e7bd48}*{box-sizing:border-box}body{margin:0;overflow-wrap:anywhere;background-image:radial-gradient(#29444918 .8px,transparent .8px);background-size:7px 7px}button,select,input{font:inherit}button,summary,select{touch-action:manipulation}button{min-height:44px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);padding:.6rem .9rem;color:var(--ink);font-weight:800;cursor:pointer;box-shadow:2px 3px 0 var(--ink);line-height:1.3;overflow-wrap:anywhere}button:hover:enabled{background:#fae6a2}button:active:enabled{transform:translate(1px,2px);box-shadow:0 1px 0 var(--ink)}button:disabled{opacity:.48;cursor:default;box-shadow:none}button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #bb4e38;outline-offset:4px}.primary{background:var(--teal);color:#fffbe9}.primary:hover:enabled{background:#28675f}h1,h2,h3,p{overflow-wrap:anywhere}h1{font-size:clamp(2.8rem,6vw,5.7rem);line-height:.96;letter-spacing:-.045em;margin:.65rem 0 1.25rem;text-shadow:2px 2px 0 #f6d267}h2{font-size:1.5rem;margin:.3rem 0 1rem}h3{margin:.3rem 0 .8rem}p{line-height:1.5}small,.small{font-size:.85rem;line-height:1.45}.kicker{font-weight:900;letter-spacing:.07em;text-transform:uppercase}.homeHeader{display:flex;align-items:center;gap:1rem;padding:1.2rem 0}.brandMark{font-size:2.3rem;background:var(--yellow);border:2px solid var(--ink);border-radius:16px;min-width:54px;text-align:center;text-decoration:none;color:var(--ink);transform:rotate(-8deg)}nav{display:flex;flex-wrap:wrap;gap:.65rem;margin-left:auto}#home{max-width:1240px;margin:auto;padding:0 clamp(.8rem,3vw,2.5rem) 2rem}.hero{display:grid;grid-template-columns:1fr 1.12fr;gap:2.5rem;align-items:center;padding:2rem 0 2.5rem}.heroCopy>p{max-width:48ch}.cover{width:100%;height:auto;border:3px solid var(--ink);border-radius:26px;transform:rotate(2deg);box-shadow:7px 8px 0 #c8a65d}.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1rem 0 .4rem}.route{border-top:3px solid var(--ink);padding-top:1.7rem}#contractMap{display:grid;gap:1.5rem}.chapterRoute{border:2px solid var(--ink);border-radius:18px;background:#fff9e7db;overflow:hidden}.chapterHeading{display:flex;gap:1rem;align-items:center;padding:1rem;border-bottom:2px solid var(--ink);background:#d4e4cf}.chapterHeading img{width:120px;height:72px;object-fit:cover;border-radius:10px;border:2px solid var(--ink)}.chapterHeading h3{margin:0}.chapterHeading p{margin:.35rem 0 0}.contractCards{padding:1rem;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem}.contractCard{text-align:left;padding:.7rem}.contractCard strong,.contractCard small{display:block}.contractCard .contractNumber{font-size:1.4rem;color:var(--teal);margin-bottom:.3rem}.contractCard.completed{background:#e4efd9}.practice{margin-top:1.8rem;border:2px dashed var(--ink);border-radius:14px;padding:1rem;background:#fff9e7}.practice summary{min-height:44px;font-weight:900;padding:.5rem;cursor:pointer}.practiceRow{display:flex;flex-wrap:wrap;gap:1rem;align-items:end}label{display:flex;gap:.75rem;align-items:center;min-height:44px}select{min-height:44px;min-width:0;max-width:100%;padding:.5rem;border:2px solid var(--ink);border-radius:9px;background:var(--paper);color:var(--ink)}#notice:empty,#feedback:empty{display:none}#notice{border-left:5px solid var(--coral);padding:.6rem}#game{padding:env(safe-area-inset-top) max(.65rem,env(safe-area-inset-right)) max(.4rem,env(safe-area-inset-bottom)) max(.65rem,env(safe-area-inset-left));min-height:100dvh;display:flex;flex-direction:column;background:#e8dfc8}.gameHeader{display:flex;align-items:center;gap:.7rem;padding:.65rem 0}.hud{flex:1;min-width:0}.hud>strong{font-size:1.2rem}.hudValues{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:.3rem;font-size:.9rem;font-weight:800}.pause{flex:none;max-width:50%;white-space:nowrap;background:var(--yellow)}#gameNotice{display:block;color:#90442e;margin-top:.3rem}.playArea{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,370px);gap:.8rem;align-items:stretch}#stage{position:relative;overflow:hidden;border:3px solid var(--ink);border-radius:19px;background:#efe9d7;min-height:350px}#canvas,#fallback{display:block;width:100%;height:100%;position:absolute;inset:0}#enemies{position:absolute;top:.5rem;left:.5rem;max-width:calc(100% - 1rem);font-size:.8rem;font-weight:900;line-height:1.4;background:#fff9e7d9;border:1px solid var(--ink);border-radius:7px;padding:.3rem .5rem;pointer-events:none}#workbench{background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:.75rem;min-width:0}.workshopHeader{display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:center;justify-content:space-between;margin-bottom:.6rem}.workshopHeader h2{font-size:1.1rem;margin:0}#board,.formation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border:2px solid #78968a;border-radius:12px;padding:7px;background:#dce6d1}#board{touch-action:none}#board button{padding:.1rem;min-width:0;min-height:64px;background:#f7f3df;border:2px solid #879889;box-shadow:0 2px 0 #607367;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;touch-action:none}#board button img{height:42px;width:100%;object-fit:contain;pointer-events:none}#board button small{font-size:.72rem;line-height:1.15;pointer-events:none;font-weight:900}#board button.empty{background:#d1dec5}#board button.cursor{outline:2px solid #425f6b;outline-offset:1px}#board button.selected{border-color:#ab4a32;box-shadow:inset 0 0 0 1px #ab4a32;background:#fff0ad}#board button.dragging{opacity:.5}#board button.preview{background:#f5d976}#board button .emptyMark{font-size:1rem;color:#6e8578}.shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.7rem}.shopCard{min-width:0;padding:.3rem .15rem;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.8rem;line-height:1.2}.shopCard img{object-fit:contain;width:100%;max-width:80px;height:45px}.shopCard.roller{background:#cde5d8}.shopCard.lobber{background:#f2cfb9}.shopCard.skipper{background:#f0dfa4}#selection{margin:.7rem 0;min-height:2.5em}.workshopActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.workshopActions button{font-size:.85rem;padding:.5rem .3rem}#feedback{font-size:.85rem;line-height:1.4;font-weight:800;padding:0 .35rem;min-height:1.4em;margin:.5rem 0}.battleMode .playArea{grid-template-columns:minmax(0,1fr)}.battleMode #stage{min-height:calc(100dvh - 145px)}.battleMode #workbench{display:none}dialog{color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:20px;padding:clamp(1rem,3vw,1.8rem);max-width:min(760px,calc(100vw - 1.1rem));max-height:calc(100dvh - 1.1rem);overflow:auto;box-shadow:7px 8px 0 #263c4040;overscroll-behavior:contain}dialog::backdrop{background:#172d35a8}dialog h2{font-size:1.8rem}dialog>img{border:2px solid var(--ink);border-radius:14px;max-width:100%;height:auto}dialog label{margin:.6rem 0}dialog input[type=checkbox]{width:24px;height:24px;accent-color:var(--teal);flex:none}dialog li{line-height:1.6;margin-bottom:.8rem}#settings{width:510px}.recordRow{border-top:1px dashed #8b9c8c;padding:.9rem 0}.recordRow strong,.recordRow small{display:block}.albumLine{margin:1.4rem 0}.albumCards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}.albumCard{border:2px solid #92a58c;border-radius:12px;padding:.5rem;text-align:center;background:#e9eddb}.albumCard img{width:100%;height:80px;object-fit:contain}.albumCard strong,.albumCard small{display:block;font-size:.8rem;line-height:1.35}.albumCard.undiscovered{background:#e7e2d4;border-style:dashed}.albumCard.undiscovered img{filter:grayscale(1);opacity:.35}.resultStars{font-size:2.5rem;letter-spacing:.2rem;color:#a87804;text-shadow:1px 1px var(--ink)}.formation{width:min(100%,470px);margin:1rem 0}.formation.enemy{direction:rtl}.formation>div{min-height:72px;text-align:center;direction:ltr;background:#f4e7d1;border:1px solid #b58b72;border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:center}.formation img{height:48px;width:100%;object-fit:contain}.formation small{font-weight:900}.roleInfo{border-top:1px dashed #8d9e8f;padding:.5rem 0}.roleInfo p{margin:.35rem 0}.reducedMotion *{scroll-behavior:auto!important} [hidden]{display:none!important}
@media(max-width:950px){.hero{gap:1.5rem;grid-template-columns:1fr 1fr}.contractCards{grid-template-columns:repeat(3,minmax(0,1fr))}.playArea{grid-template-columns:minmax(0,1fr) 325px}}
@media(max-width:650px){.homeHeader{gap:.5rem;padding:.8rem 0}nav{gap:.4rem}nav button{font-size:.75rem;padding:.4rem .55rem}.brandMark{min-width:42px;font-size:1.8rem}.hero{display:flex;flex-direction:column-reverse;gap:1.6rem;padding:.7rem 0 1.7rem}.cover{max-width:520px;box-shadow:4px 5px 0 #c8a65d;border-radius:17px;transform:rotate(1deg)}h1{font-size:3.5rem}.heroCopy{width:100%}.heroCopy>p{font-size:.95rem}.contractCards{grid-template-columns:repeat(2,minmax(0,1fr));padding:.7rem;gap:.6rem}.chapterHeading{padding:.7rem;align-items:start}.chapterHeading img{width:90px;height:60px}.chapterHeading p{font-size:.85rem}.chapterHeading h3{font-size:1.1rem}.practiceRow{align-items:stretch;flex-direction:column}.practiceRow label{align-items:start;flex-direction:column;gap:.3rem}.playArea{display:flex;flex-direction:column;gap:.5rem}#stage{min-height:140px;flex:1}#workbench{padding:.6rem}.gameHeader{padding:.5rem 0}.hud>strong{font-size:1rem}.hudValues{font-size:.8rem;gap:.15rem .7rem}.pause{font-size:.9rem;padding:.5rem .7rem}#board{gap:5px;padding:6px}#board button{min-height:57px}#board button img{height:35px}.shop{margin-top:.55rem}.shopCard{font-size:.75rem;flex-direction:row;flex-wrap:wrap;gap:.15rem}.shopCard img{height:31px;width:52px}.shopCard span{flex:1;min-width:44px}.workshopHeader small{font-size:.7rem}.workshopActions{gap:.5rem}#selection{font-size:.75rem;margin:.5rem 0;min-height:2em}#enemies{font-size:.7rem}.battleMode #stage{min-height:calc(100dvh - 145px)}.albumCards{grid-template-columns:repeat(3,minmax(0,1fr))}.albumCard img{height:70px}}
@media(max-width:360px){.albumCards{grid-template-columns:repeat(2,minmax(0,1fr))}h1{font-size:3rem}.contractCard{font-size:.85rem}.hero .actions{flex-direction:column}.gameHeader{gap:.4rem}.workshopActions button{font-size:.75rem}.shopCard span{min-width:40px}}
@media(min-width:651px) and (max-height:500px){#stage{min-height:260px}#workbench{padding:.5rem}#board button{min-height:46px}#board button img{height:25px}.shopCard img{height:28px}.shop{margin-top:.5rem}#selection{font-size:.7rem}.workshopActions button{font-size:.75rem}.gameHeader{padding:.4rem 0}}

#settings label.languageSetting{flex-direction:column;align-items:stretch;gap:.4rem}#settings .languageSetting select{width:100%}