body,
html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    touch-action: none;
    height: 100%;
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}

#video {
    width: auto;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    filter: brightness(1);
}

#mypict-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

#character {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2);
    width: 200px;
    height: auto;
    touch-action: none;
    z-index: 1;
}

#shutter-button,
#reset-button,
#rotate-left-button,
#rotate-right-button,
#select-button,
#mypict-button,
#setting-button,
#format-button {
    position: fixed;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
}

#shutter-button {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background-color: red;
    border-radius: 50%;
    border: 4px solid white;
    z-index: 11;
}

#reset-button,
#select-button {
    bottom: 20px;
    background-color: gray;
    width: 80px;
    height: 40px;
    border-radius: 10px;
    font-size: 16px;
    z-index: 11;
}

#reset-button {
    right: 20px;
}

#select-button {
    left: 20px;
}

#rotate-left-button,
#rotate-right-button {
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
    background-color: transparent;
    z-index: 11;
}

#rotate-left-button {
    bottom: 100px;
    left: 30%;
    background-image: url('images/Lroll_icon.png');
}

#rotate-right-button {
    bottom: 100px;
    right: 30%;
    background-image: url('images/Rroll_icon.png');
}

#mypict-button {
    top: 20px;
    right: 20px;
    background-color: gray;
    width: 80px;
    height: 40px;
    border-radius: 10px;
    color: white;
    font-size: 12px;
    cursor: pointer;
    z-index: 11;
}

#format-button {
    top: 20px;
    right: 110px;
    background-color: gray;
    width: 80px;
    height: 40px;
    border-radius: 10px;
    color: white;
    font-size: 12px;
    cursor: pointer;
    z-index: 11;
}

#setting-button {
    position: fixed;
    top: 70px;
    right: 110px;
    width: 80px;
    height: 40px;
    z-index: 11;
    border: none;
    cursor: pointer;
    background: none;
}

#setting-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#grid-toggle-button {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 80px;
    height: 40px;
    border-radius: 10px;
    background-color: gray;
    color: white;
    font-size: 12px;
    z-index: 11;
    background: none;
}

#grid-toggle-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#upload-input {
    display: none;
}

#character-selection {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    z-index: 1000;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 縦向き時のスタイル */
@media screen and (orientation: portrait) {
    #character-selection {
        width: 95vw;
        max-width: 600px;
    }
    
    .tab-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
}
}

/* 横向き時のスタイル */
@media screen and (orientation: landscape) {
    #character-selection {
        width: 80vw;
        max-width: 800px;
    }
    
    .tab-content {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
}

.tab-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.tab-button {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: #f0f0f0;
    cursor: pointer;
}

.tab-button.active {
    background: #ff69b4;
    color: white;
}

.tab-content {
    position: relative;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.character-icon {
    width: 100%;
    height: auto;
    object-fit: contain;
    cursor: pointer;
}

#format-selector-container {
    position: fixed;
    top: 70px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    padding: 10px;
    z-index: 12;
}

.format-option {
    color: white;
    padding: 8px 16px;
    margin: 5px 0;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
}

.format-option:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* モバイル対応のタッチ領域拡大 */
@media (max-width: 768px) {
    .format-option {
        padding: 12px 20px;
        margin: 8px 0;
    }
}

#version {
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 10;
    font-size: 1rem;
}

#image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    color: white;
}

#captured-image {
    max-width: 90%;
    max-height: 70%;
}

#save-instructions {
    margin-top: 10px;
    font-size: 18px;
}

#download-link {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: blue;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
}

#back-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: gray;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

#loading-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loading-box {
    position: relative;
    width: 50px;
    height: 50px;
}

.loading-square {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid white;
    animation: spin 2s linear infinite;
}

.loading-square.reverse {
    animation: spin-reverse 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin-reverse {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.photo-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: none;
    z-index: 1000;
}

/* 縦線 */
.photo-grid::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 33.33%;
    width: 1px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 0 1px rgba(0, 0, 0, 0.3),
        /* 線をくっきり見せる */
        33.33vw 0 0 rgba(255, 255, 255, 0.8);
    /* 2本目の縦線 */
}

/* 横線 */
.photo-grid::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 33.33%;
    height: 1px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow:
        0 0 1px rgba(0, 0, 0, 0.3),
        /* 線をくっきり見せる */
        0 33.33vh 0 rgba(255, 255, 255, 0.8);
    /* 2本目の横線 */
}

/* オプション：交点を強調表示 */
.photo-grid .intersection {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.photo-grid .intersection:nth-child(1) {
    left: 33.33%;
    top: 33.33%;
}

.photo-grid .intersection:nth-child(2) {
    left: 66.66%;
    top: 33.33%;
}

.photo-grid .intersection:nth-child(3) {
    left: 33.33%;
    top: 66.66%;
}

.photo-grid .intersection:nth-child(4) {
    left: 66.66%;
    top: 66.66%;
}

/* Firefox用の追加スタイル */
@-moz-document url-prefix() {

    #zoom-slider,
    #brightness-slider {
        width: 100%;
        height: 8px;
        transform: rotate(270deg) translateX(-100%);
        transform-origin: left top;
    }
}

/* コントロールボタンのレイアウト調整 */
.control-buttons {
    position: fixed;
    right: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 11;
}

.control-button {
    position: fixed;
    width: 80px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background-color: gray;
    color: white;
    font-size: 12px;
    cursor: pointer;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
}

#setting-button {
    background: none;
    /* 画像ボタンの背景を透明に */
}

#setting-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#grid-toggle-button {
    top: 70px;
    /* settingボタンの下に配置 */
}

#logo-toggle-button {
    background-color: #4ac1e6;
    margin-top: 60px;
    margin-left: 10px;
    width: 100px;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 12px;
    cursor: pointer;
}

#logo-toggle-button:hover {
    background-color: #3ba5c6;
}

/* デフォルトグリッドのスタイルを修正 */
#default-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* マイピクトと同じく3列 */
    gap: 10px;  /* マイピクトと同じギャップ */
    padding: 10px;
}

.character-icon {
    width: 100%;  /* 親要素に対して100%幅 */
    height: auto;  /* 縦横比を維持 */
    object-fit: contain;
    cursor: pointer;
}