/* Landscape. Reference screen 812x375 (a phone on its side); the layout stretches for PC. */
:root { --safe-top: env(safe-area-inset-top, 0px); --roomw: calc(min(100vw, 480px) - 10px); --cell: calc((var(--roomw) - 4px) / 45); --hero-h: calc(18 * var(--cell)); --bg: #14111a; --panel: #231d2e; --ink: #e9e4f0; --ally: #3b6fb0; --enemy: #9a3b3b; --hit: #f2c14e; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: system-ui, sans-serif; overscroll-behavior: none; }
html, body { overflow: hidden; }
/* The game is landscape only. --W and --H are the game's own width and height; a phone held upright
   gets the whole game turned sideways instead of a "rotate your phone" screen. */
:root { --W: 100vw; --H: 100dvh; }
main { width: var(--W); height: var(--H); display: flex; flex-direction: column; padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
@media (orientation: portrait) {
  :root { --W: 100dvh; --H: 100vw; }
  main { position: fixed; top: 0; left: 100vw; transform-origin: top left; transform: rotate(90deg); }
}

/* Top bar: one slim line of info. */
#top { flex: none; height: 36px; display: flex; align-items: center; padding: 0 12px; background: #1c1624; border-bottom: 2px solid #000; }
#note { margin: 0; font-size: .8rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#view { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.screen { height: 100%; }
.screen[hidden] { display: none !important; }
.pips { display: flex; gap: 2px; }
.pip { width: 9px; height: 6px; border-radius: 1px; background: #3a2f3f; }
.pip.on { background: #d33a3a; }

/* Dungeon map page: rooms on a small grid, corridors as lines. Guild intel is drawn faint and dashed. */
.plan { position: absolute; inset: 0; display: flex; gap: 10px; padding: 10px; background: #0f0c14; }
.map { position: relative; flex: 1; min-width: 0; border: 2px solid #000; border-radius: 6px; background: radial-gradient(#2a2233, #15111b); }
.map .links { position: absolute; inset: 0; width: 100%; height: 100%; }
.map line { stroke: #4a3d33; stroke-width: 5; }
.node { position: absolute; translate: -50% -50%; display: grid; place-items: center; border: 2px solid #000; color: var(--ink); font-style: normal; line-height: 1; }
.node.big { width: 40px; height: 40px; border-width: 3px; border-radius: 6px; background: #3a2f3f; font-size: 1.05rem; }
.node.tile { width: 15px; height: 15px; border-radius: 3px; background: #4a3d33; font-size: .6rem; }
.node.fight { background: #6a2b2b; }
.node.camp { background: #6a4a22; }
.node.curio, .node.treasure { background: #4b3f6b; }
.node.trap { background: #6b5a22; }
.node.uncharted { background: #2f5f5a; }
.node.exit { background: #2f4f6b; }
.node.start { background: #3f5f3a; }
.node.done:not(.exit):not(.start) { background: #2a2330; }
.node.intel { background: rgba(58,47,63,.5); border-style: dashed; border-color: #6b5f78; color: #c9bcd8; }
.node.intel.fight { background: rgba(106,43,43,.45); }
.node.intel.trap { background: rgba(107,90,34,.45); }
.map .you { display: none; }
.brief { flex: none; width: 230px; display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 2px solid #000; border-radius: 6px; background: var(--panel); font-size: .78rem; overflow: auto; }
.brief p { margin: 0; opacity: .85; }
.brief .roster { display: flex; justify-content: space-between; align-items: flex-end; --cell: 1.6px; }
.brief .pick { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; line-height: 1.1; }
.brief .pick small { font-size: .62rem; opacity: .8; }
.brief button { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 3px solid #000; border-radius: 6px; background: #2f6b46; color: #fff; text-align: left; }
.brief small { opacity: .8; }
/* The same map, small, in the corner of the walking view, with a dot for the party. */
.minimap { position: absolute; right: 8px; top: 8px; z-index: 5; width: 150px; height: 76px; opacity: .9; }
.minimap .map { position: absolute; inset: 0; border-width: 1px; background: rgba(15,12,20,.75); }
.minimap .map line { stroke-width: 2; }
.minimap .node { border-width: 1px; }
.minimap .node.big { width: 9px; height: 9px; border-width: 1px; border-radius: 2px; }
.minimap .node.tile { width: 4px; height: 4px; border-width: 0; border-radius: 1px; }
.minimap .you { display: block; position: absolute; width: 7px; height: 7px; translate: -50% -50%; border-radius: 50%; background: var(--hit); box-shadow: 0 0 0 2px #000; z-index: 2; }

/* Walk cycle: each hero is a strip of frames; the .gait box shows one at a time. */
.gait { display: block; overflow: hidden; }
.gait svg { display: block; }
.walk.walking .gait svg { animation: gait .9s steps(var(--frames)) infinite; animation-delay: var(--delay, 0s); }
@keyframes gait { to { transform: translateX(-100%); } }

/* Dungeon: side view of the party walking. One art pixel is --cell screen pixels (set in dungeon.js). */
#dungeon { position: relative; background: #0c1418; }
.walk { position: absolute; inset: 0; overflow: hidden; }
.walk .layer { position: absolute; inset: 0; background-repeat: repeat-x; background-size: auto 100%; image-rendering: pixelated; }
.walk .alt { opacity: 0; transition: opacity .6s; }
.walk.in-room .alt { opacity: 1; }
.walk .front { z-index: 4; pointer-events: none; }
.troupe { position: absolute; left: 6%; bottom: var(--floor); z-index: 3; display: flex; align-items: flex-end; gap: calc(2 * var(--cell)); }
.troupe .hero, .ahead > div { position: relative; line-height: 0; }
.troupe .hero svg, .ahead svg { display: block; }
.troupe .pips { position: absolute; left: 50%; bottom: calc(-4 * var(--cell)); translate: -50% 0; }
.ahead { position: absolute; right: 8%; bottom: var(--floor); z-index: 3; display: flex; align-items: flex-end; gap: calc(2 * var(--cell)); }
.ahead .foe svg { transform: scaleX(-1); }
.ahead .prop { margin-right: 10%; }
.actions { position: absolute; right: 10px; top: 10px; z-index: 5; display: flex; gap: 8px; }
.actions button { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 3px solid #000; border-radius: 6px; background: #2f6b46; color: #fff; text-align: left; animation: pulse .8s infinite alternate; }
.actions small { opacity: .8; font-size: .7rem; }
@keyframes pulse { to { box-shadow: 0 0 0 5px rgba(242,193,78,.35); } }
.toast { position: absolute; left: 50%; top: 12px; z-index: 5; translate: -50% 0; padding: 6px 12px; border: 2px solid #000; border-radius: 6px; background: rgba(20,17,26,.9); font-size: .8rem; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; }
.toast.on { opacity: 1; }

/* Battle: two Darkest Dungeon-style lines facing each other. Rank 1 stands nearest the middle. */
/* One art pixel fits both the height (42-row figures plus name and pips) and the width (4 figures of 22 per side). */
#battle { display: flex; flex-direction: column; --cell: min(calc((var(--H) - 36px - 96px - 60px) / 42), calc((var(--W) / 2 - 70px) / 102)); }
#board {
  flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 8px 16px 6px;
  background: #0c1418; background-repeat: repeat-x; background-size: auto 100%; background-position: center bottom; image-rendering: pixelated;
}
.side { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
#ally { justify-content: flex-end; }
#enemy { justify-content: flex-start; }
.unit { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; border: 2px solid transparent; border-radius: 6px; background: none; color: var(--ink); touch-action: manipulation; }
.unit .body { line-height: 0; }
.unit .body svg { display: block; }
.unit.enemy .body svg { transform: scaleX(-1); }
.unit .name { font-size: .7rem; font-weight: 600; white-space: nowrap; }
.unit .fxrow { display: flex; gap: 2px; min-height: 15px; }
.unit .fx { position: relative; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 3px; font-size: .55rem; font-style: normal; font-weight: 700; background: #555; }
.unit .fx sub { position: absolute; right: 1px; bottom: 0; font-size: .45rem; line-height: 1; }
.unit .fx.poison { background: #4a8f3a; }
.unit .fx.bleed { background: #b03030; }
.unit .fx.stun { background: #c9a227; color: #222; }
.unit.active { border-color: #fff; background: rgba(255,255,255,.08); }
.unit.can { border-color: var(--hit); background: rgba(242,193,78,.12); }
.unit.hit { animation: shake .3s; }
@keyframes shake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }

/* Ability bar along the bottom. */
#skills {
  flex: none; height: 96px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(#5a3b22, #46301c); border-top: 3px solid #000;
}
#skills button { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 10px; border: 3px solid #000; border-radius: 6px; background: var(--panel); color: var(--ink); text-align: left; min-width: 0; }
#skills strong { font-size: .9rem; }
#skills small { font-size: .68rem; opacity: .7; }
#skills button.on { border-color: var(--hit); }
#skills button.off { opacity: .4; }

.sheet .panel p { grid-column: 1 / -1; margin: 0; font-size: .85rem; }

/* Home: a city house built upward from the street, with a cellar below. Placeholder shapes, no art yet. */
#home { background: #0f0c14; overflow: auto; overscroll-behavior: contain; }
/* One room is one screen wide (the walls are the slight padding). More columns scroll sideways. */
.city { min-height: 100%; min-width: 100%; width: max-content; display: flex; flex-direction: column; }
.above { position: relative; padding: 70px 0 0; background: linear-gradient(#1d2d52, #5b7aa6); }
.above .bg { position: absolute; bottom: 0; width: 11%; background: #2a3658; }
.house { position: relative; z-index: 1; }
.roof { height: 38px; background: #5a2f2f; clip-path: polygon(0 100%, 12% 0, 88% 0, 100% 100%); border-bottom: 3px solid #000; }
.floor { display: grid; grid-template-columns: repeat(var(--cols, 1), var(--roomw)); gap: 3px; padding: 3px; background: #2b1d14; border: 2px solid #000; border-top: 0; }
.room { position: relative; height: calc(27 * var(--cell) + 4px); overflow: hidden; border: 2px solid #000; }
.room.bedroom { background: linear-gradient(#6b5a78, #4d3f5a); }
.room.hall { background: linear-gradient(#8a6a44, #6b4f31); }
.room.empty { display: grid; place-items: center; background: #1a1520; border: 2px dashed #5b4f66; color: #8d819a; font-size: .8rem; }
.room::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(2 * var(--cell)); background: #2b1d14; }
.room .lbl { position: absolute; top: 4px; left: 6px; font-size: .65rem; opacity: .8; z-index: 2; }
.room .bed, .room .door { position: absolute; bottom: calc(2 * var(--cell)); line-height: 0; }
.room .bed { width: calc(5 * var(--cell)); height: calc(2 * var(--cell)); }
.room .door { width: calc(3 * var(--cell)); height: calc(6 * var(--cell)); }
.room .bed svg, .room .door svg, .pawn svg, .unit .face svg { display: block; }
.stage { position: absolute; left: 0; right: 0; bottom: calc(2 * var(--cell)); height: var(--hero-h); z-index: 3; }
.pawn { position: absolute; bottom: 0; width: calc(9 * var(--cell)); height: var(--hero-h); padding: 0; border: 0; background: none; color: #fff; font-size: 1.4rem; font-weight: 700; transition: left 2.4s ease-in-out; animation: bob .5s infinite alternate ease-in-out; }
.pawn.left svg, .pawn.left span { display: inline-block; transform: scaleX(-1); }
@keyframes bob { to { translate: 0 -2px; } }
.street { height: 22px; background: repeating-linear-gradient(90deg, #6e6a72 0 28px, #5f5b63 28px 30px); border-top: 3px solid #000; border-bottom: 3px solid #000; }
.cellar { flex: 1; padding: 0 0 20px; background: linear-gradient(#3b2a1d, #20160f); }
.cellar .floor { border-top: 2px solid #000; }
.cellar .room.empty { background: #140f0a; }

.grows { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; gap: 6px; }
.cellar .grows { position: static; padding: 10px 0 0; }
.grow { padding: 6px 10px; border: 2px solid #000; border-radius: 6px; background: #2f6b46; color: #fff; font-size: .75rem; }
.grow.locked { background: #3a3544; color: #9a93a6; }
button.room { color: inherit; }
.sheet { position: absolute; inset: 0; z-index: 10; display: flex; align-items: flex-end; background: rgba(0,0,0,.5); }
.sheet .panel { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; background: #231d2e; border-top: 3px solid #000; }
.sheet .panel b { grid-column: 1 / -1; }
.sheet button { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 3px solid #000; border-radius: 6px; background: #2f2a3b; color: var(--ink); text-align: left; }
.sheet button.poor { opacity: .5; }
.sheet small { opacity: .75; }
.room.kitchen { background: linear-gradient(#7a6a3a, #5d4f2a); }
.room.spa { background: linear-gradient(#3f7b86, #2d5c66); }
.room.dojo { background: linear-gradient(#7a3f3f, #5a2c2c); }

/* Furniture: pixel art on the room grid (one unit = one --cell). Heroes walk in front of it. */
.room .items { position: absolute; inset: 0; z-index: 1; }
.item, .ghost { position: absolute; line-height: 0; }
.item svg, .ghost svg { display: block; }
.deco { position: absolute; top: 4px; right: 6px; z-index: 4; padding: 3px 8px; border: 2px solid #000; border-radius: 6px; background: #2f2a3b; color: var(--ink); font-size: .65rem; }
.room.decorating { outline: 3px solid var(--hit); outline-offset: -3px; }
.room.decorating .stage { pointer-events: none; }
.room.decorating .deco { display: none; }
.room.decorating .item { cursor: pointer; }
.item.sel svg { filter: drop-shadow(0 0 2px #fff); }
.ghost { opacity: .75; pointer-events: none; }
.ghost.ok svg { filter: drop-shadow(0 0 2px #5f5); }
.ghost.bad svg { filter: drop-shadow(0 0 2px #f55); }
.deco-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; background: #231d2e; border-top: 3px solid #000; padding: 8px; display: grid; gap: 8px; }
.deco-panel .picker { display: flex; gap: 6px; overflow-x: auto; }
.deco-panel .picker button { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border: 2px solid #000; border-radius: 6px; background: #2f2a3b; color: var(--ink); text-align: left; font-size: .75rem; }
.deco-panel .picker small { opacity: .7; }
.deco-panel .bar { display: flex; align-items: center; gap: 6px; }
.deco-panel .msg { flex: 1; font-size: .75rem; opacity: .9; }
.deco-panel .bar button { padding: 8px 10px; border: 2px solid #000; border-radius: 6px; background: #2f6b46; color: #fff; font-size: .8rem; }
.deco-panel .bar button[data-act="done"] { background: #3a3544; }
.deco-panel .bar button[data-act="sell"] { background: #7a3f3f; }
.deco-panel .bar button:disabled { opacity: .4; }