/*
 * Araboo Arena — front-end styles.
 * Update log: 0.1.0 (2026-06-30) — initial game UI.
 */
.araboo-arena{--aa-teal:#0E6B65;--aa-teal-l:#88B5B8;--aa-orange:#E97A4F;--aa-ink:#2b3a3c;--aa-paper:#fff;
  max-width:100%;margin:24px auto;font-family:"Noto Sans Arabic","Inter",system-ui,sans-serif;color:var(--aa-ink);}
.araboo-arena *{box-sizing:border-box;}
.aa-card{background:var(--aa-paper);border:1px solid #e3eceb;border-radius:18px;padding:28px 24px;box-shadow:0 8px 30px -18px rgba(14,107,101,.4);}
.aa-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
.aa-title{font-size:26px;margin:0;color:var(--aa-teal);font-weight:700;}
.aa-sub{font-size:16px;margin:0;color:#5e7a7e;}
.aa-hint{font-size:13px;color:#8aa0a2;margin:6px 0 0;}
.aa-namewrap{width:100%;max-width:360px;}
.araboo-arena .aa-input--name{width:100% !important;letter-spacing:normal !important;text-transform:none !important;text-align:left !important;font-size:16px !important;}
.aa-join{display:flex;gap:8px;width:100%;max-width:360px;}
.aa-input{flex:1;padding:14px 16px;font-size:20px;letter-spacing:3px;text-align:center;text-transform:uppercase;
  border:2px solid var(--aa-teal-l);border-radius:12px;outline:none;}
.aa-input:focus{border-color:var(--aa-teal);}
.aa-btn{border:0;border-radius:12px;padding:14px 22px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .08s ease,filter .15s ease;}
.aa-btn:active{transform:translateY(1px);}
.aa-btn:disabled{opacity:.55;cursor:default;}
.aa-btn--primary{background:var(--aa-orange);color:#fff;}
.aa-btn--primary:hover:not(:disabled){filter:brightness(1.05);}
.aa-btn--ghost{background:#eef5f4;color:var(--aa-teal);}
.aa-or{color:#9fb3b4;font-size:13px;text-transform:uppercase;letter-spacing:1px;}
.aa-pin{font-size:46px;font-weight:800;letter-spacing:8px;color:var(--aa-teal);background:#eef5f4;border-radius:14px;padding:14px 10px;width:100%;max-width:360px;}
.aa-players{font-size:17px;margin:0;color:var(--aa-ink);}
.aa-players strong{color:var(--aa-orange);font-size:22px;}
.aa-tick{width:64px;height:64px;border-radius:50%;background:#1d9e75;color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;}
.aa-prog{font-size:13px;color:#7c9395;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.aa-timer{font-size:30px;font-weight:800;color:var(--aa-orange);text-align:center;margin-bottom:6px;}
.aa-q{font-size:24px;font-weight:600;line-height:1.5;text-align:center;margin:6px 0 20px;color:#22312f;}
.aa-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.aa-opt{display:flex;align-items:center;justify-content:center;min-height:78px;border-radius:14px;padding:14px 16px;
  font-size:18px;font-weight:600;color:#fff;text-align:center;border:0;cursor:default;}
.aa-opt--tap{cursor:pointer;transition:transform .08s ease,filter .15s ease;}
.aa-opt--tap:hover{filter:brightness(1.06);}
.aa-opt--tap:active{transform:translateY(1px);}
.aa-opt.o-coral{background:#D85A30;}
.aa-opt.o-teal{background:#0F6E56;}
.aa-opt.o-amber{background:#BA7517;}
.aa-opt.o-purple{background:#534AB7;}
.aa-opt.is-correct{outline:4px solid #1d9e75;outline-offset:2px;}
.aa-opt__label{display:block;}
.aa-hostbar{display:flex;align-items:center;justify-content:space-between;margin-top:20px;gap:14px;}
.aa-tally{font-size:15px;color:#5e7a7e;}
.aa-tally strong{color:var(--aa-teal);font-size:19px;}
.aa-result{padding:40px 24px;}
.aa-result__icon{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:44px;color:#fff;}
.aa-result.is-correct .aa-result__icon{background:#1d9e75;}
.aa-result.is-wrong .aa-result__icon{background:#c0473f;}
.aa-result__txt{font-size:30px;font-weight:800;color:var(--aa-ink);}
.aa-board{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.aa-row{display:flex;align-items:center;gap:14px;background:#f4f8f7;border-radius:12px;padding:12px 16px;}
.aa-row--first{background:#fff4ec;border:1px solid #f6c9b3;}
.aa-rank{font-weight:800;color:var(--aa-teal-l);width:26px;}
.aa-row--first .aa-rank{color:var(--aa-orange);}
.aa-name{flex:1;font-weight:600;}
.aa-score{font-weight:800;color:var(--aa-teal);}
.aa-picker-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.aa-picker-head .aa-title{font-size:20px;margin:0;}
.aa-back{background:none;border:0;color:var(--aa-teal);font-size:15px;font-weight:600;cursor:pointer;padding:6px 4px;}
.aa-searchrow{display:flex;gap:8px;margin-bottom:12px;}
.aa-searchrow .aa-input{flex:1;}
.aa-reslist{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;margin-bottom:12px;}
.aa-resrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid #e3eceb;border-radius:12px;cursor:pointer;}
.aa-resrow.is-on{border-color:var(--aa-teal);background:#eef5f4;}
.aa-resname{flex:1;font-weight:600;color:#22312f;}
.aa-rescount{font-size:13px;color:#5e7a7e;white-space:nowrap;}
.aa-picker-foot{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.araboo-arena .aa-select{display:block !important;width:100% !important;box-sizing:border-box !important;height:auto !important;min-height:54px !important;max-height:none !important;margin:0 !important;padding:15px 44px 15px 16px !important;border:2px solid var(--aa-teal-l) !important;border-radius:12px !important;font-family:inherit !important;font-size:16px !important;line-height:normal !important;color:var(--aa-ink) !important;text-transform:none !important;background-color:#fff !important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E6B65' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") !important;background-repeat:no-repeat !important;background-position:right 16px center !important;background-size:16px 16px !important;-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;vertical-align:middle;}
.araboo-arena .aa-select:focus{border-color:var(--aa-teal) !important;outline:none !important;}
.aa-field{margin-bottom:16px;}
.aa-flabel{display:block;font-size:13px;font-weight:600;color:#5e7a7e;margin-bottom:7px;}
.aa-type{opacity:.85;}
.aa-type.is-on{background:var(--aa-teal);border-color:var(--aa-teal);color:#fff;opacity:1;}
.aa-btn--block{width:100%;margin-top:8px;}
.aa-spinner{width:46px;height:46px;border:4px solid #e3eceb;border-top-color:var(--aa-orange);border-radius:50%;animation:aa-spin .8s linear infinite;margin:6px auto;}
@keyframes aa-spin{to{transform:rotate(360deg);}}
.aa-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px;}
.aa-chip{background:#eef5f4;border:1px solid #d5e6e4;border-radius:999px;padding:7px 14px;font-size:13px;color:var(--aa-teal);cursor:pointer;font-weight:600;}
.aa-chip:hover{background:#e0efed;}
.aa-err{background:#fdeceb;color:#a3271f;border:1px solid #f3c4bf;border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:14px;}
.araboo-arena__loading{text-align:center;color:#8aa0a2;padding:30px;}
@media(max-width:520px){.aa-opts{grid-template-columns:1fr;}.aa-q{font-size:20px;}.aa-pin{font-size:36px;letter-spacing:5px;}}