:root {
  color-scheme:light;
  --paper:#f6f3eb;
  --ink:#303f36;
  --muted:#657066;
  --green:#405c49;
  --line:#d6dbcd;
  --tile:48px;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink);
  background:var(--paper)
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  font-size:1.125rem
}

button {
  font:inherit;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  border:0;
  color:inherit;
  min-height:56px;
  border-radius:14px;
  padding:10px 16px;
  background:#fffdf8
}

button:focus-visible {
  outline:3px solid #917034;
  outline-offset:3px
}

button:active {
  transform:translateY(1px);
  filter:brightness(.96)
}

button:disabled {
  opacity:.4;
  cursor:default;
  transform:none
}

h1,h2,p {
  margin:0
}

h1 {
  font-size:1.35rem;
  letter-spacing:.035em;
  line-height:1.45
}

h2 {
  font-size:1.45rem;
  line-height:1.5
}

p {
  line-height:1.7
}

[hidden] {
  display:none!important
}

.app {
  max-width:640px;
  margin:auto;
  height:100vh;
  height:100dvh;
  min-height:560px;
  padding:calc(10px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  display:grid;
  grid-template-rows:auto minmax(var(--board-min-height,160px),1fr) auto;
  gap:12px
}

.brand-row,.level-row,.dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.brand-row {
  margin-bottom:9px
}

.brand {
  font-size:.88rem;
  letter-spacing:.14em;
  font-weight:650
}

.brand-mark {
  font-size:1.55rem;
  color:#718369;
  vertical-align:-2px
}

.small {
  font-size:.875rem;
  padding:4px 9px;
  min-height:44px
}

.eyebrow {
  font-size:.75rem;
  color:var(--muted);
  letter-spacing:.12em;
  margin-bottom:3px
}

.level-row .outline {
  font-size:.875rem;
  white-space:nowrap;
  padding:10px 13px
}

.outline {
  background:transparent;
  border:1px solid var(--line)
}

.quiet {
  background:transparent
}

.primary {
  background:var(--green);
  color:#fffdf5;
  font-weight:600
}

.play-area {
  min-width:0;
  min-height:0;
  display:flex
}

#board-wrap {
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:6px
}

#board {
  display:grid;
  grid-template-columns:repeat(var(--columns,5),var(--tile));
  grid-template-rows:repeat(var(--rows,5),var(--tile));
  flex:none;
  border-radius:12px;
  overflow:hidden;
  background:#e8e0cf;
  outline:5px solid #e3ddcc;
  box-shadow:0 9px 24px #35422f12
}

.cell {
  width:var(--tile);
  height:var(--tile);
  position:relative;
  display:grid;
  place-items:center;
  background:#eee7d6;
  border:1px solid #e4dcc8
}

.cell.wall {
  background:#859078;
  border-color:#79876e;
  box-shadow:inset 0 2px #a1ac9459,inset 0 -3px #60745126
}

.cell.wall:after {
  content:"";
  position:absolute;
  inset:18% 18%;
  border-top:1px solid #b8bfa84f;
  border-bottom:1px solid #647a594d
}

.goal-mark {
  width:29%;
  height:29%;
  border:2px solid #8d7847;
  transform:rotate(45deg);
  border-radius:3px;
  background:#e4d5af;
  position:absolute
}

.crate {
  position:absolute;
  inset:11%;
  border-radius:16%;
  background:#d4a46e;
  border:2px solid #977044;
  box-shadow:inset 0 2px #f0d2a2,inset 0 -3px #aa78462b;
  display:grid;
  place-items:center
}

.crate:before,.crate:after {
  content:"";
  position:absolute;
  width:78%;
  height:2px;
  background:#987044;
  transform:rotate(45deg)
}

.crate:after {
  transform:rotate(-45deg)
}

.crate.placed {
  background:#71947a;
  border-color:#416e52;
  box-shadow:inset 0 2px #9db79d
}

.crate.placed:before {
  width:28%;
  height:50%;
  background:transparent;
  border:solid #fffdf2;
  border-width:0 3px 3px 0;
  transform:rotate(45deg);
  margin-top:-12%
}

.crate.placed:after {
  display:none
}

.player {
  position:absolute;
  inset:13%;
  border-radius:50%;
  background:#fffdf3;
  border:2px solid #4a6250;
  box-shadow:0 3px #485c3720
}

.player:before {
  content:"";
  position:absolute;
  width:15%;
  height:15%;
  background:#405c49;
  border-radius:50%;
  top:43%;
  left:23%;
  box-shadow:calc(var(--tile)*.22) 0 #405c49
}

.player:after {
  content:"";
  position:absolute;
  top:8%;
  left:24%;
  width:48%;
  height:20%;
  background:#799073;
  border-radius:8px 8px 3px 3px
}

.game-message {
  text-align:center;
  font-size:.875rem;
  color:var(--muted);
  margin-bottom:10px;
  min-height:1.7em
}

.control-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px
}

.dpad {
  display:grid;
  grid-template-columns:repeat(3,60px);
  grid-template-rows:repeat(2,60px);
  gap:6px
}

.dpad button {
  padding:0;
  border:1px solid var(--line);
  box-shadow:0 3px 0 #dfe2d7;
  font-size:1.9rem;
  line-height:1;
  min-width:56px
}

.dpad button[data-direction="up"] {
  grid-column:2
}

.dpad button[data-direction="left"] {
  grid-column:1;
  grid-row:2
}

.dpad button[data-direction="down"] {
  grid-column:2;
  grid-row:2
}

.dpad button[data-direction="right"] {
  grid-column:3;
  grid-row:2
}

.actions {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:122px
}

.actions button {
  font-size:1rem;
  padding:9px 10px;
  white-space:nowrap
}

.actions .primary span {
  font-size:1.35rem
}

.actions .quiet {
  font-size:.875rem
}

.footer-note {
  text-align:center;
  color:var(--muted);
  font-size:.75rem;
  margin-top:14px;
  letter-spacing:.04em
}

.warning {
  background:#fff1d9;
  color:#714d1b;
  font-size:.875rem;
  padding:8px 12px;
  border-radius:10px;
  margin-top:8px
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

dialog {
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--paper);
  color:var(--ink);
  width:min(92vw,480px);
  max-height:88vh;
  max-height:88dvh;
  padding:24px;
  box-shadow:0 24px 90px #1b332c38;
  overflow:auto
}

dialog::backdrop {
  background:#213d3259;
  backdrop-filter:blur(3px)
}

dialog p {
  margin:12px 0
}

dialog .eyebrow {
  margin:0
}

.close {
  background:transparent;
  padding:0;
  min-width:48px;
  min-height:48px;
  font-size:1.8rem
}

.dialog-intro {
  font-size:.9rem;
  color:var(--muted)
}

#level-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.level-card {
  text-align:left;
  border:1px solid var(--line);
  padding:14px 12px;
  border-radius:14px;
  min-height:106px;
  display:flex;
  flex-direction:column;
  gap:5px
}

.level-card[aria-current="true"] {
  border:2px solid var(--green);
  padding:13px 11px;
  background:#e9eee4
}

.level-card strong {
  font-size:1.2rem
}

.level-card .level-name {
  font-size:.8rem;
  line-height:1.5
}

.level-card .level-state {
  font-size:.7rem;
  color:var(--green)
}

.dialog-actions {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:20px
}

.win-symbol {
  width:64px;
  height:64px;
  border-radius:50%;
  background:#dee7d6;
  color:var(--green);
  font-size:2rem;
  display:grid;
  place-items:center;
  margin:0 auto 20px
}

#win-dialog {
  text-align:center
}

#win-dialog h2 {
  font-size:1.8rem;
  margin:10px 0
}

.help-list {
  padding-left:1.6em;
  line-height:1.8
}

.help-list li {
  margin:12px 0
}

.help-list strong {
  display:block
}

.help-legend {
  display:flex;
  gap:12px;
  justify-content:space-between;
  margin:22px 0;
  font-size:.85rem
}

.help-legend span {
  display:flex;
  align-items:center;
  gap:5px
}

.mini {
  font-style:normal;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:6px
}

.player-mini {
  background:#fffdf3;
  border:1px solid #4a6250;
  border-radius:50%;
  font-size:.7rem
}

.crate-mini {
  background:#d4a46e;
  border:1px solid #977044
}

.goal-mini {
  color:#8d7847;
  background:#eee7d6
}

.help-note {
  font-size:.875rem;
  color:var(--muted)
}

.full {
  width:100%;
  margin-top:12px
}

@media(max-width:359px) {
  .app {
    padding-left:12px;
    padding-right:12px;
    gap:8px
  }
  .control-row {
    gap:10px
  }
  .dpad {
    grid-template-columns:repeat(3,56px);
    grid-template-rows:repeat(2,56px);
    gap:4px
  }
  .actions {
    min-width:108px
  }
  .actions button {
    font-size:.875rem
  }
  .brand-row {
    margin-bottom:2px
  }
  h1 {
    font-size:1.1rem
  }
  .level-row {
    gap:6px
  }
  .level-row .outline {
    padding:8px;
    font-size:.8rem
  }
  .footer-note {
    margin-top:10px
  }
}

@media(orientation:landscape) and (min-width:600px) {
  .app {
    max-width:1000px;
    min-height:360px;
    grid-template-columns:minmax(250px,1fr) auto;
    grid-template-rows:auto minmax(var(--board-min-height,160px),1fr);
    gap:8px 24px
  }
  .header {
    grid-column:1/-1
  }
  .brand-row {
    margin-bottom:0
  }
  .level-row {
    align-items:center
  }
  .play-area {
    grid-column:1;
    grid-row:2
  }
  .controls {
    grid-column:2;
    grid-row:2;
    align-self:center
  }
  .control-row {
    gap:14px
  }
  .game-message {
    margin-bottom:8px
  }
  .footer-note {
    margin-top:12px
  }
  .brand-row .small {
    min-height:36px
  }
  .level-row .outline {
    min-height:44px
  }
}

@media(prefers-reduced-motion:reduce) {
  button:active {
    transform:none
  }
}

@media(orientation:landscape) and (min-width:600px) and (max-width:699px) {
  .control-row {
    flex-direction:column;
    gap:8px
  }
  .actions {
    flex-direction:row;
    gap:6px
  }
  .game-message {
    font-size:.8rem
  }
  .footer-note {
    margin-top:8px
  }
}