/* Push Off. The SoSmarty look (base.css) on a mint ground; design rules live in the repo's CLAUDE.md. */
:root { --mint: #8fd1b5; --red: #e0362c; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--mint);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.screen { position: fixed; inset: 0; }
canvas { display: block; }

/* Title: the name, a demo board playing itself, then the way in */
.title {
  display: flex; flex-direction: column; gap: 20px;
  padding: max(7vh, env(safe-area-inset-top)) max(6vw, 16px) max(5vh, env(safe-area-inset-bottom));
}
.title h1 { font-size: 64px; line-height: 0.95; }
.title h1 span { display: block; }
.tagline { margin: 12px 0 0; font-size: 20px; font-weight: 700; }
.demo { position: relative; flex: 1 1 auto; min-height: 120px; }
.demo canvas, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-bottom { display: flex; flex-direction: column; gap: 16px; }
.keys { margin: 0; font-size: 16px; }
body.touch .keys, body.touch .kbd { display: none; }
@media (min-width: 900px) and (min-height: 560px) {
  .title { display: grid; grid-template-columns: minmax(320px, 1fr) 1.3fr; grid-template-rows: auto 1fr auto; column-gap: 48px; }
  .title-top { grid-column: 1; grid-row: 1; }
  .title-bottom { grid-column: 1; grid-row: 3; }
  .demo { grid-column: 2; grid-row: 1 / 4; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .title { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: 24px; padding-top: 16px; }
  .title h1 { font-size: 32px; }
  .title h1 span { display: inline; }
  .title-top { grid-column: 1; }
  .title-bottom { grid-column: 1; grid-row: 2; align-self: end; }
  .demo { grid-column: 2; grid-row: 1 / 3; }
}

/* Cream panels: level select and the ending */
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; }
.set { margin-top: 28px; padding-left: 16px; border-left: 8px solid var(--mint); }
.set h3 { margin-bottom: 10px; font-size: 20px; }
.set p { margin: -4px 0 10px; font-size: 16px; }
.lvls { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 640px) { .lvls { grid-template-columns: repeat(3, 1fr); } }
.lvl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 76px; padding: 10px;
  border: 3px solid var(--ink); border-radius: 4px; background: var(--ink); color: var(--cream);
  font: 16px/1.25 var(--body); text-align: left; cursor: pointer;
}
.lvl b { margin-bottom: 4px; font: 20px/1 var(--display); font-weight: 400; }
.lvl.par { background: var(--mint); color: var(--ink); }
.lvl:disabled { background: transparent; color: rgba(26, 22, 18, 0.55); border-style: dashed; border-color: rgba(26, 22, 18, 0.4); cursor: default; }
.stats dd.small { max-width: 22em; font: 700 20px/1.3 var(--body); }

/* Play: header, the devil, the board, the buttons, and on phones the pad */
.play {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: 'hud' 'talk' 'stage' 'tools' 'pad';
  gap: 10px; max-width: 760px; margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.hud { grid-area: hud; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lv { margin: 0; min-width: 0; font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv b { margin-right: 6px; font: 20px/1 var(--display); font-weight: 400; }
.count { display: flex; gap: 12px; margin: 0; flex: none; }
.count div { display: flex; align-items: baseline; gap: 6px; }
.count dt { font-size: 16px; font-weight: 700; }
.count dd { margin: 0; min-width: 1.6em; font: 20px/1 var(--display); }
.talk { grid-area: talk; display: flex; align-items: center; gap: 12px; min-height: 64px; }
.talk img { flex: none; width: 48px; height: 48px; }
.talk p {
  position: relative; flex: 1 1 auto; margin: 0; padding: 8px 12px; min-height: 48px;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 4px; font-size: 16px; font-weight: 700; line-height: 1.3;
}
.talk p::before {
  content: ''; position: absolute; left: -11px; top: 14px; border: 8px solid transparent; border-right: 8px solid var(--ink); border-left: 0;
}
.talk p.pop { animation: pop 0.22s ease-out; }
@keyframes pop { from { transform: scale(0.94); } to { transform: none; } }
.showme { flex: none; background: var(--cream); color: var(--ink); font-size: 16px; padding: 10px 12px; }
.stage { grid-area: stage; position: relative; touch-action: none; }
.tools { grid-area: tools; justify-content: center; }
.tools .btn { font-size: 16px; padding: 10px 14px; }
.pad {
  grid-area: pad; display: grid; justify-content: center; gap: 8px;
  grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 64px);
  grid-template-areas: '. up .' 'left down right'; touch-action: none;
}
.arrow { padding: 0; border: 3px solid var(--ink); border-radius: 4px; background: var(--ink); cursor: pointer; touch-action: none; }
.arrow svg { width: 50%; height: 50%; fill: var(--cream); }
.arrow.on { background: var(--cream); }
.arrow.on svg { fill: var(--ink); }
.arrow:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.up { grid-area: up; } .left { grid-area: left; } .down { grid-area: down; } .right { grid-area: right; }

/* Phones on their side: the board on the left, everything else in a column on the right */
@media (max-height: 520px) and (orientation: landscape) {
  .play {
    max-width: none; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: 'stage hud' 'stage talk' 'stage pad' 'stage tools';
  }
  .pad { align-content: center; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 56px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .lvl:hover:not(:disabled) { transform: none; }
  .talk p.pop { animation: none; }
}