* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  background: #254849;
  color: #173d3b;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, textarea { -webkit-user-select:text; user-select:text; }
.game { touch-action:manipulation; }
#scene, #gather, #guard, #strike, .battle-hand button { touch-action:none; }
button,
a,
input {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
  border: 0;
}
button:disabled {
  cursor: default;
  opacity: .48;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #b98132;
  outline-offset: 2px;
}
.pointer-input button:focus-visible, .pointer-input a:focus-visible { outline:none; }
button:active:not(:disabled) {
  scale: .96;
}
svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
[hidden] {
  display: none !important;
}
.game {
  width: 100%;
  height: 100dvh;
  max-width: 490px;
  margin: auto;
  display: flex;
  flex-direction: column;
  background: #eaf0de;
  overflow: hidden;
  box-shadow: 0 0 90px #102e3980;
}
.global-bar {
  height: calc(56px + env(safe-area-inset-top));
  padding: calc(env(safe-area-inset-top) + 4px) 12px 4px;
  min-height: calc(56px + env(safe-area-inset-top));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #b6c8b7;
  background: #f1f4e9;
  z-index: 5;
}
.global-right {
  display: flex;
  gap: 1px;
}
.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: 10px;
  color: #50756b;
}
.icon-button:hover {
  background: #dce8d8;
}
.world {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #bce4d5;
}
#scene {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  touch-action: none;
  outline: none;
}
.world-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      #e6f0d540,
      transparent 25%,
      transparent 75%,
      #21595d30);
  z-index: 1;
}
.hud {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
.level-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f7f7e9ee;
  border: 1px solid #fff7;
  box-shadow: 0 3px 0 #4a7a6a16;
  border-radius: 13px;
  padding: 7px 9px;
  min-width: 82px;
}
.level-pill svg {
  width: 23px;
  color: #bf913d;
  fill: #edcb77;
}
.level-pill b {
  font-size: 12px;
  display: block;
}
.xp-track {
  height: 3px;
  width: 36px;
  display: block;
  background: #d5debd;
  border-radius: 8px;
  margin-top: 4px;
  overflow: hidden;
}
.xp-track i {
  height: 100%;
  display: block;
  background: #73a968;
}
.stock {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2px;
  background: #f7f7e9ee;
  border-radius: 13px;
  min-height: 43px;
  border: 1px solid #fff7;
  box-shadow: 0 3px 0 #4a7a6a16;
  padding: 6px 5px;
}
.stock span {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 750;
  min-width: 0;
}
.stock svg {
  width: 17px;
  height: 18px;
}
.area {
  position: absolute;
  left: 22px;
  top: 82px;
  z-index: 2;
  pointer-events: none;
}
.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #416a60;
}
.area h1 {
  font-size: 26px;
  margin: 4px 0;
  color: #214e47;
  text-shadow: 0 1px #ffffa0;
  line-height: 1.2;
}
.area p {
  font-size: 11px;
  margin: 6px 0;
  color: #355b4b;
}
.objective {
  position: absolute;
  left: 22px;
  top: 169px;
  z-index: 2;
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 11px;
  color: #355b4b;
  pointer-events: none;
}
.objective svg {
  width: 15px;
  height: 15px;
}
.node-label {
  position: absolute;
  transform: translate(-50%, 35px);
  min-height: 38px;
  padding: 7px 13px;
  border-radius: 30px;
  border: 1px solid #fff9;
  background: #f7f5e6ed;
  box-shadow: 0 4px 12px #345c5326;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  z-index: 3;
  touch-action: manipulation;
}
.node-label svg {
  width: 18px;
  height: 18px;
}
.node-label.locked {
  color: #71877c;
  background: #e5ead9de;
}
.gather-feedback {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translateX(-50%);
  font-size: 24px;
  color: #fffde5;
  text-shadow: 0 2px 0 #397868, 0 0 15px #193a4b;
  pointer-events: none;
  font-weight: 900;
  z-index: 6;
  white-space: nowrap;
}
.gather-feedback.pop {
  animation: loot-pop .65s ease-out forwards;
}
.gather-feedback svg {
  vertical-align: middle;
  width: 27px;
  height: 27px;
}
.expedition-dock {
  position: absolute;
  bottom: 16px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 3;
}
.expedition-dock > div {
  display: grid;
  grid-template-columns: 8px auto;
  gap: 5px 7px;
}
.danger-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f4f2d2;
  margin-top: 5px;
  box-shadow: 0 0 0 3px #fffb;
}
.expedition-dock b {
  font-size: 12px;
  color: #f8f8e8;
  text-shadow: 0 1px 4px #274e48;
}
.expedition-dock small {
  grid-column: 2;
  font-size: 11px;
  color: #eef3dc;
  text-shadow: 0 1px 3px #274e48;
}
.expedition-dock button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #eee5c6;
  background: #f8f4df;
  color: #48685a;
  border-radius: 13px;
  padding: 10px 12px;
  box-shadow: 0 3px 0 #2b635238;
  font-size: 12px;
  font-weight: 800;
}
.expedition-dock button svg:first-child {
  width: 20px;
  height: 20px;
  color: #8d814e;
}
.expedition-dock button svg:last-child {
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
}
.game-nav {
  display: flex;
  flex-shrink: 0;
  background: #f1f4e9;
  border-top: 1px solid #b6c8b7;
  padding: 0 0 env(safe-area-inset-bottom);
  z-index: 5;
  gap: 0;
}
.game-nav button {
  flex: 1;
  background: transparent;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 0;
}
.game-nav button:hover {
  background: #e0e9d5;
}
.game-nav svg {
  color: #53786a;
  width: 26px;
  height: 26px;
  stroke-width: 1.6;
}
.game-nav b {
  font-size: 12px;
}
.game-nav small {
  font-size: 9px;
  color: #819174;
}
.loading {
  position: absolute;
  inset: 0;
  background: #bce4d5;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  z-index: 10;
  font-size: 13px;
}
.loading svg {
  width: 42px;
  height: 42px;
  animation: spin 4s linear infinite;
}
.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  max-width: calc(100% - 36px);
  width: max-content;
  border: 1px solid #e8e7c3;
  background: #163c3bea;
  color: #f6f5e3;
  box-shadow: 0 7px 30px #14393444;
  padding: 12px 18px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}
.save-warning {
  position: absolute;
  bottom: 75px;
  left: 14px;
  right: 14px;
  padding: 8px;
  background: #8a382f;
  color: #fff;
  font-size: 11px;
  z-index: 8;
  border-radius: 9px;
}
dialog {
  border: 1px solid #e9e3c5;
  border-radius: 23px;
  background: #f2f4e7;
  color: #234c43;
  box-shadow: 0 25px 90px #0b343e66;
  padding: 0;
  width: calc(100% - 28px);
  max-width: 430px;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}
dialog::backdrop {
  background: #153e48b3;
  backdrop-filter: blur(5px);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 9px 20px;
  border-bottom: 1px solid #d8dfca;
}
.panel-head h2 {
  font-size: 18px;
  flex: 1;
  margin: 0;
  line-height: 1.4;
}
.panel-head .icon-button {
  width: 36px;
  height: 36px;
}
.panel-head #panel-back {
  margin-left: -9px;
  margin-right: 4px;
}
#panel-content {
  padding: 18px 18px 20px;
}
.panel-note {
  font-size: 11px;
  color: #7c8c75;
  line-height: 1.55;
  margin: 10px 0;
  text-align: center;
}
.section-label {
  font-size: 11px;
  color: #87947a;
  font-weight: 650;
  margin: 0 0 10px;
}
.primary,
.secondary {
  min-height: 44px;
  width: 100%;
  border-radius: 12px;
  padding: 11px 14px;
  font-weight: 750;
  font-size: 13px;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.primary {
  color: #faf6e2;
  background: #2d6b59;
  box-shadow: 0 3px 0 #1c4d4055;
}
.secondary {
  color: #476852;
  background: #e0e8d0;
  border: 1px solid #cad5b9;
}
.primary svg,
.secondary svg {
  width: 18px;
  height: 18px;
}
.button-row {
  display: flex;
  gap: 8px;
  margin-top: 13px;
}
.button-row > * {
  flex: 1;
}
.rule-line {
  height: 1px;
  background: #d8dfca;
  margin: 15px 0;
}
.summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 14px;
}
.summary-line b {
  font-size: 16px;
  color: #376956;
}
.summary-line svg {
  width: 17px;
  vertical-align: middle;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.card {
  --element:#92d1a0;
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(
      155deg,
      #1c5652,
      #153438 65%,
      #132f36);
  color: #fff7d6;
  border: 1px solid #b5c4a4;
  border-radius: 11px;
  padding: 8px;
  box-shadow: 0 4px 0 #073d3f22;
  overflow: hidden;
  aspect-ratio: .69;
  text-align: left;
  min-width: 0;
}
.card::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid #c5d4ac40;
  border-radius: 7px;
  z-index: -1;
}
.card.rarity-S,
.card.rarity-SS,
.card.rarity-SSS {
  border-color: #e1bc69;
  background:
    linear-gradient(
      150deg,
      #594e35,
      #203640 55%,
      #323550);
  box-shadow: 0 0 18px #d3bb6933;
}
.card.rarity-SSS::before {
  border-color: #e7c98199;
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
}
.card-top svg {
  width: 16px;
  height: 16px;
  color: var(--element);
  fill: color-mix(in srgb, var(--element) 10%, transparent);
}
.creature {
  background-image: var(--art-file,url(/assets/games/island-cards/creatures.webp));
  background-size: var(--art-columns,300%) var(--art-rows,300%);
  background-position: var(--art-x) var(--art-y);
  background-repeat: no-repeat;
  aspect-ratio: 1;
  filter: drop-shadow(0 5px 4px #0003);
  width: 100%;
}
.card .creature {
  margin-top: 0;
  transform: scale(1.12);
}
.card-name {
  font-weight: 750;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 3px 0 0;
}
.card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #c5d4c7;
  margin-top: 3px;
}
.card.equipped::after {
  content: "\d3b8\c131";
  position: absolute;
  bottom: 35%;
  right: 5px;
  background: #f1e8b6;
  color: #3a6551;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 800;
}
.card.locked {
  background: #dbe3d1;
  color: #879c8e;
  border: 1px dashed #a9bdaa;
  box-shadow: none;
}
.card.locked .creature {
  opacity: .18;
  filter: grayscale(1);
}
.card.locked .card-name {
  color: #758e7d;
}
.card.locked .card-meta {
  color: #879f8c;
}
.card-full {
  width: 210px;
  margin: auto;
  aspect-ratio: .64;
  padding: 13px;
  border-radius: 16px;
  box-shadow: 0 14px 28px #233e4326;
}
.card-full .card-top {
  font-size: 22px;
}
.card-full .creature {
  width: 90%;
  margin-inline: auto;
}
.card-full .card-top svg {
  width: 24px;
  height: 24px;
}
.card-full .card-name {
  font-size: 16px;
  white-space: normal;
  margin-top: 5px;
}
.card-full .card-meta {
  font-size: 11px;
}
.card-stats {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d7d5ad55;
  padding-top: 9px;
  margin-top: 10px;
  font-size: 12px;
}
.card-stats span {
  display: flex;
  align-items: center;
  gap: 3px;
}
.card-stats svg {
  width: 14px;
  height: 14px;
}
.card-power {
  font-size: 10px;
  color: #ddcf9b;
  text-align: center;
  margin-top: 8px;
}
.skill {
  margin: 16px 0 12px;
  display: flex;
  gap: 11px;
  align-items: center;
}
.skill > svg {
  width: 32px;
  height: 32px;
  color: #9d8a4f;
}
.skill b {
  font-size: 13px;
}
.skill p {
  font-size: 11px;
  margin: 4px 0 0;
  color: #708872;
  line-height: 1.5;
}
.duplicate-note {
  font-size: 11px;
  text-align: center;
  color: #87947c;
}
.craft-orbit {
  height: 145px;
  position: relative;
  display: grid;
  place-items: center;
}
.craft-orbit::before {
  content: "";
  width: 114px;
  height: 114px;
  border: 1px solid #b3cba7;
  border-radius: 50%;
  box-shadow: 0 0 0 12px #d8e3c62b, 0 0 0 24px #d8e3c61f;
}
.craft-orbit > svg {
  position: absolute;
  width: 44px;
  height: 44px;
  color: #9c8d53;
}
.orbit-resource {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #eaf0dd;
  border: 1px solid #c8d8b8;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.orbit-resource svg {
  width: 23px;
  height: 23px;
}
.orbit-resource:nth-child(2) {
  left: calc(50% - 76px);
  top: 60px;
}
.orbit-resource:nth-child(3) {
  right: calc(50% - 76px);
  top: 60px;
}
.orbit-resource:nth-child(4) {
  top: 1px;
  left: calc(50% - 20px);
}
.crafting .craft-orbit {
  animation: craft-pulse .45s ease-in-out infinite alternate;
}
.crafting .orbit-resource {
  animation: orbit-collapse 1.25s ease-in forwards;
}
.recipe {
  display: flex;
  gap: 8px;
  padding: 11px 0;
}
.recipe button {
  flex: 1;
  padding: 11px 7px;
  border-radius: 11px;
  background: #e5ead8;
  border: 1px solid transparent;
  font-size: 12px;
}
.recipe button.selected {
  border-color: #719d74;
  background: #dbe8ce;
  color: #315f47;
}
.recipe button small {
  display: block;
  font-size: 10px;
  color: #7b947a;
  margin-top: 4px;
}
.cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 5px 0 15px;
  font-size: 13px;
  font-weight: 750;
}
.cost span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cost svg {
  width: 20px;
  height: 20px;
}
.cost .missing {
  color: #ba6550;
}
.text-button {
  background: transparent;
  color: #7b8e77;
  font-size: 11px;
  padding: 12px;
}
.fusion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.fusion b {
  font-size: 13px;
}
.fusion small {
  display: block;
  font-size: 10px;
  color: #88967e;
  margin-top: 5px;
}
.fusion button {
  width: auto;
  font-size: 11px;
  min-width: 72px;
}
.tool-hero {
  height: 155px;
  display: grid;
  place-items: center;
  position: relative;
}
.tool-hero::before {
  content: "";
  width: 115px;
  height: 115px;
  border-radius: 50%;
  background: #e1e9cf;
  position: absolute;
}
.tool-hero svg {
  width: 80px;
  height: 80px;
  color: #988456;
  transform: rotate(-12deg);
  z-index: 1;
  stroke-width: 1.2;
}
.tool-hero span {
  position: absolute;
  bottom: 4px;
  background: #f4eccb;
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid #d8c791;
  font-size: 11px;
  font-weight: 750;
}
.tier-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;
}
.tier-list div {
  text-align: center;
  font-size: 11px;
  color: #8b9b86;
}
.tier-list svg {
  display: block;
  margin: 0 auto 7px;
  width: 25px;
  height: 25px;
}
.tier-list .unlocked {
  color: #477853;
}
.map-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.map-option {
  background: #e5ead9;
  border: 1px solid #cbd7be;
  border-radius: 14px;
  padding: 14px;
  text-align: left;
  position: relative;
}
.map-option.current {
  border-color: #7b9c75;
  background: #dce8ce;
}
.map-option h3 {
  font-size: 16px;
  margin: 0 0 6px;
}
.map-option p {
  font-size: 10px;
  color: #7c9276;
  margin: 0;
}
.map-option .map-resources {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
}
.map-resources svg {
  width: 17px;
  height: 17px;
}
.map-resources span {
  font-size: 10px;
  color: #7e9276;
  margin-left: auto;
}
.map-option .risk {
  position: absolute;
  right: 14px;
  top: 16px;
  font-size: 10px;
  color: #b37256;
}
.map-confirm {
  padding: 6px 0 0;
}
.map-confirm p {
  font-size: 12px;
  line-height: 1.7;
  color: #72836b;
}
.bank-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 8px;
  margin: 15px 0;
}
.bank-grid > div {
  text-align: center;
}
.bank-grid svg {
  width: 26px;
  height: 26px;
  margin-bottom: 4px;
}
.bank-grid b {
  font-size: 16px;
  display: block;
}
.bank-grid small {
  font-size: 10px;
  color: #8a997d;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
}
.settings-row button {
  width: auto;
  min-height: 38px;
  font-size: 11px;
}
.guide {
  font-size: 12px;
  line-height: 1.65;
  color: #71846d;
  margin: 0 0 9px;
}
.guide b {
  color: #436b54;
}
.result-icon {
  display: block;
  margin: 2px auto 14px;
  width: 55px;
  height: 55px;
  color: #b19a55;
}
.result-copy {
  font-size: 12px;
  color: #7a8d71;
  text-align: center;
  line-height: 1.7;
  margin: 10px 0 18px;
}
.odds {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12px;
}
.odds div {
  display: flex;
  justify-content: space-between;
}
.odds b {
  color: #9b8144;
}
.reveal {
  background:
    radial-gradient(
      ellipse at 50% 35%,
      #46666a,
      #1e3f48 65%);
  color: #fff1c8;
  text-align: center;
  padding: 24px 24px 26px;
  border-color: #b9a974;
  overflow: hidden;
}
.reveal::backdrop {
  background: #102e3deb;
}
.reveal > p {
  font-size: 12px;
  color: #e4ce8e;
  position: relative;
  margin: 0 0 8px;
}
.reveal h2 {
  font-size: 23px;
  position: relative;
  margin: 0 0 20px;
}
.reveal .card-full {
  width: 232px;
  margin-bottom: 22px;
  animation: card-reveal .85s cubic-bezier(.2, .8, .2, 1) both;
  box-shadow: 0 0 60px #d3c27c66;
}
.reveal .primary {
  background: #e6d39a;
  color: #34514e;
}
.reveal-stars {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 40%,
      transparent 0 12deg,
      #f9e4a408 12deg 24deg);
  animation: spin 30s linear infinite;
  scale: 2;
}
.reveal.rarity-SSS .reveal-stars {
  background:
    repeating-conic-gradient(
      from 0deg at 50% 40%,
      transparent 0 12deg,
      #bcb5ff18 12deg 24deg);
}
.battle-ui {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(
      #193c4777,
      transparent 47%,
      #102f3d88);
}
.enemy-info {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 76px;
  text-align: center;
  color: #f9f0d0;
  text-shadow: 0 1px 3px #173744;
}
.encounter-label {
  font-size: 10px;
  background: #913f3b;
  color: #fff0dc;
  border: 1px solid #df9c79;
  border-radius: 5px;
  padding: 4px 8px;
}
.enemy-info h2 {
  font-size: 23px;
  margin: 13px 0 10px;
}
.health-track {
  height: 8px;
  background: #102e3c88;
  border: 1px solid #d0e7ce44;
  border-radius: 10px;
  overflow: hidden;
  display: block;
}
.health-track i {
  height: 100%;
  display: block;
  background: #d1a26a;
  transition: width .2s;
}
.enemy-health {
  max-width: 250px;
  margin: auto;
}
.enemy-info > small {
  font-size: 10px;
  display: block;
  margin-top: 5px;
  color: #e4ddc5;
}
.combat-bottom {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  pointer-events: auto;
}
.player-health {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fbefd1;
}
.player-health > svg {
  width: 18px;
  height: 18px;
  fill: #d18479;
  stroke: #f1bd9c;
}
.player-health .health-track {
  flex: 1;
}
.player-health .health-track i {
  background: #9bcf9b;
}
.player-health > b {
  font-size: 10px;
}
.guard {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #e8e7cd;
  border: 1px solid #fbf0be;
  border-radius: 10px;
  min-height: 43px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
  color: #3b6156;
}
.guard svg {
  width: 20px;
  height: 20px;
}
.guard small {
  border-radius: 50%;
  background: #7583bd;
  color: #fff;
  padding: 1px 4px;
  font-size: 9px;
}
.guard.perfect-ready {
  box-shadow: 0 0 0 3px #fce7ae, 0 0 24px #fdd784;
}
.energy-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  color: #d2ddcd;
  margin: 7px 0;
}
.energy-row > div {
  display: flex;
  gap: 4px;
}
.energy-row i {
  width: 8px;
  height: 8px;
  background: #456273;
  border: 1px solid #a6b8c1;
  transform: rotate(45deg);
  border-radius: 2px;
}
.energy-row i.full {
  background: #c3b0ef;
  border-color: #e4d7ff;
  box-shadow: 0 0 8px #baaeec66;
}
.energy-row > b {
  font-size: 9px;
  margin-left: auto;
  color: #d1efba;
}
.battle-hand {
  display: flex;
  gap: 8px;
  align-items: stretch;
  justify-content: center;
}
.battle-card {
  pointer-events: auto;
  flex: 1;
  max-width: 132px;
  aspect-ratio: .83;
  padding: 7px;
  border-radius: 10px;
  touch-action: manipulation;
}
.battle-card .card-top {
  font-size: 11px;
}
.battle-card .creature {
  height: 77px;
  max-width: 85px;
  margin: -5px auto 0;
  transform: scale(1.12);
}
.battle-card .card-name {
  font-size: 10px;
  margin: 0;
  text-align: center;
}
.battle-card .skill-name {
  font-size: 9px;
  color: #d7debd;
  margin-top: 4px;
  display: block;
  text-align: center;
}
.battle-card .card-meta {
  font-size: 8px;
}
.battle-card .energy-cost {
  background: #b5a0d3;
  color: #fff7e0;
  border: 1px solid #e2d1f4;
  border-radius: 50%;
  padding: 1px 5px;
  font-size: 10px;
}
.battle-card:disabled {
  opacity: .65;
  filter: saturate(.6);
}
.battle-float {
  position: absolute;
  top: 47%;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff0be;
  text-shadow: 0 3px #30444e;
  font-size: 28px;
  font-weight: 900;
}
.battle-float.pop {
  animation: loot-pop .7s ease-out forwards;
}
.world.in-battle .area,
.world.in-battle .objective,
.world.in-battle #node-labels,
.world.in-battle .expedition-dock {
  display: none;
}
.world.in-battle .hud {
  z-index: 5;
}
.game-nav.in-battle {
  filter: saturate(.5);
}
.game-nav.in-battle button {
  opacity: .5;
}
.hit-shake {
  animation: hit-shake .25s ease-in-out;
}
.catalog-foot {
  font-size: 10px;
  color: #899b7e;
  text-align: center;
  margin-top: 13px;
}
@keyframes loot-pop {
  0% {
    opacity: 0;
    translate: 0 12px;
    scale: .8;
  }
  20% {
    opacity: 1;
    scale: 1.12;
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: 0 -38px;
    scale: 1;
  }
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}
@keyframes craft-pulse {
  to {
    filter: brightness(1.3);
    scale: 1.08;
  }
}
@keyframes orbit-collapse {
  to {
    translate: 0 0;
    left: calc(50% - 20px);
    right: auto;
    top: 52px;
    scale: .1;
    opacity: 0;
  }
}
@keyframes card-reveal {
  0% {
    transform: perspective(700px) rotateY(100deg) scale(.7);
    opacity: 0;
  }
  60% {
    transform: perspective(700px) rotateY(-8deg) scale(1.04);
    opacity: 1;
  }
  100% {
    transform: none;
  }
}
@keyframes warning {
  to {
    filter: brightness(1.5);
  }
}
@keyframes hit-shake {
  25% {
    translate: -4px 0;
  }
  75% {
    translate: 4px 0;
  }
}
@media (max-height: 700px) {
  .global-bar {
    height: calc(49px + env(safe-area-inset-top));
    min-height: calc(49px + env(safe-area-inset-top));
    padding-block: calc(2px + env(safe-area-inset-top)) 2px;
  }
  .game-nav {
    padding: 0 0 env(safe-area-inset-bottom);
  }
  .game-nav button {
    min-height: 60px;
  }
  .game-nav svg {
    width: 23px;
    height: 23px;
  }
  .hud {
    top: 8px;
    left: 10px;
    right: 10px;
  }
  .area {
    top: 65px;
    left: 18px;
  }
  .area h1 {
    font-size: 22px;
  }
  .area p {
    display: none;
  }
  .objective {
    top: 123px;
    left: 18px;
  }
  .expedition-dock {
    bottom: 9px;
    left: 12px;
    right: 12px;
  }
  .node-label {
    transform: translate(-50%, 20px);
    font-size: 11px;
    padding: 5px 9px;
    min-height: 34px;
  }
  .enemy-info {
    top: 63px;
  }
  .enemy-info h2 {
    font-size: 20px;
    margin: 10px 0 6px;
  }
  .combat-bottom {
    bottom: 8px;
    left: 10px;
    right: 10px;
  }
  .battle-card {
    aspect-ratio: 1.02;
    padding: 5px;
  }
  .battle-card .creature {
    height: 58px;
    max-width: 64px;
  }
  .battle-card .card-meta {
    display: none;
  }
  .battle-card .card-name {
    font-size: 9px;
  }
  .guard {
    min-height: 36px;
  }
  .energy-row {
    margin: 5px 0;
  }
  .collection-grid {
    gap: 8px;
  }
  .collection-grid .card {
    aspect-ratio: .83;
    padding: 6px;
  }
  .collection-grid .card .creature {
    max-height: 80px;
    max-width: 80px;
    margin: auto;
  }
  .card-full {
    width: 150px;
    padding: 10px;
  }
  .card-full .card-top {
    font-size: 17px;
  }
  .card-full .card-name {
    font-size: 12px;
  }
  .card-stats {
    margin-top: 7px;
    padding-top: 6px;
    font-size: 10px;
  }
  .card-power {
    margin-top: 5px;
    font-size: 9px;
  }
  .skill {
    margin: 10px 0 8px;
  }
  .reveal {
    padding: 20px;
  }
  .reveal h2 {
    font-size: 20px;
    margin-bottom: 12px;
  }
  .reveal .card-full {
    width: 182px;
    margin-bottom: 16px;
  }
  .craft-orbit {
    height: 118px;
  }
  .craft-orbit::before {
    width: 88px;
    height: 88px;
  }
  .orbit-resource:nth-child(2),
  .orbit-resource:nth-child(3) {
    top: 45px;
  }
  .orbit-resource:nth-child(4) {
    top: -4px;
  }
  .tool-hero {
    height: 117px;
  }
  .tool-hero::before {
    width: 85px;
    height: 85px;
  }
  .tool-hero svg {
    width: 64px;
    height: 64px;
  }
  .map-option {
    padding: 11px 12px;
  }
  .map-option h3 {
    font-size: 14px;
  }
  .map-option .map-resources {
    margin-top: 7px;
  }
  #panel-content {
    padding: 13px 16px 16px;
  }
  .panel-head {
    padding-block: 7px;
  }
  .rule-line {
    margin: 11px 0;
  }
  .primary,
  .secondary {
    min-height: 40px;
  }
  .panel-note {
    margin: 8px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}

/* Feedback lives over the canvas; menus keep their existing layout. */
.cost-label { text-align:center; color:#71846d; font-size:10px; margin:8px 0 6px; }
.cost { gap:7px; align-items:stretch; margin:0 0 9px; }
.cost .material { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 3px; border:1px solid #d1ddbc; background:#e9efdd; border-radius:12px; text-align:center; }
.cost .material > svg { width:26px; height:26px; }
.material b { font-size:10px; }
.material strong { font-size:19px; color:#315d4e; }
.material em { font-style:normal; font-size:13px; color:#7f8c72; }
.material small { font-size:10px; color:#5c8058; }
.cost .material.missing { border-color:#dfb2a1; background:#f6e9df; }
.material.missing strong, .material.missing small { color:#ac4e37; }
.material .carried { font-size:9px; color:#807550; line-height:1.4; }
.requirement-note { display:flex; justify-content:center; align-items:center; gap:6px; background:#f3e8d3; color:#87602e; padding:9px; margin:0 0 10px; border-radius:9px; text-align:center; font-size:11px; line-height:1.5; }
.requirement-note svg { width:19px; height:19px; flex-shrink:0; }
.requirement-note .secondary { width:auto; min-height:34px; padding:5px 10px; margin:0; font-size:11px; }
.requirement-note.ready { background:#deecd1; color:#527345; }
.craft-goal { text-align:center; font-size:12px; color:#6c816b; margin:0 0 3px; }
.craft-goal b { color:#315d4e; }
.craft-orbit { height:112px; }
.craft-orbit::before { width:88px; height:88px; }
.orbit-resource:nth-child(2), .orbit-resource:nth-child(3) { top:44px; }
.effects { position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
.loot-flight { position:absolute; top:0; left:0; width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:#fff4cc; border:2px solid #fff9dc; box-shadow:0 0 28px #fff4ab, 0 6px 12px #27595055; }
.loot-flight svg { width:31px; height:31px; }
.loot-flight b { position:absolute; right:-6px; bottom:-5px; font-size:14px; color:#234f44; background:#fff6d2; border-radius:9px; padding:1px 4px; }
.gather-feedback { font-size:25px; color:#fff6cf; top:35%; filter:drop-shadow(0 2px 2px #254c47); }
.gather-feedback small, .battle-float small { display:block; font-size:12px; margin-top:6px; letter-spacing:0; }
.gather-feedback.pop { animation:loot-pop 1s ease-out forwards; }
.stock b { font-weight:700; }
.combat-effect { position:absolute; color:var(--fx-color); left:50%; top:43%; width:210px; height:210px; margin:-105px; display:grid; place-items:center; filter:drop-shadow(0 0 15px var(--fx-color)); animation:fx-expand .65s ease-out both; }
.combat-effect svg { width:100px; height:100px; fill:#a6eafa22; stroke-width:1.5; }
.fx-shield, .fx-perfect { border:4px solid currentColor; border-radius:50%; box-shadow:inset 0 0 45px #b0eeff66, 0 0 35px #b0eeff55; background:radial-gradient(transparent,#a5e9ef33); }
.fx-perfect { color:#fff2b8; width:270px; height:270px; margin:-135px; border-width:7px; }
.fx-slash i { position:absolute; width:270px; height:11px; border-radius:100%; background:#fff5dc; box-shadow:0 0 14px 8px var(--fx-color); transform:rotate(-38deg); }
.fx-slash i + i { transform:rotate(38deg); width:180px; height:6px; }
.fx-heal { top:65%; color:#bff1ac; }
.fx-hurt { inset:0; width:auto; height:auto; margin:0; border:8px solid #ff746866; background:radial-gradient(transparent 35%,#c52f4177); filter:none; }
@keyframes fx-expand { 0% { transform:scale(.25); opacity:0; } 20% { opacity:1; } 100% { transform:scale(1.35); opacity:0; } }
.battle-float { z-index:7; font-size:42px; top:39%; text-shadow:0 3px #26454c, 0 0 22px #ffe6b855; }
.battle-float.pop { animation:loot-pop .95s ease-out forwards; }
.guard { justify-content:center; width:100%; min-height:58px; margin:0 0 10px; background:linear-gradient(#d6e9e1,#a4c7c0); border:2px solid #e6f6de; font-size:21px; gap:9px; box-shadow:0 4px 0 #527d79; }
.guard svg { width:30px; height:30px; }
.guard small { background:none; color:#4e736d; font-size:10px; padding:0; margin-left:5px; }
.guard.perfect-ready { background:linear-gradient(#fff1a9,#f2ce72); color:#675026; border-color:#fff4ce; box-shadow:0 4px 0 #a67b3d, 0 0 30px #ffd582aa; animation:guard-beat .32s ease-in-out infinite alternate; }
@keyframes guard-beat { to { filter:brightness(1.18); } }
.battle-cue { color:#e6efd7; text-align:center; font-size:12px; font-weight:800; height:27px; padding-top:3px; text-shadow:0 2px 2px #1e3e45; }
.battle-cue[data-phase=warning] { color:#ffd29c; }
.battle-cue[data-phase=now] { color:#ffe897; font-size:16px; }
.battle-cue[data-phase=holding] { color:#a6eafa; }
.battle-card { aspect-ratio:auto; min-height:151px; }
.battle-card.skill-ready { border-color:#ebdf9b; box-shadow:0 0 0 1px #e3d694, 0 0 20px #f1df9155; }
.card-action { display:block; color:#f1e6be; font-size:10px; margin:5px 0; text-align:center; }
.auto-status { color:#d7e6d0; text-align:center; font-size:9px; margin-top:8px; }
.victory-xp { text-align:center; color:#9c7f3f; font-size:22px; font-weight:800; }
.victory-xp strong { display:block; color:#5e894e; font-size:24px; margin-top:9px; }
.victory-xp small { display:block; font-size:11px; margin-top:7px; }
.summon-stage { height:350px; position:relative; display:grid; place-items:center; perspective:800px; }
.summon-ring { position:absolute; width:235px; height:235px; border:2px solid #ead59c88; border-radius:50%; box-shadow:0 0 0 16px #ffeab90a, 0 0 60px #efdc9c22; animation:spin 6s linear infinite; }
.summon-ring::after { content:''; position:absolute; inset:18px; border:1px dashed #e5d19c88; border-radius:50%; }
.sealed-card { width:155px; height:225px; position:relative; background:linear-gradient(145deg,#527d77,#233d51 50%,#947653); border:3px solid #e3ca8c; border-radius:16px; box-shadow:0 0 30px #ecd69544; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; }
.sealed-card::after { content:''; position:absolute; inset:9px; border:1px solid #e6cc8766; border-radius:9px; }
.sealed-card svg { width:53px; height:53px; }
.sealed-card b { font-size:51px; }
.summon-ingredient { position:absolute; z-index:2; width:56px; height:56px; padding:11px; background:#f0dfac; color:#506d5c; border:2px solid #fff2bf; border-radius:50%; box-shadow:0 0 25px #eed6a366; }
.summon-ingredient svg { width:100%; height:100%; }
.ingredient-0 { left:0; top:60px; --move-x:115px; --move-y:85px; }
.ingredient-1 { right:0; top:60px; --move-x:-115px; --move-y:85px; }
.ingredient-2 { left:calc(50% - 28px); bottom:18px; --move-x:0px; --move-y:-115px; }
.forming .summon-ingredient { animation:ingredient-merge 1.7s cubic-bezier(.7,0,.9,1) forwards; }
@keyframes ingredient-merge { 0%,20% { transform:scale(1); opacity:1; } 85% { opacity:1; } 100% { transform:translate(var(--move-x),var(--move-y)) scale(.1) rotate(160deg); opacity:0; } }
.summon-stage p { position:absolute; bottom:-5px; width:100%; font-size:12px; color:#eee2c6; }
.charging .sealed-card { animation:charge-card .25s ease-in-out infinite alternate; }
@keyframes charge-card { to { transform:rotate(3deg) scale(1.07); box-shadow:0 0 75px #ffeebba8; } }
.sealed .sealed-card { animation:seal-hover 1.4s ease-in-out infinite alternate; cursor:pointer; }
@keyframes seal-hover { to { transform:translateY(-9px); box-shadow:0 0 60px #e4cb85aa; } }
.sealed .summon-ingredient { display:none; }
.revealed .card-full { animation:guardian-flip .85s cubic-bezier(.2,.8,.2,1) both; }
@keyframes guardian-flip { 0% { transform:perspective(700px) rotateY(100deg) scale(.7); filter:brightness(2.2); } 60% { transform:perspective(700px) rotateY(-8deg) scale(1.04); } 100% { transform:rotateY(0); filter:brightness(1); } }
.tool-art { display:block; width:100%; aspect-ratio:1; background-image:var(--tool-file,url('/assets/games/island-cards/tools.webp')); background-repeat:no-repeat; background-size:var(--tool-columns,300%) 100%; background-position:var(--tool-x) center; filter:drop-shadow(0 5px 10px #47635444); }
.tool-hero { background:radial-gradient(#dce9ca,transparent 68%); height:170px; width:100%; border:0; margin:0 auto 5px; position:relative; display:grid; place-items:center; }
.tool-hero .tool-art { width:180px; height:180px; }
.tool-hero > span { position:absolute; bottom:0; background:#f4eccd; color:#62714f; border:1px solid #d6c383; border-radius:7px; padding:4px 10px; font-size:11px; }
.tier-list .tool-art { width:58px; margin:0 auto 3px; filter:grayscale(.7); }
.tier-list .unlocked .tool-art { filter:drop-shadow(0 3px 6px #64824c44); }
.tier-list .next .tool-art { filter:drop-shadow(0 0 7px #e2c28b); }
.tier-list .next { color:#9e7940; }
.catalog-screen { position:absolute; inset:0; z-index:8; background:#f0f2e2; display:flex; flex-direction:column; overflow:hidden; }
.catalog-screen[hidden] { display:none; }
.catalog-head { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #d2dcbc; }
.catalog-head h2 { font-size:20px; margin:0; flex:1; }
.catalog-head b { font-size:12px; color:#657951; }
.catalog-controls { padding:12px 16px 0; }
.catalog-controls input { width:100%; border:1px solid #c9d6b7; border-radius:11px; background:#fffdf2; padding:12px; font:inherit; font-size:13px; color:#315d4e; }
.catalog-scroll { overflow-y:auto; overscroll-behavior:contain; flex:1; padding:0 16px 18px; min-height:0; }
.catalog-scroll::-webkit-scrollbar, dialog::-webkit-scrollbar { width:3px; height:3px; }
.catalog-scroll::-webkit-scrollbar-track, dialog::-webkit-scrollbar-track { background:transparent; }
.catalog-scroll::-webkit-scrollbar-thumb, dialog::-webkit-scrollbar-thumb { background:#658b6b33; border-radius:3px; }
.catalog-scroll::-webkit-scrollbar-thumb:hover, dialog::-webkit-scrollbar-thumb:hover { background:#658b6b66; }
.catalog-scroll::-webkit-scrollbar-button, dialog::-webkit-scrollbar-button { display:none; }
@supports not selector(::-webkit-scrollbar) {
  .catalog-scroll, dialog { scrollbar-width:thin; scrollbar-color:#658b6b33 transparent; }
}
.catalog-screen .collection-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.catalog-screen .card { aspect-ratio:.65; }
.catalog-screen .card .creature { max-width:100%; }
.catalog-empty { grid-column:1/-1; text-align:center; font-size:13px; padding:40px 0; color:#7d8c71; }
.game-nav button.active { color:#3d745b; background:#e0eacb; }
@media(max-height:700px) {
  .cost .material { padding:6px 3px; gap:2px; }
  .material strong { font-size:17px; }
  .material > svg { width:22px; height:22px; }
  .craft-orbit { height:80px; }
  .craft-orbit::before { width:62px; height:62px; }
  .orbit-resource:nth-child(2), .orbit-resource:nth-child(3) { top:29px; }
  .recipe { padding:7px 0; }
  .recipe button { padding:8px 4px; }
  .craft-goal { font-size:11px; }
  .tool-hero { height:86px; }
  .tool-hero .tool-art { width:100px; height:100px; }
  .tier-list .tool-art { width:40px; }
  #panel-content:has(.tool-hero) { padding-block:8px; }
  .tier-list .tool-art { width:38px; }
  .requirement-note { padding:6px; margin-bottom:7px; font-size:10px; }
  .guard { min-height:46px; margin-bottom:9px; font-size:18px; }
  .guard small { font-size:9px; }
  .battle-card { min-height:112px; }
  .battle-card .creature { height:42px; }
  .battle-cue { height:25px; font-size:10px; }
  .battle-cue[data-phase=now] { font-size:13px; }
  .auto-status { font-size:8px; margin-top:5px; }
  .summon-stage { height:260px; }
  .sealed-card { width:125px; height:180px; }
  .summon-ring { width:200px; height:200px; }
  .summon-ingredient { width:45px; height:45px; padding:8px; }
  .battle-float { font-size:32px; top:35%; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
.reveal-stars { contain:strict; }
.reveal { overflow:clip; }

/* Painted fantasy art shares the guardians' teal and bronze palette. */
:root { --ink:#f1e7ca; --muted:#a9bba9; --gold:#d5b87a; --line:#a78a5659; --panel:#153b39; }
body, .game { background:#0c2429; color:var(--ink); }
.global-bar, .game-nav { background:linear-gradient(105deg,#142f32,#244a43 50%,#142f32); border-color:var(--line); box-shadow:inset 0 1px #dfc58c14; }
.icon-button, .game-nav svg { color:#d0b989; }
.icon-button:hover { background:#c6a46b18; }
.game-nav button { color:#b9c7b6; }
.game-nav button:hover, .game-nav button.active { background:linear-gradient(#8b784449,#d1b57724); color:#ffedb8; box-shadow:inset 0 2px #d8b775; }
.world { background:linear-gradient(#0d252533,#0b2b2b33),url('/assets/games/island-cards/backdrop.webp') center/cover; }
.world[data-map=cinder] { background-image:linear-gradient(#59232166,#3a1e2d55),url('/assets/games/island-cards/backdrop.webp'); }
.world[data-map=tide] { background-image:linear-gradient(#24274d55,#102c4766),url('/assets/games/island-cards/backdrop.webp'); }
.world-vignette { background:linear-gradient(#081d2a38,transparent 40%,#081d2a55); box-shadow:inset 0 0 55px #061b2444; }
.level-pill, .stock { background:#102e32df; border-color:var(--line); border-radius:10px; box-shadow:0 3px 12px #06191f44,inset 0 1px #eddbac18; color:var(--ink); }
.eyebrow { color:#ceb783; }
.area h1 { color:#f5e4b5; text-shadow:0 2px 6px #092e32; }
.area p, .objective { color:#c4d5c1; text-shadow:0 1px 4px #09272a; }
.node-label, .expedition-dock button { color:#ffe8ad; background:linear-gradient(#365b4ded,#173934f2); border-color:#c8a86c; box-shadow:0 3px 10px #051b2866,inset 0 1px #f5dfa53d; }
.expedition-dock button svg:first-child { color:var(--gold); }
.danger-dot { box-shadow:0 0 8px #e2ce8d55; }
.loading { background:#13383d; color:var(--gold); }
dialog { background:radial-gradient(ellipse at top,#29544b,#153b39 65%,#112e32); color:var(--ink); border-color:#aa8c56; border-radius:20px; box-shadow:0 20px 90px #020f1db3,inset 0 0 0 4px #c9aa6e0b; }
dialog::backdrop { background:#061b26b8; }
.panel-head, .catalog-head { border-color:var(--line); }
#panel[open] { display:flex; flex-direction:column; }
.panel-head { flex-shrink:0; }
#panel-content { overflow-y:auto; min-height:0; overscroll-behavior:contain; }
#panel-content::-webkit-scrollbar { width:3px; }
#panel-content::-webkit-scrollbar-track { background:transparent; }
#panel-content::-webkit-scrollbar-thumb { background:#a4b89933; border-radius:3px; }
#panel-content::-webkit-scrollbar-button { display:none; }
@supports not selector(::-webkit-scrollbar) { #panel-content { scrollbar-width:thin; scrollbar-color:#a4b89933 transparent; } }
.panel-note, .section-label, .text-button, .fusion small, .map-confirm p, .cost-label, .catalog-head b, .catalog-empty { color:var(--muted); }
.primary { background:linear-gradient(#c9ab6b,#9f8047); color:#172f2e; border:1px solid #e5c98b; box-shadow:0 3px #071d2c66,inset 0 1px #f6e3ad88; }
.secondary, .recipe button { background:#244940; border:1px solid #78947766; color:#d1dfc2; }
.recipe button.selected { background:#59704b77; color:#ffebbb; border-color:#bc9c62; }
.recipe button small { color:#afc4a5; }
.rule-line { background:var(--line); }
.summary-line b { color:#d9cb96; }
.card.locked { background:#20473e; border-color:#738a6877; }
.card.locked .card-name, .card.locked .card-meta { color:#a3b8a6; }
.card-stats, .card-power { color:#f5e4b5; }
.skill, .duplicate-note, .guide { color:#c1d1b8; }
.craft-orbit::before { border-color:#b69c5e99; box-shadow:0 0 0 12px #c8b47808,0 0 0 24px #c8b47805; }
.craft-orbit > svg { color:#d5b87a; }
.orbit-resource { background:#1c3f37; border-color:#9e915a66; }
.cost .material { background:#25483a; border-color:#6d8c5d88; }
.material strong { color:#f0e4bd; }
.material em { color:#adbd9b; }
.material small { color:#b0d49e; }
.cost .material.missing { background:#4c3430; border-color:#ac725a; }
.material.missing strong, .material.missing small { color:#ffb593; }
.material.missing b { color:#f3ceb4; }
.material .carried { color:#e0c28c; }
.requirement-note { background:#8b6a302b; color:#e4c695; }
.requirement-note.ready { background:#6c8d442b; color:#c4df9e; }
.tool-hero { background:radial-gradient(#7e986b55,transparent 68%); }
.tool-hero::before { display:none; }
.tool-hero > span { background:#263c31; color:#efd39a; border-color:#b49a61; }
.tool-art { filter:drop-shadow(0 6px 12px #0007); }
.tier-list div { color:#92a48c; }
.tier-list .unlocked { color:#c8d8b0; }
.tier-list .next { color:#efcf8a; }
.map-option { background:#21463b; border-color:#718b6166; }
.map-option.current { background:#3d5740; border-color:#ba9d62; }
.map-option p, .map-resources span, .bank-grid small { color:#b2c4a6; }
.map-option .risk { color:#efb593; }
.catalog-screen { background:radial-gradient(at top,#2d5145,#123735 70%); }
.catalog-controls input { background:#102e2e; color:var(--ink); border-color:#8a9a6d88; }
.catalog-controls input::placeholder { color:#95aa94; }
.victory-xp { color:#ead09a; }
.victory-xp strong { color:#cbe89c; }
.resource-art { display:inline-block; width:26px; height:26px; vertical-align:middle; flex-shrink:0; background:url('/assets/games/island-cards/resources.webp') no-repeat; background-size:300% 200%; background-position:var(--resource-x) var(--resource-y); filter:drop-shadow(0 2px 3px #031f2744); }
.stock .resource-art { width:23px; height:23px; }
.material > .resource-art { width:39px; height:39px; }
.bank-grid .resource-art { display:block; width:42px; height:42px; margin:0 auto 4px; }
.loot-flight .resource-art { width:40px; height:40px; }
.gather-feedback .resource-art { width:34px; height:34px; }
.summon-ingredient .resource-art { width:100%; height:100%; }
.card-top .resource-art { width:20px; height:20px; }
.map-resources .resource-art { width:26px; height:26px; }
.resource-art.sail-art { background-image:url('/assets/games/island-cards/energy.webp'); background-size:contain; background-position:center; }
.stock { gap:6px; padding-left:8px; padding-right:8px; }
.stock > span { gap:2px; }
.stock .resource-art { width:22px; height:22px; }
.sail-cost { display:flex; align-items:center; gap:6px; margin-top:12px; font-size:12px; color:#ded5a6; }
.map-art { display:block; height:112px; width:112px; margin:-4px auto 10px; background-image:var(--map-file,url('/assets/games/island-cards/islands.webp')); background-position:var(--map-x) center; background-size:var(--map-columns,300%) 100%; background-repeat:no-repeat; }
.home-ui #home-fuel { margin:0 0 9px; padding:5px 8px; display:inline-flex; align-items:center; gap:5px; border-radius:5px; background:#122d2cdb; color:#e1d4aa; }
.home-ui #home-fuel .resource-art { width:23px; height:23px; }
.risk-meter { position:absolute; z-index:3; left:50%; transform:translateX(-50%); width:182px; padding:9px 12px; border:1px solid #baa27155; border-radius:8px; background:#102d32df; pointer-events:none; color:#c2dcb0; text-shadow:0 1px 4px #082729; font-size:12px; box-shadow:0 4px 14px #051e2b55; }
.risk-meter > span:first-child { display:flex; justify-content:space-between; gap:8px; }
.risk-track { display:block; height:8px; margin-top:7px; border-radius:4px; background:#081f24; border:1px solid #c5bc8344; overflow:hidden; }
.risk-track i { display:block; height:100%; background:#b1d58e; transition:width .15s; }
.risk-meter[data-risk=medium] { color:#ead39a; }
.risk-meter[data-risk=medium] i { background:#e3c47a; }
.risk-meter[data-risk=high] { color:#ffbc9a; }
.risk-meter[data-risk=high] i { background:#f39e72; }
.sighting { position:absolute; z-index:4; left:2%; top:calc(50% - 105px); width:132px; padding:0 4px 7px; background:radial-gradient(ellipse,#ebd68124,transparent 65%); color:#fbe5af; filter:drop-shadow(0 5px 12px #051f2b); }
.sighting .creature { display:block; width:120px; height:120px; animation:sighting-hover 1.5s ease-in-out infinite alternate; }
.sighting-name { display:block; font-size:10px; text-shadow:0 2px 4px #041f29; }
.sighting-name b { color:#fbb392; }
.sighting-action { display:flex; justify-content:center; gap:14px; border:1px solid #e2b468aa; background:#453d30e6; border-radius:6px; padding:5px; margin-top:5px; font-size:12px; }
.sighting-action b { color:#e9d1a0; font-size:10px; font-weight:500; align-self:center; }
@keyframes sighting-hover { to { transform:translateY(-6px); filter:brightness(1.18); } }
.craft-goal { color:#baccb4; }
.craft-goal b { color:#eddbac; }
.skill p, .result-copy { color:#bfd1b7; }
.guide b, .odds b { color:#e2cf9a; }
.world.in-battle .risk-meter, .world.in-battle .sighting { display:none; }
@media(max-height:700px) { .material > .resource-art { width:30px; height:30px; } .sighting { top:calc(50% - 65px); width:108px; } .sighting .creature { width:96px; height:96px; } }
@media(prefers-reduced-motion:reduce) { .sighting .creature { animation:none; } }
.world.at-home { background:linear-gradient(#0c292522,transparent 55%,#0b252855),url('/assets/games/island-cards/home.webp') center/cover; }
.world.at-home #scene, .world.at-home #node-labels, .world.at-home .risk-meter, .world.at-home .objective, .world.at-home .expedition-dock { display:none; }
.home-ui { position:absolute; z-index:3; left:28px; right:28px; bottom:24px; text-align:center; }
.home-ui > p { color:#e7dbb7; font-size:12px; text-shadow:0 2px 5px #112b27; margin:5px 0 14px; }
.home-guardians { display:flex; align-items:flex-end; justify-content:center; gap:8px; }
.home-guardians button { background:transparent; width:84px; padding:0; }
.home-guardians .creature { display:block; height:84px; filter:drop-shadow(0 5px 8px #0d252c); }
.home-ui .primary { min-height:48px; }
#panel.page[open] { position:absolute; inset:0; margin:0; width:100%; height:100%; max-width:none; max-height:none; border:0; border-radius:0; z-index:9; box-shadow:none; }
.page .panel-head { padding:13px 16px; min-height:60px; }
.page .panel-head #panel-close { order:-1; margin-right:8px; }
.page .panel-head:has(#panel-back:not([hidden])) #panel-close { order:1; }
.page #panel-content { flex:1; padding:24px 22px; }
.page .tool-hero { height:190px; margin:10px 0; }
.page .tool-hero .tool-art { width:210px; height:210px; }
.page .craft-orbit { height:100px; margin:8px 0; }
.page .craft-orbit::before { width:80px; height:80px; }
.page .orbit-resource:nth-child(2), .page .orbit-resource:nth-child(3) { top:40px; }
.page .map-option { padding:20px 16px; }
.page .map-option h3 { font-size:18px; }
@media(max-height:700px) { .home-ui { bottom:16px; left:20px; right:20px; } .home-guardians button { width:60px; } .home-guardians .creature { height:60px; } .home-ui > p { font-size:10px; margin-bottom:9px; } .page .tool-hero { height:110px; } .page .tool-hero .tool-art { width:130px; height:130px; } .page .craft-orbit { height:100px; } .page .craft-orbit::before { width:80px; height:80px; } .page .orbit-resource:nth-child(2), .page .orbit-resource:nth-child(3) { top:40px; } .page #panel-content { padding:12px 16px; } }
.battle-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.battle-actions .guard { position:relative; display:grid; grid-template-columns:28px 1fr; column-gap:5px; row-gap:1px; min-height:68px; padding:9px 8px; margin:0; font-size:17px; text-align:center; overflow:hidden; }
.battle-actions .guard svg { grid-row:1 / 3; width:28px; height:28px; }
.battle-actions .guard small { margin:0; font-size:9px; }
.battle-actions .strike { background:linear-gradient(#74503e,#4e3731); color:#f5d7a6; border-color:#b99563; box-shadow:0 4px #162d2e; }
.battle-actions .strike:disabled { opacity:1; color:#c6b595; }
.battle-actions .strike small { color:inherit; }
.battle-actions .strike.perfect-ready { background:linear-gradient(#ffdf86,#df9855); color:#4b291d; border-color:#ffe5ae; box-shadow:0 4px #8d5b34,0 0 28px #ffcc7b99; }
.action-track { position:absolute; height:4px; left:0; right:0; bottom:0; background:#152e2c88; }
.action-track > i { display:block; height:100%; background:#e8b876; }
.action-track::after { content:''; position:absolute; top:0; right:0; width:var(--timing-zone,23.333%); height:100%; background:#fff1ad55; border-left:1px solid #ffe6ab; }
#guard-progress { background:#85d2e4; }
.fx-critical { width:280px; height:280px; margin:-140px; border:5px solid #ffe09b; border-radius:50%; background:radial-gradient(#ffe5a155,transparent 65%); }
.fx-critical i { position:absolute; width:340px; height:16px; border-radius:100%; background:#fff4cd; box-shadow:0 0 20px 12px #ffc35c; transform:rotate(-38deg); }
.fx-critical i + i { transform:rotate(38deg); width:240px; height:10px; }
.battle-float.critical-hit { color:#fff1b2; font-size:58px; text-shadow:0 3px #6c341b,0 0 25px #ffad47; }
.battle-float em { display:block; font-size:22px; font-style:normal; letter-spacing:2px; }
.battle-grade { text-align:center; padding:0 0 14px; color:#e8c98b; }
.battle-grade > svg { display:block; width:40px; height:40px; margin:0 auto 8px; fill:#c5a55a33; }
.battle-grade > span { font-size:12px; letter-spacing:3px; font-weight:800; }
.battle-grade h3 { margin:5px 0; font-size:26px; }
.battle-grade p { color:var(--muted); font-size:11px; line-height:1.6; margin:7px 0 0; }
.battle-grade[data-grade=PERFECT] { color:#fff0b5; text-shadow:0 0 25px #f2c66b66; }
.battle-grade[data-grade=CLOSE] { color:#f0b697; }
.critical-finisher { display:block; margin-top:9px; color:#ffc17d; font-size:12px; }
.battle-report { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--line); }
.battle-report > div { display:grid; gap:5px; text-align:center; padding:10px 2px; background:#163a35; }
.battle-report span { color:var(--muted); font-size:10px; }
.battle-report b { color:#f4dfb4; font-size:18px; }
.world.in-battle .gather-feedback { display:none; }
@media(max-height:700px) { .battle-actions { margin-bottom:9px; gap:8px; } .battle-actions .guard { min-height:57px; font-size:15px; padding:6px; } .battle-actions .guard small { font-size:8px; } .battle-float.critical-hit { font-size:42px; } .battle-float em { font-size:18px; } }
@media(max-height:600px) { .battle-cue { display:none; } }
.objective { display:grid; gap:5px; line-height:1.5; right:22px; font-size:11px; }
.area p { max-width:320px; line-height:1.5; }
#music.muted { opacity:.4; position:relative; }
#music.muted::after { content:''; position:absolute; width:24px; height:2px; background:currentColor; transform:rotate(-45deg); }
.settings-row > span { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.settings-row small { width:100%; margin-left:31px; font-size:10px; color:var(--muted); }
.route-controls { margin:16px 0; }
.route-controls label { display:flex; gap:12px; align-items:center; margin-bottom:10px; color:#e4d2a5; }
.route-controls input { width:100px; padding:8px; color:#f4dfb4; background:#12372f; border:1px solid var(--line); border-radius:5px; }
.pity-note, .card-growth { text-align:center; font-size:11px; line-height:1.7; color:#c7d4b7; }
.chest-instruction { text-align:center; font-size:13px; color:#e5d3a5; margin:4px 0 20px; }
.reward-chests { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.reward-chest { padding:8px 0; border-radius:8px; background:radial-gradient(ellipse at 50% 30%,#c8b16e22,transparent 70%); color:#e7c98b; min-height:136px; }
.chest-drawing { display:block; position:relative; width:78px; height:74px; margin:0 auto 10px; filter:drop-shadow(0 6px 5px #061d22); }
.chest-lid { position:absolute; z-index:2; top:7px; left:0; width:78px; height:31px; border:3px solid #d9b96f; border-radius:18px 18px 3px 3px; background:linear-gradient(#b7854c,#724125); box-shadow:inset 9px 0 #e5bf6e88,inset -9px 0 #e5bf6e88; transform-origin:50% 100%; transition:transform .4s; }
.chest-body { position:absolute; top:35px; left:2px; width:74px; height:34px; border:3px solid #c6a15b; border-radius:0 0 5px 5px; background:repeating-linear-gradient(#9e6535 0 10px,#784725 10px 13px); box-shadow:inset 7px 0 #c6a15b,inset -7px 0 #c6a15b; }
.chest-lock { position:absolute; z-index:3; top:31px; left:30px; width:18px; height:23px; font-style:normal; background:linear-gradient(#ffe7a6,#b98b40); color:#735022; border:1px solid #ffe4a1; border-radius:3px; }
.reward-chest > b { font-size:13px; }
.reward-chest.opened { opacity:1; color:#eee0b9; background:radial-gradient(ellipse at 50% 35%,#e2ca7b22,transparent 70%); }
.opened .chest-lid { transform:translateY(-16px) rotate(-12deg); }
.opened .chest-lock { transform:translateY(4px); }
.chest-loot { display:grid; gap:4px; font-size:12px; }
.chest-loot > span { display:flex; align-items:center; justify-content:center; gap:3px; }
.chest-loot .resource-art { width:25px; height:25px; }
.reward-chest.opening { animation:chest-shake .15s 3; box-shadow:0 0 32px #f6d89066; }
.combat-details { margin:16px 0; }
.combat-details summary { color:var(--muted); font-size:12px; cursor:pointer; padding:8px 0; }
@keyframes chest-shake { 25% { transform:rotate(-6deg); } 75% { transform:rotate(6deg); } }
@media(prefers-reduced-motion:reduce) { .reward-chest.opening { animation:none; } .chest-lid { transition:none; } }
#site-dialog{max-width:340px;width:calc(100% - 36px);padding:24px;border:1px solid #b69b62;border-radius:14px;background:#173d37;color:#e8d8b2}#site-dialog p{white-space:pre-line;line-height:1.8}#share-link{width:100%;margin-bottom:16px;padding:10px;user-select:text;-webkit-user-select:text}
.resource-art.extra-resource { background-image:url('/assets/games/island-cards/resources-2.webp'); background-size:200% 100%; background-position:var(--resource-x) center; }
.party-replace { text-align:center; padding:15px 0 0; border-top:1px solid #b49a6155; }
.party-replace > b { color:#f3d491; }
.party-replace p { font-size:12px; color:var(--muted); }
.party-replace > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.party-replace button[data-replace] { display:grid; padding:7px; gap:4px; }
.party-replace .creature { height:auto; }
.party-replace small { font-size:10px; font-weight:400; }
.ready-action:not(:disabled) { position:relative; overflow:hidden; animation:action-ready .7s ease-out; }
.ready-action:not(:disabled)::after { content:''; pointer-events:none; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,#fff5 45%,transparent 65%); transform:translateX(-130%); animation:action-glint 1s .2s both; }
.primary:active:not(:disabled) { transform:translateY(2px); filter:brightness(1.12); }
@keyframes action-ready { 0% { box-shadow:0 0 0 3px #f9d78866,0 0 20px #f9d78844; } 100% { box-shadow:0 3px #102f2a; } }
@keyframes action-glint { to { transform:translateX(130%); } }
.page .tool-hero .tool-art.later { width:126px; height:210px; }
.tier-list .tool-art.later { width:35px; height:58px; }
.voyage-chart { position:relative; height:680px; margin:20px -4px; border-radius:18px; background:linear-gradient(#102e2e99,#102e2e33),url('/assets/games/island-cards/backdrop.webp') center / cover; border:1px solid #b49a6133; }
.voyage-route { position:absolute; inset:0; width:100%; height:100%; }
.voyage-route path { fill:none; stroke:#dbc28a88; stroke-width:2; stroke-dasharray:5 7; }
.voyage-node { position:absolute; transform:translate(-50%,-50%); width:43%; max-width:160px; padding:5px; background:transparent; text-align:center; color:#dfd2b0; }
.voyage-node .map-art { width:95px; height:95px; margin:0 auto 3px; filter:drop-shadow(0 7px 6px #0009); transition:filter .2s,transform .2s; }
.voyage-node b { display:block; font-size:13px; }
.voyage-node small { display:block; font-size:10px; color:#b3c7af; margin-top:3px; }
.voyage-node.preview .map-art { transform:scale(1.1); filter:drop-shadow(0 0 10px #ffe09b99); }
.voyage-node.preview b { color:#ffe09b; }
.voyage-node.current::before { content:'현재 항로'; display:block; width:max-content; margin:0 auto 1px; padding:3px 7px; border:1px solid #d9bb70; color:#f5d699; font-size:9px; border-radius:10px; background:#173b33; }
.voyage-detail { background:#21453b; border:1px solid #b39b6255; border-radius:14px; padding:16px; }
.voyage-detail h3 { font-size:18px; color:#f0d397; margin:0 0 8px; }
.voyage-detail > p { font-size:12px; line-height:1.7; color:#bbcdb4; }
.voyage-detail .primary { width:100%; margin-top:16px; }
.island-monsters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; text-align:center; margin-top:12px; }
.island-monsters .creature { display:block; width:100%; height:auto; aspect-ratio:1; }
.stock { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:6px 8px; }
.stock > span { display:grid; justify-items:center; gap:1px; min-width:0; }
.stock b { font-size:10px; line-height:1.2; }
.reveal #reveal-again { width:100%; margin-top:12px; }
.reveal #reveal-close { width:100%; margin-top:8px; }
.island-monsters b { display:block; font-size:10px; line-height:1.5; color:#e3c68b; }
.island-monsters small { display:block; font-size:9px; line-height:1.6; margin-top:5px; color:#b4c8b3; }
.growth-stage { position:relative; isolation:isolate; margin:20px auto 12px; }
.growth-stage .card-full { opacity:0; transform:scale(.65); transition:opacity .25s,transform .5s cubic-bezier(.2,.9,.3,1.3); }
.growth-rays { position:absolute; z-index:-1; inset:-30px; opacity:.25; background:repeating-conic-gradient(from 0deg,transparent 0 14deg,var(--growth-color) 15deg 20deg,transparent 22deg 36deg); mask-image:radial-gradient(#000 20%,transparent 68%); }
.growth-copies { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; }
.growth-copy { width:105px; background:linear-gradient(#315b4c,#153b35); border:1px solid #c8ac70; border-radius:12px; box-shadow:0 0 18px var(--growth-color); padding:8px; animation:growth-merge .85s ease-in both; --merge-x:85px; }
.growth-copy:nth-child(2) { --merge-x:-85px; }
.growth-level { opacity:0; color:#d6e5bb; font-size:24px; font-weight:700; margin:16px 0 4px; transition:opacity .3s; }
.growth-level span { color:#dfc17c; padding:0 8px; }
.growth-level strong { color:#ffe29b; }
.growth-stats { opacity:0; display:grid; gap:8px; margin:16px auto; max-width:280px; transition:opacity .3s; }
.growth-stats > div { display:grid; grid-template-columns:55px 1fr 42px; align-items:center; gap:8px; font-size:12px; }
.growth-stats span { color:#b8cbb4; text-align:left; }
.growth-stats strong { color:#d6f6a2; text-align:right; }
.grown .growth-stage .card-full { opacity:1; transform:scale(1); box-shadow:0 0 35px color-mix(in srgb,var(--growth-color) 45%,transparent); }
.grown .growth-rays { animation:growth-burst 1.1s ease-out both; }
.grown .growth-level, .grown .growth-stats { opacity:1; }
@keyframes growth-merge { 0% { transform:translateX(0) scale(.8); opacity:1; } 70% { opacity:1; filter:brightness(1.8); } 100% { transform:translateX(var(--merge-x)) scale(.1); opacity:0; filter:brightness(3); } }
@keyframes growth-burst { 0% { opacity:.9; transform:scale(.6) rotate(-10deg); } 60% { opacity:.5; } 100% { opacity:.15; transform:scale(1.25) rotate(25deg); } }
@media(max-height:700px) { .page .tool-hero .tool-art.later { width:78px; height:130px; } .tier-list .tool-art.later { width:24px; height:40px; } .growth-stage { margin:10px auto; } .growth .card-full { width:145px; } .growth-level { font-size:20px; margin:10px 0; } .growth-stats { gap:5px; margin:10px auto; } }
@media(prefers-reduced-motion:reduce) { .ready-action:not(:disabled),.ready-action:not(:disabled)::after,.growth-copy,.grown .growth-rays { animation:none; } .grown .growth-copies { display:none; } .growth-stage .card-full,.growth-level,.growth-stats { transition:none; } }

/* 소환 종류와 선택 상태를 같은 행에서 읽는다. */
.recipe-title { margin:8px 0 0; font-size:16px; color:#f2deb0; }
.page .recipe { flex-direction:column; padding:10px 0 0; }
.page .recipe button { display:grid; grid-template-columns:38px 1fr 26px; align-items:center; gap:10px; text-align:left; padding:13px 12px; min-height:76px; border:2px solid #668b7a55; border-radius:10px; }
.page .recipe button > .resource-art { width:36px; height:36px; }
.page .recipe button b { font-size:15px; color:#dce9ce; }
.page .recipe button small { font-size:12px; line-height:1.5; color:#b6ccb9; }
.page .recipe button.selected { background:linear-gradient(110deg,#665633,#3b5745); border-color:#e6c477; box-shadow:0 0 0 1px #e6c47733,inset 4px 0 #edc76f; }
.page .recipe button.selected b { color:#ffedbc; }
.recipe-check { width:24px; height:24px; border:1px solid #93ad9466; border-radius:50%; text-align:center; line-height:24px; font-weight:900; }
.page .selected .recipe-check { background:#e6c477; border-color:#e6c477; color:#173b33; }
.recipe-current { color:#f0d291; margin:8px 0 12px; font-size:12px; font-weight:700; }

.reveal { height:fit-content; max-height:calc(100dvh - 32px); overflow:clip; }
.reveal-stars { scale:1; }
.reveal .card-full { width:clamp(130px,calc((100dvh - 390px)*.6),232px); margin-bottom:10px; }
#reveal-actions { display:flex; gap:8px; margin-top:8px; }
#reveal-actions:empty { display:none; }
#reveal-actions button { flex:1; padding:10px 6px; font-size:13px; }
#reveal-actions small { display:block; margin-top:4px; font-size:10px; line-height:1.5; }
.page[data-view="tools"] #panel-content { padding:12px 20px; }
.page[data-view="tools"] .tool-hero { height:140px; margin:0 0 6px; }
.page[data-view="tools"] .tool-hero .tool-art { width:145px; height:145px; }
.page[data-view="tools"] .tool-hero .tool-art.later { width:87px; height:145px; }
.page[data-view="tools"] .tier-list { margin:8px 0; }
.page[data-view="tools"] .tier-list .tool-art { width:38px; height:38px; }
.page[data-view="tools"] .tier-list .tool-art.later { width:23px; height:38px; }
.page[data-view="tools"] .panel-note { font-size:11px; margin:8px 0; }
.page[data-view="tools"] .material { padding:8px 4px; }
.page[data-view="tools"] .requirement-note.ready,.page[data-view="craft"] .requirement-note.ready { display:none; }
.page[data-view="craft"] .craft-orbit { display:none; }
.page[data-view="craft"] #panel-content { padding:12px 20px; }
.tool-forged .tool-art { animation:forge-hit .3s 2 ease-out; }
.forge-burst { position:absolute; inset:24% 0 auto; z-index:2; display:grid; gap:4px; color:#fff0b2; text-shadow:0 2px 5px #142d24,0 0 15px #dba63a; pointer-events:none; animation:forge-label 1.5s both; }
.forge-burst b { font-size:23px; }
.forge-burst strong { font-size:18px; }
.forge-spark { position:absolute; top:50%; left:50%; width:5px; height:16px; background:#ffe6a0; box-shadow:0 0 10px #ffb349; transform-origin:center; animation:forge-spark .8s .15s both; pointer-events:none; }
@keyframes forge-hit { 30% { transform:rotate(-20deg) scale(.9); filter:brightness(1.6); } 70% { transform:rotate(12deg) scale(1.12); } }
@keyframes forge-spark { from { transform:rotate(var(--spark-angle)) translateY(0); opacity:1; } to { transform:rotate(var(--spark-angle)) translateY(-95px) scale(.2); opacity:0; } }
@keyframes forge-label { 0% { opacity:0; transform:scale(.6); } 20%,75% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:translateY(-18px); } }
@media(max-height:650px) { .reveal { padding:14px; } .reveal h2 { font-size:18px; margin-bottom:8px; } .reveal .card-full { padding:8px; } .reveal .card-full .card-top { font-size:16px; } .reveal .card-full .card-name { font-size:12px; } .reveal .card-full .card-stats,.reveal .card-full .card-power { font-size:10px; padding:4px 0; } }
@media(prefers-reduced-motion:reduce) { .tool-forged .tool-art,.forge-burst,.forge-spark { animation:none; } .forge-spark { display:none; } }