/* Conshy Crab game page (docs/play/index.html). Built from the tokens in
 * ../assets/conshy.css; only the game's own pieces live here. */

.crab-game { max-width: 960px; container-type: inline-size; }

/* The stage is 16:9, sized from the container's width (cqw) so that the
 * taller menu-card height below can never widen it. */
.game-stage {
  position: relative;
  height: calc(100cqw * 9 / 16);
  background: var(--aubergine);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* Leave room for the menu cards on narrow screens. */
.game-stage.has-screen { height: max(26rem, calc(100cqw * 9 / 16)); }
.game-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  outline: none;
  touch-action: none;
}

.game-screen {
  position: absolute;
  inset: 0;
  display: flex;
  padding: var(--space-3);
  background: rgba(23, 19, 28, 0.45);
  overflow-y: auto;
}
.game-screen[hidden] { display: none; }
.game-card {
  width: 100%;
  max-width: 30rem;
  margin: auto;
  padding: var(--space-4);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.game-kicker { color: var(--text-muted); margin-bottom: var(--space-1); }
.game-copy { font-size: 16px; line-height: 24px; margin-top: var(--space-2); }
.game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }

.level-picks { display: grid; gap: 2px; margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.level-picks button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.level-picks button:hover:not(:disabled) { background: var(--surface-sunken); }
.level-picks button:disabled { cursor: default; opacity: 0.5; }
.level-picks .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 800;
}
.lp-title { display: block; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--text-heading); }
.lp-meta { display: block; font-family: var(--font-serif); font-size: 13px; line-height: 18px; color: var(--text-muted); }

.game-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.game-bar .btn .icon { width: 18px; height: 18px; }
.game-bar [aria-pressed="false"] .icon .on { opacity: 0.25; }
.game-bar [data-act="exit"] { display: none; }
.game-keys { margin-left: auto; }

.game-help { display: grid; gap: var(--space-2); font-size: 16px; line-height: 24px; }
.game-help li { padding-left: 14px; position: relative; }
.game-help li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 1px; background: var(--violet); }

.touch-pad { display: none; }

@media (pointer: coarse) {
  .game-keys { display: none; }
  .touch-pad {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
  }
  .pad-move { display: flex; gap: var(--space-3); }
  .touch-pad button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border: 1.5px solid var(--text-heading);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-heading);
    font: 800 16px/1 var(--font-display);
    touch-action: none;
  }
  .touch-pad .icon { width: 30px; height: 30px; }
  .touch-pad .pad-jump { width: 104px; }
  .touch-pad button[data-down] { background: var(--surface-sunken); transform: scale(0.96); }
  .game-stage.has-screen ~ .touch-pad { visibility: hidden; }
}

/* A phone held sideways: once a level starts, the game fills the screen
 * with the controls over its corners, until the player presses Exit. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
  body.crab-playing { overflow: hidden; }
  body.crab-playing .crab-game { position: fixed; inset: 0; z-index: 60; max-width: none; background: #000; }
  body.crab-playing .game-stage {
    position: absolute;
    inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    height: auto;
    border-radius: 0;
    box-shadow: none;
  }
  body.crab-playing .game-bar { position: absolute; top: 8px; right: max(8px, env(safe-area-inset-right)); z-index: 2; margin: 0; }
  body.crab-playing .game-bar .btn { background: rgba(23, 19, 28, 0.6); color: #fff; border-color: rgba(255, 255, 255, 0.6); }
  body.crab-playing .game-bar [data-act="exit"] { display: inline-flex; }
  body.crab-playing .touch-pad {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 0 max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    pointer-events: none;
  }
  body.crab-playing .touch-pad button { pointer-events: auto; width: 64px; height: 64px; background: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.7); color: #fff; }
  body.crab-playing .touch-pad .pad-jump { width: 92px; }
}