/* Five in a Row Gomoku: the home screen, the wooden board and its black and white stones. */
:root{--wood:#DDB06A;--wood-hi:#E9C485;--wood-lo:#C4924A;--line:rgba(96,62,20,.62);
  --black:radial-gradient(circle at 34% 30%,#6A7078,#24282D 52%,#0B0C0E);
  --white:radial-gradient(circle at 34% 30%,#FFFFFF,#F1F1EE 50%,#C9CCCF);
  --cs:32px}

/* stones, anywhere */
.st{display:block;border-radius:50%;flex:none;position:relative}
.st.b{background:var(--black);box-shadow:0 1px 2px rgba(0,0,0,.45)}
.st.w{background:var(--white);box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.08)}

/* 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{position:relative;width:118px;height:118px;border-radius:14px;background:
  repeating-linear-gradient(0deg,transparent 0 11px,var(--line) 11px 12.5px,transparent 12.5px 23.5px),
  repeating-linear-gradient(90deg,transparent 0 11px,var(--line) 11px 12.5px,transparent 12.5px 23.5px),var(--wood);
  box-shadow:0 6px 18px rgba(150,100,40,.3)}
.logo .st{position:absolute;width:20px;height:20px;left:calc(var(--x)*23.5px + 1.75px);top:calc(var(--y)*23.5px + 1.75px)}
.home .title{font-size:clamp(2em,8.5vw,3.3em);text-wrap:balance}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em}
#levels .choice{min-width:4.6em;position:relative;font-size:1.05em}
#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:560px){.logo{display:none}}
@media (max-height:430px){.tagline{display:none}.home-in{gap:8px}.home .title{font-size:2em}.foot{display:none}}

/* the game: a bar over the board (portrait) or a column beside it (wide) */
#game{align-items:stretch}
.side{display:grid;grid-template-columns:auto 1fr 1fr auto;grid-template-areas:"menu a b undo" "st st st st";gap:8px 10px;align-items:center;
  padding:max(10px,env(safe-area-inset-top)) 12px 0;width:min(100%,720px);margin:0 auto;flex:none}
.tools{display:contents}
#menu{grid-area:menu}#undo{grid-area:undo}#score-1{grid-area:a}#score-2{grid-area:b}.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 .st{width:1.6em;height:1.6em}
.score b{display:block;font-size:1.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.score small{display:block;color:var(--ink-dim);font-size:.75em;line-height:1.2;white-space:nowrap}
.score span{min-width:0}
.score.turn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.status{margin:0;text-align:center;font-weight:700;color:var(--ink-soft);min-height:1.45em;font-size:1em}
.status.hot{color:var(--accent)}
.stage{flex:1;min-height:0;min-width:0;display:grid;place-items:center;padding:6px;position:relative}
@media (min-aspect-ratio:21/20){
  #game{flex-direction:row;justify-content:center}
  .side{display:flex;flex-direction:column;justify-content:center;gap:10px;width:clamp(150px,24vw,250px);margin:0;padding:12px 0 12px max(12px,env(safe-area-inset-left))}
  .tools{display:flex;justify-content:space-between}
  .stage{flex:0 1 auto;width:calc(var(--cs)*15.6)}
}

/* the board: a wooden square, 15x15 crossings, stones sit on the crossings */
.board{position:relative;width:calc(var(--cs)*15);height:calc(var(--cs)*15);border-radius:calc(var(--cs)*.3);touch-action:manipulation;cursor:pointer;
  background:linear-gradient(135deg,var(--wood-hi),var(--wood) 45%,var(--wood-lo));
  box-shadow:0 0 0 calc(var(--cs)*.12) #B9853F,0 calc(var(--cs)*.25) calc(var(--cs)*.6) rgba(110,70,20,.35);outline:none;--d:calc(var(--cs)*.9)}
.board:focus-visible{box-shadow:0 0 0 calc(var(--cs)*.12) #B9853F,0 0 0 calc(var(--cs)*.12 + 4px) var(--accent)}
.grid{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.grid line{stroke:var(--line);stroke-width:.045;stroke-linecap:square}
.grid .edge{stroke-width:.075}
.grid circle{fill:rgba(96,62,20,.8)}
.stones{position:absolute;inset:0;pointer-events:none}
.stones .st,.ghost{position:absolute;width:var(--d);height:var(--d);left:calc(var(--cs)*(var(--c,0) + .05));top:calc(var(--cs)*(var(--r,0) + .05))}
.stones .st.b{box-shadow:calc(var(--cs)*.03) calc(var(--cs)*.07) calc(var(--cs)*.1) rgba(40,20,0,.5)}
.stones .st.w{box-shadow:calc(var(--cs)*.03) calc(var(--cs)*.07) calc(var(--cs)*.1) rgba(40,20,0,.4),inset 0 0 0 1px rgba(0,0,0,.08)}
.stones .st.new{animation:place .26s cubic-bezier(.3,1.5,.5,1)}
@keyframes place{from{transform:scale(1.45);opacity:.2}}
.stones .st.last::after{content:"";position:absolute;left:50%;top:50%;width:28%;height:28%;transform:translate(-50%,-50%);border-radius:50%;background:#E0533D}
.ripple{position:absolute;width:var(--d);height:var(--d);left:calc(var(--cs)*(var(--c,0) + .05));top:calc(var(--cs)*(var(--r,0) + .05));border-radius:50%;
  border:max(2px,calc(var(--cs)*.08)) solid rgba(255,255,255,.75);pointer-events:none;animation:ripple .5s ease-out forwards}
@keyframes ripple{from{transform:scale(.8);opacity:.9}to{transform:scale(2.1);opacity:0}}
.ghost{opacity:.5;pointer-events:none;transition:opacity .12s}
.ghost[hidden]{display:none}
.aim{position:absolute;pointer-events:none;width:calc(var(--cs)*1.3);height:calc(var(--cs)*1.3);left:calc(var(--cs)*(var(--c,0) - .15));top:calc(var(--cs)*(var(--r,0) - .15));
  border-radius:50%;border:max(2px,calc(var(--cs)*.09)) solid var(--accent);box-shadow:0 0 0 2px rgba(255,255,255,.7);animation:aim 1s ease-in-out infinite alternate}
@keyframes aim{to{transform:scale(.88)}}
.board.wait .ghost,.board.wait .aim{opacity:0}
.board.shake{animation:shake .28s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.stones .st.win{animation:glow .8s ease-in-out infinite alternate;z-index:2}
.stones .st.win::before{content:"";position:absolute;inset:-6%;border-radius:50%;border:max(2px,calc(var(--cs)*.08)) solid #FFE27A;box-shadow:0 0 calc(var(--cs)*.3) #FFD84A}
@keyframes glow{to{filter:brightness(1.25)}}
.board.over .stones .st:not(.win){filter:saturate(.6) brightness(.95) opacity(.75);transition:filter .5s}
.winline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.winline line{stroke:#E0533D;stroke-width:.14;stroke-linecap:round;opacity:0}
.winline.on line{opacity:.85;stroke-dasharray:20;stroke-dashoffset:20;animation:draw .6s .1s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.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:.3em;margin:.2em 0 .4em}
.result .final .st{width:1.9em;height:1.9em;animation:place .3s cubic-bezier(.3,1.5,.5,1) backwards}
.result .final .st:nth-child(2){animation-delay:.08s}.result .final .st:nth-child(3){animation-delay:.16s}
.result .final .st:nth-child(4){animation-delay:.24s}.result .final .st:nth-child(5){animation-delay:.32s}
.result .brand{margin:-.5em 0 .3em;font-weight:600;letter-spacing:.02em}
.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}
  .result .final .st{width:1.4em;height:1.4em}
  .result .brand{display:none}
  .how li{margin:0}
}
@media (max-width:460px){.side{gap:8px 6px;padding-left:8px;padding-right:8px}.score{padding:.35em .5em;gap:.4em}.score .st{width:1.3em;height:1.3em}}
@media (max-height:430px) and (min-aspect-ratio:21/20){.side{gap:6px}.score small{display:none}.status{font-size:.9em}}