:root{
  --bg:#0f1117;
  --panel:#181c25;
  --panel-2:#202633;
  --line:#31394b;
  --text:#eef2ff;
  --muted:#aab4cf;
  --accent:#6ea8ff;
  --good:#35c46a;
  --bad:#ff6b6b;
  --warn:#ffca57;
  --board:#f6efe2;
  --tile:#f3d8a3;
  --tile-edge:#c5a46a;
  --cell:#fbf6ee;
  --shadow:0 12px 28px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:radial-gradient(circle at top,#171d2b 0%,#0f1117 45%,#0b0d12 100%);
  color:var(--text);
  min-height:100vh;
}
button,select,input{
  font:inherit;
}
a{color:var(--accent)}
.app-shell{
  max-width:1600px;
  margin:0 auto;
  padding:18px;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.koelogo { height: 40px; }
.brand h1{
  margin:0;
  font-size:20px;
  line-height:1;
  display: inline;
}
.brand p{
  margin:8px 0 0;
  color:var(--muted);
}
.topbar-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#273247,#1c2432);
  color:var(--text);
  border-radius:14px;
  padding:11px 16px;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .15s ease, opacity .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.primary{
  background:linear-gradient(180deg,#5f98ff,#386bca);
  border-color:#78a7ff;
}
.btn.ghost{
  background:rgba(255,255,255,.04);
  box-shadow:none;
}
.layout{
  display:grid;
  grid-template-columns:minmax(740px,1fr) 360px;
  gap:18px;
  align-items:start;
  overflow:visible;
}
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:16px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
  overflow:visible;
}
.board-wrap{
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:visible;
}
.board-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  border:1px solid rgba(255,255,255,.08);
  font-size:14px;
}
.board-scroll{
  overflow:visible;
}
.board{
  display:grid;
  grid-template-columns:repeat(13,minmax(36px,1fr));
  gap:3px;
  background:#8b6a4b;
  padding:6px;
  border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), var(--shadow);
}
.cell{
  position:relative;
  aspect-ratio:1/1;
  border:none;
  border-radius:10px;
  background:var(--cell);
  color:#20242d;
  cursor:pointer;
  padding:0;
  overflow:hidden;
}
.cell:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:1px;
}
.cell.empty:hover{
  filter:brightness(.98);
}
.cell.drop-target{
  box-shadow:inset 0 0 0 3px #356dff;
}
.cell-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.8;
}
.cell.small-label .cell-label{
  font-size:9px;
}
.cell.center-star .cell-label{
  font-size:24px;
}
.cell.dl{background:#bfe3ff}
.cell.tl{background:#57b4ff;color:#fff}
.cell.dw{background:#ffd0d7}
.cell.tw{background:#ff7f8d;color:#fff}
.cell.dw.center-star {     background: #ffe8b1; }
.cell.normal{background:var(--cell)}
.tile{
  position:absolute;
  inset:2px;
  border-radius:8px;
  background:linear-gradient(180deg,#f8dfb1,#e8c685);
  box-shadow:inset 0 0 0 1px rgba(117,77,16,.28), 0 4px 10px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:clamp(18px,2vw,24px);
  color:#422a08;
}
.tile.temp{
  box-shadow:inset 0 0 0 1px #356dff, 0 1px 1px rgba(0,0,0,.18);
}
.tile.blank{
  background:linear-gradient(180deg,#f7ead3,#eadcbf);
}
.tile[draggable="true"]{
  cursor:grab;
}
.tile.dragging{
  opacity:.5;
  cursor:grabbing;
}
.tile .value{
  position:absolute;
  right:6px;
  bottom:4px;
  font-size:11px;
  font-weight:800;
}
.tile .blank-mark{
  position:absolute;
  left:6px;
  top:4px;
  font-size:10px;
  opacity:.65;
}
.sidebar{
  position:sticky;
  top:18px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:16px;
  height:fit-content;
}
.sidebar-inner{
  display:flex;
  flex-direction:column;
  gap:16px;
  position:sticky;
  top:18px;
  
}
.section-title{
  margin:0 0 12px;
  font-size:18px;
}
.scoreboard{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.player-card{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:12px;
}
.player-card.active{
  border-color:#76a6ff;
  box-shadow:inset 0 0 0 1px rgba(118,166,255,.28);
}
.player-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.player-name{
  font-weight:800;
}
.player-type{
  color:var(--muted);
  font-size:13px;
}
.player-score{
  font-size:26px;
  font-weight:900;
}
.player-rack-preview{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.mini-tile{
  min-width:26px;
  height:30px;
  border-radius:8px;
  background:linear-gradient(180deg,#f8dfb1,#e8c685);
  color:#422a08;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  position:relative;
  padding:0 6px;
}
.mini-tile.blank{background:linear-gradient(180deg,#f7ead3,#eadcbf)}
.status-box{
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.status-box.thinking{
  border-color:rgba(118,166,255,.38);
  background:rgba(110,168,255,.08);
  box-shadow:inset 0 0 0 1px rgba(118,166,255,.18), 0 0 0 1px rgba(118,166,255,.06);
}
.status-box strong{
  display:block;
  margin-bottom:6px;
}
.status-box.thinking strong::after{
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  margin-left:8px;
  border-radius:999px;
  background:var(--accent);
  animation:thinkingPulse 1s ease-in-out infinite;
  vertical-align:middle;
}
.status-text{
  color:var(--muted);
  line-height:1.45;
  border-radius:10px;
  transition:color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.status-text.status-flash{
  animation: statusFlash 1s ease;
}

@keyframes statusFlash{
  0%{
    color:#ffffff;
    background:rgba(110,168,255,.26);
    box-shadow:0 0 0 0 rgba(110,168,255,0);
  }
  35%{
    color:#ffffff;
    background:rgba(110,168,255,.34);
    box-shadow:0 0 0 6px rgba(110,168,255,.12);
  }
  100%{
    color:var(--muted);
    background:rgba(110,168,255,0);
    box-shadow:0 0 0 0 rgba(110,168,255,0);
  }
}
.rack-panel{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.game-dock{
  position:sticky;
  bottom:12px;
  z-index:30;
  margin-top:0;
  padding:14px 14px 12px;
  border-radius:22px;
  background:rgba(10,13,19,.86);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 48px rgba(0,0,0,.38);
  backdrop-filter:blur(14px);
}
.rack-bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.rack-main{
  min-width:0;
}
.rack{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  min-height:72px;
}
.game-dock .rack{
  justify-content:center;
}
.rack.drop-target{
  outline:2px dashed rgba(110,168,255,.75);
  outline-offset:8px;
  border-radius:16px;
}
.rack-tile{
  width:62px;
  height:72px;
  border:none;
  border-radius:14px;
  background:linear-gradient(180deg,#f8dfb1,#e8c685);
  color:#422a08;
  box-shadow:inset 0 0 0 1px rgba(117,77,16,.28), var(--shadow);
  position:relative;
  font-size:34px;
  font-weight:900;
  cursor:pointer;
}
.rack-tile[draggable="true"]{
  cursor:grab;
}
.rack-tile.dragging{
  opacity:.5;
  transform:scale(.96);
  cursor:grabbing;
}
.rack-tile.selected{
  outline:3px solid #6d9fff;
  transform:translateY(-2px);
}
.rack-tile.exchange-selected{
  outline:3px solid #ffb347;
}

.rack.exchange-mode-active .rack-tile{
  animation: rackExchangePulse 1.1s ease-in-out infinite;
}

.rack.exchange-mode-active .rack-tile.exchange-selected{
  animation: none;
  outline: 3px solid #ffb347;
  transform: translateY(-2px);
}

@keyframes rackExchangePulse{
  0%, 100%{
    transform: translateY(0);
    box-shadow:
      inset 0 0 0 5px rgba(117,77,16,.28),
      0 0 0 0 rgba(255,179,71,0),
      var(--shadow);
  }
  50%{
    transform: translateY(-2px);
    box-shadow:
      inset 0 0 0 5px rgba(117,77,16,.28),
      0 0 0 4px rgba(255,179,71,.18),
      var(--shadow);
  }
}
.rack-tile .value{
  position:absolute;
  right:8px;
  bottom:6px;
  font-size:13px;
  font-weight:900;
}
.rack-tile .blank-mark{
  position:absolute;
  left:8px;
  top:6px;
  font-size:11px;
  opacity:.65;
}
.rack-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.game-dock .rack-actions{
  justify-content:center;
}
.game-dock .section-title{
  margin-bottom:10px;
}
.legend{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.legend-item{
  padding:10px;
  border-radius:12px;
  text-align:center;
  color:#222;
  font-size:13px;
  font-weight:800;
}
.legend-item.dl{background:#bfe3ff}
.legend-item.tl{background:#57b4ff;color:#fff}
.legend-item.dw{background:#ffd0d7}
.legend-item.tw{background:#ff7f8d;color:#fff}
.legend-item.center{background:#ffe8b1}
.log{
  max-height:260px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.panel-log{
  min-height:0;
  overflow:hidden;
}
.sidebar-inner .log{
  max-height:calc(100vh - 360px);
}
.log-item{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.log-item small{
  display:block;
  color:var(--muted);
  margin-top:4px;
}
.overlay{
  position:fixed;
  inset:0;
  background:rgba(5,7,11,.76);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:99;
}
.hidden{display:none!important}

.boot-loading{
  z-index:120;
}

.boot-loading-card{
  width:min(460px, calc(100vw - 32px));
  padding:28px 24px;
  border-radius:24px;
  background:linear-gradient(180deg,#171d29,#11161f);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  text-align:center;
}

.boot-loading-card h3{
  margin:0 0 10px;
  font-size:28px;
}

.boot-loading-card p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.boot-loading-spinner{
  width:52px;
  height:52px;
  margin:0 auto 16px;
  border-radius:999px;
  border:4px solid rgba(255,255,255,.12);
  border-top-color:#6ea8ff;
  animation:bootSpin .9s linear infinite;
}

@keyframes bootSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@media (max-width:860px){
  .boot-loading-card{
    padding:24px 18px;
    border-radius:20px;
  }

  .boot-loading-card h3{
    font-size:24px;
  }

  .boot-loading-card p{
    font-size:15px;
  }
}

.modal{
  width:min(760px,100%);
  background:linear-gradient(180deg,#171d29,#11161f);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  padding:22px;
  box-shadow:var(--shadow);
}
.modal h2{
  margin:0 0 10px;
  font-size:30px;
}
.modal p{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.5;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field label{
  color:var(--muted);
  font-size:14px;
}
.field select,
.field input{
  width:100%;
  border-radius:14px;
  border:1px solid var(--line);
  background:#0f1420;
  color:var(--text);
  padding:12px 14px;
}
.hint-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:20px;
}
.hint{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:12px;
  color:var(--muted);
  font-size:14px;
}
.footer-note{
  color:var(--muted);
  font-size:13px;
  margin-top:14px;
}


/* Multiplayer v0.1 */
.online-card{
  flex:1 1 320px;
  max-width:520px;
  border:1px solid rgba(110,168,255,.22);
  background:rgba(110,168,255,.08);
  border-radius:18px;
  padding:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

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

.online-status{
  color:var(--muted);
  font-size:13px;
  margin-top:4px;
}

.online-link{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,20,32,.92);
  color:var(--text);
  padding:10px 12px;
  font-size:13px;
}

.modal .field input::placeholder{
  color:rgba(170,180,207,.58);
}

@media (max-width:860px){
  .board-meta{
    align-items:stretch;
  }

  .online-card{
    max-width:none;
    width:100%;
  }

  .online-card-top{
    align-items:flex-start;
    flex-direction:column;
  }

  .online-card-top .btn{
    width:100%;
  }
}


.chat-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chat-panel.hidden{display:none!important}
.chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.chat-head .section-title{margin-bottom:0}
.chat-badge{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(110,168,255,.12);
  border:1px solid rgba(110,168,255,.22);
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.chat-messages{
  min-height:150px;
  max-height:240px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  scroll-behavior:smooth;
}
.chat-empty{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}
.chat-msg{
  display:flex;
  flex-direction:column;
  gap:4px;
  max-width:88%;
  align-self:flex-start;
  padding:8px 10px;
  border-radius:14px 14px 14px 5px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.07);
}
.chat-msg.mine{
  align-self:flex-end;
  border-radius:14px 14px 5px 14px;
  background:rgba(110,168,255,.16);
  border-color:rgba(110,168,255,.25);
}
.chat-meta{
  display:flex;
  gap:7px;
  align-items:center;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.chat-text{
  color:var(--text);
  font-size:13px;
  line-height:1.35;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}
.chat-form{
  display:flex;
  gap:8px;
}
.chat-form input{
  min-width:0;
  flex:1;
  border-radius:14px;
  border:1px solid var(--line);
  background:#0f1420;
  color:var(--text);
  padding:11px 12px;
  outline:none;
}
.chat-form input:focus{
  border-color:rgba(110,168,255,.7);
  box-shadow:0 0 0 3px rgba(110,168,255,.12);
}
.chat-form .btn{
  padding:10px 12px;
  box-shadow:none;
}
.chat-form .btn:disabled,
.chat-form input:disabled{
  opacity:.5;
  cursor:not-allowed;
}

body.touch-dragging{
  user-select:none;
  -webkit-user-select:none;
}
.tile,
.rack-tile{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.touch-drag-ghost{
  position:fixed;
  top:0;
  left:0;
  z-index:220;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.98);
  opacity:0;
  transition:opacity .08s linear, transform .08s linear;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.24));
}
.touch-drop-preview{
  position:fixed;
  top:0;
  left:0;
  width:30px;
  height:30px;
  z-index:221;
  pointer-events:none;
  transform:translate(-50%,-50%);
  border-radius:8px;
  border:2px dashed rgba(255,255,255,.72);
  background:rgba(110,168,255,.12);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
  opacity:0;
  transition:opacity .06s linear, border-color .06s linear, background .06s linear, box-shadow .06s linear;
}

.touch-drop-preview.visible{
  opacity:1;
}

.touch-drop-preview.valid{
  border-style:solid;
  border-color:#35c46a;
  background:rgba(53,196,106,.26);
  box-shadow:
    0 0 0 5px rgba(53,196,106,.16),
    0 10px 22px rgba(0,0,0,.3);
}
.board{
  position:relative;
  isolation:isolate;
}

.cell{
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
  transform-origin:center center;
  z-index:1;
}

.touch-drag-ghost.visible{
  opacity:.96;
}



.touch-drag-ghost .value,
.touch-drag-ghost .blank-mark{
  pointer-events:none;
}

@media (max-width:1200px){
  .layout{grid-template-columns:1fr}
  .sidebar,
  .sidebar-inner{position:static;top:auto;max-height:none}
  .game-dock{bottom:10px}
}
@media (max-width:860px){
  body{overflow-x:hidden}
  .app-shell{padding:12px 10px}
  .topbar{align-items:center;flex-direction:column}
  .topbar-actions{width:100%}
  .topbar-actions .btn{width:100%}
  .board-wrap{padding-bottom:290px}
  .board-scroll{
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
    margin-inline:-2px;
  }
  .board{
    width:max-content;
    grid-template-columns:repeat(13, clamp(18px, 5.7vw, 24px));
    gap:2px;
    padding:4px;
    border-radius:16px;
    margin:0 auto;
  }
  .cell{border-radius:7px}
  .cell-label{font-size:7px}
  .cell.small-label .cell-label{font-size:6px}
  .cell.center-star .cell-label{font-size:18px}
  .tile{font-size:clamp(13px,4.6vw,18px);border-radius:6px}
  .tile .value{right:4px;bottom:3px;font-size:8px; display: none;}
  .tile .blank-mark{left:4px;top:3px;font-size:8px}
  .badges{gap:6px}
  .badge{padding:7px 10px;font-size:12px}
  .sidebar{margin-top:12px}
  .sidebar-inner{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .chat-panel{grid-column:1/-1}
  .chat-messages{max-height:180px;min-height:126px}
  .chat-form{flex-direction:column}
  .chat-form .btn{width:100%}
  .sidebar-inner > .panel:last-child{grid-column:1/-1}
  .panel{padding:14px;border-radius:20px}
  .section-title{font-size:16px;margin-bottom:10px}
  .player-card{padding:10px;border-radius:15px}
  .player-score{font-size:22px}
  .player-rack-preview{gap:4px}
  .mini-tile{min-width:22px;height:26px;border-radius:7px;padding:0 5px;font-size:12px}
  .status-box{padding:12px;border-radius:14px}
  .panel-log .log,
  .sidebar-inner .log{max-height:180px}
  .game-dock{
    bottom:max(8px, env(safe-area-inset-bottom));
    padding:12px 10px calc(10px + env(safe-area-inset-bottom));
    border-radius:18px;
  }
  .game-dock .rack-bar{flex-direction:column;align-items:stretch;gap:12px}
  .rack{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px;min-height:auto}
  .rack-tile{width:44px;height:54px;font-size:24px;border-radius:12px;flex:0 0 auto}
  .rack-tile .value{right:6px;bottom:5px;font-size:16px}
  .rack-tile .blank-mark{left:6px;top:5px;font-size:10px}
  .rack-actions{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(10px,1fr));
    gap:8px;
  }
  .rack-actions .btn{
    width:100%;
    padding:10px 8px;
    font-size:13px;
    border-radius:12px;
  }
  .legend{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .legend-item{font-size:12px;padding:9px}
  .form-grid,.hint-list{grid-template-columns:1fr}

    .cell.touch-focus-center,
  .cell.touch-focus-near,
  .cell.touch-focus-far{
    overflow:visible;
  }

  .cell.touch-focus-center{
    z-index:7;
    transform:scale(1.34);
    box-shadow:
      inset 0 0 0 3px rgba(110,168,255,.82),
      0 10px 22px rgba(0,0,0,.26);
    filter:brightness(1.02);
  }

  .cell.touch-focus-near{
    z-index:6;
    transform:scale(1.14);
    filter:brightness(1.02);
  }

  .cell.touch-focus-far{
    z-index:5;
    transform:scale(1.07);
  }
}
@media (max-width:560px){
  .app-shell{padding:10px 8px}
  .brand h1{font-size:20px}
  .brand p{font-size:13px}
  .sidebar-inner{grid-template-columns:1fr}
  .sidebar-inner > .panel:last-child{grid-column:auto}
  .board-wrap{padding-bottom:314px}
  .board{
    grid-template-columns:repeat(13, clamp(20px, 5.45vw, 35px));
    gap:2px;
  }
  .rack-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legend{grid-template-columns:1fr 1fr}
}
@keyframes thinkingPulse{
  0%,100%{transform:scale(.8);opacity:.55}
  50%{transform:scale(1.1);opacity:1}
}
@media (max-width: 860px) {
    .game-dock {

        zoom: 0.50;
    }
    .board-wrap { 
      padding-bottom: 0px;
    }
        .rack-actions .btn {
        font-size: 30px;
        }
            .rack-tile {
        width: 84px;
        height: 84px;
        font-size: 30px;
            }
                .legend-item {
        font-size: 14px;
        font-weight: 400;
    }

    .game-dock .section-title {
          font-size: 28px;
    }

  }


  .game-dock-mobile-status,
.mobile-legend-panel{
  display:none;
}

@media (max-width:860px){
  .sidebar{
    order:0;
  }

  .status-panel-desktop,
  .game-dock-legend-desktop{
    display:none;
  }

  .game-dock-mobile-status,
  .mobile-legend-panel{
    display:block;
  }

  .game-dock-mobile-status .status-box-mobile{
    padding:10px 12px;
    border-radius:14px;
  }

  .game-dock-mobile-status .status-text{
    font-size:26px;
    line-height:1.35;
  }
   

   .cell.drop-target{
    overflow:visible;
    z-index:12;
    transform:scale(1.15);
    box-shadow:
      inset 0 0 0 3px #356dff,
      0 0 0 5px rgba(53,109,255,.16),
      0 12px 22px rgba(0,0,0,.22);
  }

    .cell{
    transition:transform .03s linear, box-shadow .03s linear, filter .03s linear;
  }

  .cell.drop-target{
    transition:transform .03s linear, box-shadow .03s linear, filter .03s linear;
  }
}

@media (min-width:861px){
  .touch-drop-lens{
    display:none !important;
  }
}
/* Zamunda.Games integration */
html, body, .sidebar-inner, .log, .chat-messages, .modal, .board-scroll {
  scrollbar-width: thin;
  scrollbar-color: #7c3aed rgba(15, 23, 41, 0.8);
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar-inner::-webkit-scrollbar,
.log::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.board-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.sidebar-inner::-webkit-scrollbar-track,
.log::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track,
.board-scroll::-webkit-scrollbar-track { background: rgba(15, 23, 41, 0.8); border-radius: 999px; }
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.sidebar-inner::-webkit-scrollbar-thumb,
.log::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.board-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a855f7, #475569);
  border: 2px solid rgba(15, 23, 41, 0.8);
  border-radius: 999px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .95), rgba(37, 99, 235, .82));
  box-shadow: 0 14px 32px rgba(124,58,237,.22);
  border: 1px solid rgba(255,255,255,.12);
}
.brand h1 {
  display: block;
  font-size: 22px;
  letter-spacing: -.02em;
}
.brand p {
  margin: 4px 0 0;
  font-size: 12px;
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
}
.lang-btn {
  border: 0;
  color: var(--muted);
  background: transparent;
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
}
.lang-btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 8px 18px rgba(124,58,237,.3);
}
.zamunda-account-note,
.zamunda-points-note {
  margin-top: 12px;
  border-radius: 16px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  background: rgba(255,255,255,.045);
  font-size: 13px;
}
.zamunda-account-note.is-logged-in {
  color: #bbf7d0;
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.09);
}
.zamunda-account-note.is-guest {
  color: #fed7aa;
  border-color: rgba(251,146,60,.28);
  background: rgba(251,146,60,.08);
}
.zamunda-account-note.is-loading {
  color: #bfdbfe;
  border-color: rgba(96,165,250,.24);
  background: rgba(96,165,250,.08);
}
#player-name.is-zamunda-locked {
  color: #bbf7d0;
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.08);
}
.footer-note a { display: none; }
@media (max-width: 900px) {
  .topbar { align-items: flex-start; }
  .topbar-actions { justify-content: flex-end; }
  .brand p { display: none; }
}


/* Zamunda.Games Scrabble mobile rack restore v2.0.2
   Keep the letter rack/actions dock visible on mobile, while the page/start modal remains scrollable. */
@media (max-width: 860px) {
  :root {
    --zg-scrabble-dock-space: 300px;
  }

  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-shell {
    padding-bottom: calc(var(--zg-scrabble-dock-space, 300px) + max(10px, env(safe-area-inset-bottom)));
  }

  .board-wrap {
    padding-bottom: var(--zg-scrabble-dock-space, 300px) !important;
  }

  .game-dock {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 90;
    margin: 0;
    max-height: min(44svh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    zoom: 1;
  }

  .game-dock .rack-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .game-dock .section-title {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .game-dock .rack {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    min-height: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .game-dock .rack-tile {
    width: 44px;
    height: 54px;
    flex: 0 0 auto;
    font-size: 24px;
  }

  .game-dock .rack-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .game-dock .rack-actions .btn {
    min-height: 42px;
    padding: 9px 8px;
    font-size: 13px;
    line-height: 1.15;
  }

  .game-dock-mobile-status .status-text {
    font-size: 13px;
  }

  .overlay {
    align-items: flex-start;
    overflow-y: auto;
    padding: max(10px, env(safe-area-inset-top)) 10px max(16px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .modal {
    width: 100%;
    max-height: calc(100svh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    border-radius: 20px;
  }

  .form-grid,
  .hint-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .game-dock {
    max-height: min(48svh, 380px);
  }

  .game-dock .rack-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Zamunda.Games Scrabble mobile scroll final v2.0.3
   Preserve the sticky letter rack, but make touch scrolling reliable in embed, full and fullscreen. */
@media (max-width: 860px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
  }

  body,
  .app-shell,
  .layout,
  .panel,
  .board-wrap,
  .sidebar,
  .sidebar-inner,
  .log,
  .chat-messages {
    touch-action: pan-y;
  }

  .overlay,
  .modal {
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  .modal {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .game-dock {
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .game-dock .rack {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }

  .board-scroll {
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .rack-tile,
  .tile {
    touch-action: none;
  }
}


/* Zamunda.Games Scrabble mobile scroll final v2.0.4
   Final mobile model: the whole game document scrolls; the letter rack remains sticky without its own vertical scrollbar.
   This avoids clipped letters/buttons and still lets /game embed continue scrolling the parent page at iframe edges. */
@media (max-width: 860px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
  }

  .app-shell {
    padding: 10px 8px calc(14px + env(safe-area-inset-bottom)) !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  .layout,
  .board-wrap,
  .panel,
  .sidebar,
  .sidebar-inner {
    overflow: visible !important;
    max-height: none !important;
    touch-action: pan-y;
  }

  .board-wrap {
    padding-bottom: 0 !important;
  }

  .board-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .game-dock {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 90;
    width: 100% !important;
    margin-top: 12px !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto;
    zoom: 1 !important;
    padding: 12px 10px calc(12px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
    touch-action: pan-y;
  }

  .game-dock .rack-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .game-dock .rack-main {
    width: 100% !important;
    min-width: 0 !important;
  }

  .game-dock .section-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  .game-dock .rack {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    justify-content: stretch !important;
    align-items: center !important;
    touch-action: pan-y;
  }

  .game-dock .rack-tile {
    width: 100% !important;
    height: clamp(46px, 12vw, 54px) !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 12px !important;
    font-size: clamp(20px, 6vw, 24px) !important;
    flex: initial !important;
  }

  .game-dock .rack-tile .value {
    right: 5px !important;
    bottom: 4px !important;
    font-size: clamp(11px, 3.6vw, 15px) !important;
  }

  .game-dock .rack-tile .blank-mark {
    left: 5px !important;
    top: 4px !important;
    font-size: 9px !important;
  }

  .game-dock .rack-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .game-dock .rack-actions .btn {
    width: 100% !important;
    min-height: 42px !important;
    padding: 9px 7px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    border-radius: 12px !important;
    white-space: normal !important;
  }

  .game-dock-mobile-status .status-text {
    font-size: 13px !important;
  }

  .overlay {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: max(10px, env(safe-area-inset-top)) 10px max(16px, env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .modal {
    width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
    border-radius: 20px !important;
    touch-action: pan-y;
  }

  .form-grid,
  .hint-list {
    grid-template-columns: 1fr !important;
  }

  .rack-tile,
  .tile {
    touch-action: none;
  }
}

@media (max-width: 380px) {
  .game-dock .rack {
    gap: 5px !important;
  }

  .game-dock .rack-tile {
    height: 44px !important;
    font-size: 20px !important;
  }

  .game-dock .rack-actions .btn {
    font-size: 12px !important;
    min-height: 40px !important;
  }
}