/* ═══ Kahvipeli — Game Page Styles (Material Design) ═══ */

/* ── Game-specific layout ── */
body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.screen {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 20px;
}

/* ── Button variants (Material Filled, Tonal, Outlined) ── */
.btn-primary { 
    background: var(--color-primary); 
    color: white; 
    box-shadow: var(--md-elevation-1);
}
.btn-primary:hover:not(:disabled) { 
    background: var(--color-primary-hover); 
    box-shadow: var(--md-elevation-2);
}

.btn-secondary { 
    background: var(--color-secondary); 
    color: white; 
    box-shadow: var(--md-elevation-1);
}
.btn-secondary:hover:not(:disabled) { 
    background: var(--color-secondary-hover); 
    box-shadow: var(--md-elevation-2);
}

.btn-outline {
    background: transparent;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    box-shadow: none;
}
.btn-outline:hover {
    background: rgba(11, 87, 208, 0.08); /* Secondary color with 8% opacity */
    border-color: var(--color-secondary);
}

.btn-large {
    width: 100%;
    padding: 16px;
    font-size: 1.15em;
    border-radius: var(--radius-pill);
}

.btn-done {
    background: var(--color-primary);
    color: white;
    width: 100%;
    padding: 18px;
    font-size: 1.15em;
    border-radius: var(--radius-pill);
    margin-top: auto;
    box-shadow: var(--md-elevation-2);
}
.btn-done:hover { 
    background: var(--color-primary-hover); 
    box-shadow: var(--md-elevation-3);
}

/* ── Code input ── */
.code-input {
    text-align: center;
    font-size: 2em !important;
    letter-spacing: 0.3em;
    font-weight: 700;
}

/* ── Home Screen ── */
#home-screen .home-buttons {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
}
.home-subtitle {
    text-align: center;
    color: var(--color-muted);
    font-size: 0.9em;
    margin-top: 32px;
}
.home-subtitle a {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 600;
}
.home-subtitle a:hover { text-decoration: underline; }

/* ── Home Animation ── */
.home-animation {
    display: flex;
    justify-content: center;
    user-select: none;
    margin-bottom: 12px;
}

/* When animation is present, don't let buttons fill remaining space */
.home-animation + .home-buttons {
    flex: 0 !important;
    justify-content: flex-start !important;
    padding-top: 10px;
}

/* ── Speaker & Bubble (Material Tooltip Style) ── */
.ha-speaker {
    position: relative;
    display: inline-block;
}

.ha-speaker .ha-bubble {
    position: absolute;
    bottom: calc(100% + 12px); 
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
    background: var(--color-surface);
    color: var(--color-dark);
    box-shadow: var(--md-elevation-2); /* Soft shadow instead of hard border */
    border: none;
    pointer-events: none;
}

/* Remove chunky triangle hacks and use subtle soft tails */
.ha-speech::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-surface);
}

.ha-thought::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.ha-thought::before {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-2px);
    width: 4px;
    height: 4px;
    background: var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* ── Scene layout & Arrows ── */
.ha-scene { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1 / 1; }

.ha-pos-0 { position: absolute; left: 50.00%; top: 18.42%; transform: translate(-50%, -50%); z-index: 2; }
.ha-pos-1 { position: absolute; left: 80.03%; top: 40.24%; transform: translate(-50%, -50%); z-index: 2; }
.ha-pos-2 { position: absolute; left: 68.56%; top: 75.55%; transform: translate(-50%, -50%); z-index: 2; }
.ha-pos-3 { position: absolute; left: 31.44%; top: 75.55%; transform: translate(-50%, -50%); z-index: 2; }
.ha-pos-4 { position: absolute; left: 19.97%; top: 40.24%; transform: translate(-50%, -50%); z-index: 2; }

.ha-center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    opacity: 0;
    z-index: 3;
    animation: ha-center-reveal 22s ease infinite;
}

.ha-arrows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    color: var(--color-light-gray); /* Lighter, less obtrusive arrows */
}

/* Animations — 22s cycle: 20s action + 2s pause before loop restart */
[data-role="explainer"] .ha-text::after { content: ''; animation: ha-explainer 22s steps(1) infinite; }
@keyframes ha-explainer {
    0%    { content: 'kaikki menee alas...'; }
    9%    { content: ''; }
    18%   { content: 'mutta...'; }
    27%   { content: ''; }
    36%   { content: 'että...'; }
    45%   { content: ''; }
    55%   { content: 'se on niinkuin...'; }
    64%   { content: ''; }
    82%   { content: 'JOOO!'; color: var(--color-primary); }
    91%   { content: ''; }
}
[data-role="explainer"] .ha-bubble { animation: ha-vis-explainer 22s steps(1) infinite; }
@keyframes ha-vis-explainer {
    0% { opacity: 1; } 9% { opacity: 0; } 18% { opacity: 1; } 27% { opacity: 0; }
    36% { opacity: 1; } 45% { opacity: 0; } 55% { opacity: 1; } 64% { opacity: 0; }
    82% { opacity: 1; } 91% { opacity: 0; }
}

[data-role="guesser1"] .ha-text::after { content: ''; animation: ha-g1 22s steps(1) infinite; }
@keyframes ha-g1 {
    0%  { content: ''; } 27% { content: 'Elevator?'; } 36% { content: ''; }
    73% { content: 'Gravity!'; color: var(--color-primary); font-weight: 800; } 82% { content: ''; }
}
[data-role="guesser1"] .ha-bubble { opacity: 0; animation: ha-vis-g1 22s steps(1) infinite; }
@keyframes ha-vis-g1 { 0% { opacity: 0; } 27% { opacity: 1; } 36% { opacity: 0; } 73% { opacity: 1; } 82% { opacity: 0; } }

[data-role="guesser2"] .ha-text::after { content: ''; animation: ha-g2 22s steps(1) infinite; }
@keyframes ha-g2 { 0% { content: ''; } 45% { content: 'Escalator?'; } 55% { content: ''; } }
[data-role="guesser2"] .ha-bubble { opacity: 0; animation: ha-vis-g2 22s steps(1) infinite; }
@keyframes ha-vis-g2 { 0% { opacity: 0; } 45% { opacity: 1; } 55% { opacity: 0; } }

[data-role="guesser3"] .ha-text::after { content: ''; animation: ha-g3 22s steps(1) infinite; }
@keyframes ha-g3 { 0% { content: ''; } 64% { content: 'Rain?'; } 73% { content: ''; } }
[data-role="guesser3"] .ha-bubble { opacity: 0; animation: ha-vis-g3 22s steps(1) infinite; }
@keyframes ha-vis-g3 { 0% { opacity: 0; } 64% { opacity: 1; } 73% { opacity: 0; } }

[data-role="guesser4"] .ha-text::after { content: ''; animation: ha-g4 22s steps(1) infinite; }
@keyframes ha-g4 { 0% { content: ''; } 9% { content: 'hmm...'; } 18% { content: ''; } }
[data-role="guesser4"] .ha-bubble { opacity: 0; animation: ha-vis-g4 22s steps(1) infinite; }
@keyframes ha-vis-g4 { 0% { opacity: 0; } 9% { opacity: 1; } 18% { opacity: 0; } }

@keyframes ha-center-reveal {
    0%, 82%  { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    84%      { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    86%      { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    90%      { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    91%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
}

@media (min-width: 400px) {
    .ha-speaker .ha-avatar { width: 44px; height: 60px; }
    .ha-speaker .ha-bubble { font-size: 0.8em; padding: 6px 14px; }
    .ha-center-icon { font-size: 2.5em; }
}

@media (prefers-reduced-motion: reduce) {
    [data-role="explainer"] .ha-text::after { content: 'mutta... että...'; animation: none; }
    [data-role="guesser1"] .ha-text::after  { content: 'Elevator?'; animation: none; }
    [data-role="guesser2"] .ha-text::after  { content: ''; animation: none; }
    [data-role="guesser3"] .ha-text::after  { content: ''; animation: none; }
    [data-role="guesser4"] .ha-text::after  { content: 'hmm...'; animation: none; }
    .ha-center-icon { animation: none; }
    .ha-speaker .ha-bubble { animation: none; opacity: 1; }
}

/* ── Lobby & Cards (Material Surfaces) ── */
.game-code-display {
    text-align: center;
    background: var(--color-surface);
    border-radius: var(--radius-xl); /* Large Material 3 radius */
    padding: 32px 24px;
    margin-bottom: 24px;
    box-shadow: var(--md-elevation-1);
    border: none;
}
.game-code-display .label {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.game-code-display .code {
    font-size: 3em;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--color-dark);
}

.player-list { list-style: none; margin-bottom: 24px; }
.player-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    box-shadow: var(--md-elevation-1);
    border: none;
}
.player-name { font-weight: 600; color: var(--color-dark); font-size: 1.05em; }

/* Badges */
.player-badge {
    font-size: 0.75em;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-host { background: #fff8e1; color: #f57f17; } /* Material Amber/Yellow */
.badge-ready { background: #e8f5e9; color: #2e7d32; } /* Material Green */
.badge-waiting { background: var(--color-border-light); color: var(--color-muted); }

/* ── Playing Surface ── */
.word-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 40px 24px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    box-shadow: var(--md-elevation-2);
    border: none;
}
.word-card .word-icon { font-size: 3.5em; }
.word-card .word-text {
    font-size: 2.2em;
    font-weight: 800;
    color: var(--color-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.word-card .word-hint {
    font-size: 1.1em;
    color: var(--color-muted);
    font-style: italic;
}
.word-translations {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.95em;
}
.word-translations span { color: var(--color-muted); }
.word-translations .lang {
    font-weight: 700;
    color: var(--color-dark);
    font-size: 0.85em;
    margin-right: 4px;
}

/* ── Playing Chips (M3 style) ── */
.playing-players {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
.playing-player {
    font-size: 0.8em;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    color: #fff;
    box-shadow: var(--md-elevation-1);
}
.playing-player.connected { background: var(--color-secondary); }
.playing-player.explainer { background: var(--color-primary); }
.playing-player.disconnected { background: var(--color-muted); }

/* ── Misc & Utilities ── */
.btn-skip {
    background: transparent;
    color: var(--color-muted);
    border: none;
    padding: 16px;
    font-size: 1.05em;
    border-radius: var(--radius-pill);
    flex: 1;
    box-shadow: none;
}
.btn-skip:hover {
    color: var(--color-dark);
    background: rgba(0,0,0,0.04);
}
.explainer-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
.explainer-buttons .btn-done { margin-top: 0; flex: 2; }

.btn-exit {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    color: var(--color-muted);
    border: none;
    font-size: 0.85em;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
}
.btn-exit:hover { color: var(--color-danger); background: rgba(179, 38, 30, 0.08); border-radius: var(--radius-md); }

/* ── Ready button ── */
.btn-ready {
    background: var(--color-secondary);
    color: white;
    width: 100%;
    padding: 16px;
    font-size: 1.15em;
    border-radius: var(--radius-pill);
    box-shadow: var(--md-elevation-1);
}
.btn-ready:hover { background: var(--color-secondary-hover); box-shadow: var(--md-elevation-2); }

/* ── Host game code (play screen) ── */
.host-game-code {
    text-align: center;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--color-muted);
    letter-spacing: 0.12em;
    margin-bottom: 6px;
}

/* ── Turn info ── */
.turn-info {
    text-align: center;
    color: var(--color-muted);
    font-size: 0.85em;
    font-weight: 500;
    margin-bottom: 8px;
}

/* ── Category label ── */
.category-label {
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: 12px;
}

/* ── Waiting view (guesser) ── */
.waiting-view {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}
.waiting-view .explainer-name {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--color-dark);
}
.waiting-view .waiting-text {
    font-size: 1.05em;
    color: var(--color-muted);
}
.waiting-dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* ── Focus button ── */
.btn-focus {
    width: 100%;
    margin-top: 12px;
    font-size: 0.92em;
    padding: 12px;
}

/* ── Host controls (guesser view) ── */
.host-controls {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
}
.host-controls .btn {
    flex: 1;
    padding: 14px;
    font-size: 0.92em;
    border-radius: var(--radius-pill);
}

/* ── Game Over ── */
.game-over-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 44px 24px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    box-shadow: var(--md-elevation-2);
}
.game-over-card .trophy { font-size: 4em; }
.game-over-card .congrats {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color-dark);
}
.game-over-card .stats { color: var(--color-muted); font-size: 1.05em; }
.game-over-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/* ── Host Setup: Pack Toolbar ── */
.pack-toolbar {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}
.pack-toolbar-label {
    font-weight: 600;
    color: var(--color-dark);
    font-size: 0.95em;
}
.pack-count-text {
    flex: 1;
    font-size: 0.8em;
    color: var(--color-muted);
}
.pack-toolbar-actions {
    display: flex;
    gap: 2px;
}
.pack-toolbar-actions button {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    transition: var(--transition);
}
.pack-toolbar-actions button:hover {
    color: var(--color-dark);
    border-color: var(--color-light-gray);
}

/* ── Host Setup: Pack Chips ── */
#host-screen .pack-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.pack-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: none;
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    background: var(--color-border);
    color: var(--color-muted);
}
.pack-chip.active {
    background: var(--color-primary);
    color: white;
}
.pack-chip:hover {
    opacity: 0.85;
}
.pack-chip-icon {
    font-size: 1.15em;
    line-height: 1;
}

/* Connection Indicator */
.connection-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}
.dot-connected { background: var(--color-primary); }
.dot-disconnected { background: var(--color-danger); }

/* ── Debug log ── */
#debug-log-wrapper {
    position: fixed;
    bottom: 8px;
    right: 8px;
    z-index: 9999;
}
#debug-log-toggle {
    display: block;
    margin-left: auto;
    background: rgba(30, 30, 46, 0.7);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    font-size: 0.65em;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
}
#debug-log-toggle:hover {
    color: rgba(255,255,255,0.7);
}
#debug-log-panel {
    position: fixed;
    bottom: 32px;
    left: 8px;
    right: 8px;
    background: #1e1e2e;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.1);
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
#debug-log-toolbar {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
#debug-log-toolbar button,
#debug-log-toolbar select {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    color: #a6adc8;
    font-size: 0.62em;
    padding: 3px 8px;
    cursor: pointer;
    font-family: inherit;
}
#debug-log-toolbar button:hover {
    background: rgba(255,255,255,0.15);
}
#debug-log-toolbar select {
    flex: 1;
    min-width: 0;
}
#debug-log-content {
    margin: 0;
    padding: 10px 12px;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.62em;
    line-height: 1.45;
    color: #a6adc8;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}