/* v0.8 isolated prototype: single shell header, no page scroll */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; font-family: sans-serif; background: #10182b; color: #f2ecd8; }
body { display: flex; flex-direction: column; }
#shell-header { display: flex; gap: 16px; align-items: center; height: 48px; padding: 0 14px; background: #0b1120; border-bottom: 2px solid #c9a227; }
#shell-header .brand { font-weight: bold; color: #e8c84a; }
#mode-nav button, button { cursor: pointer; background: #22304d; color: #f2ecd8; border: 1px solid #4a5f8a; border-radius: 6px; padding: 6px 10px; margin: 2px; }
button:hover { background: #2e4066; }
.view { display: flex; flex: 1; min-height: 0; }
.hidden { display: none !important; }
.panel { width: 220px; flex: 0 0 220px; overflow-y: auto; background: #16203a; padding: 10px; transition: margin .2s; }
.panel.left { margin-left: -220px; } .panel.left.open { margin-left: 0; }
.panel.right { margin-right: -220px; } .panel.right.open { margin-right: 0; }
#view-town .panel.left, #view-town .panel.right { margin: 0; flex-basis: 0; width: 0; padding: 0; overflow: hidden; }
#view-town .panel.left.open, #view-town .panel.right.open { flex-basis: 220px; width: 220px; padding: 10px; }
.stage-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
svg.stage { flex: 1; width: 100%; min-height: 0; background: #1a2748; }
.hint { margin: 6px 10px; font-size: 13px; color: #b9c2d8; }
.toolbar { padding: 6px; background: #0b1120; flex-wrap: wrap; }
.placeholder { margin: auto; text-align: center; max-width: 520px; }
/* ART-03 town: the adopted image itself is the town. The frame wraps the
   image exactly (the image decides the box), so the percent-positioned
   FX and hit layers inside stay aligned with the artwork at any size. */
#town-map { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #141b42; }
.town-frame { position: relative; width: fit-content; max-width: 100%; max-height: 100%; margin: auto; line-height: 0; }
.town-frame img#town-bg { display: block; width: 100%; height: auto; max-height: 100%; }
#town-fx, #town-pixi, #town-hits { position: absolute; inset: 0; line-height: normal; }
#town-fx { pointer-events: none; overflow: hidden; }
/* ART-04: the Pixi canvas (animation only) sits between the CSS FX layer
   and the hit areas. It never receives pointer events, so drawing and
   click handling stay separate layers. */
#town-pixi { pointer-events: none; overflow: hidden; }
#town-pixi canvas { display: block; }
.facility-hit { position: absolute; background: transparent; border: 2px solid transparent; border-radius: 10px; margin: 0; padding: 0; cursor: pointer; }
.facility-hit:hover { border-color: rgba(232, 200, 74, 0.65); background: rgba(232, 200, 74, 0.05); }
.facility-hit.selected { border-color: #e8c84a; background: rgba(232, 200, 74, 0.07); }
.facility-hit:focus-visible { outline: 3px solid #e8c84a; outline-offset: 1px; }
/* hit debug view: only when app.js sets .hit-debug from ?hitdebug=1 */
#town-map.hit-debug .facility-hit { border-color: rgba(255, 92, 92, 0.95); background: rgba(255, 0, 0, 0.13); }
#town-map.hit-debug .facility-hit::after { content: attr(data-facility); position: absolute; top: 2px; left: 2px; background: rgba(0, 0, 0, 0.78); color: #ffd166; font-size: 11px; line-height: 1.4; padding: 1px 5px; border-radius: 3px; }
/* FX layer (PHASE 3): restrained partial animation over the still image.
   Glow points twinkle on light sources already drawn in the image, two
   translucent bands drift over the bottom cloud sea, and white sparkles
   fall at the three waterfall mouths. No object is redrawn. */
.fx-glow { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 230, 150, 0.95) 0%, rgba(255, 200, 80, 0.35) 55%, rgba(255, 200, 80, 0) 75%); animation: fxTwinkle 3.8s ease-in-out infinite; pointer-events: none; }
.fx-cloud { position: absolute; left: -25%; width: 150%; pointer-events: none; }
.fx-cloud-a { bottom: 0; height: 13%; background: linear-gradient(to top, rgba(240, 238, 255, 0.30), rgba(240, 238, 255, 0)); animation: fxCloudDrift 30s ease-in-out infinite alternate; }
.fx-cloud-b { bottom: 0; height: 8%; background: linear-gradient(to top, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)); animation: fxCloudDrift 42s ease-in-out infinite alternate-reverse; }
.fx-fall { position: absolute; width: 0; height: 0; pointer-events: none; }
.fx-fall span { position: absolute; left: -2px; top: 0; width: 4px; height: 4px; border-radius: 50%; background: rgba(235, 248, 255, 0.95); animation: fxFall 2.4s linear infinite; opacity: 0; }
@keyframes fxTwinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes fxCloudDrift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
@keyframes fxFall { 0% { transform: translateY(0); opacity: 0; } 18% { opacity: 0.95; } 85% { opacity: 0.7; } 100% { transform: translateY(34px); opacity: 0; } }
/* motion toggle: stops every CSS animation in the app (FX included) */
body.motion-off * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fx-glow, .fx-cloud-a, .fx-cloud-b, .fx-fall span { animation: none !important; }
}
/* ART-02 mobile layout (max 640px): header wraps without clipping, the town
   map stays in the first viewport, panels become strips below the map. */
@media (max-width: 640px) {
  #shell-header { flex-wrap: wrap; height: auto; min-height: 48px; row-gap: 4px; column-gap: 8px; padding: 6px 8px; }
  #shell-header .brand { white-space: nowrap; font-size: 14px; }
  #discord-mode { display: none; }
  .view { flex-direction: column; }
  .panel, .panel.left, .panel.right { margin: 0; width: 100%; flex: 0 1 auto; max-height: 26%; }
  #view-town .panel.left.open, #view-town .panel.right.open { width: 100%; flex: 0 1 auto; max-height: 26%; padding: 10px; }
  #view-town .stage-wrap { order: -1; flex: 1 1 48%; min-height: 0; }
}
.obj { cursor: grab; }
.obj.selected { outline: none; stroke: #e8c84a !important; stroke-width: 3; }
/* ART-04 USER AVATAR (P0): town entrance + WORKSHOP avatar studio */
.town-actions { display: flex; gap: 10px; align-items: center; padding: 0 10px 8px; flex-wrap: wrap; }
#view-workshop.avatar-mode > aside, #view-workshop.avatar-mode > section.stage-wrap { display: none; }
#avatar-studio { flex: 1; display: flex; min-height: 0; }
#avatar-studio.hidden { display: none; }
.studio-main { flex: 1; display: flex; flex-direction: column; padding: 10px; min-width: 0; overflow-y: auto; }
.studio-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.studio-tabs button.active { background: #2e4066; border-color: #e8c84a; color: #ffd166; }
.editor-wrap { display: flex; gap: 14px; flex-wrap: wrap; }
#avatar-editor { width: 320px; height: 320px; max-width: 86vw; aspect-ratio: 1; background: #232c47; border: 1px solid #4a5f8a; border-radius: 6px; touch-action: none; cursor: crosshair; }
.editor-side { display: flex; flex-direction: column; gap: 8px; max-width: 300px; }
#avatar-palette { display: flex; flex-wrap: wrap; gap: 4px; max-width: 240px; }
.swatch { width: 26px; height: 26px; padding: 0; border-radius: 5px; border: 2px solid #4a5f8a; }
.swatch.selected { border-color: #ffd166; }
.swatch-transparent { background: repeating-conic-gradient(#3a4568 0% 25%, #232c47 0% 50%) 0 0 / 10px 10px !important; }
#avatar-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; }
.preset-item.selected { border-color: #ffd166; background: #2e4066; }
.preset-item canvas { image-rendering: pixelated; }
.studio-side { width: 300px; flex: 0 0 300px; overflow-y: auto; background: #16203a; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.studio-side label { display: block; font-size: 13px; }
.studio-side input[type="text"] { width: 100%; }
#avatar-preview { width: 276px; height: 200px; max-width: 100%; border: 1px solid #4a5f8a; border-radius: 6px; image-rendering: pixelated; background: #141b42; }
@media (max-width: 640px) {
  #avatar-studio { flex-direction: column; overflow-y: auto; }
  .studio-side { width: 100%; flex: 0 1 auto; }
}
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
.modal-box { background: #16203a; padding: 20px; border-radius: 10px; border: 1px solid #c9a227; }
#toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #22304d; padding: 8px 16px; border-radius: 8px; }
#facility-list li, #layer-list li { cursor: pointer; padding: 4px; }
#layer-list li.selected { background: #2e4066; }
input { background: #0b1120; color: #f2ecd8; border: 1px solid #4a5f8a; border-radius: 4px; padding: 4px; width: 90px; }
.note { font-size: 12px; color: #b9c2d8; }
.diff { font-family: monospace; white-space: pre-wrap; background: #0b1120; padding: 8px; border-radius: 6px; }
/* WORLD MODULE SYSTEM v0.1 - SEASON module: the time-of-day overlay sits
   inside .town-frame after the Pixi layer and before the hit areas
   (DOM order decides), never receives pointer events, and is removed
   from the DOM entirely while the effect is off. */
.season-overlay { position: absolute; inset: 0; pointer-events: none; transition: opacity .6s ease, background-color .6s ease; }
.module-controls { display: inline-flex; gap: 8px; align-items: center; }
.module-controls-label { font-size: 12px; color: #b9c2d8; }
.module-controls button.off { opacity: .55; }
.module-controls select { background: #0b1120; color: #f2ecd8; border: 1px solid #4a5f8a; border-radius: 4px; padding: 4px; }

/* HOME x CRAFT v0.1 - the resident's room is a full-screen overlay
   view managed by the module host (the CORE mode stays TOWN beneath
   it). The room stage uses Pointer Events for both mouse and touch;
   touch-action:none keeps drags from scrolling the page. */
#view-home { position: fixed; inset: 0; z-index: 40; background: #0b1120; overflow: auto; padding: 14px; box-sizing: border-box; }
#view-home.hidden { display: none; }
.room-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.room-head h2 { margin: 0; }
.room-body { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.room-stage-wrap { flex: 1 1 480px; min-width: 300px; }
.room-stage { width: 100%; height: auto; background: #141f3a; border: 1px solid #4a5f8a; border-radius: 10px; touch-action: none; }
.room-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.room-side { flex: 0 1 320px; min-width: 240px; }
.room-furniture { cursor: grab; }
.room-furniture.drag-ok { opacity: .85; }
.room-furniture.drag-bad { opacity: .45; }
.craft-panel { margin-top: 14px; border-top: 1px solid #4a5f8a; padding-top: 8px; }
.craft-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 3px 0; }
.craft-row-title { font-size: 13px; flex: 1 1 120px; }
.craft-preview { width: 100%; height: auto; background: #f5f0dc; border: 1px solid #4a5f8a; border-radius: 6px; }
@media (max-width: 700px) {
  #view-home { padding: 8px; }
  .room-side { flex-basis: 100%; }
}

/* LAND x BUILD v0.1 - the resident's plot is a full-screen overlay
   view managed by the module host, like the room. All operations are
   button-driven (no drag required) so PC and touch work the same.
   The house drawing is simple code-drawn SVG, a placeholder
   visualization of the pinned catalog ids - not finished art. */
#view-land { position: fixed; inset: 0; z-index: 40; background: #0b1120; overflow: auto; padding: 14px; box-sizing: border-box; }
#view-land.hidden { display: none; }
.land-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.land-head h2 { margin: 0; }
.land-body { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.land-stage-wrap { flex: 1 1 520px; min-width: 300px; }
.land-stage { width: 100%; height: auto; background: #141f3a; border: 1px solid #4a5f8a; border-radius: 10px; }
.land-side { flex: 0 1 340px; min-width: 260px; }
.land-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
#land-house { cursor: pointer; }
.land-demolish-confirm { border: 1px solid #c9552e; border-radius: 6px; padding: 8px; margin: 8px 0; }
.build-panel { margin-top: 14px; border-top: 1px solid #4a5f8a; padding-top: 8px; }
.build-panel.hidden { display: none; }
#build-preview { width: 100%; height: auto; background: #101736; border: 1px solid #4a5f8a; border-radius: 6px; }
.build-row { display: flex; gap: 6px; align-items: center; padding: 3px 0; }
.build-row label { flex: 0 0 96px; font-size: 13px; }
.build-row select { flex: 1 1 auto; background: #0b1120; color: #f2ecd8; border: 1px solid #4a5f8a; border-radius: 4px; padding: 4px; min-width: 0; }
.build-seed-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 3px 0; }
@media (max-width: 700px) {
  #view-land { padding: 8px; }
  .land-side { flex-basis: 100%; }
}