:root{
  --word-font: 18px;
  --example-font: 14px;
  --input-font: 16px;
  --input-width: 600px;
  --accent: #1e90ff;
  --drawer-width: 300px;
}
*{box-sizing:border-box}
body{font-family: Arial, Helvetica, sans-serif; background:#f7f7f7;margin:0;padding:0}
.container{
  width: min(1000px, 96%);
  margin:20px auto;
  padding:0;
  background:white;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  overflow: visible;
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  padding:12px 16px;
  gap:12px;
  border-bottom:1px solid #eee;
}
.title{margin:0;font-size:18px;flex:0 0 auto}
.header-space{flex:1}

/* Hamburger */
.hamburger{
  width:40px;height:36px;border-radius:8px;border:1px solid #ddd;background:white;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:6px;cursor:pointer;
}
.hamburger span{display:block;height:2px;background:#333;border-radius:2px}
.hamburger:focus{outline:2px solid #a7d1ff}

/* Drawer / Sidebar */
.drawer{position:fixed;left:0;top:0;bottom:0;width:var(--drawer-width);transform:translateX(-110%);transition:transform .25s ease-in-out;z-index:1200}
.drawer.open{transform:translateX(0)}
.drawer-inner{height:100%;background:#fff;border-right:1px solid #eee;box-shadow: 4px 0 20px rgba(0,0,0,0.08);padding:18px;display:flex;flex-direction:column}
.drawer-header{font-weight:700;margin-bottom:12px}
.drawer-username{font-size:14px;color:#333}
.drawer-list{list-style:none;padding:0;margin:8px 0 0 0;flex:1}
.drawer-item{margin:8px 0}
.drawer-btn{display:block;width:100%;text-align:left;padding:10px;border-radius:8px;border:1px solid #eee;background:transparent;cursor:pointer}
.drawer-btn:hover{background:#f5faff;border-color:var(--accent)}
.drawer-btn img.btn-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-right: 8px;
  vertical-align: middle;
  display: inline-block;
  filter: none;
}

.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:1100;transition:opacity .2s;opacity:1}
.drawer-overlay.hidden{opacity:0;pointer-events:none;display:none}

/* Main content */
main#mainContent{padding:16px}

/* Drop area */
.drop-area{
  border:2px dashed #999;
  padding:28px;
  text-align:center;
  border-radius:8px;
  cursor:pointer;
  background:transparent;
  transition: background 120ms, border-color 120ms;
}
.drop-area.hover{ background: rgba(30,144,255,0.04); border-color: dodgerblue; }

/* Word list + items */
.word-list{margin-top:14px; max-height:60vh; overflow:auto; padding:6px}
.stack-item{display:flex;flex-direction:column;align-items:center;margin:8px 0;padding:8px;border-radius:6px;background:#fafafa}
.word-text{font-weight:700;font-size:var(--word-font); text-align:center; word-break:break-word; padding:0 8px}
.example-text{font-style:italic;color:#666;font-size:var(--example-font);display:none; text-align:center; padding:0 8px}
.word-input{font-size:var(--input-font);width:var(--input-width);max-width:100%;padding:8px;margin:6px 0;border:1px solid #ddd;border-radius:6px}

/* Stats row */
.stats{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap;padding:12px}
.size-buttons{margin-left:auto}
.size-buttons button{padding:6px 10px;margin-left:6px}

/* Popup/modal */
.popup{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:1000}
.popup.hidden{display:none}
.popup-inner{background:white;padding:18px;border-radius:12px;min-width:280px;text-align:center;max-width:92%;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.popup-actions{margin-top:12px}
.popup-actions button{margin:0 8px;padding:8px 14px}

/* Correct / wrong styles for inputs */
.correct{background:#d4ffd4}
.wrong{background:#ffd4d4}

/* username status small text */
#usernameStatus{font-size:13px; min-height:18px}

/* Responsive tweaks */
@media (max-width: 900px) {
  .container{padding:0}
  :root{
    --input-width: 90%;
  }
  .drop-area{padding:20px}
  .word-list{max-height:55vh}
  .drawer{width:260px}
}

@media (max-width: 480px) {
  :root{
    --word-font: 16px;
    --example-font: 13px;
    --input-font: 14px;
    --input-width: 92%;
  }
  .stats{gap:8px;padding:8px}
  .size-buttons{margin-left:0}
  .word-input{padding:10px}
  .hamburger{width:44px;height:42px}
}