/* Reversi: the home screen, the board and its discs. */
:root{--felt:#2E7D52;--felt-line:#1D5A39;--disc-b:radial-gradient(circle at 34% 30%,#59626d,#16191d 62%);--disc-w:radial-gradient(circle at 34% 30%,#fff,#e6e6de 70%)}

/* discs, anywhere */
.d{display:block;border-radius:50%;flex:none}
.d.b{background:var(--disc-b)}
.d.w{background:var(--disc-w)}

/* home */
.home{align-items:center;justify-content:center;text-align:center;padding:16px}
.home-in{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(30em,100%)}
.logo{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px;border-radius:14px;background:var(--felt);box-shadow:0 6px 18px rgba(46,125,82,.3)}
.logo .d{width:26px;height:26px;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.home .title{font-size:clamp(2.3em,10vw,3.6em)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.05em}
#levels .choice{min-width:4.6em;position:relative}
#levels .choice[data-won]::after{content:"✓";position:absolute;top:-.55em;right:-.4em;width:1.35em;height:1.35em;line-height:1.35em;border-radius:50%;
  background:#2E9E5B;color:#fff;font-size:.75em;font-weight:800;box-shadow:0 0 0 2px var(--paper)}
.go{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.links{display:flex;gap:.2em;flex-wrap:wrap;justify-content:center}
@media (max-height:520px){.logo{display:none}}
@media (max-height:430px){.tagline{display:none}.home-in{gap:8px}.home .title{font-size:2.3em}.foot{display:none}}

/* the game: a bar over the board (portrait) or a column beside it (wide) */
#game{align-items:stretch;justify-content:center}
.side{display:grid;grid-template-columns:auto 1fr 1fr auto;grid-template-areas:"menu b w undo" "st st st st";gap:8px 10px;align-items:center;
  padding:max(10px,env(safe-area-inset-top)) 12px 0;width:min(100%,760px);margin:0 auto}
.tools{display:contents}
#menu{grid-area:menu}#undo{grid-area:undo}#score-b{grid-area:b}#score-w{grid-area:w}.status{grid-area:st}
.score{display:flex;align-items:center;gap:.55em;padding:.35em .7em;border-radius:14px;background:var(--paper-hi);border:2px solid transparent;
  box-shadow:0 2px 8px rgba(28,37,48,.06);transition:border-color .2s,box-shadow .2s;min-width:0}
.score .d{width:1.7em;height:1.7em;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.score b{display:block;font-size:1.35em;line-height:1.05;font-variant-numeric:tabular-nums}
.score small{display:block;color:var(--ink-soft);font-size:.78em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score.turn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.status{margin:0;text-align:center;font-weight:600;color:var(--ink-soft);min-height:1.45em;font-size:.95em}
.felt{flex:none;min-height:0;display:grid;place-items:center;padding:10px;position:relative}
.board{--bs:min(calc(100vw - 24px),calc(100vh - 152px),720px);width:var(--bs);height:var(--bs);display:grid;grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);gap:max(1px,calc(var(--bs)*.004));padding:calc(var(--bs)*.018);background:var(--felt-line);border-radius:calc(var(--bs)*.025);
  box-shadow:0 10px 30px rgba(20,60,38,.28)}
@supports (height:100dvh){.board{--bs:min(calc(100vw - 24px),calc(100dvh - 152px),720px)}}
@media (min-aspect-ratio:23/20){
  #game{flex-direction:row;justify-content:center}
  .side{display:flex;flex-direction:column;justify-content:center;gap:10px;width:clamp(160px,24vw,250px);margin:0;padding:12px 0 12px max(12px,env(safe-area-inset-left))}
  .tools{display:flex;justify-content:space-between}
  .score{padding:.45em .8em}
  .felt{flex:none;padding:12px}
  .board{--bs:min(calc(100vh - 24px),calc(100vw - clamp(160px,24vw,250px) - 40px),760px)}
  @supports (height:100dvh){.board{--bs:min(calc(100dvh - 24px),calc(100vw - clamp(160px,24vw,250px) - 40px),760px)}}
}
.cell{position:relative;border:0;padding:0;margin:0;background:var(--felt);border-radius:calc(var(--bs)*.006);touch-action:manipulation}
.cell:focus{outline:none}
.cell:focus-visible{box-shadow:inset 0 0 0 3px #FFD54D;z-index:3}
.cell .d{position:absolute;inset:9%;box-shadow:0 calc(var(--bs)*.005) calc(var(--bs)*.01) rgba(0,0,0,.4)}
.cell.legal::after{content:"";position:absolute;inset:39%;border-radius:50%;background:rgba(8,34,20,.32);transition:inset .12s,background .12s}
.board[data-turn="2"] .cell.legal::after{background:rgba(255,255,255,.4)}
@media (hover:hover){
  .board[data-turn="1"] .cell.legal:hover::after{inset:11%;background:rgba(18,20,24,.45)}
  .board[data-turn="2"] .cell.legal:hover::after{inset:11%;background:rgba(255,255,255,.6)}
}
.board.wait .cell.legal::after{opacity:0}
.cell.last::before{content:"";position:absolute;left:44%;top:44%;width:12%;height:12%;border-radius:50%;background:#E5533D;z-index:2;pointer-events:none}
.cell.shake{animation:shake .28s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.d.drop{animation:drop .24s cubic-bezier(.3,1.6,.5,1)}
@keyframes drop{from{transform:scale(1.4);opacity:0}}
.d.to-b{animation:toB .36s ease-in-out both;animation-delay:var(--dl,0ms)}
.d.to-w{animation:toW .36s ease-in-out both;animation-delay:var(--dl,0ms)}
@keyframes toB{0%{transform:scaleX(1);background:var(--disc-w)}49.9%{transform:scaleX(.04);background:var(--disc-w)}50%{transform:scaleX(.04);background:var(--disc-b)}100%{transform:scaleX(1);background:var(--disc-b)}}
@keyframes toW{0%{transform:scaleX(1);background:var(--disc-b)}49.9%{transform:scaleX(.04);background:var(--disc-b)}50%{transform:scaleX(.04);background:var(--disc-w)}100%{transform:scaleX(1);background:var(--disc-w)}}
.banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(28,37,48,.92);color:#fff;padding:.7em 1.3em;border-radius:16px;
  font-weight:700;text-align:center;pointer-events:none;z-index:4;animation:pop .25s cubic-bezier(.2,.9,.3,1.3);max-width:90%}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}

/* the result card */
.result .final{display:flex;justify-content:center;align-items:center;gap:1.1em;margin:.2em 0 .5em;font-size:1.7em;font-weight:800;font-variant-numeric:tabular-nums}
.result .final span{display:flex;align-items:center;gap:.35em}
.result .final .d{width:1.2em;height:1.2em;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.how li{margin:.25em 0}
.how ul{padding-left:1.1em;margin:.2em 0}
.card .choices{margin-bottom:.6em}
@media (max-height:520px){
  .card{padding:.8em 1.1em .8em}
  .card h2{margin-bottom:.35em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .pill{padding:.55em 1.4em}
  .result .final{margin:0 0 .2em}
}