:root{
    --bg-deep:#0e1a2b;
    --bg-deep-2:#0a1421;
    --bg-panel:#15243a;
    --bg-panel-2:#1b2c46;
    --gold:#c9a659;
    --gold-soft:#e2c98a;
    --turquoise:#2f9d97;
    --turquoise-soft:#5fc4bd;
    --terracotta:#c06a4a;
    --cream:#ece3d2;
    --cream-dim:#a9b0be;
    --line:rgba(201,166,89,0.22);
    --radius:18px;
    --shadow-lg:0 20px 50px rgba(0,0,0,0.45);
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation;}

  html,body{
    margin:0;
    min-height:100vh;
    background:
      radial-gradient(circle at 15% 10%, rgba(201,166,89,0.08), transparent 40%),
      radial-gradient(circle at 85% 90%, rgba(47,157,151,0.10), transparent 45%),
      linear-gradient(160deg, var(--bg-deep) 0%, var(--bg-deep-2) 100%);
    color:var(--cream);
    font-family:'Vazirmatn', sans-serif;
    overflow-x:hidden;
  }

  body::before{
    content:'';
    position:fixed; inset:0;
    pointer-events:none;
    opacity:0.05;
    background-image:
      linear-gradient(45deg, var(--gold) 1px, transparent 1px),
      linear-gradient(-45deg, var(--gold) 1px, transparent 1px);
    background-size:38px 38px;
    z-index:0;
  }

  .page{
    position:relative;
    z-index:1;
    max-width:1000px;
    margin:0 auto;
    padding:28px 18px 60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100vh;
  }

  .star{
    position:relative;
    display:inline-block;
    width:var(--s,26px);
    height:var(--s,26px);
    flex:none;
  }
  .star span{
    position:absolute; inset:0;
    background:var(--c, var(--gold));
    border-radius:3px;
  }
  .star span:nth-child(2){ transform:rotate(45deg); }
  .star.spin span{ animation:spin 5s linear infinite; }
  .star.spin span:nth-child(2){ animation:spin 5s linear infinite reverse; }
  @keyframes spin{ to{ transform:rotate(360deg);} }

  header{
    position:relative;
    text-align:center;
    margin-bottom:26px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand h1{
    margin:0;
    font-weight:900;
    font-size:clamp(2.1rem, 6vw, 3rem);
    letter-spacing:1px;
    background:linear-gradient(90deg, var(--gold-soft), var(--gold));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  header p{
    margin:2px 0 0;
    color:var(--cream-dim);
    font-size:0.95rem;
    letter-spacing:0.3px;
  }

  .layout{
    width:100%;
    display:flex;
    flex-wrap:wrap-reverse;
    gap:22px;
    justify-content:center;
    align-items:flex-start;
  }

  .panel{
    background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
    padding:20px;
  }

  .board-card{
    width:min(94vw, 420px);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    position:relative;
  }

  .turn-row{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 4px;
  }
  .turn-badge{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    font-size:0.95rem;
    color:var(--cream-dim);
    transition:color .25s;
  }
  .turn-badge.active{ color:var(--cream); }
  .turn-badge .star{ --s:16px; opacity:0.35; transition:opacity .25s, transform .25s; }
  .turn-badge.active .star{ opacity:1; transform:scale(1.15); }
  .turn-badge.x .star span{ background:var(--gold); }
  .turn-badge.o .star span{ background:var(--turquoise); }

  .board-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
  }
  .board{
    position:relative;
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    gap:10px;
    background:rgba(0,0,0,0.18);
    padding:10px;
    border-radius:14px;
    border:1px solid var(--line);
  }
  .cell{
    background:linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border:1px solid var(--line);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .18s, transform .12s, border-color .18s;
    padding:0;
  }.cell:active:not(.filled):not(.disabled){ transform:scale(0.96); }
  .cell.disabled{ cursor:default; }
  .cell svg{ width:58%; height:58%; overflow:visible; }

  .cell .mark-x path{
    fill:none;
    stroke:var(--gold-soft);
    stroke-width:9;
    stroke-linecap:round;
    stroke-dasharray:140;
    stroke-dashoffset:140;
    animation:draw .32s ease forwards;
    filter:drop-shadow(0 0 6px rgba(201,166,89,0.45));
  }
  .cell .mark-o circle{
    fill:none;
    stroke:var(--turquoise-soft);
    stroke-width:9;
    stroke-dasharray:290;
    stroke-dashoffset:290;
    animation:draw .38s ease forwards;
    filter:drop-shadow(0 0 6px rgba(95,196,189,0.45));
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  .win-line{
    position:absolute; inset:10px;
    pointer-events:none;
  }
  .win-line line{
    stroke:var(--terracotta);
    stroke-width:6;
    stroke-linecap:round;
    stroke-dasharray:400;
    stroke-dashoffset:400;
    animation:drawline .5s ease forwards;
    filter:drop-shadow(0 0 8px rgba(192,106,74,0.6));
  }
  @keyframes drawline{ to{ stroke-dashoffset:0; } }

  .status-line{
    min-height:26px;
    font-weight:600;
    font-size:1.02rem;
    text-align:center;
    color:var(--cream);
  }
  .status-line.win{ color:var(--terracotta); }
  .status-line.draw{ color:var(--gold-soft); }

  .board-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    width:100%;
  }

  button{
    font-family:inherit;
    border:none;
    cursor:pointer;
  }
  .btn{
    flex:1;
    min-width:110px;
    padding:11px 14px;
    border-radius:10px;
    font-weight:600;
    font-size:0.92rem;
    background:rgba(255,255,255,0.05);
    color:var(--cream);
    border:1px solid var(--line);
    transition:background .2s, border-color .2s, transform .12s;
  }.btn:active{ transform:scale(0.97); }
  .btn.primary{
    background:linear-gradient(90deg, var(--gold), var(--gold-soft));
    color:#1b1204;
    border-color:transparent;
  }.btn.ghost{ background:transparent; }
  .btn:disabled{ opacity:0.35; cursor:not-allowed; }.control-panel{
    width:min(94vw, 340px);
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .panel-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    font-size:0.95rem;
    color:var(--gold-soft);
    margin-bottom:10px;
    letter-spacing:0.3px;
  }
  .panel-title .star{ --s:14px; }

  .diff-row{
    display:flex;
    gap:8px;
  }
  .diff-row .btn{ padding:9px 6px; font-size:0.82rem; min-width:0; }

  .scoreboard{
    display:flex;
    gap:10px;
  }
  .score-cell{
    flex:1;
    text-align:center;
    padding:12px 6px;
    border-radius:10px;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--line);
  }
  .score-cell .label{
    font-size:0.72rem;
    color:var(--cream-dim);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-bottom:4px;
  }
  .score-cell .label .star{ --s:9px; }
  .score-cell .num{ font-size:1.4rem; font-weight:800; color:var(--cream); }
  .score-cell.x .num{ color:var(--gold-soft); }
  .score-cell.o .num{ color:var(--turquoise-soft); }

  .history{
    max-height:150px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding-left:4px;
  }
  .history::-webkit-scrollbar{ width:5px; }
  .history::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
  .history .row{
    font-size:0.8rem;
    color:var(--cream-dim);
    display:flex;
    justify-content:space-between;
    border-bottom:1px dashed var(--line);
    padding-bottom:5px;
  }
  .history .row:last-child{ border-bottom:none; }
  .history .empty{ font-size:0.8rem; color:var(--cream-dim); opacity:0.6; text-align:center; padding:10px 0;}

  footer{
    margin-top:34px;
    text-align:center;
    color:var(--cream-dim);
    font-size:0.78rem;
    opacity:0.65;
  }
  footer .credit{
    margin-top:6px;
    font-size:0.75rem;
    color:var(--gold-soft);
    opacity:0.55;
    font-weight:600;
  }

  @media (max-width:760px){
    .layout{ flex-direction:column-reverse; align-items:center; }
    .control-panel, .board-card{ width:min(94vw, 420px); }
  }

  #gameScreen{ display:none; width:100%; flex-direction:column; align-items:center; }
  #gameScreen.visible{ display:flex; }

  .start-screen{
    width:min(94vw, 480px);
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .start-screen .panel-title{ font-size:1rem; margin-bottom:14px; }
  .start-screen .panel-title .star{ --s:16px; }

  .mode-cards{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .mode-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border-radius:14px;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--line);
    color:var(--cream-dim);
    text-align:right;
    transition:all .2s;
    width:100%;
  }
  .mode-card .icon{
    flex:none;
    width:44px; height:44px;
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(201,166,89,0.08);
    border:1px solid var(--line);
  }
  .mode-card .icon .star{ --s:20px; }
  .mode-card .txt b{ display:block; color:var(--cream); font-size:0.98rem; margin-bottom:3px; }
  .mode-card .txt small{ font-size:0.8rem; opacity:0.8; line-height:1.5; }.mode-card.active{
    border-color:var(--gold);
    background:linear-gradient(90deg, rgba(201,166,89,0.16), rgba(201,166,89,0.04));
  }
  .mode-card.active .txt b{ color:var(--gold-soft); }

  .start-screen .diff-row{ gap:10px; }
  .start-screen .diff-row .btn{ padding:12px 8px; font-size:0.85rem; }

  #startBtn{ width:100%; padding:16px; font-size:1rem; }

  .change-mode-btn{
    width:100%;
    margin-top:2px;
  }

  button:focus-visible{
    outline:2px solid var(--gold-soft);
    outline-offset:2px;
  }
  .cell:focus-visible{ outline-offset:-3px; }

  .header-tools{
    position:absolute;
    top:20px;
    left:18px;
  }
  .icon-btn{
    width:38px; height:38px;
    border-radius:10px;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--line);
    color:var(--cream-dim);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem;
    transition:all .2s;
  }.icon-btn.muted{ color:var(--terracotta); }

  .choice-row{ display:flex; gap:10px; }
  .choice-row .btn{ padding:12px 10px; }

  .burst-star{
    position:absolute;
    top:50%; left:50%;
    width:16px; height:16px;
    pointer-events:none;
    opacity:1;
    z-index:5;
    animation:burst 950ms ease-out forwards;
  }
  .burst-star span{
    position:absolute; inset:0;
    background:var(--gold);
    border-radius:2px;
    box-shadow:0 0 6px rgba(201,166,89,0.7);
  }
  .burst-star span:nth-child(2){ transform:rotate(45deg); }
  @keyframes burst{
    0%{ transform:translate(-50%,-50%) scale(0.3); opacity:1; }
    100%{ transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(1); opacity:0; }
  }
  @keyframes burstReduced{
    0%{ opacity:1; transform:translate(-50%,-50%) scale(0.6); }
    100%{ opacity:0; transform:translate(-50%,-50%) scale(1.5); }
  }

  .cell.win-cell{
    border-color:var(--terracotta);
    background:linear-gradient(145deg, rgba(192,106,74,0.22), rgba(192,106,74,0.06));
    animation:winPulse 1.1s ease-in-out 2;
  }
  @keyframes winPulse{
    0%,100%{ box-shadow:0 0 0 rgba(192,106,74,0); }
    50%{ box-shadow:0 0 22px rgba(192,106,74,0.55); }
  }

  .start-screen, #gameScreen{
    transition:opacity .28s ease, transform .28s ease;
    opacity:1;
    transform:translateY(0);
  }
  .start-screen.hide, #gameScreen.hide{
    opacity:0;
    transform:translateY(8px);
  }

  .streak-note{
    text-align:center;
    font-size:0.78rem;
    color:var(--gold-soft);
    opacity:0.85;
    min-height:16px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
    .burst-star{ animation:burstReduced 480ms ease-out forwards !important; }
    .cell.win-cell{ animation:none !important; }
  }