:root {
  font-family:ui-rounded,"Microsoft YaHei",system-ui,sans-serif;
  color:#263944;
  background:#f7f6ed;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  min-width:320px
}

button,input,select {
  font:inherit
}

button {
  cursor:pointer
}

button:disabled {
  cursor:not-allowed;
  opacity:.48
}

button:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #e99e4d;
  outline-offset:3px
}

.hidden {
  display:none!important
}

.screen {
  min-height:100dvh
}

.button {
  border:0;
  border-radius:15px;
  padding:12px 22px;
  min-height:46px;
  font-weight:800;
  transition:transform .15s,box-shadow .15s;
  background:#fff;
  color:#26434b;
  box-shadow:0 4px 0 #d7e0dc
}

.button:not(:disabled):hover {
  transform:translateY(-2px);
  box-shadow:0 6px 0 #d7e0dc
}

.button:not(:disabled):active {
  transform:translateY(2px);
  box-shadow:0 1px 0 #d7e0dc
}

.button.primary {
  color:#fff;
  background:#25a57d;
  box-shadow:0 5px 0 #187b5e
}

.button.primary:hover {
  box-shadow:0 7px 0 #187b5e
}

.button.primary:active {
  box-shadow:0 1px 0 #187b5e
}

.button.big {
  font-size:1.2rem;
  min-width:210px;
  min-height:58px
}

.button.subtle {
  border:1px solid #d4e1da;
  background:#fff
}

.text-button {
  border:0;
  background:transparent;
  color:#52716f;
  text-decoration:underline;
  text-underline-offset:4px;
  min-height:44px;
  padding:8px 10px
}

.text-button:hover {
  color:#187b5e
}

.home-screen {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:24px 18px max(24px,env(safe-area-inset-bottom));
  background:radial-gradient(circle at 12% 20%,#dff5e5 0,transparent 27%),radial-gradient(circle at 86% 83%,#ffecd2 0,transparent 29%),#f7f6ed
}

.home-card {
  text-align:center;
  width:min(100%,640px);
  padding:36px 26px 26px;
  border:3px solid #e5e6d8;
  border-radius:32px;
  background:#fffefa;
  box-shadow:0 15px 0 #e5e6d8,0 28px 44px #94ac9b30
}

.brand-mark {
  font-size:.84rem;
  letter-spacing:.28em;
  font-weight:800;
  color:#36a47e
}

.home-card h1 {
  font-size:clamp(2.8rem,8vw,5rem);
  letter-spacing:.09em;
  line-height:1.1;
  margin:16px 0 0;
  color:#26515b
}

.hero {
  display:block;
  width:min(100%,510px);
  height:auto;
  margin:5px auto 0
}

.home-summary {
  margin:0 auto 20px;
  font-size:.93rem;
  color:#71817d
}

.home-settings {
  margin-top:35px;
  font-size:.88rem
}

.game-screen {
  position:relative;
  background:linear-gradient(180deg,#e9f5ed,#f7f6ed 38%)
}

.game-header {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  max-width:1400px;
  margin:auto;
  padding:14px max(18px,env(safe-area-inset-left)) 10px
}

.brand-small {
  font-size:1.3rem;
  font-weight:900;
  color:#22785f;
  margin-right:auto;
  white-space:nowrap
}

.stat {
  display:flex;
  gap:3px;
  flex-direction:column;
  min-width:94px;
  padding:7px 13px;
  border-radius:14px;
  background:#ffffffd6;
  border:1px solid #dbe8de
}

.stat span {
  font-size:.75rem;
  color:#6c817c
}

.stat strong {
  font-size:1.04rem
}

.game-main {
  max-width:1400px;
  margin:auto;
  padding:8px 18px max(30px,env(safe-area-inset-bottom));
}

.category-panel {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 14px;
  border:1px dashed #b4d7c7;
  background:#f9fffa;
  border-radius:14px;
  margin-bottom:14px
}

.category-panel>span {
  color:#5a7168;
  white-space:nowrap;
  font-weight:700;
  font-size:.9rem
}

.category-list {
  display:flex;
  flex-wrap:wrap;
  gap:5px 8px
}

.category-list span {
  font-size:.88rem;
  color:#306b5a
}

.category-list span+span::before {
  content:"·";
  margin-right:8px;
  color:#9eb8a7
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin:8px 0
}

.section-heading h2 {
  font-size:1rem;
  letter-spacing:.04em;
  margin:0
}

.section-heading span {
  color:#6f8580;
  font-size:.83rem
}

.board-shell {
  position:relative;
  overflow:auto;
  width:100%;
  max-height:min(53vh,620px);
  min-height:190px;
  border-radius:22px;
  border:2px solid #c8e3d2;
  background-color:#dceee0;
  background-image:radial-gradient(#b6d8bc 1.2px,transparent 1.2px);
  background-size:18px 18px;
  box-shadow:inset 0 3px 12px #83b89438;
  scrollbar-width:thin
}

.board-canvas {
  position:relative;
  transform-origin:top left
}

.word-card {
  border:2px solid #668f8a;
  border-radius:13px;
  background:linear-gradient(#ffffff,#f7fbf5);
  color:#24464d;
  font-size:20px;
  font-weight:800;
  line-height:1.06;
  text-align:center;
  box-shadow:0 5px 0 #a0c2b6,0 7px 9px #37604f33;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-wrap:anywhere;
  word-break:normal;
  padding:3px 7px;
  user-select:none
}

.board-card {
  position:absolute;
  overflow:hidden
}

.board-card:not(:disabled):hover {
  background:#fffcdf;
  filter:brightness(1.02)
}

.board-card:disabled {
  opacity:1;
  color:#24464d
}

.tray,.reserve {
  display:grid;
  gap:6px
}

.tray {
  grid-template-columns:repeat(10,minmax(0,1fr))
}

.reserve {
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:390px
}

.slot {
  min-width:0;
  min-height:68px;
  border:2px dashed #acc9bd;
  border-radius:13px;
  background:#ffffff98;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative
}

.slot .word-card {
  width:100%;
  height:64px;
  font-size:clamp(14px,1.35vw,18px);
  box-shadow:0 3px 0 #a0c2b6;
  overflow:hidden
}

.slot .word-card:disabled {
  opacity:1
}

.reserve .slot .word-card {
  font-size:16px
}

.slot-number {
  position:absolute;
  color:#a8beb1;
  font-size:.8rem;
  font-weight:800
}

.reserve-heading {
  margin-top:15px
}

.game-actions {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px
}

.button.tool {
  background:#fff4d9;
  box-shadow:0 4px 0 #e8cc91
}

.game-actions .text-button:first-of-type {
  margin-left:auto
}

#trayStatus {
  color:#b05b30;
  font-weight:800
}

.privacy-cover {
  position:fixed;
  inset:0;
  z-index:20;
  background:#dcefe9;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px
}

.game-screen.paused .board-shell,.game-screen.paused .tray,.game-screen.paused .reserve {
  visibility:hidden
}

.pause-card {
  text-align:center;
  background:#fffefa;
  border-radius:26px;
  padding:36px;
  max-width:400px;
  width:100%;
  box-shadow:0 15px 0 #bedbd0
}

.pause-icon {
  font-size:3rem;
  color:#25a57d;
  line-height:1
}

.pause-card h2 {
  font-size:1.8rem;
  margin:13px 0 4px
}

.pause-card p {
  color:#71817d;
  margin:0 0 22px
}

.end-screen {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  background:radial-gradient(circle at 20% 20%,#e0f5e4,transparent 40%),#f7f6ed
}

.end-card {
  width:min(100%,630px);
  background:#fffefa;
  border-radius:30px;
  padding:30px;
  box-shadow:0 14px 0 #d9e6d9;
  text-align:center
}

.end-spark {
  font-size:2.8rem;
  color:#f4b850
}

.end-card h1 {
  font-size:clamp(1.8rem,5vw,2.6rem);
  margin:4px 0;
  color:#245a5a
}

.end-stats {
  color:#66827b;
  margin:0 0 22px
}

.end-card h2 {
  text-align:left;
  font-size:1.05rem
}

.review-list {
  max-height: min(42vh,350px);
  overflow:auto;
  text-align:left;
  border:1px solid #e0e9db;
  border-radius:14px;
  background:#f9fcf8
}

.review-row {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:8px;
  padding:9px 13px;
  border-bottom:1px solid #e0e9db
}

.review-row:last-child {
  border-bottom:0
}

.review-row strong {
  color:#305f61
}

.review-row span:last-child {
  color:#69827b
}

.review-empty {
  padding:18px;
  color:#7c8d87
}

.end-actions {
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px
}

.modal-overlay {
  position:fixed;
  inset:0;
  z-index:60;
  background:#193d41b8;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  backdrop-filter:blur(5px)
}

.settings-card,.confirm-card,.loading-card {
  width:min(100%,620px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  padding:24px;
  background:#fffefa;
  border-radius:24px;
  box-shadow:0 12px 0 #254d48
}

.modal-head {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:12px
}

.modal-head h2 {
  margin:0 0 18px;
  font-size:1.6rem
}

.eyebrow {
  font-size:.7rem;
  letter-spacing:.18em;
  font-weight:800;
  color:#30a77d;
  margin:0 0 4px
}

.icon-button {
  background:#edf5ef;
  border:0;
  border-radius:10px;
  width:44px;
  height:44px;
  font-size:1.8rem;
  color:#3d6b60
}

.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}

.form-grid label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.86rem;
  font-weight:700;
  color:#4a6760
}

.form-grid input,.form-grid select {
  width:100%;
  border:1px solid #bad1c5;
  border-radius:11px;
  padding:9px 11px;
  min-height:44px;
  background:white;
  color:#25464b
}

.form-grid input:disabled {
  background:#edf1ec;
  color:#8c9d94
}

.total-row {
  display:flex;
  justify-content:space-between;
  margin:18px 0 0;
  padding:12px 0;
  border-top:1px solid #e2eae3
}

.form-error {
  min-height:20px;
  color:#b64137;
  font-size:.86rem;
  margin:6px 0
}

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

.confirm-card,.loading-card {
  text-align:center;
  max-width:420px
}

.confirm-card h2,.loading-card h2 {
  margin:0 0 8px
}

.confirm-card p,.loading-card p {
  color:#647d76
}

.confirm-card .modal-actions {
  justify-content:center;
  margin-top:22px
}

.spinner {
  width:34px;
  height:34px;
  margin:0 auto 20px;
  border:4px solid #d7ebdf;
  border-top-color:#25a57d;
  border-radius:50%;
  animation:spin .75s linear infinite
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}

.animation-layer {
  position:fixed;
  inset:0;
  z-index:30;
  pointer-events:none;
  overflow:hidden
}

.floating-card {
  position:fixed;
  z-index:1
}

.particle {
  position:fixed;
  width:8px;
  height:8px;
  background:#f7ba4a;
  border-radius:3px;
  pointer-events:none
}

@media(max-width:700px) {
  .game-header {
    gap:6px;
    padding:10px 12px
  }
  .brand-small {
    width:100%;
    font-size:1.1rem
  }
  .stat {
    flex:1;
    min-width:0;
    padding:5px 8px
  }
  .stat strong {
    font-size:.92rem
  }
  .game-header .button {
    min-height:42px;
    padding:7px 11px
  }
  .game-main {
    padding:8px 11px max(30px,env(safe-area-inset-bottom))
  }
  .board-shell {
    max-height:48vh
  }
  .tray {
    grid-template-columns:repeat(5,minmax(0,1fr))
  }
  .slot {
    min-height:68px
  }
  .slot .word-card {
    height:64px;
    font-size:14px;
    padding:2px
  }
  .reserve .slot .word-card {
    font-size:15px
  }
  .section-heading span {
    font-size:.73rem
  }
  .game-actions .text-button:first-of-type {
    margin-left:0
  }
  .game-actions {
    justify-content:center
  }
  .category-panel {
    display:block
  }
  .category-panel>span {
    display:block;
    margin-bottom:4px
  }
  .form-grid {
    gap:9px
  }
  .settings-card {
    padding:18px
  }
  .home-card {
    padding:27px 12px 23px
  }
  .home-settings {
    margin-top:28px
  }
}

@media(max-width:390px) {
  .form-grid {
    grid-template-columns:1fr 1fr
  }
  .form-grid label {
    font-size:.78rem
  }
  .form-grid input,.form-grid select {
    padding:8px 5px
  }
  .reserve {
    max-width:100%
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    transition-duration:.01ms!important
  }
}

.notice {
  position:fixed;
  left:50%;
  bottom:max(16px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:90;
  background:#294b4b;
  color:white;
  border-radius:12px;
  padding:10px 15px;
  box-shadow:0 6px 20px #0003;
  text-align:center;
  max-width:calc(100vw - 20px)
}