/* Ver.0.19.50: right control panel compact redesign */
@media (min-width: 901px){
  .game-grid{grid-template-columns:minmax(0,1fr) 300px !important;gap:18px !important;align-items:start}
  .sidepanel{width:300px !important;min-width:300px !important;max-width:300px !important;padding:10px !important;box-sizing:border-box}
}
.sidepanel .demo-controls{margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.viewer-main-controls{display:flex!important;flex-direction:column!important;gap:0!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important}
.viewer-control-card,.viewer-source-buttons,.viewer-phase-buttons,.viewer-auto-buttons,.viewer-manual{margin:0!important;padding:10px 4px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;border-bottom:1px solid rgba(130,164,194,.28)!important}
.viewer-control-card:first-of-type{padding-top:4px!important}
.viewer-control-caption{margin:0 0 6px!important;font-size:13px!important;line-height:1.25!important;opacity:.78}
.viewer-mode-buttons{display:flex!important;flex-wrap:wrap!important;gap:5px!important}
.viewer-mode-chip{width:auto!important;min-width:0!important;min-height:34px!important;padding:5px 9px!important;white-space:nowrap!important;font-size:14px!important;line-height:1.2!important}
.viewer-detail-settings{width:100%!important;margin-top:7px!important;min-height:38px!important}
.viewer-source-buttons{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
.viewer-source-buttons button{width:100%!important;min-width:0!important;min-height:40px!important;margin:0!important}
.viewer-match-title{font-size:17px!important;line-height:1.35!important;margin:0 0 5px!important}
.viewer-match-meta,.viewer-match-result{font-size:13px!important;line-height:1.45!important;margin:3px 0!important;overflow-wrap:anywhere}
.viewer-prediction-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin-top:7px!important}
.viewer-prediction-actions button{width:100%!important;min-width:0!important;min-height:42px!important;padding:6px 7px!important;font-size:14px!important;line-height:1.3!important;white-space:normal!important}
#viewerPredictionOpen{grid-column:1/-1}
#viewerPredictionCandidates,#viewerPredictionResult{font-size:13px!important;line-height:1.4!important;margin-top:6px!important}
.viewer-phase-buttons{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
.viewer-phase-buttons button,.viewer-auto-buttons button,.viewer-manual-buttons button{min-width:0!important;padding:6px!important}
.viewer-auto-buttons{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
.viewer-manual-buttons-four{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:5px!important}
.viewer-current-turn,.viewer-current-move{margin:0!important;padding:0!important;min-height:0!important}
.mobile-settings-close{display:none!important}
@media (max-width:900px){.sidepanel{padding:10px!important}.viewer-control-card,.viewer-source-buttons,.viewer-phase-buttons,.viewer-auto-buttons,.viewer-manual{padding:10px 4px!important}}
@media (max-width:900px){html.mobile-settings-active .mobile-settings-close{display:block!important}}

/* Ver.0.19.51: LIVE controls visibility. Must beat display:grid!important above. */
.viewer-phase-buttons[hidden],
.viewer-auto-buttons[hidden],
.viewer-manual[hidden] { display:none!important; }


/* Ver.0.19.52: LIVE layout cleanup */

/* Desktop: selected match details are already in the right panel. */
@media (min-width:901px){
  .viewer-selected-game-heading{display:none!important}
}

/* Mobile keeps only event + game title. No placeholder "先手－後手". */
.viewer-selected-players{display:none!important}

/* Current move + game-list navigation share one compact row on desktop. */
.viewer-live-title-row{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 10px!important;
}
.viewer-live-title-row #viewerTopMove{
  flex:1 1 auto!important;
  margin:0!important;
}
#dxEventButton{
  flex:0 0 auto!important;
  min-width:112px!important;
  margin:0!important;
  white-space:nowrap!important;
}

/* Mobile game-list navigation belongs in Settings. */
#dxEventButtonMobile{display:none!important}
@media (max-width:900px){
  #dxEventButton{display:none!important}
  #dxEventButtonMobile{
    display:block!important;
    width:100%!important;
    margin:8px 0 10px!important;
    min-height:46px!important;
  }
  .viewer-live-title-row{display:block!important;margin:0!important}
  .viewer-selected-game-heading{
    margin:0 0 10px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
}

/* LIVE: phase jumps and automatic replay controls do not exist. */
html[data-viewer-game-mode="live"] .viewer-phase-buttons,
html[data-viewer-game-mode="live"] .viewer-auto-buttons,
html[data-viewer-game-mode="live"] .mobile-phase-row,
html[data-viewer-game-mode="live"] .mobile-play-row .viewer-autoplay-toggle,
html[data-viewer-game-mode="live"] .mobile-play-row .viewer-stop-video,
html[data-viewer-game-mode="live"] .viewer-manual,
html[data-viewer-game-mode="live"] .mobile-playback{
  display:none!important;
}
html[data-viewer-game-mode="live"].live-history-enabled .viewer-manual{display:block!important}
html[data-viewer-game-mode="live"].live-history-enabled .mobile-playback{display:block!important}
html[data-viewer-game-mode="live"].live-history-enabled .mobile-play-row{display:grid!important;grid-template-columns:repeat(4,1fr)!important}
html[data-viewer-game-mode="live"].live-history-enabled .mobile-play-row .viewer-autoplay-toggle,
html[data-viewer-game-mode="live"].live-history-enabled .mobile-play-row .viewer-stop-video{display:none!important}
.viewer-live-check-response{margin:0 0 7px;padding:7px 10px;border:2px solid #d44848;border-radius:8px;background:#3a1518;color:#ffe0df;font-weight:900;text-align:center}

/* Finished/replay mode restores the normal replay UI. */
html[data-viewer-game-mode="replay"] .viewer-phase-buttons{
  display:grid!important;
}
html[data-viewer-game-mode="replay"] .viewer-auto-buttons{
  display:grid!important;
}


/* ============================================================
   Ver.0.19.60 — iPhone traditional piece text direct positioning
   Each kanji is an independent absolutely positioned glyph.
   No writing-mode, flex stacking, or inherited piece font sizing.
   ============================================================ */
@media (max-width:900px){

  html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    inset:auto !important;
    width:68% !important;
    height:76% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    transform-origin:50% 50% !important;
  }

  html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece.sente-char{
    transform:translate(-50%,-50%) !important;
  }

  html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece.gote-char{
    transform:translate(-50%,-50%) rotate(180deg) !important;
  }

  html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece > .board-character-label{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:hidden !important;
    background:transparent !important;
    border:0 !important;

    writing-mode:horizontal-tb !important;
    -webkit-writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    white-space:normal !important;

    font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","MS PMincho",serif !important;
    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    transform:none !important;
    color:#17100a !important;
  }

  html[data-viewer-mode="traditional"] #board .square > .piece.board-character-piece > .board-character-label > .board-kanji-char{
    position:absolute !important;
    left:50% !important;
    display:block !important;
    width:1.1em !important;
    height:1.05em !important;
    margin:0 !important;
    padding:0 !important;

    writing-mode:horizontal-tb !important;
    -webkit-writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    white-space:nowrap !important;

    font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","MS PMincho",serif !important;
    font-size:12px !important;
    font-weight:900 !important;
    line-height:1.05em !important;
    letter-spacing:0 !important;
    text-align:center !important;

    transform:translateX(-50%) !important;
    overflow:visible !important;
  }

  /* Two-character official names: explicit coordinates. */
  html[data-viewer-mode="traditional"] #board .board-character-label > .board-kanji-char:nth-child(1):not(:only-child){
    top:24% !important;
  }
  html[data-viewer-mode="traditional"] #board .board-character-label > .board-kanji-char:nth-child(2){
    top:50% !important;
  }

  /* One-character names (と・馬・龍 etc.) stay centered. */
  html[data-viewer-mode="traditional"] #board .board-character-label > .board-kanji-char:only-child{
    top:38% !important;
  }

  /* Gote is already rotated with the whole piece. Never rotate glyphs independently. */
  html[data-viewer-mode="traditional"] #board .piece.board-character-piece.gote-char > .board-character-label,
  html[data-viewer-mode="traditional"] #board .piece.board-character-piece.gote-char > .board-character-label > .board-kanji-char{
    transform:none !important;
  }
  html[data-viewer-mode="traditional"] #board .piece.board-character-piece.gote-char > .board-character-label > .board-kanji-char{
    transform:translateX(-50%) !important;
  }

  html[data-viewer-mode="traditional"] #board .piece.board-character-piece.promoted > .board-character-label,
  html[data-viewer-mode="traditional"] #board .piece.board-character-piece.promoted > .board-character-label > .board-kanji-char{
    color:#b51f18 !important;
  }
}