/* claudeHack - layout is mobile-first: the game must be fully playable with a
   thumb and no keyboard, and identically playable with a keyboard on desktop. */

:root {
  --bg:        #08090b;
  --panel:     #101318;
  --panel-2:   #161b22;
  --line:      #262d38;
  --fg:        #c9d1d9;
  --dim:       #7d8590;
  --accent:    #d9a441;
  --good:      #56d364;
  --warn:      #e3b341;
  --bad:       #f85149;
  --magic:     #bc8cff;
  --font-mono: ui-monospace, "DejaVu Sans Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-mono); font-size: 14px;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body { overflow: hidden; }

#app {
  display: flex; flex-direction: column;
  height: 100dvh; width: 100vw;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------------------------------------------------------------- top bar */
#topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto; min-height: 32px;
}
#title { color: var(--accent); font-weight: 700; letter-spacing: .5px; }
#topinfo { color: var(--dim); font-size: 11px; flex: 1 1 auto;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topbtns { display: flex; gap: 4px; flex: 0 0 auto; }
#topbtns button, .btn {
  background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  border-radius: 4px; padding: 4px 8px; font: inherit; font-size: 12px;
  cursor: pointer; min-height: 30px;
}
#topbtns button:active, .btn:active { background: var(--line); }

/* --------------------------------------------------------------- messages */
#msgbar {
  flex: 0 0 auto; background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 3px 8px; min-height: 44px; max-height: 92px; overflow: hidden;
  font-size: 13px; line-height: 1.35;
}
#msglines div { white-space: pre-wrap; word-break: break-word; }
#msglines .old  { color: var(--dim); }
#msglines .more { color: var(--accent); }
.m-good { color: var(--good); } .m-bad { color: var(--bad); }
.m-warn { color: var(--warn); } .m-magic { color: var(--magic); }

/* --------------------------------------------------------------- viewport */
#viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #000; }
#map { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }

/* ----------------------------------------------------------------- status */
#status {
  flex: 0 0 auto; background: var(--panel-2);
  border-top: 1px solid var(--line); padding: 3px 8px; font-size: 12.5px;
  line-height: 1.4;
}
/* pre-wrap belongs on the lines, not the container: on the container it also
   preserves the newlines between the two <div>s in the HTML source, which cost
   95px of dungeon on a phone before anyone noticed. */
#status1, #status2 { white-space: pre-wrap; word-break: break-word; }
#status .hi   { color: var(--fg); }
#status .lo   { color: var(--dim); }
#status .bad  { color: var(--bad); font-weight: 700; }
#status .warn { color: var(--warn); }
#status .good { color: var(--good); }

/* -------------------------------------------------------------- touch pad */
#touchpad {
  flex: 0 0 auto; display: flex; gap: 8px; padding: 6px 8px 8px;
  background: var(--panel-2); border-top: 1px solid var(--line);
  align-items: center; justify-content: space-between;
}
#touchpad[hidden] { display: none; }
.tp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
           flex: 0 0 auto; width: 150px; }
.tp-grid button {
  width: 47px; height: 42px; font-size: 17px; line-height: 1;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.tp-grid button:active { background: var(--accent); color: #000; }
.tp-acts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; flex: 1 1 auto; }
.tp-acts button {
  height: 42px; font: inherit; font-size: 12px;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  padding: 0 2px; overflow: hidden;
}
.tp-acts button:active { background: var(--accent); color: #000; }

/* --------------------------------------------------------------- overlays */
#overlay {
  position: absolute; inset: 0; background: rgba(6,8,11,.95);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px; font-size: 13px; line-height: 1.5;
}
#overlay[hidden] { display: none; }
#overlay h2 { margin: 0 0 8px; font-size: 15px; color: var(--accent); }
#overlay h3 { margin: 12px 0 4px; font-size: 13px; color: var(--accent); }
#overlay .menu-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 6px; border-radius: 5px; cursor: pointer;
  border: 1px solid transparent;
}
#overlay .menu-item:hover { background: var(--panel-2); }
#overlay .menu-item.sel   { background: #1d2a1d; border-color: var(--good); }
#overlay .menu-item .let  { color: var(--accent); flex: 0 0 auto; min-width: 2.2em; }
#overlay .menu-item .txt  { flex: 1 1 auto; }
#overlay .menu-head { color: var(--dim); padding: 8px 6px 2px; font-size: 12px; }
#overlay .menu-foot {
  position: sticky; bottom: -10px; background: var(--panel-2);
  border-top: 1px solid var(--line); margin: 10px -10px -10px;
  padding: 8px 10px; display: flex; gap: 6px; flex-wrap: wrap;
}
#overlay table { border-collapse: collapse; width: 100%; }
#overlay td { padding: 2px 6px 2px 0; vertical-align: top; }
#overlay .key { color: var(--accent); white-space: nowrap; }
#overlay .cols { columns: 2; column-gap: 20px; }
@media (max-width: 620px) { #overlay .cols { columns: 1; } }

#tooltip {
  position: absolute; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 4px 8px; font-size: 12px; pointer-events: none;
  max-width: 66%; z-index: 5;
}
#tooltip[hidden] { display: none; }

/* ---------------------------------------------------------------- splash */
#splash {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 16px 12px calc(24px + env(safe-area-inset-bottom));
}
#splash[hidden] { display: none; }
.splash-inner { max-width: 680px; width: 100%; }
#splash-logo {
  color: var(--accent); font-size: 10px; line-height: 1.1; margin: 0 0 6px;
  overflow-x: auto; white-space: pre;
}
@media (max-width: 520px) { #splash-logo { font-size: 7px; } }
.tagline { color: var(--dim); margin: 0 0 16px; font-size: 12.5px; }
#splash-body h2 { font-size: 14px; color: var(--accent); margin: 18px 0 6px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 6px; }
.choice {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 10px; cursor: pointer; text-align: left; color: var(--fg); font: inherit;
}
.choice:active, .choice.sel { border-color: var(--accent); background: var(--panel-2); }
.choice b { display: block; color: var(--accent); font-size: 13px; }
.choice small { color: var(--dim); font-size: 11px; line-height: 1.35; display: block; margin-top: 3px; }
.splash-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.splash-row input[type=text] {
  background: var(--panel); border: 1px solid var(--line); color: var(--fg);
  font: inherit; padding: 7px 8px; border-radius: 5px; flex: 1 1 140px; min-width: 0;
}
.big-btn {
  background: var(--accent); color: #000; border: 0; border-radius: 6px;
  padding: 11px 20px; font: inherit; font-weight: 700; cursor: pointer; font-size: 14px;
}
.big-btn.secondary { background: var(--panel); color: var(--fg); border: 1px solid var(--line); font-weight: 400; }
.note { color: var(--dim); font-size: 11.5px; line-height: 1.55; }
.note code { color: var(--accent); }

/* ---------------------------------------------------------------- guide ---
   The in-game manual. It is fifteen sections long, so it gets a table of
   contents: on a phone, reaching section 12 by scrolling is not reasonable. */
#overlay h4 { margin: 14px 0 4px; font-size: 13px; color: var(--fg); }
#overlay p { margin: 6px 0; }
#overlay p.note {
  color: var(--dim); font-size: 12px; line-height: 1.6;
  border-left: 2px solid var(--line); padding-left: 9px; margin: 8px 0;
}
#overlay ul, #overlay ol { margin: 6px 0; padding-left: 22px; }
#overlay li { margin: 3px 0; }
#overlay code {
  color: var(--accent); background: var(--panel);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 0 4px; font-size: 12px; white-space: nowrap;
}
#overlay .toc {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px; margin: 10px 0 4px;
}
#overlay .toc-item {
  text-align: left; font-size: 12px; padding: 7px 9px; min-height: 34px;
}
#overlay table.guide { margin: 8px 0; font-size: 12.5px; }
#overlay table.guide th {
  text-align: left; color: var(--dim); font-weight: 400; font-size: 11.5px;
  border-bottom: 1px solid var(--line); padding: 3px 8px 4px 0;
}
#overlay table.guide td {
  padding: 4px 8px 4px 0; vertical-align: top;
  border-bottom: 1px solid rgba(38,45,56,.5);
}
#overlay table.guide td:first-child { white-space: normal; }
@media (max-width: 560px) {
  #overlay table.guide { font-size: 12px; }
  #overlay .toc { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------- compact ---
   On a phone every row of chrome is a row of dungeon you cannot see, so the
   bars shrink and the d-pad tightens. The controls stay at 40px minimum: below
   that a thumb starts missing them, and a mis-tapped move in a roguelike costs
   a turn you cannot take back. */
@media (max-width: 560px), (max-height: 560px) {
  #topbar { min-height: 28px; padding: 2px 5px; gap: 5px; }
  #title { font-size: 12px; }
  #topinfo { display: none; }
  #topbtns button { padding: 3px 7px; font-size: 11px; min-height: 27px; }

  #msgbar { min-height: 34px; max-height: 62px; font-size: 12px; padding: 2px 6px; line-height: 1.3; }
  #status { font-size: 11.5px; line-height: 1.3; padding: 2px 6px; }

  #touchpad { padding: 4px 5px 5px; gap: 5px; }
  .tp-grid { width: 132px; gap: 3px; }
  .tp-grid button { width: 42px; height: 40px; font-size: 16px; }
  .tp-acts { gap: 3px; }
  .tp-acts button { height: 40px; font-size: 11px; }
}

/* Landscape phones have almost no vertical room; drop to a single d-pad row
   pairing and let the map keep the rest. */
@media (max-height: 430px) and (orientation: landscape) {
  #msgbar { min-height: 20px; max-height: 40px; }
  .tp-grid button { height: 34px; }
  .tp-acts button { height: 34px; }
}