:root{
  --bg:#e7fbff; --card:#ffffff; --primary:#06a357; --accent:#ff7ea8; --yellow:#ffd166; --text:#10304b;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,'Segoe UI','Noto Sans Arabic','Cairo',Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),#ffffff); color:var(--text)}
.container{max-width:1480px;margin:0 auto;padding:28px}
.card{background:var(--card);border-radius:26px;box-shadow:0 14px 32px rgba(0,0,0,.09);padding:22px}
h1{font-size:40px;margin:0 0 8px;font-weight:900}
h2{font-size:28px;margin:0 0 10px;font-weight:800}
h3{font-size:22px;margin:12px 0;font-weight:800}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{background:var(--primary);color:#fff;border:none;border-radius:20px;padding:18px 26px;font-size:22px;font-weight:900;box-shadow:0 8px 16px rgba(0,0,0,.08)}
.btn:disabled{opacity:.5} .btn.alt{background:#fff;color:#000;border:2px solid #e5f4f8}
.btn.good{background:#06a357} .btn.warn{background:#ffd166;color:#7a5200}
.pill{background:#e5f9f9;border:1px solid #c8f0f0;padding:12px 16px;border-radius:18px;font-weight:900;font-size:18px;display:inline-block}
.list{display:flex;gap:10px;flex-wrap:wrap} .badge{background:#fff;border:1px solid #eef;padding:10px 14px;border-radius:999px;font-size:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,72px));gap:12px;justify-content:start;align-content:start;grid-auto-rows:72px;max-width:100%}
.flower{width:72px;height:72px;border-radius:16px;background:#f6fbff;border:1px solid #e5f4f8;display:flex;align-items:center;justify-content:center;font-size:34px}
.timer{font-family:monospace;font-size:36px;font-weight:900} .big{font-size:40px} .label{font-size:18px;opacity:.7}
input,select{padding:16px 18px;border-radius:18px;border:1px solid #dceef3;font-size:20px}
.header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.header .logo{display:flex;align-items:center;gap:14px} .logo img{width:60px;height:60px;border-radius:16px}
.hint{font-size:18px;opacity:.8} .center{text-align:center} .mission{font-size:24px;line-height:1.7}
.footer{margin-top:26px;font-size:16px;opacity:.85;text-align:center}
.token{display:inline-flex;align-items:center;gap:12px;background:#fffbe8;border:2px dashed var(--yellow);padding:10px 14px;border-radius:18px;font-weight:900}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal .box{background:#fff;border-radius:24px;box-shadow:0 16px 34px rgba(0,0,0,.16);padding:22px;max-width:620px;width:100%}
.card-illustration{width:100%;height:280px;border-radius:20px;overflow:hidden;border:1px solid #eef;margin:10px 0;display:flex;align-items:center;justify-content:center}
.kids-clouds{position:absolute;left:0;top:0;width:100%;height:220px;pointer-events:none;opacity:.18;background:url('assets/cloud.svg') repeat-x;background-size:contain;animation:slide 18s linear infinite}
@keyframes slide{from{background-position:0 0}to{background-position:100% 0}}
@media (min-width:1600px){ .container{max-width:1600px} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,72px));gap:12px;justify-content:start;align-content:start;grid-auto-rows:72px;max-width:100%} }

/* current turn highlight */
.players{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.player-badge{background:#eef7f9;border:1px solid #dceef3;padding:10px 14px;border-radius:999px;font-size:18px;display:inline-flex;align-items:center;gap:8px}
.player-badge.current{background:#12b6b6;color:#fff;box-shadow:0 0 0 6px rgba(18,182,182,.12),0 12px 22px rgba(0,0,0,.12)}
.player-dot{width:12px;height:12px;border-radius:50%;background:#2bb673;box-shadow:0 0 0 6px rgba(43,182,115,.12);animation:pulse 1.6s infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}


/* === Settings modal (no-code) === */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:center;z-index:9999}
.modal .box{background:#fff;border-radius:16px;padding:18px;max-width:min(960px,92vw);max-height:86vh;overflow:auto;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.modal .box h3{margin:0 0 8px 0}
.modal .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.modal .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.modal .card{border:1px solid #eaeaea;border-radius:12px;padding:10px}
.preview{width:100%;height:120px;border:1px dashed #ddd;border-radius:10px;display:grid;place-items:center;overflow:hidden;background:#f9fbfd}
.preview img,.preview audio{max-width:100%;max-height:100%}
label.small{font-size:13px;color:#666}
.btn.alt{background:#f2fbfb;color:#0e6; border:1px solid #ace}
.btn.warn{background:#ffe9e9;color:#b00;border:1px solid #f5caca}
.btn.good{background:#e8ffe8;color:#085;border:1px solid #bde8bd}

/* flower image support */
.flower{display:grid;place-items:center;font-size:36px}
.flower img{width:36px;height:36px;object-fit:contain}