:root {
    --primary-color: #8a5a2b;
    --primary-dark: #3b2110;
    --accent-color: #e6b84f;
    --accent-gold: #f4c86a;
    --bg-light: #f5ead7;
    --text-color: #372116;
    --modal-bg: #f8eedc;
    --wood-dark: #211108;
    --wood-mid: #6d3f1f;
    --gold-shadow: #8b5e1e;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: #21150d;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'YakuHanJP', 'Hiragino Sans', 'ヒラギノ角ゴ ProN', 'Mplus 1p', sans-serif;
    font-weight: 600;
}

#game-stage {
    width: 1000px;
    height: 720px;
    position: relative;
    background-color: var(--bg-light);
    background-image: url('image/BG1.jpg');
    background-size: cover;
    background-position: center;
    border: 2px solid #5b351b;
    box-shadow: 0 0 0 1px rgba(250, 215, 143, 0.3), 0 0 48px rgba(0, 0, 0, 0.88), inset 0 0 36px rgba(38, 19, 8, 0.32);
    transform-origin: center center;
    overflow: hidden;
}

header {
    height: 64px;
    background: linear-gradient(180deg, rgba(102, 65, 34, 0.97), rgba(49, 27, 13, 0.97));
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    border-bottom: 3px solid var(--accent-gold);
    box-shadow: inset 0 1px rgba(255, 231, 168, 0.35), 0 5px 12px rgba(0, 0, 0, 0.32);
    z-index: 10;
    position: relative;
}

header h1 {
    font-size: 1.6rem;
    letter-spacing: 2px;
    font-weight: bold;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
    text-shadow: 0 1px 0 #2d180c, 1px 3px 6px rgba(0, 0, 0, 0.65);
}

.header-stats {
    display: flex;
    gap: 15px;
}

.stat-badge {
    background: linear-gradient(180deg, rgba(255, 242, 203, 0.2), rgba(25, 12, 5, 0.28));
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid rgba(246, 204, 112, 0.82);
    box-shadow: inset 0 1px rgba(255, 250, 225, 0.25), 0 2px 5px rgba(0, 0, 0, 0.28);
    font-size: 1rem;
    font-weight: bold;
}

.screen {
    position: absolute;
    top: 64px;
    left: 0;
    width: 1000px;
    height: 656px;
    display: none;
}

.screen.active {
    display: flex;
}

.btn {
    background: linear-gradient(180deg, #a96f35 0%, #7b451f 52%, #542b12 100%);
    color: #fff;
    border: 1px solid rgba(255, 225, 160, 0.45);
    padding: 10px 18px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 25px;
    box-shadow: inset 0 1px rgba(255, 239, 193, 0.3), 0 4px 0 #351908, 0 8px 12px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

.btn:hover:not(:disabled) {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(3px);
    box-shadow: inset 0 1px rgba(255, 239, 193, 0.2), 0 1px 0 #351908;
}

.btn:disabled {
    background: #9e9e9e;
    box-shadow: 0 4px 0 #616161;
    cursor: not-allowed;
}

.btn-accent {
    background: linear-gradient(180deg, #ffe3a1 0%, #e8b94e 48%, #b8781f 100%);
    color: #3b2110;
    box-shadow: inset 0 1px rgba(255, 255, 238, 0.72), 0 4px 0 #8b5e1e, 0 8px 12px rgba(0, 0, 0, 0.22);
}

.btn-accent:active:not(:disabled) {
    box-shadow: inset 0 1px rgba(255, 255, 238, 0.5), 0 1px 0 #8b5e1e;
}

.btn-large {
    padding: 14px 28px;
    font-size: 1.3rem;
    border-radius: 30px;
}

.btn-shop {
    background: linear-gradient(180deg, #b4783c 0%, #7b431d 55%, #4e260e 100%);
    box-shadow: inset 0 1px rgba(255, 230, 174, 0.35), 0 4px 0 #321806, 0 8px 12px rgba(0, 0, 0, 0.28);
    padding: 14px 24px;
    font-size: 1.2rem;
}
.btn-shop:active:not(:disabled) {
    box-shadow: inset 0 1px rgba(255, 230, 174, 0.22), 0 1px 0 #321806;
}

.action-buttons {
    position: absolute;
    left: 30px;
    top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    z-index: 5;
    padding: 10px;
    border-left: 2px solid rgba(239, 195, 102, 0.68);
    background: linear-gradient(90deg, rgba(45, 23, 10, 0.48), transparent);
}

#museum-screen {
    position: relative;
    width: 100%;
    height: 100%;
}

.exhibition-area {
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    width: 900px;
    height: 580px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.pedestal {
    position: absolute;
    bottom: 90px;
    width: 560px;
    height: 58px;
    background: linear-gradient(180deg, #704323 0%, #2d180c 14%, #4a2714 52%, #1a0d07 100%);
    border: 2px solid #1b0e07;
    border-radius: 3px 3px 8px 8px;
    box-shadow: 0 13px 18px rgba(0, 0, 0, 0.55), inset 0 2px 1px rgba(255, 224, 162, 0.2), inset 0 -8px 12px rgba(0, 0, 0, 0.35);
    transform-style: preserve-3d;
    z-index: 1;
}

.pedestal::before {
    content: "";
    position: absolute;
    top: -69px;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(90deg, #2c160b 0%, #82502a 13%, #c68b51 50%, #78401e 87%, #291407 100%);
    border: 2px solid #1b0e07;
    border-bottom: 0;
    box-shadow: inset 0 12px 18px rgba(255, 230, 174, 0.23), 0 3px 4px rgba(0, 0, 0, 0.42);
    transform: perspective(620px) rotateX(57deg);
    transform-origin: bottom center;
}

.pedestal::after {
    content: "日本列島 発掘化石";
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%) translateZ(2px);
    padding: 5px 22px;
    z-index: 5;
    color: #4b2a0f;
    background: linear-gradient(180deg, #f5dda0 0%, #b98532 100%);
    border: 1px solid #f9e8be;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.48), inset 0 1px 1px rgba(255, 255, 255, 0.75);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

.map-wrapper {
    position: absolute;
    bottom: 148px !important;
    width: 860px;
    height: 500px;
    z-index: 2;
}

#japan-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0px 8px 10px rgba(0,0,0,0.5));
}

.base-map {
    fill: rgba(141, 91, 40, 0.08);
    stroke: rgba(141, 91, 40, 0.25);
    stroke-width: 1;
}

.pref-path {
    stroke: #3e2723;
    stroke-width: 1.2;
    cursor: pointer;
    transition: all 0.3s;
}

.pref-path.unexcavated {
    fill: rgba(255, 255, 255, 0.4);
    stroke: rgba(100, 80, 70, 0.6);
    stroke-dasharray: 4, 3;
}

.pref-path.excavated {
    fill: #d7ccc8;
}

.pref-path.completed {
    fill: var(--accent-gold);
}

.pref-path:hover {
    filter: brightness(1.2);
}

.modal-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 720px;
    background: rgba(20, 10, 4, 0.72);
    backdrop-filter: blur(4px);
    z-index: 50;
    justify-content: center;
    align-items: center;
}

#result-modal {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: none;
}

.modal-window {
    background: linear-gradient(135deg, #fff9ea 0%, var(--modal-bg) 46%, #e8d2aa 100%);
    border: 2px solid #8c5b27;
    width: 700px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 0 4px #3b2110, 0 0 0 6px rgba(241, 197, 100, 0.75), 0 18px 38px rgba(0, 0, 0, 0.66), inset 0 1px rgba(255, 255, 255, 0.9);
}

.shop-window {
    width: 500px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #bd8a43;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.modal-header h2, .result-window h2 {
    color: var(--primary-dark);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
    letter-spacing: 0.08em;
}

.pref-title-ruby {
    font-size: 0.9rem;
    font-family: 'Hiragino Sans', sans-serif;
    color: #6d3f1f;
    margin-left: 8px;
    font-weight: normal;
}

.btn-close {
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    color: #69401e;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.shop-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #fffdf7, #ecddc5);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #c59b60;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.88), 0 3px 7px rgba(62, 34, 15, 0.12);
}
.shop-item-info {
    font-size: 1.1rem;
}
.sub-text {
    font-size: 0.85rem;
    color: #795548;
}

.area-select-window {
    width: 900px !important;
    background: linear-gradient(135deg, #2b170c 0%, #4a2712 50%, #1f0f07 100%) !important;
    border: 2px solid #e0b06b !important;
    color: #fff;
    padding: 20px 30px !important;
    overflow: hidden;
}

.area-select-window .modal-header {
    border-bottom: 1px solid rgba(224, 176, 107, 0.4);
}

.area-select-window .modal-header h2 {
    color: #fce8c3;
}

.area-select-window .btn-close {
    color: #e0b06b;
}

/* 3D カルーセルコンテナ */
.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 380px;
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    user-select: none;
}

.carousel-wrapper:active {
    cursor: grabbing;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* 浮遊する3Dカード */
.area-card {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 320px;
    height: 330px;
    margin-left: -160px;
    background: linear-gradient(145deg, #fffcf5 0%, #f4e3c9 100%);
    border: 2px solid #b98a4b;
    border-radius: 16px;
    padding: 20px;
    text-align: left;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.9);
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s ease, filter 0.45s ease;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* カード背景画像の半透明配置（画像指定はJSで個別切替） */
.area-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-chiso-img, url('image/chiso.png'));
    background-size: 60% auto;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

/* カード内のコンテンツを背景画像より前面に表示 */
.area-card > * {
    position: relative;
    z-index: 1;
}

.area-card.active-card {
    border-color: #f39c12;
    box-shadow: 0 0 25px rgba(243, 156, 18, 0.6), 0 18px 40px rgba(0, 0, 0, 0.6);
    animation: floatCard 3.5s ease-in-out infinite alternate;
}

@keyframes floatCard {
    0% { transform: translate3d(var(--tx), -5px, var(--tz)) rotateY(var(--ry)) scale(var(--sc)); }
    100% { transform: translate3d(var(--tx), 5px, var(--tz)) rotateY(var(--ry)) scale(var(--sc)); }
}

.area-card h4 {
    color: var(--primary-dark);
    font-size: 1.3rem;
    margin-bottom: 8px;
    text-align: center;
    border-bottom: 2px dashed #c59b60;
    padding-bottom: 6px;
}

.btn-start-excavate {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 20px;
    text-align: center;
}

/* ナビゲーションコントロール */
.carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 5px;
}

.carousel-arrow {
    background: linear-gradient(180deg, #d8a546, #8a5a2b);
    color: #fff;
    border: 1px solid #fce8c3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    transition: transform 0.15s, filter 0.15s;
}

.carousel-arrow:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
}

.carousel-dots {
    display: flex;
    gap: 8px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
}

.carousel-dot.active {
    background: #f39c12;
    transform: scale(1.3);
}

.area-info-item {
    font-size: 0.85rem;
    color: #4a2d18;
    line-height: 1.4;
    margin-bottom: 8px;
}

.area-info-item:last-child {
    margin-bottom: 0;
}

.area-label-badge {
    display: inline-block;
    background-color: #8a5a2b;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.btn-area-hint {
    background: linear-gradient(180deg, #e67e22, #d35400);
    color: #ffffff;
    border: 1px solid #f39c12;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.15s, background-color 0.15s;
}

.btn-area-hint:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.area-card-footer {
    margin-top: 10px;
    position: relative;
}

.area-hint-popout {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    margin-bottom: 8px;
    padding: 10px 12px;
    background: #fffef2;
    border: 2px solid #d35400;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    z-index: 20;
    font-size: 0.85rem;
    color: #372116;
    line-height: 1.4;
    animation: popUpAnim 0.2s ease-out forwards;
}

.area-hint-popout::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    border-width: 6px;
    border-style: solid;
    border-color: #d35400 transparent transparent transparent;
}

@keyframes popUpAnim {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

.area-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-color);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.92), 0 8px 14px rgba(62, 34, 15, 0.24);
}

.area-card h4 {
    color: var(--primary-dark);
    font-size: 1.1rem;
    margin-bottom: 8px;
}

#excavation-screen {
    background-image: url('image/BG2.jpg');
    background-size: cover;
    background-position: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.game-header {
    width: 800px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    margin-bottom: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(238, 192, 98, 0.42);
    background: linear-gradient(180deg, rgba(92, 53, 25, 0.82), rgba(35, 17, 7, 0.82));
    box-shadow: inset 0 1px rgba(255, 228, 163, 0.18), 0 5px 12px rgba(0, 0, 0, 0.3);
}

.target-name {
    font-size: 1.2rem;
    font-weight: bold;
}

.game-timer {
    font-size: 1.2rem;
    color: #fff;
    font-weight: bold;
}

.game-status {
    font-size: 1.4rem;
    color: var(--accent-gold);
    font-weight: bold;
    background: linear-gradient(180deg, #654019, #2e1809);
    padding: 5px 15px;
    border: 1px solid #d8a546;
    border-radius: 4px;
}

.canvas-container {
    position: relative;
    width: 800px;
    height: 480px;
    border: 4px solid #40210d;
    border-radius: 8px;
    box-shadow: 0 0 0 2px #c4944d, 0 14px 28px rgba(0, 0, 0, 0.72);
    overflow: hidden;
}

.canvas-container.rock-released {
    animation: rockRelease 0.42s ease-out;
}

#under-canvas, #top-canvas, #fragment-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 480px;
}

#top-canvas {
    cursor: crosshair;
    z-index: 2;
}

#fragment-canvas {
    z-index: 3;
    pointer-events: none;
}

.damage-pop {
    position: absolute;
    color: #ff3d00;
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
    pointer-events: none;
    z-index: 10;
    animation: floatUp 0.8s forwards;
    transform: translate(-50%, -50%);
}

.dust-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #d3d0c6 0%, #706c63 72%);
    box-shadow: 0 0 5px rgba(217, 213, 200, 0.42);
    pointer-events: none;
    z-index: 9;
    animation: dustRise 0.62s ease-out forwards;
}

@keyframes floatUp {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    30% { transform: translate(-50%, -70%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -100%) scale(1); opacity: 0; }
}

@keyframes dustRise {
    0% { transform: translate(-50%, -50%) scale(0.45); opacity: 0; }
    20% { opacity: 0.95; }
    100% { transform: translate(calc(-50% + var(--dust-x)), calc(-50% + var(--dust-y))) scale(1.35); opacity: 0; }
}

@keyframes rockRelease {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

.game-controls {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.tool-btn {
    background: linear-gradient(180deg, rgba(139, 88, 42, 0.9), rgba(56, 27, 10, 0.92));
    color: #fff;
    border: 1px solid rgba(249, 219, 151, 0.7);
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: inset 0 1px rgba(255, 235, 183, 0.22), 0 3px 7px rgba(0, 0, 0, 0.3);
}

.tool-btn.active {
    background: linear-gradient(180deg, #ffe6a8, #c88c2b);
    color: var(--primary-dark);
    border-color: var(--accent-gold);
}

.game-warning {
    color: #ffb74d;
    font-size: 0.9rem;
    margin-top: 10px;
}

.card-window {
    width: 880px;
    padding: 25px 35px;
}

.result-window {
    width: 620px;
    text-align: center;
    padding: 20px 30px;
}

.result-visual {
    background: #e1cbb3;
    border: 2px solid #8c5b27;
    border-radius: 8px;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    height: 220px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

#result-fossil-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.3));
}

.encyclopedia-visual {
    background: radial-gradient(circle, #f7eddb, #d8bd8f);
    border: 2px solid #8c5b27;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

#modal-canvas {
    width: 800px;
    height: 320px;
}

.info-grid {
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    font-size: 1rem;
}

.card-section-title {
    font-weight: bold;
    color: var(--primary-dark);
    border-bottom: 1px solid #b88646;
    margin-bottom: 8px;
    padding-bottom: 2px;
}

.score-display {
    font-size: 2.5rem;
    font-weight: bold;
    color: #8a531c;
    text-shadow: 0 1px #fff5df;
    margin: 15px 0;
}

.reward-info {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.placement-overlay-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 720px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: none;
    z-index: 100;
}


.puzzle-flash {
    animation: puzzleFlashAnim 0.75s ease-out forwards;
}

@keyframes puzzleFlashAnim {
    0% {
        filter: brightness(1) drop-shadow(0 0 0px #ffffff);
        transform: scale(1);
    }
    50% {
        filter: brightness(2.2) drop-shadow(0 0 25px #fff59d);
        transform: scale(1.15);
    }
    100% {
        filter: brightness(1) drop-shadow(0 0 5px #ffd54f);
        transform: scale(1);
    }
}

/* 展示室のお客さんレイヤー */
#museum-visitors {
    position: absolute !important;
    top: auto !important;     /* 上からの固定を解除 */
    bottom: 00px !important;  /* ★ここでY軸を調整（数値を大きくすると上がります） */
    left: 0 !important;
    width: 1000px !important;
    height: 200px !important;
    z-index: 00 !important;
    pointer-events: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 15px !important;
}

.museum-visitor-img {
    position: absolute !important; /* 画像同士を全く同じ位置に重ねる */
    bottom: 0 !important;
    height: 700px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.0)) !important;
}

#modal-hammer-select-area {
    position: absolute;
    left: 30px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

#modal-hammer-select-area .hammer-label {
    font-size: 0.85rem;
    color: #e0b06b;
    font-weight: bold;
}

#modal-brush-select-area {
    position: absolute;
    right: 30px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

#modal-brush-select-area .brush-label {
    font-size: 0.85rem;
    color: #e0b06b;
    font-weight: bold;
}

.area-card.locked-card {
    filter: grayscale(0.6) brightness(0.8);
}

.locked-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    object-fit: contain;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.area-trophy-icon {
    position: absolute;
    bottom: 77px;
    right: 20px;
    width: 85px;
    height: 85px;
    object-fit: contain;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}

/* タイトル画面 */
#title-screen {
    top: 0;
    height: 720px;
    background-image: url('image/BG0.jpg');
    background-size: cover;
    background-position: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.title-logo {
    max-width: 820px;
    max-height: 420px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
}

.btn-title-start {
    padding: 16px 48px;
    font-size: 1.6rem;
    box-shadow: inset 0 1px rgba(255, 255, 238, 0.72), 0 6px 0 #8b5e1e, 0 12px 18px rgba(0, 0, 0, 0.4);
}

/* チュートリアルフレーム */
#tutorial-overlay {
    background: transparent;
    backdrop-filter: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#tutorial-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.tutorial-window {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 860px;
    min-height: 160px;
    background: linear-gradient(135deg, #4a2d18 0%, #2b170c 100%);
    border: 3px solid #e0b06b;
    border-radius: 12px;
    padding: 25px 35px 35px 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(255, 235, 185, 0.4);
    cursor: pointer;
    user-select: none;
}

.tutorial-speaker {
    position: absolute;
    top: -18px;
    left: 25px;
    background: linear-gradient(180deg, #ffe3a1 0%, #e8b94e 100%);
    color: #3b2110;
    font-size: 1rem;
    font-weight: bold;
    padding: 4px 20px;
    border-radius: 15px;
    border: 2px solid #3b2110;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.tutorial-text {
    color: #fdf5e6;
    font-size: 1.25rem;
    line-height: 1.7;
    white-space: pre-wrap;
    font-weight: 500;
}

.tutorial-next-indicator {
    position: absolute;
    bottom: 10px;
    right: 25px;
    color: #ffe3a1;
    font-size: 0.85rem;
    font-weight: bold;
    animation: blinkIndicator 1s infinite alternate;
}

@keyframes blinkIndicator {
    0% { opacity: 0.4; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(-3px); }
}

/* 祝賀達成演出用オーバーレイ */
.grand-achievement-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 720px;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.grand-achievement-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.grand-achievement-title {
    font-size: 3.8rem;
    font-weight: bold;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    color: #fff3d1;
    background: linear-gradient(180deg, #3b2110 0%, #1a0d06 100%);
    border: 3px solid #e6b84f;
    outline: 2px solid #3b2110;
    padding: 24px 60px;
    border-radius: 12px;
    box-shadow: 0 0 0 6px rgba(230, 184, 79, 0.4), 0 20px 50px rgba(0, 0, 0, 0.9), inset 0 1px 3px rgba(255, 243, 209, 0.6);
    text-shadow: 0 2px 4px #000, 0 0 20px rgba(255, 215, 0, 0.6);
    transform: scale(0.3);
    animation: grandTitlePop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    letter-spacing: 4px;
    text-align: center;
    z-index: 2;
    white-space: nowrap;
}

@keyframes grandTitlePop {
    0% { transform: scale(0.3); opacity: 0; }
    70% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* 紙吹雪・輝く粒パーツ */
.achievement-particle {
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
    z-index: 1;
    animation: particleFall 2.5s ease-out forwards;
}

@keyframes particleFall {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--p-tx), var(--p-ty)) rotate(720deg) scale(0.2);
        opacity: 0;
    }
}

#placement-title-text {
    left: 35% !important;
    transform: translateX(-50%) !important;
}

.btn-external-link {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(180deg, #a96f35 0%, #7b451f 52%, #542b12 100%);
    color: #fff;
    border: 1px solid rgba(255, 225, 160, 0.45);
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 20px;
    box-shadow: inset 0 1px rgba(255, 239, 193, 0.3), 0 3px 0 #351908, 0 6px 10px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
    font-family: inherit;
    z-index: 10;
}

.btn-external-link:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.btn-external-link:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px rgba(255, 239, 193, 0.2), 0 1px 0 #351908;
}