:root{
    --bg: #0A0D16;
    --panel: #12172A;
    --panel-2: #171D34;
    --line: #262E4A;
    --violet: #7C5CFC;
    --violet-dim: #5A44B8;
    --cyan: #2FE0D0;
    --gold: #FFB020;
    --text: #EDEFF7;
    --text-dim: #9AA0BE;
    --danger: #FF5C6C;
    --radius: 14px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background: radial-gradient(1200px 600px at 50% -10%, #1A1440 0%, var(--bg) 55%);
    color: var(--text);
    font-family: 'Tajawal', sans-serif;
    min-height:100vh;
    padding-bottom: 50px;
  }
  h1,h2,h3,.brand{font-family:'Cairo', sans-serif;}
  .wrap{max-width:900px;margin:0 auto;padding:0 16px;}

  header{
    padding: 28px 16px 22px;
    text-align:center;
    border-bottom: 1px solid var(--line);
    position:relative;
    background: linear-gradient(180deg, rgba(124,92,252,0.06), transparent);
  }
  .brand{
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display:inline-block;
  }
  .tagline{color:var(--text-dim); font-size:14px; margin-top:6px;}
  .admin-toggle{
    position:absolute; left:14px; top:18px;
    background: var(--panel-2); border:1px solid var(--line); color:var(--text-dim);
    width:36px; height:36px; border-radius:10px; cursor:pointer; font-size:16px;
  }
  .admin-toggle:hover{color:var(--text); border-color:var(--violet);}

  .util-bar{display:flex; justify-content:space-between; gap:10px; margin: 16px 0 6px;}
  .util-btn{
    background: var(--panel); border:1px solid var(--line); color:var(--text);
    padding:9px 14px; border-radius:10px; font-size:13px; cursor:pointer;
    display:flex; align-items:center; gap:6px; font-family:'Tajawal',sans-serif;
  }
  .util-btn:hover{border-color:var(--violet);}
  .cart-badge{
    background: var(--cyan); color:#08211f; font-size:11px; font-weight:800;
    border-radius:20px; padding:1px 7px; min-width:16px; text-align:center;
  }

  .pay-note{display:flex; align-items:center; gap:10px; background: var(--panel-2); border:1px solid var(--line);
    border-radius: var(--radius); padding: 14px 16px; margin: 18px 0; color: var(--text-dim); font-size:13.5px;}
  .pay-note b{color:var(--cyan); font-family:'Cairo',sans-serif;}

  /* ===== Games grid (home) ===== */
  .games-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:14px; margin: 18px 0 28px;}
  .game-card{
    background:var(--panel); border:1.5px solid var(--line); border-radius: var(--radius);
    padding: 20px 14px; text-align:center; cursor:pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
  }
  .game-card:hover{transform: translateY(-3px); box-shadow: 0 8px 24px -8px rgba(124,92,252,0.4); border-color: rgba(124,92,252,0.45);}
  .game-card .g-icon{width:56px;height:56px;border-radius:14px;background:var(--panel-2); display:flex;align-items:center;justify-content:center;
    font-size:26px; margin:0 auto 12px; border:1px solid var(--line);}
  .game-card .g-name{font-weight:700; font-size:14.5px;}
  .game-card .g-count{color:var(--text-dim); font-size:11.5px; margin-top:4px;}

  /* ===== Game page ===== */
  .back-row{display:flex; align-items:center; gap:10px; margin: 16px 0 4px;}
  .back-btn{background:var(--panel); border:1px solid var(--line); color:var(--text); width:38px; height:38px;
    border-radius:10px; cursor:pointer; font-size:16px; flex-shrink:0;}
  .back-btn:hover{border-color:var(--cyan);}
  .game-page-head{display:flex; align-items:center; gap:12px;}
  .game-page-head .g-icon{width:48px;height:48px;border-radius:12px;background:var(--panel-2); display:flex;align-items:center;justify-content:center;
    font-size:22px; border:1px solid var(--line); flex-shrink:0;}
  .game-page-head .g-name{font-weight:800; font-size:19px; font-family:'Cairo',sans-serif;}
  .game-page-head .g-sub{color:var(--text-dim); font-size:12.5px; margin-top:2px;}

  .pkg-grid{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(165px,1fr)); gap:12px; margin: 18px 0 22px;
  }
  .pkg-card{
    position:relative; background:var(--panel); border:1.5px solid var(--line); border-radius: 14px; padding: 15px 14px 14px;
    cursor:pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
    display:flex; flex-direction:column; justify-content:space-between; min-height: 118px;
    overflow:hidden;
  }
  .pkg-card:hover{transform: translateY(-3px); box-shadow: 0 8px 24px -8px var(--t-glow); border-color: var(--t-border);}
  .tier-0{--t-glow:#7C5CFC;--t-text:#B8A9FF;--t-bg:rgba(124,92,252,0.14);--t-border:rgba(124,92,252,0.4);}
  .tier-1{--t-glow:#2FE0D0;--t-text:#7FF3E7;--t-bg:rgba(47,224,208,0.14);--t-border:rgba(47,224,208,0.4);}
  .tier-2{--t-glow:#FFB020;--t-text:#FFCB6B;--t-bg:rgba(255,176,32,0.14);--t-border:rgba(255,176,32,0.4);}
  .tier-3{--t-glow:#FF7A3D;--t-text:#FFA477;--t-bg:rgba(255,122,61,0.16);--t-border:rgba(255,122,61,0.45);}
  .tier-4{--t-glow:#FF5C6C;--t-text:#FF9AA4;--t-bg:rgba(255,92,108,0.16);--t-border:rgba(255,92,108,0.5);}
  .pkg-name{font-weight:700; font-size:14px; line-height:1.4; position:relative; z-index:1;}
  .pkg-price-row{display:flex; align-items:center; justify-content:space-between; margin-top:11px; position:relative; z-index:1;}
  .pkg-price{font-weight:800; font-size:16.5px; color: var(--t-text); font-family:'Cairo',sans-serif;}
  .pkg-price span{font-size:11.5px; font-weight:400; color:var(--text-dim); font-family:'Tajawal',sans-serif;}
  .pkg-add{font-size:11px; color:var(--cyan); font-weight:700; background:rgba(47,224,208,0.12);
    border:1px solid rgba(47,224,208,0.35); padding:3px 8px; border-radius:8px; white-space:nowrap;}
  .pkg-reviews-btn{margin-top:10px; width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim);
    font-size:11px; padding:7px; border-radius:8px; cursor:pointer; font-family:'Tajawal',sans-serif;}
  .pkg-reviews-btn:hover{color:var(--cyan); border-color:var(--cyan);}

  .empty-state{text-align:center; color:var(--text-dim); padding: 40px 16px; border:1px dashed var(--line); border-radius: var(--radius);}

  /* ===== modal ===== */
  .overlay{position:fixed; inset:0; background: rgba(4,6,14,0.72); display:none; align-items:center; justify-content:center; z-index: 50; padding: 16px;}
  .overlay.show{display:flex;}
  .modal{background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); width:100%; max-width: 420px;
    padding: 22px; max-height: 88vh; overflow-y:auto; position:relative;}
  .modal h3{margin:0 0 4px; font-size:18px;}
  .modal .sub{color:var(--text-dim); font-size:13px; margin-bottom:16px;}
  label{display:block; font-size:13px; color:var(--text-dim); margin: 14px 0 6px;}
  input[type=text], input[type=number], input[type=password], input[type=tel], select{
    width:100%; background: var(--bg); border:1px solid var(--line); border-radius: 10px; color:var(--text);
    padding: 11px 12px; font-size: 14px; font-family:inherit;}
  input:focus, select:focus{outline:none; border-color: var(--violet);}
  .btn{width:100%; padding: 13px; border-radius: 10px; border:none; font-family:'Cairo',sans-serif; font-weight:700;
    font-size: 15px; cursor:pointer; margin-top: 18px;}
  .btn-primary{background: linear-gradient(90deg, var(--violet), var(--cyan)); color:#0A0D16;}
  .btn-primary:hover{opacity:.92;}
  .btn-ghost{background:transparent; border:1px solid var(--line); color:var(--text-dim);}
  .btn-danger{background: rgba(255,92,108,0.12); color: var(--danger); border:1px solid rgba(255,92,108,0.3);}
  .btn-google{background: var(--bg); border:1px solid var(--line); color:var(--text); display:flex; align-items:center; justify-content:center; gap:8px;}
  .close-x{position:absolute; left:14px; top:14px; background:none; border:none; color:var(--text-dim); font-size:20px; cursor:pointer;}
  .err-msg{color:var(--danger); font-size:12.5px; margin-top:6px; display:none;}
  .cancel-link{display:none; text-align:center; font-size:12px; color:var(--text-dim); margin-top:10px; cursor:pointer; text-decoration:underline;}

  .cart-item{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px;}
  .ci-info{flex:1; min-width:0;}
  .ci-name{font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ci-game{font-size:11.5px; color:var(--text-dim); margin-top:1px;}
  .ci-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
  .qty-step{display:flex; align-items:center; gap:8px;}
  .qty-step button{width:24px; height:24px; border-radius:7px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); cursor:pointer; font-size:14px; line-height:1;}
  .qty-step span{font-size:13px; min-width:14px; text-align:center;}
  .ci-price{font-size:12.5px; color:var(--cyan); font-weight:700; white-space:nowrap;}
  .cart-total{display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-weight:800; font-size:16px; font-family:'Cairo',sans-serif;}
  .cart-summary-mini{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:14px; font-size:12.5px; color:var(--text-dim); max-height:150px; overflow-y:auto;}
  .cart-summary-mini div{padding:3px 0;}

  .pay-method{background:var(--bg); border:1.5px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px;}
  .pm-top{display:flex; align-items:center; gap:10px;}
  .pm-icon{font-size:22px;}
  .pm-name{font-weight:700; font-size:13.5px;}
  .pm-detail{font-size:13px; color:var(--cyan); margin-top:2px; direction:ltr; text-align:right; font-weight:700;}
  .copy-btn{background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim); font-size:11px; padding:6px 10px; border-radius:7px; cursor:pointer; white-space:nowrap;}
  .copy-btn:hover{color:var(--cyan); border-color:var(--cyan);}

  .warn-box{display:flex; align-items:flex-start; gap:8px; background: rgba(255,176,32,0.1); border:1px solid rgba(255,176,32,0.35);
    border-radius:10px; padding:11px 12px; margin-top:14px; font-size:12.5px; color:#FFCB6B; line-height:1.7;}
  .warn-box.strong{background: rgba(255,92,108,0.1); border-color: rgba(255,92,108,0.4); color:#FF9AA4;}

  .review-item{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px;}
  .rv-head{display:flex; justify-content:space-between; font-size:12.5px; font-weight:700;}
  .rv-stars{color:var(--gold); font-size:12px;}
  .rv-text{font-size:12.5px; color:var(--text-dim); margin-top:4px; line-height:1.6;}
  .star-picker{display:flex; gap:6px; font-size:26px; cursor:pointer; margin-top:4px;}
  .star-picker span{color:var(--line); transition:color .15s;}
  .star-picker span.active{color:var(--gold);}

  .admin-bar{display:flex; align-items:center; justify-content:space-between; background: linear-gradient(90deg, rgba(124,92,252,0.15), rgba(47,224,208,0.1));
    border:1px solid var(--violet-dim); border-radius: var(--radius); padding: 12px 16px; margin: 18px 0; font-size:13.5px;}
  .admin-bar b{font-family:'Cairo',sans-serif; color:var(--cyan);}
  .admin-list-item{display:flex; align-items:center; justify-content:space-between; background:var(--bg); border:1px solid var(--line);
    border-radius: 10px; padding: 10px 12px; margin-bottom:8px; font-size:13.5px;}
  .admin-list-item .meta{color:var(--text-dim); font-size:12px;}
  .admin-list-item .actions{display:flex; gap:4px;}
  .icon-btn{background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:13px; padding:4px 7px;}
  .icon-btn:hover{color:var(--cyan);}
  .icon-btn.danger:hover{color:var(--danger);}
  .tabs{display:flex; gap:6px; margin: 14px 0; flex-wrap:wrap;}
  .tab{flex:1; min-width:70px; text-align:center; padding:10px 4px; border-radius:10px; border:1px solid var(--line); background:var(--bg); cursor:pointer; font-size:12.5px; color:var(--text-dim);}
  .tab.active{border-color:var(--violet); color:var(--text); background: rgba(124,92,252,0.12);}
  .hint{font-size:12px; color:var(--text-dim); margin-top:8px; line-height:1.6;}
  .loading{text-align:center; padding:60px 16px; color:var(--text-dim);}

  .toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--panel-2);
    border:1px solid var(--violet); color:var(--text); padding:11px 18px; border-radius:30px; font-size:13.5px;
    z-index:100; opacity:0; pointer-events:none; transition: opacity .25s, bottom .25s; max-width:90%; text-align:center;}
  .toast.show{opacity:1; bottom:34px;}

  .footer{text-align:center; color:var(--text-dim); font-size:12px; padding:30px 0 6px; border-top:1px solid var(--line); margin-top:34px;}

  :focus-visible{outline: 2px solid var(--cyan); outline-offset: 2px;}

  @media (prefers-reduced-motion: reduce){
    *{transition-duration: 0.01ms !important; animation-duration: 0.01ms !important;}
    .game-card:hover, .pkg-card:hover{transform:none;}
  }