:root {
  color-scheme: dark;
  --ink: #e8f0ef;
  --muted: #8da09e;
  --panel: #0c171d;
  --panel-2: #111f25;
  --line: #25383d;
  --cyan: #50e3d2;
  --cyan-soft: #1d8f87;
  --amber: #ffc857;
  --red: #ff5570;
  --cell: clamp(2rem, 4.1vw, 3.55rem);
  --gap: clamp(0.15rem, 0.35vw, 0.3rem);
  font-family: "Bahnschrift", "Aptos", "Segoe UI", sans-serif;
  background: #050b0f;
  color: var(--ink);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #050b0f; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 48% -20%, rgba(40, 143, 137, 0.2), transparent 42rem),
    linear-gradient(180deg, #091218 0%, #050b0f 70%);
}

button, select, input { font: inherit; }
button, select { color: inherit; }
button { touch-action: manipulation; }

.app-shell { width: min(1600px, 100%); min-height: 100vh; margin: 0 auto; padding: 0 clamp(0.75rem, 2vw, 2rem) 1.5rem; }

.topbar {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--ink); text-decoration: none; letter-spacing: 0.18em; }
.brand strong { color: var(--cyan); font-weight: 800; }
.brand-mark { width: 2.2rem; aspect-ratio: 1; display: grid; place-items: center; background: var(--cyan); clip-path: polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%); }
.brand-mark i { width: 1rem; aspect-ratio: 1; background: #071016; transform: rotate(45deg); box-shadow: 0 0 0 0.18rem rgba(7,16,22,.45); }

.session-tools { display: flex; align-items: center; gap: .55rem; }
.difficulty-label { color: var(--muted); font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; }
select, .new-game-button, .profile-button { min-height: 2.65rem; border: 1px solid var(--line); background: var(--panel); border-radius: .35rem; }
select { padding: 0 2.2rem 0 .75rem; }
.new-game-button { display:flex; align-items:center; gap:.45rem; padding:0 .8rem; white-space:nowrap; cursor:pointer; }
.new-game-button span { color:var(--cyan); font-size:1.15rem; }
.profile-button { display: flex; align-items: center; gap: .55rem; padding: 0 .85rem; cursor: pointer; }
.profile-light { width: .5rem; aspect-ratio: 1; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 .65rem var(--cyan); }

main { padding-top: 1rem; }
.status-panel { display: grid; grid-template-columns: minmax(5rem,1fr) minmax(14rem,3fr) minmax(5rem,1fr); border: 1px solid var(--line); background: rgba(12,23,29,.88); }
.metric, .mission-state { min-height: 5.15rem; display: flex; flex-direction: column; justify-content: center; padding: .8rem 1.2rem; }
.metric:first-child { border-right: 1px solid var(--line); }
.metric-right { align-items: flex-end; border-left: 1px solid var(--line); }
.metric-label, .mission-state span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .17em; }
.metric strong { font-family: Consolas, monospace; font-size: 1.75rem; color: var(--amber); }
.mission-state { align-items: center; text-align: center; }
.mission-state strong { margin-top: .2rem; font-size: clamp(1rem, 2.2vw, 1.35rem); font-weight: 600; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; margin-top: 1rem; }
.board-frame, .console { border: 1px solid var(--line); background: rgba(9,18,24,.9); }
.board-toolbar { min-height: 2.5rem; padding: .6rem .8rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font: .7rem/1.3 Consolas, monospace; letter-spacing: .07em; border-bottom: 1px solid var(--line); }
.legend-current, .legend-target { display: inline-block; width: .52rem; aspect-ratio: 1; margin: 0 .25rem; }
.legend-current { border-radius: 50%; background: var(--cyan); }
.legend-target { border: 1px solid var(--amber); transform: rotate(45deg); }
.board-viewport { min-height: 31rem; height: calc(100vh - 15.2rem); overflow: auto; display: grid; place-items: center; padding: clamp(.8rem, 2vw, 2rem); outline: none; scrollbar-color: var(--cyan-soft) #071016; }
.board { display: grid; gap: var(--gap); width: max-content; padding: 1rem; background-image: radial-gradient(rgba(80,227,210,.08) 1px, transparent 1px); background-size: 12px 12px; transition:opacity .12s ease; }

.cell {
  position: relative;
  width: var(--cell);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  background: #203139;
  clip-path: polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  font: 800 clamp(.9rem,2vw,1.25rem)/1 Consolas, monospace;
  transition: filter .12s ease, transform .12s ease, background .18s ease;
}
.cell::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: linear-gradient(145deg,#263b43,#17262d); z-index: -1; }
.cell:hover { filter: brightness(1.18); }
.cell:focus-visible { outline: 3px solid white; outline-offset: 2px; }
.cell.revealed { background: #14252b; color: var(--number-color, var(--muted)); cursor: default; }
.cell.revealed::before { background: #0d1b20; }
.cell.marked { color: var(--amber); background: #695323; }
.cell.marked::before { background: #2e291c; }
.cell.mine { color: white; background: var(--red); }
.cell.mine::before { background: radial-gradient(circle, #ff7187 0 15%, #541622 17% 36%, #17090d 38%); }
.cell.current { filter: drop-shadow(0 0 .5rem var(--cyan)); }
.cell.current::after { content: ""; position: absolute; width: 32%; aspect-ratio: 1; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 .8rem var(--cyan); }
.cell.current.has-number::after { width: 18%; right: 17%; bottom: 16%; }
.cell.target { filter: drop-shadow(0 0 .42rem var(--amber)); background: var(--amber); }
.cell.target::before { inset: 3px; }
.cell.initial-target { filter: drop-shadow(0 0 .42rem var(--cyan)); background: var(--cyan); }
.cell[data-count="1"] { --number-color: #62b5ff; }
.cell[data-count="2"] { --number-color: #6cdf9a; }
.cell[data-count="3"] { --number-color: #ff776f; }
.cell[data-count="4"] { --number-color: #b997ff; }
.cell[data-count="5"], .cell[data-count="6"], .cell[data-count="7"], .cell[data-count="8"] { --number-color: #ffc857; }

.console { padding: 1rem; }
.console-heading { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.console-heading span, .connection-reading span { color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
.console-heading strong { font: .9rem Consolas, monospace; color: var(--cyan); }
.direction-display { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .8rem; padding: 1rem 0; }
.compass-ring { position: relative; width: 8.5rem; max-width: 100%; aspect-ratio: 1; margin: auto; border: 1px solid #365058; border-radius: 50%; background: radial-gradient(circle,rgba(80,227,210,.12),transparent 55%); }
.compass-ring::before, .compass-ring::after { content:""; position:absolute; inset:50% 8%; height:1px; background:#273b40; }
.compass-ring::after { transform: rotate(90deg); }
.tick { position: absolute; color: var(--muted); font: .65rem Consolas,monospace; }
.tick-n { top:.35rem; left:50%; transform:translateX(-50%); }.tick-e{right:.5rem;top:50%;transform:translateY(-50%)}.tick-s{bottom:.35rem;left:50%;transform:translateX(-50%)}.tick-w{left:.5rem;top:50%;transform:translateY(-50%)}
.direction-arrow { position:absolute; inset:1.7rem; display:grid; place-items:center; font-size:2.35rem; color:var(--cyan); transform:rotate(0deg); transition:transform .15s ease; }
.connection-reading { text-align:center; }
.connection-reading strong { display:block; margin-top:.25rem; font: 2.5rem Consolas,monospace; color:var(--amber); }
.rotation-control { display:grid; grid-template-columns: 1fr 5.5rem 1fr; gap:.4rem; align-items:stretch; }
.rotation-control button, .action-grid button { border:1px solid var(--line); border-radius:.35rem; background:var(--panel-2); cursor:pointer; }
.rotation-control button { min-height:4.3rem; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.25rem; padding:.5rem; }
.rotation-control button:last-child { grid-template-columns:1fr auto; }
.rotation-control button span { grid-column:1/-1; font-size:.7rem; color:var(--muted); }
.rotation-control button b { color:var(--cyan); }
.rotation-control > div { display:flex; flex-direction:column; justify-content:center; text-align:center; background:#071016; border:1px solid var(--line); }
.rotation-control > div span { font-size:.58rem; color:var(--muted); }.rotation-control > div strong{font-size:.63rem;letter-spacing:.06em}
kbd { min-width:1.65rem; padding:.2rem .35rem; border:1px solid #3a5158; border-bottom-width:2px; border-radius:.25rem; color:var(--muted); font: .68rem Consolas,monospace; }
.action-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.7rem; }
.action-grid button { min-height:3.75rem; display:flex; align-items:center; justify-content:space-between; padding:.65rem .75rem; }
.action-grid button span { font-weight:700; }
.action-grid .mark-action { border-color:#6b582d; }.action-grid .mark-action span{color:var(--amber)}
.action-grid .clear-action { border-color:#28766f; background:#123732; }.action-grid .clear-action span{color:var(--cyan)}
button:disabled { opacity:.4; cursor:not-allowed; }
.control-hint { margin:.9rem 0 0; color:var(--muted); font-size:.78rem; line-height:1.5; }

.stats-strip { display:grid; grid-template-columns:repeat(6,1fr); margin-top:1rem; border:1px solid var(--line); background:var(--panel); }
.stats-strip div { padding:.8rem 1rem; border-right:1px solid var(--line); }
.stats-strip div:last-child { border-right:0; }
.stats-strip span { display:block; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; }
.stats-strip strong { display:block; margin-top:.2rem; font:1.05rem Consolas,monospace; }

dialog { width:min(31rem,calc(100% - 2rem)); padding:0; color:var(--ink); border:1px solid var(--line); border-radius:.5rem; background:#0b171c; box-shadow:0 1.5rem 5rem #000; }
dialog::backdrop { background:rgba(1,5,7,.78); backdrop-filter:blur(5px); }
.dialog-card { padding:1.2rem; }
.dialog-title { display:flex; justify-content:space-between; align-items:flex-start; }
.dialog-title span, .result-card > span { color:var(--cyan); font-size:.7rem; letter-spacing:.15em; }
.dialog-title h2, .result-card h2 { margin:.2rem 0 1rem; }
.dialog-title button { border:0; color:var(--muted); background:transparent; font-size:1.5rem; cursor:pointer; }
.dialog-card label { display:block; margin-bottom:.35rem; color:var(--muted); font-size:.8rem; }
.profile-create { display:flex; gap:.5rem; }
.profile-create input { min-width:0; flex:1; padding:.7rem; color:var(--ink); border:1px solid var(--line); border-radius:.3rem; background:#071016; }
.profile-create button, .result-actions button { padding:.7rem 1rem; border:1px solid var(--cyan-soft); border-radius:.3rem; color:var(--ink); background:#123732; cursor:pointer; }
.profile-list { display:grid; gap:.45rem; margin-top:1rem; }
.profile-list button { display:flex; justify-content:space-between; padding:.75rem; border:1px solid var(--line); border-radius:.3rem; color:var(--ink); background:var(--panel-2); cursor:pointer; }
.profile-list button.active { border-color:var(--cyan); }
.dialog-card > p { color:var(--muted); font-size:.8rem; line-height:1.5; }
.result-card { text-align:center; }.result-card p{color:var(--muted);line-height:1.5}.result-actions{display:flex;justify-content:center;gap:.6rem}.result-actions button:first-child{background:var(--panel-2);border-color:var(--line)}

@media (max-width: 900px) {
  .game-layout { grid-template-columns:1fr; }
  .board-viewport { min-height:25rem; height:min(57vh,38rem); }
  .console { display:grid; grid-template-columns:1fr 1.25fr; gap:1rem; }
  .console-heading, .control-hint { grid-column:1/-1; }
  .direction-display { padding:0; }
  .rotation-control { align-self:center; }
  .action-grid { margin:0; }
}

@media (max-width: 620px) {
  :root { --cell:2.25rem; --gap:.16rem; }
  .app-shell { padding-inline:.55rem; }
  .topbar { min-height:4rem; flex-wrap:wrap; padding:.6rem 0; }
  .brand { font-size:.9rem; }.brand-mark{width:1.8rem}
  .session-tools { width:100%; }.difficulty-label{display:none} select{flex:1;min-width:0}.profile-button{max-width:9rem}.profile-button span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .new-game-button { width:2.65rem; padding:0; justify-content:center; font-size:0; }.new-game-button span{font-size:1.15rem}
  .status-panel { grid-template-columns:4.5rem 1fr 4.5rem; }
  .metric, .mission-state { min-height:4.3rem; padding:.55rem; }.metric strong{font-size:1.25rem}.mission-state span{font-size:.58rem}.mission-state strong{font-size:.9rem}
  .board-toolbar span:last-child{display:none}.board-viewport{height:46vh;min-height:19rem;padding:.45rem}.board{padding:.55rem}
  .console { display:block; padding:.75rem; }
  .direction-display { grid-template-columns:1fr 1fr; padding:.65rem 0; }.compass-ring{width:6.7rem}.direction-arrow{inset:1.25rem;font-size:1.8rem}
  .rotation-control button { min-height:3.5rem; }.action-grid button{min-height:3.35rem}
  .stats-strip { grid-template-columns:repeat(3,1fr); }.stats-strip div{border-bottom:1px solid var(--line)}.stats-strip div:nth-child(3n){border-right:0}.stats-strip div:nth-child(n+4){border-bottom:0}
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }