/* Minesweeper: home, the bar, the field. Light and plain, numbers big and distinct. */

/* ------------------------------------------------------------------ home */
.home{align-items:center;justify-content:center;gap:1.1em;padding:1em;text-align:center;overflow:auto}
.home-head{display:flex;flex-direction:column;align-items:center;gap:.35em}
.home-icon{width:4em;height:4em;border-radius:1em;box-shadow:0 6px 18px rgba(31,85,184,.25)}
.title{font:900 clamp(2.2em,9vw,3.4em)/1 var(--sans);letter-spacing:-.01em;margin:0;color:var(--ink)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.05em}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.8em;width:min(30em,100%)}
.levels{display:grid;grid-template-columns:1fr 1fr;width:min(22em,100%)}
.levels .choice{display:flex;flex-direction:column;align-items:center;line-height:1.15;min-width:6.4em;padding:.45em .7em}
.levels .choice small{font-size:.72em;opacity:.8;font-weight:500}
.home .row.ng{max-width:22em}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.home > :first-child{margin-top:auto}.home > :last-child{margin-bottom:auto}
.row[aria-pressed=true] .toggle{background:var(--accent)}
.row[aria-pressed=true] .toggle::after{left:1.5em}
@media (orientation:landscape) and (max-height:520px){
  .home{flex-direction:row;gap:1.4em;padding:.6em 1em}
  .home > *{margin-block:auto!important}
  html:not(.hw-embed) body:has(#home:not([hidden])) #home.home{padding-top:.6em!important}
  .home-head{flex:0 1 auto;padding-top:2.6em}
  html.hw-embed .home-head{padding-top:0}
  .home-icon{width:3em;height:3em}
  .title{font-size:2.1em}
  .home-body{gap:.45em;flex:0 1 21em}
  .levels{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .levels .choice{min-width:0;padding:.3em .5em}
  .home .row.ng{padding:.35em .8em}
}
@media (max-height:420px){.tagline{display:none}}

/* ---------------------------------------------------------------- game */
#game{flex-direction:column}
.side{display:contents}
.bar{order:0;display:flex;align-items:center;justify-content:center;gap:.6em;padding:max(.5em,env(safe-area-inset-top)) .6em .4em}
.felt{order:1;flex:1;min-height:0;min-width:0;overflow:auto;display:flex;padding:6px;overscroll-behavior:contain}
.dock{order:2;display:flex;align-items:center;justify-content:center;gap:.8em;padding:.4em .6em max(.6em,env(safe-area-inset-bottom))}
.icon-btn{width:48px;height:48px;border-radius:14px;border:1px solid var(--hair);background:var(--panel);display:grid;place-items:center;padding:0;flex:none}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn[aria-pressed=true]{background:var(--accent)}
.icon-btn[aria-pressed=true] svg{stroke:#fff}
.readout{display:flex;align-items:center;gap:.35em;min-width:4.6em;justify-content:center;height:48px;padding:0 .7em;border-radius:14px;background:var(--panel);border:1px solid var(--hair);
  font:800 1.25em/1 var(--sans);font-variant-numeric:tabular-nums}
.readout img{flex:none}
.readout svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--ink-soft);stroke-width:2.2;stroke-linecap:round}
.face{width:56px;height:56px;border-radius:50%;border:0;padding:0;background:none;flex:none}
.face svg{width:100%;height:100%;display:block}
.face:active svg{transform:scale(.94)}
.mode{display:flex;background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:3px;gap:3px}
.mode button{display:flex;align-items:center;gap:.4em;min-height:44px;min-width:6em;justify-content:center;border:0;border-radius:13px;background:none;font-weight:700;padding:0 1em}
.mode button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.mode button[aria-pressed=true]{background:var(--accent);color:#fff}
.mode button#modeFlag[aria-pressed=true]{background:#D8402F}
.icon-btn:focus-visible,.mode button:focus-visible,.face:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px}

/* the side column on a short, wide screen (a phone on its side, a small frame) */
@media (orientation:landscape) and (max-height:520px){
  #game{flex-direction:row}
  .side{display:flex;flex-direction:column;justify-content:center;gap:.6em;padding:.5em max(.5em,env(safe-area-inset-left));flex:none}
  .bar{flex-wrap:wrap;width:9.6em;padding:0;gap:.4em}
  .bar .readout{min-width:0;flex:1 1 4em;height:42px;font-size:1.05em}
  .bar #menu{order:-2}.bar .face{order:-1}
  .dock{flex-direction:column;padding:0;gap:.5em}
  .mode{flex-direction:column;width:9.6em}
  .mode button{min-width:0}
}

/* ------------------------------------------------------------- the field */
.board{--cs:32px;margin:auto;display:grid;grid-template-columns:repeat(var(--cols),var(--cs));gap:var(--gap,2px);padding:var(--gap,2px);
  background:#A9B7C8;border-radius:calc(var(--cs)*.22);outline:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;flex:none;position:relative}
.board.paused .cell{filter:blur(6px)}
.cell{width:var(--cs);height:var(--cs);border-radius:calc(var(--cs)*.16);display:grid;place-items:center;font:900 calc(var(--cs)*.64)/1 var(--sans);
  background:linear-gradient(180deg,#E3EAF3,#C5D1DF);box-shadow:inset 0 -3px 0 rgba(22,32,43,.16),inset 0 2px 0 rgba(255,255,255,.85);cursor:pointer;position:relative}
.cell:hover{background:linear-gradient(180deg,#EDF2F8,#D2DCE8)}
.cell.o{background:#F7F9FB;box-shadow:none;cursor:default}
.cell.f,.cell.m,.cell.x,.cell.w{background-size:72%;background-position:center;background-repeat:no-repeat}
.cell.f{background-image:url(assets/flag.svg),linear-gradient(180deg,#E3EAF3,#C5D1DF)}
.cell.f{background-size:72%,100%}
.cell.m{background-color:#F7F9FB;background-image:url(assets/mine.svg);box-shadow:none}
.cell.x{background-color:#F2A49B;background-image:url(assets/mine.svg);box-shadow:inset 0 0 0 2px #C8382C}
.cell.w{background-color:#F7F9FB;background-image:url(assets/flag.svg);opacity:.75;box-shadow:none}
.cell.w::after{content:"";position:absolute;inset:18%;background:linear-gradient(45deg,transparent 44%,#C8382C 44%,#C8382C 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#C8382C 44%,#C8382C 56%,transparent 56%)}
.cell.cur{box-shadow:0 0 0 3px var(--accent),inset 0 0 0 1px #fff;z-index:1}
.cell.hot{background:#DDE5EF}
.n1{color:#1F5FD6}.n2{color:#1E8A3E}.n3{color:#D03A2E}.n4{color:#233C8C}.n5{color:#8A2B1F}.n6{color:#0E8584}.n7{color:#1C2530}.n8{color:#6B7480}

/* confetti over everything, never in the way */
.burst{position:fixed;inset:0;pointer-events:none;z-index:40}
.result .big{font:900 2.4em/1 var(--sans);text-align:center;margin:.1em 0 .3em;font-variant-numeric:tabular-nums}
.custom label{display:flex;align-items:center;justify-content:space-between;gap:1em;margin:.4em 0;font-weight:700}
.custom input{width:5.5em;font:inherit;font-size:1.1em;padding:.4em .5em;border-radius:.6em;border:1px solid var(--hair);text-align:center;min-height:44px}
.how p{margin:.45em 0;line-height:1.35}
.stats-tabs{margin-bottom:.6em}
.stats{flex-wrap:wrap;row-gap:.6em}
.stats > div{min-width:4.4em}
@media (max-height:520px){
  .card{padding:.9em 1.1em .8em}
  .card h2{font-size:1.3em;margin-bottom:.3em}
  .result .big{font-size:1.8em;margin:0}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .actions .pill{padding:.5em 1.4em;font-size:1em}
  .stats{margin:.1em 0 .2em}
}