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

/* The board: cream squares on ink, so the ink between them draws the grid */
.board {
  display: grid; grid-template-columns: repeat(var(--w, 3), 1fr); gap: 6px; aspect-ratio: 1;
  background: var(--ink); border: 6px solid var(--ink); border-radius: 4px;
}
.cell {
  position: relative; display: block; padding: 0; margin: 0; border: 0; border-radius: 2px; background: var(--cream);
  color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation;
}
div.cell { cursor: default; }
.cell:focus-visible { outline: 4px solid var(--sky); outline-offset: -8px; }
.cell .claim { position: absolute; inset: 22%; width: 56%; height: 56%; opacity: 0.85; }
.cell.mine { background: #f6d9d3; }

/* Marks: a cross is two ink bars, a nought is the devil's red ring */
.mk { position: absolute; inset: 18%; pointer-events: none; }
.mk.x::before, .mk.x::after {
  content: ''; position: absolute; left: 50%; top: -6%; width: 18%; height: 112%; margin-left: -9%;
  background: var(--ink); border-radius: 3px; transform: rotate(45deg);
}
.mk.x::after { transform: rotate(-45deg); }
.mk.o { border: solid var(--red); border-width: max(8px, 1.6vmin); border-radius: 50%; }
.cell.old .mk.x { opacity: 0.4; }
.cell.win-you { background: var(--sky); }
.cell.win-dev { background: var(--red); }
.cell.win-dev .mk.o { border-color: var(--cream); }
.cell.hot { background: #f6d9d3; animation: hot 0.5s steps(2) 3; }
.cell.nope { animation: shake 0.4s; background: #d8e9f3; }
@keyframes hot { 50% { background: var(--red); } }

.mk.pop { animation: stamp 0.24s cubic-bezier(0.3, 1.6, 0.6, 1); }
.mk.pop2 { animation: stamp 0.3s 0.32s cubic-bezier(0.3, 1.6, 0.6, 1) backwards; }
@keyframes stamp { from { transform: scale(0.2); } to { transform: none; } }
.mk.slide { animation: slide 0.5s ease-in-out; z-index: 2; }
.mk.fall { animation: slide 0.36s cubic-bezier(0.5, 0, 1, 1); z-index: 2; }
@keyframes slide { from { transform: translate(var(--dx), var(--dy)); } to { transform: none; } }
.mk.gone { animation: gone 0.5s forwards; }
.mk.rub { animation: rub 0.6s forwards; }
@keyframes gone { from { transform: none; opacity: 1; } to { transform: scale(0.1) rotate(90deg); opacity: 0; } }
@keyframes rub { 0%, 60% { transform: translateX(0); } 15%, 45% { transform: translateX(-12%); } 30% { transform: translateX(12%); } 100% { transform: scale(1, 0.05); opacity: 0; } }
.board.turning { transition: transform 0.6s cubic-bezier(0.6, -0.3, 0.4, 1.3); transform: rotate(90deg); }
.board.ghost { border-style: dashed; }
.shake { animation: shake 0.4s; }
@keyframes shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }

/* Title: the name, a still board, 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; }
.still { flex: 1 1 auto; min-height: 120px; container-type: size; display: flex; align-items: center; justify-content: center; }
.still .board { width: min(100cqw, 100cqh, 360px); }
.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) 1fr; 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; }
  .still { grid-column: 2; grid-row: 1 / 4; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .title { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; column-gap: 24px; padding-top: 16px; }
  .title h1 { font-size: 32px; }
  .title h1 span { display: inline; }
  .title-bottom { grid-column: 1; grid-row: 2; align-self: end; }
  .still { grid-column: 2; grid-row: 1 / 3; width: 40vh; }
}

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

/* Play: who and what, the devil talking, the cheat, the board, the buttons */
.play {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: 'hud' 'talk' 'rule' 'stage' 'tools'; gap: 10px; max-width: 640px; 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; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.lv { margin: 0; font-size: 20px; font-weight: 700; }
.lv b { margin-right: 6px; font: 20px/1 var(--display); font-weight: 400; }
.goal { margin: 0; font-size: 16px; font-weight: 700; }
.goal.hard { font: 16px/1.2 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, .rule.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; }
.rule { grid-area: rule; margin: 0; padding: 6px 12px; background: var(--ink); color: var(--cream); border-radius: 4px; font-size: 16px; line-height: 1.3; }
.rule b { font: 16px/1 var(--display); font-weight: 400; margin-right: 4px; }
.rule.unknown { background: transparent; color: var(--ink); border: 3px dashed var(--ink); padding: 3px 9px; }
.stage { grid-area: stage; container-type: size; display: flex; align-items: center; justify-content: center; min-height: 160px; }
.stage .board { width: min(100cqw, 100cqh); }
.tools { grid-area: tools; justify-content: center; }
.tools .btn { font-size: 16px; padding: 10px 16px; }

/* Phones on their side: the board on the left, everything else on the right */
@media (max-height: 520px) and (orientation: landscape) {
  .play {
    max-width: none; grid-template-columns: minmax(0, 1fr) minmax(260px, 1.1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: 'stage hud' 'stage talk' 'stage rule' 'stage .' 'stage tools'; column-gap: 20px;
  }
  .tools { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .lvl:hover:not(:disabled) { transform: none; }
  .talk p.pop, .rule.pop, .mk, .cell.hot, .cell.nope, .shake { animation: none !important; }
}