*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body{
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  background:
    radial-gradient(circle at top,#163f2d 0%,#07140f 48%,#020705 100%);
  color:white;
  font-family:"Space Grotesk",sans-serif;
}

body{
  min-height:100vh;
}

button,
a{
  font-family:inherit;
}

.game-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 22px;
  background:rgba(0,0,0,.38);
  border-bottom:1px solid rgba(255,255,255,.1);
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
}

.title-wrap h1{
  font-size:clamp(1.45rem,3vw,2.35rem);
  letter-spacing:.14em;
}

.subtitle{
  opacity:.72;
  margin-top:6px;
}

.top-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.top-btn{
  color:white;
  text-decoration:none;
  border:none;
  cursor:pointer;
  padding:11px 16px;
  border-radius:999px;
  font-weight:900;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

.hud{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:16px 22px 0;
}

.hud-card{
  padding:14px;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

.hud-label{
  opacity:.72;
  margin-bottom:6px;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hud-value{
  font-size:1.3rem;
  font-weight:900;
}

.black-score{
  border-color:rgba(255,255,255,.34);
}

.white-score{
  border-color:rgba(255,255,255,.2);
}

.game-area{
  flex:1;
  display:grid;
  grid-template-columns:minmax(320px,1fr) 300px;
  gap:24px;
  padding:24px 24px 100px;
  align-items:start;
}

.board-panel{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.reversi-board{
  width:min(76vw,680px);
  aspect-ratio:1;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  gap:6px;
  padding:16px;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.16),transparent 45%),
    linear-gradient(180deg,#0f7a43,#074425);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 0 0 10px rgba(0,0,0,.18),
    inset 0 0 45px rgba(255,255,255,.08);
}

.cell{
  border-radius:14px;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.18),transparent 38%),
    linear-gradient(180deg,#129d56,#075c32);
  border:1px solid rgba(255,255,255,.14);
  position:relative;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -5px 12px rgba(0,0,0,.18);
  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease;
  touch-action:manipulation;
}

.cell:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:
    0 0 18px rgba(118,255,174,.28),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -5px 12px rgba(0,0,0,.18);
}

.disc{
  position:absolute;
  inset:12%;
  border-radius:50%;
  box-shadow:
    inset 0 5px 9px rgba(255,255,255,.18),
    inset 0 -7px 14px rgba(0,0,0,.34),
    0 9px 15px rgba(0,0,0,.35);
  transform:scale(.96);
  animation:discIn .18s ease both;
}

.disc.black{
  background:
    radial-gradient(circle at 35% 25%,#5c6570,#101318 56%,#030405);
}

.disc.white{
  background:
    radial-gradient(circle at 35% 25%,#ffffff,#d7dbe0 56%,#8f98a3);
}

.cell.legal::after{
  content:"";
  position:absolute;
  inset:37%;
  border-radius:50%;
  background:rgba(255,232,128,.9);
  box-shadow:0 0 18px rgba(255,232,128,.7);
}

.cell.legal{
  box-shadow:
    inset 0 0 0 3px rgba(255,232,128,.45),
    0 0 18px rgba(255,232,128,.26);
}

@keyframes discIn{
  from{
    transform:scale(.2) rotateY(90deg);
    opacity:.35;
  }
  to{
    transform:scale(.96) rotateY(0deg);
    opacity:1;
  }
}

.side-panel{
  display:flex;
  flex-direction:column;
  gap:16px;
  position:sticky;
  top:106px;
}

.action-btn{
  border:none;
  border-radius:20px;
  padding:17px;
  cursor:pointer;
  font-size:1.05rem;
  font-weight:900;
  color:#07140f;
  background:
    linear-gradient(180deg,#ffe28f,#ffb92f);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 14px 28px rgba(0,0,0,.28);
}

.status-box,
.legend{
  padding:17px;
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.1);
  line-height:1.55;
  font-weight:800;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

.legend{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.mini-disc{
  width:18px;
  height:18px;
  display:inline-block;
  border-radius:50%;
  margin-right:8px;
  vertical-align:-3px;
}

.mini-disc.black{
  background:#050505;
  border:1px solid rgba(255,255,255,.55);
}

.mini-disc.white{
  background:#f5f5f5;
  border:1px solid rgba(0,0,0,.35);
}

.move-dot{
  width:14px;
  height:14px;
  display:inline-block;
  border-radius:50%;
  margin-right:8px;
  background:#ffe880;
  box-shadow:0 0 12px rgba(255,232,128,.8);
  vertical-align:-2px;
}

.instructions-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:999;
}

.hidden{
  display:none;
}

.instructions-modal{
  width:min(94vw,760px);
  max-height:86vh;
  overflow:auto;
  border-radius:28px;
  background:
    radial-gradient(circle at top,rgba(33,116,79,.28),transparent 40%),
    #08150f;
  border:1px solid rgba(255,255,255,.12);
  padding:28px;
  position:relative;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}

.instructions-modal h2{
  margin-bottom:20px;
}

.instructions-content{
  display:flex;
  flex-direction:column;
  gap:18px;
  line-height:1.7;
}

.instructions-content ul{
  padding-left:24px;
}

.close-btn{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  font-weight:900;
  cursor:pointer;
}

@media (max-width:1000px){
  .game-area{
    grid-template-columns:1fr;
  }

  .side-panel{
    position:relative;
    top:auto;
  }

  .reversi-board{
    width:min(92vw,660px);
  }
}

@media (max-width:680px){
  .top-bar{
    flex-direction:column;
    align-items:flex-start;
  }

  .top-actions{
    width:100%;
  }

  .top-btn{
    flex:1;
    text-align:center;
  }

  .hud{
    grid-template-columns:1fr;
    padding:14px 14px 0;
  }

  .game-area{
    padding:14px 14px 90px;
  }

  .reversi-board{
    width:94vw;
    padding:9px;
    gap:4px;
    border-radius:20px;
  }

  .cell{
    border-radius:9px;
  }

  .disc{
    inset:10%;
  }
}

.top-bar{
  justify-content:space-between !important;
}

.top-left{
  display:flex !important;
  align-items:center !important;
  gap:28px !important;
  flex:1 !important;
}

.title-wrap{
  margin-left:6px !important;
}

.title-wrap h1{
  font-size:clamp(1.8rem,3vw,2.7rem) !important;
  letter-spacing:.16em !important;
}

.subtitle{
  font-size:.92rem !important;
}

.top-actions{
  display:flex !important;
  align-items:center !important;
}

.top-btn{
  min-height:48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#howToPlayBtn{
  font-size:1.08rem !important;
  font-weight:900 !important;
  padding:14px 24px !important;
}

@media (max-width:680px){

  .top-bar{
    gap:14px !important;
  }

  .top-left{
    width:100% !important;
    justify-content:flex-start !important;
    gap:16px !important;
  }

  .title-wrap h1{
    font-size:1.5rem !important;
  }

  #howToPlayBtn{
    width:100% !important;
  }

}