/* ——— Palace: castle map, rooms, and the decorating canvas ——— */

/* Treasures are anchored at their center so they can turn. */
.room-item {
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scaleX(var(--flip, 1));
  transform-origin: 50% 50%;
}
.room-item.dragging {
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scaleX(var(--flip, 1)) scale(1.08);
  filter: drop-shadow(0 2.4cqw 1.4cqw rgba(60, 20, 60, 0.3));
}
.room-item.selected { outline: none; }
.room-item.selected span,
.room-item.dragging span { animation: none; }
.room-item.dropped span { animation: drop-in 0.7s var(--bounce); }
.room-item.legend span {
  filter: drop-shadow(0 0 1.1cqw rgba(255, 205, 70, 0.95)) drop-shadow(0 0 0.35cqw #fff);
  animation: item-idle 3.5s ease-in-out infinite, legend-glow 1.8s ease-in-out infinite alternate;
}
.room-items { z-index: 2; }
.feature { position: absolute; z-index: 1; pointer-events: none; }

/* ——— Castle map ——— */

.palace-head { display: flex; align-items: flex-end; gap: 10px; margin: 30px 0 4px; }
.castle { max-width: 980px; margin: 0 auto; }
.castle-body {
  position: relative;
  padding: 18px 18px 26px;
  border: 5px solid #fff;
  border-radius: 6px 6px 30px 30px;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(200, 120, 170, 0.16) 26px 28px),
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(200, 120, 170, 0.12) 54px 56px),
    linear-gradient(#ffe8f3, #f8cfe4);
  box-shadow: 0 10px 0 #edc0d8, var(--shadow);
}
.castle-body::before {
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: 100%;
  height: 22px;
  background: linear-gradient(90deg, #fff 0 4px, #ffe8f3 4px calc(100% - 4px), #fff calc(100% - 4px)) 0 0 / 48px 100%;
  -webkit-mask: linear-gradient(90deg, #000 50%, transparent 50%) 0 0 / 48px 100%;
  mask: linear-gradient(90deg, #000 50%, transparent 50%) 0 0 / 48px 100%;
}
.castle-floor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.castle-floor + .castle-floor { margin-top: 14px; padding-top: 14px; border-top: 6px solid rgba(255, 255, 255, 0.85); }
.castle-door {
  width: 70px;
  height: 46px;
  margin: 14px auto -26px;
  border: 4px solid #fff;
  border-bottom: none;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, #c98a5a 0 49%, #8a5a3a 49% 51%, #c98a5a 51%);
}

/* Full screen, like the Village (css/village.css): the sky fills the window,
   the castle scrolls up and down inside it, and the Village's title chip and
   dock float on top (.vg-imm .vg-head, .vg-dock). The castle starts below the
   chip and scrolls clear of the dock. */
.view-palace { animation: fade-in 0.5s ease; } /* no transform: the castle is fixed to the window */
.pl-imm { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.pl-imm .pl-world { position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.pl-scroll {
  --hud-top: calc(env(safe-area-inset-top) + 80px);
  --chip: 100px; /* the title chip's height */
  --dock: calc(env(safe-area-inset-bottom) + 100px);
  position: relative; z-index: 1; height: 100%;
  overflow: hidden auto; overscroll-behavior: contain;
  padding: calc(var(--hud-top) + var(--chip) + 8px) max(16px, env(safe-area-inset-right)) var(--dock) max(16px, env(safe-area-inset-left));
}
/* Wide windows keep the castle castle-shaped (sky on both sides), not a long wall. */
.pl-imm .castle { width: min(100%, 980px, max(600px, 90dvh)); }
.pl-imm .lp-garden { margin-inline: -12px; }
.pl-imm .lp-grow-note {
  width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 6px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.84); box-shadow: 0 6px 18px rgba(91, 58, 110, 0.14);
}
@media (max-width: 760px) {
  .pl-scroll { --hud-top: calc(env(safe-area-inset-top) + 72px); --chip: 74px; --dock: calc(env(safe-area-inset-bottom) + 92px); }
  .pl-imm .lp-garden { margin-inline: -6px; }
  .pl-imm .lp-grow-note { font-size: 14px; }
}
/* Short screens (a phone on its side): the dock stands on the right. */
@media (max-height: 520px) {
  .pl-scroll { --hud-top: calc(env(safe-area-inset-top) + 64px); --chip: 52px; --dock: calc(env(safe-area-inset-bottom) + 16px); padding-right: calc(env(safe-area-inset-right) + 92px); }
}

.room-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 7px 9px;
  border: 3px solid #fff;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75);
  text-align: center;
  box-shadow: 0 5px 0 rgba(220, 160, 195, 0.5);
  transition: transform 0.15s var(--bounce);
}
button.room-card:hover { transform: translateY(-4px) rotate(-0.6deg); }
button.room-card:active { transform: scale(0.97); }
.mini-wrap { position: relative; }
.room.mini {
  width: 100%;
  border-width: 3px;
  border-radius: 14px;
  box-shadow: none;
  pointer-events: none;
}
.room.mini .room-item span { animation: none; }
.room-label { font-size: 16px; font-weight: 600; line-height: 1.2; }
.room-count { font-size: 13px; color: var(--ink-soft); }
.room-card.locked .room.mini { filter: grayscale(0.75) brightness(0.92); }
.room-card.locked:not(.next) { opacity: 0.75; }
.lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 14px;
  background: rgba(255, 245, 250, 0.45);
}
.lock { font-size: clamp(22px, 4vw, 36px); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.15)); }
.room-card.next .lock { animation: lock-wiggle 2.4s ease-in-out infinite; }
.lock-overlay small { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.unlock-btn {
  padding: 6px 12px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #f2e9f0;
  color: #8a6f86;
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 700;
  box-shadow: 0 4px 0 #e2d2de;
}
.unlock-btn.ready {
  background: linear-gradient(180deg, #ffe58f, #ffc53d);
  color: #6b4300;
  box-shadow: 0 4px 0 var(--gold-deep);
  animation: pulse 1.2s ease-in-out infinite;
}

/* ——— Room features ——— */

.feature.porthole {
  left: 50%;
  top: 9%;
  width: 22%;
  aspect-ratio: 1;
  translate: -50% 0;
  border: 1.4cqw solid #fff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 32%, #fffbe0 0 12%, transparent 13%),
    radial-gradient(circle at 28% 62%, #fff 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 52% 78%, #fff 0 1.8%, transparent 2.8%),
    radial-gradient(circle at 40% 30%, #fff 0 1.5%, transparent 2.5%),
    linear-gradient(#2d2a6b, #5b4aa0);
  box-shadow: inset 0 0 0 0.5cqw #f6d6e8, 0 0.7cqw 1.4cqw rgba(0, 0, 0, 0.15);
}
.feature.arches { left: 8%; right: 8%; top: 8%; height: 50%; display: flex; justify-content: space-between; }
.feature.arches span {
  width: 27%;
  height: 100%;
  border: 1.2cqw solid #fff;
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 28% 28% 0 0;
  background:
    radial-gradient(ellipse at 30% 30%, #fff 0 10%, transparent 11%),
    linear-gradient(#9fd8ff 0 62%, #8fd97a 62%);
  box-shadow: 0 0.6cqw 1.2cqw rgba(0, 0, 0, 0.12);
}
.feature.stage { inset: 0 0 30% 0; }
.feature.stage .drape {
  position: absolute;
  top: 0;
  width: 14%;
  height: 100%;
  background: repeating-linear-gradient(90deg, #e24a84 0 1.6cqw, #c7336a 1.6cqw 3.2cqw);
  box-shadow: 0 0 1.4cqw rgba(0, 0, 0, 0.25);
}
.feature.stage .drape.l { left: 0; border-radius: 0 0 70% 0 / 0 0 22% 0; }
.feature.stage .drape.r { right: 0; border-radius: 0 0 0 70% / 0 0 0 22%; }
.feature.stage .valance {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 11%;
  background:
    radial-gradient(ellipse at 50% 0, #d93d76 0 68%, transparent 70%) 0 100% / 8cqw 55% repeat-x,
    linear-gradient(#d93d76, #d93d76) 0 0 / 100% 50% no-repeat;
  border-top: 0.8cqw solid #ffcf4d;
}
.feature.awning {
  left: 0;
  right: 0;
  top: 0;
  height: 15%;
  background: repeating-linear-gradient(90deg, #ff8fbf 0 5cqw, #fff 5cqw 10cqw);
  -webkit-mask: radial-gradient(circle at 50% 0, #000 68%, transparent 70%) 0 100% / 5cqw 3cqw repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 3cqw) no-repeat;
  mask: radial-gradient(circle at 50% 0, #000 68%, transparent 70%) 0 100% / 5cqw 3cqw repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 3cqw) no-repeat;
  filter: drop-shadow(0 0.5cqw 0.5cqw rgba(0, 0, 0, 0.12));
}
.feature.bunting {
  left: 0;
  right: 0;
  top: 5%;
  height: 8%;
  background:
    linear-gradient(#c9a227, #c9a227) 0 0 / 100% 0.35cqw no-repeat,
    conic-gradient(from 162deg at 50% 0, #ff9cc8 0 36deg, transparent 0) 0 0.35cqw / 8cqw 100% repeat-x,
    conic-gradient(from 162deg at 50% 0, #b89aff 0 36deg, transparent 0) 4cqw 0.35cqw / 8cqw 100% repeat-x;
}

/* ——— New wallpapers and floors ——— */

.wall-scallop .wall {
  background:
    radial-gradient(circle at 50% 0, #ffd1e3 0 46%, transparent 48%) 0 0 / 6cqw 4cqw,
    radial-gradient(circle at 50% 0, #ffe6f0 0 46%, transparent 48%) 3cqw 2cqw / 6cqw 4cqw,
    #fff7fa;
}
.wall-books .wall {
  background:
    repeating-linear-gradient(0deg, #9a6440 0 1.3cqw, transparent 1.3cqw 15cqw),
    repeating-linear-gradient(90deg, #ff9cc8 0 2.2cqw, #b89aff 2.2cqw 3.8cqw, #8fd3ff 3.8cqw 5.6cqw, #ffe27a 5.6cqw 7cqw, #9ff0d3 7cqw 8.8cqw, #ffb38a 8.8cqw 10cqw),
    #b97a52;
}
.wall-paws .wall {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='%23f2b8d2'%3E%3Cellipse cx='16' cy='20' rx='6' ry='5'/%3E%3Ccircle cx='9' cy='12' r='2.4'/%3E%3Ccircle cx='14' cy='9' r='2.4'/%3E%3Ccircle cx='19' cy='9' r='2.4'/%3E%3Ccircle cx='24' cy='12' r='2.4'/%3E%3Cg transform='translate(28 28)'%3E%3Cellipse cx='16' cy='20' rx='6' ry='5'/%3E%3Ccircle cx='9' cy='12' r='2.4'/%3E%3Ccircle cx='14' cy='9' r='2.4'/%3E%3Ccircle cx='19' cy='9' r='2.4'/%3E%3Ccircle cx='24' cy='12' r='2.4'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 9cqw 9cqw,
    #fff6ec;
}
.wall-notes .wall {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='%23b89aff'%3E%3Cellipse cx='14' cy='26' rx='5' ry='3.6' transform='rotate(-20 14 26)'/%3E%3Crect x='17.5' y='8' width='1.8' height='18'/%3E%3Cpath d='M19 8c5 2 7 5 6 10-1-3-3-5-6-5z'/%3E%3Cellipse cx='40' cy='50' rx='5' ry='3.6' transform='rotate(-20 40 50)'/%3E%3Cellipse cx='52' cy='46' rx='5' ry='3.6' transform='rotate(-20 52 46)'/%3E%3Crect x='43.5' y='33' width='1.8' height='17'/%3E%3Crect x='55.5' y='29' width='1.8' height='17'/%3E%3Cpath d='M43.5 33l13.8-4v3l-13.8 4z'/%3E%3C/svg%3E") 0 0 / 10cqw 10cqw,
    #f6f0ff;
}
.wall-velvet .wall {
  background:
    radial-gradient(circle, rgba(255, 215, 90, 0.35) 0 14%, transparent 16%) 0 0 / 6cqw 6cqw,
    radial-gradient(circle, rgba(255, 215, 90, 0.2) 0 9%, transparent 11%) 3cqw 3cqw / 6cqw 6cqw,
    linear-gradient(#c43a74, #93265a);
}
.floor-tiles .floor { background: conic-gradient(#cfe7ff 0 25%, #fff 0 50%, #cfe7ff 0 75%, #fff 0) 0 0 / 6cqw 6cqw; }
.floor-parquet .floor {
  background:
    repeating-linear-gradient(45deg, transparent 0 2.8cqw, rgba(120, 70, 30, 0.18) 2.8cqw 3cqw),
    repeating-linear-gradient(-45deg, #dca46b 0 3cqw, #c98f56 3cqw 6cqw);
}
.floor-redcarpet .floor {
  background:
    linear-gradient(90deg, transparent 0 24%, #ffcf4d 24% 26%, #c8234f 26% 74%, #ffcf4d 74% 76%, transparent 76%),
    conic-gradient(#f3e2c9 0 25%, #ead3b3 0 50%, #f3e2c9 0 75%, #ead3b3 0) 0 0 / 7cqw 7cqw;
}
.floor-starry .floor {
  background:
    radial-gradient(circle, #fff 0 0.3cqw, transparent 0.4cqw) 0 0 / 5cqw 4cqw,
    radial-gradient(circle, #ffe27a 0 0.25cqw, transparent 0.35cqw) 2.5cqw 2cqw / 5cqw 4cqw,
    linear-gradient(#433488, #2a2160);
}
.floor-goldtile .floor { background: conic-gradient(#fff4c8 0 25%, #ffe08a 0 50%, #fff4c8 0 75%, #ffe08a 0) 0 0 / 8cqw 8cqw; }

/* ——— Room editor ——— */

.editor { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.editor-head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; }
.editor-head h1 { font-size: clamp(26px, 5vw, 38px); text-align: center; }
.editor-main { display: flex; flex-direction: column; gap: 12px; }
.canvas-wrap { position: relative; }
.editor .room.editable {
  width: 100%;
  max-width: none;
  margin: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.editable .room-item { transition: none; cursor: grab; }
.room.drop-ok { outline: 6px dashed var(--mint); outline-offset: -10px; }
.canvas-hint {
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 3;
  translate: -50% 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow);
  pointer-events: none;
  animation: bob 2.4s ease-in-out infinite;
}

.sel-frame {
  position: absolute;
  z-index: 100000;
  border: 0.35cqw dashed var(--pink);
  border-radius: 1.2cqw;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  pointer-events: none;
}
.sel-handle {
  position: absolute;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 3px solid var(--pink);
  border-radius: 50%;
  background: #fff;
  color: var(--pink-deep);
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
.sel-handle.resize { left: 100%; top: 100%; transform: translate(-50%, -50%); cursor: nwse-resize; }
.sel-handle.turn { left: 50%; top: 0; transform: translate(-50%, -150%); }

.chest-items { display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px 10px; scrollbar-width: thin; }
.chest-item {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 18px;
  background: #fff;
  font-size: 38px;
  box-shadow: 0 4px 0 #ecd6e6;
  touch-action: pan-x;
  cursor: grab;
}
.chest-item b {
  position: absolute;
  top: -7px;
  right: -6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 13px;
}
.chest-item.legend { border-color: #ffd86b; box-shadow: 0 4px 0 #e0a800, 0 0 14px rgba(255, 200, 60, 0.6); }
.chest-item.glow { outline: 4px solid var(--gold); outline-offset: 2px; animation: pulse 0.9s ease-in-out 5; }
.drag-ghost {
  position: fixed;
  z-index: 90;
  font-size: 64px;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.1);
  filter: drop-shadow(0 10px 8px rgba(60, 20, 60, 0.3));
}

/* ——— Room editor, full screen ———
   The page stops scrolling: the room fills what's left of the window, the chest
   is docked under it (tall screens) or beside it (wide ones), and the request
   card and the treasure tools float on the room itself. */

body:has(.view-room) { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
body:has(.view-room) .topbar { flex: none; width: 100%; padding-bottom: 6px; }
body:has(.view-room) .screen {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: 0 12px calc(10px + env(safe-area-inset-bottom));
}
.view-room { height: 100%; }
.view-room .editor {
  height: 100%;
  margin: 0;
  display: grid;
  /* Tall screens: the room is as wide as the window, and the chest takes what's left. */
  grid-template: 'head' auto 'stage' minmax(0, calc((100vw - 24px) * 0.75 + 14px)) 'dock' minmax(110px, 1fr) / minmax(0, 1fr);
  gap: 8px;
}
.view-room .editor-head { grid-area: head; gap: 6px 10px; }
.view-room .editor-head h1 { font-size: clamp(22px, 3.6vw, 30px); white-space: nowrap; }
.view-room .editor-head .tool { padding: 6px 12px; font-size: 16px; }

.editor-stage { grid-area: stage; min-height: 0; display: grid; place-items: center; container-type: size; }
.view-room .canvas-wrap { width: min(100cqw, (100cqh - 14px) * 4 / 3); }

/* The request: a small card on the room's corner; tap it to see what's needed. */
.view-room .rq-card {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  width: min(360px, calc(100% - 24px));
  padding: 6px 10px 6px 6px;
  border-width: 3px;
  box-shadow: 0 6px 18px rgba(80, 40, 90, 0.22);
}
.view-room .rq-card.open { padding: 8px 10px 10px 8px; }
.view-room .rq-card.done { display: none; }
/* The treasure tools take the top of the room while they're up there. */
.canvas-wrap:has(.room-tools.up:not([hidden])) .rq-card { visibility: hidden; }
.view-room .rq-card:not(.open) :is(.rq-needs, .rq-ready) { display: none; }
.view-room .rq-card .rq-face { width: 42px; height: 42px; font-size: 26px; }
.view-room .rq-head p { flex: 1; font-size: 15px; }
.view-room .rq-card:not(.open) .rq-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-room .rq-needs { margin-top: 8px; }
.view-room .rq-need { font-size: 15px; }
.rq-progress { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--lilac-soft); font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.rq-progress i { font-style: normal; font-size: 12px; }

/* The selected treasure's tools float at the room's bottom (or top, if it's down low). */
.view-room .room-tools {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 7;
  width: max-content;
  max-width: calc(100% - 20px);
  min-height: 0;
  margin: 0;
  padding: 6px;
  translate: -50% 0;
  flex-wrap: wrap;
  gap: 4px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(80, 40, 90, 0.25);
  animation: view-in 0.3s var(--bounce);
}
.view-room .room-tools.up { top: 14px; bottom: auto; }
.view-room .room-tools .tool {
  min-width: 54px;
  padding: 4px 6px 3px;
  display: grid;
  justify-items: center;
  gap: 1px;
  border-radius: 16px;
  font-size: 20px;
  line-height: 1.1;
  box-shadow: 0 3px 0 #ecd6e6;
}
.view-room .room-tools .tool i { font-style: normal; }
.view-room .room-tools .tool small { font-size: 11px; font-weight: 700; white-space: nowrap; }
.view-room .room-tools .tool.done { box-shadow: 0 3px 0 var(--mint-deep); }

/* The dock: chest, paint, walls & floors, one at a time. */
.editor-dock {
  grid-area: dock;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 6px;
  border-radius: 24px;
  border: 4px solid #fff;
  background: var(--card);
  box-shadow: var(--shadow);
}
.dock-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.dock-tab {
  padding: 5px 14px;
  border-radius: 999px;
  border: 3px solid #fff;
  background: var(--lilac-soft);
  box-shadow: 0 3px 0 #dccdf6;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.dock-tab.on { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--pink-deep); }
.dock-tab.glow { animation: pulse 0.8s ease-in-out 2; }
.dock-pane { flex: 1; min-height: 72px; }
.editor-dock .chest-items {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 2), var(--tile, 64px));
  grid-auto-columns: var(--tile, 64px);
  align-content: start;
  gap: 8px;
  padding: 8px 4px;
  overflow: auto hidden;
}
.editor-dock .chest-item { width: var(--tile, 64px); height: var(--tile, 64px); font-size: calc(var(--tile, 64px) * 0.6); }
.editor-dock .chest-item .t-icon { width: calc(var(--tile, 64px) - 14px); height: calc(var(--tile, 64px) - 14px); }
.editor-dock .chest-items > p { grid-row: 1 / -1; align-self: center; white-space: nowrap; }
.editor-dock .decor-row { flex-wrap: nowrap; align-items: flex-start; padding: 8px 4px; overflow: auto hidden; }
.editor-dock .decor-row > * { flex: none; }
.editor-dock .paint-panel { padding: 2px 4px; overflow: hidden auto; }
.editor-dock .paint-panel h3 { margin-bottom: 6px; font-size: 16px; }
.editor-dock .paint-panel h3 small { display: inline; margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.editor-dock .paint-row { flex-wrap: nowrap; margin-bottom: 4px; padding: 6px 6px 8px; overflow: auto hidden; }
.editor-dock .paint-row > * { flex: none; }

/* Short screens (phones on their side): one row of treasures. */
@media (max-height: 640px) {
  .view-room .editor-head .tool-word { display: none; }
}
@media (max-width: 560px) {
  .view-room .editor-head .tool-word { display: none; }
  .dock-tab { padding: 4px 11px; font-size: 15px; }
}

/* Wide screens (iPad landscape, laptops): the dock stands beside the room. */
@media (min-width: 900px) and (min-aspect-ratio: 5 / 4) {
  .view-room .editor {
    grid-template: 'head head' auto 'stage dock' minmax(0, 1fr) / minmax(0, 1fr) clamp(240px, 24vw, 330px);
  }
  .editor-dock .chest-items {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(auto-fill, var(--tile, 64px));
    grid-auto-rows: var(--tile, 64px);
    justify-content: center;
    overflow: hidden auto;
  }
  .editor-dock .chest-items > p { grid-row: auto; grid-column: 1 / -1; white-space: normal; }
  .editor-dock .chest-item { touch-action: pan-y; }
  .editor-dock .decor-row { flex-wrap: wrap; align-content: flex-start; overflow: hidden auto; }
  .editor-dock .paint-row { flex-wrap: wrap; overflow: visible; }
}

/* Sent to the shop for one thing: it glows. */
.item-card.glow { outline: 5px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 0 10px rgba(255, 197, 61, 0.3), var(--shadow); animation: pulse 0.9s ease-in-out 0.9s 3; }

/* ——— Shop extras ——— */

.item-card.legend { border-color: #ffd86b; background: linear-gradient(180deg, #fffaf0, #fff1c9); box-shadow: 0 6px 0 #f0c64f, 0 0 22px rgba(255, 200, 60, 0.45); }
.item-card.legend .item-emoji { background: radial-gradient(circle at 50% 40%, #fff 0 38%, #ffe7a3 100%); animation: legend-glow 1.8s ease-in-out infinite alternate; }
.grid-note { grid-column: 1 / -1; font-size: 16px; color: var(--ink-soft); }

@keyframes legend-glow { from { filter: drop-shadow(0 0 4px rgba(255, 205, 70, 0.6)); } to { filter: drop-shadow(0 0 14px rgba(255, 205, 70, 1)); } }
@keyframes lock-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }

@media (max-width: 640px) {
  .palace-head { margin-top: 64px; }
  .palace-mascot .mascot { width: 84px; }
  .palace-mascot .mascot-bubble { left: 0; bottom: 98%; max-width: 220px; }
  .palace-mascot .mascot-bubble::after { left: 30px; }
  .castle-body { padding: 10px 8px 22px; }
  .castle-floor { gap: 7px; }
  .castle-floor + .castle-floor { margin-top: 8px; padding-top: 8px; }
  .room-card { padding: 4px 4px 6px; border-radius: 14px; }
  .room-label { font-size: 12px; }
  .room-count { font-size: 11px; }
  .unlock-btn { padding: 2px 7px; font-size: 11px; border-width: 2px; }
  .room-card.next .lock { display: none; }
  .lock-overlay small { font-size: 10px; }
  .chest-item { width: 56px; height: 56px; font-size: 32px; }
  .canvas-hint { font-size: 14px; white-space: normal; width: 80%; text-align: center; }
}