:root {
        --bg-color: #faf6f0; /* 温かみのあるクレイ調の背景 */
        --card-bg: #ffffff;
        --text-color: #4a3f35;
        --primary-color: #ff7043; /* ポップなオレンジ */
        --secondary-color: #4db6ac; /* パステルグリーン */
        --border-color: #e0d5c1;
    }
    
    * {
        box-sizing: border-box;
        user-select: none;
        -webkit-user-select: none;
        outline: none;
    }
    
    body {
        margin: 0;
        padding: 0;
        background-color: var(--bg-color);
        font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', 'Hiragino Maru Gothic ProN', sans-serif;
        color: var(--text-color);
        width: 100vw;
        height: 100dvh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        touch-action: none;
    }

    #game-container {
        position: relative;
        width: 100%;
        max-width: 480px;
        height: 100dvh;
        max-height: 850px;
        background: radial-gradient(circle at 50% 30%, #fffcf7 0%, #f3ede2 100%);
        box-shadow: 0 16px 48px rgba(74, 63, 53, 0.15);
        border-radius: 32px;
        border: 10px solid #ffffff;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* ヘッダーUI */
    #header {
        height: 70px;
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 4px dashed var(--border-color);
        z-index: 10;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(5px);
    }
    @media (max-width: 420px) {
        #header {
            padding: 10px 8px;
        }
        #title-text {
            display: none !important;
        }
    }

    .header-btn {
        background: #ffffff;
        border: 3px solid var(--border-color);
        box-shadow: 0 4px 0 var(--border-color);
        border-radius: 50%;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 20px;
        transition: transform 0.1s, box-shadow 0.1s;
    }
    .header-btn:active {
        transform: translateY(3px);
        box-shadow: 0 1px 0 var(--border-color);
    }
    
    .zukan-trigger-btn {
        background: linear-gradient(to bottom, #ffd54f, #ffb300);
        border: 3px solid #ffffff;
        box-shadow: 0 4px 8px rgba(255, 179, 0, 0.3);
        border-radius: 20px;
        height: 48px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        gap: 4px;
        color: #fff;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
        text-shadow: 1px 1px 0px rgba(0,0,0,0.15);
        white-space: nowrap;
    }
    .zukan-trigger-btn:active {
        transform: scale(0.95);
    }

    /* キャンバス領域 */
    #canvas-container {
        flex: 1;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }
    canvas {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* アクションガイド */
    .guide-bubble {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.9);
        border: 3px solid var(--secondary-color);
        border-radius: 20px;
        padding: 8px 18px;
        font-size: 15px;
        font-weight: bold;
        color: var(--secondary-color);
        pointer-events: none;
        box-shadow: 0 6px 16px rgba(0,0,0,0.05);
        animation: bobbing 2s infinite ease-in-out;
        white-space: nowrap;
    }
    @keyframes bobbing {
        0%, 100% { transform: translate(-50%, 0); }
        50% { transform: translate(-50%, -6px); }
    }

    /* コントロールパネル（下部） */
    #control-panel {
        background: #ffffff;
        border-top: 5px solid var(--border-color);
        display: flex;
        flex-direction: column;
        z-index: 10;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* カテゴリタブ */
    #category-tabs {
        display: flex;
        justify-content: space-around;
        background: #fdfaf2;
        border-bottom: 3px solid var(--border-color);
        padding: 8px 4px;
    }
    .tab-btn {
        flex: 1;
        margin: 0 4px;
        padding: 10px 0;
        border-radius: 16px;
        border: 3px solid transparent;
        background: transparent;
        font-size: 16px;
        font-weight: bold;
        color: #8c7e70;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        transition: all 0.15s;
    }
    .tab-btn.active {
        background: #ffffff;
        border-color: var(--border-color);
        box-shadow: 0 4px 0 var(--border-color);
        color: var(--primary-color);
    }
    .tab-icon {
        font-size: 22px;
    }

    /* パーツセレクター */
    #selector-container {
        height: 95px;
        display: flex;
        align-items: center;
        overflow-x: auto;
        padding: 0 16px;
        gap: 12px;
        background: #ffffff;
        -webkit-overflow-scrolling: touch;
    }
    #selector-container::-webkit-scrollbar {
        display: none;
    }
    .item-btn {
        flex: 0 0 70px;
        height: 70px;
        border-radius: 20px;
        border: 3px solid var(--border-color);
        background: #fffdf9;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.1s, border-color 0.1s;
    }
    .item-btn.active {
        border-color: var(--primary-color);
        background: #fff3e0;
        transform: scale(1.05);
        box-shadow: inset 0 0 0 3px rgba(255, 112, 67, 0.15);
    }
    .item-btn-canvas {
        width: 100%;
        height: 100%;
    }

    /* 下部決定アクションバー */
    #action-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        background: #fdfaf2;
        border-top: 3px solid var(--border-color);
    }
    
    .action-btn-sub {
        background: #ffffff;
        border: 3px solid var(--border-color);
        box-shadow: 0 4px 0 var(--border-color);
        border-radius: 20px;
        padding: 10px 18px;
        font-size: 16px;
        font-weight: bold;
        color: #7b6d5e;
        cursor: pointer;
        transition: transform 0.05s;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .action-btn-sub:active {
        transform: translateY(3px);
        box-shadow: 0 1px 0 var(--border-color);
    }
    
    .done-btn {
        background: linear-gradient(to bottom, #ff7043, #f4511e);
        color: white;
        border: 3px solid #ffffff;
        border-radius: 25px;
        padding: 12px 36px;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 6px 0 #bf360c, 0 8px 16px rgba(244, 81, 30, 0.3);
        transition: transform 0.05s, box-shadow 0.05s;
    }
    .done-btn:active {
        transform: translateY(5px);
        box-shadow: 0 1px 0 #bf360c, 0 2px 4px rgba(244, 81, 30, 0.3);
    }

    /* スクリーンオーバーレイ（共通モーダル） */
    .screen-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(74, 63, 53, 0.85);
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px;
        transition: opacity 0.3s;
    }
    .screen-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

    /* タイトル画面 */
    #start-screen {
        background: radial-gradient(circle at 50% 40%, #fffcfa 0%, #ebdcc5 100%);
    }
    .title-factory {
        font-size: 38px;
        font-weight: 900;
        color: #5d4037;
        text-shadow: 3px 3px 0px #ffffff;
        line-height: 1.3;
        margin-bottom: 24px;
        text-align: center;
    }
    
    .start-btn {
        background: linear-gradient(to bottom, #4db6ac, #00897b);
        color: white;
        border: 4px solid #ffffff;
        border-radius: 40px;
        padding: 16px 54px;
        font-size: 26px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 8px 0 #004d40, 0 12px 24px rgba(0, 137, 123, 0.3);
        text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
        transition: transform 0.05s;
    }
    .start-btn:active {
        transform: translateY(6px);
        box-shadow: 0 2px 0 #004d40, 0 4px 8px rgba(0, 137, 123, 0.3);
    }

    /* 図鑑画面 */
    #zukan-screen {
        background: #fdfaf5;
        padding-top: 80px;
        justify-content: flex-start;
    }
    .zukan-header-bar {
        position: absolute;
        top: 0; left: 0; width: 100%;
        height: 70px;
        background: #ffffff;
        border-bottom: 4px dashed var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
    }
    .zukan-title {
        font-size: 24px;
        font-weight: bold;
        color: #5d4037;
    }
    
    .zukan-grid {
        width: 100%;
        flex: 1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 110px;
        gap: 18px;
        overflow-y: auto;
        padding: 10px 0;
        -webkit-overflow-scrolling: touch;
    }
    .zukan-grid::-webkit-scrollbar {
        display: none;
    }
    .zukan-card {
        background: #ffffff;
        border: 3px solid var(--border-color);
        border-radius: 20px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        position: relative;
        box-shadow: 0 4px 8px rgba(0,0,0,0.02);
    }
    .zukan-card-empty {
        border: 3px dashed var(--border-color);
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        color: var(--border-color);
    }
    .zukan-card-canvas {
        width: 100%;
        height: 70%;
    }
    .zukan-card-name {
        font-size: 11px;
        font-weight: bold;
        color: #8c7e70;
        margin-top: 4px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .zukan-delete-btn {
        position: absolute;
        top: -4px; right: -4px;
        width: 26px; height: 26px;
        border-radius: 50%;
        background: #ff5252;
        border: 2px solid #ffffff;
        color: #fff;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        z-index: 5;
    }
    .zukan-delete-btn::after {
        content: "";
        position: absolute;
        top: 50%; left: 50%;
        width: 48px; height: 48px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: transparent;
    }
    .zukan-close-btn {
        margin-top: 15px;
        background: #7b6d5e;
        color: white;
        border: 3px solid #ffffff;
        border-radius: 20px;
        padding: 10px 40px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 4px 0 #50463c;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .zukan-close-btn:active {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #50463c;
    }

    /* できた！ファンファーレモーダル */
    .congrats-modal {
        background: #ffffff;
        border: 6px solid var(--secondary-color);
        border-radius: 32px;
        padding: 24px;
        width: 90%;
        max-width: 380px;
        text-align: center;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        animation: scaleup 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    @keyframes scaleup {
        from { transform: scale(0.7); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    .congrats-title {
        font-size: 28px;
        font-weight: bold;
        color: var(--secondary-color);
        margin-bottom: 8px;
    }
    .congrats-name-input {
        width: 100%;
        border: 3px solid var(--border-color);
        border-radius: 16px;
        padding: 12px;
        font-size: 20px;
        text-align: center;
        font-family: inherit;
        color: var(--text-color);
        margin: 15px 0;
        background: #fffdfa;
    }
    .congrats-save-btn {
        background: linear-gradient(to bottom, #4db6ac, #00897b);
        color: white;
        border: 3px solid #ffffff;
        border-radius: 24px;
        padding: 12px 40px;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 6px 0 #004d40;
    }
    .congrats-save-btn:active {
        transform: translateY(4px);
        box-shadow: 0 2px 0 #004d40;
    }