:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;
  --border: #dddddd;
  --primary: #111111;
}

*{ box-sizing: border-box; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container{ max-width: 720px; margin: 0 auto; padding: 16px; }
.header{ margin-bottom: 12px; }
.header h1{ margin: 0 0 6px; font-size: 18px; text-align: center; }

.card{ border: 1px solid var(--border); padding: 12px; margin: 12px 0; }
.card__title{ margin: 0 0 10px; font-size: 15px; }
.card__divider{ height: 1px; background: var(--border); margin: 12px 0; }

.muted{ color: var(--muted); }
.tiny{ font-size: 12px; }
.hidden{ display: none !important; }

.form{ display: grid; gap: 10px; }
.field{ display: grid; gap: 6px; }
.field__label{ font-size: 13px; }
.field__hint{ font-size: 12px; color: var(--muted); }

input[type="file"], input{
  width: 100%;
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: 6px;
}

.preview{ display: grid; gap: 8px; }
.preview img{ max-width: 100%; border: 1px solid var(--border); }

.actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.btn{ border: 1px solid var(--border); background: #f5f5f5; padding: 10px 12px; border-radius: 6px; cursor: pointer; }
.btn--primary{ background: #111111; color: #ffffff; border-color: #111111; }
.btn--small{ padding: 6px 10px; font-size: 12px; }
.btn:disabled{ opacity: 0.5; cursor: not-allowed; }

.row{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pill{ border: 1px solid var(--border); padding: 4px 8px; border-radius: 999px; font-size: 12px; }

.quiz{ display: grid; gap: 10px; }
.quiz__choices{ display: grid; gap: 8px; }
.choice{ text-align: left; }

.ga-grid{ display: grid; gap: 10px; }
.ga-game{ border: 1px solid var(--border); padding: 10px; }
.ga-game__title{ margin: 0 0 6px; font-size: 14px; }
.ga-lobby{ display: grid; gap: 12px; }
.ga-wheel-section{ display: grid; gap: 10px; }
.ga-wheel-container{ display: flex; justify-content: center; padding: 20px 0; }
.ga-wheel{ width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(45deg, #ff6b6b 0%, #ff6b6b 25%, #4ecdc4 25%, #4ecdc4 50%, #ffe66d 50%, #ffe66d 75%, #a8e6cf 75%, #a8e6cf 100%); border: 4px solid var(--border); position: relative; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.ga-wheel.spinning{ animation: spin 2s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards; }
.ga-wheel__center{ font-size: 48px; background: white; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--border); }
@keyframes spin{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(1440deg); } }
.ga-wheel-info{ text-align: center; min-height: 40px; }
.ga-top__grid{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ga-top__list{ margin: 0; padding-left: 18px; }
.ga-page{ display: grid; gap: 12px; }

.reaction-box, .tap-box{
  user-select: none;
  text-align: center;
  border: 1px solid var(--border);
  padding: 16px 10px;
  margin: 10px 0;
  font-weight: 700;
}

.puzzle-box{
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.puzzle-grid{
  display: grid;
  gap: 2px;
  padding: 2px;
}

.puzzle-tile{
  border: 1px solid var(--border);
  background-repeat: no-repeat;
  background-color: #fff;
  width: 100%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.puzzle-tile.selected{
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.weapon-guess{ display: grid; gap: 10px; }
.weapon-guess__top{ display: flex; justify-content: center; }
.weapon-guess__img{ max-width: 220px; width: 100%; margin: 0 auto; border: 1px solid var(--border); border-radius: 6px; }
.weapon-guess__options{ display: grid; gap: 8px; }

.memory-grid{ display: grid; gap: 10px; margin: 10px 0; }
.waifu-icons{ display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; justify-items: center; }
.waifu-icon{ width: 100%; max-width: 110px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: #fff; }
.waifu-icon img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.waifu-type{ position: relative; display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; background: #fafafa; }
.waifu-type__label{ font-size: 13px; color: var(--muted); }
.waifu-fill{ display: grid; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: text; }
.waifu-fill__row{ display: flex; justify-content: center; gap: 6px; font-family: Consolas, Menlo, monospace; letter-spacing: 1px; }
.waifu-fill__typed{ min-height: 18px; }
.waifu-fill__cell{ min-width: 14px; text-align: center; }
.waifu-fill__underscores .waifu-fill__cell{ color: var(--muted); }
.waifu-type__hidden-input{ position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.waifu-status{ min-height: 16px; }
.waifu-finish{ padding: 8px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; }

.table-wrap{ overflow: auto; }
.table{ width: 100%; border-collapse: collapse; }
.table th, .table td{ border-bottom: 1px solid var(--border); padding: 8px 6px; font-size: 12px; text-align: left; }

.footer{ margin-top: 12px; }