:root{
  --sky1:#9be0ff;
  --sky2:#61c0f4;
  --card:#ffffffcc;
  --ink:#0b2239;
  --accent:#0ea5e9;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: linear-gradient(180deg,var(--sky1),var(--sky2));
  overflow:hidden;
}

/* soft animated clouds */
.clouds{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, #ffffffcc 0 45px, transparent 46px),
    radial-gradient(circle at 27% 28%, #ffffffcc 0 60px, transparent 61px),
    radial-gradient(circle at 35% 31%, #ffffffcc 0 46px, transparent 47px),
    radial-gradient(circle at 75% 22%, #ffffffb8 0 40px, transparent 41px),
    radial-gradient(circle at 82% 20%, #ffffffb8 0 55px, transparent 56px),
    radial-gradient(circle at 90% 23%, #ffffffb8 0 40px, transparent 41px);
  filter: blur(0.2px);
  opacity:0.9;
  animation: drift 18s linear infinite;
}
@keyframes drift{
  0%{transform:translateX(0)}
  100%{transform:translateX(-4%)}
}

.shell{
  height:100%;
  display:flex;
  flex-direction:column;
  padding:24px;
  gap:18px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:16px;
  flex:1;
}

.brandBadge{
  width:92px;
  height:92px;
  border-radius:22px;
  background: linear-gradient(140deg, #7dd3fc, #fbcfe8);
  border:2px solid #38bdf8;
  display:grid;
  place-items:center;
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

.brandTitle{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  min-width:0;
  flex:1;
}

.logoText{
  font-family: "Fredoka", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 8vw, 96px);
  letter-spacing: 0;
  color: #06233b;
  -webkit-text-stroke: 2px rgba(255,255,255,0.55);
  paint-order: stroke fill;
  text-shadow:
    0 3px 0 rgba(255,255,255,0.40),
    0 14px 28px rgba(0,0,0,0.18);
  display:flex;
  flex-wrap:wrap;
  width:100%;
  justify-content:flex-start;
  gap:0;
}

.logoLetter{
  display:inline-block;
}

.logoSpace{
  width:0.6ch;
}

.logoLetter:nth-child(12n + 1){color:#ef4444;}
.logoLetter:nth-child(12n + 2){color:#f97316;}
.logoLetter:nth-child(12n + 3){color:#eab308;}
.logoLetter:nth-child(12n + 4){color:#22c55e;}
.logoLetter:nth-child(12n + 5){color:#14b8a6;}
.logoLetter:nth-child(12n + 6){color:#0ea5e9;}
.logoLetter:nth-child(12n + 7){color:#3b82f6;}
.logoLetter:nth-child(12n + 8){color:#8b5cf6;}
.logoLetter:nth-child(12n + 9){color:#ec4899;}
.logoLetter:nth-child(12n + 10){color:#f43f5e;}
.logoLetter:nth-child(12n + 11){color:#10b981;}
.logoLetter:nth-child(12n + 12){color:#f59e0b;}

.logoSub{
  margin-top: 2px;
  font-family: "Fredoka", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: rgba(6,35,59,0.72);
}

.musicControls{
  display:flex;
  align-items:center;
  gap:10px;
}

.btn{
  appearance:none;
  border:0;
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  background: linear-gradient(90deg,#f472b6,#a78bfa,#34d399);
  color:#07131f;
  box-shadow: 0 14px 26px rgba(0,0,0,0.18);
}
.btn.secondary{
  background: rgba(255,255,255,0.60);
  color: var(--ink);
}
.btn:active{transform:translateY(1px)}

.main{
  flex:1;
  display:grid;
  grid-template-columns: 1.25fr 0.85fr;
  grid-template-rows: 1fr auto;
  gap:18px;
  align-items:stretch;
  min-height:0;
}

/* Place games big on the left; Gordon smaller in bottom-right */
.panel[aria-label="Games"]{ grid-column: 1; grid-row: 1 / span 2; }
.gordonPanel{ grid-column: 2; grid-row: 2; align-self: end; }

.panel{
  background: rgba(255,255,255,0.0);
  border: 2px solid rgba(255,255,255,0.70);
  backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.10);
  min-height:0;
}

.h1{
  margin: 0 0 10px 0;
  font-size: 22px;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}

.gameIconLink{
  border-radius: 24px;
  background: rgba(255,255,255,0.00);
  border: 2px solid rgba(255,255,255,0.75);
  display:grid;
  place-items:center;
  text-decoration:none;
  color:inherit;
  min-height: 132px;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, background 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.gameIconLink:hover{ transform: translateY(-2px); }
.gameIconLink:active{ transform: scale(0.985); filter: brightness(0.98); }

.gameEmoji{
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
}

/* Gordon character */
.gordonWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  height:100%;
}

/* ---- Animated message display (above Gordon) ---- */
.messageDisplay{
  width: 100%;
  max-width: 420px;
  min-height: 80px;
  position: relative;
  overflow: hidden;
}
.messageDisplayCard{
  background: rgba(255,255,255,0.92);
  border: 3px solid rgba(14,165,233,0.35);
  border-radius: 22px;
  padding: 16px 20px;
  text-align: center;
  box-shadow:
    0 8px 24px rgba(14,165,233,0.15),
    0 2px 6px rgba(0,0,0,0.08);
  opacity: 0;
  transform: translateY(20px) scale(0.92);
}
.messageDisplayText{
  font-family: "Fredoka", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.25;
  color: #06233b;
  word-break: break-word;
}
.messageDisplayFrom{
  margin-top: 6px;
  font-family: "Fredoka", ui-rounded, system-ui;
  font-weight: 700;
  font-size: 16px;
  color: rgba(6,35,59,0.55);
}

/* entrance: bounce up */
.messageDisplayCard.msg-enter{
  animation: msgBounceIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes msgBounceIn{
  0%  { opacity:0; transform:translateY(30px) scale(0.85); }
  60% { opacity:1; transform:translateY(-6px) scale(1.03); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

/* exit: fade out upward */
.messageDisplayCard.msg-exit{
  animation: msgFadeOut 0.35s ease-in forwards;
}
@keyframes msgFadeOut{
  0%  { opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(-20px) scale(0.9); }
}

/* placeholder state */
.messageDisplayCard.msg-empty{
  opacity: 0.6;
  transform: translateY(0) scale(1);
}

.speech{
  max-width: 320px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.85);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  font-weight:800;
  text-align:center;
}

.hint{opacity:0.75; font-size:12px; font-weight:700}

.gordonBtn{
  border:0;
  background:transparent;
  padding:0;
}

.gordonSvg{
  width: min(280px, 88%);
  height: auto;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,0.16));
}

/* wave animation targets */
.wave .arm{
  transform-origin: 80% 30%;
  animation: wave 0.9s ease-in-out 1;
}
@keyframes wave{
  0%{transform:rotate(0deg)}
  25%{transform:rotate(16deg)}
  50%{transform:rotate(-10deg)}
  75%{transform:rotate(14deg)}
  100%{transform:rotate(0deg)}
}

/* App-like transition overlay */
.transitionOverlay{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(4, 16, 28, 0.0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, background 220ms ease;
}
.transitionOverlay.show{
  opacity: 1;
  pointer-events: auto;
  background: rgba(4, 16, 28, 0.25);
}
.transitionCard{
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 22px;
  padding: 16px 18px;
  min-width: 220px;
  display:flex;
  align-items:center;
  gap: 12px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
}
.spinner{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(14,165,233,0.25);
  border-top-color: rgba(14,165,233,1);
  animation: spin 0.75s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }
.transitionText{
  font-family: "Fredoka", ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  color: #06233b;
}

/* reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .clouds{ animation: none; }
  .spinner{ animation: none; }
  .gameCard{ transition: none; }
  .transitionOverlay{ transition: none; }
  .messageDisplayCard.msg-enter{ animation:none; opacity:1; transform:none; }
  .messageDisplayCard.msg-exit{ animation:none; opacity:0; }
}

@media (max-width: 860px){
  body{overflow:auto}
  .main{grid-template-columns: 1fr; grid-template-rows: auto;}
  .panel[aria-label="Games"]{ grid-column: auto; grid-row: auto; }
  .gordonPanel{ grid-column: auto; grid-row: auto; align-self: stretch; }
  .gordonSvg{ width: min(320px, 92%); }
}