*{
  box-sizing:border-box;
}

body{
  --app-width:min(390px, calc(100vw - 24px), calc((100vh - 180px) * 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:
    radial-gradient(circle at 50% 0%, rgba(255, 214, 74, 0.06), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(315deg, rgba(255, 255, 255, 0.018) 25%, transparent 25%) 0 0 / 18px 18px,
    #101010;
  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;
}

.controlPanel{
  width:var(--app-width);
  margin:0 auto clamp(6px, 1.2vh, 10px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#bbb;
  font-size:12px;
}

.controlPanel button{
  min-height:28px;
  border:1px solid #555;
  border-radius:6px;
  background:#2a2a2a;
  color:#fff;
  padding:0 9px;
  font:inherit;
  cursor:pointer;
}

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

.cardStyleControl{
  display:flex;
  align-items:center;
  gap:5px;
}

.cardStyleControl select{
  min-height:28px;
  max-width:96px;
  border:1px solid #555;
  border-radius:6px;
  background:#2a2a2a;
  color:#fff;
  padding:0 6px;
  font:inherit;
}

.cardStyleControl select:focus{
  outline:2px solid rgba(242, 201, 76, 0.45);
  border-color:#d4af37;
}

.bottomControlPanel{
  margin-top:0;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.solverVersion{
  width:var(--app-width);
  margin:-8px auto 14px;
  color:#666;
  font-size:10px;
  line-height:1.2;
  text-align:right;
}

.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:clamp(8px, 1.5vh, 14px) 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);
}

.phasePanel{
  width:var(--app-width);
  min-height:28px;
  margin:0 auto clamp(4px, 0.9vh, 8px);
  padding:5px 8px;
  border:1px solid #303030;
  border-radius:6px;
  background:#171717;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}

.phasePanel span{
  color:#aaa;
  font-weight:700;
}

.phasePanel strong{
  color:#f2c94c;
  font-size:13px;
  text-align:right;
}

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;
}

.bottomPublicPanel{
  margin-top:clamp(8px, 1.5vh, 14px);
  margin-bottom:8px;
}

.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;
}

.infoModal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0, 0, 0, 0.68);
  z-index:2000;
}

.infoModal[hidden]{
  display:none;
}

.infoDialog{
  width:min(360px, calc(100vw - 36px));
  position:relative;
  padding:18px 16px 14px;
  border:1px solid #444;
  border-radius:8px;
  background:#171717;
  color:#ddd;
  text-align:left;
  box-shadow:0 18px 44px rgba(0, 0, 0, 0.55);
}

.infoDialog h3{
  margin:0 0 10px;
  color:#fff;
  font-size:18px;
}

.infoDialog p{
  margin:8px 0;
  font-size:13px;
  line-height:1.35;
}

.infoCloseBtn{
  position:absolute;
  right:8px;
  top:8px;
  width:28px;
  height:28px;
  border:1px solid #555;
  border-radius:6px;
  background:#222;
  color:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

.rewardModal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0, 0, 0, 0.74);
  z-index:2200;
}

.rewardModal[hidden]{
  display:none;
}

.rewardDialog{
  width:min(300px, calc(100vw - 36px));
  padding:20px 18px 18px;
  border:1px solid rgba(255, 214, 74, 0.82);
  border-radius:8px;
  background:#17130a;
  color:#fff;
  text-align:center;
  box-shadow:0 0 34px rgba(255, 214, 74, 0.32), 0 20px 48px rgba(0, 0, 0, 0.62);
}

.rewardImage{
  width:96px;
  height:96px;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 0 18px rgba(255, 214, 74, 0.42));
}

.rewardDialog h3{
  margin:10px 0 6px;
  color:#ffd64a;
  font-size:24px;
}

.rewardDialog p{
  margin:0 0 16px;
  color:#e6d9aa;
  font-size:13px;
}

.rewardDialog button{
  min-width:88px;
  border-color:#d4af37;
  background:#28200d;
  color:#fff;
}

.rewardDialog button:hover{
  background:#3a2d0f;
}

.feedbackModal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0, 0, 0, 0.68);
  z-index:2300;
}

.feedbackModal[hidden]{
  display:none;
}

.feedbackDialog{
  width:min(380px, calc(100vw - 36px));
  position:relative;
  padding:18px 16px 14px;
  border:1px solid #444;
  border-radius:8px;
  background:#171717;
  color:#ddd;
  text-align:left;
  box-shadow:0 18px 44px rgba(0, 0, 0, 0.55);
}

.feedbackDialog h3{
  margin:0 0 8px;
  color:#fff;
  font-size:18px;
}

.feedbackDialog p{
  margin:0 0 10px;
  color:#bbb;
  font-size:12px;
  line-height:1.35;
}

.feedbackDialog textarea{
  width:100%;
  min-height:120px;
  resize:vertical;
  border:1px solid #3a3a3a;
  border-radius:6px;
  background:#111;
  color:#fff;
  padding:9px;
  font:inherit;
  font-size:13px;
  line-height:1.35;
}

.feedbackDialog textarea:focus{
  outline:2px solid rgba(242, 201, 76, 0.45);
  border-color:#d4af37;
}

.feedbackFileLabel{
  display:grid;
  gap:5px;
  margin-top:9px;
  color:#bbb;
  font-size:12px;
}

.feedbackFileLabel input{
  width:100%;
  border:1px solid #3a3a3a;
  border-radius:6px;
  background:#111;
  color:#ddd;
  padding:7px;
  font:inherit;
  font-size:12px;
}

.feedbackActions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}

.feedbackActions span{
  min-width:0;
  color:#bbb;
  font-size:12px;
}

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

.feedbackActions button:disabled{
  opacity:0.6;
  cursor:default;
}

.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;
}

.progressScore{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  color:#fff;
  font-size:11px;
  font-weight:900;
  padding-left:7px;
  text-shadow:0 1px 3px #000;
  z-index:2;
  pointer-events:none;
}

#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);
  position:relative;
}

.deckUsed{
  opacity:0.3;
}

.deckActive{
  border:2px solid yellow;
}

.cellWarningIcon{
  position:absolute;
  right:3px;
  top:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffe45c;
  border:1px solid #fff59d;
  color:#141414;
  font-size:13px;
  font-weight:900;
  line-height:1;
  box-shadow:0 0 0 1px rgba(0,0,0,0.55), 0 2px 8px rgba(255,228,92,0.45);
  z-index:4;
}

.cellWarning{
  box-shadow:none;
}

.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;
}

.bottomActions{
  margin-top:0;
  margin-bottom:clamp(6px, 1.2vh, 10px);
}

.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-family:Georgia, Cambria, "Times New Roman", serif;
  font-size:clamp(18px, 5.6vw, 25px);
  font-weight:900;
  line-height:1;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28),
    0 -1px 0 rgba(0, 0, 0, 0.42),
    1px 1px 2px rgba(0, 0, 0, 0.7);
}

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

.valueCell{
  background:var(--cell-color, #555);
}

body[data-card-style="frame"] .valueCell{
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent 28%, rgba(0, 0, 0, 0.22) 72%, rgba(0, 0, 0, 0.36)),
    var(--cell-color, #555);
  border:2px solid rgba(255, 255, 255, 0.22);
  box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.24), inset 0 0 12px rgba(0, 0, 0, 0.22), 0 2px 3px rgba(0, 0, 0, 0.45);
}

body[data-card-style="paper"] .valueCell{
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.28), transparent 18%),
    radial-gradient(circle at 70% 82%, rgba(0, 0, 0, 0.22), transparent 22%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px),
    var(--cell-color, #555);
  border:1px solid rgba(255, 255, 255, 0.28);
  box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.5);
}

body[data-card-style="ornament"] .valueCell{
  background:
    radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(255, 255, 255, 0.14) 43% 45%, transparent 46%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.12) 75%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.18), transparent 45%, rgba(255, 255, 255, 0.1)),
    var(--cell-color, #555);
  background-size:100% 100%, 12px 12px, 100% 100%, 100% 100%;
  border:2px solid rgba(255, 255, 255, 0.25);
  box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.22), inset 0 0 10px rgba(0, 0, 0, 0.26), 0 2px 4px rgba(0, 0, 0, 0.48);
}

body[data-card-style="bevel"] .valueCell{
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.32), transparent 30%),
    linear-gradient(330deg, rgba(0, 0, 0, 0.34), transparent 42%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2)),
    var(--cell-color, #555);
  border:1px solid rgba(255, 255, 255, 0.32);
  box-shadow:inset 2px 2px 0 rgba(255, 255, 255, 0.2), inset -2px -2px 0 rgba(0, 0, 0, 0.34), 0 2px 4px rgba(0, 0, 0, 0.48);
}

body[data-card-style="retro"] .valueCell{
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(0deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px) 0 0 / 8px 8px,
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 32%, rgba(0, 0, 0, 0.28)),
    var(--cell-color, #555);
  border:2px ridge rgba(255, 255, 255, 0.38);
  box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.23), inset 0 0 14px rgba(0, 0, 0, 0.24), 0 2px 5px rgba(0, 0, 0, 0.5);
}

body[data-card-style="rim"] .valueCell{
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.12), transparent 36%),
    repeating-conic-gradient(from 45deg, rgba(255, 255, 255, 0.08) 0 25%, transparent 0 50%) 0 0 / 10px 10px,
    var(--cell-color, #555);
  border:2px solid rgba(0, 0, 0, 0.48);
  box-shadow:inset 0 0 0 2px rgba(255, 255, 255, 0.18), inset 0 0 16px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(0, 0, 0, 0.55);
}

.prob{
  display:block;
  line-height:1.25;
  font-family:"Segoe UI", "Noto Sans", "DejaVu Sans", Arial, sans-serif;
  font-size:clamp(8px, 2.7vw, 11px);
  font-weight:700;
  text-shadow:none;
}

.probFive{
  color:#4fc3f7;
}

.probKing{
  color:#e57373;
}

.probFour{
  color:#ba68c8;
}

.knownCell{
  background:#444;
}

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

.bestCell{
  outline:2px solid #101010;
  outline-offset:3px;
  z-index:2;
  animation:bestPulse 1s ease-in-out infinite;
  isolation:isolate;
  box-shadow:inset 0 0 0 3px #ffeb3b, 0 0 0 2px #101010, 0 0 18px rgba(255, 235, 59, 0.8);
}

.bestCell::before{
  content:"";
  position:absolute;
  inset:4px;
  border:2px solid rgba(255, 245, 157, 0.95);
  border-radius:4px;
  background:rgba(255, 235, 59, 0.12);
  pointer-events:none;
  z-index:0;
}

.bestCell > *{
  position:relative;
  z-index:1;
}

@keyframes bestPulse{
  0%, 100%{
    outline-color:#101010;
    box-shadow:inset 0 0 0 3px #ffeb3b, 0 0 0 2px #101010, 0 0 12px rgba(255, 235, 59, 0.55);
  }

  50%{
    outline-color:#fff176;
    box-shadow:inset 0 0 0 4px #fff176, 0 0 0 3px #101010, 0 0 24px rgba(255, 235, 59, 0.95);
  }
}

.lineCompleteCell{
  position:relative;
  z-index:1;
  animation:lineFlash 0.95s ease-out both;
}

.lineCompleteCell::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:6px;
  pointer-events:none;
  animation:lineFlashRing 0.95s ease-out both;
}

@keyframes lineFlash{
  0%{
    filter:brightness(1);
    box-shadow:none;
  }
  22%{
    filter:brightness(1.65) saturate(1.25);
    box-shadow:0 0 28px rgba(255, 236, 130, 0.95), inset 0 0 18px rgba(255, 255, 255, 0.35);
  }
  100%{
    filter:brightness(1);
    box-shadow:none;
  }
}

@keyframes lineFlashRing{
  0%{
    opacity:0.95;
    transform:scale(0.92);
    box-shadow:0 0 0 2px rgba(255, 245, 157, 0.95);
  }
  100%{
    opacity:0;
    transform:scale(1.22);
    box-shadow:0 0 0 10px rgba(255, 245, 157, 0);
  }
}

.keyboardHoverCell{
  outline:3px solid #f2c94c;
  outline-offset:2px;
  z-index:3;
}

.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;
}

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