/* The Wordle Activity in design A: the café awning, the five palette colours, Miso's fonts. */
@font-face{font-family:'Silkscreen';font-weight:400;src:url('fonts/Silkscreen-Regular.ttf') format('truetype')}
@font-face{font-family:'Space Mono';font-weight:400;src:url('fonts/SpaceMono-Regular.ttf') format('truetype')}
@font-face{font-family:'Space Mono';font-weight:700;src:url('fonts/SpaceMono-Bold.ttf') format('truetype')}

:root{--mid:#242038;--slate:#725AC1;--peri:#8D86C9;--pale:#CAC4CE;--linen:#F7ECE1;
  --tile:max(14px,min(58px,calc((100vw - 96px) / 5.5),calc((100vh - 400px) / 6.6)))}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--peri);color:var(--mid);font-family:'Space Mono',monospace;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#app{height:100%;max-width:540px;margin:0 auto;padding:12px 16px 16px;display:flex;flex-direction:column}

.outside{margin:auto;background:var(--linen);border:3px solid var(--mid);padding:12px 16px;font-size:15px}

.card{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:hidden;
  background:var(--linen);border:4px solid var(--mid);box-shadow:8px 8px 0 var(--mid);padding-bottom:12px}
.awning{align-self:stretch;flex:none;height:30px;position:relative;margin-bottom:22px;
  background:repeating-linear-gradient(90deg,var(--slate) 0 40px,var(--linen) 40px 80px)}
.awning::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px;
  background:radial-gradient(circle at 20px 0,var(--slate) 17px,var(--mid) 17px 20px,transparent 20px) 0 0/80px 20px repeat-x,
             radial-gradient(circle at 60px 0,var(--linen) 17px,var(--mid) 17px 20px,transparent 20px) 0 0/80px 20px repeat-x}

header{display:flex;align-items:baseline;gap:12px}
h1{font-family:'Silkscreen',monospace;font-weight:400;font-size:30px;letter-spacing:.04em;text-transform:uppercase;margin:0}
header span{color:var(--slate);font-size:13px}

.grid{display:grid;gap:6px}
.row{display:flex;gap:6px}
.tile{width:var(--tile);height:var(--tile);border:3px solid var(--pale);display:grid;place-items:center;position:relative;
  font-family:'Silkscreen',monospace;font-size:calc(var(--tile) * .5);text-transform:uppercase;line-height:1}
.tile.typed{border-color:var(--mid);animation:pop .1s ease}
.tile.c{background:var(--slate);color:var(--linen);border-color:var(--mid)}
.tile.p{background:var(--linen);border-color:var(--slate)}
.tile.p::after,.key.p::after{content:"";position:absolute;right:0;top:0;border-left:14px solid transparent;border-top:14px solid var(--slate)}
.tile.p::after{border-left-width:calc(var(--tile) * .24);border-top-width:calc(var(--tile) * .24)}
.tile.a{background:var(--pale);border-color:var(--pale)}
.tile.flip{animation:flip .5s ease both;animation-delay:calc(var(--i) * .18s)}
.row.shake{animation:shake .4s}

.note{min-height:1.4em;font-size:13px;color:var(--slate);text-align:center;padding:0 10px}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:34px}
button{font:inherit;cursor:pointer;color:inherit}
.btn{font-weight:700;font-size:13px;background:var(--slate);color:var(--linen);border:3px solid var(--mid);padding:4px 12px}
.btn.ghost{background:var(--linen);color:var(--mid)}
.btn:disabled{opacity:.55;cursor:default}

.keys{display:grid;gap:6px;width:100%;padding:0 10px;margin-top:auto}
.keyrow{display:flex;gap:5px;justify-content:center}
.key{flex:1;max-width:42px;height:46px;position:relative;border:2px solid var(--mid);background:var(--linen);
  font-family:'Silkscreen',monospace;font-size:14px;text-transform:uppercase;padding:0}
.key.wide{max-width:64px;flex:1.5;font-size:11px;background:var(--mid);color:var(--linen);border-color:var(--mid)}
.key.c{background:var(--slate);color:var(--linen)}
.key.p{background:var(--linen);border-color:var(--slate)}
.key.p::after{border-left-width:9px;border-top-width:9px}
.key.a{background:var(--pale);border-color:var(--pale);color:var(--mid)}

@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes pop{50%{transform:scale(1.08)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.tile.flip,.tile.typed,.row.shake{animation:none}}

/* the end of a game: the effect over everything first, then a panel slides up over the keyboard
   with the word, letter by letter. The board and keyboard never move */
.panel{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--linen);border-top:4px solid var(--mid);padding:14px 12px 16px;transform:translateY(110%);
  transition:transform .5s cubic-bezier(.2,.9,.3,1.15)}
.panel.show{transform:none}
.panel.still{transition:none}
.panel span{font-size:13px;color:var(--slate)}
.panel .actions{min-height:0}
.panel .word{display:flex;gap:6px}
.panel .word i{font-style:normal;width:44px;height:44px;display:grid;place-items:center;font-family:'Silkscreen',monospace;
  font-weight:700;font-size:24px;text-transform:uppercase;background:var(--slate);color:var(--linen);border:3px solid var(--mid);opacity:0}
.panel.lost .word i{background:var(--mid);border-color:var(--slate)}
.panel.show .word i{animation:letter-in .45s ease both;animation-delay:calc(.45s + var(--i) * .16s)}
.panel.still .word i{animation:none;opacity:1}
@keyframes letter-in{0%{opacity:0;transform:translateY(14px) rotateX(90deg)}100%{opacity:1;transform:none}}
.row.hop .tile{animation:hop .55s ease both;animation-delay:calc(var(--i) * .1s)}
.card.shake{animation:shake .5s}
.finale{position:fixed;inset:0;z-index:10;pointer-events:none;overflow:hidden;display:grid;place-items:center}
.finale.lost{animation:dim 3.8s ease both}
.finale .banner{font-family:'Silkscreen',monospace;font-weight:700;text-transform:uppercase;font-size:clamp(18px,7vw,40px);
  background:var(--slate);color:var(--linen);border:4px solid var(--mid);box-shadow:8px 8px 0 var(--mid);padding:10px 18px;
  animation:pop-in .5s cubic-bezier(.2,1.6,.4,1) both,fade-out .35s ease 1.55s forwards}
.finale.lost .banner{background:var(--mid);color:var(--pale);border-color:var(--pale);box-shadow:8px 8px 0 var(--slate)}
.finale i{position:absolute;top:-20px;width:10px;height:10px;animation-name:fall;animation-timing-function:linear;animation-fill-mode:both}
.finale.lost i{width:3px;height:18px;animation-name:rain}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px)}}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
@keyframes rain{to{transform:translateY(110vh)}}
@keyframes pop-in{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fade-out{to{opacity:0}}
@keyframes dim{0%,100%{background:transparent}15%,80%{background:rgba(36,32,56,.4)}}

/* a short window: a smaller keyboard and awning so the board keeps its size */
@media (max-height:560px){
  :root{--tile:max(14px,min(48px,calc((100vw - 96px) / 5.5),calc((100vh - 300px) / 6.6)))}
  #app{padding:8px 10px 10px}
  .card{gap:6px}
  .awning{height:18px;margin-bottom:6px}
  .awning::after{display:none}
  h1{font-size:22px}
  .key{height:32px;font-size:12px}
  .keys{gap:4px}
  .panel{padding:8px 10px 10px;gap:5px}
  .panel .word i{width:34px;height:34px;font-size:18px}
}

/* the tiny window Discord shows while you look at something else: just the board */
@media (max-height:300px){
  :root{--tile:max(8px,min(calc((100vh - 64px) / 6.6),calc((100vw - 40px) / 5.6)))}
  #app{padding:4px 6px}
  .card{gap:4px;padding-bottom:6px;border-width:3px;box-shadow:4px 4px 0 var(--mid)}
  .awning{height:10px;margin-bottom:4px}
  .awning::after{display:none}
  header{gap:8px}
  h1{font-size:14px}
  header span{font-size:10px}
  .grid,.row{gap:2px}
  .tile{font-size:0;border:none}
  .tile:not(.c):not(.p):not(.a){background:var(--pale);opacity:.5}
  .tile.p{background:var(--peri)}
  .tile.p::after{display:none}
  .note,.actions,.keys,.panel{display:none}
}