html,body{
        height: 100%;
        overflow: hidden;
    }
    #uiOverlay {
        pointer-events: auto;
    }
    #uiOverlay > * {
        pointer-events: auto;
    }
   

    #Caption {
        display: flex;
        flex-direction: row;
        height:22px;
        white-space: nowrap;
        overflow:hidden;
    }
    #Title{
        font-family:"ＭＳ Ｐゴシック","ＭＳ ゴシック",sans-serif;
        font-size:120%;
        font-weight:bold;
        color: blue;
        white-space: nowrap;
        overflow:hidden;
        flex-shrink: 0;
    }
    #boxIcons{
        display: flex;
    }
    /* 観戦スイッチ */
    #boxWatching {
        position: relative;
        width: 75px;
        height: 35px;
        margin-left: auto;
    }

    #pnlArea{
        display: flex;
        flex-direction: row;
        overflow: hidden;
        border: 2px solid green;
        touch-action: none;
        height: 100%;
    }
    #pnlSite{
        /* サイドバー以外 */
        display: flex;
        height: 100%;
        flex-direction: row;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        gap: '1px';
        overflow: hidden;
    }
    /* 観戦モード */
    #pnlSpectator{
        flex: '1 1 auto';
        width: '100%';
        display: none;
        flex-direction: row;
        height: 100%;
        flex: 0 0 auto;
        background-color: lightblue;
    }
    #pnlHoldPlay{
        /* 対戦中リスト */
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 3;
    }
    #scrollerOfWatching{
        /* 観戦シートリスト */
        
        flex: 1 1 auto;
        height: 100%;
        display:flex;
        border: 2px dotted orange;
        overflow-y: hidden;
        background-color: #e8eef5;
    }
    #scrollerOfPlaying{
        /* 対戦中リスト */
        display:none;
        flex-direction: row;
        flex: 7;
        border: 2px dotted red;
    }

    /* 対戦モード */
    #pnlGaming{
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        width: 100%;
        /*background-color: red;*/
    }
    /* #pnlWatching{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex: 1;
        border: 1 dotted orange;
    } */

    #lstOnplay{
        display:flex;
        flex-direction:column;
        flex: 0 0 208px;
        background-color: azure;
        width: 200px;
    }
    #scrollerOfPlaying{
        display:flex;
        border: solid 2px black;
        height: auto;
        width: auto;
        overflow-y: scroll;
        text-align: center;
        flex: 1 1 auto;
    }
    #lstPlaying{
        display: flex;
        flex-direction: column;
        width: auto;
        height: auto;
        flex: 1;
    }
    .playTable .score{
        text-align: right;
    }
    td, th{
        min-width: 30px;
        border-collapse: collapse;
        border: 1px gray solid;
    }
    .playTable{
        border: 2px solid black;
        background-color: white;
        border-collapse: collapse;
    }
    #lstWatching{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        flex: none;               /* ← これを追加して親の自動伸縮を止める */
        overflow: hidden;
        background-color: rgb(239, 247, 250);
        border: 1px solid blue;
    }
    .playingSheet{
        display:flex;
        flex-direction: column;
        width: 95%;
        height: 100px;
        padding: 3px;
        text-align: left;
        flex: 0 1;
        background-color: cyan;
        border: 1px solid black;
    }
    
    .watchSheet{
        border: 2px solid #333;
        background-color: #f0f0f0;
        display: block;
        box-sizing: border-box;
        margin: 0px;
        width: 100%;
        height: 100%;
    }
    .containerOfWatchSheet{
        flex: none;
        position: relative;
        border: 2px solid darkblue;
        box-sizing: border-box;
        /* width: 90%; */
        padding: 0;
        margin: 0;
    }
    .boxWatching{
        border: 1px solid #ccc;
        margin: 5px;
        padding: 10px;
        background-color: #f9f9f9;
    }
    
    .flmWatching{
        text-align: center;
        margin: 5px 0;
    }
    
    #containerOfWholeSheet{
        display: flex;
        border: 5px solid darkblue;
        padding: 1px;
        width: auto;
        height:100%;
        flex: 1 1 auto;
        position: relative; 
    }
    #scrollGuide{
        display: block;
        position:absolute;
        border: 3px solid red;
        width:95%;
        height:30px;
        z-index: 50;
    }

    #wholeSheet {
        position: relative;
        flex: 0 0 auto;
        width: auto;
        height: 100%;
        background-color: rgb(233, 243, 249);
    }
#containerOfWholeSheet,
#wholeSheet {
  box-sizing: border-box;
}
/* #pnlDetail{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;  
} */
    #pnlDashboard{
        display: flex;
        flex: 0 0 auto;
        height: 80px;
        flex-direction: row;
        background-color: none;
        background-color: blue;
    }
    #pnlStage{
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }
    #boxScore{
        flex: 1 1 auto;
        display: block;
        margin: 2px;
        border-collapse: collapse;
        text-align: right;
        background-color: blue;
    }
    #spdScore{
        border-collapse: collapse;
        table-layout: fixed;
        color:azure;
        width:100%;
        white-space: nowrap;
    }
    #messageBar{
        color:azure;
        height:80px;
        width: 200px;
        flex: 1 1 auto;
    }
    #boxButtons{
        display: flex;
        flex: 1 1 auto;
        height:35px;
    }
    .cButtons{
        border: 1px solid gray;
        border-radius: 2px;
    }
    .tooltip{
        position: fixed;
        padding: 4px 8px;
        background: rgba(0,0,0,0.85);
        color: #fff;
        font-size: 12px;
        border-radius: 4px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s;
        z-index: 9999;
        white-space: nowrap;
    }
    #boxCircumstance{
        display:flex;
        flex: 1;
        height:35px;
        flex-direction: row;
    }
    #msgbuttons{
        display:flex;
        text-align: center;
    }
    #acceptBtn #refreshBtn #cancelBtn{
        flex: 1;
    }
    #SettingExit{
        margin-right:3px;
        margin-left: auto;
        cursor:default;
    }
    #settingTitle{
        display: flex;
        background:orange;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 2em;
        margin-bottom: 2em;
    }
    
    #AISetting{
        display:flex;
        flex-direction: row;
    }
    
    td{
        empty-cells: show;
    }
    #topheader{
        height:10px;
        font-size:10px;
    }
#pnlDetail{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;   /* ← 重要 */
}

/* 拡大シート：残り全部 */
#scrollerOfExpansionSheet{
    display: flex;
    flex: 1 1 auto;   /* ← 残り高さ */
    min-height: 0;    /* ← スクロール許可 */
    overflow: auto;
    border: solid 2px black;
}
#pnlCaption{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    left: 50%;
    top: 40%;
    width: 50%;
    min-width: 350px;
    min-height: 400px;
    transform: translate(-50%, -50%);

    background: rgba(0,0,0,0.3);
    padding: 30px;
    border-radius: 15px;
    color: white;
    z-index: 3000;
}
#txtCaption{
    font-size: 22pt;
    font-weight: bold;
}
#imgTitle{
    text-align: center;
    width: 400px;
}
#cmdStart{
    width: 200px;
    height: 40px;
}
/* デフォルト（PC）→ flexの子 */
#pnlHelp{
  flex: 1 1 160px;
  display: flex;
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(3px);
  flex-direction: column;
  order: 3;
  overflow: hidden;
  max-height: 100%;
  z-index: 1;
}
#pnlSignin{
    display: none;
    position: absolute;
    left: 300px;
    width: 600px;
    height: 300px;
    top: 120px;
    padding: 30px;
}
#pnlSignup{
    display: none;
    position: absolute;
    left: 300px;
    width: 600px;
    height: 400px;
    top: 120px;
    padding: 30px;
    background-color: orange;
}

/* チュートリアル：固定高さ */
#pnlTutorial{
    /* チュートリアル */
    position: absolute;
    /* border-width: 3px;
    border-color: green;
    position: absolute;
    width: 200px;
    height: 100px;
    left: 250px;
    top: 200px;
    z-index: 3000;
    background-color: rgba(120,120,120,0.65) !important; */
}
/* スマホだけポップアップ化 */
@media (max-width: 768px){
    #whContainer{
        left: 0;
    }
    #exContainer{
        height: 100%;
    }
    #exContainer,
    #exCont{
        width: 100% !important;
        max-width: 100% !important;
    }
    #mobileWhole{
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        height: 100%;
    }
    #pnlHelp{
        height: 400px;
        flex: 1 1 auto;
        position: static;
    }
}
/* ヘッダ */
#hlpHeader{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* 本文：残りをスクロール */
#txtHelp{
    flex: 1 1 0;
    overflow-y: auto;
    min-height: 0;   
}
#hlpSearchBox{
  margin-left: auto;
  display: flex;
  gap: 4px;
}
#txtHelp p{
  margin: 0 0 4px 0;
}
#hlpNav{
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 8px;
}
#cmdHlpBack,
#cmdHlpNext{
    flex: 0 0 auto;
}
    #containerOfExpansionSheet{
        display:block;
        position: relative;
        flex: 1;
    }
    #expansionSheet{
        position: relative;
        cursor: url("brush1.png") 16 16,auto;
        width:100%;
        height:100%;
        background-color: rgb(233, 243, 249);
        flex: 1;
    }
    .boxSpectator {
        display: flex;
        flex-direction: column;
        align-items: center;   /* ← これで子要素を水平方向中央寄せ */
        justify-content: flex-start; /* ← 縦方向は上寄せのまま */
    }
    .sheetinfo{
        background: linear-gradient(#d0e8ff, #b0d0f0);
        font-weight: bold;
        text-align: center;
        width: 100%;
        border-bottom: 1px solid #004080;
        padding: 2px 0;
    }
    .boxSpectator .players {
        width: 100%;
        text-align: center;
        background-color: #e8eef5;
        border-top: 1px solid #004080;
        padding: 2px 0;
        display: flex;
        justify-content: space-around;
        font-weight: bold;
    }
    /* 観戦シートの情報テーブル */
    .containerOfWatchSheet {
        position: relative;
        border: 2px solid darkblue;
        background-color: yellow;
        box-sizing: border-box;  /* ← これでborderを含めた計算 */
        padding: 0;
        margin: 0;
        flex: none;
        width: auto;
    }
    .watchSheet{
        width: 100%;
        height: 100%;
    }
    .playersTable {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
        text-align: center;
        background-color: #eef3fa;
    }
    .playersTable td {
        border-top: 1px solid #004080;
        padding: 2px 4px;
    }
    .playersTable .player {
        text-align: left;
        font-weight: bold;
        color: #003366;
        white-space: nowrap;       /* 折り返し防止 */
        overflow: hidden;          /* はみ出し非表示 */
        text-overflow: ellipsis;   /* …で省略表示も可 */
    }
    .playersTable .score {
        width: 25%;
        text-align: right;
        font-weight: bold;
    }


    #brushCursor{
        position: absolute;
        width: 32px;
        height: 32px;
        pointer-events: none;
        display: none;
        transform-origin: center center;
        z-index: 1000;        
    }
    #pnlSidebar{
        flex: 0 0 auto;
        display:flex;
        flex-direction: column;
        width: auto;
        height: 100%;
        border: 2px solid darkgray;
    }
    .sidebar{
        width: 12px;
        height: 12px;
    }
    #lblsideview{
        color:azure;
    }
    .ChallengeBox{
        display: flex;
    }
    #welcome{
        display: flex;
        flex-direction: row;
    }
    #lblStoneCount{
        flex: 1;
        color:azure;
    }
    #numStoneCount{
        flex: 1;
        width: 40px;
    }
    #lblEndCount{
        flex: 1;
        color:azure;
    }
    #numEndCount{
        flex: 1;
        width: 40px;
    }
    #lblLogin{
        flex: 1;
    }
    #matchBtn1{
        display: none;
    }
    #battleBtn1{
        display: none;
    }
    #matchBtn2{
        display: none;
        flex: 1;
    }
    #waitingStatus{
        flex: 1;
    }
    #chatBox{
        flex: 1; 
        display: flex; 
        width: 100%;
        flex-direction: column;
    }
    .chatmsg{
        margin: 0.9px;
        border-radius: 4px;
        border-width:2px;
    }
    #chatLog{
        flex: 1; 
        overflow-y: auto; 
        border: 1px solid gray; 
        background-color: azure; 
        padding: 0px;
    }
    #chatInput{
        width: 100%;
        display: block;
        ime-mode:active;
        flex: 1 1 auto;
    }
    #chatControls{
        display: flex;
        align-items: center;
        width: 100%;
        gap: 4px;
        /* overflow: hidden; */
    }

    .chatSelect{
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        user-select: none;
    }

    .chatSelect .selected{
        border: 1px solid #888;
        padding: 2px 6px;
        background: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }

    .chatSelect.open .options{
        display: block;
    }

    .chatSelect .options{
        position: absolute;
        left: 0;
        bottom: 100%;        /* ← 上に開く */
        width: 100%;
        border: 1px solid #888;
        background: #fff;
        display: none;
        z-index: 1000;
    }

    .chatSelect.open .options{
        display: block;
    }

    .chatSelect .options div{
        padding: 2px 6px;
        cursor: pointer;
    }

    .chatSelect .options div:hover{
        background: #def;
    }

    #chatSendFor{
        flex: 1 1 auto; 
        min-width: 0;
    }
    #cmdMic{
        display: none;
        flex: 0 0 0;
        width: 0;
        overflow: hidden;
        padding: 0;
        border: none;
    }
    #cmdMic.show{
        display: block !important;
        flex: 0 0 40px;
        width: 40px;
        padding: initial;
        border: initial;
    }
    #cmdChatSend{
        flex: 0 0 70px;
    }
    .pnlBorder{
        position: absolute;
        flex: 0 0 auto;
        width: 5px;
        cursor: ew-resize;
        background-color: blue;
        overflow: hidden;
        top: 0;
        bottom: 0;
        z-index: 10;
        touch-action: none;
    }
    .cStn{
        position:absolute;
        width: 10px;
        height:10px;
    }
    .lstone{
        position:absolute;
        width:20px;
        height:20px;
    }
    /* PCやタブレットではこのタブを隠す */
    #mobileTabs {
        display: none;
        flex: 1 1 auto;
    }

    .lobby-screen {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 20px;
        max-width: 400px;
        margin: auto;
    }

    .lobby-screen input {
        padding: 8px;
        font-size: 16px;
    }

    .lobby-screen button {
        padding: 10px;
        font-size: 18px;
        background-color: steelblue;
        color: azure;
        border: none;
        border-radius: 6px;
    }
    #dbgHud{
        /*スマホ用ログ*/
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        max-height: 40%;
        overflow-y: auto;
        background-color: yellow;
        color: red;
        font-size: 12px;
        font-family: monospace;
        padding: 4px;
        z-index: 2147483647;
        pointer-events: none; /* 操作を邪魔しない */
    }
    #pnlLog{
        background-color: red;
    }
    #hudLog{
        font-size: 12px;
        color: #000;
        overflow-y: auto;
        max-height: 120px;
        margin-top: 6px;
        padding: 4px;
        background-color: blue;
        border-radius: 4px;
    }

    /* スマホ縦だけに適用 */
    @media (max-width: 600px) {
        .viewArea {
            width: 100vw;
            height: calc(100vh - 50px); /* 下のタブボタン分を差し引き */
            overflow: auto;
        }

        #mobileTabs {
            display: flex;
            justify-content: space-around;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100vw;
            height: 50vh;
            background: #ccc;
            z-index: 999;
        }

        #mobileTabs button {
            flex: 1;
            font-size: 16px;
            padding: 8px;
            border: none;
            background: #eee;
        }
    }