/* PENNY — UI chrome. Game art lives in the theme; this is shell styling only. */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #1d1833;
  --cream: #f4e3b2;
  --paper: #efe7f7;
  --green: #3e9e44;
  --green-hi: #54b948;
  --red: #d9453c;
  --purple: #322a58;
}

html, body { height: 100%; }
body {
  background: #000;
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: bold;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.hidden { display: none !important; }

/* ============ play stage ============ */
#stage { position: relative; }
#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
}

#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  padding: 0.4em 0.6em;
  color: var(--cream);
  background: linear-gradient(rgba(20, 14, 8, 0.75), rgba(20, 14, 8, 0));
  font-size: calc(var(--ui) * 10px);
  letter-spacing: 0.15em;
  pointer-events: none;
}
.hud-left, .hud-right { flex: 1; display: flex; align-items: center; gap: 0.5em; }
.hud-right { justify-content: flex-end; }
.hud-center { flex: 2; text-align: center; }
.treat-ico {
  display: inline-block;
  width: 0.8em; height: 0.8em;
  background:
    linear-gradient(45deg, transparent 38%, #d9b36a 38%, #d9b36a 62%, transparent 62%),
    linear-gradient(-45deg, transparent 38%, #d9b36a 38%, #d9b36a 62%, transparent 62%);
}
.hud-btn {
  pointer-events: auto;
  font: inherit;
  color: var(--cream);
  background: rgba(20, 14, 8, 0.55);
  border: 2px solid var(--cream);
  padding: 0.1em 0.45em;
  cursor: pointer;
}
.hud-btn:hover { background: var(--cream); color: var(--ink); }

#touch {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: calc(var(--ui) * 8px);
  pointer-events: none;
}
.touch-left, .touch-right { display: flex; gap: calc(var(--ui) * 6px); }
.touch-btn {
  pointer-events: auto;
  width: calc(var(--ui) * 34px);
  height: calc(var(--ui) * 34px);
  font-size: calc(var(--ui) * 13px);
  color: var(--cream);
  background: rgba(20, 14, 8, 0.4);
  border: 2px solid rgba(244, 227, 178, 0.8);
  border-radius: 50%;
  cursor: pointer;
  touch-action: none;
}
.touch-btn:active { background: rgba(244, 227, 178, 0.55); }
.touch-jump { width: calc(var(--ui) * 44px); height: calc(var(--ui) * 44px); }

#win {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 14, 8, 0.55);
}
.win-card, .modal-card {
  background: var(--ink);
  border: 3px solid var(--cream);
  color: var(--cream);
  padding: calc(var(--ui, 2) * 12px);
  text-align: center;
  letter-spacing: 0.12em;
}
.win-card h2 { font-size: calc(var(--ui) * 14px); margin-bottom: 0.6em; }
.win-card p { font-size: calc(var(--ui) * 10px); margin-bottom: 1em; }
.win-btns { display: flex; gap: 0.8em; justify-content: center; }

.big-btn {
  font: inherit;
  font-size: calc(var(--ui, 2) * 10px);
  letter-spacing: 0.12em;
  padding: 0.55em 1.1em;
  cursor: pointer;
  color: #fff;
  background: var(--green);
  border: 0;
  border-bottom: 4px solid #2c7331;
}
.big-btn:hover { background: var(--green-hi); }
.big-btn.alt { background: #6b5fa8; border-bottom-color: #4a4178; }
.big-btn.alt:hover { background: #7d70c2; }

/* ============ title ============ */
#title {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(#f5a93f 0%, #ef8a3c 35%, #c75f56 60%, #6d4a78 82%, #3f3158 100%);
}
.title-inner { text-align: center; }
.logo {
  font-size: clamp(48px, 14vw, 120px);
  letter-spacing: 0.08em;
  color: var(--cream);
  background: rgba(140, 88, 30, 0.55);
  padding: 0.05em 0.3em;
  text-shadow: 4px 4px 0 #2a1c12;
  margin-bottom: 6px;
}
.subtitle {
  color: #ffffff;
  letter-spacing: 0.45em;
  font-size: clamp(14px, 2.6vw, 22px);
  text-shadow: 2px 2px 0 #2a1c12;
  margin-bottom: 10px;
}
.big-btn.mesa { background: #c4622f; border-bottom-color: #8a4220; }
.big-btn.mesa:hover { background: #da7440; }
#title-penny {
  image-rendering: pixelated;
  width: 192px; height: 144px;
}
.title-btns { display: flex; gap: 18px; justify-content: center; margin: 18px 0; }
.credit {
  color: #cfc4ea;
  letter-spacing: 0.3em;
  font-size: 13px;
  margin-top: 14px;
}

/* ============ editor ============ */
#editor {
  position: fixed; inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper);
}
.ed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #161228;
}
.ed-title { color: var(--cream); letter-spacing: 0.2em; font-size: 20px; margin-right: 10px; }
.ed-spacer { flex: 1; }
.ed-btn {
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--paper);
  background: var(--purple);
  border: 2px solid #4a4178;
  padding: 6px 12px;
  cursor: pointer;
}
.ed-btn:hover { background: #443a73; }
.ed-btn.play { background: var(--green); border-color: #2c7331; color: #fff; font-size: 16px; padding: 6px 22px; }
.ed-btn.play:hover { background: var(--green-hi); }

.ed-main { flex: 1; display: flex; min-height: 0; }
#ed-palette {
  width: 118px;
  overflow-y: auto;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #1a1530;
}
.pal-title { color: #b8aede; letter-spacing: 0.25em; font-size: 14px; margin-bottom: 2px; }
.pal-item {
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.06em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #cfc4ea;
  background: var(--purple);
  border: 2px solid transparent;
  padding: 6px 2px;
  cursor: pointer;
}
.pal-item canvas { image-rendering: pixelated; width: 54px; height: 54px; background: #221c40; }
.pal-item.selected { border-color: var(--cream); color: var(--cream); }

.ed-canvas-wrap { flex: 1; min-width: 0; position: relative; }
#ed-canvas { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }

.ed-status {
  padding: 10px 16px;
  letter-spacing: 0.2em;
  font-size: 15px;
  color: #cfc4ea;
  background: #161228;
}
.ed-status.bad { color: #ff9d94; }
.ed-status.good { color: #9fe89a; }

#ed-modal {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 8, 20, 0.7);
}
.modal-card { --ui: 1.6; width: min(560px, 90vw); }
.modal-card h3 { margin-bottom: 10px; font-size: 15px; }
.modal-card textarea {
  width: 100%;
  height: 110px;
  font: inherit;
  font-size: 11px;
  color: var(--paper);
  background: #110d22;
  border: 2px solid var(--purple);
  padding: 8px;
  margin-bottom: 12px;
  resize: none;
  word-break: break-all;
}