.board-wrap{
  position:relative;
  z-index:1;
  background: linear-gradient(145deg, rgba(255,255,255,calc(.07 * var(--effect-3d, 1))), rgba(0,0,0,calc(.12 * var(--effect-3d, 1)))), var(--panel-texture, none), var(--bg-panel);
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px;
  width:100%;
  max-width:400px;
  margin:0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,calc(.12 * var(--effect-3d, 1))),
    inset 0 -2px 4px rgba(0,0,0,calc(.25 * var(--effect-3d, 1))),
    var(--card-shadow, 0 1px 3px rgba(0,0,0,.12));
}

canvas{
  display:block;
  border-radius:var(--tile-radius, 3px);
  border:1px solid var(--border);
  background:var(--canvas-bg);
  width:100%;
  height:auto;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,calc(.3 * var(--effect-3d, 1))),
    inset 0 -1px 0 rgba(255,255,255,calc(.05 * var(--effect-3d, 1)));
}

.mobile-controls{
  display:flex;
  gap:8px;
  margin-top:10px;
}
.ctrl-btn{
  flex:1;
  aspect-ratio: 1 / 1;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,calc(.16 * var(--effect-3d, 1))) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,calc(.14 * var(--effect-3d, 1))) 100%), var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,calc(.22 * var(--effect-3d, 1))),
    inset 0 -2px 1px rgba(0,0,0,calc(.16 * var(--effect-3d, 1))),
    var(--badge-shadow, 0 1px 2px rgba(0,0,0,.12));
  border-radius: var(--tile-radius, 6px);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  transition: transform .1s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ctrl-btn svg{ display:block; }
.ctrl-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,calc(.28 * var(--effect-3d, 1))),
    inset 0 -2px 1px rgba(0,0,0,calc(.14 * var(--effect-3d, 1))),
    var(--card-shadow-hover, 0 3px 8px rgba(0,0,0,.16));
}
.ctrl-btn:active{
  background: linear-gradient(180deg, rgba(0,0,0,calc(.22 * var(--effect-3d, 1))) 0%, rgba(0,0,0,0) 50%, rgba(255,255,255,calc(.1 * var(--effect-3d, 1))) 100%), var(--red-ink);
  border-color:var(--red-ink);
  transform:scale(0.93);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,calc(.35 * var(--effect-3d, 1))),
    0 1px 1px rgba(0,0,0,calc(.15 * var(--effect-3d, 1)));
}

.next-letter{
 font-size:var(--text-size);
 letter-spacing:.05em;
 }

#confirm-modal{ background:rgba(18,17,15,.40); }

#modal-word-image{
  display:block;
  width:min(240px, 60vw);
  height:min(240px, 60vw);
  margin:0 auto 14px;
  background:transparent;
  object-fit:contain;
}

#modal-word{
  font-family:var(--font-type);
  font-size:34px;
  letter-spacing:.08em;
  margin:0 0 6px;
  color:var(--modal-accent);
}

.pause-overlay{
  position:absolute; inset:0;
  z-index:1;
  background:rgba(18,17,15,.72);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  border-radius:3px;
  cursor:pointer;
}
.pause-overlay.hidden{ display:none; }

.pause-overlay .pause-label{
  font-family:var(--font-type);
  font-size:38px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--paper);
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.pause-overlay .pause-hint{
  font-family:var(--font-ui);
  font-size:12px;
  letter-spacing:.03em;
  color:var(--paper);
  opacity:.75;
}

@media (max-width: 620px){
  .topbar-controls{ flex-wrap:wrap; }

  .layout{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "dict     dict     dict"
      "next     wordbox  wordbox"
      "board    board    board"
      "score    level    lives"
      "stage    stage    stage"
      "help     help     help";
    gap:8px;
  }
  .side-panel{ display:contents; }
  .board-column{ display:contents; }
  .stat-row{ display:contents; }

  #dict-stat{ grid-area: dict; margin:0; }
  .board-wrap{ grid-area: board; margin:0; max-width:none; width:100%; }
  #score-stat{ grid-area: score; margin:0; }
  #level-stat{ grid-area: level; margin:0; }
  #stage-stat{ grid-area: stage; margin:0; }
  #lives-stat{ grid-area: lives; margin:0; }
  .controls-help{ grid-area: help; margin:0; }

  #next-letter-stat{
    grid-area: next;
    margin:0;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    scroll-margin-top:8px;
  }
  #next-letter-stat .stat-label{ display:none; }
  #next-letter-stat .stat-value{ font-size:18px; letter-spacing:.12em; }

  .log{
    grid-area: wordbox;
    margin:0;
    height:36px;
    min-height:0;
    max-height:none;
    padding:0 10px;
    display:flex;
    align-items:center;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .log::-webkit-scrollbar{ display:none; }
  .log-title{ display:none; }

  #word-log{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:0;
    white-space:nowrap;
    font-size:12px;
  }
  #word-log li{
    display:inline-flex;
    align-items:center;
    gap:4px;
    flex-shrink:0;
    white-space:nowrap;
    padding:0 10px 0 0;
    margin-right:10px;
    border-bottom:none;
    border-right:var(--log-divider-width, 1px) var(--log-divider-style, dashed) var(--log-divider);
  }
  #word-log li:last-child{
    border-right:none;
    margin-right:0;
  }

  #dict-stat, #stage-stat, #score-stat, #next-letter-stat, #level-stat,
  #lives-stat, .log, .controls-help, .board-wrap{
    min-width:0;
  }

  .mobile-controls{ margin-top:12px; }
}