:root { --pad-height: 140px; }
    html, body { margin:0; overflow:hidden; background:#000; touch-action:none; font-family:'Comic Sans MS','Hiragino Maru Gothic ProN',sans-serif; width:100vw; height:100dvh; }
    #game-container { position:absolute; top:0; left:0; width:100vw; height:100dvh; overflow:hidden; z-index:1; }
    canvas { display:block; width:100%; height:100%; }
    #overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle, rgba(8,20,12,0.85) 0%, rgba(0,0,0,0.95) 100%); backdrop-filter:blur(8px); z-index:200; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#fff; text-align:center; transition:opacity .5s; }
    #overlay.hidden { opacity:0; pointer-events:none; }
    .overlay-title { font-size:28px; color:#fff; text-shadow:0 0 10px #9ACD32,0 0 20px #7CFC00; margin-bottom:10px; font-weight:bold; white-space:nowrap; }
    #overlay-msg { font-size:15px; line-height:1.6; padding: 0 16px; }
    .overlay-score-box { background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(230,255,230,0.8)); color:#234; padding:18px 36px; border-radius:20px; border:4px solid #9ACD32; box-shadow:0 0 20px rgba(154,205,50,0.5); font-size:24px; font-weight:bold; margin:18px 0; display:none; }
    .high-score-text { color:#FF6347; font-size:18px; margin-top:8px; }
    #zukan { font-size:26px; letter-spacing:4px; margin-top:6px; }
    #start-btn { padding:14px 44px; font-size:24px; font-weight:bold; color:#fff; background:linear-gradient(to bottom,#7CFC00,#228B22); border:3px solid #fff; border-radius:40px; cursor:pointer; box-shadow:0 8px 15px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.5); margin-top:24px; touch-action:manipulation; transition:transform .1s; }
    #start-btn:active { transform:translateY(6px) scale(.95); }
    #mute-btn { margin-top:16px; padding:8px 22px; font-size:16px; font-weight:bold; color:#fff; background:rgba(255,255,255,0.15); border:2px solid rgba(255,255,255,0.6); border-radius:30px; cursor:pointer; touch-action:manipulation; }
    #ui-layer { position:absolute; top:150px; left:12px; right:12px; pointer-events:none; z-index:50; display:flex; justify-content:space-between; align-items:center; gap:6px; }
    .score-box { background:rgba(255,255,255,0.85); border:3px solid #9ACD32; border-radius:14px; padding:4px 8px; font-size:18px; font-weight:bold; color:#234; display:flex; align-items:center; gap:4px; flex-shrink:0; }
    .time-container { flex:1; min-width:60px; max-width:140px; background:rgba(0,0,0,0.6); border:2px solid rgba(255,255,255,0.8); border-radius:12px; height:18px; position:relative; overflow:hidden; }
    .time-bar { width:100%; height:100%; background:linear-gradient(to bottom,#7CFC00,#228B22); transition:width .1s linear, background .3s; }
    .control-panel { position:absolute; height:var(--pad-height); width:100%; background:linear-gradient(to bottom, rgba(10,25,15,0.7), rgba(0,0,0,0.9)); backdrop-filter:blur(8px); display:flex; justify-content:space-around; align-items:center; padding:8px 20px; box-sizing:border-box; z-index:100; user-select:none; -webkit-user-select:none; }
    
    /* アナログスティック */
    .joystick-zone { width:120px; height:120px; position:relative; touch-action:none; }
    .joystick-base { width:100px; height:100px; background:radial-gradient(circle, rgba(255,255,200,0.15) 0%, rgba(0,0,0,0.5) 100%); border:3px solid rgba(255,255,255,0.3); border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    .joystick-stick { width:55px; height:55px; background:radial-gradient(circle at 30% 30%, #FFF8B5, #DAA520); border:2px solid rgba(255,255,255,0.8); border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); box-shadow:0 6px 10px rgba(0,0,0,0.6); pointer-events:none; }
    
    #child-joystick-zone { width:140px; height:140px; }
    #child-joystick-base { width:118px; height:118px; border:4px solid rgba(154,205,50,0.5); }
    #child-joystick-stick { width:64px; height:64px; background:radial-gradient(circle at 30% 30%, #c8f0a0, #5aaa18); }
    
    .action-area { display:flex; justify-content:center; align-items:center; }
    .action-btn { width:90px; height:90px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #9ACD32, #228B22); border:4px solid rgba(255,255,255,0.9); color:#fff; font-weight:bold; display:flex; justify-content:center; align-items:center; font-size:22px; touch-action:none; box-shadow:0 8px 0 rgba(0,0,0,0.5), inset 0 -4px 8px rgba(0,0,0,0.3); text-shadow:1px 1px 2px rgba(0,0,0,0.5); transition:transform .05s, box-shadow .05s; }
    .action-btn:active, .action-btn.active { transform:translateY(8px); box-shadow:0 0 0 rgba(0,0,0,0.5), inset 0 -4px 8px rgba(0,0,0,0.3); }
    
    #parent-light-btn.active {
        background: radial-gradient(circle at 30% 30%, #FFD700, #FFA500) !important;
        border-color: #FFF !important;
        box-shadow: 0 0 15px #FFD700 !important;
    }
    
    #parent-panel { top:0; left:0; border-bottom:4px solid #FFD700; transform:rotate(180deg); }
    #child-panel { bottom:0; left:0; border-top:4px solid #7CFC00; }
    .role-label { position:absolute; top:2px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.6); font-size:10px; pointer-events:none; white-space:nowrap; text-shadow:1px 1px 2px #000; }
    
    /* 図鑑（ずかん）用のスタイル */
    .ui-zukan-btn {
        background: linear-gradient(to bottom, #FFD700, #FFA500);
        color: #fff;
        border: 3px solid #fff;
        border-radius: 24px;
        padding: 8px 16px;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
        pointer-events: auto;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        touch-action: manipulation;
        transition: transform 0.1s;
        white-space: nowrap;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .ui-zukan-btn:active {
        transform: scale(0.95);
    }
    #zukan-modal {
        position: absolute;
        top: 0; left: 0; width: 100vw; height: 100dvh;
        background: rgba(0,0,0,0.85);
        z-index: 300;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.3s;
    }
    #zukan-modal.hidden {
        opacity: 0;
        pointer-events: none;
    }
    .zukan-content {
        background: linear-gradient(135deg, #f5fff5, #dfffe0);
        border: 6px solid #228B22;
        border-radius: 28px;
        width: 90%;
        max-width: 380px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.6);
        text-align: center;
        color: #234;
        animation: popin 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        flex-direction: column;
        max-height: 85dvh;
    }
    @keyframes popin {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    .zukan-title {
        font-size: 26px;
        font-weight: bold;
        color: #228B22;
        text-shadow: 2px 2px 0 #fff;
        margin-bottom: 4px;
    }
    .zukan-comp {
        font-size: 15px;
        font-weight: bold;
        color: #444;
        margin-bottom: 12px;
    }
    .zukan-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
        overflow-y: auto;
        flex: 1;
        padding-right: 4px;
    }
    .zukan-item {
        background: #fff;
        border: 3px solid #9ACD32;
        border-radius: 18px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 4px 6px rgba(0,0,0,0.08);
    }
    .zukan-emoji {
        width: 48px;
        height: 48px;
        object-fit: contain;
        margin-bottom: 4px;
    }
    .zukan-emoji.silhouette {
        filter: brightness(0) opacity(0.18);
    }
    .zukan-name {
        font-size: 13px;
        font-weight: bold;
        color: #222;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    .zukan-rarity {
        font-size: 10px;
        font-weight: bold;
        padding: 1px 4px;
        border-radius: 4px;
        margin-top: 2px;
    }
    .zukan-rarity.common { background: #e0e0e0; color: #555; }
    .zukan-rarity.uncommon { background: #e3f2fd; color: #1e88e5; }
    .zukan-rarity.rare { background: #fff9c4; color: #f57f17; }
    
    .zukan-count {
        font-size: 11px;
        color: #666;
        margin-top: 4px;
        background: #f0f0f0;
        padding: 1px 6px;
        border-radius: 8px;
    }
    #zukan-close-btn {
        padding: 10px 40px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(to bottom, #ff7043, #f4511e);
        border: 3px solid #fff;
        border-radius: 35px;
        cursor: pointer;
        box-shadow: 0 6px 12px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.4);
        transition: transform 0.1s;
    }
    #zukan-close-btn:active {
        transform: translateY(4px) scale(0.95);
        box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    }
    .hud-group-left, .hud-group-right {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    @media (max-width: 480px) {
        #ui-layer {
            left: 8px;
            right: 8px;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 4px;
        }
        .hud-group-left, .hud-group-right {
            gap: 4px;
        }
        .score-box {
            font-size: 13px;
            padding: 2px 4px;
            gap: 2px;
            border-width: 2px;
        }
        #battery-box {
            font-size: 12px !important;
            padding: 2px 4px !important;
            border-width: 2px !important;
        }
        #battery-box .battery-container {
            width: 35px !important;
            height: 10px !important;
        }
        #battery-display {
            font-size: 10px !important;
        }
        .ui-zukan-btn {
            padding: 8px 6px !important;
            font-size: 11px !important;
            border-width: 2px !important;
            min-height: 48px !important;
            border-radius: 24px !important;
        }
        .time-container {
            flex: 1 1 100%;
            max-width: 100%;
            margin-left: 0px;
            margin-top: 4px;
            height: 14px;
        }
    }