.overlay-card .overlay-actions {
  justify-content: center;
  margin-top: 18px;
}
.overlay-card .overlay-actions button {
  min-width: 120px;
  font-size: 1.1em;
  padding: 10px 0;
  border-radius: 7px;
  background: var(--present);
  color: #fff;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s;
}
.overlay-card .overlay-actions button:hover {
  background: var(--correct);
}
.instructions-fab {
  z-index: 1201;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fffbe6;
  color: #3a3a3c;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  padding: 0;
}
.instructions-fab:hover {
  background: #ffe066;
  box-shadow: 0 4px 16px rgba(255,206,0,0.22);
}
.instructions-fab svg {
  width: 20px;
  height: 20px;
  display: block;
}
:root{
  --bg:#121213; --tile:#121213; --text:#d7dadc;
  --absent:#3a3a3c; --present:#b59f3b; --correct:#538d4e;
  /* responsive tile sizing based on viewport - fits 6 rows + keyboard on screen */
  --tile-size: min(12vw, 10vh, 58px);
  --tile-gap: min(1.2vw, 1vh, 6px);
  --key-height: min(8vh, 52px);
  --key-font: min(3.8vw, 2.2vh, 1.1em);
}
*{box-sizing:border-box}

html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;overflow:hidden}
body{background:var(--bg);color:var(--text);display:flex;flex-direction:column;align-items:center;padding:env(safe-area-inset-top) 8px env(safe-area-inset-bottom) 8px;height:100dvh;max-height:100dvh;box-sizing:border-box}
.add-word-fab {
  z-index: 1200;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--present);
  color: #fff;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  padding: 0;
}
.add-word-fab:hover {
  background: var(--correct);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.add-word-fab svg {
  width: 20px;
  height: 20px;
  display: block;
}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:2000}
.overlay[style*="display: flex"]{display:flex!important;}
.overlay-card{background:#fff;color:#111;padding:20px;border-radius:8px;width:360px;max-width:94%}
/* header: full width, centered title, actions on the right */
header{width:100%;display:flex;align-items:center;justify-content:center;padding:min(1vh, 6px) 0;z-index:1100;background:transparent;flex-shrink:0;position:relative}
header h2{font-size:min(5vw, 3vh, 1.4em);margin:0}
.header-actions{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;gap:6px;align-items:center}
.header-actions .instructions-fab,
.header-actions .add-word-fab{width:min(8vw, 32px);height:min(8vw, 32px)}
.header-actions svg{width:min(5vw, 20px);height:min(5vw, 20px)}
.overlay-card h1{margin:0 0 8px}
.overlay-card p{margin:6px 0}
.overlay-actions{display:flex;gap:8px;margin-top:10px}
.overlay-card input, .overlay-card select{width:100%;padding:10px;font-size:16px;margin-top:6px}
.note{font-size:12px;color:#444}

main{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;min-height:0;overflow:hidden;padding-top:min(2vh, 12px)}
#game{display:flex;flex-direction:column;align-items:center;gap:min(2vh, 12px)}
.grid{display:grid;gap:var(--tile-gap)}
.row{display:grid;grid-auto-flow:column;gap:var(--tile-gap);grid-template-columns:repeat(5, var(--tile-size))}
.tile{width:var(--tile-size);height:var(--tile-size);border:2px solid #3a3a3c;position:relative;background:transparent;padding:0}
.tile-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform 450ms ease}
.tile .front, .tile .back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(var(--tile-size) * 0.5);text-transform:uppercase;backface-visibility:hidden;border-radius:min(4px, 0.8vw)}
.tile .front{background:transparent;color:var(--text);}
.tile .back{transform:rotateX(180deg);color:#fff}
.tile.flipped .tile-inner{transform:rotateX(180deg)}
.message{
  min-height:min(4vh, 28px);
  margin: min(1vh, 6px) 0;
  font-size: min(4vw, 2.5vh, 1.2em);
  text-align: center;
  font-weight: 700;
  color: #ffce00;
  text-shadow: 0 2px 8px #222, 0 0 2px #ffce00;
  background: rgba(0,0,0,0.18);
  border-radius: min(8px, 1.5vw);
  padding: min(1vh, 6px) min(2vw, 12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: color 0.18s, background 0.18s;
  flex-shrink:0;
}

.keyboard{display:flex;flex-direction:column;gap:min(1vh, 6px);width:100%;max-width:500px;flex-shrink:0}
.kb-row{display:flex;gap:min(1vw, 5px);justify-content:center}
.key{
  padding:0;
  min-width:min(8.5vw, 44px);
  height:var(--key-height);
  border-radius:min(6px, 1.2vw);
  background:#818384;
  color:#fff;
  border:none;
  font-weight:700;
  cursor:pointer;
  text-transform:uppercase;
  font-size:var(--key-font);
  line-height:1;
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
}
.key.wide{min-width:min(13vw, 64px);}
@media (max-width: 600px) {
  .instructions-fab, .add-word-fab { width:min(10vw, 40px); height:min(10vw, 40px); }
  .instructions-fab svg, .add-word-fab svg { width:min(6vw, 24px); height:min(6vw, 24px); }
}

.tile.absent .back{background:var(--absent);border:2px solid var(--absent)}
.tile.present .back{background:var(--present);border:2px solid var(--present)}
.tile.correct .back{background:var(--correct);border:2px solid var(--correct)}
.tile:not(.flipped) .front{border:2px solid #3a3a3c}
.tile.flipped .front{border:2px solid transparent}

.key.absent{background:var(--absent)}
.key.present{background:var(--present)}
.key.correct{background:var(--correct)}
.key.wide.zend{
  background: #ffce00;
  color: #222;
  font-size: 1.15em;
  border: 2px solid #b59f3b;
  box-shadow: 0 2px 8px rgba(255,206,0,0.18);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.key.wide.zend:hover {
  background: #ffe066;
  color: #111;
  box-shadow: 0 4px 16px rgba(255,206,0,0.22);
}

.message.important {
  color: #ff004f;
  background: #fffbe6;
  text-shadow: 0 2px 8px #ff004f, 0 0 2px #fffbe6;
  font-size: 1.35em;
  border: 2px solid #ff004f;
  font-weight: 900;
}

/* Celebration styles: centered fullscreen spinner and caption */
#celebrate{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9999;display:flex;align-items:center;justify-content:center}
.celebrant{position:absolute;will-change:transform,opacity;opacity:1;transform-origin:center center;pointer-events:none;display:flex;align-items:center;justify-content:center}
.celebrant img{width:100%;height:100%;display:block;object-fit:contain}
.celebrant.fullscreen{left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vmin}
.celebrant.fullscreen img{width:50vmin;height:50vmin;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
@keyframes spin {from{transform:rotate(0deg)} to{transform:rotate(360deg)}}
.celebrant.spin img{animation: spin 2s linear infinite}

/* caption sits below the image when inside the fullscreen celebrant */
.celebration-caption{position:relative;color:#fff;font-size:2.2rem;background:rgba(0,0,0,0.6);padding:12px 20px;border-radius:10px;white-space:normal;max-width:90vw;overflow-wrap:break-word;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.6);z-index:9999;margin:0}
.celebration-caption.small{font-size:1.2rem;padding:6px 10px}

@media (max-width:520px){.celebration-caption{font-size:1.6rem;padding:8px 12px}}

/* carnival vibration + color */
@keyframes carnivalVibrate {0%{transform:translateX(-2px) rotate(-1deg)}25%{transform:translateX(2px) rotate(1deg)}50%{transform:translateX(-2px) rotate(-1deg)}75%{transform:translateX(2px) rotate(1deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes carnivalColors {0%{color:#ff004f;text-shadow:0 0 8px #ff004f}20%{color:#ffce00;text-shadow:0 0 8px #ffce00}40%{color:#00e0ff;text-shadow:0 0 8px #00e0ff}60%{color:#8cff00;text-shadow:0 0 8px #8cff00}80%{color:#ff66ff;text-shadow:0 0 8px #ff66ff}100%{color:#ff004f;text-shadow:0 0 8px #ff004f}}
.celebration-caption.carnival{animation: carnivalVibrate 0.12s linear infinite, carnivalColors 1.1s linear infinite; font-weight:900}

@media (max-width:420px){
  .overlay-card{width:90vw;max-width:300px}
}

/* Landscape orientation: prioritize width-based sizing */
@media (orientation: landscape) and (max-height: 500px) {
  :root{
    --tile-size: min(8vh, 10vw, 48px);
    --key-height: min(7vh, 44px);
  }
  header h2{font-size:min(3vh, 1.2em)}
}