:root{
  --gap: 16px;
  --panel-width: 320px;
  --paper: #f5f0e6;
  --paper-dark: #ede6d6;
  --ink: #1e160a;
  --ink-mid: #5a4a35;
  --ink-light: #9a8a74;
  --rule: #c8b99a;
  --accent: #4a3520;
}
*{box-sizing:border-box}
body{
  font-family:'Special Elite',Courier,'Courier New',monospace;
  line-height:1.6;
  margin:0;
  padding:32px 24px;
  background:#ddd8cc;
  color:var(--ink);
  min-height:100vh;
}

/* Page sheet */
.page-sheet{
  max-width:1100px;
  margin:0 auto;
  background:var(--paper);
  padding:40px 48px;
  box-shadow:2px 3px 12px rgba(0,0,0,0.18),0 0 0 1px rgba(0,0,0,0.06);
}

header{margin-bottom:24px;border-bottom:2px solid var(--ink);padding-bottom:16px}
header h1{margin:0 0 4px 0;font-size:26px;font-weight:normal;letter-spacing:0.02em;text-transform:uppercase}
header p{margin:0;color:var(--ink-mid);font-size:15px}
.header-buttons{display:flex;gap:8px;margin-top:12px}

.reset-btn{
  padding:5px 14px;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.reset-btn:hover{background:var(--ink);color:var(--paper)}

.app{display:flex;gap:var(--gap)}
main{flex:1;min-height:60vh}

.wordbank{
  width:var(--panel-width);
  border-left:1px solid var(--rule);
  padding-left:16px;
}
.words{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}

.word-item{
  background:var(--paper-dark);
  border:1px solid var(--rule);
  padding:7px 10px;
  cursor:grab;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  font-size:14px;
  letter-spacing:0.03em;
  text-align:center;
}
.word-item:active{cursor:grabbing}
.word-item.selected{
  outline:2px solid var(--ink);
  outline-offset:2px;
  background:#e8dfc8;
}
.word-item.locked{opacity:0.45;cursor:not-allowed;filter:grayscale(1)}

.message{display:none;padding:8px 12px;margin:10px 0;font-size:14px;border-left:3px solid var(--ink-mid);color:var(--ink-mid)}
.message.show{display:block}
.message.success{border-color:var(--ink);color:var(--ink);font-weight:bold;letter-spacing:0.04em;text-transform:uppercase}
.message.error{border-color:#8b3a2a;color:#8b3a2a}

.sentence{margin-bottom:20px;font-size:19px;line-height:2}
.token{margin-right:4px}

.blank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  height:32px;
  border:none;
  border-bottom:2px solid var(--ink);
  vertical-align:middle;
  margin:0 4px;
  padding:2px 10px;
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:inherit;
}
.blank.dragover{background:rgba(0,0,0,0.06);border-bottom-style:dashed}
.blank.filled{border-bottom-style:solid}
.hint{color:var(--ink-light);font-size:13px}

.wordbank h2{
  margin:0 0 8px 0;
  font-size:13px;
  font-weight:normal;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-mid);
  border-bottom:1px solid var(--rule);
  padding-bottom:6px;
}

.unlock-all-btn{
  display:none;
  width:100%;
  padding:5px 10px;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.unlock-all-btn:hover{background:var(--ink);color:var(--paper)}

/* Admin mode styles */
.admin-mode-indicator{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  background:var(--paper-dark);
  border:1px solid var(--rule);
  border-left:3px solid var(--ink);
  margin:16px 0;
}
.admin-badge{font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink)}
.admin-help{color:var(--ink-mid);font-size:13px;flex:1}
.admin-logout-btn{padding:3px 10px;background:none;color:var(--ink-mid);border:1px solid var(--rule);cursor:pointer;font-family:inherit;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;margin-left:auto}
.admin-logout-btn:hover{color:var(--ink);border-color:var(--ink)}
.word-item.admin-unlocked{background:#deecd8;border-color:#7aab6e;opacity:1}
.word-item.admin-locked{background:#f0e8d0;border-color:var(--rule);cursor:pointer;opacity:0.85}
.word-item.admin-locked:hover{background:#e8dfc8;opacity:1}

/* Admin modal */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(20,14,6,0.55);align-items:center;justify-content:center;z-index:1000}
.modal-content{background:var(--paper);padding:32px;max-width:400px;width:90%;box-shadow:4px 4px 0 rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.08)}
.modal-content h2{margin:0 0 8px 0;font-size:20px;font-weight:normal;text-transform:uppercase;letter-spacing:0.05em}
.modal-content p{margin:0 0 16px 0;color:var(--ink-mid);font-size:14px}
.modal-content input{
  width:100%;
  padding:8px 10px;
  border:none;
  border-bottom:2px solid var(--ink);
  background:transparent;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  margin-bottom:20px;
  outline:none;
}
.modal-content input:focus{border-bottom-color:var(--ink)}
.modal-buttons{display:flex;gap:8px;justify-content:flex-end}
.btn-primary{
  padding:7px 18px;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.btn-primary:hover{background:var(--accent)}
.btn-secondary{
  padding:7px 18px;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--rule);
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.btn-secondary:hover{border-color:var(--ink)}
.error-message{color:#8b3a2a;font-size:13px;margin-top:8px;min-height:18px}

/* Page navigation */
.page-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:20px 0;
  padding:10px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.nav-btn{
  padding:5px 16px;
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink);
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.nav-btn:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.nav-btn:disabled{border-color:var(--rule);color:var(--ink-light);cursor:not-allowed}
.page-indicator{font-size:15px;color:var(--ink-mid);min-width:120px;text-align:center;letter-spacing:0.04em}

/* Footer / admin login */
.page-footer{margin-top:40px;padding-top:12px;border-top:1px solid var(--rule);text-align:center}
.admin-btn-subtle{
  padding:3px 10px;
  background:none;
  color:var(--rule);
  border:1px solid var(--rule);
  cursor:pointer;
  font-family:inherit;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.admin-btn-subtle:hover{color:var(--ink-light);border-color:var(--ink-light)}

/* responsive */
@media (max-width:720px){
  body{padding:0}
  .page-sheet{padding:24px 20px}
  .app{flex-direction:column}
  .wordbank{width:auto;border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:16px}
  .words{grid-template-columns:1fr}
  .page-nav{padding:10px;gap:12px}
  .nav-btn{padding:6px 12px;font-size:12px}
  .page-indicator{font-size:13px;min-width:100px}
}