/* 반응형 디자인 */

@media (max-width: 768px) {
    /* 모든 메인 컨테이너를 모바일에서 불투명하게 */
    .game-overlay,
    .excel-container,
    .main-container,
    .game-menu,
    #roomCreated,
    .nickname-form {
        opacity: 1 !important;
        background: rgba(255, 255, 255, 1) !important;
    }

    /* 모바일에서 Excel UI 숨기기 옵션 */
    body.mobile-mode .excel-container {
        display: none;
    }

    body.mobile-mode .game-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        max-width: 100%;
        width: 100%;
        height: 100%;
        opacity: 1 !important;
        border-radius: 0;
        padding: 10px;
        overflow-y: auto;
    }

    .excel-container {
        font-size: 10px;
    }

    .excel-toolbar {
        padding: 4px 8px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .excel-toolbar button {
        font-size: 10px;
        padding: 2px 6px;
    }

    .excel-headers {
        font-size: 9px;
        height: 16px;
    }

    .excel-column-header,
    .excel-row-header {
        min-width: 60px;
        line-height: 16px;
        font-size: 9px;
    }

    .excel-cell {
        min-width: 60px;
        height: 16px;
        font-size: 9px;
        line-height: 12px;
    }

    .game-overlay {
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        transform: none;
        max-width: none;
        width: auto;
        height: auto;
        overflow-y: auto;
        padding: 10px;
        box-sizing: border-box !important;
        opacity: 1 !important;
        background: rgba(255, 255, 255, 1) !important;
    }

    .game-menu {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 15px;
    }

    #gameArea {
        flex-direction: column;
        box-sizing: border-box !important;
    }

    #gameArea > div {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 게임 레이아웃 모바일 최적화 */
    #gameLayout {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 10px !important;
        box-sizing: border-box;
    }

    /* 게임 영역 컬터너 최적화 */
    .board-container {
        width: 100% !important;
        display: flex;
        justify-content: center;
    }

    .info-panels-container {
        width: 100% !important;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: space-between;
        padding: 0;
        box-sizing: border-box;
    }

    .info-panels-container .game-info-panel {
        flex: 1;
        min-width: calc(50% - 4px);
        box-sizing: border-box;
        max-width: calc(50% - 4px);
        margin: 0;
    }

    .chat-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 0 !important;
        box-sizing: border-box;
    }

    .game-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: 15px !important;
        padding: 0;
        box-sizing: border-box;
    }

    .game-buttons button {
        flex: 1;
        min-width: calc(33.333% - 4px);
        max-width: calc(33.333% - 4px);
        margin: 0 !important;
        padding: 10px 6px !important;
        min-height: 40px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        border: 1px solid #d1d5db !important;
        background: white !important;
        color: #374151 !important;
        font-weight: 500 !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .game-buttons button:hover:not(:disabled) {
        background: #f9fafb !important;
        border-color: #9ca3af !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .game-buttons button:active:not(:disabled) {
        transform: translateY(0) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

    .game-buttons button:disabled {
        background: #f3f4f6 !important;
        color: #9ca3af !important;
        border-color: #e5e7eb !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: none !important;
    }

    /* 재시작 버튼 강조 */
    .game-buttons button#restartButton {
        background: #3b82f6 !important;
        color: white !important;
        border-color: #3b82f6 !important;
    }

    .game-buttons button#restartButton:hover:not(:disabled) {
        background: #2563eb !important;
        border-color: #2563eb !important;
    }

    /* 채팅창 모바일 최적화 */
    .chat-panel {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 5px 0;
        padding: 8px;
    }

    .chat-messages {
        height: 80px !important;
        font-size: 11px;
    }

    .chat-input-container {
        display: flex;
        gap: 5px;
        padding: 5px;
    }

    .chat-input-container input {
        flex: 1;
        min-height: 36px;
        font-size: 14px;
        padding: 8px;
    }

    .chat-input-container button {
        min-width: 60px;
        min-height: 36px;
        padding: 8px 12px;
        font-size: 12px;
    }

    /* 채팅 토글 기능 */
    .chat-panel.collapsed {
        max-height: 40px;
        overflow: hidden;
    }

    .chat-panel.collapsed .chat-messages,
    .chat-panel.collapsed .chat-input-container {
        display: none;
    }

    /* 게임 정보 패널 아코디언 (채팅 패널 포함) */
    .game-info-panel {
        position: relative;
    }

    .game-info-panel h4 {
        cursor: pointer;
    }

    .game-info-panel::after {
        content: '▼';
        position: absolute;
        right: 12px;
        top: 12px;
        font-size: 10px;
        transition: transform 0.3s;
    }

    .game-info-panel.collapsed::after {
        transform: rotate(-90deg);
    }

    .game-info-panel.collapsed > *:not(h4) {
        display: none;
    }

    #omokBoard {
        width: 100%;
        max-width: min(90vw, 320px);
        height: auto;
        margin: 0 auto;
        touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
    }

    .game-info-panel {
        margin: 3px 0;
        padding: 8px;
    }

    .game-stats {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 8px;
    }

    .player-item {
        padding: 6px 8px;
        font-size: 12px;
    }

    /* 모바일에서 업무모드 버튼 숨기기 */
    .quick-hide {
        display: none !important;
    }

    /* 모바일에서 투명도 조절바 숨기기 */
    .opacity-control {
        display: none !important;
    }

    /* 토스트 메시지 모바일 최적화 */
    .toast-container {
        top: 10px;
        right: 5px;
        left: 5px;
        max-width: 100%;
    }

    .toast {
        min-width: auto;
        max-width: calc(100vw - 20px);
        padding: 8px 12px;
        font-size: 12px;
        min-height: auto;
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    .toast-title {
        font-size: 13px;
        margin-bottom: 2px;
    }

    .toast-message {
        font-size: 11px;
    }

    .modal {
        width: 95%;
        max-width: none;
    }

    .modal-body {
        font-size: 14px;
    }

    .modal-button {
        padding: 12px 20px;
        min-height: 44px;
        font-size: 14px;
    }

    /* 768px 이하에서 방 생성 UI 개선 - flex 배치 유지 */
    #roomCreated {
        padding: 15px !important;
    }

    #roomCreated input[type="text"] {
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    #roomCreated button {
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: 1px solid #d1d5db !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
        min-width: 120px !important;
        max-width: 140px !important;
    }

    #roomCreated button[onclick="copyToClipboard()"] {
        background: #10b981 !important;
        color: white !important;
        border-color: #10b981 !important;
    }

    #roomCreated button[onclick="joinRoomAsHost()"] {
        background: #3b82f6 !important;
        color: white !important;
        border-color: #3b82f6 !important;
    }
}

@media (max-width: 480px) {
    /* 방 생성 UI 완전 세로 배치 */
    #roomCreated > div,
    #roomCreated div[style*="display: flex"] {
        display: block !important;
        text-align: center !important;
    }

    #roomCreated input[type="text"] {
        display: block !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100vw - 50px) !important;
        margin: 8px auto !important;
        flex: none !important;
        box-sizing: border-box !important;
    }

    #roomCreated button {
        display: block !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100vw - 50px) !important;
        margin: 8px auto !important;
        flex: none !important;
        box-sizing: border-box !important;
        min-height: 48px !important;
        font-size: 16px !important;
    }

    /* 뒤로가기 버튼과 게임 입장 버튼 간격 조정 */
    #roomCreated button[onclick="backToOmokMenu()"],
    #roomCreated .back-button {
        margin-top: 50px !important;
        margin-bottom: 8px !important;
    }

    /* 더 작은 화면에서 게임 정보 패널 세로 배치 */
    .info-panels-container .game-info-panel {
        min-width: 100%;
    }

    /* 버튼들도 세로로 */
    .game-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 0 15px;
    }

    .game-buttons button {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100%;
        padding: 12px 16px !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }

    .game-overlay {
        padding: 8px;
    }

    #omokBoard {
        max-width: 280px;
    }

    .game-info-panel {
        padding: 8px;
    }

    .player-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .game-stats {
        grid-template-columns: 1fr 1fr;
    }

    .nickname-form {
        padding: 12px;
    }

    .nickname-form input {
        width: 100%;
        margin: 8px 0;
        box-sizing: border-box;
    }

    .nickname-form button {
        width: 100%;
        padding: 12px;
    }

    /* 닉네임 입력 컨테이너 모바일 최적화 */
    .nickname-input-container {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        width: 100%;
    }

    .nickname-input-container input {
        width: 100% !important;
        max-width: 280px;
        margin: 0 !important;
        font-size: 16px !important; /* iOS 자동 줌 방지 */
    }

    .nickname-input-container button {
        width: 100% !important;
        max-width: 280px;
        margin: 0 !important;
    }

    /* 메인 페이지 방 생성 UI 컨테이너 모바일 최적화 */
    #roomCreated {
        padding: 15px !important;
    }

    #roomCreated > div[style*="flex"],
    #roomCreated div[style*="flex"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
        margin: 12px 0 !important;
    }

    /* 인라인 flex 스타일 강제 오버라이드 */
    #roomCreated div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    /* 메인 페이지 입력 필드 모바일 최적화 */
    .room-link-input,
    .room-url-input,
    .nickname-input,
    #roomUrl,
    #hostNickname {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        min-height: 48px !important;
        font-size: 16px !important; /* iOS 자동 줌 방지 */
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* 메인 페이지 버튼 모바일 최적화 */
    .back-button,
    .join-room-button,
    .join-game-button,
    .copy-link-button,
    button[onclick="copyToClipboard()"],
    button[onclick="joinRoomAsHost()"] {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        min-height: 48px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: 1px solid #d1d5db !important;
        background: #3b82f6 !important;
        color: white !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }

    /* 링크 복사 버튼 색상 */
    button[onclick="copyToClipboard()"] {
        background: #10b981 !important;
        border-color: #10b981 !important;
    }

    button[onclick="copyToClipboard()"]:hover,
    button[onclick="copyToClipboard()"]:active {
        background: #059669 !important;
        border-color: #059669 !important;
    }

    .join-game-button:hover,
    button[onclick="joinRoomAsHost()"]:hover {
        background: #2563eb !important;
        border-color: #2563eb !important;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-button {
        width: 100%;
        margin: 4px 0;
    }

    /* 모바일 확정 버튼 스타일 */
    .mobile-confirm-buttons {
        position: fixed;
        bottom: 20px;
        left: 0;
        right: 0;
        transform: none;
        display: flex;
        justify-content: center;
        gap: 12px;
        z-index: 1000;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .mobile-confirm-buttons button {
        flex: 1;
        min-width: 80px;
        max-width: 120px;
        padding: 12px 20px !important;
        min-height: 48px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        transition: all 0.2s ease !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .confirm-button {
        background: #22c55e !important;
        color: white !important;
    }

    .confirm-button:hover, .confirm-button:active {
        background: #16a34a !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3) !important;
    }

    .cancel-button {
        background: #ef4444 !important;
        color: white !important;
    }

    .cancel-button:hover, .cancel-button:active {
        background: #dc2626 !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3) !important;
    }
}