:root{
      --bg:#4a2850;
      --panel:#523858;
      --panel2:#4d2e50;
      --text:#e7eef7;
      --muted:#d5c4e7;
      --accent:#E94E39;
      --accent2:#E91E89;
      --good:#4cff7a;
      --warn:#ffcc4d;
      --bad:#ff5b5b;
      --border:rgba(255,255,255,.16);
      --shadow: 0 10px 30px rgba(0,0,0,.25);
    }
    *{box-sizing:border-box}
    html, body{
      height: 100%;
      margin: 0;
      padding: 0;
    }
    body{
      min-height: 100vh;
      background:
        radial-gradient(1200px 700px at 15% 0%, rgba(233,78,57,.70), transparent 55%),
        radial-gradient(900px 600px at 85% 15%, rgba(233,30,137,.65), transparent 50%),
        radial-gradient(1000px 800px at 50% 100%, rgba(255,80,120,.35), transparent 65%),
        linear-gradient(135deg, rgba(233,78,57,.25), rgba(233,30,137,.25)),
        var(--bg);
      background-attachment: fixed;
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      line-height:1.35;
    }

    /* Page switching system */
    .page {
      display: none;
    }
    .page.active {
      display: block;
    }

    /* Lang switch button */
    .lang-switch {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      display: flex;
      gap: 8px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      padding: 6px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    .lang-btn {
      appearance: none;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text);
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.2s ease;
    }
    .lang-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    .lang-btn.active {
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.3);
    }

    .back-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--text);
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 700;
      padding: 0.6rem 1.2rem;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid var(--border);
      transition: all 0.2s ease;
      margin-bottom: 1.5rem;
      backdrop-filter: blur(10px);
    }

    .back-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateX(-4px);
      border-color: rgba(255, 255, 255, 0.3);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Landing page */
    .landing {
      max-width: 720px;
      margin: 80px auto 40px;
      padding: 32px;
      text-align: center;
    }
    .landing h1 {
      font-size: 42px;
      margin: 0 0 12px;
      letter-spacing: 0.5px;
    }
    .landing .subtitle {
      color: var(--muted);
      font-size: 16px;
      font-weight: 800;
      margin-bottom: 36px;
    }
    .action-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 24px;
    }
    .action-card {
      text-align: left;
      padding: 24px;
    }
    .action-card h2 {
      margin: 0 0 8px;
      font-size: 18px;
      letter-spacing: 0.3px;
    }
    .action-card p {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      margin: 0 0 20px;
    }
    .action-card button {
      width: 100%;
    }
    .input-field {
      width: 100%;
      background: var(--panel2);
      border: 1px solid var(--border);
      border-radius: 12px;
      color: var(--text);
      padding: 12px 14px;
      font-weight: 800;
      font-size: 14px;
      outline: none;
      margin-bottom: 12px;
      font-family: inherit;
    }
    .input-field:focus {
      border-color: rgba(255,77,109,.35);
    }
    .input-field::placeholder {
      color: rgba(231,238,247,.45);
    }

    header{
      padding:22px 18px 10px;
      max-width:1600px;
      margin:0 auto;
      display:flex;
      gap:14px;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
      flex-direction:column;
      text-align:center;
    }
    .title{display:flex;align-items:center;gap:12px;min-width:280px;}
    .homeIcon{
      font-size:42px;
      cursor:pointer;
      transition: transform .2s ease, filter .2s ease;
      user-select:none;
      line-height:1;
    }
    .homeIcon:hover{
      transform: scale(1.1) rotate(-5deg);
      filter: drop-shadow(0 4px 12px rgba(233,78,57,.4));
    }
    .homeIcon:active{
      transform: scale(1.05) rotate(-3deg);
    }
    .titleText{display:flex;flex-direction:column;gap:6px;}
    h1{margin:0;font-size:20px;letter-spacing:.2px;}
    .sub{color:var(--muted);font-size:13px;}

    .panel{
      background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 60%), var(--panel);
      border:1px solid var(--border);
      border-radius:14px;
      padding:10px;
      box-shadow:var(--shadow);
    }
    .controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;}
    .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
    .label{font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.2px;}

    .turn-warning{
      font-size:16px;
      font-weight:800;
      color:var(--good);
      text-align:center;
      padding:12px 20px;
      border-radius:12px;
      background: linear-gradient(135deg, rgba(76,255,122,.12), rgba(76,255,122,.06));
      border:1px solid rgba(76,255,122,.25);
      box-shadow: 0 0 20px rgba(76,255,122,.15), 0 4px 12px rgba(0,0,0,.2);
      text-shadow: 0 0 12px rgba(76,255,122,.6), 0 0 24px rgba(76,255,122,.3);
      letter-spacing:.3px;
      opacity:0;
      transform: scale(.95) translateY(-5px);
      transition: all .3s ease;
      pointer-events:none;
    }
    .turn-warning.show{
      opacity:1;
      transform: scale(1) translateY(0);
      animation: turnPulse 2s ease-in-out infinite;
    }

    @keyframes turnPulse{
      0%, 100%{
        box-shadow: 0 0 20px rgba(76,255,122,.15), 0 4px 12px rgba(0,0,0,.2);
        text-shadow: 0 0 12px rgba(76,255,122,.6), 0 0 24px rgba(76,255,122,.3);
      }
      50%{
        box-shadow: 0 0 30px rgba(76,255,122,.3), 0 4px 16px rgba(0,0,0,.25);
        text-shadow: 0 0 16px rgba(76,255,122,.8), 0 0 32px rgba(76,255,122,.5);
      }
    }

    button{
      appearance:none;
      border:1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
      color:var(--text);
      padding:10px 12px;
      border-radius:12px;
      cursor:pointer;
      font-weight:900;
      font-size:13px;
      transition: transform .05s ease, border-color .2s ease, background .2s ease;
      user-select:none;
      white-space:nowrap;
    }
    button:hover{ border-color: rgba(255,255,255,.22); }
    button:active{ transform: translateY(1px) scale(.99); }
    button.primary{
      border-color: rgba(255,77,109,.35);
      background: linear-gradient(180deg, rgba(255,77,109,.28), rgba(255,77,109,.10));
    }
    button.ghost{
      background: transparent;
      border-color: rgba(255,255,255,.12);
    }
    button:disabled{
      opacity:.55;
      cursor:not-allowed;
      transform:none;
    }

    input[type="number"]{
      background: var(--panel2);
      border:1px solid var(--border);
      border-radius:12px;
      color:var(--text);
      padding:10px 12px;
      font-weight:800;
      font-size:13px;
      outline:none;
      width:92px;
    }

    main{
      max-width:1600px;
      margin:0 auto;
      padding:0 18px 22px;
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    /* ======== Board ======== */
    .boardWrap{ padding:14px; overflow:hidden; width:100%; }
    .board{
      position:relative;
      width:100%;
      min-height:900px;
      background:
        radial-gradient(800px 500px at 20% 20%, rgba(255,255,255,.03), transparent 60%),
        radial-gradient(800px 500px at 80% 80%, rgba(255,255,255,.02), transparent 55%);
      border:1px solid rgba(255,255,255,.06);
      border-radius:16px;
      overflow:hidden;
    }
    @media (max-width: 980px){
      .board{ min-height:760px; }
    }

    .pathSvg{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      opacity:.9;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
    }

    .tile{
      position:absolute;
      transform: translate(-50%, -50%);
      background: 
        repeating-linear-gradient(45deg, rgba(255,255,255,.01) 0px, transparent 2px, transparent 4px),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border:1px solid var(--border);
      border-radius:16px;
      padding:10px;
      box-shadow: 0 6px 18px rgba(0,0,0,.25);
      overflow:hidden;
      transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
      cursor:pointer;
      user-select:none;
    }
    .tile:hover{
      border-color: rgba(255,255,255,.22);
      box-shadow: 0 10px 26px rgba(0,0,0,.30);
      z-index:5;
      animation: tileWobble 0.5s ease;
    }
    @keyframes tileWobble {
      0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
      25% { transform: translate(-50%, -52%) rotate(-1deg); }
      50% { transform: translate(-50%, -50%) rotate(1deg); }
      75% { transform: translate(-50%, -52%) rotate(-0.5deg); }
    }
    .tile .n{
      position:absolute;
      top:8px; right:10px;
      font-size:12px;
      color:rgba(231,238,247,.75);
      font-weight:1000;
    }
    .tile .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
      font-size:11px;
      font-weight:1000;
      letter-spacing:.2px;
      margin-bottom:8px;
      text-shadow: 0 1px 2px rgba(0,0,0,.45);
    }
    .tile .mascot{
      position:absolute;
      bottom:8px; right:8px;
      font-size:32px;
      opacity:.85;
      filter: drop-shadow(0 0 6px rgba(255,255,255,.25));
      pointer-events:none;
      text-shadow: 0 2px 4px rgba(0,0,0,.45);
      display:none;
    }
    .tile .text{
      font-size:11.5px;
      font-weight:950;
      letter-spacing:.1px;
      line-height:1.35;
      word-wrap:break-word;
      overflow-wrap:break-word;
      text-shadow: 0 1px 2px rgba(0,0,0,.45);
      margin-top:22px;
    }
    .tile .hint{
      margin-top:6px;
      color:var(--muted);
      font-size:11px;
      font-weight:800;
    }
    .tile.start{
      border: 3px solid #4dd2ff;
      background: 
        radial-gradient(circle at center, rgba(77,210,255,.3) 0%, transparent 70%),
        linear-gradient(180deg, rgba(77,210,255,.25), rgba(30,30,80,.4));
      box-shadow: 
        0 0 20px rgba(77,210,255,.4),
        inset 0 -30px 20px rgba(77,210,255,.15),
        0 6px 18px rgba(0,0,0,.25);
      border-radius: 16px !important;
    }
    .tile.finish{
      border: 4px solid #ffcc00;
      background: 
        repeating-linear-gradient(
          -45deg,
          #1a1a1a 0px,
          #1a1a1a 12px,
          #f0f0f0 12px,
          #f0f0f0 24px
        );
      box-shadow: 
        0 0 30px rgba(255,204,0,.6),
        inset 0 0 30px rgba(255,215,0,.3),
        0 8px 20px rgba(0,0,0,.4);
      border-radius: 16px !important;
    }
    .tile.finish .text,
    .tile.finish .tag,
    .tile.finish .n{
      text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 0 10px rgba(255,255,255,.6);
      font-weight: 1000;
    }
    .tile.special{
      border: 2px solid rgba(138,116,249,.6);
      background: 
        linear-gradient(135deg, rgba(138,116,249,.12) 0%, rgba(108,86,249,.08) 100%),
        linear-gradient(180deg, rgba(138,116,249,.18), rgba(108,86,249,.12));
      box-shadow: 
        0 4px 12px rgba(138,116,249,.25),
        inset 0 2px 8px rgba(255,255,255,.15);
      border-radius: 16px !important;
    }
    .tile.special::after{
      content: '';
      position: absolute;
      top: 5px;
      bottom: 5px;
      left: 5px;
      right: 5px;
      border: 1px solid rgba(138,116,249,.25);
      border-radius: 11px;
      pointer-events: none;
    }
    .tile.bad{
      border: 2px solid rgba(255,107,129,.6);
      background: 
        linear-gradient(135deg, rgba(255,107,129,.12) 0%, rgba(255,87,109,.08) 100%),
        linear-gradient(180deg, rgba(255,107,129,.18), rgba(255,87,109,.12));
      box-shadow: 
        0 4px 12px rgba(255,107,129,.25),
        inset 0 2px 8px rgba(255,255,255,.10);
      border-radius: 16px !important;
    }
    .tile.good{
      border: 2px solid rgba(76,217,153,.6);
      background: 
        linear-gradient(135deg, rgba(76,217,153,.12) 0%, rgba(56,197,133,.08) 100%),
        linear-gradient(180deg, rgba(76,217,153,.18), rgba(56,197,133,.12));
      box-shadow: 
        0 4px 12px rgba(76,217,153,.25),
        inset 0 2px 8px rgba(255,255,255,.15);
      border-radius: 16px !important;
    }


    .tile.active{
      outline: 2px solid rgba(255,77,109,.60);
      box-shadow: 0 0 0 6px rgba(255,77,109,.16), 0 12px 30px rgba(0,0,0,.35);
      z-index:6;
    }

    .tokens{
      position:absolute;
      left:10px;
      bottom:10px;
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    .token{
      width:26px; height:26px;
      border-radius:999px;
      border:2px solid rgba(255,255,255,.25);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:16px;
      box-shadow: 0 4px 12px rgba(0,0,0,.35);
      transition: transform .15s ease;
    }
    .token.face-right{
      transform: scaleX(-1);
    }
    .token.face-right.bounce{
      animation: tokenBounceRight 0.6s ease;
    }
    .token.bounce{
      animation: tokenBounce 0.6s ease;
    }
    @keyframes tokenBounce {
      0%, 100% { transform: translateY(0) scale(1); }
      30% { transform: translateY(-12px) scale(1.1); }
      50% { transform: translateY(0) scale(0.95); }
      70% { transform: translateY(-6px) scale(1.05); }
    }
    @keyframes tokenBounceRight {
      0%, 100% { transform: translateY(0) scale(1) scaleX(-1); }
      30% { transform: translateY(-12px) scale(1.1) scaleX(-1); }
      50% { transform: translateY(0) scale(0.95) scaleX(-1); }
      70% { transform: translateY(-6px) scale(1.05) scaleX(-1); }
    }
    .token:hover{
      transform: scale(1.15);
      z-index:10;
    }

    /* Confetti */
    .confetti{
      position:absolute;
      pointer-events:none;
      z-index:100;
    }
    .confetti-piece{
      position:absolute;
      width:8px;
      height:8px;
      border-radius:2px;
      animation: confettiFall 1s ease-out forwards;
    }
    @keyframes confettiFall {
      0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
      100% { transform: translate(var(--tx), var(--ty)) rotate(var(--tr)); opacity: 0; }
    }

    /* Sidebar */
    .side{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap:12px;
    }
    @media (max-width: 768px){
      .side{ grid-template-columns: 1fr; }
    }
    .card{padding:14px;}
    .card h2{margin:0 0 10px;font-size:14px;letter-spacing:.2px;}
    .pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background: rgba(0,0,0,.12);
      font-size:12px;
      font-weight:900;
      color:rgba(231,238,247,.92);
    }
    .pill strong{font-weight:1000;}
    .muted{ color:var(--muted); font-weight:800; font-size:12px; }
    .tiny{ font-size:11px; color:rgba(231,238,247,.75); font-weight:800; }

    .playersList{display:flex;flex-direction:column;gap:8px;}
    .playerRow{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.12);
    }
    .playerName{display:flex;align-items:center;gap:10px;font-weight:950;font-size:13px;}
    .swatch{
      width:28px;
      height:28px;
      border-radius:999px;
      border:2px solid rgba(255,255,255,.25);
      box-shadow:0 2px 8px rgba(0,0,0,.25);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:16px;
    }
    .playerMeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
    .kbd{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      border:1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.18);
      border-radius:8px;
      padding:2px 6px;
      font-size:11px;
      font-weight:900;
      color:rgba(231,238,247,.9);
    }

    .log{
      max-height:240px;
      overflow:auto;
      border:1px solid var(--border);
      background: rgba(0,0,0,.18);
      border-radius:12px;
      padding:10px;
      font-size:12px;
      color:rgba(231,238,247,.9);
    }
    .log .item{padding:8px 8px;border-bottom:1px solid rgba(255,255,255,.06);}
    .log .item:last-child{border-bottom:none}

    /* Editor */
    .tileEditor{
      max-height:400px;
      overflow-y:auto;
      padding:4px;
    }
    .tileCard{
      background: var(--panel2);
      border:1px solid var(--border);
      border-radius:12px;
      padding:12px;
      margin-bottom:10px;
      transition: border-color .2s ease;
    }
    .tileCard:hover{
      border-color: rgba(255,255,255,.20);
    }
    .tileCard .header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:10px;
      gap:10px;
    }
    .tileCard .header .num{
      font-weight:1000;
      font-size:11px;
      color:var(--muted);
    }
    .tileCard .btnRemove{
      padding:4px 8px;
      font-size:11px;
      background: rgba(255,91,91,.12);
      border-color: rgba(255,91,91,.28);
    }
    .tileCard .btnRemove:hover{
      border-color: rgba(255,91,91,.45);
    }
    .formRow{
      display:grid;
      grid-template-columns: 80px 1fr;
      gap:8px;
      align-items:center;
      margin-bottom:8px;
    }
    .formLabel{
      font-size:11px;
      font-weight:800;
      color:var(--muted);
    }
    .formInput, .formSelect, .formTextarea{
      background: rgba(0,0,0,.25);
      border:1px solid rgba(255,255,255,.12);
      border-radius:8px;
      color:var(--text);
      padding:8px 10px;
      font-size:12px;
      font-weight:700;
      outline:none;
      font-family: inherit;
    }
    .formInput:focus, .formSelect:focus, .formTextarea:focus{
      border-color: rgba(255,77,109,.35);
    }
    .formTextarea{
      resize:vertical;
      min-height:36px;
      font-family: inherit;
    }
    .formInput[type="number"]{
      width:80px;
    }
    .btnAddTile{
      width:100%;
      margin-bottom:10px;
      background: rgba(76,255,122,.10);
      border-color: rgba(76,255,122,.28);
    }
    .btnAddTile:hover{
      border-color: rgba(76,255,122,.45);
    }
    .error{
      color:#ff9aa5;
      font-weight:900;
      font-size:12px;
      margin-top:8px;
      white-space:pre-wrap;
    }
    .ok{
      color:#9cffb4;
      font-weight:900;
      font-size:12px;
      margin-top:8px;
      white-space:pre-wrap;
    }

    .footerNote{
      max-width:1300px;
      margin:0 auto;
      padding:0 18px 18px;
      color:rgba(231,238,247,.60);
      font-size:11.5px;
      font-weight:750;
    }

    /* ======== Modal / Popup ======== */
    .modalOverlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:9999;
      padding:18px;
    }
    .modalOverlay.show{ display:flex; }
    .modal{
      width:min(720px, 100%);
      border-radius:18px;
      border:1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--panel);
      box-shadow: 0 22px 70px rgba(0,0,0,.55);
      overflow:hidden;
      transform: translateY(4px);
      animation: pop .12s ease-out both;
    }
    @keyframes pop{
      from{ transform: translateY(10px); opacity:.0; }
      to{ transform: translateY(0); opacity:1; }
    }
    .modalHeader{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding:14px 14px 10px;
      border-bottom:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.10);
    }
    .modalHeader .left{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .modalTitle{
      font-size:14px;
      font-weight:1000;
    }
    .modalMeta{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
      color:rgba(231,238,247,.85);
      font-size:12px;
      font-weight:900;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.14);
      font-size:12px;
      font-weight:950;
    }
    #modalPlayer{
      font-size:18px;
      font-weight:1000;
      padding:8px 14px;
      border:2px solid rgba(255,255,255,.25);
      background: linear-gradient(135deg, rgba(233,78,57,.25), rgba(233,30,137,.25));
      box-shadow: 0 2px 8px rgba(0,0,0,.2);
    }
    .modalBody{
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .modalBlock{
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.14);
      border-radius:14px;
      padding:12px;
    }
    .modalLabel{
      color:var(--muted);
      font-weight:900;
      font-size:12px;
      margin-bottom:6px;
    }
    .modalText{
      font-weight:1000;
      font-size:16px;
      line-height:1.25;
    }
    .modalHint{
      margin-top:8px;
      color:rgba(231,238,247,.82);
      font-weight:850;
      font-size:12.5px;
    }
    .modalFooter{
      padding:12px 14px;
      border-top:1px solid rgba(255,255,255,.10);
      display:flex;
      gap:10px;
      justify-content:flex-end;
      flex-wrap:wrap;
      background: rgba(0,0,0,.08);
    }
    .closeX{
      padding:8px 10px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.14);
      cursor:pointer;
      font-weight:1000;
      user-select:none;
    }
    .closeX:hover{ border-color: rgba(255,255,255,.24); }

    /* ======== Skip turn popup ======== */
    .skipOverlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:10000;
      padding:18px;
    }
    .skipOverlay.show{ display:flex; }
    .skipCard{
      width:min(520px, 100%);
      border-radius:18px;
      border:1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--panel);
      box-shadow: 0 22px 70px rgba(0,0,0,.55);
      overflow:hidden;
      animation: pop .12s ease-out both;
    }
    .skipBody{
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .skipTitle{
      font-size:16px;
      font-weight:1000;
    }
    .skipText{
      font-size:14px;
      font-weight:900;
      color:rgba(231,238,247,.92);
    }
    .skipFooter{
      padding:12px 16px;
      border-top:1px solid rgba(255,255,255,.10);
      display:flex;
      justify-content:flex-end;
      background: rgba(0,0,0,.08);
    }

    /* ======== Celebration popup ======== */
    .celebrateOverlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.62);
      backdrop-filter: blur(6px);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:10001;
      padding:18px;
    }
    .celebrateOverlay.show{ display:flex; }
    .celebrateCard{
      width:min(640px, 100%);
      border-radius:20px;
      border:1px solid rgba(255,255,255,.18);
      background:
        radial-gradient(300px 180px at 10% 0%, rgba(255,255,255,.12), transparent 60%),
        radial-gradient(280px 200px at 90% 0%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        var(--panel);
      box-shadow: 0 26px 80px rgba(0,0,0,.6);
      overflow:hidden;
      animation: pop .12s ease-out both;
    }
    .celebrateBody{
      padding:20px 20px 12px;
      display:flex;
      flex-direction:column;
      gap:10px;
      text-align:center;
    }
    .celebrateTitle{
      font-size:22px;
      font-weight:1000;
      letter-spacing:.3px;
    }
    .celebrateWinner{
      font-size:20px;
      font-weight:1000;
      color:#fff2b3;
      text-shadow: 0 2px 8px rgba(0,0,0,.35);
    }
    .celebrateSub{
      font-size:14px;
      font-weight:900;
      color:rgba(231,238,247,.9);
    }
    .celebrateFooter{
      padding:12px 16px 16px;
      display:flex;
      justify-content:center;
      gap:10px;
    }
    .giftWrap{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      margin-top:6px;
    }
    .giftButton{
      appearance:none;
      border:2px solid rgba(255,255,255,.25);
      background: linear-gradient(180deg, rgba(255,77,109,.28), rgba(255,77,109,.10));
      color:var(--text);
      padding:10px 16px;
      border-radius:14px;
      cursor:pointer;
      font-weight:1000;
      font-size:14px;
      box-shadow: 0 10px 24px rgba(0,0,0,.35);
      transition: transform .12s ease, border-color .2s ease;
    }
    .giftButton:hover{ border-color: rgba(255,255,255,.45); }
    .giftButton:active{ transform: translateY(1px) scale(.99); }
    .giftBox{
      font-size:64px;
      filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
      animation: giftBounce 1.1s ease-in-out infinite;
    }
    @keyframes giftBounce{
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-6px) scale(1.05); }
    }
    .prizeImage{
      width:min(420px, 100%);
      max-height:260px;
      object-fit:contain;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.18);
      box-shadow: 0 14px 36px rgba(0,0,0,.45);
      display:none;
    }
    .prizeImage.reveal{
      display:block;
      animation: prizePop .28s ease-out both;
    }
    @keyframes prizePop{
      0% { transform: scale(.85); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    .prizeHint{
      font-size:12px;
      color:rgba(231,238,247,.85);
      font-weight:900;
    }

    /* ======== Celebration fullscreen confetti ======== */
    .celebrateConfetti{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:10002;
      overflow:hidden;
    }
    .celebratePiece{
      position:absolute;
      width:10px;
      height:10px;
      border-radius:2px;
      animation: celebrateFall 1.4s ease-out forwards;
    }
    @keyframes celebrateFall{
      0% { transform: translate3d(0,0,0) rotate(0deg); opacity:1; }
      100% { transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--tr)); opacity:0; }
    }

    /* ======== Dice overlay animation ======== */
    .diceOverlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(4px);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:9998;
      padding:18px;
    }
    .diceOverlay.show{ display:flex; }
    .diceCard{
      width:min(520px, 100%);
      border-radius:18px;
      border:1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--panel);
      box-shadow: 0 22px 70px rgba(0,0,0,.55);
      overflow:hidden;
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:14px;
      align-items:center;
    }
    .diceTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      width:100%;
    }
    .diceTop .who{
      font-weight:1000;
      font-size:15px;
      color:rgba(231,238,247,.92);
    }
    .diceTop .meta{
      color:var(--muted);
      font-weight:900;
      font-size:12px;
    }
    .die{
      width:120px;
      height:120px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.16);
      background: radial-gradient(160px 120px at 30% 20%, rgba(255,255,255,.14), rgba(0,0,0,.06)), rgba(0,0,0,.12);
      box-shadow: 0 18px 45px rgba(0,0,0,.45);
      display:grid;
      place-items:center;
      transform-origin:center;
    }
    .die.rolling{
      animation: shake .45s ease-in-out infinite;
    }
    @keyframes shake{
      0%{ transform: rotate(0deg) scale(1); }
      25%{ transform: rotate(-8deg) scale(1.02); }
      50%{ transform: rotate(9deg) scale(1.03); }
      75%{ transform: rotate(-6deg) scale(1.02); }
      100%{ transform: rotate(0deg) scale(1); }
    }
    .pips{
      width:78%;
      height:78%;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap:10px;
      align-items:center;
      justify-items:center;
    }
    .pip{
      width:14px;
      height:14px;
      border-radius:999px;
      background: rgba(231,238,247,.92);
      box-shadow: 0 2px 6px rgba(0,0,0,.25);
      opacity:0;
    }
    .pip.on{ opacity:1; }
    .diceFooter{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      color:rgba(231,238,247,.85);
      font-weight:900;
      font-size:13px;
    }
    .diceFooter .big{
      font-size:16px;
      font-weight:1000;
    }

    /* Copy Link Tooltip */
    .copy-tooltip {
      position: absolute;
      background: var(--good);
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      font-size: 0.9rem;
      font-weight: 600;
      pointer-events: none;
      z-index: 10000;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      animation: tooltip-appear 0.3s ease-out;
      transform: translateX(-50%);
    }

    .copy-tooltip.fade-out {
      animation: tooltip-fade-out 0.3s ease-out forwards;
    }

    @keyframes tooltip-appear {
      from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
    }

    @keyframes tooltip-fade-out {
      from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
      to {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
      }
    }