:root {
      --primary:   #ff3b5c;
      --primary-2: #ff6b81;
      --secondary: #2ed573;
      --secondary-2:#7bed9f;
      --accent:    #ffc048;
      --accent-2:  #ff9f43;
      --ink:       #eaf0f6;
      --muted:     #9aa8bd;
      --dark:      #060910;
      --dark-2:    #0d1321;
      --panel:     rgba(14, 19, 32, 0.72);
      --panel-2:   rgba(255,255,255,0.06);
      --stroke:    rgba(255, 255, 255, 0.10);
      --stroke-2:  rgba(255,255,255,0.16);
      --font: 'Vazirmatn', Tahoma, sans-serif;
      --radius-xl: 22px;
      --radius-lg: 16px;
      --radius-md: 12px;
    }
    *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
    *:not(input):not(textarea){user-select:none;-webkit-user-select:none}
    html,body{width:100%;height:100%;overflow:hidden}
    body{
      font-family:var(--font);color:var(--ink);
      background: #060910;
      display:flex;align-items:center;justify-content:center;
      position:relative;
    }
    /* ---- ambient page background outside wrapper ---- */
    body::before{
      content:"";position:fixed;inset:0;z-index:-2;
      background:
        radial-gradient(900px 600px at 18% 12%, rgba(255,59,92,0.18), transparent 60%),
        radial-gradient(1000px 700px at 82% 18%, rgba(255,192,72,0.14), transparent 62%),
        radial-gradient(800px 600px at 50% 100%, rgba(46,213,115,0.12), transparent 65%),
        radial-gradient(1200px 900px at 50% 50%, #0a1226 0%, #060910 65%);
    }
    body::after{
      content:"";position:fixed;inset:0;z-index:-1;opacity:.22;
      background-image:url("assets/grid-pattern.svg");
      background-size:120px 120px;
      mask-image: radial-gradient(800px 600px at 50% 40%, black 30%, transparent 75%);
    }
    #gameWrapper{
      position:relative;width:100%;height:100%;
      max-width:1280px;max-height:860px;
      background: linear-gradient(180deg, #0f172a 0%, #0a0f1e 100%);
      box-shadow:
        0 32px 80px rgba(0,0,0,.7),
        0 0 0 1px rgba(255,255,255,.07),
        0 0 40px rgba(255,192,72,.08) inset;
      border-radius:22px;overflow:hidden;
      isolation:isolate;
    }
    @media (max-width:1320px),(max-height:880px){
      #gameWrapper{border-radius:0;max-width:100%;max-height:100%}
    }
    canvas{display:block;width:100%;height:100%;touch-action:none}