:root{
    --wood-1:#8a5a34;
    --wood-2:#6e4324;
    --wood-3:#4a2c17;
    --line:#3a2513;
    --paper:#e9c98f;
    --brass:#c8973f;
    --brass-light:#f0ce8e;
    --jade:#3fae7a;
    --jade-glow:#7fe0b4;
    --red-piece:#b3211a;
    --red-piece-2:#7a1410;
    --black-piece:#232323;
    --black-piece-2:#0c0c0c;
    --ink:#2a1c10;
    --panel:#1c1410;
    --panel-2:#251b13;
    --cream:#f4e8d0;
    --muted:#b9a583;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    min-height:100vh;
    background:
      radial-gradient(1200px 800px at 15% -10%, #3a281a 0%, transparent 60%),
      radial-gradient(1000px 700px at 110% 110%, #2a1e14 0%, transparent 55%),
      linear-gradient(160deg, #14100c 0%, #1c150e 45%, #120d09 100%);
    color:var(--cream);
    font-family:'Inter', sans-serif;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:32px 16px 60px;
  }
  .header{
    text-align:center;
    margin-bottom:22px;
  }
  .eyebrow{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    letter-spacing:0.35em;
    text-transform:uppercase;
    font-size:12px;
    color:var(--brass);
    margin-bottom:6px;
  }
  h1{
    font-family:'Noto Serif SC', serif;
    font-weight:900;
    font-size:44px;
    margin:0;
    color:var(--cream);
    letter-spacing:0.06em;
    text-shadow:0 2px 18px rgba(200,151,63,0.25);
  }
  h1 span{color:var(--brass-light);}
  .sub{
    font-family:'Cormorant Garamond', serif;
    color:var(--muted);
    font-size:16px;
    margin-top:6px;
  }

  .layout{
    display:flex;
    gap:28px;
    align-items:flex-start;
    flex-wrap:wrap;
    justify-content:center;
  }

  /* ---- Side panel ---- */
  .panel{
    width:250px;
    background:linear-gradient(160deg, var(--panel-2), var(--panel));
    border:1px solid rgba(200,151,63,0.25);
    border-radius:14px;
    padding:20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .panel h3{
    font-family:'Noto Serif SC', serif;
    font-size:15px;
    letter-spacing:0.08em;
    color:var(--brass-light);
    margin:0 0 12px 0;
    border-bottom:1px solid rgba(200,151,63,0.2);
    padding-bottom:8px;
  }
  .turn-indicator{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border-radius:10px;
    background:rgba(0,0,0,0.25);
    margin-bottom:16px;
    font-size:14px;
  }
  .turn-dot{
    width:16px;height:16px;border-radius:50%;
    box-shadow:0 0 0 2px rgba(255,255,255,0.15) inset;
    transition:all .2s ease;
  }
  .turn-dot.red{background:radial-gradient(circle at 35% 30%, #ff6a5a, var(--red-piece) 60%, var(--red-piece-2));}
  .turn-dot.black{background:radial-gradient(circle at 35% 30%, #555, var(--black-piece) 60%, var(--black-piece-2));}
  .turn-indicator.thinking .turn-dot{animation:pulse 1s infinite;}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(0.85);}}

  .mode-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
  .mode-btn{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(200,151,63,0.25);
    color:var(--cream);
    padding:10px 12px;
    border-radius:8px;
    font-size:13px;
    cursor:pointer;
    text-align:left;
    font-family:'Inter',sans-serif;
    transition:all .15s ease;
  }
  .mode-btn:hover{border-color:var(--brass);background:rgba(200,151,63,0.08);}
  .mode-btn.active{
    background:linear-gradient(135deg, rgba(200,151,63,0.25), rgba(200,151,63,0.08));
    border-color:var(--brass);
    color:var(--brass-light);
    box-shadow:0 0 0 1px rgba(200,151,63,0.3) inset;
  }

  .action-row{display:flex;gap:8px;margin-bottom:6px;}
  .action-btn{
    flex:1;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(200,151,63,0.25);
    color:var(--cream);
    padding:9px 8px;
    border-radius:8px;
    font-size:12.5px;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:all .15s ease;
  }
  .action-btn:hover{border-color:var(--brass);color:var(--brass-light);}
  .action-btn:disabled{opacity:0.35;cursor:not-allowed;}

  .status-msg{
    margin-top:14px;
    font-family:'Cormorant Garamond', serif;
    font-size:16px;
    font-style:italic;
    color:var(--jade-glow);
    min-height:22px;
  }
  .status-msg.check{color:#ff8b6a; animation: checkShake 0.4s ease;}
  @keyframes checkShake{
    10%,90%{transform:translateX(-1px);}
    20%,80%{transform:translateX(2px);}
    30%,50%,70%{transform:translateX(-4px);}
    40%,60%{transform:translateX(4px);}
  }

  .captured-row{display:flex;flex-wrap:wrap;gap:5px;min-height:26px;}
  .cap-chip{
    width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;
    font-family:'Noto Serif SC',serif;
    opacity:0.75;
  }
  .cap-chip.red{background:rgba(179,33,26,0.25);color:#ff9a8c;border:1px solid rgba(179,33,26,0.4);}
  .cap-chip.black{background:rgba(0,0,0,0.35);color:#cfcfcf;border:1px solid rgba(255,255,255,0.15);}

  .history-box{
    margin-top:14px;
    max-height:150px;
    overflow-y:auto;
    font-size:12px;
    color:var(--muted);
    line-height:1.7;
    padding-right:4px;
  }
  .history-box::-webkit-scrollbar{width:5px;}
  .history-box::-webkit-scrollbar-thumb{background:rgba(200,151,63,0.3);border-radius:4px;}

  /* ---- Board ---- */
  .board-wrap{
    position:relative;
    padding:26px;
    border-radius:18px;
    max-width:610px;
    box-sizing:border-box;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.05), transparent 60%),
      linear-gradient(155deg, var(--wood-1), var(--wood-2) 55%, var(--wood-3));
    box-shadow:
      0 30px 70px rgba(0,0,0,0.55),
      0 0 0 1px rgba(0,0,0,0.4),
      inset 0 2px 4px rgba(255,255,255,0.15),
      inset 0 -6px 20px rgba(0,0,0,0.35);
  }
  .board-wrap::before{
    content:"";
    position:absolute; inset:8px;
    border-radius:12px;
    border:2px solid rgba(200,151,63,0.35);
    pointer-events:none;
  }
  svg{display:block; width:100%; height:auto;}
  .board-bg{fill:url(#woodGrain);}
  .gridline{stroke:var(--line); stroke-width:2.2; fill:none; opacity:0.85;}
  .border-line{stroke:var(--ink); stroke-width:3.5; fill:none;}
  .palace-line{stroke:var(--line); stroke-width:2.2;}
  .river-text{
    font-family:'Noto Serif SC', serif;
    font-size:26px;
    fill:rgba(58,37,19,0.65);
    letter-spacing:14px;
  }
  .point{fill:none; stroke:var(--line); stroke-width:2;}

  .sq-hit{fill:transparent; cursor:pointer;}

  .last-move-marker{
    fill:none; stroke:var(--jade); stroke-width:2.5; opacity:0;
    animation: markerFadeIn 0.35s ease forwards;
    transform-box: fill-box; transform-origin: center;
  }
  @keyframes markerFadeIn{
    from{opacity:0; transform:scale(1.15);}
    to{opacity:0.85; transform:scale(1);}
  }

  .move-dot{
    fill:var(--jade); opacity:0; filter:drop-shadow(0 0 6px var(--jade-glow));
    transform-box: fill-box; transform-origin: center;
    animation: dotPop 0.28s cubic-bezier(0.34,1.56,0.64,1) forwards;
  }
  .move-dot.capture-ring{
    fill:none; stroke:var(--jade); stroke-width:3.5; opacity:0; filter:drop-shadow(0 0 6px var(--jade-glow));
    transform-box: fill-box; transform-origin: center;
    animation: dotPop 0.28s cubic-bezier(0.34,1.56,0.64,1) forwards;
  }
  @keyframes dotPop{
    from{opacity:0; transform:scale(0.2);}
    to{opacity:0.85; transform:scale(1);}
  }

  /* Outer group only ever carries a translate() so it can transition
     smoothly between board squares without fighting other transforms. */
  .piece-group{
    cursor:pointer;
    transition: transform 0.34s cubic-bezier(0.32,1.3,0.44,1.02);
  }
  .piece-group.disabled{cursor:default;}
  .piece-group.dragging{transition:none;}

  /* Inner group carries scale/opacity for enter, capture and hover states,
     kept independent from the outer translate so both can animate at once. */
  .piece-visual{
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
  }
  .piece-group:not(.disabled):hover .piece-visual{
    transform: scale(1.07) translateY(-1px);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
  }
  .piece-group.piece-enter .piece-visual{
    opacity:0;
    transform: scale(0.25);
  }
  .piece-group.piece-captured .piece-visual{
    opacity:0;
    transform: scale(0.3) rotate(12deg);
    transition: transform 0.32s cubic-bezier(0.55,0,1,0.45), opacity 0.32s ease;
  }
  .piece-group.piece-selected .piece-visual{
    transform: scale(1.08) translateY(-2px);
  }
  .piece-group.piece-moving .piece-visual{
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
  }

  .piece-shadow{fill:rgba(0,0,0,0.4); filter:blur(2px);}
  .piece-base{
    stroke-width:1.5;
  }
  .piece-base.red{
    fill:radial-gradient(circle, rgba(255,255,255,0.4), var(--red-piece));
  }
  .piece-glyph{
    font-family:'Noto Serif SC', serif;
    font-weight:700;
    text-anchor:middle;
    dominant-baseline:central;
    pointer-events:none;
  }
  .piece-glyph.red{fill:#4a0a06;}
  .piece-glyph.black{fill:#eee;}

  .piece-ring{
    stroke:var(--jade-glow);
    stroke-width:3;
    fill:none;
    opacity:0;
    filter:drop-shadow(0 0 8px var(--jade-glow));
    transition: opacity 0.18s ease;
    animation: ringPulse 1.4s ease-in-out infinite;
  }
  .piece-selected .piece-ring{ opacity:1; }
  @keyframes ringPulse{
    0%,100%{ stroke-opacity:1; }
    50%{ stroke-opacity:0.45; }
  }

  .join-row{
    display:flex;
    gap:6px;
  }
  .join-row input{
    flex:1;
    min-width:0;
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(200,151,63,0.3);
    color:var(--cream);
    padding:9px 10px;
    border-radius:8px;
    font-family:'Inter',sans-serif;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.1em;
  }
  .join-row input:focus{outline:none; border-color:var(--brass);}
  .join-row .action-btn{flex:none; padding:9px 12px;}

  .room-code-box{
    background:rgba(63,174,122,0.1);
    border:1px solid rgba(63,174,122,0.35);
    border-radius:10px;
    padding:14px;
    text-align:center;
  }
  .room-code-label{
    font-size:11px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:4px;
  }
  .room-code{
    font-family:'Noto Serif SC', serif;
    font-size:26px;
    letter-spacing:0.12em;
    color:var(--jade-glow);
    font-weight:700;
  }
  .online-status{
    margin-top:10px;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:13.5px;
    color:var(--muted);
    min-height:18px;
  }
  .online-status.live{color:var(--jade-glow);}
  .online-status.warn{color:#ff8b6a;}

  .remote-tab-block h4{
    font-family:'Noto Serif SC', serif;
    font-size:13.5px;
    letter-spacing:0.04em;
    color:var(--brass-light);
    margin:0 0 8px 0;
  }

  .cheat-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:12.5px;
    padding:9px 10px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(200,151,63,0.25);
    border-radius:8px;
  }
  .switch{position:relative; display:inline-block; width:38px; height:20px; flex-shrink:0;}
  .switch input{opacity:0; width:0; height:0;}
  .switch-slider{
    position:absolute; cursor:pointer; inset:0;
    background:rgba(255,255,255,0.15);
    border-radius:20px;
    transition:0.2s;
  }
  .switch-slider::before{
    content:"";
    position:absolute; height:14px; width:14px;
    left:3px; bottom:3px;
    background:var(--cream);
    border-radius:50%;
    transition:0.2s;
  }
  .switch input:checked + .switch-slider{background:linear-gradient(135deg, var(--jade-glow), var(--jade));}
  .switch input:checked + .switch-slider::before{transform:translateX(18px);}

  .cheat-danger{
    border-color:rgba(179,33,26,0.4) !important;
    color:#ff9a8c !important;
  }
  .cheat-danger:hover{background:rgba(179,33,26,0.15) !important; border-color:#b3211a !important;}

  #cheatPanel.killmode-on{
    box-shadow:0 0 0 1px rgba(63,174,122,0.4) inset;
  }
  .killmode-active-badge{
    display:inline-block;
    margin-left:6px;
    padding:1px 6px;
    font-size:10px;
    border-radius:10px;
    background:rgba(63,174,122,0.25);
    color:var(--jade-glow);
    animation: ringPulse 1.2s ease-in-out infinite;
  }

  .footer-note{
    margin-top:22px;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    color:var(--muted);
    font-size:13px;
    text-align:center;
    max-width:520px;
  }

  .modal-overlay{
    position:fixed; inset:0;
    background:rgba(10,7,4,0.72);
    backdrop-filter:blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:50;
  }
  .modal-overlay.show{display:flex;}
  .modal-box{
    background:linear-gradient(160deg, var(--panel-2), var(--panel));
    border:1px solid rgba(200,151,63,0.4);
    border-radius:16px;
    padding:36px 40px;
    text-align:center;
    box-shadow:0 30px 80px rgba(0,0,0,0.6);
    max-width:360px;
  }
  .modal-box h2{
    font-family:'Noto Serif SC', serif;
    font-size:28px;
    color:var(--brass-light);
    margin:0 0 8px 0;
  }
  .modal-box p{
    color:var(--muted);
    font-family:'Cormorant Garamond', serif;
    font-size:16px;
    margin:0 0 22px 0;
  }
  .modal-box button{
    background:linear-gradient(135deg, var(--brass-light), var(--brass));
    border:none;
    color:#2a1c10;
    font-weight:700;
    padding:11px 26px;
    border-radius:8px;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    font-size:14px;
  }

  @media (max-width:760px){
    body{padding:20px 12px 44px;}
    h1{font-size:32px;}
    .layout{flex-direction:column; align-items:stretch; gap:16px;}
    .panel{width:100%; max-width:none;}
    .board-wrap{width:100%; max-width:100%; padding:16px;}
  }

  @media (max-width:420px){
    body{padding:16px 8px 36px;}
    .eyebrow{letter-spacing:0.22em; font-size:10.5px;}
    h1{font-size:26px;}
    .sub{font-size:14px;}
    .board-wrap{padding:10px; border-radius:14px;}
    .board-wrap::before{inset:5px; border-radius:10px;}
    .panel{padding:14px;}
    .panel h3{font-size:13.5px;}
    .action-row{flex-wrap:wrap;}
    .mode-btn{font-size:12.5px; padding:9px 10px;}
  }