:root {
  color-scheme: dark;
  background: #0878ba;
  /* The menu: dark glass that lets the map show through at half strength, in a golden frame. */
  --glass: rgba(10, 22, 40, .5);
  --glass-hover: rgba(10, 22, 40, .66);
  --gold: #ffd36a;
  --gold-line: #c9831c;
  --ui-left: max(14px, env(safe-area-inset-left));
  --ui-right: max(14px, env(safe-area-inset-right));
  --ui-top: max(14px, env(safe-area-inset-top));
  --ui-bottom: max(14px, env(safe-area-inset-bottom));
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
.viewport {
  width: 100%; height: 100vh; height: 100dvh;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: #1b78c8;
}
/* The same painted surround is visible while the engine and sprites load. */
/* The Pixi canvas fills this box; the map is drawn and moved inside it. */
.game { position: absolute; inset: 0; }
.game canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.game canvas.over-zone { cursor: pointer; }
.game canvas.dragging { cursor: grabbing; }
/* Static image shown until the engine starts, and kept when WebGL is unavailable. */
.map-fallback { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- Menu ---- */
.ui { position: absolute; inset: 0; pointer-events: none; z-index: 2; font: 14px/1.3 system-ui, sans-serif; color: #fff; }
.panel {
  background: var(--glass);
  border: 1.5px solid var(--gold-line);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button { font: inherit; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.player-menu { position: absolute; left: var(--ui-left); top: var(--ui-top); }
.player {
  position: relative; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--gold); background: rgba(28, 58, 94, .5); color: var(--gold);
}
.player-name { font-size: 14px; font-weight: 600; }
.player-level { font-size: 12px; color: var(--gold); }
.resources { display: flex; gap: 10px; margin-left: 4px; color: var(--gold); font-size: 13px; }
.resource { display: flex; align-items: center; gap: 4px; }
.resource .icon { width: 16px; height: 16px; }
.chevron { width: 18px; height: 18px; margin-left: 2px; color: var(--gold); transition: transform .2s; }
.player:hover, .player-menu.open .player { background: var(--glass-hover); }
.player-menu.open .chevron { transform: rotate(180deg); }

.tools { position: absolute; right: var(--ui-right); top: var(--ui-top); display: flex; gap: 8px; }
.round-button {
  width: 42px; height: 42px; border-radius: 12px; padding: 0;
  display: grid; place-items: center; color: var(--gold); cursor: pointer;
  transition: box-shadow .15s, background .15s, transform .1s;
}
.round-button.flat { width: 36px; height: 36px; border: 0; background: transparent; }
.round-button:hover { background: var(--glass-hover); box-shadow: 0 0 14px rgba(255, 211, 106, .5); }
.round-button.flat:hover { background: rgba(255, 211, 106, .16); box-shadow: none; }
.round-button:active { transform: scale(.95); }
.round-button.active { background: var(--glass-hover); border-color: var(--gold); }

/* The main menu drops down under the player card: on hover, and on click, tap or keyboard focus. */
.menu-list {
  position: absolute; left: 0; top: 100%; margin-top: 8px; min-width: 210px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 16px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s .16s;
}
.menu-list::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }   /* keeps the hover while the pointer crosses the gap */
.player-menu.open .menu-list,
.player-menu:has(:focus-visible) .menu-list {
  opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
@media (hover: hover) {
  .player-menu:hover .menu-list { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease, visibility 0s; }
  .player-menu:hover .chevron { transform: rotate(180deg); }
}
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px;
  background: transparent; color: #fff; cursor: pointer; text-align: left; font-size: 15px;
  transition: background .15s, box-shadow .15s;
}
.menu-item .icon { width: 22px; height: 22px; color: var(--gold); }
.menu-label { flex: 1; }
.menu-key {
  min-width: 22px; padding: 1px 6px; border: 1px solid rgba(255, 211, 106, .5); border-radius: 6px;
  color: var(--gold); font: 12px/1.5 system-ui, sans-serif; text-align: center;
}
.menu-item:hover { background: rgba(255, 211, 106, .16); box-shadow: 0 0 14px rgba(255, 211, 106, .3); }
.menu-item.active { background: rgba(255, 211, 106, .26); }

.drawer {
  position: absolute; right: var(--ui-right);
  top: calc(var(--ui-top) + 54px); bottom: var(--ui-bottom);
  width: min(360px, calc(100% - 28px)); border-radius: 16px;
  display: flex; flex-direction: column;
  transform: translateX(24px); opacity: 0; visibility: hidden;
  transition: transform .22s ease, opacity .22s ease, visibility 0s .22s;
}
.drawer.open { transform: none; opacity: 1; visibility: visible; transition: transform .22s ease, opacity .22s ease, visibility 0s; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 10px 8px 16px; border-bottom: 1px solid rgba(201, 131, 28, .5);
}
.drawer-title { margin: 0; font-size: 17px; font-weight: 600; }
.drawer-body { flex: 1; overflow: auto; padding: 8px 16px 14px; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 8px; text-align: center; }
.empty-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--gold-line); color: var(--gold); }
.empty-icon .icon { width: 30px; height: 30px; }
.empty-title { font-size: 16px; font-weight: 600; }
.empty-text { font-size: 14px; color: rgba(255, 255, 255, .8); }

.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.row-label { font-size: 15px; font-weight: 600; }
.row-hint { margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.row.stacked { flex-direction: column; align-items: stretch; gap: 10px; }
.segments { display: flex; flex-wrap: wrap; gap: 6px; }
.segment {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--gold-line); background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px;
  transition: background .15s, color .15s;
}
.segment:hover { background: rgba(255, 211, 106, .2); }
.segment.on { background: rgba(255, 211, 106, .7); color: #1b1305; border-color: var(--gold); }
.switch {
  position: relative; flex: none; width: 46px; height: 26px; padding: 0;
  border-radius: 999px; border: 1.5px solid var(--gold-line);
  background: rgba(255, 255, 255, .14); cursor: pointer; transition: background .15s;
}
.switch-knob { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch.on { background: rgba(255, 211, 106, .6); }
.switch.on .switch-knob { transform: translateX(20px); }

/* Messages over the map: the toast above the menu, the way back under the player's card. */
.toast {
  position: absolute; left: 50%; bottom: calc(var(--ui-bottom) + 6px);
  transform: translate(-50%, 12px);
  max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 10px;
  background: var(--glass); border: 1.5px solid var(--gold-line); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 15px/1.3 system-ui, sans-serif; text-align: center;
  opacity: 0; pointer-events: none; z-index: 3;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.back-button {
  position: absolute; left: 50%; top: var(--ui-top); translate: -50% 0;
  padding: 8px 14px; border-radius: 10px;
  background: var(--glass); border: 1.5px dashed var(--gold); color: var(--gold);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; font: 14px/1.2 system-ui, sans-serif;
  opacity: 0; pointer-events: none; z-index: 3;
  transition: opacity .2s, background .15s;
}
.back-button.show { opacity: 1; pointer-events: auto; }
.back-button:hover { background: var(--glass-hover); }

/* Narrow screens: a smaller card, the drawer rises from the bottom instead of sliding from the side. */
@media (max-width: 640px) {
  .resources { display: none; }
  .player { padding-right: 12px; }
  .drawer {
    left: var(--ui-left); right: var(--ui-right); top: auto; width: auto;
    bottom: var(--ui-bottom); height: min(56vh, 460px);
    transform: translateY(24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer.open, .switch-knob, .toast, .back-button, .round-button, .menu-item, .menu-list, .chevron { transition: none; }
}

/* Email sign-in: ordinary HTML above the living map. */
.auth-dialog { box-sizing: border-box; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 32px; color: #fff3d6; background: linear-gradient(145deg, #1b3557, #10223c); border: 1px solid #d6ad5d; border-radius: 24px; box-shadow: 0 24px 90px #0009; font: 15px/1.5 system-ui, sans-serif; }
.auth-dialog::backdrop { background: #07142699; backdrop-filter: blur(4px); }
.auth-dialog h2 { margin: 8px 0; text-align: center; font-size: 26px; }
.auth-emblem { text-align: center; color: #f4c76a; font-size: 32px; }
.auth-intro, .auth-note { color: #bfcbdc; text-align: center; }
.auth-intro { margin: 0 0 24px; }
.auth-note { font-size: 12px; margin: 12px 0 0; }
.auth-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: #e9cf9a; font-size: 28px; cursor: pointer; }
.auth-dialog label { display: block; margin: 16px 0 7px; font-weight: 600; }
.auth-dialog input { box-sizing: border-box; width: 100%; min-height: 48px; border: 1px solid #71829c; border-radius: 10px; background: #0b1b30; color: white; padding: 12px; font: inherit; }
.auth-dialog input:focus-visible, .auth-dialog button:focus-visible { outline: 2px solid #ffe0a0; outline-offset: 3px; }
.auth-send, .auth-submit { width: 100%; min-height: 46px; margin-top: 12px; border: 1px solid #d6ad5d; border-radius: 10px; font: 600 15px system-ui; cursor: pointer; }
.auth-send { background: #ffffff0a; color: #f4d694; }
.auth-submit { background: #edc36e; color: #152740; }
.auth-dialog button:disabled { opacity: .55; cursor: wait; }
.auth-message { margin: 16px 0 0; color: #f3d79c; font-size: 13px; overflow-wrap: anywhere; }
.player-menu.guest .menu-list { display: none; }
.player-menu.guest:hover .chevron { transform: none; }

/* Character profile: the same glass and gold frame as sign-in. */
.player-names { min-width: 0; }
.player-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { flex-shrink: 0; font-size: 24px; line-height: 1; }
.profile-preview { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 50%; border: 1px solid #d6ad5d; background: #0b1b30; font-size: 44px; }
.profile-avatars { padding: 0; margin: 24px 0; border: 0; }
.profile-avatars legend { margin-bottom: 12px; font-weight: 600; }
.profile-avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.profile-avatar-option { min-width: 0; height: 48px; display: grid; place-items: center; font-size: 28px; border-radius: 12px; border: 1px solid #71829c; background: #0b1b30; cursor: pointer; }
.profile-avatar-option[aria-pressed="true"] { border-color: #ffd36a; background: #f0be6230; box-shadow: 0 0 0 1px #ffd36a; }
.profile-status { min-height: 20px; margin-bottom: 0; font-size: 13px; color: #f3d79c; }
.profile-dialog input[readonly] { color: #a6b7cf; }
.profile-dialog input[aria-invalid="true"] { border-color: #f5a19c; }
@media (max-width: 380px) { .profile-dialog { padding: 24px; } .profile-avatar-grid { grid-template-columns: repeat(3, 1fr); } .player-name { max-width: 100px; } }

/* Menu sections share the centered dialog presentation with Profile. */
dialog.drawer {
  position: fixed; inset: 0; margin: auto;
  width: min(480px, calc(100vw - 32px)); height: fit-content;
  min-height: 280px; max-height: calc(100dvh - 32px);
  border: 1px solid #d6ad5d; border-radius: 24px;
  background: linear-gradient(145deg, #1b3557, #10223c);
  color: #fff3d6; box-shadow: 0 24px 90px #0009;
  padding: 8px; transform: none; opacity: 1; visibility: visible;
  pointer-events: auto; overflow: hidden;
}
dialog.drawer:not([open]) { display: none; }
dialog.drawer[open] { display: flex; flex-direction: column; }
dialog.drawer::backdrop { background: #07142699; backdrop-filter: blur(4px); }
dialog.drawer .drawer-head { flex-shrink: 0; padding: 12px 16px; }
dialog.drawer .drawer-title { font-size: 22px; }
dialog.drawer .drawer-body { min-height: 0; overflow: auto; }
dialog.drawer .empty { padding: 30px 8px 40px; }
dialog.drawer .empty-text { max-width: 300px; }


/* Character: fixed header/footer and one scrollable inventory. */
.profile-dialog { position: fixed; width: min(980px, calc(100vw - 32px)); height: min(600px, calc(100dvh - 32px)); padding: 24px; }
.profile-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.character-header { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 12px; padding: 0 20px; flex-shrink: 0; }
.character-name-heading { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.character-name-heading:focus-visible { outline: 2px solid #ffe0a0; outline-offset: 4px; border-radius: 6px; }
.character-rank { color: #d6ad5d; font-size: 15px; }
.profile-dialog .character-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); flex: 1; min-height: 0; gap: 28px; margin-top: 16px; overflow: hidden; }
.character-equipment { min-width: 0; min-height: 0; }
.equipment-stage { display: grid; grid-template-columns: 62px minmax(0, 1fr) 62px; align-items: center; gap: 8px; height: 100%; min-height: 0; background: radial-gradient(ellipse, #e2bb6420, transparent 70%); }
.equipment-slots { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 10px; height: min(100%, 290px); }
.equipment-slot { min-height: 0; border: 1px solid #d6ad5d66; border-radius: 12px; background: #0b1b3080; text-align: center; display: grid; place-content: center; font-size: 10px; color: #bfcbdc; }
.equipment-slot > span:first-child { font-size: 25px; color: #d6ad5d; }
.character-figure { min-height: 0; height: 100%; }
.character-figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
.character-backpack { min-width: 0; min-height: 0; border-left: 1px solid #d6ad5d33; padding-left: 24px; }
.backpack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); align-content: start; gap: 8px; height: 100%; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 3px; scrollbar-width: thin; scrollbar-color: #d6ad5d77 transparent; }
.backpack-cell { aspect-ratio: 1; border: 1px solid #71829c66; border-radius: 10px; background: #0b1b3080; }
.character-stats { display: flex; justify-content: center; align-items: center; gap: 32px; flex-shrink: 0; border-top: 1px solid #d6ad5d55; margin-top: 16px; padding-top: 12px; color: #bfcbdc; }
.character-stats strong { color: #f3d79c; }
.character-resource { display: flex; align-items: center; gap: 8px; }
.character-resource svg { width: 30px; height: 30px; }
.rename-dialog { position: fixed; }
.rename-dialog input[aria-invalid="true"] { border-color: #f5a19c; }
@media (max-width: 600px) and (orientation: portrait) {
  .profile-dialog { padding: 18px; height: min(760px, calc(100dvh - 24px)); width: calc(100vw - 24px); }
  .profile-dialog .character-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
  .character-backpack { border-left: 0; border-top: 1px solid #d6ad5d33; padding: 12px 0 0; }
  .backpack-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .equipment-stage { grid-template-columns: 56px minmax(0, 1fr) 56px; }
}
@media (max-height: 450px) {
  .profile-dialog { padding: 12px 18px; }
  .profile-dialog .character-layout { margin-top: 6px; gap: 14px; }
  .equipment-slots { gap: 4px; }
  .equipment-slot { font-size: 8px; }
  .equipment-slot > span:first-child { font-size: 18px; }
  .character-stats { margin-top: 8px; padding-top: 6px; }
}

.rename-dialog { width: min(560px, calc(100vw - 32px)); }
.character-look-options { border: 0; margin: 18px 0 0; padding: 0; }
.character-look-options legend { color: #bfcbdc; margin-bottom: 10px; }
.character-look-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.character-look-option { display: flex; flex-direction: column; align-items: center; padding: 8px; gap: 6px; background: #0b1b3070; color: #fff3d6; border: 1px solid #71829c; border-radius: 12px; cursor: pointer; font: inherit; }
.character-look-option img { width: 100%; height: clamp(110px, 24dvh, 190px); object-fit: contain; }
.character-look-option[aria-pressed="true"] { border-color: #ffd36a; background: #f0be6220; box-shadow: 0 0 0 1px #ffd36a; }
.character-look-option:disabled { cursor: wait; opacity: .6; }

.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; width: 280%; max-width: none; height: auto; left: 50%; top: -2px; transform: translateX(-50%); }
.change-email-button { flex-shrink: 0; padding: 9px 12px; border: 1px solid #d6ad5d; border-radius: 10px; background: #ffffff0a; color: #f4d694; font: inherit; cursor: pointer; }

.equipment-slot svg { width: 44px; height: 44px; max-width: 90%; max-height: 100%; filter: drop-shadow(0 2px 2px #0004); }
@media (max-height: 450px) { .equipment-slot svg { width: 28px; height: 28px; } }
/* Painted ship location, independent of the island map. */
.ship-location { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; background: #082039; overflow: auto; color: #fff3d6; }
.ship-location[open] { display: grid; place-items: center; }
.ship-location::backdrop { background: #082039; }
.ship-stage { position: relative; width: min(100vw, calc(100dvh * 1.5)); aspect-ratio: 3 / 2; flex-shrink: 0; }
.ship-background, .ship-motion { position: absolute; width: 100%; height: 100%; inset: 0; display: block; }
.ship-motion { opacity: 0; pointer-events: none; } .ship-motion.ready { opacity: 1; }
.ship-toolbar { position: fixed; top: 18px; left: 18px; display: flex; gap: 14px; align-items: center; padding: 8px 14px 8px 8px; background: #10223cdd; border: 1px solid #d6ad5d88; border-radius: 16px; font: 15px system-ui; }
.ship-back { background: #ffffff12; border: 1px solid #d6ad5d88; border-radius: 10px; color: #fff3d6; padding: 10px 14px; cursor: pointer; font: inherit; }
.ship-person { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 95%; }
.ship-person img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 5px 3px #37241055); animation: ship-breathe 4.5s ease-in-out infinite; }
.ship-captain { left: 19%; bottom: 54%; width: 11%; height: 24%; }
.ship-boatswain { left: 40%; bottom: 17%; width: 16%; height: 31%; }
.ship-boatswain img { animation-delay: -2s; }
.ship-person:hover img, .ship-person:focus-visible img { filter: drop-shadow(0 0 8px #ffe0a0); }
.ship-activity { position: absolute; width: 44px; height: 44px; border: 1px solid #f4d694; border-radius: 50%; background: #16324dd9; color: #ffe0a0; cursor: pointer; display: grid; place-items: center; font-size: 26px; box-shadow: 0 3px 12px #0005; }
.ship-cargo { left: 62%; top: 77%; } .ship-route { left: 78%; top: 53%; } .ship-signals { left: 84%; top: 19%; }
.ship-label { position: absolute; top: calc(100% + 6px); padding: 6px 9px; font: 13px system-ui; white-space: nowrap; border-radius: 8px; background: #10223cee; opacity: 0; pointer-events: none; }
.ship-activity:hover .ship-label, .ship-activity:focus-visible .ship-label { opacity: 1; }
.ship-lantern { position: absolute; width: 3%; aspect-ratio: 1; background: radial-gradient(circle, #fff3b666, #ffb52b22 35%, transparent 70%); pointer-events: none; animation: ship-lamp 3s ease-in-out infinite; }
.ship-lantern-one { left: 38.3%; top: 36.2%; } .ship-lantern-two { left: 72.5%; top: 42%; animation-delay: -1.5s; }
.ship-activity-art { text-align: center; color: #d6ad5d; font-size: 80px; margin: 16px 0; }
.ship-activity-art img { height: 240px; max-width: 100%; object-fit: contain; }
@keyframes ship-breathe { 50% { transform: translateY(-1.5px) scaleY(1.008); } }
@keyframes ship-lamp { 50% { opacity: .45; transform: scale(.9); } }
.ship-location.calm * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .ship-location * { animation: none !important; } }
@media (max-width: 600px) and (orientation: portrait) { .ship-location[open] { display: block; } .ship-stage { width: calc(100dvh * 1.5); height: 100dvh; } .ship-toolbar { top: 10px; left: 10px; } }

.ship-toolbar { padding: 6px; gap: 6px; border-radius: 14px; }
.ship-back, .ship-animation { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: #16324ddd; border: 1px solid #d6ad5d88; color: #fff3d6; border-radius: 10px; cursor: pointer; font-size: 20px; }
.ship-back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ship-person { border-radius: 35%; }
.ship-person:hover { background: none; box-shadow: none; outline: none; }
.ship-person:focus-visible { background: none; box-shadow: none; outline: 1px solid #d6ad5d; }
.ship-captain { left: 9%; bottom: 61%; width: 14%; height: 22%; }
.ship-boatswain { left: 32%; bottom: 12%; width: 20%; height: 29%; }

.ship-boatswain { left: 27%; bottom: 20%; width: 22%; height: 31%; }
.ship-captain { left: 8%; bottom: 63%; width: 13%; height: 22%; }

/* Edge-to-edge deck with a single quiet return control. */
.ship-location[open] { display: block; overflow: hidden; }
.ship-stage { position: absolute; width: max(100vw, calc(100dvh * 1.5)); height: max(100dvh, calc(100vw / 1.5)); aspect-ratio: 3 / 2; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ship-toolbar { top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); padding: 0; background: none; border: 0; border-radius: 0; }
.ship-back { width: 46px; height: 46px; border: 0; border-radius: 50%; background: #10223caa; color: #fff3d6; box-shadow: 0 3px 12px #0003; }
.ship-back:hover { background: #10223cdd; }
.ship-back:focus-visible { outline: 2px solid #fff3d6; outline-offset: 3px; }
.ship-back svg { stroke-width: 2; stroke-linecap: round; }
@media (max-width: 600px) and (orientation: portrait) {
  .ship-location[open] { overflow-x: auto; overflow-y: hidden; }
  .ship-stage { position: relative; left: 0; top: 0; transform: none; width: calc(100dvh * 1.5); height: 100dvh; }
}

.ship-toolbar { top: auto; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; padding: 7px; background: #10223ccc; border-radius: 20px; box-shadow: 0 5px 24px #0005; }
.ship-toolbar > button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #f3d79c; cursor: pointer; font-size: 25px; display: grid; place-items: center; }
.ship-toolbar .ship-back { background: #e6bd6625; box-shadow: none; }
.ship-toolbar > button:hover { background: #e6bd6635; }
.ship-game-dialog { position: fixed; width: min(740px, calc(100vw - 24px)); padding: 28px; }
.game-instruction { color: #bfcbdc; text-align: center; font-size: 14px; }
.game-status { min-height: 24px; text-align: center; color: #f3d79c; }
.game-status.won { color: #a8e2b9; }
.game-controls { display: flex; justify-content: center; gap: 12px; }
.game-button { min-width: 48px; min-height: 42px; padding: 8px 16px; border: 1px solid #d6ad5d88; background: #193652; color: #fff3d6; border-radius: 10px; font: inherit; cursor: pointer; }
.puzzle-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; max-width: 420px; margin: 18px auto; }
.puzzle-cell { aspect-ratio: 1; min-width: 0; border: 1px solid #738b9b66; border-radius: 7px; background: #0b1b30; color: #fff3d6; font-size: 22px; cursor: pointer; }
.cargo-tray { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cargo-piece { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7px; min-height: 64px; background: #0b1b30; color: #fff3d6; border: 1px solid #71829c; border-radius: 9px; cursor: pointer; }
.cargo-piece[aria-pressed="true"] { border-color: #ffd36a; box-shadow: 0 0 0 1px #ffd36a; }
.cargo-piece:disabled { opacity: .25; }
.cargo-mini { display: flex; flex-wrap: wrap; gap: 2px; max-width: 42px; margin-bottom: 6px; }
.cargo-mini i { width: 8px; height: 8px; border-radius: 2px; }
.crate-color-0 { background: #df765b; } .crate-color-1 { background: #e9c369; } .crate-color-2 { background: #6ca8c7; } .crate-color-3 { background: #9cb878; } .crate-color-4 { background: #a68ac5; } .crate-color-5 { background: #d695b0; }
.sea-cell { background: #21577c; } .sea-cell.reef { background: #546372; color: #c6d1dc; } .sea-cell.ship-position { border-color: #ffe0a0; background: #307f9d; }
.route-counter { text-align: center; color: #f3d79c; }
.signal-key, .signal-message { display: flex; justify-content: center; gap: 12px; margin: 24px 0; }
.signal-key-item, .signal-answer { display: grid; gap: 10px; justify-items: center; }
.signal-flag { display: grid; place-items: center; width: 62px; height: 52px; border-radius: 5px; font-size: 32px; box-shadow: 0 2px 8px #0004; }
.flag-0 { background: #e4c354; color: #153761; } .flag-1 { background: #285b94; color: #fff; } .flag-2 { background: #e57760; color: #fff; } .flag-3 { background: #f0e6c9; color: #cb5e48; }
.signal-answer select { width: 62px; padding: 8px; background: #0b1b30; color: #fff3d6; border: 1px solid #d6ad5d88; border-radius: 8px; font-size: 18px; }
@media (max-width: 600px) { .ship-game-dialog { padding: 24px 16px; } .cargo-tray { grid-template-columns: repeat(3, minmax(0,1fr)); } .signal-key, .signal-message { gap: 6px; } .signal-flag { width: 48px; height: 44px; } .signal-answer select { width: 48px; } }

.cargo-mini { display: grid; max-width: none; }
.cargo-width-1 { grid-template-columns: repeat(1, 8px); }
.cargo-width-2 { grid-template-columns: repeat(2, 8px); }
.cargo-width-3 { grid-template-columns: repeat(3, 8px); }
.cargo-width-4 { grid-template-columns: repeat(4, 8px); }
.cargo-width-5 { grid-template-columns: repeat(5, 8px); }

.game-reward-note { text-align: center; color: #f3d79c; font-size: 13px; padding: 8px; background: #e6bd6612; border-radius: 8px; }
.ship-location > .player-menu { position: fixed; top: 16px; left: 16px; z-index: 10; pointer-events: auto; }
@media (max-width: 600px) { .ship-location > .player-menu { top: 10px; left: 10px; } .resources { gap: 8px; } }

.ship-location > .player-menu { font: 14px/1.3 system-ui, sans-serif; color: #fff; }

.ship-toolbar > button { position: relative; }
.ship-activity.first-victory::after, .ship-toolbar > .first-victory::after { content: "✓"; position: absolute; right: -3px; top: -3px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #2e725a; color: #d9ffdb; font: bold 11px system-ui; }

.player { max-width: calc(100vw - 32px); box-sizing: border-box; }
.player .resources { flex-shrink: 0; }
@media (max-width: 600px) { .player { gap: 6px; padding-right: 8px; } }
/* Storybook puzzle boards. */
.ship-game-dialog { width: min(820px, calc(100vw - 24px)); padding: 26px 30px 22px; color: #4e3925; background: radial-gradient(ellipse at 50% 0%, #fffdf0, transparent 70%), #f5e5bd; border: 5px solid #96613b; border-radius: 26px; box-shadow: 0 0 0 2px #e7ba6f, 0 25px 80px #0008; }
.ship-game-dialog::backdrop { background: #082a3b88; backdrop-filter: blur(5px); }
.ship-game-dialog h2 { color: #4d3b2a; font-size: 28px; letter-spacing: .2px; }
.ship-game-dialog .auth-close { color: #765131; top: 12px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: #e1bb7d55; }
.ship-game-dialog .game-instruction { color: #735b40; margin: 10px auto 16px; max-width: 540px; line-height: 1.5; }
.ship-game-dialog .game-reward-note { color: #73502c; display: table; margin: 8px auto; background: #fff8dc; border: 1px solid #dabc78; padding: 6px 14px; border-radius: 999px; font-size: 12px; }
.ship-game-dialog .game-status { color: #8d5234; margin: 12px 0; font-weight: 600; }
.ship-game-dialog .game-status.won { color: #2c805c; background: #d3eed4; border-radius: 14px; padding: 10px; animation: game-celebrate .45s ease-out; }
.ship-game-dialog .game-button { background: linear-gradient(#fff0b6,#e5bd68); color: #674521; border: 2px solid #bf9350; box-shadow: 0 3px 0 #99713d; border-radius: 14px; font-weight: 700; min-height: 46px; }
.ship-game-dialog .game-button:hover { background: #fff4cc; transform: translateY(-1px); }
.ship-game-dialog .game-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #99713d; }
.game-body { border-radius: 20px; }
.ship-game-dialog[data-game="cargo"] .game-body { padding: 14px; background: repeating-linear-gradient(0deg,#d8aa72 0 28px,#c79560 29px 31px,#e2b880 32px 62px); border: 3px solid #ae7948; box-shadow: inset 0 2px 12px #83532944; }
.ship-game-dialog .cargo-tray { gap: 8px; }
.ship-game-dialog .cargo-piece { color: #69502e; background: #fff4d8; border: 2px solid #c4935b; box-shadow: 0 3px 0 #9f7341; border-radius: 12px; min-height: 76px; }
.ship-game-dialog .cargo-piece[aria-pressed="true"] { background: #fffbdc; border-color: #e59b32; box-shadow: 0 0 0 3px #ffe9a4,0 3px 0 #9f7341; }
.ship-game-dialog .cargo-piece:disabled { opacity: .45; box-shadow: none; }
.ship-game-dialog .cargo-mini i { width: 12px; height: 12px; border: 1px solid #986b43; background-image: linear-gradient(135deg,#ffffff55,transparent 55%,#0002); box-sizing: border-box; border-radius: 3px; }
.ship-game-dialog .cargo-width-1 { grid-template-columns: repeat(1,12px); }
.ship-game-dialog .cargo-width-2 { grid-template-columns: repeat(2,12px); }
.ship-game-dialog .cargo-width-3 { grid-template-columns: repeat(3,12px); }
.ship-game-dialog .cargo-width-4 { grid-template-columns: repeat(4,12px); }
.ship-game-dialog .cargo-width-5 { grid-template-columns: repeat(5,12px); }
.ship-game-dialog .cargo-grid { margin: 16px auto 0; padding: 12px; border: 9px solid #936039; border-radius: 15px; background: #63472d; box-shadow: 0 4px 0 #704729,inset 0 2px 12px #0005; max-width: 350px; gap: 3px; }
.ship-game-dialog .cargo-grid .puzzle-cell { background: #916d49; border: 1px dashed #c6a27b66; border-radius: 4px; box-shadow: inset 0 2px 4px #0002; }
.crate-color-0 { --crate-paint: #db785d; } .crate-color-1 { --crate-paint: #e2bf63; } .crate-color-2 { --crate-paint: #6ca7c6; } .crate-color-3 { --crate-paint: #91b576; } .crate-color-4 { --crate-paint: #a689c2; } .crate-color-5 { --crate-paint: #d08daa; }
.ship-game-dialog .cargo-grid .loaded-crate { border: 2px solid #b98b55; background: linear-gradient(45deg,transparent 45%,#7e563b55 47% 53%,transparent 55%), repeating-linear-gradient(0deg,#e0b779 0 11px,#c49a62 12px 14px); box-shadow: inset 0 0 0 3px var(--crate-paint),inset 0 2px 3px #fff7; }
.ship-game-dialog .cargo-grid .placement-preview { background: #b5d594; box-shadow: inset 0 0 0 2px #e8ffd1; }
.ship-game-dialog .cargo-grid .placement-invalid { background: #d9957c; }
.ship-game-dialog[data-game="route"] .game-body { padding: 14px; border: 3px solid #80b7bb; background: radial-gradient(ellipse at 20% 0,#e0f8ef,transparent 60%),#b7e6e5; }
.ship-game-dialog .route-counter { margin: 0; color: #34677a; font-weight: 700; }
.ship-game-dialog .route-grid { max-width: 350px; margin: 10px auto 0; gap: 4px; border: 8px solid #dbba7b; border-radius: 16px; padding: 8px; background: #5eabb8; box-shadow: 0 4px 0 #a68756; }
.ship-game-dialog .sea-cell { position: relative; background: radial-gradient(ellipse at 20% 10%,#a1e5e5,transparent 80%),#73c6d6; border: 1px solid #c9ffff88; border-radius: 8px; box-shadow: inset 0 -2px 0 #439aae55; }
.ship-game-dialog .sea-cell::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 12%; height: 3px; border-radius: 50%; background: #caffef66; pointer-events: none; }
.sea-cell svg { width: 94%; height: 94%; display: block; margin: auto; filter: drop-shadow(0 2px 1px #285f7533); }
.ship-game-dialog .sea-cell.reef { background: #99c3bd; }
.ship-game-dialog .sea-cell.ship-position { background: #b1eece; border: 2px solid #fff8bf; }
.ship-game-dialog .sea-cell.visited-sea { box-shadow: inset 0 0 0 2px #d7fff6; }
.ship-game-dialog[data-game="signals"] .game-body { background: linear-gradient(#d1eff3,#f5fbec); padding: 18px 10px; border: 3px solid #9cc4c3; }
.ship-game-dialog .signal-key { background: #fff7dc; border: 2px solid #dab775; border-radius: 16px; padding: 10px; margin: 0 0 20px; gap: 20px; }
.ship-game-dialog .signal-key-item strong { color: #577580; font-size: 18px; }
.ship-game-dialog .signal-message { margin: 0; gap: 12px; padding-top: 12px; border-top: 3px solid #ad8653; }
.ship-game-dialog .signal-flag { background: none; box-shadow: none; width: 76px; height: 70px; }
.signal-flag svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 2px #44677033); }
.ship-game-dialog .signal-answer select { width: 66px; min-height: 46px; font-size: 22px; font-weight: 700; text-align: center; background: #fff8dc; color: #3c7183; border: 2px solid #bca064; border-radius: 14px; box-shadow: 0 3px 0 #c8b084; cursor: pointer; }
@keyframes game-celebrate { from { transform: scale(.95); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@media (max-width:600px) { .ship-game-dialog { padding: 22px 14px 16px; border-width: 3px; } .ship-game-dialog h2 { font-size: 24px; } .ship-game-dialog .game-instruction { font-size: 13px; } .ship-game-dialog .game-body { padding: 10px; } .ship-game-dialog .cargo-grid,.ship-game-dialog .route-grid { padding: 5px; border-width: 5px; } .ship-game-dialog .signal-key { gap: 8px; padding: 7px; } .ship-game-dialog .signal-message { gap: 2px; } .ship-game-dialog .signal-flag { width: 48px; height: 50px; } .ship-game-dialog .signal-answer select { width: 44px; min-height: 44px; } }
@media (prefers-reduced-motion:reduce) { .ship-game-dialog * { animation: none !important; } }

.ship-game-dialog .cargo-grid, .ship-game-dialog .route-grid { max-width: 300px; }
/* Shared illustrated controls and currencies. */
.island-art-icon { width: 28px; height: 28px; display: block; flex-shrink: 0; }
.resource .island-art-icon { width: 21px; height: 21px; }
.round-button .island-art-icon { width: 22px; height: 22px; }
.auth-close, .ship-game-dialog .auth-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; margin: 0; border: 0; border-radius: 10px; background: transparent; color: #e9cf9a; line-height: 1; cursor: pointer; }
.auth-close .island-art-icon { width: 21px; height: 21px; }
.auth-close:hover { background: #ffffff12; }
.ship-game-dialog .auth-close { color: #79562f; }
.ship-game-dialog .auth-close:hover { background: #b7894520; }
.ship-game-dialog .game-reward-note { display: flex; width: fit-content; align-items: center; justify-content: center; gap: 16px; padding: 5px 12px; border: 0; background: transparent; }
.reward-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; background: #fff5d1; border-radius: 14px; box-shadow: 0 2px 0 #d4b77755; color: #765531; font-size: 15px; }
.reward-chip .island-art-icon { width: 31px; height: 31px; }
.reward-earned { background: #e4efd6; color: #508666; }
.game-status.won { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ship-game-dialog .game-controls .game-button { display: grid; place-items: center; padding: 8px 12px; min-width: 50px; }
.game-controls .island-art-icon { width: 30px; height: 30px; }
.ship-game-dialog[data-game="cargo"] .game-instruction { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 8px auto 12px; }
.instruction-step { display: grid; place-items: center; width: 44px; height: 44px; background: #fff5d3; border-radius: 13px; box-shadow: 0 2px 0 #dfc39366; }
.instruction-step .island-art-icon { width: 32px; height: 32px; }
.step-arrow { font: bold 22px system-ui; color: #b88c4a; }
.ship-game-dialog { padding: 20px 24px 16px; }
.ship-game-dialog .game-status { min-height: 18px; margin: 6px 0; }
.ship-game-dialog .game-instruction .instruction-step { width: 38px; height: 38px; }
@media (max-width: 600px) { .ship-game-dialog { padding: 18px 12px 14px; } }
.port-location { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; background: #176080; overflow: hidden; color: #fff3d6; }
.port-location[open] { display: block; }
.port-stage { position: absolute; width: max(100vw,calc(100dvh * 1.5)); height: max(100dvh,calc(100vw / 1.5)); left: 50%; top: 50%; transform: translate(-50%,-50%); }
.port-background,.port-motion { display: block; position: absolute; width: 100%; height: 100%; inset: 0; }
.port-motion { pointer-events: none; }
.port-point { position: absolute; border: 0; background: transparent; cursor: pointer; }
.port-point:hover { background: transparent; outline: none; }
.port-point:focus-visible { outline: 2px solid #fff3d6; outline-offset: 3px; border-radius: 14px; }
.port-merchant { left: 69%; top: 52%; width: 26%; height: 40%; }
.port-supervisor { left: 35%; top: 40%; width: 14%; height: 22%; }
.port-warehouse { left: 12%; top: 22%; width: 20%; height: 30%; }
.port-workshop { left: 77%; top: 24%; width: 20%; height: 24%; }
.port-notice { left: 66%; top: 25%; width: 10%; height: 18%; }
.port-toolbar { position: fixed; left: 50%; bottom: max(14px,env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5,44px); gap: 6px; padding: 7px; border-radius: 20px; background: #10223ccc; box-shadow: 0 5px 24px #0005; }
.port-toolbar > button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #fff3d6; cursor: pointer; }
.port-toolbar > button:hover,.port-toolbar .port-back { background: #e6bd6625; }
.port-toolbar svg { width: 28px; height: 28px; }
.port-back svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.port-location > .player-menu { position: fixed; top: 16px; left: 16px; z-index: 10; font: 14px/1.3 system-ui,sans-serif; color: #fff; pointer-events: auto; }
.port-detail { position: fixed; }
.port-detail-art .island-art-icon { width: 90px; height: 90px; margin: 20px auto; }
@media (max-width:600px) and (orientation:portrait) { .port-location[open] { overflow-x: auto; overflow-y: hidden; } .port-stage { position: relative; left: 0; top: 0; transform: none; width: calc(100dvh * 1.5); height: 100dvh; } .port-location > .player-menu { top: 10px; left: 10px; } }

.port-merchant { left: 83%; top: 58%; width: 17%; height: 39%; }
.port-supervisor { left: 27%; top: 35%; width: 13%; height: 23%; }
.port-warehouse { left: 17%; top: 18%; width: 29%; height: 23%; }
.port-workshop { left: 65%; top: 24%; width: 17%; height: 25%; }
.port-notice { left: 82%; top: 23%; width: 17%; height: 18%; }
.port-stage { top: 0; transform: translateX(-50%); }
@media (max-width:600px) and (orientation:portrait) { .port-stage { transform: none; } }

/* Language settings keep native names readable, with localized reading direction. */
.language-picker { display: grid; gap: 12px; padding: 16px 0; }
.language-select { width: 100%; padding: 12px; border: 1px solid #caa55f; border-radius: 12px; background: #203552; color: #fff3d1; font: inherit; }
html[data-language-direction="rtl"] .drawer-body, html[data-language-direction="rtl"] .drawer-title { direction: rtl; text-align: start; }
html[data-language-direction="rtl"] .row-hint { unicode-bidi: plaintext; }

/* Fullscreen location backgrounds: shared frame, local motion masks, no image deformation. */
.island-location { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; background: #162a3d; overflow: hidden; color: #fff3d6; }
.island-location[open] { display: block; }
.island-scene { position: absolute; width: max(100vw,calc(100dvh * 1.5)); height: max(100dvh,calc(100vw / 1.5)); left: 50%; top: 0; transform: translateX(-50%); }
.island-scene-background,.island-scene-motion { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.island-scene-motion { pointer-events: none; }
.island-scene-toolbar { position: fixed; left: 50%; bottom: max(14px,env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 7px; border-radius: 20px; background: #10223ccc; box-shadow: 0 5px 24px #0005; }
.island-scene-back { display: grid; place-items: center; width: 48px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: #e6bd6625; color: #fff3d6; cursor: pointer; }
.island-scene-back svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.island-scene-back:focus-visible { outline: 2px solid #ffe0a3; outline-offset: 3px; }
.island-location > .player-menu { position: fixed; top: 16px; left: 16px; z-index: 10; font: 14px/1.3 system-ui,sans-serif; color: #fff; pointer-events: auto; }
.island-scene-loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 12px 20px; border-radius: 14px; background: #10223cdd; text-align: center; }
.island-scene-loading:empty { display: none; }
@media (max-width:600px) and (orientation:portrait) {
  .island-location[open] { overflow-x: auto; overflow-y: hidden; }
  .island-scene { position: relative; left: 0; transform: none; width: calc(100dvh * 1.5); height: 100dvh; }
  .island-location > .player-menu { top: 10px; left: 10px; }
}

.island-scene-rotor { position: absolute; height: auto; pointer-events: none; transform: translate(-50%,-50%) rotate(-20deg); transform-origin: 50% 50%; animation: island-mill-turn 26s linear infinite; animation-play-state: paused; }
.island-location[open]:not([data-still="true"]) .island-scene-rotor { animation-play-state: running; }
.island-scene-rotor[hidden] { display: none; }
@keyframes island-mill-turn { from { transform: translate(-50%,-50%) rotate(-20deg); } to { transform: translate(-50%,-50%) rotate(340deg); } }
@media (prefers-reduced-motion:reduce) { .island-scene-rotor { animation: none; } }
/* Keep the existing balances visible on small screens as well. */
@media (max-width:600px) { .player .resources { display: flex; gap: 6px; } .player-name { max-width: 90px; } }

/* Decode a new scene behind a curtain before revealing any of its pixels. */
:is(.island-location,.ship-location,.port-location)[data-location-phase]:not([data-location-phase="ready"]) :is(.island-scene,.ship-stage,.port-stage) { visibility: hidden; }
:is(.island-location,.ship-location,.port-location)[data-location-phase="leaving"] :is(.island-scene,.ship-stage,.port-stage) { visibility: visible; pointer-events: none; }
.location-curtain { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; background: radial-gradient(ellipse at center,#233c54,#101e31); opacity: 1; transition: opacity .46s ease; pointer-events: none; }
.location-curtain svg { width: 60px; height: 60px; fill: none; stroke: #e3c57f; stroke-width: 1.5; opacity: .75; animation: location-compass 4s linear infinite; }
[data-location-phase="ready"] > .location-curtain { opacity: 0; }
[data-location-phase="ready"] > .location-curtain svg,[data-location-phase="leaving"] > .location-curtain svg,[data-location-phase="error"] > .location-curtain svg { visibility: hidden; }
[data-location-phase="leaving"] > .location-curtain { transition-duration: .32s; }
:is(.island-scene-toolbar,.ship-toolbar,.port-toolbar) { z-index: 3; }
[data-location-phase="leaving"] > :is(nav,.player-menu) { pointer-events: none; }
.island-scene-loading,.location-load-error { z-index: 4; }
.location-load-error { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 80vw; color: #fff3d6; text-align: center; }
.location-map-curtain { position: fixed; inset: 0; z-index: 100; background: #101e31; }
[data-transition-still="true"] > .location-curtain { transition: none; }
[data-transition-still="true"] > .location-curtain svg { animation: none; }
@keyframes location-compass { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .location-curtain { transition: none; } .location-curtain svg { animation: none; } }

:is(.island-location,.ship-location,.port-location)::backdrop { background: transparent; }
[data-location-phase="loading"] > .island-scene-loading { visibility: hidden; }

.port-game-dialog { width: min(740px,calc(100vw - 24px)); max-width: 740px; }
.port-game-dialog .game-instruction { max-width: 560px; margin: 8px auto 14px; }
.port-game-dialog .game-body { background: linear-gradient(#fff8dd,#ead2a1); border: 2px solid #d6b679; padding: 14px; }
.port-levels { display:flex; justify-content:center; gap:8px; }
.port-level { border:2px solid #ceac67; border-radius:12px; padding:8px 13px; color:#ad7a28; background:#fff1c5; font:inherit; cursor:pointer; }
.port-level[aria-pressed="true"] { background:#ffd780; border-color:#ae8143; box-shadow:0 3px 0 #b98c48; }
.order-goals { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:16px; direction:ltr; }
.order-goal { display:flex; align-items:center; gap:8px; background:#f6e7bd; border:2px solid #c8a86c; border-radius:15px; padding:7px 12px; color:#72532e; }
.order-goal.matched { background:#deedbf; border-color:#87ad71; }
.order-goal svg { width:32px; height:32px; }
.order-shelves { display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); gap:12px; }
.order-product { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 6px; border-radius:15px; border:2px solid #c5a06b; background:#fff6da; box-shadow:0 4px 0 #bf9761; color:#745534; }
.order-product > svg { width:66px; height:66px; filter:drop-shadow(0 3px 2px #a1794a33); }
.product-values,.product-values > span { display:flex; align-items:center; justify-content:center; gap:8px; direction:ltr; }
.product-values svg { width:24px; height:24px; }
.order-picker { display:flex; align-items:center; gap:7px; direction:ltr; }
.order-step { min-width:32px; min-height:36px; border:1px solid #bc995b; border-radius:9px; background:#f6dc9c; color:#6c502f; font-size:23px; cursor:pointer; }
.order-picker strong { min-width:42px; text-align:center; }
.port-game-dialog button:disabled { opacity:.45; cursor:default; }
.crane-harbor { height:210px; position:relative; overflow:hidden; border-radius:15px; background:linear-gradient(#a4dbe8 0%,#d5f1ec 70%,#58b3c5 71%); border-bottom:9px solid #a57349; }
.crane-tower { position:absolute; width:32px; height:160px; bottom:0; left:calc(50% - 16px); background:repeating-linear-gradient(45deg,#88613c 0 7px,#dbac70 8px 18px); border:3px solid #74502e; border-radius:8px 8px 0 0; }
.crane-beam { position:absolute; top:65px; left:10%; width:80%; height:15px; background:linear-gradient(#efce92,#b7864c); border:2px solid #7d5839; border-radius:6px; transform:rotate(var(--tilt)); transition:transform .5s ease; }
.crane-load,.crane-counter { position:absolute; top:24px; width:40px; transform:translateX(-50%); text-align:center; }
.crane-load { right:-5px; }.crane-counter { left:6%; }
.crane-load::before,.crane-counter::before { content:''; position:absolute; left:50%; width:2px; height:25px; top:-25px; background:#785a3e; }
.crane-load svg,.crane-counter svg { width:40px; height:40px; }
.crane-counter strong,.crane-load strong { display:block; background:#fff6d8; color:#685136; border-radius:8px; font-size:13px; }
.crane-arm-mark { position:absolute; top:-21px; width:20px; margin-left:-10px; color:#47677b; font-weight:bold; text-align:center; }
.crane-load-note { position:absolute; right:10px; bottom:20px; padding:7px; background:#fff3cd; border-radius:12px; font-weight:bold; color:#705134; }
.crane-weights { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px; }
.crane-weight { border:2px solid #c6a168; background:#f5e7bf; border-radius:14px; padding:6px; min-width:68px; }
.crane-weight.selected { border-color:#639b83; background:#d6ebd3; }
.crane-pick { background:transparent; border:0; display:grid; justify-items:center; margin:auto; color:#456e82; font-size:20px; cursor:pointer; }
.crane-pick svg { width:50px; height:50px; }
.crane-positions { display:flex; gap:3px; justify-content:center; margin-top:5px; direction:ltr; }
.crane-position { width:26px; height:28px; background:#fef5d5; color:#526d74; border:1px solid #97b4ac; border-radius:7px; cursor:pointer; }
.crane-position[aria-pressed="true"] { background:#70a992; color:white; }
.port-menu-warehouse,.port-menu-workshop { position:relative; }
.port-toolbar .first-victory::after { content:'✓'; position:absolute; right:0; top:0; color:#bce79d; font-weight:bold; font-size:12px; }
@media(max-width:600px) { .port-game-dialog .game-body { padding:10px; } .order-shelves { grid-template-columns:repeat(2,minmax(0,1fr)); } .order-goals { gap:5px; } .order-goal { padding:5px 8px; } .crane-harbor { height:180px; } .crane-tower { height:132px; } .crane-beam { top:42px; } }
@media(prefers-reduced-motion:reduce) { .crane-beam { transition:none; } }

/* Compact crane layout keeps the title and close control visible on laptops. */
.port-game-dialog:has(.crane-harbor) { padding:14px 18px; }
.port-game-dialog:has(.crane-harbor) h2 { font-size:24px; margin:4px 0; }
.port-game-dialog:has(.crane-harbor) .game-reward-note { margin:4px auto; }
.port-game-dialog:has(.crane-harbor) .port-level { padding:5px 12px; }
.port-game-dialog:has(.crane-harbor) .game-instruction { margin:8px auto; }
.port-game-dialog:has(.crane-harbor) .order-goals { margin-bottom:10px; }
.port-game-dialog:has(.crane-harbor) .game-body { padding:10px; }
.port-game-dialog .crane-harbor { height:156px; }
.port-game-dialog .crane-tower { height:117px; }
.port-game-dialog .crane-beam { top:33px; }
.port-game-dialog .crane-weights { margin-top:10px; }
.port-game-dialog .crane-pick svg { width:42px; height:42px; }
.port-game-dialog .game-status.won { padding:5px; }

.water-board { position:relative; height:300px; border-radius:18px; overflow:hidden; border:2px solid #b4c58a; background:repeating-linear-gradient(0deg,#dbe8b7 0 56px,#d1e0a9 57px 62px); }
.water-pipes { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.water-pipe-base { fill:none; stroke:#678e91; stroke-width:12; stroke-linecap:round; }
.water-pipe-possible { fill:none; stroke:#8dad9b; stroke-width:3; stroke-dasharray:4 7; opacity:.55; }
.water-stream { fill:none; stroke:#82e2ed; stroke-width:6; stroke-linecap:round; stroke-dasharray:12 8; animation:farm-water-flow 1s linear infinite; }
@keyframes farm-water-flow { to { stroke-dashoffset:-40; } }
.water-supply { position:absolute; left:10%; transform:translate(-50%,-50%); width:48px; height:44px; display:flex; align-items:center; justify-content:center; gap:2px; color:#296b87; border:2px solid #7cb8c2; border-radius:16px; background:#e0f7f4; box-shadow:0 3px 0 #a2c9b8; }
.water-supply svg { width:22px; height:28px; }
.water-valve { position:absolute; left:33.333%; transform:translate(-50%,-50%); width:48px; height:48px; border:2px solid #987444; border-radius:50%; background:linear-gradient(#fff2bd,#ddb574); cursor:pointer; box-shadow:0 3px 0 #8c784b; padding:3px; }
.water-valve > svg { width:100%; height:100%; }
.water-valve.shut { filter:saturate(.35); }
.water-valve:disabled { opacity:1 !important; }
.water-destination { position:absolute; right:-9px; bottom:-2px; background:#e8f6cf; border:1px solid #8da56b; border-radius:8px; padding:0 5px; color:#446241; font-size:12px; font-weight:bold; }
.water-bed { position:absolute; left:75%; transform:translateY(-50%); width:20%; display:grid; justify-items:center; gap:2px; padding:5px 0; border:2px solid #c59b65; background:#f5e2b9; border-radius:16px; color:#735239; }
.water-bed > svg { width:44px; height:44px; }
.water-bed-number { position:absolute; left:3px; top:3px; font-size:11px; }
.water-bed.watered { background:#e0f3c0; border-color:#83ae6f; }
.water-bed.overflow { background:#f7d4bc; border-color:#c58367; }
.water-summary { display:flex; align-items:center; justify-content:center; gap:8px; margin:8px 0 0; color:#3c7f92; direction:ltr; }
.water-summary svg { width:25px; height:25px; }
.water-calm .water-stream { animation:none; }
.island-farm-play { position:absolute; left:-62px; top:7px; }
.island-farm-point { position:absolute; left:58%; top:40%; width:17%; height:23%; background:transparent; border:0; cursor:pointer; }
.island-farm-point:focus-visible { outline:2px solid #ffe0a3; border-radius:12px; }
.island-farm-play.first-victory::after { content:'✓'; position:absolute; right:0; top:0; color:#bce79d; font-weight:bold; font-size:12px; }
@media(max-width:600px) { .water-bed { width:22%; left:74%; } .water-bed > svg { width:34px; height:34px; } .water-bed strong { font-size:13px; } .water-board { height:360px; } }

.island-farm-play[hidden],.island-farm-point[hidden] { display:none; }
.learning-game-dialog[data-game="water"] { padding:14px 18px; }
.learning-game-dialog[data-game="water"] h2 { font-size:24px; margin:4px 0; }
.learning-game-dialog[data-game="water"] .game-reward-note { margin:4px auto; }
.learning-game-dialog[data-game="water"] .port-level { padding:5px 12px; }
.learning-game-dialog[data-game="water"] .game-instruction { margin:8px auto; }
.learning-game-dialog[data-game="water"] .game-body { padding:10px; }
@media(max-width:600px) { .learning-game-dialog[data-game="water"] { padding:18px 12px; } .learning-game-dialog[data-game="water"] .water-board { height:360px; } }

.island-pattern-play[hidden]{display:none}
.pattern-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:620px;margin:auto}
.pattern-panel{background:#d4af7130;padding:12px;border-radius:20px;box-shadow:inset 0 2px 8px #76502d18}
.pattern-label{display:block;text-align:center;color:#795834;font-weight:700;margin-bottom:10px}
.pattern-grid{display:grid;grid-template-columns:repeat(var(--size),1fr);gap:4px}
.pattern-tile{display:block;position:relative;aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:12px;background:#bd996a30;box-shadow:inset 0 0 0 1px #ab805f30}
.pattern-tile svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 1px #634b3340)}
.pattern-cell{cursor:pointer;font-size:22px;color:#9b7956;touch-action:manipulation}
.pattern-cell:disabled{opacity:1;cursor:default}
.pattern-cell.selected{outline:3px solid #bd783e;outline-offset:1px}
.pattern-cell small{position:absolute;bottom:0;right:2px;color:#fff6da;text-shadow:0 1px 2px #594126;font-size:11px}
.pattern-palette{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:18px}
.pattern-choice{width:54px;height:54px;border:0;padding:2px;border-radius:12px;background:transparent;cursor:pointer}
.pattern-choice svg{width:100%;height:100%}
.pattern-choice[aria-pressed="true"]{outline:3px solid #b98145;outline-offset:2px}
.pattern-rotate svg{width:28px;height:28px}
.learning-game-dialog[data-game="patterns"]{padding:18px}
@media(max-width:600px){.pattern-layout{gap:10px}.pattern-panel{padding:7px}.pattern-grid{gap:2px}.pattern-label{font-size:13px}.pattern-choice{width:43px;height:43px}.pattern-palette{gap:6px}.pattern-tile{border-radius:7px}}

.learning-game-dialog[data-game="patterns"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="patterns"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="patterns"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="patterns"] .game-instruction{margin:8px auto}.learning-game-dialog[data-game="patterns"] .game-body{padding:10px}.pattern-layout{max-width:500px}.pattern-cell:disabled{filter:none}.pattern-palette{margin-top:12px}

.island-scene-toolbar{display:flex;gap:7px}.island-scales-play{order:-1}.island-pattern-play{order:1}.island-scales-play[hidden]{display:none}
.scales-clues{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.scales-clue{display:flex;align-items:center;gap:4px;padding:7px 10px;border-radius:14px;background:#fff5d8;box-shadow:0 2px 0 #b6945b40;color:#795733}.scales-clue svg{width:29px;height:29px}.scales-clue strong{font-size:21px}
.scales-stage{position:relative;height:170px;max-width:470px;margin:0 auto;background:radial-gradient(ellipse at bottom,#b9d8b65e,transparent 70%);border-radius:24px}
.scales-pillar{position:absolute;left:calc(50% - 9px);top:35px;width:18px;height:125px;background:linear-gradient(90deg,#ae793b,#edc77e,#a97539);border-radius:8px}.scales-pillar:after{content:'';position:absolute;bottom:0;left:-42px;width:102px;height:16px;border-radius:40% 40% 7px 7px;background:#b78649;box-shadow:0 3px 0 #856038}
.scales-beam{position:absolute;left:12%;top:40px;width:76%;height:10px;border-radius:10px;background:linear-gradient(#f2cf84,#ab783e);transform-origin:center}.scales-beam:after{content:'';position:absolute;left:calc(50% - 10px);top:-5px;width:20px;height:20px;border-radius:50%;background:#79b9b8;box-shadow:inset 0 0 0 4px #bc8a45}
.scales-pan{position:absolute;top:8px;width:120px;height:80px;border-bottom:12px solid #71aaa9;border-radius:0 0 40% 40%;transform-origin:50% 0}.scales-pan:before{content:'';position:absolute;inset:0 5px;border-left:2px solid #b89355;border-right:2px solid #b89355;clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);background:linear-gradient(60deg,transparent 48%,#ba955a 49% 50%,transparent 51%),linear-gradient(-60deg,transparent 48%,#ba955a 49% 50%,transparent 51%)}
.scales-pan-left{left:-60px}.scales-pan-right{right:-60px}.scales-pile{position:absolute;bottom:0;left:8px;right:8px;display:flex;justify-content:center;flex-wrap:wrap;gap:0}.scales-pile svg{width:26px;height:26px}.scales-total{position:absolute;bottom:-35px;left:0;right:0;text-align:center;color:#775333;font-size:18px}.scales-load{position:absolute;bottom:0;left:30px;width:60px;height:60px}.scales-load svg{width:60px;height:60px}.scales-load strong{position:absolute;left:0;right:0;bottom:9px;text-align:center;color:#fff6d9;font-size:20px}
.scales-goal{display:flex;align-items:center;justify-content:center;gap:8px;color:#715a3c}.scales-goal svg{width:32px;height:32px}
.scales-shelf{display:flex;justify-content:center;gap:14px;margin-top:8px}.scales-item{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:5px 7px;padding:10px;border-radius:18px;background:#e4c48d40}.scales-item>svg{width:45px;height:45px;grid-column:1/-1;justify-self:center}.scales-item>strong{grid-column:1/-1;text-align:center;color:#795733;font-size:14px}.scales-row-title svg{width:26px;height:26px}.scales-picker{display:flex;align-items:center;gap:5px}.scales-picker strong{width:23px;text-align:center;color:#6a4d31}.scales-picker .order-step{width:32px;height:32px;padding:0;font-size:23px}
.learning-game-dialog[data-game="scales"]{padding:14px 18px}.learning-game-dialog[data-game="scales"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="scales"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="scales"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="scales"] .game-instruction{margin:8px auto}.learning-game-dialog[data-game="scales"] .game-body{padding:10px}
@media(max-width:600px){.scales-clues{gap:5px}.scales-clue{padding:5px}.scales-clue svg{width:22px;height:22px}.scales-clue strong{font-size:16px}.scales-stage{margin:0 20px}.scales-pan{width:90px}.scales-pan-left{left:-45px}.scales-pan-right{right:-45px}.scales-load{left:15px}.scales-pile{left:3px;right:3px}.scales-pile svg{width:22px;height:22px}.scales-shelf{gap:5px}.scales-item{padding:7px 4px;grid-template-columns:1fr;gap:3px}.scales-row-title{justify-self:center}.scales-item>strong{font-size:12px}.scales-picker{gap:2px}.scales-picker .order-step{width:31px;height:34px}.scales-picker strong{width:19px}.learning-game-dialog[data-game="scales"]{padding:14px 10px}}

.scales-stage{height:140px}.scales-pillar{top:30px;height:100px}.scales-beam{top:30px}.scales-pan{height:65px}.scales-pan:before{display:none}.scales-ropes{position:absolute;inset:0;width:100%;height:100%}.scales-shelf{margin-top:0}.scales-item{padding:6px 10px;gap:3px 7px}.scales-item>svg{width:34px;height:34px}.learning-game-dialog[data-game="scales"].water-calm .game-status.won{animation:none}@media(prefers-reduced-motion:reduce){.learning-game-dialog[data-game="scales"] .game-status.won{animation:none}}
.scales-stage{height:120px}.scales-pillar{height:80px}.learning-game-dialog[data-game="scales"] .game-status.won{padding:5px}.learning-game-dialog[data-game="scales"] .game-status{margin:4px 0}

.island-schedule-play[hidden]{display:none}.schedule-palette{display:flex;justify-content:center;gap:10px;margin:0 auto 12px}.schedule-choice{width:48px;height:48px;border:0;padding:4px;border-radius:12px;background:#d0ad7330;cursor:pointer}.schedule-choice svg{display:block;width:100%;height:100%}.schedule-choice[aria-pressed="true"]{outline:3px solid #b58446;outline-offset:2px}.schedule-erase{font-size:32px;color:#8c6440}
.schedule-board{display:grid;grid-template-columns:42px repeat(var(--size),1fr);gap:5px;max-width:380px;margin:auto;padding:10px;border-radius:18px;background:linear-gradient(145deg,#e4c895,#f3dfb0);box-shadow:inset 0 2px 7px #8d6a3c25}
.schedule-heading{display:grid;place-items:center;min-height:32px}.schedule-heading svg{width:32px;height:32px}.schedule-cell{position:relative;aspect-ratio:1;border:1px solid #be995d60;border-radius:10px;padding:6px;background:#fff4d6;cursor:pointer;box-shadow:0 2px 0 #bfa06b60;touch-action:manipulation}.schedule-cell>.schedule-guard{display:block;width:100%;height:100%}.schedule-empty{font-size:24px;color:#b09b75}.schedule-cell.fixed{background:#d7d9bb}.learning-game-dialog .schedule-cell.fixed:disabled{opacity:1;cursor:default}.schedule-pin{position:absolute;bottom:2px;right:3px;font-size:10px;color:#7b6b4c}.schedule-cell.conflict{background:#f5d0b7;outline:2px solid #c47a59}.schedule-cell:focus-visible{outline:3px solid #79a9b1;outline-offset:1px}.schedule-blocked{position:absolute;left:1px;bottom:1px;width:22px;height:22px;border-radius:50%;background:#ffefd9;box-shadow:0 0 0 1px #bd7751}.schedule-blocked svg{width:100%;height:100%}.schedule-blocked:after{content:'';position:absolute;width:25px;height:2px;background:#a45a41;left:-2px;top:10px;transform:rotate(-45deg)}
.schedule-before{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px auto 0;color:#977042}.schedule-before svg{width:30px;height:30px}.learning-game-dialog[data-game="schedule"]{padding:14px 18px}.learning-game-dialog[data-game="schedule"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="schedule"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="schedule"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="schedule"] .game-instruction{margin:8px auto;font-size:13px;max-width:570px}.learning-game-dialog[data-game="schedule"] .game-body{padding:10px}.learning-game-dialog[data-game="schedule"].water-calm .game-status.won{animation:none}@media(prefers-reduced-motion:reduce){.learning-game-dialog[data-game="schedule"] .game-status.won{animation:none}}
@media(max-width:600px){.learning-game-dialog[data-game="schedule"]{padding:14px 10px}.schedule-board{grid-template-columns:30px repeat(var(--size),1fr);padding:6px;gap:4px}.schedule-cell{padding:4px;min-width:0}.schedule-palette{gap:7px}.schedule-choice{width:44px;height:44px}.schedule-blocked{width:19px;height:19px}.schedule-blocked:after{width:21px;top:9px}}
.schedule-board{max-width:300px}.learning-game-dialog[data-game="schedule"] .game-status.won{padding:5px}.learning-game-dialog[data-game="schedule"] .game-status{margin:4px 0}
@media(min-width:601px){.schedule-board{max-width:270px}}
.schedule-palette{margin-bottom:8px}.schedule-choice{width:44px;height:44px}.schedule-board{padding:6px}.schedule-heading{min-height:28px}.schedule-heading svg{width:28px;height:28px}.schedule-before{margin-top:4px}.schedule-before svg{width:24px;height:24px}

.island-journal-play[hidden]{display:none}.journal-clues{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:10px}.journal-clue{display:flex;align-items:center;gap:4px;padding:5px 9px;background:#fff4d5;border-radius:12px;color:#795733;font-size:13px;box-shadow:0 2px 0 #c3a16b50}.journal-clue svg{width:30px;height:30px;flex-shrink:0}
.journal-board{display:grid;grid-template-columns:20px repeat(var(--size),1fr);gap:4px;max-width:320px;margin:auto;padding:6px;border:4px solid #9c7147;border-radius:15px;background:repeating-linear-gradient(0deg,#c59e6e 0 30px,#bc9465 31px 33px,#caa779 34px 64px);box-shadow:inset 0 0 10px #70523760}.journal-coordinate{display:grid;place-items:center;color:#6f5030;font-weight:700;font-size:12px}.journal-chest{position:relative;aspect-ratio:1;border:0;border-radius:9px;padding:1px;background:#f8ddaa25;cursor:pointer;touch-action:manipulation}.journal-chest svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 1px #77573560)}.journal-chest.selected{outline:3px solid #fff1b0;outline-offset:-1px;background:#ffe8a670}.journal-chest.found{background:#b1d59b70}.journal-number{position:absolute;bottom:4px;left:0;right:0;text-align:center;color:#fff5d2;text-shadow:0 1px 2px #503920;font-size:14px;pointer-events:none}.journal-landmark{display:grid;place-items:center;aspect-ratio:1}.journal-landmark svg{width:85%;height:85%}
.journal-lock{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:10px;color:#795733}.journal-formula{background:#eed9aa;border-radius:10px;padding:8px 12px;font-weight:700;font-size:19px}.journal-code-label{font-size:0}.journal-code{width:72px;box-sizing:border-box;padding:6px;border:2px solid #b98c50;border-radius:10px;background:#fff5d5;color:#735334;font:700 23px monospace;text-align:center;letter-spacing:4px}
.learning-game-dialog[data-game="journal"]{padding:14px 18px}.learning-game-dialog[data-game="journal"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="journal"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="journal"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="journal"] .game-instruction{margin:8px auto;font-size:13px;max-width:580px}.learning-game-dialog[data-game="journal"] .game-body{padding:10px}.learning-game-dialog[data-game="journal"] .game-status{margin:4px 0}.learning-game-dialog[data-game="journal"] .game-status.won{padding:5px}.learning-game-dialog[data-game="journal"].water-calm .game-status.won{animation:none}@media(prefers-reduced-motion:reduce){.learning-game-dialog[data-game="journal"] .game-status.won{animation:none}}@media(max-width:600px){.learning-game-dialog[data-game="journal"]{padding:14px 10px}.journal-clue{font-size:12px;padding:4px 7px}.journal-board{gap:3px}.journal-number{font-size:12px;bottom:3px}}
.learning-game-dialog .journal-code-label{display:block;width:72px;font-size:0}.learning-game-dialog .journal-code{width:72px;box-sizing:border-box;padding:6px;border:2px solid #b98c50;border-radius:10px;background:#fff5d5;color:#735334;font:700 23px monospace;text-align:center;letter-spacing:4px}.learning-game-dialog[data-game="journal"] .game-body{display:grid;grid-template-columns:minmax(130px,180px) minmax(0,280px);gap:12px;justify-content:center;align-items:center}.journal-clues{flex-direction:column;margin:0}.journal-board{width:100%;box-sizing:border-box;max-width:280px}.journal-lock{grid-column:1/-1;margin-top:0}@media(max-width:600px){.learning-game-dialog[data-game="journal"] .game-body{display:block}.journal-clues{flex-direction:row;margin-bottom:8px}.journal-board{max-width:320px}.journal-lock{margin-top:8px}}

.journal-number{left:auto;right:0;bottom:0;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#775537;border:1px solid #eed5a2;font-size:12px;text-shadow:none}.learning-game-dialog[data-game="journal"] .game-body{grid-template-columns:200px minmax(0,280px)}.journal-clues{grid-column:1;grid-row:1}.journal-board{grid-column:2;grid-row:1/3}.journal-lock{grid-column:1;grid-row:2;gap:6px}.journal-formula{font-size:16px;padding:8px}.learning-game-dialog .journal-code-label,.learning-game-dialog .journal-code{width:64px}@media(max-width:600px){.journal-lock{margin-top:8px}.journal-formula{font-size:18px}.journal-board{max-width:280px}}

.island-rail-play[hidden]{display:none}.rail-yard{display:flex;justify-content:center;gap:12px;margin-bottom:8px}.rail-queue{display:flex;align-items:center;gap:4px;padding:5px;border-radius:12px;background:#b6976330;min-height:48px}.rail-pick{position:relative;width:45px;height:45px;padding:0;border:0;border-radius:10px;background:#fff3cd;cursor:pointer}.rail-pick svg{width:100%;height:100%}.rail-pick strong{position:absolute;bottom:0;right:1px;background:#856342;color:#fff3c7;border-radius:50%;width:16px;font-size:11px}.rail-pick.selected{outline:3px solid #b58140;outline-offset:1px}.rail-empty{color:#6d926d;font-size:24px}
.rail-board{position:relative;max-width:560px;margin:auto;aspect-ratio:640/300;border-radius:18px;background:radial-gradient(ellipse at 80% 30%,#a1896550,transparent 60%),#776652;box-shadow:inset 0 0 25px #382c2440}.rail-drawing{position:absolute;inset:0;width:100%;height:100%}.rail-switch{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border:2px solid #ad8b52;border-radius:50%;padding:3px;background:#514b3e;cursor:pointer;z-index:1}.rail-switch svg{width:100%;height:100%}.rail-end{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:#a6c2b4;color:#3d635f;font-weight:700;box-shadow:0 2px 0 #493c2b}.rail-moving{pointer-events:none}
.rail-depots{display:flex;justify-content:center;gap:8px;margin-top:8px}.rail-depot{display:flex;align-items:center;gap:3px;background:#e1c59470;border-radius:10px;padding:4px 6px}.rail-depot-number{display:grid;place-items:center;min-width:20px;height:24px;color:#507675;background:#c5d8bd;border-radius:6px}.rail-request svg{display:block;width:27px;height:27px}.rail-request.delivered{opacity:.35;position:relative}.rail-request.delivered:after{content:'✓';position:absolute;inset:0;text-align:center;color:#346a4b;font-size:24px;text-shadow:0 1px #fff}
.rail-actions{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:8px}.rail-counter{color:#8b6a42}.rail-send svg{width:28px;height:28px;display:block}.rail-send{padding:4px 14px!important}.learning-game-dialog[data-game="rail"]{padding:14px 18px}.learning-game-dialog[data-game="rail"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="rail"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="rail"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="rail"] .game-instruction{margin:8px auto;font-size:13px;max-width:590px}.learning-game-dialog[data-game="rail"] .game-body{padding:10px}.learning-game-dialog[data-game="rail"] .game-status{margin:4px 0}.learning-game-dialog[data-game="rail"] .game-status.won{padding:5px}.learning-game-dialog[data-game="rail"].water-calm .game-status.won{animation:none}@media(prefers-reduced-motion:reduce){.learning-game-dialog[data-game="rail"] .game-status.won{animation:none}}@media(max-width:600px){.learning-game-dialog[data-game="rail"]{padding:14px 10px}.rail-yard{flex-direction:column;gap:4px;align-items:center}.rail-queue{padding:3px;min-height:44px}.rail-pick{width:44px;height:44px}.rail-depots{gap:4px;flex-wrap:wrap}.rail-depot{padding:3px 4px}.rail-request svg{width:24px;height:24px}.rail-end{width:23px;height:23px;font-size:13px}.rail-board{margin:0 3px}.rail-switch{width:40px;height:40px}}
.rail-board{max-width:460px}.rail-pick:disabled:not(.selected){cursor:default}.rail-board:before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;background:radial-gradient(circle at 6% 12%,#ffe0a030,transparent 24%),radial-gradient(circle at 94% 88%,#e8c17b20,transparent 22%)}

.island-beam-play[hidden]{display:none}.beam-board{position:relative;display:grid;grid-template-columns:repeat(var(--size),1fr);max-width:320px;margin:auto;border:5px solid #7b9c9a;border-radius:16px;overflow:hidden;background:radial-gradient(ellipse at 30% 10%,#466c78,#243f55);box-shadow:0 3px 0 #496c74,inset 0 0 25px #162e4b70;direction:ltr}.beam-cell{position:relative;aspect-ratio:1;min-width:0;box-sizing:border-box;border:1px solid #8cb5b31a;background:transparent;padding:3px;display:grid;place-items:center}.beam-cell svg{width:100%;height:100%;display:block}.beam-mirror{cursor:pointer;touch-action:manipulation}.beam-mirror:focus-visible{outline:3px solid #ffe5a0;outline-offset:-3px}.beam-pin{position:absolute;right:2px;bottom:0;color:#e6c990;font-size:10px}.learning-game-dialog .beam-mirror.fixed:disabled{opacity:1;cursor:default}.beam-crystal svg,.beam-receiver svg{opacity:.52}.beam-cell.lit svg{opacity:1;filter:drop-shadow(0 0 5px #bdf8ed);animation:beam-shimmer 2.4s ease-in-out infinite alternate}.beam-rays{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.beam-rays polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}.beam-glow{stroke:#ffe4a0;stroke-width:13;opacity:.16}.beam-core{stroke:#f6d686;stroke-width:4}.beam-flow{stroke:#fff8d1;stroke-width:2;stroke-dasharray:3 14;animation:beam-travel 1.4s linear infinite}.beam-meter{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:8px;color:#6b807c}.beam-meter svg{width:28px;height:28px}.beam-loop{font-size:12px;color:#a27448}.learning-game-dialog[data-game="beam"]{padding:14px 18px}.learning-game-dialog[data-game="beam"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="beam"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="beam"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="beam"] .game-instruction{margin:8px auto;font-size:13px;max-width:590px}.learning-game-dialog[data-game="beam"] .game-body{padding:10px}.learning-game-dialog[data-game="beam"] .game-status{margin:4px 0}.learning-game-dialog[data-game="beam"] .game-status.won{padding:5px}
@keyframes beam-travel{to{stroke-dashoffset:-34}}@keyframes beam-shimmer{to{filter:drop-shadow(0 0 9px #f2e2b3)}}.water-calm .beam-flow,.water-calm .beam-cell.lit svg,.learning-game-dialog[data-game="beam"].water-calm .game-status.won{animation:none}@media(prefers-reduced-motion:reduce){.beam-flow,.beam-cell.lit svg,.learning-game-dialog[data-game="beam"] .game-status.won{animation:none}}@media(max-width:600px){.learning-game-dialog[data-game="beam"]{padding:14px 10px}.beam-cell{padding:2px}.beam-board{max-width:320px;border-width:4px}}
.learning-game-dialog .beam-mirror:disabled{opacity:.9;cursor:default}@media(min-width:601px){.learning-game-dialog[data-game="beam"] .game-body{position:relative}.beam-meter{position:absolute;right:calc(50% - 235px);top:50%;transform:translateY(-50%);margin:0;flex-direction:column;width:65px}.beam-loop{position:absolute;width:120px;top:60px;text-align:center}}

.island-archive-play[hidden]{display:none}.archive-key{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:12px}.archive-clue{display:flex;align-items:center;gap:4px;padding:5px 9px;border-radius:12px;background:#6f94a0;color:#fff1cb;box-shadow:0 2px 0 #4c737a}.archive-clue svg{width:30px;height:30px}.archive-clue strong{font-size:20px}.archive-tablets{display:grid;gap:8px;max-width:510px;margin:auto}.archive-tablet{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:14px;background:linear-gradient(110deg,#dce6cf,#b6d1ca);box-shadow:0 3px 0 #9eb8aa}.archive-number{display:grid;place-items:center;width:22px;height:24px;color:#6f8d83;background:#f6edc4;border-radius:7px;font-weight:700;font-size:12px}.archive-equation{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;color:#557a7b;font-weight:700;font-size:18px}.archive-equation svg{width:34px;height:34px;background:#688c9630;border-radius:8px}.learning-game-dialog .archive-input{box-sizing:border-box;width:65px;min-width:50px;padding:5px;border:2px solid #8daaa4;border-radius:10px;background:#fff6d8;color:#526b70;font:700 22px monospace;text-align:center}.learning-game-dialog[data-game="archive"]{padding:14px 18px}.learning-game-dialog[data-game="archive"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="archive"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="archive"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="archive"] .game-instruction{margin:8px auto;font-size:13px;max-width:590px}.learning-game-dialog[data-game="archive"] .game-body{padding:10px}.learning-game-dialog[data-game="archive"] .game-status{margin:4px 0}.learning-game-dialog[data-game="archive"] .game-status.won{padding:5px}.learning-game-dialog[data-game="archive"].water-calm .game-status.won{animation:none}@media(prefers-reduced-motion:reduce){.learning-game-dialog[data-game="archive"] .game-status.won{animation:none}}@media(max-width:600px){.learning-game-dialog[data-game="archive"]{padding:14px 10px}.archive-clue{padding:4px 6px;gap:2px}.archive-clue svg{width:25px;height:25px}.archive-key{gap:5px}.archive-tablet{padding:6px;gap:4px}.archive-equation{gap:2px;font-size:15px}.archive-equation svg{width:24px;height:29px}.archive-number{width:17px;font-size:11px}.learning-game-dialog .archive-input{width:50px;min-width:44px;font-size:20px}}
@media(min-width:601px){.learning-game-dialog[data-game="archive"] .game-body{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;align-items:center}.archive-key{flex-direction:column;margin:0;gap:9px}.archive-clue{padding:5px 7px;gap:2px}.archive-clue svg{width:26px;height:26px}.archive-tablets{width:100%;gap:7px}.archive-tablet{gap:5px;padding:5px 7px}.archive-equation{gap:2px;font-size:16px}.archive-equation svg{width:28px;height:30px}}
@media(max-width:600px){.archive-tablets{gap:5px}.archive-key{margin-bottom:8px}}

.island-bridges-play[hidden]{display:none}.bridge-inventory{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin-bottom:8px}.bridge-plank{position:relative;width:45px;height:42px;padding:0;border:0;border-radius:8px;background:#e2cd9f60;cursor:pointer}.bridge-plank svg{width:100%;height:100%}.bridge-plank>strong{position:absolute;left:0;right:0;top:13px;text-align:center;color:#684e32;font-size:14px}.bridge-plank.selected{outline:3px solid #aa814b;outline-offset:1px}.bridge-capacity{position:absolute;bottom:0;right:1px;background:#6c94a4;color:#fff3c9;border-radius:50%;width:14px;font-size:10px}.bridge-board{position:relative;display:grid;grid-template-columns:repeat(var(--size),1fr);max-width:330px;margin:auto;border:4px solid #8baebf;border-radius:17px;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,#6b9fac,#315a7e);box-shadow:inset 0 0 22px #173c6580}.bridge-cell{position:relative;aspect-ratio:1;border:1px solid #bde6e01b;box-sizing:border-box;z-index:2;pointer-events:none}.bridge-island{position:absolute;inset:0;padding:1px;border:0;background:transparent;cursor:pointer;pointer-events:auto}.bridge-island>svg{position:absolute;inset:0;width:100%;height:100%}.bridge-island>svg+svg{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}.bridge-island-number{position:absolute;left:1px;bottom:0;z-index:3;font-size:10px;color:#426876;background:#d1e8dfc9;border-radius:50%;width:14px}.learning-game-dialog .bridge-island:disabled{opacity:1;cursor:default}.bridge-island.current{filter:drop-shadow(0 0 4px #fff4c4)}.bridge-island.reachable{outline:2px solid #eed39a;outline-offset:-4px;border-radius:12px}.bridge-island:focus-visible{outline:3px solid #fff0b9;outline-offset:-3px}.bridge-roads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.bridge-road{fill:none;stroke:#d5b184;stroke-width:15;stroke-linecap:round;stroke-dasharray:7 3}.bridge-tools{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:8px}.bridge-undo svg{display:block;width:25px;height:25px}.bridge-undo{padding:4px 10px!important}.bridge-load{position:relative;display:block;width:34px;height:34px}.bridge-load svg{width:100%;height:100%}.bridge-load strong{position:absolute;inset:13px 0 0;text-align:center;font-size:13px;color:#fff4d7}.bridge-stops{color:#9f864d}.learning-game-dialog[data-game="bridges"]{padding:14px 18px}.learning-game-dialog[data-game="bridges"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="bridges"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="bridges"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="bridges"] .game-instruction{margin:8px auto;font-size:13px;max-width:590px}.learning-game-dialog[data-game="bridges"] .game-body{padding:10px}.learning-game-dialog[data-game="bridges"] .game-status{margin:4px 0}.learning-game-dialog[data-game="bridges"] .game-status.won{padding:5px}.learning-game-dialog[data-game="bridges"].water-calm .game-status.won{animation:none}@media(prefers-reduced-motion:reduce){.learning-game-dialog[data-game="bridges"] .game-status.won{animation:none}}@media(max-width:600px){.learning-game-dialog[data-game="bridges"]{padding:14px 10px}.bridge-board{max-width:330px}.bridge-plank{width:44px;height:40px}.bridge-inventory{gap:4px}}
@media(min-width:601px){.learning-game-dialog[data-game="bridges"] .game-body{display:grid;grid-template-columns:140px minmax(0,330px);gap:12px;justify-content:center;align-items:center}.bridge-inventory{grid-column:1;grid-row:1;margin:0;align-content:center}.bridge-board{grid-column:2;grid-row:1/3;width:100%;box-sizing:border-box}.bridge-tools{grid-column:1;grid-row:2;gap:8px;margin:0;flex-wrap:wrap}}
@media(max-width:600px){.learning-game-dialog[data-game="bridges"]:has(.game-status.won) .bridge-inventory{display:none}}

.island-symmetry-play[hidden]{display:none}.symmetry-palette{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}.symmetry-paint{width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer}.symmetry-paint svg{width:100%;height:100%;display:block}.symmetry-paint[aria-pressed="true"]{outline:3px solid #ac834b;outline-offset:2px}.symmetry-tool{width:44px;height:44px;padding:2px!important;font-size:26px!important}.symmetry-board{position:relative;display:grid;grid-template-columns:repeat(var(--size),1fr);gap:3px;max-width:310px;margin:auto;border:6px solid #8bb2bf;border-radius:17px;padding:4px;background:#6b8d9f;box-shadow:0 3px 0 #52778d}.symmetry-cell{position:relative;aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:9px;background:#c9e2db35;cursor:pointer;touch-action:manipulation}.symmetry-cell>svg{display:block;width:100%;height:100%}.symmetry-cell>span{font-size:23px;color:#c5dcd3}.symmetry-cell small{position:absolute;bottom:0;right:2px;color:#fff7cf;font-size:9px;text-shadow:0 1px #705a3b}.learning-game-dialog .symmetry-cell:disabled{opacity:1;cursor:default}.symmetry-cell.selected{outline:3px solid #edce85;outline-offset:-1px}.symmetry-axis{position:absolute;pointer-events:none;z-index:2;background:repeating-linear-gradient(0deg,#fff0b9 0 6px,transparent 6px 11px);box-shadow:0 0 4px #fff0bb90}.symmetry-axis.vertical{width:2px;left:calc(50% - 1px);top:0;bottom:0}.symmetry-axis.horizontal{height:2px;top:calc(50% - 1px);left:0;right:0;background:repeating-linear-gradient(90deg,#fff0b9 0 6px,transparent 6px 11px)}.learning-game-dialog[data-game="symmetry"]{padding:14px 18px}.learning-game-dialog[data-game="symmetry"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="symmetry"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="symmetry"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="symmetry"] .game-instruction{margin:8px auto;font-size:13px;max-width:590px}.learning-game-dialog[data-game="symmetry"] .game-body{padding:10px}.learning-game-dialog[data-game="symmetry"] .game-status{margin:4px 0}.learning-game-dialog[data-game="symmetry"] .game-status.won{padding:5px}.learning-game-dialog[data-game="symmetry"].water-calm .game-status.won{animation:none}@media(prefers-reduced-motion:reduce){.learning-game-dialog[data-game="symmetry"] .game-status.won{animation:none}}@media(min-width:601px){.learning-game-dialog[data-game="symmetry"] .game-body{display:grid;grid-template-columns:120px minmax(0,310px);gap:18px;justify-content:center;align-items:center}.symmetry-palette{margin:0;align-content:center}.symmetry-board{width:100%;box-sizing:border-box}}@media(max-width:600px){.learning-game-dialog[data-game="symmetry"]{padding:14px 10px}.symmetry-board{border-width:4px;gap:2px}.symmetry-palette{gap:6px;margin-bottom:8px}}

.island-oasis-play[hidden]{display:none}.oasis-rack{display:flex;justify-content:center;gap:22px;padding:12px 5px 8px;direction:ltr}.oasis-card{padding:8px 10px;border-radius:18px;background:#e4c48a30}.oasis-goal{display:flex;justify-content:center;align-items:center;gap:5px;color:#9c7a39;font-size:21px}.oasis-goal svg{width:26px;height:26px}.oasis-card.matched .oasis-goal{color:#568772}.oasis-jug{position:relative;display:block;width:115px;height:175px;margin:8px 0;border:0;padding:0;background:transparent;cursor:pointer}.oasis-vessel{position:absolute;left:5px;right:15px;top:0;bottom:30px;overflow:hidden;border:5px solid #ba8757;border-radius:28% 28% 32% 32%/16% 16% 28% 28%;background:linear-gradient(90deg,#e3c89a,#f5e4bf,#d5ad7b);box-shadow:inset 0 0 9px #936e4550,0 4px 0 #9c774c30}.oasis-handle{position:absolute;right:0;top:26px;width:32px;height:67px;box-sizing:border-box;border:7px solid #bc8b5c;border-radius:45%;background:transparent}.oasis-water{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(90deg,#6caec2,#9bd5d9,#79b9c9);box-shadow:inset 0 3px 0 #d2f2e6}.oasis-rim{position:absolute;left:0;right:0;top:0;height:9px;border-bottom:3px solid #a57248;background:#c29564}.oasis-volume{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#85643e;font-size:19px}.oasis-card.selected{outline:3px solid #d0a660;outline-offset:2px}.oasis-jug-actions{display:flex;justify-content:center;gap:7px}.oasis-action{padding:4px 8px!important}.oasis-action svg{display:block;width:28px;height:28px}.oasis-tools{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:10px}.oasis-counter{color:#937447}.learning-game-dialog .oasis-jug:disabled{opacity:1;cursor:default}.learning-game-dialog[data-game="oasis"]{padding:14px 18px}.learning-game-dialog[data-game="oasis"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="oasis"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="oasis"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="oasis"] .game-instruction{margin:8px auto;font-size:13px;max-width:590px}.learning-game-dialog[data-game="oasis"] .game-body{padding:10px}.learning-game-dialog[data-game="oasis"] .game-status{margin:4px 0}.learning-game-dialog[data-game="oasis"] .game-status.won{padding:5px}.learning-game-dialog[data-game="oasis"].water-calm .game-status.won{animation:none}@media(prefers-reduced-motion:reduce){.learning-game-dialog[data-game="oasis"] .game-status.won{animation:none}}@media(max-width:600px){.learning-game-dialog[data-game="oasis"]{padding:14px 10px}.oasis-rack{gap:7px;padding:8px 0}.oasis-card{padding:6px 3px}.oasis-jug{width:88px;height:154px}.oasis-vessel{right:12px;left:2px;border-width:4px}.oasis-handle{width:25px;height:55px;border-width:6px}.oasis-goal{font-size:18px}.oasis-volume{font-size:16px}}

.island-caravan-play[hidden]{display:none}.caravan-goals{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:8px}.caravan-goal{display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:12px;background:#ead6ad;color:#8b693c;font-size:14px}.caravan-goal>svg{width:25px;height:25px}.caravan-goal.matched{background:#c9dbc1}.caravan-goal.overloaded,.caravan-camel.overloaded{background:#efc7a5}.caravan-team{display:flex;justify-content:center;gap:16px}.caravan-camel{position:relative;padding:2px 12px 5px;border-radius:14px;background:#e9cf9d30}.caravan-camel>svg{display:block;width:76px;height:76px}.caravan-number{position:absolute;left:1px;top:4px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e5c48d;color:#886332;font-weight:700;font-size:12px}.caravan-load{display:flex;justify-content:center;align-items:center;gap:3px;color:#87683e;font-size:14px}.caravan-load svg{width:22px;height:22px}.caravan-balance{display:flex;justify-content:center;align-items:center;gap:6px;margin:4px auto;color:#916f42;font-size:14px}.caravan-balance svg{width:23px;height:23px}.caravan-crates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:490px;margin:8px auto 0}.caravan-crate{position:relative;min-width:0;padding:5px 6px 20px;border:2px solid #b68c58;border-radius:13px;background:linear-gradient(140deg,#f1ddb0,#d7b984);color:#7d5b37;cursor:pointer;touch-action:manipulation;box-shadow:0 2px 0 #a37d4d}.caravan-crate.packed{border-color:#6f9894;background:linear-gradient(140deg,#dce5c6,#b6d1bd)}.caravan-goods{display:flex;justify-content:center;align-items:center;gap:3px;font-size:18px}.caravan-goods>svg{width:33px;height:33px}.caravan-values{display:flex;justify-content:center;gap:8px;font-size:13px}.caravan-values>span{display:flex;align-items:center;gap:2px}.caravan-values svg{width:19px;height:19px}.caravan-destination{position:absolute;bottom:1px;left:0;right:0;text-align:center;font-weight:700;font-size:13px}.learning-game-dialog[data-game="caravan"]{padding:14px 18px}.learning-game-dialog[data-game="caravan"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="caravan"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="caravan"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="caravan"] .game-instruction{margin:8px auto;font-size:13px;max-width:590px}.learning-game-dialog[data-game="caravan"] .game-body{padding:10px}.learning-game-dialog[data-game="caravan"] .game-status{margin:4px 0}.learning-game-dialog[data-game="caravan"] .game-status.won{padding:5px}.learning-game-dialog[data-game="caravan"].water-calm .game-status.won{animation:none}@media(prefers-reduced-motion:reduce){.learning-game-dialog[data-game="caravan"] .game-status.won{animation:none}}@media(max-width:600px){.learning-game-dialog[data-game="caravan"]{padding:14px 10px}.caravan-goals{gap:4px}.caravan-goal{padding:4px 5px;font-size:12px}.caravan-goal>svg{width:20px;height:20px}.caravan-team{gap:5px}.caravan-camel{padding:2px 8px 4px}.caravan-camel>svg{width:65px;height:65px}.caravan-crates{gap:5px}.caravan-crate{padding:4px 2px 18px}.caravan-values{gap:4px;font-size:12px}.caravan-values svg{width:16px;height:16px}.caravan-goods>svg{width:29px;height:29px}.caravan-goods{font-size:16px}.caravan-load{font-size:12px}}
@media(min-width:601px){.caravan-camel>svg{width:60px;height:60px}.caravan-goods>svg{width:29px;height:29px}}

.island-gears-play[hidden]{display:none}.gears-input{display:flex;justify-content:center;align-items:center;gap:6px;color:#8f7041;margin-bottom:8px}.gears-input svg{width:28px;height:28px}.gears-chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:580px;margin:auto}.gears-chain:has(>.gears-stage:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:310px}.gears-chain:has(>.gears-stage:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));max-width:460px}.gears-slot{position:relative;width:100%;height:100px;padding:5px;border:2px solid #bd9963;border-radius:15px;background:linear-gradient(130deg,#e9cf9d,#c8b185);box-shadow:inset 0 1px 8px #96764a20;cursor:pointer}.gears-slot>svg{display:block;width:100%;height:70px}.gears-number{position:absolute;left:5px;top:4px;font-size:11px;font-weight:700;color:#8b714a}.gears-empty{font-size:30px;color:#ab8d5d}.gears-teeth{display:block;font-size:12px;color:#7f633d}.gears-readout{display:flex;justify-content:center;align-items:center;gap:3px;color:#947448;font-size:13px;margin-top:5px;min-height:24px}.gears-readout svg{width:20px;height:20px}.gears-readout.matched{color:#538675;background:#cddfc2;border-radius:7px}.gears-tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-width:490px;margin:10px auto 0}.gears-part{position:relative;padding:2px 4px;border:1px solid #b89b6c;border-radius:12px;background:#f5e6c0;color:#886d44;cursor:pointer}.gears-part>svg{width:100%;height:43px;display:block}.gears-part strong{display:block;font-size:12px}.gears-part small{position:absolute;right:4px;top:2px;color:#5d8c77}.gears-part.selected{outline:3px solid #91b1a7;outline-offset:1px}.gears-door{position:relative;display:flex;width:64px;height:48px;overflow:hidden;margin:6px auto 0;border:5px solid #c8a877;border-radius:18px 18px 2px 2px;background:#577f87}.gears-door span{width:50%;height:100%;background:linear-gradient(90deg,#bc9e6d,#d5ba88);box-shadow:inset 0 0 0 1px #8f744c;transition:transform .7s ease}.gears-door.open span:first-child{transform:translateX(-100%)}.gears-door.open span:last-child{transform:translateX(100%)}.gears-wheel.turning{animation:gears-spin var(--gear-seconds) linear infinite}@keyframes gears-spin{to{transform:rotate(calc(var(--gear-direction)*360deg))}}.water-calm .gears-wheel,.water-calm .game-status.won{animation:none}.water-calm .gears-door span{transition:none}.learning-game-dialog[data-game="gears"]{padding:14px 18px}.learning-game-dialog[data-game="gears"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="gears"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="gears"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="gears"] .game-instruction{margin:8px auto;font-size:13px;max-width:620px}.learning-game-dialog[data-game="gears"] .game-body{padding:10px}.learning-game-dialog[data-game="gears"] .game-status{margin:4px 0}.learning-game-dialog[data-game="gears"] .game-status.won{padding:5px}@media(prefers-reduced-motion:reduce){.gears-wheel,.learning-game-dialog[data-game="gears"] .game-status.won{animation:none!important}.gears-door span{transition:none}}@media(max-width:600px){.learning-game-dialog[data-game="gears"]{padding:14px 10px}.gears-chain{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gears-slot{height:90px}.gears-slot>svg{height:60px}.gears-readout{font-size:12px;gap:2px}.gears-readout svg{width:18px;height:18px}.gears-tray{gap:5px}.gears-part>svg{height:36px}.gears-part strong{font-size:11px}.gears-door{height:36px;margin-top:4px}}
.gears-input{margin-bottom:4px}.learning-game-dialog .gears-slot:disabled{opacity:1;cursor:default}.learning-game-dialog[data-game="gears"]:has(.game-status.won) .gears-tray{display:none}@media(min-width:601px){.gears-door{height:44px}}@media(max-width:600px){.gears-slot{height:88px}}

/* Temple astrolabe: local cycles, no animation of the painted scene. */
.calendar-board{background:radial-gradient(ellipse at top,#38577d,#1b2d4b);border:3px solid #c6a46b;border-radius:24px;padding:12px;color:#f6e3b1;box-shadow:inset 0 0 25px #12213d55}.calendar-guide{display:flex;align-items:center;justify-content:center;gap:12px;border-bottom:1px solid #a78d5d;padding-bottom:8px}.calendar-guide-label{font-size:13px;max-width:55px}.calendar-guide-wheel{text-align:center;min-width:0}.calendar-guide-wheel svg{width:88px;display:block}.calendar-step{font-size:14px;color:#f3d58f}.calendar-observations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}.calendar-observation{background:#182a45;border:1px solid #9d855b;border-radius:14px;padding:8px;min-width:0}.calendar-sky{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:bold}.calendar-tablet{display:grid;place-items:center;width:22px;height:22px;background:#c3a270;color:#253d59;border-radius:6px;font-size:13px}.calendar-target{white-space:nowrap;font-size:16px}.calendar-clocks{display:flex;justify-content:center;margin:5px 0}.calendar-clocks svg{width:33.33%;max-width:108px;flex:1;min-width:0}.calendar-needle{transform-origin:60px 60px}.calendar-picker{display:flex;align-items:center;justify-content:center;gap:8px}.calendar-shift{border:1px solid #e0bc78;border-radius:10px;background:linear-gradient(#f7dda1,#d3ad67);color:#624c2d;width:36px;height:32px;font-size:28px;line-height:24px;cursor:pointer;box-shadow:0 3px #907145}.calendar-date{font-size:14px;min-width:75px;text-align:center}.calendar-seal{text-align:center;color:#d5b471;font-size:28px;line-height:30px}.calendar-board.solved{box-shadow:inset 0 0 25px #83d5c550}.calendar-board.solved .calendar-seal{color:#a7ebd6;text-shadow:0 0 12px #91dfd5;animation:calendar-glow 2s ease-in-out infinite alternate}@keyframes calendar-glow{to{opacity:.55}}.learning-game-dialog[data-game="calendar"]{padding:14px 18px}.learning-game-dialog[data-game="calendar"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="calendar"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="calendar"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="calendar"] .game-instruction{margin:8px auto;font-size:13px;max-width:620px}.learning-game-dialog[data-game="calendar"] .game-body{padding:8px}.learning-game-dialog[data-game="calendar"] .game-status{margin:4px 0}.learning-game-dialog[data-game="calendar"] .game-status.won{padding:5px}.water-calm .calendar-seal{animation:none!important}@media(prefers-reduced-motion:reduce){.calendar-seal{animation:none!important}}@media(max-width:600px){.learning-game-dialog[data-game="calendar"]{padding:12px 8px}.calendar-board{padding:8px}.calendar-guide{gap:5px}.calendar-guide-wheel svg{width:66px}.calendar-observations{gap:6px}.calendar-observation{padding:6px 3px}.calendar-target{font-size:13px}.calendar-sky{gap:4px}.calendar-clocks svg{max-width:86px}.calendar-picker{gap:3px}.calendar-date{font-size:12px;min-width:59px}.calendar-shift{width:27px;height:29px}.calendar-tablet{width:18px;height:18px}.calendar-guide-label{font-size:12px;max-width:42px}}

.calendar-guide-wheel svg{width:68px}.calendar-clocks svg{max-width:86px}.learning-game-dialog[data-game="calendar"] .game-instruction{margin:5px auto;line-height:1.4}.learning-game-dialog[data-game="calendar"] .game-body{padding:5px}.learning-game-dialog[data-game="calendar"] .game-controls{margin-top:8px}.learning-game-dialog[data-game="calendar"] .calendar-shift:disabled{opacity:1}.calendar-observation{padding:6px}.calendar-guide{padding-bottom:5px}.calendar-observations{margin-top:7px}@media(max-width:600px){.calendar-guide-wheel svg{width:58px}.calendar-clocks svg{max-width:70px}.calendar-observation{padding:5px 3px}.calendar-board{padding:6px}.learning-game-dialog[data-game="calendar"] .game-instruction{font-size:12px}.calendar-date{min-width:55px}.calendar-shift{min-width:27px;min-height:32px}}
@media(min-width:601px){.calendar-board{display:grid;grid-template-columns:90px minmax(0,1fr);gap:7px}.calendar-guide{grid-row:1/3;flex-direction:column;gap:5px;border-bottom:0;border-right:1px solid #a78d5d;padding:0 8px 0 0}.calendar-guide-label{max-width:none}.calendar-guide-wheel svg{width:62px}.calendar-observations{margin-top:0}.calendar-clocks svg{max-width:68px}.calendar-seal{grid-column:2}.calendar-observation{padding:4px}.calendar-clocks{margin:2px 0}}

.roots-garden{padding:10px;border:3px solid #9b9159;border-radius:22px;background:radial-gradient(ellipse at top,#587657,#283f37);box-shadow:inset 0 0 24px #173d3266}.roots-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;color:#f2e2af;font-size:13px;margin-bottom:8px}.roots-grid{display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));gap:3px;max-width:330px;margin:auto;background:#213a30;border:5px solid #826e42;border-radius:14px;padding:4px}.roots-cell{position:relative;aspect-ratio:1;border:1px solid #97a77488;border-radius:10px;background:linear-gradient(135deg,#b4be88,#829e6d);padding:0;min-width:0;cursor:pointer;overflow:hidden}.roots-cell>svg{display:block;width:100%;height:100%}.roots-cell.fixed{background:linear-gradient(135deg,#d0c396,#a99f70);cursor:default}.learning-game-dialog .roots-cell:disabled{opacity:1}.roots-source{position:absolute;top:0;left:2px;font-size:13px;text-shadow:0 1px 2px #fff}.roots-leaf{position:absolute;right:1px;bottom:9px;font-size:25px;color:#284c2c;text-shadow:0 1px #d8edb9;line-height:1}.roots-need{position:absolute;bottom:0;left:2px;color:#fef5d0;background:#324d38dc;border-radius:4px;padding:1px 3px;font-size:11px;line-height:14px}.roots-checklist{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:7px}.roots-check{color:#eadcb0;font-size:12px;border:1px solid #9eac79;border-radius:8px;padding:3px 5px;background:#293f36}.roots-check.ready{background:#516e47;color:#fff4c4}.roots-stream{animation:roots-flow 2s linear infinite;animation-delay:var(--root-delay)}@keyframes roots-flow{to{stroke-dashoffset:-42}}.roots-garden.blooming{box-shadow:inset 0 0 30px #ade78c99}.blooming .roots-leaf{color:#ffdb92;text-shadow:0 0 8px #fff6a9;animation:roots-bloom 2s ease-in-out infinite alternate}@keyframes roots-bloom{to{transform:scale(1.15)}}.water-calm .roots-stream,.water-calm .roots-leaf{animation:none!important}.learning-game-dialog[data-game="roots"]{padding:12px 16px}.learning-game-dialog[data-game="roots"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="roots"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="roots"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="roots"] .game-instruction{margin:5px auto;font-size:12px;line-height:1.4;max-width:620px}.learning-game-dialog[data-game="roots"] .game-body{padding:5px}.learning-game-dialog[data-game="roots"] .game-status{margin:4px 0}.learning-game-dialog[data-game="roots"] .game-status.won{padding:5px}.learning-game-dialog[data-game="roots"] .game-controls{margin-top:8px}@media(prefers-reduced-motion:reduce){.roots-stream,.roots-leaf{animation:none!important}}@media(max-width:600px){.learning-game-dialog[data-game="roots"]{padding:12px 8px}.roots-garden{padding:6px}.roots-grid{padding:2px;border-width:3px}.roots-legend{gap:7px;font-size:12px}.roots-source{font-size:11px}.roots-leaf{font-size:22px}.roots-need{font-size:10px}.roots-check{font-size:11px;padding:2px 4px}}
.island-scene-toolbar [hidden]{display:none}.roots-grid{max-width:270px}.roots-garden{padding:8px}.roots-legend{margin-bottom:5px}.roots-checklist{margin-top:5px}@media(max-width:600px){.roots-grid{max-width:290px}}

.mail-board{position:relative;padding:8px;border:3px solid #b9a169;border-radius:23px;background:radial-gradient(ellipse at top,#719daf,#325e7e);color:#fff0c5;box-shadow:inset 0 0 25px #153a5c66}.mail-stats{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;font-size:14px}.mail-forecast{font-size:16px;color:#f2d59c;letter-spacing:3px}.mail-map{position:relative;aspect-ratio:500/320;max-width:480px;margin:4px auto 0}.mail-map>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}.mail-island{position:absolute;transform:translate(-50%,-50%);width:59px;height:57px;border:0;padding:0;background:transparent;cursor:pointer;z-index:1}.mail-island>svg{width:100%;height:100%}.mail-number{position:absolute;right:2px;top:0;display:grid;place-items:center;background:#f3dcaa;color:#5b654d;border-radius:50%;width:22px;height:22px;font-size:14px;box-shadow:0 1px 4px #233f5c66}.mail-island.reachable .mail-number{background:#bce1bc;outline:2px solid #fcf4b9}.mail-island.current .mail-number{background:#f5c873}.learning-game-dialog .mail-island:disabled{opacity:1;cursor:default}.mail-cost{position:absolute;bottom:-5px;left:10px;font-size:12px;white-space:nowrap;background:#294d65;color:#fff0bb;border-radius:7px;padding:1px 4px;z-index:3}.mail-addresses{display:flex;position:absolute;left:-5px;top:9px;gap:2px}.mail-addresses span{display:grid;place-items:center;color:#4f534f;font-size:10px;font-weight:bold;border-radius:4px;width:14px;height:15px;border:1px solid #fff2bb}.mail-manifest{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin-top:2px}.mail-parcel{display:flex;align-items:center;gap:5px;padding:4px 6px;background:#1e435c;border-radius:9px;border:1px solid #9fb8ac;font-size:12px}.mail-letter{display:grid;place-items:center;width:21px;height:21px;border-radius:5px;color:#43524c}.mail-parcel.done{background:#476c5d}.mail-undo{display:flex;margin:6px auto 0;width:40px;height:35px;align-items:center;justify-content:center;padding:5px}.mail-undo svg{width:24px;height:24px}.mail-cloud{animation:mail-drift 7s ease-in-out infinite alternate}@keyframes mail-drift{to{transform:translateX(12px)}}.mail-board.delivered{box-shadow:inset 0 0 30px #c3eed899}.water-calm .mail-cloud{animation:none!important}.learning-game-dialog[data-game="mail"]{padding:12px 16px}.learning-game-dialog[data-game="mail"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="mail"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="mail"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="mail"] .game-instruction{margin:5px auto;font-size:12px;line-height:1.4;max-width:620px}.learning-game-dialog[data-game="mail"] .game-body{padding:5px}.learning-game-dialog[data-game="mail"] .game-status{margin:4px 0}.learning-game-dialog[data-game="mail"] .game-status.won{padding:5px}.learning-game-dialog[data-game="mail"] .game-controls{margin-top:8px}@media(prefers-reduced-motion:reduce){.mail-cloud{animation:none!important}}@media(max-width:600px){.learning-game-dialog[data-game="mail"]{padding:12px 8px}.mail-board{padding:8px 5px}.mail-map{margin-top:15px;margin-bottom:4px}.mail-island{width:47px;height:47px}.mail-stats{font-size:12px;gap:6px}.mail-forecast{font-size:14px}.mail-number{width:19px;height:19px;font-size:12px}.mail-addresses span{width:12px;height:13px;font-size:9px}.mail-addresses{top:6px;left:-3px}.mail-cost{font-size:10px;left:7px;bottom:-5px}.mail-parcel{font-size:11px;padding:3px 5px;gap:4px}.mail-letter{width:18px;height:18px}}

.mail-map{max-width:410px}.mail-board{padding-top:6px}.mail-undo{margin-top:3px;height:31px}.mail-manifest{margin-top:0}@media(max-width:600px){.mail-map{margin-top:15px}}

.mail-map{max-width:350px}.mail-board .mail-undo{margin-top:2px}.mail-board .mail-undo svg{display:block}
.mail-board .mail-undo{min-height:30px;min-width:36px;height:30px}.mail-map{max-width:320px}

.orchestra-board{padding:8px;border:3px solid #c0a675;border-radius:23px;background:radial-gradient(ellipse at top,#638696,#34526d);color:#f8e9bc;box-shadow:inset 0 0 20px #24395e66}.orchestra-pipes{display:flex;justify-content:center;gap:13px;margin-bottom:5px}.orchestra-pipe{position:relative;width:49px;height:53px}.orchestra-pipe svg{width:100%;height:100%}.orchestra-pipe>span{position:absolute;left:20px;top:10px;color:var(--tone);font-size:12px}.orchestra-pipe.playing{filter:drop-shadow(0 0 7px var(--tone))}.orchestra-score{display:grid;grid-template-columns:repeat(var(--beats),minmax(0,1fr));gap:2px;min-width:0}.orchestra-beat{display:flex;flex-direction:column;gap:1px;border-radius:3px;padding:2px 0;background:#142d4944;min-width:0}.orchestra-note{display:block;text-align:center;height:10px;line-height:10px;font-size:10px;font-family:Arial,sans-serif}.orchestra-beat.playing{background:#f0db9866;outline:1px solid #fae0a1}.orchestra-reference{padding:6px;border:1px solid #c3b084;border-radius:11px;margin:0 0 8px;background:#203e58}.orchestra-reference .orchestra-note{height:12px;line-height:12px;font-size:12px}.orchestra-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.orchestra-slot{position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:75px;border:1px solid #b8a577;background:#2b455e;border-radius:10px;padding:14px 4px 3px;color:#ffe6b1;cursor:pointer}.orchestra-slot .orchestra-score{width:100%}.orchestra-slot-number{position:absolute;top:2px;left:4px;font-size:10px;opacity:.65}.orchestra-letter{font-size:11px;line-height:14px}.orchestra-plus{font-size:26px;margin:auto}.orchestra-slot-actions{display:flex;justify-content:center;gap:4px;margin-top:3px}.orchestra-transform{width:30px;height:27px;border:1px solid #c9b37d;border-radius:7px;padding:3px;background:#e8c98c;color:#3c6f82;font-size:22px;line-height:18px;cursor:pointer}.orchestra-transform svg{display:block;width:100%;height:100%}.orchestra-transform[aria-pressed="true"]{outline:2px solid #abdbcc}.orchestra-tray{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:8px auto}.orchestra-part{position:relative;border:1px solid #b7a47a;border-radius:10px;background:#1e3e57;color:#f8dfaa;padding:3px 4px;cursor:pointer}.orchestra-part.selected{outline:2px solid #f6d18c;outline-offset:1px}.orchestra-used{position:absolute;top:1px;right:4px;font-size:10px;color:#b0e3bb}.orchestra-playback{display:flex;align-items:center;justify-content:center;gap:7px}.orchestra-playback .orchestra-play{display:grid;place-items:center;min-height:33px;min-width:39px;width:39px;height:33px;padding:2px;font-size:23px;line-height:27px}.orchestra-play[aria-pressed="true"]{outline:2px solid #b4dfcc}.orchestra-now{font-size:12px;min-width:45px}.orchestra-board.complete{box-shadow:inset 0 0 24px #c1eadb99}.learning-game-dialog .orchestra-slot:disabled,.learning-game-dialog .orchestra-part:disabled{opacity:1}.learning-game-dialog[data-game="orchestra"]{padding:12px 16px}.learning-game-dialog[data-game="orchestra"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="orchestra"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="orchestra"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="orchestra"] .game-instruction{margin:5px auto;font-size:12px;line-height:1.4;max-width:620px}.learning-game-dialog[data-game="orchestra"] .game-body{padding:5px}.learning-game-dialog[data-game="orchestra"] .game-status{margin:4px 0}.learning-game-dialog[data-game="orchestra"] .game-status.won{padding:5px}.learning-game-dialog[data-game="orchestra"] .game-controls{margin-top:8px}@media(max-width:600px){.learning-game-dialog[data-game="orchestra"]{padding:12px 8px}.orchestra-board{padding:7px}.orchestra-slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.orchestra-slot{height:67px;padding-top:13px}.orchestra-tray{gap:5px}.orchestra-part{padding:3px}.orchestra-part .orchestra-note{font-size:8px;height:8px;line-height:8px}.orchestra-pipe{width:40px;height:43px}.orchestra-pipe>span{left:17px;top:8px;font-size:10px}.orchestra-reference .orchestra-note{font-size:10px;height:10px;line-height:10px}.orchestra-score{gap:1px}.orchestra-transform{height:26px;width:29px}}
.orchestra-slots,.orchestra-tray{grid-template-columns:repeat(var(--parts),minmax(0,1fr))}@media(max-width:600px){.orchestra-slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.orchestra-board.complete .orchestra-tray,.orchestra-board.complete .orchestra-slot-actions{display:none}.orchestra-board.complete .orchestra-playback{margin-top:8px}

.thermal-board{padding:8px;border:3px solid #b69d75;border-radius:23px;background:radial-gradient(ellipse at top,#775655,#403d49);color:#f9e7bd}.thermal-stats{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;margin-bottom:5px}.thermal-stats strong{display:flex;align-items:center;gap:4px}.thermal-stats svg{width:24px;height:24px}.thermal-safe{color:#b8e4de}.thermal-checks{display:flex;gap:7px;color:#bce1ac}.thermal-grid{display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));gap:3px;max-width:280px;margin:auto;padding:5px;border:3px solid #937c63;border-radius:13px;background:repeating-linear-gradient(155deg,#713f3d 0 7px,#a45b43 9px 11px,#e4a166 12px,#713f3d 14px 21px)}.thermal-cell{position:relative;min-width:0;padding:0;aspect-ratio:1;background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;color:#f9e7c6}.thermal-cell>svg{display:block;width:100%;height:100%}.thermal-cell.coverage{border-color:#a4d9d6;box-shadow:inset 0 0 4px #b6e8de}.thermal-cell.current{outline:2px solid #f6d48a;outline-offset:-2px}.thermal-cell.visited{background:#efd59933}.thermal-cell.blocked{background:#5f343166}.learning-game-dialog .thermal-cell:disabled{opacity:1;cursor:default}.thermal-temperature{position:absolute;left:50%;top:12%;transform:translateX(-50%);font-size:15px;line-height:1;background:#644d4788;padding:2px 4px;border-radius:5px}.thermal-cell.cooled .thermal-temperature{color:#d6f7ec;background:#3f706788}.thermal-start,.thermal-finish{position:absolute;left:5px;bottom:3px;font-size:20px;color:#ffe19a}.thermal-finish{right:5px;left:auto}.thermal-checkpoint{position:absolute;right:1px;top:2px;font-size:10px;color:#ebffbc;background:#405f43bb;border-radius:3px;padding:1px}.thermal-source{position:absolute;left:1px;bottom:1px;font-size:10px;color:#e4fcf8;background:#416979dd;border-radius:4px;padding:1px 2px}.thermal-footstep{position:absolute;right:4px;bottom:1px;font-size:14px;color:#ffe29b}.thermal-valves{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;max-width:470px;margin:6px auto}.thermal-valve{border:1px solid #b29d79;border-radius:9px;background:#3f5360;padding:3px}.thermal-valve.selected{outline:2px solid #b1dcd1;outline-offset:0}.thermal-select{display:block;width:100%;border:0;border-radius:4px;background:transparent;color:#c2e7df;font-size:12px;padding:1px;cursor:pointer}.thermal-adjust{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px}.thermal-step{width:24px;height:26px;border:1px solid #c6b180;border-radius:6px;background:#e3c88d;color:#587887;font-size:20px;line-height:20px;padding:0;cursor:pointer}.thermal-board .thermal-undo{display:grid;place-items:center;margin:3px auto 0;min-height:30px;min-width:36px;height:30px;width:36px;padding:3px}.thermal-undo svg{display:block;width:24px;height:24px}.thermal-board.crossed{box-shadow:inset 0 0 25px #93d4c266}.learning-game-dialog[data-game="thermal"]{padding:12px 16px}.learning-game-dialog[data-game="thermal"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="thermal"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="thermal"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="thermal"] .game-instruction{margin:5px auto;font-size:12px;line-height:1.4;max-width:620px}.learning-game-dialog[data-game="thermal"] .game-body{padding:5px}.learning-game-dialog[data-game="thermal"] .game-status{margin:4px 0}.learning-game-dialog[data-game="thermal"] .game-status.won{padding:5px}.learning-game-dialog[data-game="thermal"] .game-controls{margin-top:8px}.thermal-board.crossed .thermal-valves,.thermal-board.crossed .thermal-undo{display:none}@media(max-width:600px){.learning-game-dialog[data-game="thermal"]{padding:12px 8px}.thermal-board{padding:6px}.thermal-grid{max-width:280px;padding:3px;gap:2px}.thermal-valves{grid-template-columns:repeat(3,minmax(0,1fr))}.thermal-temperature{font-size:12px}.thermal-stats{gap:8px;font-size:12px}.thermal-checkpoint,.thermal-source{font-size:9px}.thermal-start,.thermal-finish{font-size:17px}}

.thermal-valves{grid-template-columns:repeat(var(--coolers),minmax(0,1fr))}.thermal-steam{position:absolute;left:40%;top:35%;width:12px;height:14px;border-left:2px solid #d4f1e5aa;border-radius:50%;pointer-events:none;animation:thermal-steam 2.8s ease-out infinite}.thermal-steam:after{content:'';position:absolute;left:5px;top:3px;width:8px;height:12px;border-left:2px solid #ddf3e799;border-radius:50%}@keyframes thermal-steam{from{transform:translateY(2px);opacity:.2}50%{opacity:.7}to{transform:translateY(-10px);opacity:0}}.water-calm .thermal-steam{animation:none;opacity:.4}@media(prefers-reduced-motion:reduce){.thermal-steam{animation:none;opacity:.4}}@media(max-width:600px){.thermal-valves{grid-template-columns:repeat(3,minmax(0,1fr))}}

.thermal-grid{max-width:230px;position:relative}.thermal-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.thermal-adjust{gap:3px}.thermal-amount{font-size:11px;white-space:nowrap}@media(max-width:600px){.thermal-grid{max-width:240px}.thermal-valve{padding:2px}.thermal-select{font-size:11px}}
@media(min-width:601px){.thermal-board{display:grid;grid-template-columns:minmax(0,280px) 130px;justify-content:center;gap:6px 12px}.thermal-stats{grid-column:1/3;margin-bottom:0}.thermal-grid{grid-column:1;grid-row:2/4;max-width:280px;width:100%;box-sizing:border-box}.thermal-valves{grid-column:2;grid-row:2;grid-template-columns:1fr;width:100%;margin:0;align-self:center}.thermal-board .thermal-undo{grid-column:2;grid-row:3}.thermal-board.crossed{display:block}}.thermal-board.crossed .thermal-grid{max-width:280px}
.thermal-valve{padding:2px}.thermal-board .thermal-undo{margin:0 auto}

.barrier-board{padding:8px;border:3px solid #bea275;border-radius:23px;background:radial-gradient(ellipse at center,#70567b,#293c57);color:#f2e2b5}.barrier-meter{text-align:center;font-size:14px;color:#c9e2d6}.barrier-field{position:relative;aspect-ratio:500/320;max-width:380px;margin:3px auto}.barrier-field>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.barrier-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:37px;height:37px;border:2px solid #a78bb2;border-radius:50%;background:radial-gradient(#665b7e,#3d4866);box-shadow:0 2px 5px #1e324455;color:#a69bb7}.barrier-node.lit{background:radial-gradient(#e8e6ae,#7cbaa8);border-color:#f3dda0;box-shadow:0 0 10px #a9dec499;color:#fff0b7}.barrier-node.linked{outline:2px solid #d6bae0;outline-offset:3px}.barrier-node-number{position:absolute;left:-4px;top:-4px;display:grid;place-items:center;width:16px;height:16px;font-size:10px;border-radius:50%;background:#243c54;color:#f4deb0}.barrier-rune{font-size:23px}.barrier-gate{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:88px;height:126px;overflow:hidden;border:8px solid #c7af7c;border-bottom-width:6px;border-radius:55px 55px 7px 7px;background:#23495c;box-shadow:0 0 0 3px #84714e,inset 0 0 24px #96cbb9}.barrier-depth{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(#b7e7d7,#558b9a);font-size:38px;color:#fff0ad}.barrier-door{position:absolute;top:0;width:50%;height:100%;background:linear-gradient(90deg,#675777,#9682a1);box-shadow:inset 0 0 0 1px #d2b98a;transition:transform .8s ease}.barrier-door.left{left:0}.barrier-door.right{right:0}.barrier-lock{position:absolute;left:50%;top:45%;transform:translateX(-50%);font-size:35px;color:#e6cca1;transition:opacity .5s}.barrier-gate.open .left{transform:translateX(-105%)}.barrier-gate.open .right{transform:translateX(105%)}.barrier-gate.open .barrier-lock{opacity:0}.barrier-board.ready .barrier-gate{box-shadow:0 0 14px #b3e6d0}.barrier-signs{display:grid;grid-template-columns:repeat(var(--signs),minmax(0,1fr));gap:6px;max-width:500px;margin:6px auto 0}.barrier-sign{position:relative;border:1px solid #a39490;border-radius:12px;padding:3px;background:#283e56;color:#f2deb3;cursor:pointer;min-width:0}.barrier-sign>svg{display:block;width:44px;height:44px;margin:auto}.barrier-sign-number{position:absolute;left:4px;top:3px;font-size:11px}.barrier-affects{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;min-height:17px}.barrier-affects span{display:grid;place-items:center;width:14px;height:15px;border-radius:4px;font-size:9px;background:#547075;color:#f6e8bf}.barrier-sign.active{background:#50767a;border-color:#dbd9a8}.barrier-sign.selected{outline:2px solid #d7bbe3;outline-offset:1px}.learning-game-dialog .barrier-sign:disabled{opacity:1}.barrier-thread{animation:barrier-flow 4s linear infinite}@keyframes barrier-flow{to{stroke-dashoffset:-48}}.water-calm .barrier-thread{animation:none}.water-calm .barrier-door,.water-calm .barrier-lock{transition:none}.barrier-board.opened .barrier-signs{display:none}.learning-game-dialog[data-game="barrier"]{padding:12px 16px}.learning-game-dialog[data-game="barrier"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="barrier"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="barrier"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="barrier"] .game-instruction{margin:5px auto;font-size:12px;line-height:1.4;max-width:620px}.learning-game-dialog[data-game="barrier"] .game-body{padding:5px}.learning-game-dialog[data-game="barrier"] .game-status{margin:4px 0}.learning-game-dialog[data-game="barrier"] .game-status.won{padding:5px}.learning-game-dialog[data-game="barrier"] .game-controls{margin-top:8px}@media(prefers-reduced-motion:reduce){.barrier-thread{animation:none}.barrier-door,.barrier-lock{transition:none}}@media(max-width:600px){.learning-game-dialog[data-game="barrier"]{padding:12px 8px}.barrier-board{padding:8px}.barrier-field{margin-top:8px;margin-bottom:8px}.barrier-node{width:28px;height:28px;border-width:1px}.barrier-rune{font-size:19px}.barrier-node-number{width:14px;height:14px;font-size:9px}.barrier-gate{width:68px;height:96px;border-width:6px;border-bottom-width:5px}.barrier-signs{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.barrier-sign>svg{width:36px;height:36px}.barrier-affects span{font-size:9px;width:13px;height:14px}.barrier-affects{min-height:16px}}

.orbit-board{display:grid;grid-template-columns:minmax(0,290px) 130px;justify-content:center;gap:8px 12px;padding:8px;border:3px solid #b5a47e;border-radius:23px;background:radial-gradient(ellipse at top,#635c88,#243950);color:#f3e6be}.orbit-stats{grid-column:1/3;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;font-size:12px}.orbit-speed{color:#b8e1da}.orbit-moves{color:#d0bbdf}.orbit-map{position:relative;display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));aspect-ratio:1;background:radial-gradient(circle at 22% 28%,#ada6d133 0 1px,transparent 2px),radial-gradient(circle at 75% 63%,#c6dfe333 0 1px,transparent 2px),#23364f;background-size:53px 61px,73px 83px,auto;border:2px solid #a69f92;border-radius:14px;overflow:hidden;min-width:0}.orbit-cell{position:relative;min-width:0;border:1px solid #a0afca22;aspect-ratio:1}.orbit-cell>svg{display:block;width:100%;height:100%}.orbit-home,.orbit-goal,.orbit-beacon{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#d3ce9f}.orbit-goal{color:#a8ddd0;font-size:25px}.orbit-beacon{color:#f5cf79;text-shadow:0 0 8px #e7bc6e77}.orbit-beacon.collected{color:#a5d7c5;opacity:.4}.orbit-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.orbit-preview{animation:orbit-flow 3s linear infinite}@keyframes orbit-flow{to{stroke-dashoffset:-36}}.water-calm .orbit-preview{animation:none}.orbit-panel{display:flex;flex-direction:column;justify-content:center;gap:9px}.orbit-pad{display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px);gap:3px;justify-content:center}.orbit-impulse{border:1px solid #c8af7d;border-radius:9px;background:#e9ce93;color:#4b7382;font-size:25px;line-height:30px;padding:0;cursor:pointer}.orbit-impulse[aria-pressed="true"]{outline:2px solid #a9d8cd;outline-offset:1px}.impulse-0{grid-area:2/2}.impulse-1{grid-area:1/2}.impulse-2{grid-area:2/3}.impulse-3{grid-area:3/2}.impulse-4{grid-area:2/1}.orbit-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:7px}.orbit-actions .game-button{display:grid;place-items:center;min-width:39px;min-height:35px;width:39px;height:35px;padding:3px;font-size:22px}.orbit-undo svg{display:block;width:25px;height:25px}.orbit-prediction{width:100%;text-align:center;color:#e2c6b7;font-size:11px;min-height:15px}.orbit-board.delivered{box-shadow:inset 0 0 25px #a5d9c588}.orbit-board.delivered .orbit-panel{display:none}.orbit-board.delivered{grid-template-columns:minmax(0,290px)}.orbit-board.delivered .orbit-stats{grid-column:1}.learning-game-dialog[data-game="orbit"]{padding:12px 16px}.learning-game-dialog[data-game="orbit"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="orbit"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="orbit"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="orbit"] .game-instruction{margin:5px auto;font-size:12px;line-height:1.4;max-width:620px}.learning-game-dialog[data-game="orbit"] .game-body{padding:5px}.learning-game-dialog[data-game="orbit"] .game-status{margin:4px 0}.learning-game-dialog[data-game="orbit"] .game-status.won{padding:5px}.learning-game-dialog[data-game="orbit"] .game-controls{margin-top:8px}@media(prefers-reduced-motion:reduce){.orbit-preview{animation:none}}@media(max-width:600px){.learning-game-dialog[data-game="orbit"]{padding:12px 8px}.orbit-board{display:flex;flex-direction:column;gap:6px;padding:7px}.orbit-map{width:250px;max-width:100%;margin:auto}.orbit-panel{flex-direction:row;align-items:center;gap:15px}.orbit-pad{grid-template-columns:repeat(3,35px);grid-template-rows:repeat(3,33px)}.orbit-actions{width:100px}.orbit-stats{font-size:11px;gap:7px}.orbit-home,.orbit-goal,.orbit-beacon{font-size:20px}}

.orbit-actions .game-button{min-width:44px;min-height:40px;width:44px;height:40px}@media(max-width:600px){.orbit-pad{grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,40px)}}
.orbit-board.delivered{grid-template-columns:minmax(0,270px)}

.sphere-board{padding:9px;border:3px solid #b9a47a;border-radius:23px;background:radial-gradient(ellipse at top,#75628e,#283c58);color:#f5e6bb}.sphere-console{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:8px}.sphere-device{position:relative;width:96px;height:90px;flex-shrink:0}.sphere-core{position:absolute;left:24px;top:20px;width:50px;height:50px;border:2px solid #b3d9ce;border-radius:50%;background:radial-gradient(circle at 36% 30%,#b7a4c4,#504a6b 45%,#233244 72%);box-shadow:0 0 13px #a7cfc54d}.sphere-orbit{position:absolute;left:3px;top:28px;width:90px;height:35px;border:2px solid #e3c68b;border-radius:50%;transform:rotate(-25deg)}.sphere-orbit.inner{left:32px;top:0;width:35px;height:90px;border-color:#9fd4d1;transform:rotate(-25deg)}.sphere-particle{position:absolute;right:0;top:4px;width:13px;height:13px;border:1px solid #ba9cc8;border-radius:50%;background:#211d35;box-shadow:0 0 8px #b288c8}.sphere-readout{display:flex;flex-direction:column;gap:6px}.sphere-display{display:flex;align-items:center;gap:7px}.sphere-display-sign{font-size:21px;width:21px;text-align:center;color:#d8c4e3}.sphere-vector{display:flex;align-items:center;justify-content:center;gap:4px;min-height:22px}.sphere-channel{display:inline-flex;align-items:center;justify-content:center;gap:3px;background:#24394fcc;padding:2px 4px;border-radius:6px;font-size:13px;white-space:nowrap}.sphere-mark{font-size:13px;font-family:Arial,sans-serif}.sphere-capacity{text-align:center;color:#c8c6d1;font-size:11px}.sphere-chain{display:grid;grid-template-columns:repeat(var(--slots),minmax(0,1fr));gap:8px;max-width:570px;margin:auto}.sphere-stage{min-width:0}.sphere-slot{position:relative;width:100%;height:62px;border:1px solid #bea97e;border-radius:11px;background:#30485f;color:#f4dba6;padding:13px 4px 4px;cursor:pointer;min-width:0}.sphere-slot-number{position:absolute;left:4px;top:2px;font-size:10px;opacity:.7}.sphere-letter{font-size:11px;display:block;line-height:13px}.sphere-operation{display:flex;align-items:center;justify-content:center;gap:2px;font-size:11px;min-height:23px;white-space:nowrap}.sphere-operation .sphere-mark{font-size:12px}.sphere-empty{font-size:27px}.sphere-current{margin-top:4px}.sphere-current .sphere-channel{font-size:12px;padding:1px 3px;gap:2px}.sphere-current .sphere-mark{font-size:10px}.sphere-no-signal{height:26px;display:grid;place-items:center;color:#e8c6a8;font-size:18px}.sphere-checkpoint{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:3px;padding:2px;border:1px solid #c6ac7a;border-radius:8px;color:#f2deb2}.sphere-checkpoint>.sphere-vector{gap:2px}.sphere-checkpoint .sphere-channel{font-size:10px;padding:1px 2px;gap:1px}.sphere-checkpoint .sphere-mark{font-size:9px}.sphere-tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-width:500px;margin:9px auto 0}.sphere-part{position:relative;border:1px solid #b39b7d;border-radius:10px;background:#233e56;color:#efdcae;padding:4px 3px;min-width:0;cursor:pointer}.sphere-part.selected{outline:2px solid #d2bbdf;outline-offset:1px}.sphere-used{position:absolute;right:4px;top:2px;font-size:10px;color:#b2e0c1}.learning-game-dialog .sphere-slot:disabled,.learning-game-dialog .sphere-part:disabled{opacity:1}.sphere-board.sealed .sphere-tray{display:none}.sphere-board.sealed .sphere-core{background:radial-gradient(circle at 35% 30%,#76698d,#29283c 55%,#121c2a 75%);box-shadow:0 0 18px #aee3d1;border-color:#dbdfb1}.sphere-board.sealed .sphere-particle{transform:translate(-42px,34px) scale(.1);opacity:0;animation:sphere-absorb 1s ease-in-out}@keyframes sphere-absorb{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(-42px,34px) scale(.1);opacity:0}}.sphere-orbit.outer{animation:sphere-ring 8s ease-in-out infinite alternate}@keyframes sphere-ring{to{transform:rotate(25deg)}}.water-calm .sphere-orbit,.water-calm .sphere-particle{animation:none!important}.learning-game-dialog[data-game="sphere"]{padding:12px 16px}.learning-game-dialog[data-game="sphere"] h2{font-size:24px;margin:4px 0}.learning-game-dialog[data-game="sphere"] .game-reward-note{margin:4px auto}.learning-game-dialog[data-game="sphere"] .port-level{padding:5px 12px}.learning-game-dialog[data-game="sphere"] .game-instruction{margin:5px auto;font-size:12px;line-height:1.4;max-width:620px}.learning-game-dialog[data-game="sphere"] .game-body{padding:5px}.learning-game-dialog[data-game="sphere"] .game-status{margin:4px 0}.learning-game-dialog[data-game="sphere"] .game-status.won{padding:5px}.learning-game-dialog[data-game="sphere"] .game-controls{margin-top:8px}@media(prefers-reduced-motion:reduce){.sphere-orbit,.sphere-particle{animation:none!important}}@media(max-width:600px){.learning-game-dialog[data-game="sphere"]{padding:12px 8px}.sphere-board{padding:7px}.sphere-console{gap:8px}.sphere-chain{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.sphere-chain:has(>.sphere-stage:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}.sphere-slot{height:56px}.sphere-tray{gap:5px}.sphere-part .sphere-operation{gap:1px;font-size:10px}.sphere-part .sphere-mark{font-size:10px}.sphere-channel{font-size:12px}.sphere-current .sphere-channel{font-size:11px;padding:1px 2px}.sphere-vector{gap:3px}}

/* Game entrances stay attached to painted objects as the scene pans. */
.scene-game-marker {
  position:absolute; z-index:2; display:grid; place-items:center;
  width:52px; height:52px; padding:8px; border:2px solid #f4d58f;
  border-radius:50%; background:radial-gradient(circle at 35% 25%,#456c83f2,#18394bf2);
  box-shadow:0 3px 0 #563c2677,0 5px 15px #10253566,inset 0 1px 3px #fff4c944;
  transform:translate(-50%,-50%); cursor:pointer; touch-action:manipulation;
  transition:filter .15s,box-shadow .15s;
}
.scene-game-marker[hidden] { display:none; }
.scene-game-marker svg { display:block; width:100%; height:100%; }
.scene-game-marker:hover { filter:brightness(1.16); box-shadow:0 3px 0 #563c2677,0 0 18px #ffe4a588; }
.scene-game-marker:focus-visible { outline:3px solid #fff6cc; outline-offset:4px; }
.scene-game-marker.first-victory::after {
  content:'✓'; position:absolute; right:-4px; top:-4px; width:19px; height:19px;
  display:grid; place-items:center; border:1px solid #fff0b5; border-radius:50%;
  background:#448b70; color:#fff4c7; font:700 13px/1 system-ui;
}

.scene-entrance-area { position:absolute; z-index:1; min-width:44px; min-height:44px; padding:0; border:0; border-radius:45% 45% 4px 4px; background:transparent; cursor:pointer; touch-action:manipulation; }
.scene-entrance-area[hidden] { display:none; }
.scene-entrance-area:focus-visible { outline:2px solid #ffe5a0; outline-offset:3px; }

.scene-gate-dialog { max-width:min(400px,calc(100vw - 32px)); text-align:center; }
.scene-gate-items { display:flex; justify-content:center; gap:24px; margin:24px 0; }
.scene-gate-items svg { width:80px; height:80px; filter:drop-shadow(0 4px 5px #0003); }

/* Invisible character hit areas follow the painted art; hover never draws a frame. */
.scene-character { position:absolute; z-index:1; min-width:44px; min-height:44px; padding:0; border:0; background:transparent; cursor:pointer; touch-action:manipulation; }
.scene-character[hidden] { display:none; }
.scene-character:hover { background:transparent; box-shadow:none; }
.scene-character:focus-visible { outline:2px solid #f9dfa4; outline-offset:2px; border-radius:18px; }
.npc-dialog { position:fixed; inset:auto auto max(20px,env(safe-area-inset-bottom)) 50%; transform:translateX(-50%); margin:0; box-sizing:border-box; width:min(860px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:auto; padding:22px; border:2px solid #d6b776; border-radius:24px; color:#f4dfad; background:linear-gradient(145deg,#294963,#142b43); box-shadow:0 18px 70px #07162688; }
.npc-dialog[open] { display:grid; grid-template-columns:180px minmax(0,1fr); gap:22px; }
.npc-dialog::backdrop { background:#081a2d44; }
.npc-dialog-portrait { height:226px; overflow:hidden; border:1px solid #dec48a; border-radius:65px 65px 18px 18px; background:#18334b; box-shadow:0 4px 14px #05162655; }
.npc-dialog-portrait > svg { display:block; width:100%; height:100%; }
.npc-dialog-sheet { min-width:0; min-height:226px; box-sizing:border-box; padding:23px 26px; border:1px solid #c9aa70; border-radius:16px; background:radial-gradient(ellipse at top left,#fff4d2,#ecdaa9); box-shadow:inset 0 0 22px #ac824026; }
.npc-dialog h2 { margin:0 35px 14px 0; color:#654d32; font:600 25px/1.25 Georgia,serif; overflow-wrap:anywhere; outline:none; }
.npc-dialog-content { min-height:120px; }
.npc-dialog > .auth-close { top:15px; right:15px; display:grid; place-items:center; width:44px; height:44px; border:1px solid #c9a56b; border-radius:50%; background:#f6e4ba; color:#765635; z-index:1; }
.npc-dialog > .auth-close svg { width:24px; height:24px; }
@media(max-width:600px) {
  .npc-dialog { width:calc(100vw - 20px); padding:14px; bottom:max(10px,env(safe-area-inset-bottom)); max-height:calc(100dvh - 20px); border-radius:20px; }
  .npc-dialog[open] { grid-template-columns:96px minmax(0,1fr); gap:12px; }
  .npc-dialog-portrait { height:154px; border-radius:38px 38px 12px 12px; }
  .npc-dialog-sheet { min-height:190px; padding:18px 14px; }
  .npc-dialog h2 { font-size:19px; margin-right:28px; }
  .npc-dialog-content { min-height:100px; }
  .npc-dialog > .auth-close { top:9px; right:9px; }
}

.equipment-item-art { display:block; width:100%; height:100%; overflow:hidden; }

.npc-dialog.merchant-dialog { width:min(1040px,calc(100vw - 32px)); }
.npc-dialog.merchant-dialog[open] { grid-template-columns:160px minmax(0,1fr); gap:18px; }
.merchant-dialog .npc-dialog-sheet { padding:18px; }
.merchant-dialog h2 { margin-bottom:10px; }
.shop-toolbar { display:flex; align-items:center; gap:7px; margin-bottom:10px; flex-wrap:wrap; }
.shop-toolbar button { min-width:40px; height:38px; border:1px solid #b99a5c; border-radius:10px; background:#f9e8bd; color:#665333; cursor:pointer; display:grid; place-items:center; }
.shop-toolbar button[aria-pressed="true"] { background:#c1ded2; outline:2px solid #5d9294; outline-offset:1px; }
.shop-toolbar button svg { width:27px; height:27px; }
.shop-tiers { display:flex; gap:5px; margin-left:5px; }
.shop-tiers[hidden] { display:none; }
.shop-tiers button { font:bold 18px Georgia,serif; min-width:33px; }
.shop-balance { display:flex; align-items:center; gap:4px; margin-left:auto; color:#67512e; font-weight:700; }
.shop-balance svg { width:27px; height:27px; }
.shop-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; max-height:254px; overflow:auto; padding:3px; border-radius:12px; }
.shop-item { position:relative; min-width:0; height:116px; padding:6px 6px 22px; border:1px solid #a5b7b5; border-radius:12px; background:radial-gradient(ellipse at 40% 25%,#45687c,#233e56); cursor:pointer; }
.shop-item[aria-pressed="true"] { outline:2px solid #eac569; outline-offset:-3px; box-shadow:inset 0 0 12px #f2dba444; }
.shop-item > .equipment-item-art { width:100%; height:100%; }
.shop-item-cost { position:absolute; left:50%; bottom:4px; transform:translateX(-50%); display:flex; align-items:center; gap:3px; color:#f6e3b0; font-size:13px; }
.shop-item-cost svg { width:17px; height:17px; }
.shop-owned { position:absolute; right:5px; top:4px; font-size:11px; color:#f4e4b9; background:#112f46c9; border-radius:6px; padding:1px 4px; }
.shop-selection { display:flex; align-items:center; gap:9px; min-height:61px; padding-top:9px; }
.shop-selection > .shop-selected-art { width:40px; height:48px; flex-shrink:0; }
.shop-item-name { min-width:0; color:#6c5437; font-size:13px; overflow-wrap:anywhere; }
.shop-confirm { display:flex; align-items:center; justify-content:center; gap:9px; margin-left:auto; flex-shrink:0; min-width:100px; min-height:46px; border:1px solid #a7894d; border-radius:12px; background:linear-gradient(#d8e8ba,#b9d2ab); cursor:pointer; color:#4a5539; }
.shop-confirm > svg { width:29px; height:29px; }
.shop-confirm > span { display:flex; align-items:center; gap:3px; font-weight:700; }
.shop-confirm > span svg { width:23px; height:23px; }
.shop-panel button:disabled { opacity:.5; cursor:default; }
.shop-status { margin:5px 0 0; min-height:19px; font-size:12px; color:#795a35; }
.shop-empty { min-height:200px; grid-column:1/-1; display:grid; place-items:center; opacity:.45; }
.shop-empty svg { width:70px; height:70px; }
.backpack-owned { position:relative; display:grid; place-items:center; overflow:hidden; }
.backpack-owned > .equipment-item-art { width:88%; height:88%; }
.backpack-quantity { position:absolute; right:5px; bottom:4px; color:#f7e2af; background:#142c46c9; border-radius:5px; padding:0 4px; font:600 12px/18px system-ui; }
@media(max-width:600px) {
  .npc-dialog.merchant-dialog { width:calc(100vw - 16px); padding:10px; max-height:calc(100dvh - 16px); }
  .npc-dialog.merchant-dialog[open] { display:block; }
  .merchant-dialog .npc-dialog-portrait { position:absolute; left:21px; top:21px; width:58px; height:74px; border-radius:22px 22px 8px 8px; }
  .merchant-dialog .npc-dialog-sheet { padding:12px; }
  .merchant-dialog h2 { min-height:69px; margin:0 37px 10px 70px; padding-top:6px; }
  .shop-toolbar { gap:5px; }
  .shop-toolbar button { min-width:33px; height:34px; }
  .shop-toolbar button svg { width:24px; height:24px; }
  .shop-tiers { gap:4px; margin-left:0; }
  .shop-tiers button { min-width:29px; }
  .shop-balance { font-size:13px; }
  .shop-balance svg { width:22px; height:22px; }
  .shop-grid { gap:6px; max-height:220px; }
  .shop-item { height:96px; padding:5px 4px 21px; }
  .shop-confirm { min-width:84px; gap:5px; }
  .shop-item-name { font-size:12px; }
}


/* Standing dialogue art is opt-in per NPC; scene paintings stay unchanged. */
.npc-dialog.npc-full-body { width:min(1120px,calc(100vw - 32px)); }
.npc-dialog.npc-full-body[open] { grid-template-columns:300px minmax(0,1fr); align-items:end; }
.npc-full-body .npc-dialog-portrait { height:min(65dvh,510px); overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; }
.npc-full-body .npc-dialog-sheet { align-self:stretch; }
.npc-full-body .npc-dialog-portrait > img { display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
@media (max-width:600px) {
  .npc-dialog.npc-full-body { width:calc(100vw - 16px); }
  .npc-dialog.npc-full-body[open] { display:block; }
  .npc-full-body .npc-dialog-portrait { position:static; width:100%; height:220px; max-height:32dvh; margin:0 auto 10px; }
  .npc-full-body h2 { min-height:0; margin:0 35px 12px 0; padding-top:0; }
}

.npc-dialog-content{overflow:auto;max-height:65dvh}.story-speech{font-size:clamp(16px,1.6vw,21px);line-height:1.55;white-space:pre-line}.story-action{border:1px solid #c5a668;border-radius:14px;background:#233c58;color:#ffe1a1;padding:12px 18px;margin:6px 8px 6px 0;cursor:pointer;font:inherit}.story-action:disabled{opacity:.55;cursor:wait}.story-action:focus-visible{outline:3px solid #a9ebee}.story-rewards{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.story-reward-item{width:80px;height:100px}.story-claim svg{width:32px;height:32px}.story-error{color:#ffb3a4}.story-journal{width:min(800px,94vw);max-height:88dvh}.story-journal-body{overflow:auto;max-height:70dvh}.story-journal-card{padding:12px 18px;margin:12px 0;border-radius:12px;background:#172d44;color:#f4e6c3}.story-journal-card h3{margin:4px 0}.story-notice{padding:50px 30px 24px}.story-game-locked{opacity:.45;filter:grayscale(.65)}.scene-character[data-story-state="ready"]:after,.scene-character[data-story-state="available"]:after{content:'!';position:absolute;top:-15px;left:50%;font:bold 24px system-ui;color:#ffe28a;text-shadow:0 2px 4px #1b2439;pointer-events:none}.scene-character[data-story-state="ready"]:after{content:'✓';color:#a7f4b8}.story-captured .scene-character[data-npc="royal-king"]{display:none}.story-finale-note{position:absolute;inset:20% 15%;z-index:4;background:#172c46ed;color:#ffe5ad;padding:30px;border-radius:20px;text-align:center;pointer-events:none}

.story-npc-captured{display:none!important}

.npc-dialog-sheet .npc-dialog-content{color:#503a23}.npc-dialog-sheet .story-speech,.npc-dialog-sheet .npc-dialog-content h3{color:#503a23}.story-action svg{vertical-align:middle}.story-reward-item{max-width:90px}.story-notice{color:#fff3d6}.story-hint{padding:12px;background:#ead5a4;border-radius:10px}


.story-ward-flash .island-scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,#adecf76b,transparent 65%);animation:story-ward 1.6s ease-out forwards}@keyframes story-ward{from{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.story-ward-flash .island-scene:after{animation:none;opacity:0}}

/* Readable messages on navy panels and parchment dialogue sheets. */
.story-notice {
  width: min(560px, calc(100vw - 32px));
  padding: 64px 40px 44px;
  font: 600 clamp(20px, 2vw, 24px)/1.55 Georgia, "Times New Roman", serif;
  color: #503a23;
  text-wrap: pretty;
}
.story-notice {
  color: #503a23;
  background: radial-gradient(ellipse at 50% 0%, #fffdf0, transparent 70%), #f5e5bd;
  border: 4px solid #96613b;
  border-radius: 26px;
  box-shadow: 0 0 0 2px #e7ba6f, 0 25px 80px #0008;
  text-align: center;
}
.story-notice::backdrop { background: #082a3b88; backdrop-filter: blur(5px); }
.story-notice p { margin: 0; min-height: 74px; display: grid; place-items: center; overflow-wrap: anywhere; }
.story-notice .auth-close { width: 38px; height: 38px; top: 10px; right: 10px; color: #79562f; border-radius: 50%; background: #e1bb7d44; }
.story-notice .auth-close:hover { background: #e1bb7d88; }
.story-notice .auth-close:focus-visible { outline: 2px solid #96613b; outline-offset: 2px; }
.story-speech, .story-hint, .story-journal-card, .story-finale-note {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.npc-dialog-sheet .story-speech { color: #3c2b1c; font-size: clamp(17px, 1.6vw, 21px); }
.story-action { font-family: "Segoe UI", system-ui, sans-serif; font-weight: 650; }
.toast { font-size: 16px; font-weight: 650; line-height: 1.5; color: #fff3d6; background: #152d48f2; }
.auth-message, .profile-status, .shop-status, .game-status, .story-error {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
}
.auth-intro, .auth-note { color: #dce5f1; font-weight: 600; }
.npc-dialog-sheet .story-error { color: #a02e27; }
@media (max-width: 600px) {
  .story-notice { padding: 62px 24px 36px; }
}
/* A constant-size story guide follows map coordinates without intercepting map input. */
.story-map-guide { position:absolute; width:0; height:0; z-index:2; pointer-events:none; user-select:none; }
.story-map-guide[hidden] { display:none; }
.story-guide-hand { position:absolute; width:50.4px; height:75.6px; left:-28px; top:-67.9px; max-width:none; pointer-events:none; transform-origin:28px 67.9px; filter:drop-shadow(0 3px 3px #142b5066); animation:story-guide-point 1.8s ease-in-out infinite; }

@keyframes story-guide-point { 0%,100% { transform:rotate(var(--guide-angle,0deg)) translateY(-7px); } 50% { transform:rotate(var(--guide-angle,0deg)) translateY(1px); } }
.story-map-guide[data-still="true"] .story-guide-hand { animation:none; transform:rotate(var(--guide-angle,0deg)); }
@media(prefers-reduced-motion:reduce) { .story-guide-hand { animation:none; transform:rotate(var(--guide-angle,0deg)); } }

/* Small sun/moon clock: the same hour drives the pointer and map illumination. */
.world-clock { position:absolute; right:var(--ui-right,14px); bottom:var(--ui-bottom,14px); width:112px; height:112px; z-index:6; pointer-events:none; user-select:none; filter:drop-shadow(0 3px 5px #08243b77); }
.world-clock-face,.world-clock-needle { position:absolute; inset:0; width:100%; height:100%; display:block; }
.world-clock-needle { overflow:visible; }
@media(max-width:600px) { .world-clock { width:88px; height:88px; } }
.ship-location > .world-clock,.port-location > .world-clock,.island-location > .world-clock { position:fixed; }
@media(max-width:600px) { .ship-location > .world-clock,.port-location > .world-clock,.island-location > .world-clock { bottom:calc(var(--ui-bottom,14px) + 66px); } }

/* Optional cargo hints: advice first, relevant crate on a second tap. */
.ship-game-dialog .cargo-advice{margin:12px auto 0;max-width:460px;padding:10px 14px;border-radius:14px;background:#fff5d5;color:#654a2d;font-size:15px;font-weight:600;line-height:1.5;text-align:center;border:1px solid #dab56c}
.cargo-advice[hidden]{display:none}
.ship-game-dialog .cargo-hint-target{outline:3px solid #72bcae;outline-offset:2px;box-shadow:0 0 0 6px #bce8cf77!important}
.ship-game-dialog .cargo-hint-button.hint-nudge{animation:cargo-hint-glow 2.8s ease-in-out infinite}
@keyframes cargo-hint-glow{50%{box-shadow:0 0 0 5px #ffe08966,0 0 18px #f5c66099}}
@media(prefers-reduced-motion:reduce){.ship-game-dialog .cargo-hint-button.hint-nudge{animation:none;outline:2px solid #e8bf62;outline-offset:3px}}
.water-calm .ship-game-dialog .cargo-hint-button.hint-nudge{animation:none;outline:2px solid #e8bf62}

@media(min-width:601px){.ship-game-dialog[data-game="cargo"]:has(.cargo-advice:not([hidden])) .cargo-grid{max-width:250px;margin-top:10px}.ship-game-dialog[data-game="cargo"]:has(.cargo-advice:not([hidden])) .cargo-piece{min-height:64px}.ship-game-dialog[data-game="cargo"]:has(.cargo-advice:not([hidden])) .game-body{padding:10px}.ship-game-dialog[data-game="cargo"]:has(.cargo-advice:not([hidden])) .game-status:empty{margin:4px;min-height:0}}

.ship-game-dialog[data-game="cargo"]:has(.cargo-advice:not([hidden])) h2{margin:6px 32px 10px}

/* Keep order actions visible while the goods list scrolls. */
  .learning-game-dialog[data-game="orders"][open]{display:flex;flex-direction:column;max-height:calc(100dvh - 32px);overflow:hidden}
  .learning-game-dialog[data-game="orders"]>.game-body{min-height:0;overflow-y:auto;flex:0 1 auto;overscroll-behavior:contain}
  .learning-game-dialog[data-game="orders"]>:is(h2,.game-reward-note,.port-levels,.game-instruction,.game-status,.game-controls){flex-shrink:0}
  .learning-game-dialog[data-game="orders"]>.game-controls{padding-top:6px}

/* Keep settings clear of the player resources on narrow maps. */
@media(max-width:600px){.tools{top:76px}}

/* Equipment perks are illustrated, with localized tooltips for detail. */
.equipment-coin-bonus{position:absolute;top:4px;left:4px;right:auto;display:inline-flex;align-items:center;gap:2px;padding:1px 3px;background:#fff0ba;color:#79501c;border:1px solid #ddba6f;border-radius:12px;box-shadow:0 1px 3px #0003;pointer-events:none;z-index:2;white-space:nowrap}
.equipment-coin-bonus .island-art-icon{width:12px;height:12px}.equipment-coin-bonus strong{font-size:10px!important;color:#79501c!important}
.shop-selection>.equipment-coin-bonus{position:static;flex-shrink:0}.equipment-slot{position:relative;padding:3px;cursor:pointer}.equipment-slot:disabled{opacity:1;cursor:default}.equipment-slot .equipment-coin-bonus{top:4px;left:4px;right:auto;padding:1px 3px}.equipment-slot .equipment-coin-bonus .island-art-icon{width:12px;height:12px}
button.backpack-cell{position:relative;padding:2px;cursor:pointer;color:inherit}button.backpack-cell:disabled{cursor:wait}.backpack-equipped{border-color:#98d9b5!important;box-shadow:inset 0 0 0 2px #80c39a}.backpack-equipped::after{content:'✓';position:absolute;bottom:3px;left:4px;color:#c2f0c6;font-weight:bold}
.character-stats{flex-wrap:wrap;row-gap:6px}.equipment-set-status{display:flex;justify-content:center;align-items:center;gap:18px;flex-basis:100%;font-size:14px}.equipment-city-status,.equipment-income{display:inline-flex;align-items:center;gap:5px}.equipment-set-status .island-art-icon{width:23px;height:23px}.equipment-status{color:#f4c3a3;font-size:13px;text-align:center}.equipment-status:empty{display:none}
.backpack-owned{display:block}.backpack-owned>.equipment-item-art{position:absolute;inset:6%}

.story-outfit-requirement{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:12px 0}.story-outfit-requirement strong{flex-basis:100%}.story-outfit-piece{width:36px;height:36px;opacity:.4}.story-outfit-piece.is-worn{opacity:1;filter:drop-shadow(0 0 3px #55b983)}

.shop-tiers button{padding:0;line-height:1;overflow:visible;align-self:center}.shop-toolbar{padding-block:4px}.shop-grid{padding:4px}.shop-item>.equipment-item-art{padding-top:10px;box-sizing:border-box}

.character-figure>.character-appearance{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}.avatar>.character-appearance{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}

/* Main map identity and time stay together; location dialogs hide both. */
.map-corner { position:absolute; right:var(--ui-right,14px); bottom:var(--ui-bottom,14px); z-index:6; display:flex; flex-direction:column; align-items:center; gap:7px; pointer-events:none; user-select:none; }
.map-corner[hidden] { display:none; }
.map-brand { display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 2px 3px #072239bb); }
.map-brand img { display:block; width:94px; height:94px; object-fit:contain; }
.map-brand span { margin-top:-5px; font-family:Georgia,'Times New Roman',serif; font-size:25px; font-weight:700; letter-spacing:.6px; line-height:1.15; color:#ffe3a0; text-shadow:0 2px 0 #79501e,1px 0 0 #79501e,-1px 0 0 #79501e; }
.map-corner .world-clock { position:relative; right:auto; bottom:auto; }
@media(max-width:600px) { .map-brand img { width:70px; height:70px; } .map-brand span { font-size:20px; } .map-corner { gap:5px; } }