.island-play { min-height: 0; }
.island-wrap { width: 100%; }
.island-wrap [hidden] { display: none !important; }
.island-hud { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.island-stat { padding:10px 11px; border:1px solid var(--line); border-radius:10px; background:#101012; min-width:0; }
.island-stat span { display:block; color:var(--muted); font-size:.58rem; font-weight:900; letter-spacing:.1em; margin-bottom:3px; }
.island-stat strong { display:block; font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-bars { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.status-bars > div { display:grid; gap:5px; }
.status-bars span { color:var(--muted); font-size:.65rem; font-weight:800; }
.status-bars i { height:7px; overflow:hidden; border-radius:999px; background:#27272c; }
.status-bars b { display:block; height:100%; width:0; border-radius:inherit; background:var(--accent); transition:width .2s ease; }
.status-bars .danger b { background:#ff6b6b; }

.story-dialogue { min-height:156px; padding:18px 20px 22px; margin-bottom:14px; border:1px solid var(--line-strong); border-radius:14px; background:#111113; display:flex; flex-direction:column; justify-content:space-between; }
.story-dialogue-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.story-label { color:var(--accent); font-size:.62rem; font-weight:900; letter-spacing:.14em; }
.story-location { min-width:0; display:flex; align-items:baseline; justify-content:flex-end; gap:7px; color:var(--muted); font-size:.68rem; text-align:right; }
.story-location small { font-size:.62rem; color:var(--muted); }
.story-location strong { max-width:210px; color:var(--text); font-size:.74rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-text { margin:0; color:var(--text); font-size:clamp(.96rem,2.6vw,1.08rem); line-height:1.9; letter-spacing:.01em; text-align:left; }

.island-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.island-action { min-height:118px; padding:16px; border:1px solid var(--line-strong); border-radius:14px; background:#171719; color:var(--text); font:inherit; cursor:pointer; display:flex; flex-direction:column; justify-content:center; gap:6px; text-align:left; }
.island-action:hover { border-color:#5b5b64; background:#1d1d20; }
.island-action strong { font-size:1rem; }
.island-action small { color:var(--muted); line-height:1.45; }
.island-action.primary strong { color:var(--accent); }
.island-action.danger { border-color:rgba(255,107,107,.35); }
.island-action:disabled { opacity:.45; cursor:not-allowed; }

.inventory-panel { margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#101012; }
.inventory-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:10px; }
.inventory-head h2 { margin:0; font-size:.86rem; }
.inventory-head span { color:var(--muted); font-size:.72rem; }
.inventory-head-main { margin-bottom:0; }
.inventory-head-main > div { min-width:0; display:grid; gap:4px; }
.inventory-toggle { min-height:42px; padding:0 14px; border:1px solid var(--line-strong); border-radius:10px; background:#171719; color:var(--text); font:inherit; font-size:.78rem; font-weight:850; cursor:pointer; white-space:nowrap; }
.inventory-toggle:hover { border-color:#5b5b64; background:#1d1d20; }
.inventory-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.inventory-modal[hidden],.travel-modal[hidden] { display:none !important; }
.inventory-modal,.travel-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px; }
.inventory-backdrop,.travel-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background:rgba(0,0,0,.72); cursor:pointer; }
.inventory-dialog,.travel-dialog { position:relative; z-index:1; width:min(620px,100%); max-height:min(78vh,720px); overflow:auto; padding:22px; border:1px solid var(--line-strong); border-radius:18px; background:#101012; color:var(--text); box-shadow:0 24px 70px rgba(0,0,0,.48); }
.inventory-dialog:focus,.travel-dialog:focus { outline:none; }
.inventory-dialog-head,.travel-dialog-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.inventory-dialog-label,.travel-dialog-label { margin:0 0 4px; color:var(--accent); font-size:.65rem; font-weight:900; letter-spacing:.14em; }
.inventory-dialog-head h2,.travel-dialog-head h2 { margin:0; font-size:1.25rem; }
.travel-dialog-head p { margin:5px 0 0; color:var(--muted); font-size:.74rem; line-height:1.5; }
.inventory-close,.travel-close { width:42px; height:42px; flex:0 0 auto; border:1px solid var(--line-strong); border-radius:10px; background:#171719; color:var(--text); font:inherit; font-size:1.35rem; line-height:1; cursor:pointer; }
.inventory-close:hover,.travel-close:hover { border-color:#5b5b64; background:#1d1d20; }
.inventory-guide { margin:0 0 12px; color:var(--muted); font-size:.75rem; line-height:1.6; }
.inventory-list { display:grid; gap:7px; }
.inventory-list-item { width:100%; min-height:48px; padding:0 13px; border:1px solid var(--line); border-radius:10px; background:#171719; color:var(--text); font:inherit; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; }
.inventory-list-item:hover { border-color:#5b5b64; background:#1d1d20; }
.inventory-list-item[aria-pressed="true"] { border-color:var(--accent); }
.inventory-list-name { min-width:0; display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:800; }
.inventory-list-name small { color:var(--muted); font-size:.68rem; font-weight:700; }
.inventory-list-count { flex:0 0 auto; color:var(--accent); font-size:.82rem; font-weight:900; }
.inventory-empty { margin:16px 0 4px; color:var(--muted); font-size:.8rem; text-align:center; }
.inventory-selected { margin-top:14px; padding:14px; border:1px solid var(--line-strong); border-radius:12px; background:#151517; }
.inventory-selected-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.inventory-selected-label { margin:0 0 3px; color:var(--accent); font-size:.6rem; font-weight:900; letter-spacing:.12em; }
.inventory-selected h3 { margin:0; font-size:1rem; }
.inventory-selected-head > strong { color:var(--accent); font-size:.9rem; }
.inventory-selected-description { margin:8px 0 12px; color:var(--muted); font-size:.74rem; line-height:1.6; }
.inventory-item-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.inventory-item-actions button { min-height:44px; padding:0 10px; border:1px solid var(--line-strong); border-radius:9px; background:#1b1b1e; color:var(--text); font:inherit; font-size:.78rem; font-weight:850; cursor:pointer; }
.inventory-item-actions button:hover:not(:disabled) { border-color:#5b5b64; background:#222226; }
.inventory-item-actions button:disabled { opacity:.35; cursor:not-allowed; }
.inventory-item-actions button:last-child:not(:disabled) { color:var(--accent); }
.inventory-list-item:focus-visible,.inventory-item-actions button:focus-visible,.inventory-close:focus-visible,.inventory-close-bottom:focus-visible,.travel-close:focus-visible,.map-place:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.inventory-close-bottom { width:100%; min-height:46px; margin-top:18px; border:1px solid var(--line-strong); border-radius:10px; background:#171719; color:var(--text); font:inherit; font-weight:850; cursor:pointer; }
.inventory-close-bottom:hover { border-color:#5b5b64; background:#1d1d20; }
body.inventory-modal-open,body.travel-modal-open { overflow:hidden; }

.island-map { position:relative; width:100%; aspect-ratio:1.35/1; min-height:360px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:radial-gradient(circle at 50% 50%,#171719 0 48%,#0c0c0e 74%); }
.island-map-shape { position:absolute; inset:9% 10% 8%; border:1px solid #4d4d55; border-radius:47% 53% 43% 57% / 40% 39% 61% 60%; background:linear-gradient(145deg,#242427,#18181b); transform:rotate(-3deg); }
.island-map-shape::before { content:""; position:absolute; inset:12% 18%; border:1px dashed #3c3c42; border-radius:50% 42% 55% 46%; opacity:.7; }
.map-place { position:absolute; z-index:2; min-width:104px; min-height:56px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:11px; background:#111113; color:var(--text); font:inherit; cursor:pointer; display:grid; gap:2px; text-align:center; box-shadow:0 4px 18px rgba(0,0,0,.28); }
.map-place strong { font-size:.78rem; }
.map-place small { color:var(--muted); font-size:.62rem; }
.map-place:hover:not(:disabled) { border-color:var(--accent); background:#1c1c1f; }
.map-place.is-current,.map-place:disabled { border-color:var(--accent); background:#202217; color:var(--accent); cursor:default; opacity:1; }
.map-place.is-current small,.map-place:disabled small { color:var(--accent); opacity:.78; }
.map-place-lighthouse { top:12%; right:11%; }
.map-place-spring { top:19%; left:42%; }
.map-place-forest { top:43%; left:11%; }
.map-place-hut { top:47%; right:27%; }
.map-place-pier { right:12%; bottom:13%; }
.map-place-beach { left:18%; bottom:10%; }
.travel-current { margin:12px 0 0; color:var(--muted); font-size:.76rem; text-align:right; }
.travel-current strong { color:var(--text); }

.island-footer-actions { display:flex; justify-content:center; margin-top:14px; }
.island-subchoices { grid-column:1/-1; display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#101012; }
.island-subchoices h3 { margin:0; font-size:.82rem; }
.island-subchoices-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.island-subchoices .island-action { min-height:76px; }

@media (max-width:760px) {
  .island-hud { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .status-bars { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .game-shell { width:min(calc(100% - 24px),900px); padding-top:38px; }
  .play-area { padding:14px; }
  .story-dialogue { min-height:142px; padding:15px 16px 18px; }
  .story-dialogue-head { margin-bottom:14px; }
  .story-location strong { max-width:140px; }
  .island-actions { grid-template-columns:1fr; gap:8px; }
  .island-action { min-height:78px; padding:13px 14px; }
  .inventory-head-main { align-items:stretch; flex-direction:column; }
  .inventory-toggle { width:100%; }
  .inventory-modal,.travel-modal { padding:12px; align-items:end; }
  .inventory-dialog,.travel-dialog { width:100%; max-height:82vh; padding:18px; border-radius:16px 16px 10px 10px; }
  .inventory-item-actions { grid-template-columns:1fr; }
  .island-subchoices-grid { grid-template-columns:1fr; }
  .island-map { min-height:430px; aspect-ratio:auto; }
  .map-place { min-width:92px; min-height:52px; padding:7px 8px; }
  .map-place-lighthouse { top:10%; right:5%; }
  .map-place-spring { top:22%; left:36%; }
  .map-place-forest { top:43%; left:4%; }
  .map-place-hut { top:48%; right:18%; }
  .map-place-pier { right:5%; bottom:12%; }
  .map-place-beach { left:10%; bottom:9%; }
}