/* ============================================
   MODALS
   ============================================ */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.modal.active {
    display: flex;
}

/* Dare/camera flows can be triggered while a mini-game modal (e.g. Battleship)
   is already open. All modals share the same base z-index, so whichever one
   is later in the page's DOM order would otherwise win the stack — these need
   to always render on top regardless of include order. */
#dares-wheel-config-modal.active,
#dares-wheel-spin-modal.active,
#camera-modal.active {
    z-index: 10010;
}

.modal-content {
    background: var(--white);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--danger);
    color: var(--white);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: var(--transition);
}

.modal-close:hover {
    transform: rotate(90deg);
}

.modal-minimize {
    position: absolute;
    top: 16px;
    right: 56px;
    background: var(--gray);
    color: var(--white);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

.modal-minimize:hover {
    transform: scale(1.1);
}

/* ============================================
   CAMERA MODAL
   ============================================ */
.camera-modal-content {
    max-width: 500px;
    width: 90%;
}

.camera-info-display {
    background: rgba(243, 156, 18, 0.15);
    border: 2px solid var(--warning);
    border-radius: var(--radius);
    padding: 12px;
    margin: 12px 0;
    text-align: center;
}

.camera-info-display #camera-info-text {
    color: var(--warning);
    font-weight: bold;
    font-size: 14px;
    display: block;
}

.camera-container {
    width: 100%;
    margin: 16px 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--dark);
    position: relative;
}

#camera-video,
#camera-preview,
#camera-preview-video {
    width: 100%;
    display: block;
}

.camera-countdown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.countdown-number {
    font-size: 120px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    animation: countdown-pulse 1s ease-in-out;
}

@keyframes countdown-pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.camera-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 0;
    padding: 10px;
    background: #f8f9fa;
    border-radius: var(--radius);
}

.camera-settings label {
    font-weight: 600;
    color: var(--text);
}

.camera-settings select {
    padding: 6px 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: white;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}

.camera-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.gif-progress {
    text-align: center;
    margin-top: 16px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--light);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    width: 0;
    transition: width 0.1s linear;
    animation: progress 4.9s linear;
}

@keyframes progress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* ============================================
   GAME MODALS
   ============================================ */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.game-card {
    background: var(--light);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    transition: var(--transition);
}

.game-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.game-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.game-card h3 {
    margin-bottom: 8px;
}

.game-card p {
    font-size: 14px;
    color: var(--gray);
    margin-bottom: 12px;
}

.game-settings {
    margin-top: 24px;
    padding: 16px;
    background: var(--light);
    border-radius: var(--radius);
}

.setting-item {
    margin-bottom: 12px;
}

.setting-item label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dare-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.dare-categories label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.setting-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: center;
}

/* Points-to-win preset button selector */
.ptw-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.ptw-btn {
    padding: 6px 14px;
    font-size: 15px;
    font-weight: 700;
    background: var(--white);
    border: 2px solid var(--gray);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--dark);
    min-width: 38px;
}

.ptw-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(99, 102, 241, 0.06);
}

.ptw-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

.ptw-custom {
    width: 54px;
    padding: 5px 8px;
    font-size: 14px;
    border: 2px solid var(--gray);
    border-radius: var(--radius-sm);
    text-align: center;
    color: var(--dark);
    background: var(--white);
}

.ptw-custom:focus {
    outline: none;
    border-color: var(--primary);
}

/* Dice Game */
.dice-game-container {
    text-align: center;
}

.dice-area {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 24px 0;
}

.player-dice {
    text-align: center;
}

.dice {
    width: 80px;
    height: 80px;
    background: var(--white);
    border: 3px solid var(--primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: bold;
    margin: 16px auto;
    box-shadow: var(--shadow);
    animation: diceRoll 0.5s ease;
}

@keyframes diceRoll {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(15deg);
    }
}

.vs-divider {
    font-size: 24px;
    font-weight: bold;
    color: var(--gray);
}

.dice-result {
    margin-top: 24px;
    font-size: 20px;
    font-weight: bold;
}

.dare-display {
    background: var(--secondary);
    color: var(--white);
    padding: 16px;
    border-radius: var(--radius);
    margin-top: 16px;
    font-size: 16px;
}

/* Tic-Tac-Toe */
.tictactoe-container {
    text-align: center;
    padding: 16px;
}

.turn-indicator {
    margin-bottom: 24px;
    font-size: 20px;
    font-weight: bold;
    color: var(--primary);
}

.tictactoe-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 300px;
    margin: 0 auto 24px;
}

.tictactoe-cell {
    aspect-ratio: 1;
    background: var(--light);
    border: 2px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tictactoe-cell:hover:not(.taken) {
    background: var(--primary);
    color: var(--white);
    transform: scale(1.05);
}

.tictactoe-cell.taken {
    cursor: not-allowed;
}

.game-result {
    font-size: 20px;
    font-weight: bold;
    padding: 16px;
    border-radius: var(--radius);
    margin-top: 16px;
}

.game-result.win {
    background: var(--success);
    color: var(--white);
}

.game-result.lose {
    background: var(--danger);
    color: var(--white);
}

.game-result.tie {
    background: var(--warning);
    color: var(--white);
}

/* ============================================
   EXPOSE MODAL
   ============================================ */
.game-summary {
    padding: 16px;
    background: var(--light);
    border-radius: var(--radius);
    margin-bottom: 24px;
}

.expose-section {
    margin-top: 24px;
}

.media-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.media-item {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 3px solid transparent;
    transition: var(--transition);
}

.media-item.selected {
    border-color: var(--primary);
}

.media-item img,
.media-item video {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}

.expose-duration {
    margin: 16px 0;
}

.expose-duration label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.expose-duration select {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--light);
    border-radius: var(--radius-sm);
    font-size: 16px;
}

.expose-nickname-option {
    margin: 16px 0;
    padding: 12px;
    background: var(--light);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.expose-nickname-option label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.expose-nickname-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.expose-nickname-option span {
    font-weight: 600;
    color: var(--primary);
}


/* ============================================
   IMAGE MODAL
   ============================================ */
.image-modal-content {
    padding: 0;
    background: transparent;
    max-width: 95%;
    max-height: 95%;
}

#modal-image,
#modal-video {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius);
}

/* ============================================
   SESSION GALLERY MODAL
   ============================================ */
.session-gallery-content {
    max-width: 92vw;
    width: 92vw;
    max-height: 92vh;
    background: var(--white);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gallery-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gallery-header h3 {
    margin: 0;
    font-size: 20px;
    color: var(--dark);
}

.gallery-counter {
    font-size: 14px;
    color: var(--gray);
    font-weight: 500;
}

.gallery-media-container {
    flex: 1;
    /* Keep a floor comparable to a loaded image's display area — the image
       itself is display:none while a slide is loading and the spinner is
       absolutely positioned, so neither contributes height on their own.
       Without this the container (and the whole modal) collapses to almost
       nothing until the image finishes loading. */
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--bg);
    overflow: hidden;
}

.gallery-media-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.gallery-slide-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#gallery-image,
#gallery-video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius);
    display: block;
}

.gallery-watermark-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(30deg);
    color: rgba(255, 255, 255, 0.10);
    font-size: 8vh;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
    z-index: 3;
}

.gallery-protection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    display: none;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 10;
}

.gallery-nav:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.gallery-prev {
    left: 20px;
}

.gallery-next {
    right: 20px;
}

/* Report button — bottom-right corner of the image, overlaps the media */
.gallery-report-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 6;
    background: rgba(180, 20, 20, 0.66);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.4px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    transition: background 0.15s, transform 0.15s;
    white-space: nowrap;
}

.gallery-report-btn:hover {
    background: rgba(220, 30, 30, 1);
    transform: scale(1.05);
}

/* Stack subscription bell button */
.gallery-subscribe-btn {
    position: absolute;
    top: 20px;
    right: 110px;
    z-index: 6;
    background: rgba(30, 30, 30, 0.66);
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    transition: background 0.15s, transform 0.15s;
    line-height: 1;
}

.gallery-subscribe-btn:hover {
    background: rgba(99, 102, 241, 0.85);
    transform: scale(1.05);
}

.gallery-subscribe-btn.subscribed {
    background: rgba(99, 102, 241, 0.85);
}

/* Subscribe popover tooltip */
.subscribe-popover {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--dark);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 8px;
    width: 210px;
    text-align: left;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    z-index: 20;
    pointer-events: none;
    white-space: normal;
}

.gallery-subscribe-btn:hover .subscribe-popover {
    display: block;
}

/* In-review state inside the opened gallery modal */
.gallery-media-wrapper.in-review #gallery-image,
.gallery-media-wrapper.in-review #gallery-video {
    filter: blur(20px);
}

.gallery-in-review-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    gap: 8px;
    z-index: 5;
}

.gallery-in-review-overlay .in-review-icon {
    font-size: 48px;
    line-height: 1;
}

.gallery-in-review-overlay .in-review-label {
    font-size: 13px;
    padding: 5px 14px;
}

/* ============================================
   GALLERY COMMENT PANEL
   ============================================ */

/* Drawer handle — sticks to the right edge of the media container */
.gallery-comment-handle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 72px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2);
    transition: background 0.15s, width 0.15s;
}

.gallery-comment-handle:hover {
    background: var(--primary-dark);
    width: 34px;
}

.gallery-comment-handle-icon {
    font-size: 15px;
    line-height: 1;
}

.gallery-comments-count {
    display: inline-block;
    background: var(--white);
    color: var(--primary);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    min-width: 14px;
    text-align: center;
}

/* gallery-body: flex row containing media + comment panel */
.gallery-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.gallery-body .gallery-media-container {
    flex: 1;
    min-width: 0;
    /* preserve existing layout rules */
}

/* Sheet drag-handle strip — hidden on desktop, tap-to-close on mobile */
.gallery-comment-sheet-handle {
    display: none;
}

/* Comment panel — desktop: fixed-width side column, hidden by default */
.gallery-comment-panel {
    width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-left: 1px solid var(--border);
    transition: width 0.3s ease;
    flex-shrink: 0;
}

.gallery-comment-panel.open {
    width: 300px;
}

/* Comments list (scrollable) */
.gallery-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Speech bubbles */
.comment-bubble {
    background: var(--light);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    word-break: break-word;
}

.comment-text {
    display: block;
    font-size: 13px;
    color: var(--dark);
    line-height: 1.4;
}

.comment-meta {
    display: block;
    font-size: 10px;
    color: var(--gray);
    margin-top: 3px;
}

.comments-empty {
    font-size: 13px;
    color: var(--gray);
    text-align: center;
    margin-top: 20px;
}

/* Input row */
.gallery-comment-input-area {
    display: flex;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}

.gallery-comment-input {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--white);
    color: var(--dark);
    outline: none;
    min-width: 0;
}

.gallery-comment-input:focus {
    border-color: var(--primary);
}

.gallery-comment-input.error {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

/* Error popup above the input row */
.gallery-comment-error {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 10px;
    right: 10px;
    background: var(--danger);
    color: var(--white);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 30;
    white-space: nowrap;
}

.gallery-comment-error.visible {
    opacity: 1;
    transform: translateY(0);
}

.gallery-comment-post-btn {
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.gallery-comment-post-btn:hover {
    background: var(--primary-dark);
}

/* Panel like button (heart inside the comment drawer input row) */
.gallery-panel-like-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1;
}

.gallery-panel-like-btn:hover {
    background: rgba(255, 20, 60, 0.08);
    border-color: rgba(255, 20, 60, 0.4);
}

.gallery-panel-like-btn.liked {
    background: rgba(255, 20, 60, 0.12);
    border-color: rgba(255, 20, 60, 0.6);
}

/* Shake animation for filtered/rejected comments */
@keyframes commentShake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

.gallery-comment-input-area.shake {
    animation: commentShake 0.4s ease;
}

/* ============================================
   CONTACT ADMIN MODAL — reply history
   ============================================ */
.contact-admin-history {
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.contact-admin-history-label {
    font-weight: 700;
    font-size: 13px;
    color: var(--dark);
    margin-bottom: 10px;
}

.contact-admin-history-item {
    margin-bottom: 8px;
}

.contact-admin-history-item:last-child {
    margin-bottom: 0;
}

.contact-admin-history-tag {
    font-weight: 600;
    font-size: 12px;
    color: var(--gray);
}

.contact-admin-history-item p {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dark-light);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ============================================
   CONTRIBUTE DARES MODAL
   ============================================ */
.contribute-form {
    padding: 20px 0;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark);
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--light);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    transition: var(--transition);
}

.form-control:focus {
    border-color: var(--primary);
    outline: none;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.char-count {
    display: block;
    text-align: right;
    color: var(--gray);
    font-size: 12px;
    margin-top: 4px;
}

.success-message {
    padding: 20px;
    text-align: center;
    background: var(--success);
    color: var(--white);
    border-radius: var(--radius);
    margin: 20px 0;
}

.success-message p {
    font-size: 16px;
    font-weight: 600;
}

#imprint-link {
    color: lightgrey;
}

#diary-link {
    color: lightgrey;
}

#dares-link {
    color: lightgrey;
}

/* ============================================
   IMPRINT MODAL
   ============================================ */
.imprint-content {
    padding: 20px 0;
    line-height: 1.8;
}

.imprint-content p {
    margin-bottom: 10px;
}

/* ============================================
   CONSENT MODAL
   ============================================ */
.modal-blocking {
    z-index: 10001;
}

.consent-modal-content {
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.consent-text {
    padding: 20px 0;
    line-height: 1.6;
}

.consent-text h3 {
    color: var(--primary);
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 18px;
}

.consent-text p {
    margin-bottom: 15px;
    color: var(--dark-light);
}

.consent-text ul {
    list-style: none;
    padding-left: 0;
    margin: 15px 0;
}

.consent-text ul li {
    padding: 8px 0;
    padding-left: 30px;
    position: relative;
}

.consent-text ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: bold;
}

.consent-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    flex-direction: column;
}

.consent-actions .btn {
    margin: 0;
}

/* ============================================
   TUTORIAL MODAL
   ============================================ */
.tutorial-modal-content {
    max-width: 700px;
    max-height: 85vh;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.tutorial-text {
    padding: 20px 0;
    line-height: 1.6;
    overflow-y: auto;
    flex: 1;
    margin-bottom: 20px;
}

.tutorial-section {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.tutorial-section h3 {
    color: var(--primary);
    margin-bottom: 10px;
    font-size: 18px;
}

.tutorial-section p {
    margin-bottom: 10px;
    color: var(--dark-light);
}

.tutorial-section ul {
    list-style: none;
    padding-left: 0;
    margin: 10px 0;
}

.tutorial-section ul li {
    padding: 5px 0;
    padding-left: 25px;
    position: relative;
    color: var(--dark-light);
}

.tutorial-section ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
    font-size: 20px;
}

.tutorial-section a {
    color: var(--primary);
    text-decoration: underline;
    font-weight: bold;
}

.tutorial-section a:hover {
    color: var(--primary-dark);
}

.tutorial-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.tutorial-actions .btn {
    margin: 0;
    min-width: 180px;
}


.origin-container {
    margin: 20px;
    padding: 16px;
    background: var(--white);
    border-radius: var(--radius);
}

/* ============================================
   TAG PREFERENCES - Input Style
   ============================================ */
.tags-container {
    margin: 20px;
    padding: 16px;
    background: var(--white);
    border-radius: var(--radius);
}

.tags-label {
    display: inline-flex;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 4px;
}

.tags-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    min-height: 42px;
}

.tags-input-wrapper:focus-within {
    border-color: var(--primary);
}

.tags-input-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--primary);
    color: white;
    border-radius: 12px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.tag-chip:hover {
    background: var(--danger);
}

.tag-chip::after {
    content: '×';
    margin-left: 4px;
    font-size: 14px;
    opacity: 0.7;
}

.tag-chip:hover::after {
    opacity: 1;
}

.tag-text-input {
    flex: 1;
    min-width: 120px;
    border: none;
    border-radius: 2px;
    outline: none;
    font-size: 14px;
    background: transparent;
}

.tags-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.presets-label {
    font-size: 12px;
    color: var(--gray);
}

.tag-preset-btn {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--light);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.tag-preset-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--primary);
}

.tags-hint {
    display: block;
    color: var(--gray);
    font-size: 12px;
    margin-top: 8px;
}

.strict-tags-option {
    margin-top: 10px;
}

.strict-tags-option label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--dark);
}

.strict-tags-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ============================================
   BATTLESHIP GAME
   ============================================ */

.battleship-modal-content {
    max-width: 720px;
    width: 95%;
    /* Reserve room so the emoji toggle floating in the bottom-left corner
       never sits on top of the Ready button / result banner beneath it. */
    padding-bottom: 68px;
}

/* Dice Battle's content (icon + title + minimize/close buttons) is too wide
   for the header row at the default shrink-to-fit modal size. */
.dice-game-modal-content {
    max-width: 440px;
    width: 92%;
}

/* N×N grid wrapper (size set via --bs-size custom property): col 0 = row
   labels, row 0 = col labels */
.bs-grid-wrapper {
    display: grid;
    grid-template-columns: 22px repeat(var(--bs-size, 12), minmax(24px, 32px));
    grid-template-rows: 22px repeat(var(--bs-size, 12), minmax(24px, 32px));
    gap: 2px;
    max-width: min(460px, 100%);
    margin: 0 auto;
    /* At sizes below 12x12 the track total is narrower than the box's
       max-width, so without this the tracks sit left-aligned (grid default
       justify-content: start) instead of centered inside the wider box. */
    justify-content: center;
    touch-action: none;
    position: relative;
}

.bs-label {
    font-size: 10px;
    color: var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.bs-cell {
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.12s;
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    user-select: none;
    position: relative;
}

.bs-cell:hover:not(.fired):not(.no-fire) {
    background: var(--light-hover, #e8e8e8);
}

.bs-cell.ship       { background: transparent; }
.bs-cell.hit        { background: #e53935; color: #fff; }
.bs-cell.miss       { background: #90a4ae; }
.bs-cell.miss-marker { background: #90a4ae; opacity: 0.7; }
.bs-cell.sunk       { background: #1a1a2e; color: #fff; }
.bs-cell.preview    { background: rgba(99, 102, 241, 0.35); }
.bs-cell.preview-bad { background: rgba(239, 68, 68, 0.35); }
.bs-cell.fired      { cursor: not-allowed; }
.bs-cell.no-fire    { cursor: not-allowed; }
.bs-cell.firing     { background: rgba(99, 102, 241, 0.5); cursor: not-allowed; }

/* Water-drop splash for a miss: an expanding, fading ripple ring drawn behind
   the droplet icon via ::after, since .bs-cell already has position:relative. */
.bs-cell.miss::after, .bs-cell.miss-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border: 2px solid rgba(79, 172, 219, 0.85);
    border-radius: 50%;
    pointer-events: none;
}

/* Gamified hit/miss/sunk feedback */
@media (prefers-reduced-motion: no-preference) {
    .bs-cell.firing { animation: bs-firing-pulse 0.4s ease-out; }
    .bs-cell.hit    { animation: bs-hit-impact 0.5s ease-out; }
    .bs-cell.sunk   { animation: bs-sunk-collapse 0.7s ease-in; }
    .bs-cell.miss, .bs-cell.miss-marker { animation: bs-miss-drop 0.5s ease-out; }
    .bs-cell.miss::after, .bs-cell.miss-marker::after { animation: bs-water-ripple 0.6s ease-out; }
}

@keyframes bs-firing-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@keyframes bs-hit-impact {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35) rotate(-4deg); }
    55%  { transform: scale(0.95) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes bs-sunk-collapse {
    0%   { transform: scale(1) rotate(0deg); opacity: 1; }
    40%  { transform: scale(1.1) rotate(-3deg); opacity: 1; }
    100% { transform: scale(0.85) rotate(4deg); opacity: 0.9; }
}

@keyframes bs-miss-drop {
    0%   { transform: translateY(-10px) scale(0.6); opacity: 0; }
    60%  { transform: translateY(2px) scale(1.05); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes bs-water-ripple {
    0%   { width: 6px; height: 6px; margin: -3px 0 0 -3px; opacity: 0.9; }
    100% { width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0; }
}

/* Punishment photo/video overlay: fills the space where the game boards
   normally sit (they're hidden for the duration via setPunishmentInProgress)
   instead of appearing as a small banner above/below the field. */
.bs-peek-overlay {
    min-height: 260px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm, 8px);
}

.bs-peek-media {
    display: block;
    max-width: 90%;
    max-height: 260px;
    border-radius: 10px;
}

@media (prefers-reduced-motion: no-preference) {
    .bs-peek-media { animation: bs-peek-fade 4s ease-out forwards; }
}

@keyframes bs-peek-fade {
    0%   { transform: scale(0.4); opacity: 0; }
    10%  { transform: scale(1.05); opacity: 1; }
    18%  { transform: scale(1); opacity: 1; }
    75%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

/* Confetti burst spanning the modal, celebrating the punishment peek */
.bs-confetti-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

.bs-confetti-piece {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 14px;
    opacity: 0;
    border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .bs-confetti-piece {
        animation-name: bs-confetti-fall;
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;
    }
}

@keyframes bs-confetti-fall {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--bs-confetti-drift, 0), 420px) rotate(var(--bs-confetti-rotate, 360deg)); opacity: 0; }
}

/* Celebration Overlay (ship-sunk animation) */
#bs-sp-celebration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10020;
}

@media (prefers-reduced-motion: no-preference) {
    #bs-sp-celebration-overlay { animation: fadeIn 0.25s ease; }
}

.bs-sp-celebration-content {
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bs-sp-celebration-video {
    max-width: 92vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: var(--radius, 12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Mini Celebration popup — small win animation for SP Hangman / Slot Machine.
   Unlike the Battleship overlay, this is a small non-blocking corner card
   (no full-screen backdrop) so it never obscures the win/result screen. */
#mini-celebration-overlay {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10015;
    pointer-events: none;
    display: none;
}

#mini-celebration-overlay.active {
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    #mini-celebration-overlay.active { animation: fadeIn 0.25s ease; }
}

.mini-celebration-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

#mini-celebration-video {
    width: 180px;
    height: auto;
    border-radius: var(--radius, 12px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* Emoji reaction bar — available throughout setup and battle. Anchored to
   the bottom-left of the modal and hidden behind a toggle button; clicking
   it expands a small popover with the emoji picker. */
.bs-emoji-bar {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 15;
}

.bs-emoji-toggle {
    width: 40px;
    height: 40px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 19px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition, transform 0.12s);
}

.bs-emoji-toggle:hover {
    background: var(--light-hover, #e8e8e8);
    transform: scale(1.08);
}

.bs-emoji-bar.open .bs-emoji-toggle {
    background: var(--light-hover, #e8e8e8);
}

.bs-emoji-popover {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    display: flex;
    gap: 6px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    padding: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(6px) scale(0.94);
    transform-origin: bottom left;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.bs-emoji-bar.open .bs-emoji-popover {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.bs-emoji-btn {
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    font-size: 20px;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
    transition: var(--transition, transform 0.12s);
}

.bs-emoji-btn:hover {
    background: var(--light-hover, #e8e8e8);
    transform: scale(1.12);
}

/* Floating emoji reaction: spawned anywhere within the modal, drifts
   upward while fading out. */
.bs-emoji-float {
    position: absolute;
    bottom: 10px;
    font-size: 36px;
    line-height: 1;
    pointer-events: none;
    z-index: 20;
}

@media (prefers-reduced-motion: no-preference) {
    .bs-emoji-float { animation: bs-emoji-float-up 3.5s ease-out forwards; }
}

@keyframes bs-emoji-float-up {
    0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
    10%  { transform: translate(0, -20px) scale(1); opacity: 1; }
    100% { transform: translate(var(--bs-emoji-drift, 0), -320px) scale(1); opacity: 0; }
}

/* Generic version of .bs-emoji-float, usable inside any modal's
   .modal-content (e.g. the "new chat message" notification). Shares the
   same drift animation/keyframe. */
.floating-reaction {
    position: absolute;
    bottom: 10px;
    font-size: 30px;
    line-height: 1;
    pointer-events: none;
    z-index: 20;
}

@media (prefers-reduced-motion: no-preference) {
    .floating-reaction { animation: bs-emoji-float-up 3.5s ease-out forwards; }
}

/* Briefly highlights the cell the CPU (SP bot) just fired at, so it's easy
   to spot on the grid instead of having to scan for what changed. */
.bs-cell.bs-cpu-target {
    box-shadow: 0 0 0 3px #ffd54f, 0 0 10px 3px rgba(255, 213, 79, 0.7);
    z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .bs-cell.bs-cpu-target { animation: bs-cpu-target-pulse 1.6s ease-out; }
}

@keyframes bs-cpu-target-pulse {
    0%   { box-shadow: 0 0 0 6px rgba(255, 213, 79, 0.9), 0 0 14px 6px rgba(255, 213, 79, 0.6); }
    100% { box-shadow: 0 0 0 3px rgba(255, 213, 79, 0), 0 0 10px 3px rgba(255, 213, 79, 0); }
}

/* Ship selection list */
.bs-ship-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 10px 0;
}

.bs-ship-item {
    padding: 5px 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    background: var(--light);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 5px;
}

.bs-ship-item.selected {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.bs-ship-item.placed {
    opacity: 0.45;
    cursor: not-allowed;
    border-style: dashed;
}

.bs-ship-item.selected .bs-ship-block { background: #fff; }
.bs-ship-item.placed .bs-ship-block   { background: var(--gray); }

.bs-ship-blocks {
    display: flex;
    gap: 2px;
}

.bs-ship-block {
    width: 10px;
    height: 10px;
    background: var(--bs-ship-color, var(--primary));
    border-radius: 1px;
}

.bs-ship-hull {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    color: var(--primary);
}

.bs-ship-hull svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Battle layout: two boards side by side */
.bs-battle-layout {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 8px 0;
}

.bs-board-section {
    text-align: center;
}

.bs-board-hidden {
    display: none;
}

.bs-board-label {
    font-size: 12px;
    color: var(--gray);
    margin-bottom: 6px;
    font-weight: 600;
}

/* Anchor for the floating CPU emoji reactions */
#bs-sp-battle {
    position: relative;
}

/* SP stats bar */
.bs-sp-stats {
    display: flex;
    justify-content: space-around;
    padding: 8px 12px;
    background: var(--light);
    border-radius: var(--radius-sm);
    margin: 8px 0;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 6px;
}

/* Setup status text */
#bs-setup-status,
#bs-sp-setup-status {
    font-size: 13px;
    color: var(--gray);
    text-align: center;
    margin: 4px 0 8px;
}

/* Turn indicator reuse */
#bs-turn-indicator,
#bs-sp-turn-indicator {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: var(--light);
}

/* Mobile */
@media (max-width: 600px) {
    .bs-grid-wrapper {
        --bs-cell-size: clamp(20px, calc((100vw - 96px) / var(--bs-size, 12)), 32px);
        grid-template-columns: 16px repeat(var(--bs-size, 12), var(--bs-cell-size));
        grid-template-rows: 16px repeat(var(--bs-size, 12), var(--bs-cell-size));
        gap: 1px;
    }

    /* Must stretch, not center: a centered (shrink-to-fit) board-section collapses
       its grid's 1fr columns to intrinsic content width, making the mostly-empty
       Enemy Waters grid render smaller than the ship-filled Your Fleet grid. */
    .bs-battle-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .battleship-modal-content {
        padding: 10px;
    }

    /* Compound selector beats the generic ".modal-content { padding: 16px }"
       mobile rule in style.mobile.part1.css, which is @import-ed after this
       file and would otherwise clobber padding-bottom back down at this
       breakpoint (equal specificity, later source wins). */
    .modal-content.battleship-modal-content {
        padding-bottom: 56px;
    }

    .bs-ship-item {
        font-size: 11px;
        padding: 4px 8px;
    }

    .bs-cell {
        min-width: 20px;
        min-height: 20px;
        font-size: 11px;
    }

    .bs-emoji-bar {
        left: 8px;
        bottom: 8px;
    }

    .bs-emoji-toggle {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
}