html, body {
    height: 100%;
    margin: 0px;
    box-sizing: border-box;
    font-family: sans-serif;
}

.hide {
    display: none;
}

/* For non-button/input elements, attempt to support the notion of disabled via styling */
.disabled { 
    pointer-events: none; /* Prevents all clicks, hovers, and pointer interactions */
    cursor: not-allowed;  /* Shows a "prohibited" cursor icon */
    opacity: 0.6;         /* Visual indicator making it look faded */
}

div#outer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#banner {
    background-color: black;
    color: white;
    display: flex;
    justify-content: space-between;
    flex: 0 1 auto; /* fixed height */
}

#banner span#haiku {
    font-size: 4em;
    font-weight: 900;
}

#banner span#factory{
}

#links {
    margin-right: 1em;
    margin-top: 15px;
    text-align: right;
}

#links > ul {
    list-style-type: none;
}

#links li {
    min-height: 1.2em;
}

#links a {
    color: inherit;
}

#downloadLink.error {
    pointer-events: none;
}

#downloadLink.inprogress {
    pointer-events: none;
}

#loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30em;
}

#loading.hide {
    display: none;
}

#container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    box-sizing: border-box;
    flex: 1 1 auto;  /* consume remaining height */
    height: 50%; /* seems we need to specify some height, and then allow it to grow, per flex */
}

#container.hide {
    display: none;
}

#kickoff {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#kickoff.hide {
    display: none;
}

#hello {
    font-size: 1.5em;
}

#currentUser {
    font-weight: 800;
}

#kickoffText {
    max-width: 20em;
    text-align: center;
    margin: 2em;
}

#loginButton {
}

#startButton {
    background-color: black;
    border-radius: 10px;
    color: white;
    padding: 20px;
    cursor: pointer;
    margin: 2em;
}

#kickoffCoda {
    margin: 1em;
    text-align: center;
}

#gameUrlText {
    field-sizing: content;
}

#gameLinkContainer {
    margin: 1em;
    min-height: 1em;
}

#gameLink {
    color: inherit;
}

#left {
    width: 40em;
    margin-left: 2em;
    margin-top: 10%;
}

#prompt {
    margin-bottom: 2.5em;
}

#prompt a {
    color: black;
}

#inputTable {
}

.inputLine {
    
}

tr.inputLine > td {
  padding-bottom: 1em;
}

.inputLine-heading {
    font-size: small;
    font-style: italic;
    vertical-align: top;
    padding-top: 0.8em;
}

.inputLine-content {
    font-family: monospace;
    font-size: 2em;
    padding-left: 1em;
}

.inputLine-active {
    font-family: monospace;
    font-size: 1.4em;
    padding-left: 1em;
}

.inputLine-submit {
    padding-left: 1em;
}

.inputLine-submit > button {
    margin: 5px;
}

input#entryText {
    font-size: large;
    width: 20em;
}

#right {
    border-left: 1px solid black;
    width: 70%;
    height: 100%;
    overflow: scroll;
}

#outputPane {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
}

.completedPoem {
    font-family: monospace;
    margin: 10px;
}

.image-button {
  /* 2. Reset default button styles */
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  
  /* 3. Handle potential overflow */
  overflow: hidden; 
}

.image-button img {
  /* 4. Force image to fill 100% of the button container */
  width: 100%;
  height: 100%;
  
  /* 5. Prevent image distortion (keeps original proportions) */
  object-fit: cover; 
  
  /* 6. Ensure it aligns perfectly in the center */
  display: block;
}