/* Simple, colorful stylesheet for POKO Games
   - Designed to be easy to read and teach
   - No external libraries used
*/

:root{
  --bg: #fffdf6; /* soft warm background */
  --ink: #1b3340;
  --card: #ffffff;
  --accent-1: #ff8a80; /* coral */
  --accent-2: #ffd54f; /* yellow */
  --accent-3: #7cc6ff; /* baby blue */
  --accent-4: #b388ff; /* purple */
}

*{box-sizing:border-box}
.admin-locked body{display:none}

body{
  margin:0;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  color:var(--ink);
  background: linear-gradient(180deg,var(--bg),#e8fbff);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
}

/* Header */
.hero{
  text-align:center;
  padding:28px 12px;
  background: linear-gradient(90deg,var(--accent-3),var(--accent-2));
  color: #063447;
}
.hero h1{margin:0;font-size:2.6rem}
.hero p{margin:8px 0 0;font-size:1.05rem}

.container{width:min(1100px,94%);margin:20px auto 28px}

/* Game grid */
.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}

/* Card */
.game-card{
  background:var(--card);
  border-radius:14px;
  padding:14px 12px;
  text-align:center;
  border:1px solid rgba(0,0,0,0.04);
  box-shadow:0 8px 20px rgba(15,40,60,0.06);
  transition:transform .16s ease,box-shadow .16s ease;
}
.game-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(15,40,60,0.10)}

.game-card .emoji{font-size:2.6rem;margin:6px 0}
.game-card h2{margin:8px 0;font-size:1.15rem}
.game-card p{margin:0 0 12px;color:#375a6a}

/* Play button styled as a bright pill */
.game-card .play-btn,
.game-card button{display:inline-block;padding:10px 16px;border-radius:999px;background:linear-gradient(90deg,var(--accent-1),var(--accent-4));color:#fff;font-weight:700;border:none;cursor:pointer;box-shadow:0 10px 20px rgba(0,0,0,0.08);transition:transform .12s ease}
.game-card .play-btn:hover,
.game-card button:hover{transform:translateY(-3px)}

.game-card a{color:inherit;text-decoration:none}

/* Footer */
.footer{text-align:center;padding:18px;font-size:1rem}
.admin-footer-link{color:#5f7480;font-size:.78rem;text-decoration:none}
.admin-footer-link:hover{text-decoration:underline}

/* Shared panel styles for game pages */
.page-wrap,.game-panel,.game-box,.quiz-box{width:min(820px,94%);margin:18px auto 30px;background:var(--card);border-radius:12px;padding:16px;box-shadow:0 12px 28px rgba(15,40,60,0.06)}

.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:12px}
.btn{border:none;padding:10px 14px;border-radius:999px;background:var(--accent-3);color:#053146;font-weight:700;cursor:pointer}
.btn.secondary{background:var(--accent-2)}
.back-link{display:inline-block;padding:8px 12px;border-radius:999px;background:var(--accent-4);color:#fff;text-decoration:none;font-weight:700}

/* Simple helpers used by game pages */
.placeholder-area{height:240px;border-radius:8px;background:linear-gradient(180deg,#fcfcff,#f0fbff);display:flex;align-items:center;justify-content:center;color:#5a6f7a;font-weight:700}

/* Customize and Editor page styles */
.customize-panel, .editor-panel {
  width: min(900px, 94%);
  margin: 20px auto;
  background: var(--card);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 12px 28px rgba(15,40,60,0.06);
}

.wide-panel {
  width: min(1100px, 94%);
}

.customize-section, .editor-section {
  margin: 20px 0;
  padding: 14px;
  background: #f5f9ff;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.04);
}

.customize-section h3, .editor-section h3 {
  margin-top: 0;
  color: var(--ink);
  font-size: 1.05rem;
}

label {
  display: block;
  margin: 8px 0 4px;
  font-weight: 600;
  color: var(--ink);
}

input[type="color"], input[type="file"], select, input[type="text"] {
  padding: 8px 10px;
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  font-size: 0.95rem;
  margin: 4px 0 12px;
  cursor: pointer;
}

input[type="range"] {
  width: 100%;
  max-width: 300px;
  margin: 4px 0 12px;
}

.color-grid, .theme-grid, .emoji-grid, .sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.color-btn, .theme-btn, .emoji-btn, .sticker-btn {
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.color-btn:hover, .theme-btn:hover, .emoji-btn:hover, .sticker-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.color-btn.active, .theme-btn.active, .emoji-btn.active, .sticker-btn.active {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(27,51,64,0.2);
}

.preview-bg {
  height: 150px;
  border-radius: 10px;
  border: 2px dashed rgba(0,0,0,0.1);
  margin: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-weight: 600;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

#canvas {
  border: 2px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  background: white;
  cursor: crosshair;
  max-width: 100%;
  display: block;
  margin: 12px auto;
  touch-action: none;
}

.canvas-shell {
  text-align: center;
  overflow-x: auto;
}

.tool-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
}

.tiny-note {
  color: #526b78;
  font-size: 0.9rem;
  margin: 8px 0 0;
}

.tool-btn {
  padding: 10px 8px;
  border: 2px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.1s ease;
}

.tool-btn:hover {
  background: var(--accent-3);
  color: white;
}

.tool-btn.active {
  background: var(--accent-1);
  color: white;
  border-color: var(--accent-1);
}

.input-group {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}

.input-group input, .input-group textarea {
  flex: 1;
  padding: 8px 10px;
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  font-size: 0.95rem;
}

.back-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent-4);
  color: white;
  text-decoration: none;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 12px;
}

.logout-btn {
  font: inherit;
  margin-left: 8px;
}

.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* Admin pages */
.admin-auth-panel,
.admin-dashboard {
  width: min(760px, 94%);
  margin: 42px auto;
  background: var(--card);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 12px 28px rgba(15,40,60,0.08);
}

.admin-auth-panel h1 {
  margin-top: 0;
  color: #16324a;
}

.admin-form {
  display: grid;
  gap: 10px;
}

.admin-form input[type="text"],
.admin-form input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  font-size: 1rem;
}

.form-message {
  min-height: 1.2em;
  color: #b42318;
  font-weight: 700;
  margin: 4px 0 0;
}

.admin-hero {
  background: linear-gradient(90deg, #d7ebff, #f4f7fb);
}

.admin-dashboard {
  display: grid;
  gap: 12px;
}

.admin-option {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: #f7fbff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
}

.admin-option span {
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
}

.admin-option small {
  display: block;
  margin-top: 4px;
  color: #526b78;
}

.logout-option {
  font: inherit;
  background: #fff5f5;
}

/* Small screens */
@media (max-width:700px){
  .hero h1{font-size:1.9rem}
  .hero p{font-size:1rem}
  .game-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .game-card .emoji{font-size:2rem}
  .game-card h2{font-size:1rem}
  .game-card .play-btn{width:100%}
  .controls{flex-direction:column}

  .customize-panel, .editor-panel {
    padding: 12px;
  }

  .color-grid, .theme-grid, .emoji-grid, .sticker-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tool-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}