*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body,h1,h2,h3,p,button{margin:0}button,input,textarea,select{font:inherit}button{color:inherit}img,svg{display:block;max-width:100%}body{min-width:320px;min-height:100vh}:root{font-family:BIZ UDPGothic,Hiragino Sans,Yu Gothic,sans-serif;color:#173247;background:radial-gradient(circle at top left,rgba(219,138,77,.18),transparent 32%),radial-gradient(circle at bottom right,rgba(46,139,125,.18),transparent 28%),linear-gradient(180deg,#f7f1e7,#efe4d0);--ink: #173247;--ink-soft: #3f6174;--paper: rgba(250, 244, 234, .84);--paper-strong: #f8f1e3;--line: rgba(23, 50, 71, .14);--accent: #db8a4d;--accent-strong: #c2624c;--sea: #d7e6e8;--sea-deep: #bdd7da}body{color:var(--ink);background:#f4f1ea;overflow:hidden}#root{height:100vh;overflow:hidden}.app-shell{height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) minmax(188px,34dvh);gap:10px;padding:10px 10px 12px;overflow:hidden}.tray{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:var(--paper);border:1px solid rgba(255,255,255,.55);box-shadow:0 12px 40px #17324714;min-height:0;overflow:hidden}.app-main,.board-frame{position:relative;min-height:0}.board-frame{height:100%;border-radius:24px;overflow:hidden;background:#edf3f6;border:1px solid rgba(23,50,71,.08)}.map-viewport{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;touch-action:none}.map-viewport__content{position:absolute;top:0;left:0;width:860px;height:660px;transform-origin:0 0;will-change:transform}.map-canvas__sea{fill:#edf3f6}.map-canvas__silhouette{fill:#fff}.map-canvas__silhouette.is-placed{fill:#1732470a}.map-canvas__mesh{fill:none;stroke:#1732476b;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}.map-canvas__country{fill:#fff;stroke:#1732478f;stroke-width:1.2;stroke-linejoin:round}.map-canvas__country-outline{fill:none;stroke:#1732478f;stroke-width:1.2;stroke-linejoin:round}.map-canvas__label{fill:#10293a;font-weight:700;paint-order:stroke;stroke:#f8f1e3f5;stroke-width:4.5;stroke-linejoin:round}.drag-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;pointer-events:none;overflow:visible}.drag-layer__piece{filter:drop-shadow(0 18px 18px rgba(14,39,54,.28))}.tray{border-radius:20px;padding:12px 12px calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}.tray__mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tray__mode-button{border:1px solid rgba(23,50,71,.14);border-radius:999px;background:#ffffffbd;color:var(--ink);padding:10px 12px;font-weight:700}.tray__mode-button.is-active{background:#173247;color:#fff;border-color:transparent}.tray__grid{height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:auto;padding-right:2px;overscroll-behavior:contain}.tray-card{display:grid;gap:8px;border-radius:22px;padding:12px;background:#ffffffb8;border:1px solid rgba(23,50,71,.1)}.tray-card__preview{height:78px;display:flex;align-items:center;justify-content:center;border-radius:18px;padding:10px;touch-action:none;background:radial-gradient(circle at top left,rgba(255,255,255,.72),transparent 50%),color-mix(in srgb,var(--accent) 15%,white)}.tray-card__preview svg{width:100%;height:100%;overflow:visible}.tray-card__shape{fill:var(--accent, #db8a4d);stroke:#173247;stroke-width:2.2;stroke-linejoin:round}.tray-card__body{display:grid;gap:2px}.tray-card__body h3{font-size:1rem;line-height:1.25;text-align:center}@media(min-width:900px){.app-shell{grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:minmax(0,1fr);gap:14px;padding:14px}.app-main{grid-column:1}.tray{grid-column:2;grid-row:1;border-radius:32px;align-self:stretch}.tray__grid{grid-template-columns:1fr}.board-frame{min-height:0}}