/* =====================================================
   BLUE OYSTER TRANSMISSION
   WORDLE
===================================================== */

.wordleContainer{

margin:60px 0;

padding:30px;

border:1px solid currentColor;

background:transparent;

color:inherit;

font-family:inherit;

}

.wordleContainer h2{

text-align:center;

font-size:1.4rem;

letter-spacing:.15em;

margin-bottom:8px;

}

.wordleContainer p{

text-align:center;

opacity:.75;

margin-bottom:25px;

}

.terminalHeader{

padding:15px;

margin-bottom:30px;

border:1px solid currentColor;

background:rgba(127,127,127,.06);

font-family:inherit;

white-space:pre-wrap;

line-height:1.6;

}



/* =====================================================
   GRID
===================================================== */

#grid{

display:flex;

flex-direction:column;

gap:10px;

align-items:center;

margin-bottom:35px;

}

.wordRow{

display:flex;

gap:10px;

}

.tile{

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

font-size:1.8rem;

font-weight:bold;

border:1px solid currentColor;

background:transparent;

color:inherit;

transition:.25s;

}

.tile.correct{

background:#4CAF50;

color:white;

border-color:#4CAF50;

}

.tile.present{

background:#D4A017;

color:white;

border-color:#D4A017;

}

.tile.absent{

opacity:.35;

}



/* =====================================================
   TERMINAL
===================================================== */

.terminalPrompt{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

margin:25px 0;

font-size:1.4rem;

}

.promptArrow{

font-weight:bold;

}

#terminalWord{

display:flex;

gap:10px;

align-items:center;

min-height:60px;

}

.cursorTile{

width:2px;

height:42px;

background:currentColor;

animation:blink 1s infinite;

}

@keyframes blink{

50%{

opacity:0;

}

}



/* =====================================================
   BUTTONS
===================================================== */

.buttons{

display:flex;

justify-content:center;

margin-top:25px;

margin-bottom:25px;

gap:15px;

}

.buttons button{

background:transparent;

border:1px solid currentColor;

color:inherit;

padding:10px 18px;

font:inherit;

cursor:pointer;

transition:.2s;

}

.buttons button:hover{

background:currentColor;

color:var(--bg-color, black);

}



/* =====================================================
   STATUS
===================================================== */

#status{

text-align:center;

margin:20px 0;

font-style:italic;

opacity:.8;

}



/* =====================================================
   KEYBOARD
===================================================== */

#keyboard{

display:flex;

flex-direction:column;

gap:8px;

align-items:center;

margin-top:20px;

}

.keyboardRow{

display:flex;

gap:6px;

}

.key{

width:36px;

height:44px;

display:flex;

justify-content:center;

align-items:center;

border:1px solid currentColor;

background:transparent;

cursor:pointer;

user-select:none;

transition:.2s;

}

.key.large{

width:78px;

}

.key:hover{

transform:translateY(-2px);

}

.key.correct{

background:#4CAF50;

border-color:#4CAF50;

color:white;

}

.key.present{

background:#D4A017;

border-color:#D4A017;

color:white;

}

.key.absent{

opacity:.35;

}



/* =====================================================
   HIDDEN CONVERSATION
===================================================== */

.hiddenConversation{

display:none;

margin-top:50px;

padding-top:40px;

border-top:1px dashed currentColor;

animation:fade .5s;

}

@keyframes fade{

from{

opacity:0;
transform:translateY(15px);

}

to{

opacity:1;
transform:none;

}

}



/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

.tile{

width:48px;

height:48px;

font-size:1.4rem;

}

.key{

width:30px;

height:36px;

font-size:.8rem;

}

.key.large{

width:64px;

}

}