body { margin:0; font-family:sans-serif; background-color: #f5f5f5; }
    
    /* ウェルカム画面 */
    #welcome-screen {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        height: 100vh; background-color: #e0f7fa; text-align: center;
    }
    #welcome-screen h1 { color: #00796b; font-size: 3.5em; margin-bottom: 10px; }
    #welcome-screen p { color: #555; font-size: 1.2em; margin-bottom: 20px; }
    #welcome-screen .warning { color: #d32f2f; font-size: 0.9em; font-weight: bold; background: #ffebee; padding: 15px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid #f44336; max-width: 600px; margin-left: auto; margin-right: auto;}
    
    /* ボタンの基本スタイル */
    #welcome-screen button {
        padding: 15px 40px; font-size: 1.4em; font-weight: bold; color: white;
        background-color: #00897b; border: none; border-radius: 8px; cursor: pointer;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: background-color 0.3s;
    }
    #welcome-screen button:hover { background-color: #00695c; }
    
    /* 参加者・管理者用ボックス */
    .user-join-box { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); max-width: 500px; }
    .admin-info-box { background: #fff; padding: 18px 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); max-width: 600px; margin: 0 auto 30px auto; text-align: left; }
    .admin-info-box summary { cursor: pointer; color: #00796b; font-weight: bold; font-size: 1.15em; }
    .admin-info-box[open] summary { border-bottom: 2px solid #e0f2f1; padding-bottom: 10px; margin-bottom: 15px; }
    .admin-info-box h3 { color: #00796b; margin-top: 0; border-bottom: 2px solid #e0f2f1; padding-bottom: 10px; font-size: 1.3em; }
    .admin-info-box p { color: #555; font-size: 1em; margin-bottom: 20px; line-height: 1.5; }
    
    /* 復旧ボタン用スタイル */
    #welcome-screen button.btn-resume { padding: 10px 20px; font-size: 1.1em; background-color: #ff9800; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
    #welcome-screen button.btn-resume:hover { background-color: #f57c00; }

    /* メインアプリ */
    #main-app { display: none; }
    
    /* ワークスペース (キャンバス画面) */
    #main-workspace { display: block; }

    #top-bar { background:#eee; padding:8px 15px; display:flex; flex-wrap:wrap; gap:6px 15px; align-items:center; justify-content:space-between; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    #main-controls { display:flex; flex-wrap:wrap; align-items:center; gap: 6px; }
    #board-navigation { white-space: nowrap; }
    /* 1500px未満ではタイトルを隠して、道具のボタンを1段に収める（GIGA端末の1366px幅でも1段になる） */
    @media (max-width: 1500px) { .app-title { display: none; } }
    #main-controls button { white-space: nowrap; padding: 5px 7px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; }
    #main-controls button.active { background-color: #d0e0ff; border-color: #6a9cff; }
    #main-controls button:disabled { opacity: 0.5; cursor: not-allowed; }
    /* 「先生を呼ぶ」ボタン：押している間は赤くして、呼び出し中だと分かるようにする */
    #btn-help.active { background-color: #e53935; border-color: #b71c1c; color: #fff; animation: help-pulse 1s ease-in-out infinite; }
    @keyframes help-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
    
    #adminbar { background:#ffe8c8; padding:8px 10px; border-bottom: 1px solid #ddd; display: none; gap: 6px; align-items: center; font-size: 14px; flex-wrap: wrap; }
    #adminbar button { padding: 5px 10px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; font-weight: bold;}
    #adminbar button:hover { background-color: #f0f0f0; }
    /* 区切り線。管理バーは1366px幅でも1段に収める必要があるため、余白は最小限 */
    .bar-sep { width: 1px; height: 20px; background: #ccc; margin: 0 2px; }
    #adminbar button.danger { margin-left: auto; color: #b71c1c; border-color: #e53935; }
    #adminbar button.danger:hover { background-color: #ffebee; }
    #conn-banner { display: none; background: #b71c1c; color: #fff; padding: 8px 15px; text-align: center; font-weight: bold; font-size: 15px; }
    #gather-banner { display: none; background: #fff3e0; color: #e65100; border-bottom: 2px solid #ff9800; padding: 8px 15px; text-align: center; font-weight: bold; font-size: 15px; }
    #lock-banner { display: none; background: #ffebee; color: #b71c1c; border-bottom: 2px solid #e53935; padding: 8px 15px; text-align: center; font-weight: bold; font-size: 15px; }

    #board-wrapper { display: block; margin-top: 20px; }
    #board-scaler { position: relative; width: 1200px; height: 800px; margin: 0 auto; }
    #canvasdiv { position:relative; transform-origin: 0 0; width:1200px; height:800px; background-color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; transition: opacity 0.3s; }
    #bgimg { position:absolute; left:0; top:0; z-index:0; width: 1200px; height: 800px; object-fit: cover; }
    #drawarea { position:absolute; left:0; top:0; z-index:1; cursor: crosshair; }
    #items-container { position:absolute; left:0; top:0; width: 100%; height: 100%; z-index:2; pointer-events: none; }

    .locked-board #drawarea { cursor: not-allowed !important; }
    .locked-board .sticky, .locked-board .textbox, .locked-board .board-image { pointer-events: none !important; }

    .sticky {
        position:absolute; padding:7px 8px;
        border:2px solid orange; border-radius:7px; box-sizing:border-box; cursor:move;
        white-space:pre-wrap; word-break:break-word;
        background:#FFFACD;
        /* 大きさはドラッグ(.resizerハンドル)で変える。文字は fitStickyFont() が、この枠に収まる
           最大サイズを計算して調整するので、はみ出た場合の保険として隠す */
        overflow:hidden; user-select:none; pointer-events: auto; box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    }
    /* 指でも押せる大きさの、付箋専用リサイズハンドル（画像の .resizer と見た目は共通） */
    /* ふせんは overflow:hidden なので、ハンドルが外側にはみ出る画像用の位置だとクリップされて見えなくなる。
       完全に内側に収まるよう詰める */
    .sticky .resizer { background: #d2691e; right: 1px; bottom: 1px; }
    .textbox {
        position:absolute; color:#111; background:rgba(255,255,255,0.5); font:18px Arial; padding:4px 7px; border-radius:3px; cursor:move; min-width:30px; user-select:none; pointer-events: auto; border: 1px dashed transparent;
    }

    /* 画像アイテム用CSS */
    .board-image {
        position: absolute; box-sizing: border-box; cursor: move; user-select: none; pointer-events: auto;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.2); transform-origin: center center;
    }
    /* ふせん・文字・画像・つまみは、指でなぞってもページをスクロールさせない（ドラッグ操作に専念させる） */
    .sticky, .textbox, .board-image, .resizer, .rotater { touch-action: none; }
    .board-image img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; border-radius: 4px; }
    .resizer {
        width: 18px; height: 18px; background: #00897b; position: absolute; right: -8px; bottom: -8px;
        border-radius: 50%; cursor: se-resize; z-index: 10; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .rotater {
        width: 18px; height: 18px; background: #ff9800; position: absolute; left: 50%; top: -25px;
        transform: translateX(-50%); border-radius: 50%; cursor: grab; z-index: 10; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .rotater:active { cursor: grabbing; }
    .rotater-line {
        width: 2px; height: 20px; background: #ff9800; position: absolute; left: 50%; top: -10px;
        transform: translateX(-50%); z-index: 9;
    }

    /* ギャラリー画面 */
    #gallery-screen { display: none; padding: 20px; min-height: 100vh; background-color: #eceff1; }
    #gallery-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    #gallery-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
    #gallery-tabs button { padding: 10px 20px; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; background: #fff; font-weight: bold; font-size: 14px;}
    #gallery-tabs button.active { background: #00897b; color: #fff; border-color: #00695c; }
    #gallery-content { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
    .gallery-item { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
    .gallery-item:hover { transform: scale(1.03); box-shadow: 0 6px 15px rgba(0,0,0,0.2); border-color: #00897b; }
    .gallery-item h3 { margin: 0 0 4px 0; color: #333; font-size: 16px; }
    .gallery-item canvas { border: 1px solid #ccc; background-color: #fff; display: block; margin: 0 auto; }
    /* まだ何も書き込まれていない班を、一覧の中で目立たせる（活動が止まっている班に早く気づけるように） */
    .gallery-item-status { font-size: 12px; color: #777; margin-bottom: 8px; }
    .gallery-item-empty { border: 3px solid #ef6c00; }
    .gallery-item-empty .gallery-item-status { color: #ef6c00; font-weight: bold; }
    /* 「先生を呼ぶ」が押されている班は、未更新よりさらに目立つ表示にする（対応漏れを防ぐ） */
    .gallery-item-help { border: 3px solid #e53935; animation: gallery-help-glow 1.2s ease-in-out infinite; }
    .gallery-item-help .gallery-item-status { color: #e53935; font-weight: bold; }
    /* 報告された書き込みがある班（先生を呼ぶ・未更新より下、通常より上の優先） */
    .gallery-item-reported { border: 3px solid #ad1457; }
    .gallery-item-reported .gallery-item-status { color: #ad1457; font-weight: bold; }
    .gallery-ack-btn { display: block; margin: 0 auto 8px; padding: 4px 12px; font-size: 12px; font-weight: bold;
        background: #e53935; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
    .gallery-ack-btn:hover { background: #b71c1c; }
    @keyframes gallery-help-glow { 0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } 50% { box-shadow: 0 0 0 6px rgba(229,57,53,0.35); } }

    /* モーダルダイアログ関係 */
    .dlg-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; display: none; backdrop-filter: blur(2px); }
    .modal-dlg {
        position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
        z-index:1000; background:#fff; padding:25px; border-radius:12px;
        box-shadow:0 10px 30px rgba(0,0,0,0.3); display:none;
        max-width: 650px; width: 90%; max-height: 85vh; overflow-y: auto;
    }
    .modal-dlg h2 { margin-top: 0; color: #00796b; border-bottom: 2px solid #e0f2f1; padding-bottom: 10px; }
    .modal-dlg h3 { color: #333; margin-top: 20px; margin-bottom: 10px; font-size: 16px; }
    .modal-btn { padding: 8px 15px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #eee; font-weight: bold; }
    .modal-btn:hover { background: #e0e0e0; }
    .modal-btn.primary { background: #00897b; color: white; border-color: #00695c; }
    .modal-btn.primary:hover { background: #00695c; }
    .modal-btn.danger { background: #e53935; color: white; border-color: #c62828; }
    .modal-btn.danger:hover { background: #c62828; }

    table.settings-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    table.settings-table th, table.settings-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    table.settings-table th { background-color: #f5f5f5; }

    /* 小さいダイアログ */
    #stickyDlg, #textboxDlg { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1001; background:#fffbe6; border:2px solid orange; padding:18px 25px; border-radius:12px; display:none; box-shadow:0 4px 25px rgba(0,0,0,0.3); }
    #textboxDlg { background:#ecf0f1; border-color: #888; }
    .color-pick { display:inline-block; width:22px; height:22px; margin:0 2px; cursor:pointer; border:2px solid #ccc; border-radius:6px; }
    .color-act { border:2.5px solid #111; }
    #drawsetting { display: flex; align-items: center; gap: 5px; margin-left: 10px; }
    .drawcolor { display:inline-block; width:24px; height:24px; border:2px solid #888; cursor:pointer; border-radius:6px; }
    .dc-active { border:2px solid #000; transform: scale(1.1); }
    /* ペンの太さ: 細・中・太の3択（小さい子でも迷わず押せるように。丸の大きさが実際の太さ） */
    #drawsetting button.pen-size { display:inline-flex; align-items:center; gap:3px; padding:5px 6px; cursor:pointer; border:1px solid #ccc; border-radius:4px; background:#fff; white-space:nowrap; }
    #drawsetting button.pen-size.active { background:#d0e0ff; border-color:#6a9cff; }
    .pen-dot { display:inline-block; border-radius:50%; border:1px solid #888; box-sizing:content-box; }
    /* 「書き込み」の許可/停止。色と文言の両方で今の状態を示す（赤＝止まっている、緑＝書ける） */
    .input-toggle { cursor: pointer; padding: 4px 10px; border-radius: 6px; border: 2px solid; font-size: 14px; }
    .input-toggle.on { color: #1b5e20; background: #e8f5e9; border-color: #43a047; }
    .input-toggle.off { color: #b71c1c; background: #ffebee; border-color: #e53935; }
    /* 上ツールバーに入れる、管理者用の小さいチェック付き設定（生徒の画像保存許可など） */
    .mini-toggle { cursor: pointer; font-size: 13px; color: #555; margin-right: 8px; white-space: nowrap; }
    .mini-toggle input { vertical-align: middle; margin-right: 2px; }
    /* サーバーからのお知らせ（上限到達など）。ダイアログ(z-index 1001)より手前に、ツールバーを隠さないよう画面下部に、操作を邪魔しない形で出す */
    #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: 90vw; padding: 10px 18px; background: #b71c1c; color: #fff; border-radius: 8px; font-size: 15px; font-weight: bold; box-shadow: 0 3px 14px rgba(0,0,0,0.35); z-index: 2000; display: none; pointer-events: none; white-space: pre-line; text-align: center; }
    #toast.success { background: #2e7d32; }
    #toast.info { background: #37474f; }
    /* 元に戻す／やり直す: 盤面の左下に浮かべる */
    #undo-bar { position: fixed; left: 14px; bottom: 20px; z-index: 60; display: flex; gap: 8px; }
    #undo-bar button { min-height: 40px; padding: 6px 14px; font-size: 15px; font-weight: bold; cursor: pointer; background: #fff; border: 1px solid #999; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
    #undo-bar button:hover:not(:disabled) { background: #e3f2fd; }
    #undo-bar button:disabled { opacity: 0.4; cursor: not-allowed; }
    /* 共有タイマー: 盤面の右下に浮かべる（参加者にも見えるので undo-bar より目立つ色にする） */
    #timer-badge { display: none; position: fixed; right: 14px; bottom: 20px; z-index: 60; align-items: center; gap: 8px;
        background: #fff; border: 2px solid #7e57c2; border-radius: 10px; padding: 6px 8px 6px 14px;
        font-size: 20px; font-weight: bold; color: #4527a0; box-shadow: 0 2px 8px rgba(0,0,0,0.25); font-variant-numeric: tabular-nums; }
    #timer-badge.showing { display: flex; }
    #timer-badge.done { border-color: #e53935; color: #b71c1c; background: #ffebee; animation: timer-pulse 0.8s ease-in-out 4; }
    #timer-badge button { border: none; background: transparent; font-size: 17px; line-height: 1; cursor: pointer; color: #999; padding: 6px; }
    #timer-badge button:hover { color: #333; }
    @keyframes timer-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
    /* 保存メニュー */
    .save-menu { position: relative; }
    #expiry-chip { font-weight: normal; font-size: 12px; color: #555; }
    #btn-save.warn { border-color: #e53935; background: #ffebee; }
    #expiry-chip.warn { color: #b71c1c; font-weight: bold; }
    #save-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 300px; box-sizing: border-box; flex-direction: column; gap: 8px; padding: 12px; background: #fff; border: 1px solid #bbb; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
    #save-panel.open { display: flex; }
    #save-panel button { text-align: left; }
    #save-info { font-size: 13px; color: #333; line-height: 1.6; white-space: pre-line; }
    .id-copy { padding: 2px 6px; font-size: 12px; background: #e0e0e0; border: none; cursor: pointer; border-radius: 3px; }

    /* タッチ画面のある端末（タブレット・タッチ対応Chromebook）では、指で押せる大きさ（目安44px以上）にする。
       マウスだけのPCの見た目と幅は変えない。大きくなる分、ツールバーは2段になることがある */
    @media (any-pointer: coarse) {
        #main-controls button, #adminbar button, #drawsetting button.pen-size { min-height: 44px; padding-left: 12px; padding-right: 12px; }
        #adminbar button.id-copy { min-height: 36px; min-width: 44px; font-size: 16px; }
        .drawcolor { width: 36px; height: 36px; }
        #board-select { min-height: 40px; font-size: 16px; }
        .input-toggle { padding: 9px 12px; }
        input[type="checkbox"] { width: 22px; height: 22px; }
        .modal-btn { min-height: 44px; }
        #undo-bar button { min-height: 48px; padding: 8px 18px; }
        #welcome-screen button { min-height: 48px; }
        /* つまみは、盤面を縮小していても、画面上で30px(指で押せる大きさ)になるよう、縮小率で割って大きくする */
        .resizer { width: calc(30px / var(--board-scale, 1)); height: calc(30px / var(--board-scale, 1)); right: calc(-14px / var(--board-scale, 1)); bottom: calc(-14px / var(--board-scale, 1)); }
        .rotater { width: calc(30px / var(--board-scale, 1)); height: calc(30px / var(--board-scale, 1)); top: calc(-44px / var(--board-scale, 1)); }
        .rotater-line { height: calc(34px / var(--board-scale, 1)); top: calc(-24px / var(--board-scale, 1)); }
        .sticky, .textbox, .board-image { -webkit-touch-callout: none; }
    }

    /* 書き込みの報告: 報告された付箋・文字を、先生の画面でだけ赤くふちどる（outlineなので、文字量の計算には影響しない） */
    .sticky.reported, .textbox.reported { outline: 3px solid #e53935; outline-offset: 2px; animation: reported-pulse 1.4s ease-in-out infinite; }
    @keyframes reported-pulse { 0%, 100% { outline-color: #e53935; } 50% { outline-color: #ffcdd2; } }
    .report-row { margin-bottom: 12px; padding: 8px 10px; border-radius: 6px; background: #fafafa; border: 1px dashed #ccc; font-size: 13px; }
    .report-row.flagged { background: #ffebee; border: 1px solid #e53935; color: #b71c1c; font-weight: bold; }
    .report-row button { margin-top: 4px; }

    /* 名前の入力(入室の前) */
    #nameGate { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(224, 247, 250, 0.97); align-items: center; justify-content: center; }
    #nameGate.open { display: flex; }
    /* 書いた人の名前: 付箋・文字の左下に小さく出す。::after なので、本文(textContent)や文字サイズの計算には影響しない */
    .sticky[data-author]::after, .textbox[data-author]::after {
        content: attr(data-author); position: absolute; left: 4px; bottom: 2px; max-width: 60%;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: normal; line-height: 1.3;
        padding: 0 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.8); color: #555; pointer-events: none;
    }
    .textbox[data-author]::after { bottom: auto; top: 100%; left: 0; margin-top: 1px; }