:root {
    --brand-color: #4A90E2;
    --bg-canvas: #ffffff;
    --btn-color: #f39c12;
    --btn-active: #e67e22;
    --danger: #e74c3c;
    --success: #2ecc71;
    --play: #9b59b6;
    --teacher-bg: #2c3e50;
    --eraser: #95a5a6;
    --select-bg: #eaf2f8; 
}

* { box-sizing: border-box; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body { margin: 0; padding: 0; width: 100vw; height: 100dvh; display: flex; font-family: 'M PLUS Rounded 1c', sans-serif; overflow: hidden; background-color: #000; }

/* 厳格な非表示クラス */
.hidden { opacity: 0; pointer-events: none; visibility: hidden; z-index: -1 !important; position: absolute; }
.klee-text { font-family: 'Klee One', cursive; }

.home-btn {
    position: absolute; top: 15px; left: 15px; z-index: 9998;
    width: clamp(40px, 6vw, 60px); height: clamp(40px, 6vw, 60px); border-radius: 50%;
    background: rgba(255, 255, 255, 0.9); border: 4px solid var(--brand-color);
    font-size: clamp(1.2rem, 2.5vw, 1.8rem); cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: transform 0.1s;
}
.home-btn:active { transform: scale(0.9); }

#app-container { position: relative; width: 100vw; height: 100dvh; background-color: var(--select-bg); display: flex; overflow: hidden; }
.screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; }

#game-area, #teacher-game-area { width: 70%; height: 100%; display: flex; flex-direction: column; padding: 2vh; padding-top: 80px; position: relative; }
#teacher-game-area { background-color: #87CEEB; padding: 0; }
#canvas-container { flex-grow: 1; background-color: #ffffff; border-radius: 15px; box-shadow: inset 0 0 20px rgba(0,0,0,0.1); position: relative; overflow: hidden; }

#kids-trace-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.3; z-index: 1; pointer-events: none; }
#kids-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; touch-action: none; z-index: 2; pointer-events: auto; mix-blend-mode: multiply; }

#ui-area, #teacher-ui-area { width: 30%; height: 100%; background-color: #e6dcc3; background-image: url('https://deji-lab.com/wp-content/uploads/2026/05/wood-bg.jpg'); border-left: 6px solid #8e6c4a; display: flex; flex-direction: column; padding: 1vh; gap: 1vh; box-shadow: -5px 0 15px rgba(0,0,0,0.5); z-index: 30; overflow-y: auto; pointer-events: auto; }
.panel-title { font-size: clamp(1rem, 1.8vw, 1.5rem); text-align: center; color: #5c4033; font-weight: bold; background: rgba(255, 255, 255, 0.7); padding: 3px; border-radius: 10px; margin: 0; flex-shrink: 0; }

.tool-group { display: flex; gap: 0.5vh; justify-content: space-between; }
.tool-btn { flex: 1; font-size: 1rem; padding: 0.5vh 0; background-color: #bdc3c7; box-shadow: 0 4px 0 #95a5a6; display: flex; align-items: center; justify-content: center; gap: 3px; color: #333; }
.tool-icon, .tool-text { pointer-events: none; }
.tool-btn.active-tool { background-color: var(--success); box-shadow: 0 4px 0 #27ae60; transform: translateY(2px); color: #fff; }

.slider-group { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.6); padding: 5px 10px; border-radius: 10px; font-weight: bold; color: #5c4033; }
.slider-group input { flex-grow: 1; pointer-events: auto; }

.color-palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5vh; background: rgba(255, 255, 255, 0.6); padding: 8px; border-radius: 10px; }
.color-btn { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); cursor: pointer; transition: transform 0.1s; pointer-events: auto; }
.color-btn.active { transform: scale(1.15); border-color: var(--brand-color); }

.history-group { display: flex; gap: 0.5vh; }
.action-btn { flex: 1; background-color: #7f8c8d; box-shadow: 0 4px 0 #34495e; font-size: 0.85rem; padding: 0.5vh 0; }
.danger-btn { flex: 1.2; background-color: var(--danger); box-shadow: 0 4px 0 #c0392b; font-size: 0.85rem; padding: 0.5vh 0; }

.action-group { display: flex; flex-direction: column; gap: 0.5vh; background: rgba(255, 255, 255, 0.6); padding: 8px; border-radius: 10px; flex-shrink: 0; }
.swimmy-controls { background: rgba(241, 196, 15, 0.3); border: 2px solid #f1c40f; }

.room-input-group { display: flex; flex-direction: column; gap: 2px; font-weight: bold; color: #5c4033; font-size: 0.9rem; }
.room-input-group input, .room-input-group select { font-size: 1.1rem; padding: 5px; border-radius: 8px; border: 2px solid #ccc; text-align: center; pointer-events: auto; }

.ui-btn { color: #fff; border: none; border-radius: 10px; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: bold; padding: 0.8vh; cursor: pointer; transition: transform 0.05s, box-shadow 0.05s; display: flex; align-items: center; justify-content: center; gap: 5px; pointer-events: auto; }
.ui-btn:active { transform: translateY(4px); box-shadow: 0 0px 0 transparent !important; }
.ui-btn.disabled { opacity: 0.4; pointer-events: none; box-shadow: none; transform: translateY(4px); }

.play-btn { background-color: var(--play); box-shadow: 0 4px 0 #8e44ad; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.upload-btn { background-color: var(--brand-color); box-shadow: 0 4px 0 #2980b9; cursor: pointer; font-size: 1rem; }
.qr-btn { background-color: #27ae60; box-shadow: 0 4px 0 #1e8449; font-size: 1rem; }
.trace-btn { background-color: #f39c12; box-shadow: 0 4px 0 #d35400; }
.special-btn { background-color: #f1c40f; color: #333; box-shadow: 0 4px 0 #f39c12; }
.special-btn.active-mode { background-color: var(--success); color: #fff; box-shadow: 0 4px 0 #27ae60; }

#bg-canvas, #mask-canvas, #tank-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#bg-canvas { z-index: 1; pointer-events: none; }
#mask-canvas { z-index: 2; opacity: 0; pointer-events: none; } 
#tank-canvas { z-index: 3; pointer-events: auto; } 

.qr-overlay { background: rgba(0,0,0,0.8); z-index: 9999; justify-content: center; align-items: center; pointer-events: auto; }
.qr-box { background: #fff; padding: 30px; border-radius: 20px; text-align: center; border: 5px solid var(--brand-color); max-width: 90%; }
.qr-placeholder { width: 250px; height: 250px; background: #eee; margin: 20px auto; display: flex; align-items: center; justify-content: center; border: 4px dashed #ccc; font-weight: bold; color: #777; }
#qr-image { width: 100%; height: 100%; object-fit: contain; }
.qr-url-text { font-size: 1.2rem; color: var(--brand-color); font-weight: bold; word-break: break-all; margin-bottom: 10px; }

/* === ジェムナビボタン === */
.gem-navi-wrapper { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; align-items: stretch; background: #fff; border-radius: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.2); border: 3px solid #78C2C4; overflow: hidden; transition: box-shadow 0.2s; pointer-events: auto; }
.gem-navi-handle { padding: 0 15px; background: #E6E9ED; color: #AAB2BD; cursor: grab; font-size: 1.2rem; user-select: none; touch-action: none; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.gem-navi-handle:active { cursor: grabbing; background: #CCD1D9; }
.gem-navi-btn { background: linear-gradient(135deg, #A0CECB, #78C2C4); color: #fff !important; text-decoration: none; padding: 10px 20px; font-weight: bold; font-family: "M PLUS Rounded 1c", sans-serif; display: flex; align-items: center; gap: 5px; font-size: 1rem; white-space: nowrap; pointer-events: auto; }
.gem-navi-btn:hover { opacity: 0.9; }
.gem-navi-icon { width: 24px !important; height: 24px !important; object-fit: cover !important; border-radius: 50% !important; flex-shrink: 0 !important; margin-right: 4px !important; display: inline-block !important; }

/* GIGA端末配慮（大きな画面での調整） */
@media (min-width: 768px) {
    .panel-title { padding: 5px; font-size: 1.2rem; }
    .ui-btn { padding: 1vh 1vh; font-size: 1.1rem; }
    .room-input-group input, .room-input-group select { font-size: 1.3rem; }
}