/* 街全体で一枚の広場を共有する。隊員は最大9人、横3列を固定。 */
.town-launch {
 position:relative; isolation:isolate; display:flex; flex-direction:column; min-height:100%; color:#f3ecda;
 background:linear-gradient(#17202d35,#17202d70),url('img/town_floor_ui_20260921.png') center top/384px 384px repeat;
 --town-scenery-height:190px;
 padding-bottom:20px;
}
/* 建物は上部の景色だけに使う。人数や画面幅によって足元へ拡大しない。 */
.town-launch::before { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; height:var(--town-scenery-height); pointer-events:none;
 background:linear-gradient(#17202d35,#17202d50),url('img/town_plaza_20260921.png') center top/cover no-repeat;
 mask-image:linear-gradient(#000 45%,transparent 100%);
}
.town-squad-stage { flex:0 0 auto; display:flex; flex-direction:column; }
.town-squad-heading { display:flex; justify-content:flex-end; padding:12px 24px 0; }
.town-party-selector { display:inline-flex; align-items:center; gap:8px; padding:4px 8px; background:#182330df; border:1px solid #ae987064; }
.town-squad-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; align-content:start; width:100%; max-width:1600px; box-sizing:border-box; margin:0 auto; padding:14px 4% 24px; gap:22px 14px; }
.town-squad-member { display:flex; flex-direction:column; min-width:0; text-align:center; }
/* 足裏の座標は848×1264の素体・靴から実測。人物全体の浮いた影は付けない。 */
.town-member-art { position:relative; isolation:isolate; flex:none; width:132px; max-width:100%; margin:0 auto 14px; }
.town-member-art::before,.town-member-art::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; }
.town-member-art::before { background:radial-gradient(ellipse 31% 4.5% at 52% 96%,#211a1690,transparent 80%); }
.town-member-art::after { background:radial-gradient(ellipse 12% 1.8% at 41% 93.6%,#16130fe0,transparent 85%),radial-gradient(ellipse 9% 1.8% at 65% 97.6%,#16130fe0,transparent 85%); }
.town-member-art[data-body="female"]::after { background:radial-gradient(ellipse 12% 1.8% at 40% 96%,#16130fe0,transparent 85%),radial-gradient(ellipse 8% 1.8% at 63% 97.8%,#16130fe0,transparent 85%); }
.town-member-art>.town-member-figure { position:relative; z-index:1; }
.town-member-figure { width:100%!important; height:auto!important; aspect-ratio:848/1264; }
.town-member-art-empty { height:196px; }
.town-member-plaque { flex:1; max-width:100%; background:linear-gradient(90deg,transparent,#17202de6 12%,#17202de6 88%,transparent); padding:7px 4px; border-bottom:1px solid #b9a37280; }
.town-member-plaque strong { display:block; font-size:16px; overflow-wrap:anywhere; }
.town-member-plaque small { display:block; color:#d0cfc5; font-size:14px; }
.town-member-plaque .hpbar { height:4px; max-width:95px; margin:5px auto; border:0; border-radius:0; background:#545759; }
.town-member-plaque .hpbar i { background:#91bca4; border-radius:0; }
.town-squad-member.is-commander strong { color:#ebd29c; }
.town-squad-loading { grid-column:1/-1; padding:30px 0; text-align:center; }
.town-preparation { flex-shrink:0; margin:0 24px 18px; padding:14px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; background:#192432e8; border:1px solid #ae987064; border-top:2px solid #bda673; }
.town-preparation-links { display:flex; flex-wrap:wrap; gap:4px; }
.town-preparation-links button { border:0; border-bottom:2px solid transparent; background:transparent; border-radius:0; padding:8px 14px; color:#f3ecda; font-size:16px; box-shadow:none; min-height:44px; }
.town-preparation-links .is-selected { border-color:#d9b86f; color:#ead2a0; background:#ffffff08; }
.town-preparation-status { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-left:auto; }
.town-preparation-status .preparation-resources { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:16px; color:#d0cfc5; }
.town-preparation-status .icon-text { display:inline-flex; }
.town-preparation .town-heal { min-height:44px; padding:8px 12px; font-size:16px; color:#e6edda; background:#30443fe6; border:1px solid #a6bda77a; border-radius:2px; }
.town-depart { min-height:44px; background:linear-gradient(#d1b77b,#ae8c4f); border:1px solid #f3db9f; box-shadow:inset 0 0 0 2px #86632a; color:#212631; border-radius:2px; padding:10px 28px; font-size:16px; font-weight:700; white-space:nowrap; }
.town-squad-heading > .town-depart { display:none; }
.town-facilities { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; padding:0 24px; margin:0 0 10px; }
.town-facilities button { background:#182330e8; padding:8px 14px; border:1px solid #ae987080; border-radius:2px; color:#f3ecda; font-size:16px; min-height:44px; box-shadow:none; }
.town-utilities { display:flex; align-self:center; justify-content:center; flex-wrap:wrap; gap:8px; margin:0 12px; }
.town-utilities button { padding:8px 14px; font-size:14px; min-height:44px; color:#c7c6bd; border:1px solid #ae987080; border-radius:2px; background:#182330d9; box-shadow:none; }
.town-launch>.commander-job-prompt { margin:12px 24px 0; }
@media(max-width:700px) {
 .town-launch { --town-scenery-height:140px; padding-bottom:12px; }
 .town-squad-heading { padding:8px 10px 0; }
 .town-squad-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 6px; padding:12px 8px 20px; }
 .town-member-art { width:95px; }
 .town-member-plaque { background:#17202dd9; padding:6px 2px; }
 .town-member-plaque strong,.town-member-plaque small { font-size:14px; }
 .town-member-plaque .hpbar { width:80%; max-width:60px; margin:4px auto; }
 .town-preparation { margin:0 10px 12px; padding:12px 10px; gap:12px; }
 .town-preparation-links { width:100%; justify-content:center; padding-bottom:6px; border-bottom:1px solid #786e5760; }
 .town-preparation-status { flex:1 1 100%; margin-left:0; justify-content:space-between; }
 .town-preparation-status .preparation-resources { flex:1 1 100%; justify-content:space-between; font-size:14px; }
 /* 出発は人数に左右されない街の先頭に置く。表示するボタンは常に一つ。 */
 .town-squad-heading > .town-depart { display:block; padding:10px 20px; }
 .town-preparation > .town-depart { display:none; }
 .town-facilities { padding-inline:10px; gap:6px; }
 .town-facilities button { padding:8px 10px; }
}
@media(max-width:700px) {
 .town-preparation-status { display:contents; }
 .town-preparation-status .preparation-resources { width:100%; }
}

/* 出発部隊とスカウト。部隊候補はブラウザ標準ポップアップを使わず枠内に展開する。 */
.town-squad-heading { justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.scout-entry { display:flex; align-items:flex-end; flex-direction:column; gap:3px; margin-left:auto; }
.scout-entry small { font-size:12px; color:var(--text-dim); }
.scout-entry .scout-open { white-space:nowrap; min-height:36px; }
.town-party-selector { display:block; width:fit-content; max-width:calc(100% - 20px); margin:8px 24px 0 auto; padding:0; }
.town-party-selector summary { display:flex; align-items:center; gap:8px; padding:6px 10px; cursor:pointer; list-style:none; min-height:40px; }
.town-party-selector summary::-webkit-details-marker { display:none; }
.town-party-options { display:grid; padding:4px; gap:4px; max-height:220px; overflow:auto; border-top:1px solid #ae987064; }
.town-party-options button { width:100%; min-width:0; text-align:left; background:transparent; border:0; padding:6px 10px; }
.town-party-options button[aria-pressed="true"] { background:#d4b57429; color:#efd099; }
.units-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.units-heading h1 { margin:0; }
@media(max-width:700px) { .town-party-selector { margin-right:10px; } }

/* 選択肢は隊員を押し下げず、手前に開く。 */
.town-party-selector { position:relative; z-index:5; }
.town-party-options { position:absolute; top:100%; right:-1px; min-width:calc(100% + 2px); width:max-content; max-width:min(80vw,320px); box-sizing:border-box; background:#202c38; border:1px solid #ae987064; box-shadow:0 8px 18px #0006; z-index:6; }

.cosmetic-preview { display:flex; justify-content:center; min-height:180px; }

.loot-loss-visual { position:relative; height:100px; overflow:hidden; }
.loot-loss-bag { position:absolute; width:78px; height:78px; object-fit:contain; left:calc(50% - 39px); top:0; animation:loss-shake .45s ease-in-out; }
.loot-loss-drop { position:absolute; left:calc(50% - 12px); top:32px; animation:loss-spill 1.1s ease-in var(--delay) both; }
.loot-loss-drop .ui-icon { width:24px; height:24px; }
@keyframes loss-shake { 20%,60% { transform:rotate(-9deg); } 40%,80% { transform:rotate(9deg); } }
@keyframes loss-spill { 0% { transform:translate(0,0); opacity:0; } 15% { opacity:1; } 45% { transform:translate(calc(var(--scatter) * .6),-12px); opacity:1; } 100% { transform:translate(var(--scatter),66px) rotate(25deg); opacity:0; } }
@media(prefers-reduced-motion:reduce) { .loot-loss-bag,.loot-loss-drop { animation:none; } .loot-loss-drop { transform:translate(var(--scatter),40px); opacity:.65; } }