:root{
  --bg0:#fff3fb;
  --bg1:#ffe0f2;
  --card:#ffffff;
  --ink:#4a1131;
  --muted:#7a3b5a;
  --pink0:#ff5aa8;
  --pink1:#ff85c1;
  --pink2:#ffd0e8;
  --line:#ffb5d8;
  --good:#38c172;
  --bad:#ff2d55;
  --shadow: 0 14px 40px rgba(255,90,168,.18);
  --r: 22px;
  --vh: 1vh;
}

*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  padding:0;
  background: radial-gradient(1200px 800px at 40% 10%, var(--bg1), var(--bg0));
  color:var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", Arial, sans-serif;
}
body{
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.app{
  min-height: calc(var(--vh) * 100);
  display:flex;
  flex-direction:column;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  gap: 12px;
}

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

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #fff0f8);
  box-shadow: var(--shadow);
  user-select:none;
  -webkit-user-select:none;
}
.brand__logo{ font-size: 22px; }
.brand__name{
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 18px;
}

.difficulty{
  display:flex;
  gap: 6px;
  align-items:center;
}
.topRight{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
}
.helpBtn{
  min-width: 44px;
  padding: 9px 12px;
  font-weight: 900;
}
.diff{
  border: 2px solid transparent;
  background: linear-gradient(180deg, #fff, #fff0f8);
  box-shadow: 0 10px 24px rgba(255,90,168,.14);
  border-radius: 999px;
  padding: 9px 10px;
  font-size: 16px;
  line-height: 1;
  min-height: 44px;
  user-select:none;
  -webkit-user-select:none;
  color: var(--ink);
}
.diff.isActive{
  border-color: var(--pink0);
  background: linear-gradient(180deg, #fff, var(--pink2));
}
.diff:active{ transform: translateY(1px) scale(.99); }

.main{
  display:flex;
  flex:1;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

.boardWrap{
  width: min(92vmin, 560px);
  max-width: 100%;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.board{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r);
  background: linear-gradient(180deg, #fff, #fff0f8);
  box-shadow: var(--shadow);
  border: 3px solid var(--line);
  padding: 8px;
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  user-select:none;
  -webkit-user-select:none;
  touch-action: manipulation;
}

.cell{
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 2px solid rgba(255,181,216,.75);
  font-weight: 900;
  line-height: 1;
  min-height: 0;
  color: var(--ink);
  user-select:none;
  -webkit-user-select:none;
  transition: transform .08s ease-out, box-shadow .12s ease-out, background .12s ease-out, border-color .12s ease-out;
}
.cell.boxAlt{
  background: #fff1f9;
}

.cell__num{
  font-size: clamp(20px, 4.5vmin, 40px);
  line-height: 1;
}

.cell__notes{
  position: absolute;
  inset: 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  font-size: clamp(10px, 2.2vmin, 16px);
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
}
.cell.hasNotes .cell__notes{ opacity: 1; }
.cell.hasNotes .cell__num{ opacity: 0; }
.cell__notes i{
  font-style: normal;
  opacity: .16;
  font-weight: 900;
}
.cell__notes i.on{
  opacity: .95;
  color: var(--ink);
}

.cell.isGiven{
  border-color: rgba(255,90,168,.35);
}
.cell.isSelected:not(.isWrong){
  z-index: 1;
  border-color: rgba(255,45,120,.95);
  background: radial-gradient(circle at 50% 35%, #ffffff 0%, #fff6fb 32%, #ffd0e8 72%, #ffb5d8 120%);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.95),
    0 0 0 8px rgba(255,90,168,.75),
    0 18px 34px rgba(255,90,168,.28);
  transform: translateY(-1px) scale(1.02);
}
.cell.isSelected:not(.isWrong)::after{
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255,90,168,.55);
  animation: selPulse 1.25s ease-in-out infinite;
}
.cell.isPeer{
  background: rgba(255,90,168,.06);
}
.cell.isSame{
  background: #ffe7f4;
  border-color: rgba(255,90,168,.45);
}
.cell.isWrong{
  color: var(--bad);
  background: #fff0f4;
  border-color: rgba(255,45,85,.45);
}
.cell.isHint{
  animation: pop .35s ease-out 1;
}
.cell.isCorrect{
  animation: correctBlink .28s ease-out 1;
}

.cell.bTop{ border-top-width: 4px; }
.cell.bLeft{ border-left-width: 4px; }
.cell.bRight{ border-right-width: 4px; }
.cell.bBottom{ border-bottom-width: 4px; }

/* Stronger 3×3 box boundaries (without overriding error state). */
.cell.bTop:not(.isWrong){ border-top-color: rgba(255,90,168,.60); }
.cell.bLeft:not(.isWrong){ border-left-color: rgba(255,90,168,.60); }
.cell.bRight:not(.isWrong){ border-right-color: rgba(255,90,168,.60); }
.cell.bBottom:not(.isWrong){ border-bottom-color: rgba(255,90,168,.60); }

@keyframes pop{
  0%{ transform: scale(.9); }
  60%{ transform: scale(1.03); }
  100%{ transform: scale(1); }
}

@keyframes selPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,90,168,.45); opacity: .95; }
  70%{ box-shadow: 0 0 0 10px rgba(255,90,168,0); opacity: .35; }
  100%{ box-shadow: 0 0 0 0 rgba(255,90,168,0); opacity: 0; }
}

@keyframes correctBlink{
  0%{
    background: radial-gradient(circle at 50% 35%, #ffffff 0%, #fff6fb 35%, #ffd0e8 90%);
    box-shadow:
      0 0 0 3px rgba(255,255,255,.95),
      0 0 0 8px rgba(56,193,114,.30),
      0 14px 30px rgba(56,193,114,.16);
  }
  100%{
    background: inherit;
    box-shadow: inherit;
  }
}

/* Win celebration overlay */
.celebration{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
}
.celebration__burst{
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  font-size: clamp(52px, 7vw, 92px);
  filter: drop-shadow(0 18px 30px rgba(255,90,168,.22));
  animation: burstPop .95s ease-out 1;
}
.celebration__item{
  position: absolute;
  top: -12vh;
  font-size: clamp(18px, 3.4vw, 44px);
  filter: drop-shadow(0 14px 26px rgba(255,90,168,.18));
  animation: confettiFall 1.35s linear forwards;
}
@keyframes burstPop{
  0%{ transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  20%{ opacity: 1; }
  60%{ transform: translate(-50%, -50%) scale(1.08); }
  100%{ transform: translate(-50%, -50%) scale(1); opacity: .92; }
}
@keyframes confettiFall{
  0%{ transform: translateY(0) rotate(0deg) scale(.9); opacity: 0; }
  10%{ opacity: 1; }
  100%{ transform: translateY(120vh) rotate(260deg) scale(1.15); opacity: 0; }
}

.controls{
  width: min(92vmin, 360px);
  max-width: 100%;
  display:flex;
  flex-direction:column;
  gap: 10px;
  align-self: center;
}

.quick{
  display:flex;
  gap: 10px;
  justify-content: space-between;
}

.btn{
  border: 0;
  border: 3px solid transparent;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--pink1), var(--pink0));
  color: white;
  box-shadow: 0 12px 30px rgba(255,90,168,.25);
  min-height: 52px;
  font-weight: 900;
  font-size: 22px;
  width: 100%;
  user-select:none;
  -webkit-user-select:none;
}
.btn.isActive{
  background: linear-gradient(180deg, #ffffff, #fff0f8);
  color: var(--pink0);
  border-color: rgba(255,90,168,.65);
  box-shadow: 0 14px 36px rgba(255,90,168,.18);
}
.btn.big{
  min-width: 0;
  flex: 1;
  font-size: 26px;
}
.btn:active{ transform: translateY(1px) scale(.99); }

.pad{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.key{
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #fff0f8);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(255,90,168,.16);
  min-height: 72px;
  font-weight: 900;
  font-size: 32px;
  user-select:none;
  -webkit-user-select:none;
}
.key:active{ transform: translateY(1px) scale(.99); }
.key.isDisabled{ opacity: .55; }

.status{
  min-height: 24px;
  font-weight: 800;
  color: var(--muted);
  text-align:center;
  user-select:none;
  -webkit-user-select:none;
}

.toast{
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: rgba(74,17,49,.92);
  color: white;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-in-out;
}
.toast.show{ opacity: 1; }

.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}
.modal.isOpen{ display:flex; }
.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(74,17,49,.45);
  backdrop-filter: blur(4px);
}
.modal__card{
  position: relative;
  width: min(92vw, 560px);
  max-height: min(82vh, calc(var(--vh) * 82));
  overflow: auto;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #fff0f8);
  box-shadow: 0 16px 60px rgba(74,17,49,.22);
  border: 3px solid rgba(255,181,216,.85);
}
.modal__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 2px solid rgba(255,181,216,.55);
}
.modal__title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 1px;
}
.modal__close{
  border: 0;
  background: #fff;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 26px;
  font-weight: 900;
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(255,90,168,.14);
}
.modal__close:active{ transform: translateY(1px) scale(.99); }
.modal__body{
  padding: 14px 16px 16px;
  color: var(--ink);
}
.help__sec{ margin-bottom: 14px; }
.help__h{
  font-weight: 900;
  margin-bottom: 8px;
}
.help__list{
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}

@media (max-width: 720px){
  .top{ flex-wrap: wrap; justify-content: center; }
  .topRight{ justify-content: center; flex-wrap: wrap; }
  .difficulty{ justify-content: center; flex-wrap: wrap; }
  .controls{ width: min(92vmin, 420px); }
}

/* iPad / tablet landscape: make the play area larger and keep board + controls side-by-side. */
@media (min-width: 900px) and (orientation: landscape){
  .main{
    flex-wrap: nowrap;
    gap: 18px;
    align-items: center;
  }
  .boardWrap{
    width: min(calc(var(--vh) * 88), 720px);
  }
  .controls{
    width: min(420px, 40vw);
    gap: 12px;
  }
  .pad{ gap: 12px; }
  .key{
    min-height: 78px;
    font-size: 34px;
  }
  .btn.big{
    min-height: 60px;
    font-size: 28px;
  }
}