*{
  box-sizing:border-box;
}

body{
  --app-width:min(390px, calc(100vw - 24px), calc((100vh - 250px) * 1.5));
  --cell-height:clamp(28px, min(calc(var(--app-width) * 0.154), 8.2vh), 60px);
  margin:0;
  min-height:100vh;
  font-family:"Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
  text-align:center;
  background:#111;
  color:white;
}

h2{
  margin:clamp(8px, 2vh, 22px) 0 clamp(6px, 1.2vh, 12px);
  font-size:clamp(22px, 4vh, 30px);
}

button{
  font:inherit;
}

.topPanel{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin:0 auto 10px;
  font-size:clamp(15px, 2.6vh, 18px);
}

.topPanel p{
  margin:0;
}

.actions{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:clamp(6px, 1.4vh, 10px) 0;
}

.testActions{
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  margin:0 0 clamp(4px, 1vh, 8px);
}

.actions button,
.testActions button,
.moveMenu button{
  min-width:68px;
  min-height:clamp(30px, 5.5vh, 36px);
  border:1px solid #555;
  border-radius:6px;
  background:#2a2a2a;
  color:#fff;
  cursor:pointer;
}

.moveMenu button{
  min-width:0;
  min-height:clamp(30px, 8vw, 36px);
  padding:0 6px;
  font-size:clamp(12px, 3.2vw, 15px);
}

.actions button:hover,
.testActions button:hover,
.moveMenu button:hover{
  background:#3a3a3a;
}

.testActions button.activeMode{
  border-color:#d4af37;
  color:#f2c94c;
}

.actions button:disabled,
.testActions button:disabled{
  opacity:0.4;
  cursor:not-allowed;
}

.status{
  min-height:16px;
  margin:0 0 clamp(2px, 0.7vh, 6px);
  color:#bbb;
  font-size:13px;
}

.scoreLine{
  margin:0 0 clamp(4px, 1vh, 8px);
  font-size:clamp(15px, 2.5vh, 18px);
  font-weight:700;
}

.playerPanel{
  width:var(--app-width);
  margin:0 auto clamp(6px, 1.2vh, 10px);
  display:flex;
  align-items:center;
  gap:8px;
}

.playerPanel label{
  color:#ddd;
  font-size:12px;
  font-weight:700;
}

.playerPanel input{
  min-width:0;
  flex:1;
  height:32px;
  border:1px solid #3a3a3a;
  border-radius:6px;
  background:#171717;
  color:#fff;
  padding:0 10px;
  font:inherit;
  font-size:13px;
}

body.playerNameMissing .playerPanel input{
  border-color:#d4af37;
  box-shadow:0 0 0 2px rgba(212, 175, 55, 0.22);
}

body.playerNameMissing #board,
body.playerNameMissing #deckView,
body.playerNameMissing .progressWrapper{
  opacity:0.45;
}

body.playerNameMissing #board{
  pointer-events:none;
}

.publicPanel{
  width:var(--app-width);
  margin:0 auto clamp(6px, 1.2vh, 10px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.publicPanel section{
  min-width:0;
  padding:6px;
  border:1px solid #303030;
  border-radius:6px;
  background:#171717;
}

.publicHeader{
  margin-bottom:5px;
  color:#ddd;
  font-size:12px;
  font-weight:700;
  text-align:left;
}

.publicList{
  display:grid;
  gap:4px;
}

.publicItem,
.rankingItem{
  min-width:0;
  padding:5px 6px;
  border-radius:5px;
  background:#222;
  color:#bbb;
  font-size:10px;
  line-height:1.25;
  text-align:left;
}

.publicItem strong,
.publicItem span{
  display:block;
}

.publicItem strong{
  color:#fff;
  margin-bottom:2px;
}

.publicItem.muted{
  color:#888;
}

.rankingItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}

.rankingItem span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rankingItem strong{
  color:#f2c94c;
  font-size:12px;
}

.adminPanel,
.adminStats{
  width:var(--app-width);
  margin:0 auto clamp(8px, 1.5vh, 14px);
}

.adminPanel{
  padding:8px;
  border:1px solid #303030;
  border-radius:6px;
  background:#171717;
  text-align:left;
}

.adminPanel label{
  display:block;
  margin-bottom:6px;
  color:#ddd;
  font-size:12px;
  font-weight:700;
}

.adminTokenRow{
  display:flex;
  gap:6px;
}

.adminTokenRow input{
  min-width:0;
  flex:1;
  height:34px;
  border:1px solid #3a3a3a;
  border-radius:6px;
  background:#111;
  color:#fff;
  padding:0 10px;
  font:inherit;
  font-size:13px;
}

.adminTokenRow button{
  min-width:72px;
  border:1px solid #555;
  border-radius:6px;
  background:#2a2a2a;
  color:#fff;
  cursor:pointer;
}

.adminCards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px;
  margin-bottom:8px;
}

.adminSection{
  margin-top:10px;
}

.adminSection h3{
  margin:0 0 6px;
  color:#ddd;
  font-size:13px;
  text-align:left;
}

.adminCard{
  padding:8px;
  border-radius:6px;
  background:#222;
  text-align:left;
}

.adminCard span,
.adminCard strong{
  display:block;
}

.adminCard span{
  color:#aaa;
  font-size:10px;
}

.adminCard strong{
  margin-top:3px;
  color:#fff;
  font-size:15px;
}

.adminTable{
  width:100%;
  border-collapse:collapse;
  background:#171717;
  font-size:11px;
}

.adminTable th,
.adminTable td{
  padding:7px 5px;
  border-bottom:1px solid #303030;
  text-align:left;
}

.adminTable th{
  color:#ddd;
  font-weight:700;
}

.adminTable td{
  color:#bbb;
}

.adminError{
  padding:8px;
  border-radius:6px;
  background:#3a1d1d;
  color:#ffc4c4;
  font-size:12px;
}

.sessionStats{
  width:var(--app-width);
  margin:0 auto clamp(6px, 1.2vh, 10px);
  padding:6px;
  border:1px solid #303030;
  border-radius:6px;
  background:#171717;
}

.sessionStatsHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:5px;
  font-size:12px;
  color:#ddd;
  font-weight:700;
}

.sessionStatsHeader button{
  min-height:22px;
  padding:0 8px;
  border:1px solid #444;
  border-radius:5px;
  background:#252525;
  color:#ddd;
  font-size:11px;
  cursor:pointer;
}

.sessionStatsGrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:4px;
}

.moveAnalysis{
  width:var(--app-width);
  margin:0 auto clamp(6px, 1.2vh, 10px);
  padding:6px;
  border:1px solid #303030;
  border-radius:6px;
  background:#171717;
}

.analysisHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:5px;
  font-size:12px;
  color:#ddd;
  font-weight:700;
}

.moveAnalysisList{
  display:grid;
  gap:4px;
}

.analysisItem{
  display:flex;
  justify-content:space-between;
  gap:6px;
  padding:5px 6px;
  border-radius:5px;
  background:#222;
  color:#bbb;
  font-size:10px;
  line-height:1.2;
}

.analysisItem strong{
  color:#fff;
  white-space:nowrap;
}

.analysisItem span{
  min-width:0;
  text-align:right;
}

.sessionStatItem{
  min-width:0;
  padding:4px 3px;
  border-radius:5px;
  background:#222;
  line-height:1.15;
}

.sessionStatItem span,
.sessionStatItem strong{
  display:block;
}

.sessionStatItem span{
  color:#aaa;
  font-size:9px;
}

.sessionStatItem strong{
  margin-top:2px;
  color:#fff;
  font-size:12px;
}

.progressWrapper{
  width:var(--app-width);
  margin:clamp(6px, 1.3vh, 12px) auto clamp(4px, 0.9vh, 8px);
}

.progressBarBg{
  width:100%;
  height:clamp(12px, 2.4vh, 18px);
  background:#333;
  border-radius:6px;
  overflow:hidden;
  position:relative;
}

#progressBar{
  height:100%;
  width:0%;
  background:#cd7f32;
  transition:width 0.3s ease, background 0.3s ease;
}

.checkpoint{
  position:absolute;
  top:0;
  height:100%;
  width:2px;
  transform:translateX(-1px);
  background:#f5f5f5;
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:clamp(12px, 2.4vh, 18px);
  text-shadow:0 1px 2px #000;
}

.checkpoint::after{
  content:"";
  position:absolute;
  inset:0 -3px;
  border-left:1px solid rgba(0, 0, 0, 0.45);
}

.checkpoint400{
  left:54.054%;
}

.checkpoint550{
  left:74.324%;
}

.checkpoint400{
  text-indent:-28px;
}

.checkpoint550{
  text-indent:6px;
}

.progressScale{
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#aaa;
  margin-top:4px;
}

.deck{
  width:var(--app-width);
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(2px, 0.8vw, 6px);
  margin:clamp(6px, 1.5vh, 12px) auto;
  padding:0;
}

.deckCard{
  width:100%;
  height:clamp(24px, calc(var(--app-width) * 0.128), 50px);
  background:#222;
  border:1px solid #383838;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  font-weight:bold;
  font-size:clamp(11px, 3vw, 16px);
}

.deckUsed{
  opacity:0.3;
}

.deckActive{
  border:2px solid yellow;
}

.boardWrap{
  width:var(--app-width);
  min-width:190px;
  margin:clamp(8px, 1.8vh, 18px) auto clamp(10px, 2vh, 28px);
  position:relative;
  padding:18px 0 0 18px;
}

.board{
  width:100%;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:clamp(3px, 1.4vw, 6px);
}

.lineMarkers{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.lineMarker{
  position:absolute;
  width:12px;
  height:12px;
  border:1px solid #555;
  border-radius:50%;
  background:#242424;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);
}

.lineMarker.active{
  border-color:#f2c94c;
  background:#f2c94c;
  box-shadow:0 0 12px rgba(242, 201, 76, 0.8);
}

.lineMarker.col{
  top:1px;
  left:calc(18px + (var(--app-width) - 4 * clamp(3px, 1.4vw, 6px)) / 10 + var(--i, 0) * ((var(--app-width) - 4 * clamp(3px, 1.4vw, 6px)) / 5 + clamp(3px, 1.4vw, 6px)) - 6px);
}

.lineMarker.row{
  left:1px;
  top:calc(18px + var(--cell-height) / 2 + var(--i, 0) * (var(--cell-height) + clamp(3px, 1.4vw, 6px)) - 6px);
}

.lineMarker.col[data-index="0"], .lineMarker.row[data-index="0"]{ --i:0; }
.lineMarker.col[data-index="1"], .lineMarker.row[data-index="1"]{ --i:1; }
.lineMarker.col[data-index="2"], .lineMarker.row[data-index="2"]{ --i:2; }
.lineMarker.col[data-index="3"], .lineMarker.row[data-index="3"]{ --i:3; }
.lineMarker.col[data-index="4"], .lineMarker.row[data-index="4"]{ --i:4; }

.lineMarker.diag{
  width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  color:#999;
  font-size:13px;
  font-weight:900;
  line-height:1;
}

.lineMarker.diagMain{
  left:1px;
  top:1px;
}

.lineMarker.diagAnti{
  right:-18px;
  top:1px;
}

.lineMarker.diag.active{
  color:#111;
}

.testLog{
  width:var(--app-width);
  max-height:90px;
  margin:0 auto 16px;
  padding:6px 8px;
  border:1px solid #333;
  border-radius:6px;
  background:#181818;
  color:#bbb;
  overflow:auto;
  text-align:left;
  font-size:11px;
  line-height:1.35;
}

.testLog:empty{
  display:none;
}

.cell{
  height:var(--cell-height);
  min-width:0;
  border:0;
  background:#222;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:6px;
  position:relative;
  font-size:clamp(13px, 4.5vw, 18px);
  font-weight:700;
}

.cell:hover{
  filter:brightness(1.16);
}

.prob{
  display:block;
  line-height:1.25;
  font-size:clamp(8px, 2.7vw, 11px);
  font-weight:700;
}

.probFive{
  color:#4fc3f7;
}

.probKing{
  color:#e57373;
}

.probFour{
  color:#ba68c8;
}

.knownCell{
  background:#444;
}

.pendingCell{
  background:#444;
  color:#cfcfcf;
}

.bestCell{
  outline:3px solid #ffeb3b;
  outline-offset:2px;
  z-index:2;
}

.lineCompleteCell{
  box-shadow:0 0 0 3px #f2c94c inset, 0 0 14px rgba(242, 201, 76, 0.65);
  position:relative;
  z-index:1;
}

.noFiveCell{
  box-shadow:inset 0 0 0 3px #23a455;
}

.moveMenu{
  display:none;
  position:absolute;
  grid-template-columns:repeat(4, minmax(34px, 1fr));
  gap:clamp(3px, 1vw, 6px);
  width:clamp(156px, 45vw, 220px);
  padding:clamp(5px, 1.5vw, 8px);
  border:1px solid #444;
  border-radius:8px;
  background:#1b1b1b;
  box-shadow:0 10px 24px rgba(0, 0, 0, 0.45);
  z-index:999;
}

.moveMenu.isOpen{
  display:grid;
}

.moveMenu .currentValue{
  border-color:yellow;
  color:yellow;
}

.warningMenu{
  grid-template-columns:repeat(2, 1fr);
  width:clamp(112px, 32vw, 156px);
}

.warningMenu .menuLabel{
  grid-column:1 / -1;
  color:#ddd;
  font-size:clamp(11px, 3vw, 13px);
  font-weight:700;
  line-height:1;
  padding:2px 0 4px;
}

.warningMark{
  position:absolute;
  right:4px;
  bottom:4px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:1;
  font-weight:700;
}

.warningYes{
  background:#1f8f4d;
  color:#fff;
}

@media (max-width:420px){
  .topPanel{
    gap:8px 14px;
    font-size:14px;
  }
}