* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1d2b3a;
  color: #fff;
  font-family: "Segoe UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

[hidden] { display: none !important; }

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 20px 24px;
  background: #2b3f55;
  border: 4px solid #f4d35e;
  box-shadow: 0 0 0 4px #14202c;
  text-align: center;
}

.panel h1 { margin: 0 0 14px; font-size: 28px; color: #f4d35e; }

label, .label { display: block; margin-bottom: 12px; font-weight: bold; }
.label { margin-bottom: 6px; }

input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 3px solid #14202c;
  background: #fff;
  color: #14202c;
  font: inherit;
  font-size: 18px;
  text-align: center;
  user-select: text;
  -webkit-user-select: text;
}

.hint { margin: -4px 0 12px; font-size: 14px; color: #d5dee7; }

#looks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

#looks button {
  padding: 6px;
  background: #4f8f4a;
  border: 3px solid #14202c;
  cursor: pointer;
}

#looks button[aria-pressed="true"] { border-color: #f4d35e; background: #6cbb5f; }

#looks canvas {
  display: block;
  width: 100%;
  image-rendering: pixelated;
}

#join-error { min-height: 1.3em; margin: 0 0 8px; color: #ffb4a2; }

.panel > button {
  width: 100%;
  padding: 12px;
  border: 3px solid #14202c;
  background: #f4d35e;
  color: #14202c;
  font: inherit;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.panel > button:disabled { opacity: 0.6; cursor: wait; }

#hud { position: fixed; inset: 0; pointer-events: none; }

#music-button[data-level="Quiet"] { opacity: 0.7; }
#music-button[data-level="Off"] { opacity: 0.45; }
#music-button[data-level="Off"]::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  border-top: 3px solid #d64545;
  transform: rotate(-45deg);
}

.bar {
  position: relative;
  height: 20px;
  margin-top: 4px;
  overflow: hidden;
  border: 2px solid #14202c;
  background: #14202c;
}

.bar span {
  position: absolute;
  inset: 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
}

#hp-fill, #xp-fill { height: 100%; }
#hp-fill { background: #b83a4b; }
#xp-fill { background: #3a6ea5; }

#food-bar button.empty { background: #8295a8; }
#food-bar button.empty canvas { opacity: 0.4; }
#food-bar .cooldown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 32, 44, 0.55);
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 0 #14202c, -1px -1px 0 #14202c;
}
#food-bar .cooldown:empty { display: none; }
.bag-actions .key-button { min-width: 36px; }
.bag-actions .key-button.chosen { background: #7dff8a; }

#bag-food { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; font-size: 12px; color: #d5dee7; }
#bag-food > span { width: 100%; }
.food-cell { position: relative; }
.food-count {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 0 #14202c, -1px -1px 0 #14202c;
}

#shop-panel, #storage-panel, #pets-panel, #board-panel, #wardrobe-panel, #map-panel {
  position: absolute;
  top: 140px;
  right: 10px;
  width: min(320px, calc(100vw - 20px));
  max-height: calc(100vh - 340px);
  min-height: 160px;
  overflow-y: auto;
  padding: 8px;
  background: rgba(20, 32, 44, 0.92);
  border: 3px solid #7dff8a;
  pointer-events: auto;
}
#shop-title, #storage-title, #pets-title, #board-title, #wardrobe-title, #map-title { display: flex; align-items: center; gap: 8px; color: #7dff8a; }
#shop-coins, #storage-coins, #pets-coins, #board-stamps, #wardrobe-stamps, #map-where { margin-left: auto; color: #f4d35e; font-size: 14px; }
#shop-tabs, #storage-tabs, #wardrobe-tabs { display: flex; gap: 4px; margin: 6px 0; }
#shop-tabs button, #storage-tabs button, #wardrobe-tabs button {
  flex: 1;
  min-height: 34px;
  border: 2px solid #14202c;
  background: #5b6b7a;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}
#shop-tabs button.chosen, #storage-tabs button.chosen, #wardrobe-tabs button.chosen { background: #7dff8a; color: #14202c; }
.storage-heading { margin: 8px 0 2px; font-size: 13px; font-weight: bold; }
.pet-row { align-items: flex-start; }
.pet-row.shiny { background: linear-gradient(#fff8d6, #ffe7a3); box-shadow: inset 0 0 0 3px #f4c95d; }
.shiny-badge { display: inline-block; margin-bottom: 2px; padding: 1px 8px; border-radius: 999px;
  background: #f4c95d; color: #6a4a00; font-size: 12px; font-weight: bold; }
.pet-buttons button.danger { background: #d9485f; color: #ffffff; text-shadow: none; }
.shiny-warning { margin: 4px 0 0; padding: 4px 6px; border-radius: 8px; background: #ffe0e5; color: #b0303f;
  font-size: 12px; font-weight: bold; }
.pet-name { font: inherit; font-weight: bold; font-size: 14px; margin-bottom: 2px; max-width: 100%; }
.pet-buttons { display: flex; flex-direction: column; gap: 4px; }
.shop-row button.chosen { background: #9fe8a8; }
.storage-upgrade { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.storage-upgrade span { flex: 1; }
.storage-upgrade button {
  min-width: 96px;
  min-height: 36px;
  border: 2px solid #14202c;
  background: #f4d35e;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}
.storage-upgrade button:disabled { background: #5b6b7a; color: #c3ced9; cursor: default; }
.shop-hint { font-size: 13px; color: #d5dee7; }
.shop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 4px 8px;
  background: #2b3f55;
  font-size: 13px;
  color: #d5dee7;
}
.shop-row canvas { flex: none; }
.shop-row div { flex: 1; }
.shop-row strong, .shop-row span { display: block; }
.shop-row button {
  min-width: 96px;
  min-height: 36px;
  border: 2px solid #14202c;
  background: #f4d35e;
  color: #14202c;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}
.shop-row button.danger { background: #d1495b; color: #fff; }
.shop-row button:disabled { background: #5b6b7a; color: #c3ced9; cursor: default; }

#skill-bar button.empty { background: #8295a8; color: #2b3f55; }
#skill-bar button.cooling { background: #5b6b7a; color: #fff; }
#skills-panel {
  position: absolute;
  top: 96px;
  left: 10px;
  width: min(380px, calc(100vw - 20px));
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  padding: 8px;
  background: rgba(20, 32, 44, 0.92);
  border: 3px solid #9fd3ff;
  pointer-events: auto;
}

#keeper-panel, #talk-panel, #trophy-panel, #quest-panel {
  position: absolute;
  top: 140px;
  right: 10px;
  width: min(320px, calc(100vw - 20px));
  padding: 8px;
  background: rgba(20, 32, 44, 0.92);
  border: 3px solid #f4d35e;
  pointer-events: auto;
}
#keeper-title, #talk-title { display: flex; align-items: center; justify-content: space-between; color: #f4d35e; }
#talk-words { margin: 6px 0; font-size: 15px; line-height: 1.45; }
#talk-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}
#talk-actions canvas { width: 24px; height: 24px; image-rendering: pixelated; }
/* The title and its X stay at the top while a long list scrolls. */
#talk-title, #shop-title, #storage-title, #pets-title, #board-title, #wardrobe-title, #map-title, #keeper-title, #quest-title, #trophy-title, #skills-title, #bag-title {
  position: sticky;
  top: -8px;
  z-index: 1;
  margin-top: -8px;
  padding-top: 8px;
  background: #fffbf0; /* solid, so the list scrolling under it does not show through */
}
/* Not enough coins (or nothing left to do): grey, so it doesn't look like it can be tapped. */
#talk-actions button:disabled { background: #e3e7ee; color: #8a87a0; box-shadow: none; cursor: default; }
#talk-actions button:disabled canvas { opacity: 0.5; }
/* "Are you sure?" before buying or forging, so a finger can't spend coins by mistake. */
.ask-box { margin: 4px 0; padding: 8px; border-radius: 12px; background: #fff6d6; box-shadow: inset 0 0 0 3px #f4c95d; }
.ask-box p { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-weight: bold; color: var(--ink); }
.ask-buttons { display: flex; gap: 6px; }
#talk-actions .ask-buttons button { flex: 1; }
#talk-actions .ask-buttons button.yes { flex: 2; background: linear-gradient(#d6ffd9, #7fdc8a); }
#talk-actions .ask-buttons button.no { background: linear-gradient(#ffffff, #e3ecf7); }
#quest-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #8a5bd6; }
#quest-list { display: grid; gap: 8px; margin-top: 6px; max-height: min(60vh, 420px); overflow-y: auto; }
.quest-card { padding: 8px 10px; border-radius: 12px; background: #ffffff; box-shadow: inset 0 0 0 2px #dbe8f6; color: var(--ink); }
.quest-card.done { background: linear-gradient(#f2fff0, #dcf7d6); box-shadow: inset 0 0 0 2px #9fe8a8; }
.quest-card strong { display: block; margin-bottom: 4px; }
.quest-text { margin: 4px 0 0; font-size: 13px; color: var(--muted, #6a6080); }
.quest-task { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-top: 4px; font-size: 13px; }
.quest-task.done { color: #3f9a4f; }
.quest-count { font-weight: bold; }
.quest-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #e3e7ee; overflow: hidden; }
.quest-bar div { height: 100%; background: #8a5bd6; }
.quest-task.done .quest-bar div { background: #5cc46b; }
.guide-row { align-items: flex-start; }
.guide-row strong { color: var(--ink); }
.guide-steps { margin: 4px 0 8px; padding-left: 20px; font-size: 13px; color: var(--ink); }
#trophy-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#trophy-count { margin-right: auto; font-weight: bold; color: #c9822b; }
#trophy-list { display: grid; gap: 6px; margin-top: 6px; max-height: min(60vh, 420px); overflow-y: auto; }
.trophy-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px;
  background: rgba(58, 46, 79, 0.06); opacity: 0.6; }
.trophy-row.earned { background: linear-gradient(#fff6d6, #ffe7a3); opacity: 1; box-shadow: inset 0 0 0 2px #f4c95d; }
.trophy-icon { font-size: 22px; }
.trophy-row:not(.earned) .trophy-icon { filter: grayscale(1); }
.trophy-text { font-size: 13px; color: var(--muted, #6a6080); }
#trophy-toast {
  position: absolute;
  top: calc(var(--edge-top, 10px) + 70px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: bold;
  color: #6b4500;
  background: linear-gradient(#fff3c4, #ffd36b);
  border: 3px solid #e0a82e;
  box-shadow: 0 4px 12px rgba(58, 46, 79, 0.3);
  pointer-events: none;
  white-space: nowrap;
  animation: trophy-pop 0.4s ease-out;
}
@keyframes trophy-pop { from { transform: translateX(-50%) scale(0.6); } to { transform: translateX(-50%) scale(1); } }
#bag-gem { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 13px; font-weight: bold; color: #c2304a; }
#bag-gem canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.keeper-hint { margin: 4px 0 6px; font-size: 13px; color: #d5dee7; }
.keeper-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 4px 8px;
  background: #2b3f55;
  font-size: 13px;
  color: #d5dee7;
}
.keeper-row canvas { flex: none; }
.keeper-row div { flex: 1; }
.keeper-row strong, .keeper-row span { display: block; }
.keeper-row button {
  min-width: 96px;
  min-height: 36px;
  border: 2px solid #14202c;
  background: #f4d35e;
  color: #14202c;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}
.keeper-row button:disabled { background: #5b6b7a; color: #c3ced9; cursor: default; }

#skills-title, #bag-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#skills-title { color: #9fd3ff; }
#skills-points { margin-left: auto; color: #f4d35e; font-size: 14px; }
.close-button {
  width: 32px;
  height: 32px;
  border: 2px solid #14202c;
  background: #d1495b;
  color: #fff;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}
#skills-tabs { display: flex; gap: 4px; margin-bottom: 4px; }
#skills-tabs button {
  flex: 1;
  min-height: 36px;
  border: 2px solid #14202c;
  background: #5b6b7a;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}
#skills-tabs button.chosen { background: #9fd3ff; color: #14202c; }
.skills-hint { margin: 4px 0; font-size: 13px; color: #d5dee7; }
.skills-row-title { margin-top: 8px; font-size: 12px; font-weight: bold; color: #9fd3ff; }
.skill-row.learned { background: #2f5a45; }
.skill-small { font-size: 11px; color: #c3ced9; }
.skill-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.skill-keys { display: flex; gap: 2px; }
.skill-row .skill-keys button { min-width: 26px; min-height: 26px; padding: 0; background: #8295a8; }
.skill-row .skill-keys button.chosen { background: #e8833a; }
.skills-forget { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #c3ced9; }
.skills-forget button {
  min-height: 36px;
  border: 2px solid #14202c;
  background: #8295a8;
  color: #14202c;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}
.skills-forget button.danger { background: #d1495b; color: #fff; }

.skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 8px;
  background: #2b3f55;
  font-size: 13px;
}

.skill-row strong, .skill-row div > span { display: block; }
.skill-learned { color: #6cbb5f; font-weight: bold; }

.skill-row button {
  min-width: 64px;
  min-height: 36px;
  border: 2px solid #14202c;
  background: #f4d35e;
  color: #14202c;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}

.skill-row button:disabled { background: #5b6b7a; color: #c3ced9; cursor: not-allowed; }

#bag {
  position: absolute;
  top: 96px;
  left: 10px;
  width: min(274px, calc(100vw - 20px));
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  padding: 8px;
  background: rgba(20, 32, 44, 0.92);
  border: 3px solid #f4d35e;
  pointer-events: auto;
}

#bag-title { color: #f4d35e; }
#bag-count { margin-left: auto; font-size: 13px; color: #d5dee7; }

#bag-worn { display: flex; gap: 12px; margin-bottom: 8px; }
.bag-worn-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: #d5dee7; }
#bag-grid { display: grid; grid-template-columns: repeat(5, 48px); gap: 3px; }

.bag-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid #14202c;
  background: #2b3f55;
  touch-action: manipulation;
}

.bag-cell canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.bag-cell.chosen { background: #5b7fa3; outline: 2px solid #f4d35e; }
.bag-cell { position: relative; }
.favorite-star {
  position: absolute;
  top: 0;
  right: 2px;
  font-size: 14px;
  color: #f4d35e;
  text-shadow: 1px 1px 0 #14202c, -1px -1px 0 #14202c;
}
.bag-actions .favorite.on { background: #f4d35e; }
.bag-actions { flex-wrap: wrap; }
.bag-hint { width: 100%; font-size: 12px; color: #f2a8c0; }

#bag-details { min-height: 76px; margin-top: 8px; font-size: 13px; color: #d5dee7; }
#bag-details strong, #bag-details > span { display: block; }
.bag-actions { display: flex; gap: 6px; margin-top: 6px; }

.bag-actions button {
  flex: 1;
  min-height: 36px;
  border: 2px solid #14202c;
  background: #f4d35e;
  color: #14202c;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}

.bag-actions button.danger { background: #d1495b; color: #fff; }

#help {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 8px;
  background: rgba(20, 32, 44, 0.75);
  font-size: 13px;
}

@media (hover: none) { #help { display: none; } }

/* ---------- The soft, cute look ----------
   Cream windows with round corners, pastel buttons and dark purple text, like a Japanese RPG.
   These rules come last, so they win over the colors above. */
:root {
  --ink: #3a2e4f;
  --muted: #6b6384;
  --cream: rgba(255, 251, 240, 0.96);
  --edge: #8fb8e8;
  --pink: #ff8fb1;
  --sun: #ffd84a;
  --slot: #eaf2fb;
}

html, body {
  background: #bfe4ff;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Segoe UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
}

/* Windows */
.panel, #bag, #skills-panel, #keeper-panel, #shop-panel, #storage-panel, #pets-panel, #board-panel, #wardrobe-panel, #map-panel, #talk-panel, #trophy-panel, #quest-panel {
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--edge);
  border-radius: 16px;
  box-shadow: 0 0 0 3px #ffffff, 0 6px 18px rgba(58, 46, 79, 0.25);
}
.panel h1 { color: var(--ink); text-shadow: 0 2px 0 #ffffff, 0 3px 0 #cfe3f7; }
#status, #help, #notice {
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--edge);
  border-radius: 12px;
}
#notice { border: 3px solid var(--pink); }
#level, #coins, #skills-points, #shop-coins, #storage-coins, #pets-coins, #board-stamps, #wardrobe-stamps, #map-where { color: #c9822b; }
#bag-title, #keeper-title { color: #c9822b; }
#talk-title { color: #4f86c6; }
#talk-words { color: var(--ink); }
#talk-actions button { border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 rgba(58, 46, 79, 0.35);
  color: var(--ink); background: linear-gradient(#ffe3ea, #ff9fb2); }
#skills-title { color: #4f86c6; }
#shop-title { color: #3f9a4f; }
#storage-title { color: #8a5a30; }
#pets-title { color: #d9628a; }
.storage-heading, .storage-upgrade { color: var(--ink); }
.hint, .keeper-hint, .shop-hint, .skills-hint, #bag-count, .bag-worn-slot, #bag-food, #bag-details,
.skill-small, .skills-forget, .keeper-row, .shop-row { color: var(--muted); }
.skills-row-title { color: #4f86c6; }
#join-error { color: #d9485f; }

/* Rows and slots inside windows */
.keeper-row, .shop-row, .skill-row { background: #ffffff; border: 2px solid #dbe8f6; border-radius: 10px; color: var(--ink); }
.skill-row.learned { background: #e9f8e4; border-color: #a8dca0; }
.skill-learned { color: #3f9a4f; }
.bag-cell { background: var(--slot); border: 2px solid #c9dcf0; border-radius: 8px; }
.bag-cell.chosen { background: #fff0b8; outline: 2px solid var(--sun); }
/* Item names are colored by how rare they are. A dark outline keeps white and light names easy to read. */
#bag-details strong { color: var(--ink); }
/* Only names with a rarity color get a dark edge, so light colors stay easy to read. */
#bag-details strong[style*="color"], .keeper-row strong[style*="color"], .shop-row strong[style*="color"] {
  text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
}

/* Buttons: round corners, pastel colors, a soft edge underneath */
#attack, #bag-button, #skills-button, #emotes button, #sound-button, #music-button, #food-bar button, #skill-bar button,
.panel > button, .close-button, .bag-actions button, .keeper-row button, .shop-row button, .skill-row button,
#skills-tabs button, #shop-tabs button, #storage-tabs button, #wardrobe-tabs button, .skills-forget button, #looks button {
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 3px 0 rgba(58, 46, 79, 0.35);
  color: var(--ink);
}
#attack { border-radius: 50%; background: linear-gradient(#ffb3c9, #ff7a9c); color: #ffffff; text-shadow: 0 1px 0 var(--ink); }
#attack:active { background: #e8607f; }
#bag-button { background: linear-gradient(#fff3b8, #ffd84a); }
#skills-button { background: linear-gradient(#e2f1ff, #9fd3ff); }
#emotes button { background: #ffffff; }
#sound-button, #music-button { border-radius: 50%; background: rgba(255, 255, 255, 0.9); }
#food-bar button { background: linear-gradient(#e6ffe9, #9fe8a8); }
#food-bar button.empty, #skill-bar button.empty { background: #dfe5ee; color: var(--muted); }
#skill-bar button { background: linear-gradient(#ffe2c4, #ffb36b); }
#skill-bar button.cooling { background: #c9cfdb; color: var(--ink); }
.panel > button { background: linear-gradient(#eef6ff, #b9dcff); } /* the first screen stays calm, not pink */
.close-button { border-radius: 50%; background: #ff9fb2; color: #ffffff; }
.bag-actions button, .keeper-row button, .shop-row button, .skill-row button { background: linear-gradient(#fff3b8, #ffd84a); }
.bag-actions button.danger, .shop-row button.danger, .skills-forget button.danger { background: #ff9fb2; color: #ffffff; }
.bag-actions .key-button.chosen, .bag-actions .favorite.on { background: #fff0b8; }
.keeper-row button:disabled, .shop-row button:disabled, .skill-row button:disabled { background: #e3e7ee; color: #9a98ad; }
#skills-tabs button, #shop-tabs button, #storage-tabs button, #wardrobe-tabs button, .skills-forget button { background: #e3ecf7; }
#skills-tabs button.chosen { background: #9fd3ff; }
#shop-tabs button.chosen, #storage-tabs button.chosen, #wardrobe-tabs button.chosen { background: #9fe8a8; }
.skill-row .skill-keys button { background: #e3ecf7; }
.skill-row .skill-keys button.chosen { background: #ffb36b; }
#looks button { background: #f4f7fb; }
#looks button[aria-pressed="true"] { background: #e2f1ff; border-color: #4f86c6; box-shadow: 0 0 0 2px #4f86c6; }
input { border: 2px solid var(--edge); border-radius: 10px; color: var(--ink); }

/* Bars */
.bar { border: 2px solid var(--ink); border-radius: 10px; background: #e3e7ee; }
.bar span { color: var(--ink); text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff; }
#hp-fill { background: linear-gradient(90deg, #ff8fa3, #ffb3c1); }
#xp-fill { background: linear-gradient(90deg, #8fc7ff, #b5ddff); }
#food-bar .key, #skill-bar .key { color: var(--ink); }

/* ---------- Where the buttons go ----------
   Your left thumb moves the hero: drag anywhere on the screen. Your right thumb fights:
   the attack button in the corner, and the four skills in a curve around it.
   The food sits at the bottom, just to the left of the skills.
   The small round buttons at the top open the messages, your bag and your skills. */
:root {
  --attack-size: 76px;
  --skill-size: 52px;
  --food-size: 42px;
  --icon-size: 42px;
  --edge-top: max(8px, env(safe-area-inset-top, 0px));
  --edge-left: max(8px, env(safe-area-inset-left, 0px));
  --edge-right: max(10px, env(safe-area-inset-right, 0px));
  --edge-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1000px) and (min-height: 640px) {
  :root { --attack-size: 92px; --skill-size: 62px; --food-size: 50px; --icon-size: 46px; }
}

#status {
  position: absolute;
  top: var(--edge-top);
  left: var(--edge-left);
  width: 210px;
  padding: 6px 10px 8px;
  font-size: 13px;
  line-height: 1.35;
}
#roster { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* How many friends are playing: its own little box in the bottom left corner.
   Tap it to see their names, one on each line, above it. The Talk button sits just above it. */
#online {
  position: absolute;
  left: var(--edge-left);
  bottom: var(--edge-bottom);
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  max-width: 200px;
  padding: 3px 12px;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--edge);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
#online[aria-expanded="true"] { border-radius: 12px; padding-top: 6px; }
#online-names { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 4px;
  font-size: 13px; font-weight: normal; color: var(--ink); text-align: left; }
#online-names[hidden] { display: none; }
#online-names span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { #online { bottom: calc(var(--edge-bottom) + 34px); } } /* above the keys help line */
@media (max-width: 560px) { #online { bottom: calc(var(--edge-bottom) + var(--food-size) + 10px); } }
#level { margin: 2px 0 1px; font-weight: bold; }
#status .bar { height: 17px; margin-top: 3px; }
#status .bar span { font-size: 11px; line-height: 13px; }
#coins { margin-top: 3px; font-size: 12px; font-weight: bold; }
#status-toggle { display: none; }
/* On a phone the box is small: the name, level, HP and XP. Tap it to see the rest. */
@media (max-height: 560px), (max-width: 560px) {
  #status { width: min(160px, calc(100vw - var(--icon-size) - 40px)); padding: 4px 8px 6px; pointer-events: auto; }
  #status.open { width: min(210px, calc(100vw - var(--icon-size) - 40px)); padding-bottom: 8px; }
  #status-toggle {
    display: block;
    width: 100%;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    touch-action: none;
  }
  #status:not(.open) > :not(#status-toggle, .bar) { display: none; }
  #status:not(.open) .bar { height: 14px; margin-top: 2px; }
  #status:not(.open) .bar span { font-size: 10px; line-height: 10px; }
}

#top-buttons { position: absolute; top: var(--edge-top); right: var(--edge-right); display: flex; flex-direction: row-reverse; gap: 6px; }
#menu { display: flex; flex-direction: row-reverse; gap: 6px; }
#top-buttons button {
  position: relative;
  width: var(--icon-size);
  height: var(--icon-size);
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  font-size: calc(var(--icon-size) * 0.48);
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}
#emote-button[aria-expanded="true"], #menu-button[aria-expanded="true"] { background: #fff0b8; }
#menu-button svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
}
#fullscreen-button svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#emotes {
  position: absolute;
  top: calc(var(--edge-top) + var(--icon-size) + 8px);
  right: var(--edge-right);
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px;
  padding: 8px;
  background: var(--cream);
  border: 2px solid var(--edge);
  border-radius: 14px;
  pointer-events: auto;
}
#emotes button { padding: 8px 14px; background: #ffffff; font: inherit; font-size: 15px; cursor: pointer; touch-action: none; }
/* On a narrow phone held upright, the round buttons stand in a column on the right. */
@media (max-width: 560px) {
  #top-buttons, #menu { flex-direction: column; }
  #emotes { top: var(--edge-top); right: calc(var(--edge-right) + var(--icon-size) + 8px); }
}

#notice {
  position: absolute;
  top: calc(var(--edge-top) + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: min(400px, calc(100vw - 2 * 230px));
  min-width: 200px;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: bold;
  text-align: center;
  z-index: 3;
}
@media (max-width: 760px) {
  #notice { top: 120px; left: var(--edge-left); transform: none; width: calc(100vw - var(--icon-size) - 40px); }
}

/* Near the Weapon Keeper or the Fruit Seller, this button opens their window. */
#talk {
  position: absolute;
  left: var(--edge-left);
  bottom: var(--edge-bottom);
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(#fff3b8, #ffd84a);
  font: inherit;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  animation: talk-bob 1.6s ease-in-out infinite;
}
@keyframes talk-bob { 50% { transform: translateY(-3px); } }
#talk { bottom: calc(var(--edge-bottom) + 34px); } /* above the online box */
@media (hover: hover) { #talk { bottom: calc(var(--edge-bottom) + 68px); } }
/* On a narrow phone held upright, the Talk button sits a little higher, above the food. */
@media (max-width: 560px) {
  #talk { bottom: calc(var(--edge-bottom) + var(--food-size) + 44px); }
  #talk .talk-who { display: none; }
}
@media (prefers-reduced-motion: reduce) { #talk { animation: none; } }

#action {
  position: absolute;
  right: var(--edge-right);
  bottom: var(--edge-bottom);
  /* r: how far the skills sit from the middle of the attack button. c: from a corner to the middle. */
  --r: calc(var(--attack-size) / 2 + var(--skill-size) * 1.15 + 6px);
  --c: calc(var(--attack-size) / 2 - var(--skill-size) / 2);
}
#attack {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--attack-size);
  height: var(--attack-size);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}
#attack canvas { width: 58%; height: 58%; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(58, 46, 79, 0.45)); }
#skill-bar button {
  position: absolute;
  width: var(--skill-size);
  height: var(--skill-size);
  padding: 9px 2px 2px;
  border-radius: 50%;
  font: inherit;
  font-size: calc(var(--skill-size) * 0.19);
  font-weight: bold;
  line-height: 1.05;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}
#skill-bar button:nth-child(1) { right: calc(var(--c) + var(--r)); bottom: var(--c); }
#skill-bar button:nth-child(2) { right: calc(var(--c) + var(--r) * 0.866); bottom: calc(var(--c) + var(--r) * 0.5); }
#skill-bar button:nth-child(3) { right: calc(var(--c) + var(--r) * 0.5); bottom: calc(var(--c) + var(--r) * 0.866); }
#skill-bar button:nth-child(4) { right: var(--c); bottom: calc(var(--c) + var(--r)); }
#skill-bar .key { position: absolute; top: 2px; left: 0; right: 0; font-size: 9px; opacity: 0.7; }
/* The food sits at the bottom, just to the left of the skills. */
#food-bar {
  position: absolute;
  right: calc(var(--edge-right) + var(--attack-size) / 2 - var(--skill-size) / 2 + var(--attack-size) / 2 + var(--skill-size) * 2.15 + 20px);
  bottom: var(--edge-bottom);
  display: flex;
  gap: 6px;
}
#food-bar button {
  position: relative;
  width: var(--food-size);
  height: var(--food-size);
  padding: 0;
  border-radius: 12px;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}
#food-bar canvas { width: 70%; height: 70%; margin-top: 2px; image-rendering: pixelated; }
#food-bar .key { position: absolute; top: 1px; left: 4px; font-size: 10px; font-weight: bold; }

/* Windows open on the left, above the game, so the right thumb's buttons stay free. */
#bag, #skills-panel, #keeper-panel, #shop-panel, #storage-panel, #pets-panel, #board-panel, #wardrobe-panel, #map-panel, #talk-panel, #trophy-panel, #quest-panel {
  top: calc(var(--edge-top) + 128px);
  left: var(--edge-left);
  right: auto;
  max-height: calc(100vh - var(--edge-top) - 140px);
  max-height: calc(100dvh - var(--edge-top) - 140px);
  max-width: calc(100vw - 16px);
  overflow-y: auto; /* a long list scrolls, so nothing hides at the bottom */
  overscroll-behavior: contain;
  touch-action: pan-y;
  z-index: 4;
}
@media (max-height: 560px), (max-width: 560px) {
  #bag, #skills-panel, #keeper-panel, #shop-panel, #storage-panel, #pets-panel, #board-panel, #wardrobe-panel, #map-panel, #talk-panel, #trophy-panel, #quest-panel {
    top: var(--edge-top);
    max-height: calc(100vh - var(--edge-top) - 8px);
    max-height: calc(100dvh - var(--edge-top) - 8px);
  }
}
/* On a short screen, like a phone held sideways, the bag has two columns so you never have to scroll:
   your items on the left, and what you wear, your food and the chosen item on the right. */
@media (max-height: 560px) {
  #bag {
    width: min(560px, calc(100vw - 16px));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "title title" "grid worn" "grid food" "grid gem" "grid details";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 12px;
    align-content: start;
  }
  #bag-title { grid-area: title; }
  #bag-grid { grid-area: grid; align-self: start; grid-template-columns: repeat(5, 40px); }
  #bag-worn { grid-area: worn; margin-bottom: 4px; }
  #bag-food { grid-area: food; margin-bottom: 0; }
  #bag-gem { grid-area: gem; }
  #bag-details { grid-area: details; min-height: 0; margin-top: 4px; }
  #bag .bag-cell { width: 40px; height: 40px; }
  #bag .bag-cell canvas { width: 28px; height: 28px; }
}


/* ---------- Phones and tablets play best sideways ----------
   Held upright, the first screen shows a small tip with a turning phone. */
#turn-hint {
  display: none;
  align-items: center;
  gap: 10px;
  margin: -4px 0 14px;
  padding: 8px 12px;
  background: #fff6d6;
  border: 2px solid #f2cf6b;
  border-radius: 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}
@media (orientation: portrait) and (pointer: coarse) {
  #turn-hint { display: flex; }
}
#turn-hint svg { flex: none; width: 38px; height: 38px; fill: var(--ink); animation: turn-phone 2.4s ease-in-out infinite; }
#turn-hint rect { fill: #ffffff; stroke: var(--ink); stroke-width: 4; }
@keyframes turn-phone {
  0%, 25% { transform: rotate(0deg); }
  55%, 85% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

/* ---------- The first screen on a phone held sideways ----------
   Wide and short, so it fits without scrolling: name and PIN side by side,
   all eight heroes in one row, and the start button in the bottom right. */
@media (orientation: landscape) and (max-height: 560px) {
  #join {
    width: min(720px, calc(100vw - var(--edge-left) - var(--edge-right) - 16px));
    max-height: calc(100vh - 12px);
    padding: 10px 18px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title title"
      "name pin"
      "hint hint"
      "pick pick"
      "looks looks"
      "code code"
      "error start";
    column-gap: 14px;
    align-items: center;
  }
  #join h1 { grid-area: title; margin: 0 0 6px; font-size: 24px; }
  #join > label:nth-of-type(1) { grid-area: name; }
  #join > label:nth-of-type(2) { grid-area: pin; }
  #join > label { margin-bottom: 4px; text-align: left; }
  #join input { margin-top: 2px; padding: 6px; font-size: 16px; }
  #join .hint { grid-area: hint; margin: 0 0 6px; font-size: 13px; }
  #join .label { grid-area: pick; margin-bottom: 4px; }
  #looks { grid-area: looks; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 8px; }
  #looks button { padding: 3px; }
  #looks canvas { width: auto; height: 46px; margin: 0 auto; }
  #code-row { grid-area: code; }
  #join-error { grid-area: error; margin: 0; text-align: left; }
  #join-button { grid-area: start; padding: 8px; font-size: 18px; }
}

/* Your bag beside a shop window: it opens right next to it while you buy and sell. */
#carried-panel {
  position: absolute;
  z-index: 4;
  width: 232px;
  max-height: calc(100vh - var(--edge-top) - 140px);
  max-height: calc(100dvh - var(--edge-top) - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 8px;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--edge);
  border-radius: 16px;
  box-shadow: 0 0 0 3px #ffffff, 0 6px 18px rgba(58, 46, 79, 0.25);
  pointer-events: auto;
}
@media (max-height: 560px), (max-width: 560px) {
  #carried-panel { max-height: calc(100vh - var(--edge-top) - 8px); max-height: calc(100dvh - var(--edge-top) - 8px); }
}
.carried-title { font-weight: bold; color: #c9822b; margin-bottom: 4px; }
.carried-heading { font-size: 12px; font-weight: bold; color: var(--muted); margin: 6px 0 3px; }
.carried-grid { display: grid; grid-template-columns: repeat(5, 40px); gap: 3px; }
.carried-worn { display: flex; gap: 10px; }
.carried-worn-slot { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--muted); }
.carried-cell { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 2px solid #c9dcf0; border-radius: 8px; background: var(--slot, #eef6ff); cursor: pointer; }
.carried-worn .carried-cell { background: #fff0b8; }
.carried-cell canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.carried-count { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: bold; color: var(--ink);
  text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff; }
.carried-caption { margin: 6px 0 0; font-size: 12px; color: var(--ink); text-align: left; min-height: 2.4em; }

/* ---------- The Quest Board and Tilly's Wardrobe ---------- */
#board-title { color: #c9822b; }
#wardrobe-title { color: #a46be0; }
.board-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 8px; border-radius: 12px;
  background: #ffffff; box-shadow: inset 0 0 0 2px #dbe8f6; font-size: 13px; color: var(--muted); }
.board-row > div { flex: 1; min-width: 0; }
.board-row strong { display: block; color: var(--ink); }
.board-row span { display: block; }
.board-row .board-prize { margin-top: 2px; font-size: 12px; font-weight: bold; color: #c9822b; }
.board-row.done, .board-row.level, .board-row.catch, .board-row.pet { opacity: 0.6; }
.board-row.active { box-shadow: inset 0 0 0 3px #f4c95d; background: #fff8d6; }
.board-row button { flex: none; min-width: 92px; min-height: 36px; border: 2px solid var(--ink); border-radius: 12px;
  background: linear-gradient(#d6ffd9, #7fdc8a); color: var(--ink); font: inherit; font-weight: bold; cursor: pointer;
  touch-action: manipulation; }
.board-row button:disabled { background: #e3e7ee; color: #8a87a0; border-color: #c9c6d2; cursor: default; }
.board-active { margin: 4px 0 8px; box-shadow: inset 0 0 0 3px #f4c95d; background: #fff8d6; }
.board-active .quest-title { display: block; margin-bottom: 4px; }
.quest-cancel { margin-top: 6px; min-height: 32px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 12px;
  background: #ffffff; color: var(--ink); font: inherit; font-size: 13px; font-weight: bold; cursor: pointer; }
.quest-cancel.danger { background: #ff9fb2; color: #ffffff; }
.look-preview { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; background: #3a2e4f; font-size: 18px; font-weight: bold; }
.look-preview.title, .look-preview.petwear { background: #eef6ff; }
.look-preview.rainbow { background: linear-gradient(90deg, #ff6b6b, #ffd84a, #7dff8a, #5ee0ff, #c48bff); color: #ffffff !important; }
#bag-looks { margin-left: 4px; min-height: 30px; padding: 0 8px; border: 2px solid var(--ink); border-radius: 999px;
  background: linear-gradient(#fff0f7, #ffc9e0); color: var(--ink); font: inherit; font-size: 12px; font-weight: bold;
  cursor: pointer; touch-action: manipulation; }
.quest-note { margin: 4px 0; padding: 4px 6px; border-radius: 8px; background: #ffe0e5; color: #b0303f; font-size: 12px; font-weight: bold; }
.quest-task.timer .quest-bar > div { background: #ff9f43; }
/* The race clock, at the top in the middle. It turns red for the last 5 seconds. */
#race-clock { position: absolute; top: var(--edge-top); left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 4px 16px; border-radius: 999px; background: var(--cream); color: var(--ink); border: 3px solid #ff9f43;
  font-size: 20px; font-weight: bold; pointer-events: none; }
#race-clock.hurry { border-color: #e04a4a; color: #e04a4a; }
.quest-ready { margin: 4px 0; padding: 4px 6px; border-radius: 8px; background: #d6ffd9; color: #2f7a42; font-size: 12px; font-weight: bold; }
/* ---------- The map: where everyone is ---------- */
#map-panel { width: min(560px, calc(100vw - 16px)); }
#map-title { color: #2f8ac9; }
#map-where { color: var(--ink); font-weight: bold; }
.map-box { width: 100%; overflow-x: auto; touch-action: pan-x pan-y; }
.map-box canvas { display: block; margin: 6px auto 0; image-rendering: pixelated; border-radius: 10px; }
#world-canvas { cursor: pointer; image-rendering: auto; }
#area-title { display: block; margin-top: 4px; color: var(--ink); }
#area-people { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 13px; color: var(--muted); }
/* Online: pick your hero name from word lists. */
#name-pick-row { display: flex; gap: 6px; margin: 4px 0; }
#name-pick-row[hidden] { display: none; }
#name-pick-row select { flex: 1; min-width: 0; font: inherit; padding: 6px 4px; border-radius: 10px; border: 2px solid var(--edge); background: #ffffff; color: var(--ink); }
#name-pick-row select#name-number { flex: 0 0 64px; }
#name-dice { flex: 0 0 auto; font-size: 20px; padding: 0 10px; }
.link-button { background: none; border: none; box-shadow: none; color: #2f8ac9; text-decoration: underline; font-size: 13px; padding: 2px 0; cursor: pointer; }
/* "Your hero name is Brave Fox 23. Remember it!" */
#name-reminder { z-index: 20; }
#name-reminder p { margin: 6px 0; color: var(--ink); }
#reminder-name { font-size: 28px; font-weight: bold; color: #2f8ac9 !important; margin: 4px 0 10px !important; }