@import url('./videostop/profile-deletion.css');

:root {
  color-scheme:light;
  --paper:#fcfaf6;
  --plum:#310f2f;
  --purple:#8624b1;
  --purple-dark:#64168e;
  --lavender:#efe3fa;
  --muted:#59485a;
  --border:#e4dce4;
  font-family:'DM Sans',sans-serif;
  color:var(--plum);
  background:var(--paper);
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}

body {
  margin:0;
}

button,input,select {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
}

button {
  color:inherit;
  cursor:pointer;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3,.button,.card-action,.eyebrow,.discovery,.encouragement,.story-motto,.parents-claim {
  font-family:'Nunito',sans-serif;
}

h1,h2,h3 {
  font-weight:1000;
  letter-spacing:-.035em;
}

button,a,input,select {
  touch-action:manipulation;
}

:focus-visible {
  outline:3px solid #4d79c8;
  outline-offset:5px;
}

.wrap {
  width:min(1280px,calc(100% - 64px));
  margin-inline:auto;
}

.skip-link {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:10;
  padding:12px 20px;
  background:white;
  border:2px solid var(--purple);
  border-radius:10px;
}

.skip-link:focus {
  top:12px;
}

.site-header {
  display:flex;
  align-items:center;
  gap:34px;
  min-height:124px;
}

.brand {
  flex-shrink:0;
  width:300px;
}

.brand img {
  width:100%;
  mix-blend-mode:multiply;
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:38px;
  border-inline:2px solid #cda9e8;
  padding:0 36px;
  margin-left:auto;
}

.site-header nav a,.site-footer nav a {
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
  padding-block:12px;
}

.site-header nav a:hover,.site-footer nav a:hover {
  color:var(--purple);
  text-decoration:underline;
  text-underline-offset:5px;
}

.player-button {
  border:0;
  background:var(--lavender);
  border-radius:60px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:5px 16px 5px 5px;
  font-weight:700;
  min-height:54px;
  max-width:230px;
}

.player-button [data-player-name] {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.player-avatar {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:46px;
  height:46px;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  font-weight:800;
  font-size:24px;
}

.player-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.icon {
  flex-shrink:0;
  width:20px;
  height:20px;
}

.icon-play {
  width:24px;
  height:24px;
  filter:brightness(0) invert(1);
}

.player-button:hover {
  background:#e5d2f6;
}

.hero {
  position:relative;
  display:grid;
  grid-template-columns:46% 54%;
  align-items:center;
  min-height:580px;
  padding-bottom:22px;
}

.hero-copy {
  z-index:1;
  padding:25px 0 30px 12px;
}

.eyebrow {
  font-size:27px;
  color:#7926ad;
  font-weight:1000;
  margin-bottom:22px;
}

.hero h1 {
  font-size:clamp(45px,4.6vw,68px);
  line-height:1.06;
  letter-spacing:-.045em;
}

.hero-description {
  font-size:22px;
  line-height:1.45;
  max-width:450px;
  margin-top:24px;
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:34px;
}

.button,.card-action {
  background:linear-gradient(165deg,#a739ce,var(--purple));
  color:#fff;
  border:1px solid #8021a3;
  box-shadow:inset 0 1px 0 #ffffff35,0 3px 0 #66177d12;
  text-decoration:none;
  font-size:22px;
  font-weight:800;
  border-radius:20px;
  padding:16px 27px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:17px;
  line-height:1.2;
}

.button:hover {
  background:var(--purple-dark);
}

.text-link {
  color:#74229e;
  font-weight:800;
  text-underline-offset:5px;
  text-decoration:underline;
  text-decoration-thickness:2px;
}

.hero-art {
  width:calc(100% + 55px);
  max-width:none;
  margin-left:-40px;
}

.games-section {
  padding-top:12px;
}

.discovery {
  text-align:center;
  font-weight:900;
  font-size:clamp(24px,2.7vw,38px);
  line-height:1.25;
  margin-bottom:28px;
}

.games-section h2 {
  text-align:center;
  font-size:clamp(30px,3.7vw,52px);
  line-height:1.2;
  margin-bottom:42px;
}

.games-section h2 span {
  display:inline-block;
  max-width:100%;
  background:linear-gradient(115deg,#f0e1f8,#e7cff2);
  border-radius:40px 48px 44px 46px;
  padding:10px 30px;
  box-shadow:inset 0 2px 0 #ffffff80,0 3px 0 #d6bce733;
}

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

.game-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:22px;
  background:#fffefd;
  color:var(--plum);
  text-decoration:none;
  box-shadow:0 2px 0 #34102e06;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}

.game-card:hover {
  transform:translateY(-5px);
  box-shadow:0 10px 24px #59215814;
  border-color:#bc8dd0;
}

.game-card-wide {
  grid-column:span 2;
}

.card-art {
  position:relative;
  overflow:hidden;
}

.card-art>img {
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
}

.game-card-wide .card-art>img {
  aspect-ratio:3/1;
}

.tip {
  position:absolute;
  top:15px;
  left:14px;
  z-index:1;
  background:#ffe164;
  font-weight:800;
  color:#3d2633;
  padding:7px 13px;
  border-radius:7px;
  transform:rotate(-7deg);
  box-shadow:0 2px 0 #90671115;
  font-size:15px;
}

.card-body {
  display:flex;
  flex:1;
  flex-direction:column;
  padding:16px 20px 20px;
}

.card-body h3 {
  font-size:27px;
  line-height:1.1;
  margin-bottom:8px;
}

.game-card-wide h3 {
  font-size:31px;
}

.card-body p {
  font-size:16px;
  line-height:1.4;
  margin-bottom:20px;
  color:#302332;
}

.card-action {
  font-size:19px;
  padding:7px 30px;
  min-width:142px;
  border-radius:28px;
  margin-top:auto;
  align-self:center;
}

.game-card:hover .card-action {
  background:var(--purple-dark);
}

.encouragement {
  position:relative;
  min-height:140px;
  margin-top:65px;
  margin-bottom:36px;
  padding:30px 38px 30px 300px;
  background:#c4eeee;
  border-radius:45px 20px 38px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
}

.encouragement p {
  font-size:clamp(26px,3.2vw,44px);
  font-weight:1000;
  letter-spacing:-.025em;
}

.encouragement-art {
  position:absolute;
  width:310px;
  max-width:none;
  left:-10px;
  bottom:-9px;
  pointer-events:none;
}

.story {
  padding:5px 12px 36px;
}

.story h2 {
  font-size:clamp(31px,3.3vw,46px);
  line-height:1.2;
}

.story-motto {
  font-size:26px;
  font-weight:800;
  line-height:1.3;
  margin-top:8px;
}

.story-content {
  display:grid;
  grid-template-columns:32% 68%;
  gap:20px;
  align-items:center;
  margin-top:20px;
}

.story-content p {
  font-size:19px;
  line-height:1.45;
  max-width:350px;
}

.story-content img {
  width:100%;
}

.parents {
  background:linear-gradient(105deg,#eee0f7,#f2e8f8 70%,#fff6df);
  border-radius:60px 60px 0 0;
  overflow:hidden;
}

.parents-inner {
  display:grid;
  grid-template-columns:27% 1fr;
  gap:30px;
  align-items:center;
  min-height:275px;
}

.blahoslav {
  align-self:center;
  justify-self:center;
  width:100%;
}

.parents-copy {
  padding:24px 0 20px 28px;
  border-left:2px solid #c398de;
}

.parents-copy h2 {
  font-size:37px;
  line-height:1.15;
  margin-bottom:9px;
}

.parents-copy p {
  line-height:1.4;
  font-size:17px;
}

.parents-copy .parents-claim {
  font-weight:1000;
  font-size:23px;
  background:#ffe28b;
  border-radius:13px 20px 15px 8px;
  display:inline-block;
  padding:5px 12px;
  margin-top:12px;
}

.parents-copy .interpretation {
  font-size:12px;
  color:#695869;
  margin-top:10px;
}

.idea-invitation {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 28px;
  margin-top:8px;
  margin-bottom:28px;
  border:1px solid var(--border);
  border-radius:24px;
  background:var(--paper);
}

.idea-invitation h3 {
  font-size:27px;
  line-height:1.2;
}

.idea-invitation p {
  margin-top:7px;
  font-size:18px;
  color:var(--muted);
}

.idea-invitation .button {
  flex-shrink:0;
}

.idea-dialog {
  width:560px;
}

.idea-dialog form>p {
  line-height:1.5;
  color:var(--muted);
}

.idea-dialog label {
  display:block;
  font-weight:700;
  margin:16px 0 7px;
}

.idea-dialog label span {
  color:var(--muted);
  font-weight:400;
}

.idea-dialog input,.idea-dialog textarea {
  width:100%;
  border:1px solid #bbaac4;
  border-radius:12px;
  padding:11px 13px;
  background:#fff;
  font:inherit;
  font-size:16px;
  color:var(--plum);
  min-height:44px;
}

.idea-dialog textarea {
  resize:vertical;
  line-height:1.45;
}

.idea-dialog .idea-privacy {
  font-size:12px;
  margin-top:12px;
}

.idea-dialog .form-error {
  margin-top:12px;
  color:#a32238;
}

.idea-dialog .button {
  display:flex;
  margin:16px auto 0;
}

.idea-dialog .button:disabled {
  opacity:.65;
  cursor:wait;
}

.idea-honeypot {
  display:none;
}

.idea-success h3 {
  font-size:28px;
  margin-bottom:12px;
}

.idea-success p {
  line-height:1.6;
}

@media(max-width:700px) {
  .idea-invitation {
    flex-direction:column;
    text-align:center;
    padding:22px 20px;
    gap:18px;
  }
  .idea-invitation h3 {
    font-size:25px;
  }
  .idea-invitation p {
    font-size:17px;
  }
}

.site-footer {
  display:flex;
  align-items:center;
  gap:28px;
  padding-block:19px;
}

.site-footer .brand {
  width:230px;
}

.copyright {
  border:0;
  background:transparent;
  min-height:44px;
  padding:10px 0;
  font-size:12px;
  color:var(--muted);
}

.copyright:hover {
  color:var(--purple);
  text-decoration:underline dotted;
  text-underline-offset:4px;
}

.dedication-dialog {
  width:520px;
}

.dedication-dialog p {
  line-height:1.65;
}

.dedication-dialog .dedication-signature {
  margin-top:18px;
  color:var(--purple-dark);
  font-weight:700;
}

.site-footer nav {
  display:flex;
  gap:36px;
  margin-left:auto;
  font-size:15px;
}

dialog {
  border:1px solid var(--border);
  border-radius:24px;
  padding:28px;
  color:var(--plum);
  background:var(--paper);
  box-shadow:0 20px 80px #30112e40;
  max-height:90dvh;
  max-width:calc(100% - 32px);
  overscroll-behavior:contain;
}

dialog::backdrop {
  background:#26132a99;
  backdrop-filter:blur(4px);
}

body:has(dialog[open]) {
  overflow:hidden;
}

.dialog-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}

.dialog-head h2 {
  font-size:30px;
}

.dialog-close {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:8px 12px;
  border:1px solid #d8c8e1;
  border-radius:12px;
  background:#fff;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}

.profile-dialog {
  width:510px;
}

.profile-dialog>p {
  color:var(--muted);
  line-height:1.5;
}

.profile-list {
  display:grid;
  gap:9px;
  margin-block:20px;
}

.profile-option {
  display:flex;
  align-items:center;
  text-align:left;
  gap:13px;
  width:100%;
  border:1px solid var(--border);
  border-radius:15px;
  background:#fff;
  padding:10px 14px;
}

.profile-option[aria-pressed="true"] {
  background:var(--lavender);
  border-color:#b280cf;
}

.profile-option:hover {
  border-color:var(--purple);
}

.profile-option .profile-details {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.profile-option strong {
  font-size:18px;
}

.profile-option small {
  font-size:13px;
  color:var(--muted);
}

.profile-empty {
  font-size:14px;
  margin-bottom:20px;
}

#profile-form {
  border-top:1px solid var(--border);
  padding-top:20px;
  display:grid;
  gap:8px;
}

#profile-form h3 {
  font-size:23px;
  margin-bottom:5px;
}

#profile-form label {
  font-weight:700;
  font-size:14px;
  margin-top:6px;
}

input:disabled,select:disabled,button:disabled {
  opacity:.55;
  cursor:not-allowed;
}

input,select {
  width:100%;
  min-height:46px;
  border:1px solid #bfb0c4;
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  color:var(--plum);
}

.form-error {
  font-size:14px;
  line-height:1.4;
  color:#a02540;
  min-height:20px;
  margin-top:5px;
}

#profile-form .button {
  font-size:18px;
  border-radius:13px;
}

.preview-dialog {
  width:620px;
  padding-bottom:15px;
}

.preview-dialog>.dialog-head {
  position:sticky;
  top:-28px;
  background:var(--paper);
  padding-block:12px;
  margin-top:-12px;
  z-index:1;
}

.preview-note {
  font-size:14px;
  color:var(--muted);
  margin-bottom:15px;
}

.preview-dialog>img {
  width:100%;
  border-radius:15px;
}

[hidden] {
  display:none!important;
}

@media(min-width:1200px) {
  .hero h1 {
    font-size:clamp(68px,5vw,74px);
  }
  .hero-description {
    font-size:24px;
    max-width:490px;
  }
}

@media(min-width:1600px) {
  .hero {
    min-height:600px;
  }
}

@media(max-width:1150px) {
  .site-header {
    gap:20px;
    min-height:110px;
  }
  .site-header .brand {
    width:245px;
  }
  .site-header nav {
    gap:22px;
    padding-inline:22px;
    font-size:15px;
  }
  .player-button {
    max-width:190px;
  }
  .hero {
    min-height:495px;
  }
  .eyebrow {
    font-size:23px;
  }
  .hero-description {
    font-size:19px;
  }
  .hero-actions {
    gap:20px;
  }
  .hero-actions .button {
    font-size:19px;
    padding:15px 20px;
  }
  .card-body {
    padding:14px 15px 18px;
  }
  .card-body h3 {
    font-size:23px;
  }
  .card-body p {
    font-size:15px;
  }
  .parents-inner {
    gap:20px;
  }
  .parents-copy .parents-claim {
    font-size:20px;
  }

}

@media(max-width:900px) {
  .wrap {
    width:calc(100% - 40px);
  }
  .site-header {
    flex-wrap:wrap;
    gap:4px 20px;
    padding-top:14px;
    padding-bottom:12px;
  }
  .site-header .brand {
    width:245px;
  }
  .player-button {
    margin-left:auto;
  }
  .site-header nav {
    order:3;
    width:100%;
    justify-content:center;
    border:0;
    padding:0;
    margin:4px 0 0;
    gap:36px;
  }
  .hero {
    grid-template-columns:47% 53%;
    min-height:440px;
  }
  .hero-copy {
    padding-left:0;
  }
  .hero h1 {
    font-size:44px;
  }
  .eyebrow {
    font-size:20px;
    margin-bottom:17px;
  }
  .hero-description {
    font-size:17px;
    margin-top:18px;
  }
  .hero-art {
    width:calc(100% + 20px);
    margin-left:-20px;
  }
  .hero-actions {
    flex-wrap:wrap;
    gap:18px;
    margin-top:24px;
  }
  .hero-actions .button {
    font-size:18px;
  }
  .game-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
  .card-body h3 {
    font-size:28px;
  }
  .card-body p {
    font-size:17px;
  }
  .game-card-wide .card-body {
    padding-inline:24px;
  }
  .games-section h2 {
    margin-bottom:32px;
  }
  .discovery {
    font-size:29px;
  }
  .encouragement {
    min-height:132px;
    margin-top:50px;
    padding:24px 24px 24px 245px;
    gap:15px;
  }
  .encouragement-art {
    width:250px;
  }
  .encouragement p {
    font-size:30px;
  }
  .story-content {
    grid-template-columns:1fr;
    gap:16px;
  }
  .story-content p {
    max-width:650px;
    font-size:18px;
  }
  .story-content img {
    max-width:760px;
  }
  .parents-inner {
    grid-template-columns:28% 1fr;
    gap:8px 15px;
  }
  .parents-copy {
    padding-left:20px;
  }
  .parents-copy h2 {
    font-size:32px;
  }

  .site-footer .brand {
    width:190px;
  }
  .site-footer {
    gap:15px;
  }
  .site-footer nav {
    gap:22px;
  }
}

@media(max-width:560px) {
  html {
    scroll-padding-top:15px;
  }
  .wrap {
    width:calc(100% - 32px);
  }
  .site-header {
    gap:3px 8px;
    padding-top:7px;
  }
  .site-header .brand {
    width:190px;
  }
  .player-button {
    font-size:13px;
    gap:5px;
    max-width:140px;
    min-height:40px;
    padding:3px 9px 3px 3px;
  }
  .player-button .player-avatar {
    width:34px;
    height:34px;
  }
  .player-chevron {
    display:none;
  }
  .site-header nav {
    font-size:14px;
    gap:27px;
    margin-top:6px;
  }
  .site-header nav a {
    padding-block:9px;
  }
  .hero {
    display:flex;
    flex-direction:column;
    min-height:0;
    padding-bottom:12px;
  }
  .hero-copy {
    align-self:stretch;
    padding:27px 5px 0;
  }
  .eyebrow {
    font-size:21px;
    margin-bottom:16px;
  }
  .hero h1 {
    font-size:clamp(38px,10.8vw,58px);
    line-height:1.05;
  }
  .hero-description {
    font-size:18px;
    max-width:390px;
    margin-top:19px;
  }
  .hero-actions {
    flex-wrap:nowrap;
    gap:22px;
    margin-top:24px;
  }
  .hero-actions .button {
    font-size:18px;
    padding:14px 20px;
    border-radius:15px;
  }
  .hero-actions .text-link {
    font-size:15px;
  }
  .hero-art {
    width:100%;
    margin:17px 0 0;
    max-width:470px;
  }
  .games-section {
    padding-top:10px;
  }
  .discovery {
    font-size:25px;
    line-height:1.2;
    margin:5px 8px 26px;
  }
  .games-section h2 {
    font-size:33px;
    line-height:1.35;
    margin:0 4px 27px;
  }
  .games-section h2 span {
    padding:10px 16px;
    border-radius:30px 36px 32px 34px;
  }
  .game-grid {
    grid-template-columns:1fr;
    gap:21px;
  }
  .game-card-wide {
    grid-column:auto;
  }
  .game-card {
    border-radius:20px;
  }
  .game-card-wide .card-art>img {
    aspect-ratio:3/1;
  }
  .card-body,.game-card-wide .card-body {
    padding:17px 21px 21px;
  }
  .card-body h3,.game-card-wide h3 {
    font-size:28px;
  }
  .card-body p {
    font-size:17px;
    margin-bottom:21px;
  }
  .card-action {
    font-size:20px;
    padding:9px 37px;
    min-width:160px;
  }
  .tip {
    font-size:16px;
  }
  .encouragement {
    margin-block:32px 28px;
    padding:20px 14px 20px 145px;
    border-radius:28px 14px 25px 15px;
    gap:10px;
  }
  .encouragement p {
    font-size:26px;
    line-height:1.15;
  }
  .encouragement-art {
    width:155px;
    left:-8px;
    bottom:3px;
  }
  .story {
    padding:7px 3px 25px;
  }
  .story h2 {
    font-size:34px;
    line-height:1.1;
  }
  .story-motto {
    font-size:23px;
    margin-top:12px;
  }
  .story-content p {
    font-size:17px;
  }
  .story-content img {
    width:100%;
    margin-block:5px;
  }
  .parents {
    border-radius:35px 35px 0 0;
  }
  .parents-inner {
    grid-template-columns:1fr;
    position:relative;
    padding-top:20px;
  }
  .blahoslav {
    width:180px;
    justify-self:center;
    order:2;
  }
  .parents-copy {
    border:0;
    padding:7px 5px 10px;
  }
  .parents-copy h2 {
    font-size:33px;
  }
  .parents-copy p {
    font-size:16px;
  }
  .parents-copy .parents-claim {
    font-size:21px;
    margin-top:13px;
  }
  .parents-copy .interpretation {
    font-size:12px;
  }

  .site-footer {
    flex-wrap:wrap;
    justify-content:center;
    padding-block:17px;
    gap:8px 18px;
  }
  .site-footer .brand {
    width:190px;
  }
  .copyright {
    font-size:11px;
  }
  .site-footer nav {
    width:100%;
    margin:0;
    justify-content:center;
    font-size:14px;
  }
  .dialog-head {
    gap:10px;
  }
  .dialog-head h2 {
    font-size:25px;
  }
  dialog {
    padding:20px;
    border-radius:20px;
  }
  .preview-dialog>.dialog-head {
    top:-20px;
  }
  .dialog-close {
    font-size:12px;
    padding:7px 9px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  .game-card {
    transition:none;
  }
  .game-card:hover {
    transform:none;
  }
}

/* Small preview card for the upcoming Rozmluvka app. */
.speech-card {
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  gap:16px 20px;
  max-width:700px;
  margin-block:8px 36px;
  padding:24px 28px;
  border:1px solid #426b58;
  border-radius:28px;
  background:linear-gradient(125deg,#2c4b3e,#20352e 80%);
  box-shadow:inset 0 1px 0 #ffffff12,0 8px 24px #20352e18;
  color:#fff9e9;
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:border-color .2s,box-shadow .2s;
}
.speech-card:hover {border-color:#a7d4c1;box-shadow:inset 0 1px 0 #ffffff12,0 10px 28px #20352e25;}
.speech-card-art {display:flex;align-items:center;justify-content:center;}
.speech-card-art img {display:block;width:72px;height:72px;object-fit:contain;filter:grayscale(1) invert(1) sepia(.25) brightness(1.18);}
.speech-card-copy {display:contents;}
.speech-card-heading {display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-width:0;}
.speech-card-status {margin-inline-start:auto;font-size:11px;line-height:1.4;font-weight:800;letter-spacing:.03em;color:#c4e4d3;border:1px solid #8cbba266;background:#ffffff08;padding:4px 10px;border-radius:20px;}
.speech-card-copy strong {font-family:Nunito,sans-serif;font-size:32px;line-height:1.15;font-weight:1000;letter-spacing:-.03em;color:#fff9e9;}
.speech-card-description {grid-column:1/-1;font-size:15px;line-height:1.55;color:#d6e3d9;}
.speech-card .button {grid-column:1/-1;justify-self:center;margin-top:2px;font-size:15px;padding:11px 22px;min-height:44px;background:#b8dfca;color:#20352e;border:1px solid #d2ebdd;border-radius:17px;box-shadow:inset 0 1px 0 #ffffff60;}
.speech-card:hover .button {background:#d0ebdc;}
@media(max-width:600px) {
  .speech-card {grid-template-columns:58px minmax(0,1fr);gap:14px;padding:20px;border-radius:24px;margin-block:4px 28px;}
  .speech-card-art img {width:58px;height:58px;}
  .speech-card-heading {gap:5px;}
  .speech-card-copy strong {font-size:28px;}
  .speech-card-status {font-size:10px;padding:3px 8px;}
  .speech-card-description {font-size:14px;}
}

.story-more {display:inline-block;margin-top:18px;}
.parents-more {display:flex;width:fit-content;margin:18px auto 0;font-size:16px;padding:12px 20px;}

/* Four shared destinations stay readable beside the logo and player control. */
body .site-header.site-nav-expanded nav {gap:24px;padding-inline:24px;font-size:15px;}
.site-header.site-nav-expanded {gap:24px;}
.site-footer nav {flex-wrap:wrap;}
@media(max-width:1150px) {
  body .site-header.site-nav-expanded nav {gap:20px;padding-inline:18px;font-size:14px;}
  .site-header.site-nav-expanded {gap:18px;}
}
@media(max-width:1100px) {
  .site-header.site-nav-expanded {flex-wrap:wrap;padding-top:14px;padding-bottom:12px;gap:4px 18px;}
  body .site-header.site-nav-expanded nav {order:3;width:100%;justify-content:center;border:0;padding:0 8px;margin:4px 0 0;gap:44px;}
  .site-header.site-nav-expanded>.button,.site-header.site-nav-expanded>.player-button {margin-left:auto;}
}
@media(max-width:600px) {
  body .site-header.site-nav-expanded nav {display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;column-gap:40px;row-gap:0;font-size:13px;margin-top:5px;}
  body .site-header.site-nav-expanded nav a {padding-block:7px;}
  .site-header.site-nav-expanded {gap:3px 8px;padding-top:7px;}
}

/* The homepage keeps a single, calm header row on phones. */
.home-nav-toggle {position:relative;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid #dcc8e9;border-radius:14px;background:var(--lavender);color:var(--purple-dark);}
.home-nav-toggle[hidden],.site-header.mobile-nav-home nav[hidden] {display:none;}
.home-nav-toggle:hover {background:#e5d2f6;}
.home-nav-toggle span {position:absolute;left:11px;top:20px;width:20px;height:2px;border-radius:2px;background:currentColor;}
.home-nav-toggle span:first-child {transform:translateY(-6px);}
.home-nav-toggle span:last-child {transform:translateY(6px);}
.home-nav-toggle[aria-expanded="true"] span:first-child {transform:rotate(45deg);}
.home-nav-toggle[aria-expanded="true"] span:nth-child(2) {opacity:0;}
.home-nav-toggle[aria-expanded="true"] span:last-child {transform:rotate(-45deg);}
@media(max-width:600px) {
  .site-header.mobile-nav-home.mobile-nav-ready {position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;align-items:center;gap:8px;min-height:84px;padding-block:7px 9px;}
  .mobile-nav-ready .home-nav-toggle {grid-column:3;grid-row:1;}
  .site-header.mobile-nav-home.mobile-nav-ready .brand {grid-column:1;grid-row:1;justify-self:start;width:min(210px,100%);}
  .site-header.mobile-nav-home.mobile-nav-ready>.player-button {grid-column:2;grid-row:1;justify-self:end;display:grid;place-items:center;width:44px;min-height:44px;max-width:44px;margin:0;padding:0;border-radius:50%;}
  .mobile-nav-home.mobile-nav-ready .player-button .player-avatar {width:40px;height:40px;}
  .mobile-nav-home.mobile-nav-ready [data-player-name],.mobile-nav-home.mobile-nav-ready .player-chevron {display:none;}
  body .site-header.site-nav-expanded.mobile-nav-ready nav {position:absolute;top:100%;left:0;display:grid;grid-template-columns:1fr;gap:2px;width:100%;margin:0;padding:8px;border:1px solid #e2d5e9;border-radius:20px;background:var(--paper);box-shadow:0 12px 30px #310f2f18;font-size:15px;}
  body .site-header.site-nav-expanded.mobile-nav-ready nav[hidden] {display:none;}
  body .site-header.site-nav-expanded.mobile-nav-ready nav a {display:flex;align-items:center;min-height:48px;padding:10px 16px;border-radius:12px;}
  body .site-header.site-nav-expanded.mobile-nav-ready nav a:hover,body .site-header.site-nav-expanded.mobile-nav-ready nav a:focus-visible {background:var(--lavender);color:var(--purple-dark);text-decoration:none;}
}

/* One shared compact footer for the homepage and its information pages. */
.site-footer.site-footer-refined {--footer-logo-width:210px;--footer-wordmark-inset:59.3px;display:block;margin-block:24px 18px;padding:20px 28px 12px;border:1px solid #e2d5e9;border-radius:23px;background:linear-gradient(115deg,#f5eef8,#faf7f1);box-shadow:0 6px 24px #310f2f04;}
.site-footer-refined .footer-main {position:relative;padding-bottom:14px;}
.site-footer.site-footer-refined .brand {display:block;width:var(--footer-logo-width);max-width:100%;}
.site-footer-refined .footer-dedication {position:relative;margin:6px 0 0;padding-left:var(--footer-wordmark-inset);font:900 16px/1.4 'Nunito',sans-serif;}
.site-footer-refined .footer-dedication>span {position:absolute;left:calc(var(--footer-wordmark-inset) - 22px);color:var(--purple);font-size:17px;}
.site-footer-refined .footer-invitation {padding-left:var(--footer-wordmark-inset);font-size:13px;color:var(--muted);line-height:1.55;margin-top:2px;}
.site-footer.site-footer-refined .footer-links {position:absolute;right:0;top:14px;display:flex;gap:0;margin:0;width:auto;font-size:14px;}
.site-footer-refined .footer-links a {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 15px;border:1px solid #d9c5e5;border-radius:12px;background:#fff;color:var(--purple-dark);text-decoration:none;}
.site-footer-refined .footer-links a::before {content:'✉';font-size:17px;line-height:1;}
.site-footer-refined .footer-links a:hover {border-color:var(--purple);background:var(--lavender);color:var(--purple-dark);}
.site-footer-refined .footer-bottom {display:flex;align-items:center;justify-content:space-between;gap:8px 24px;border-top:1px solid #e3d9e8;padding-top:7px;}
.site-footer-refined .copyright {min-height:30px;padding:4px 0;font-size:11px;line-height:1.5;}
.site-footer-refined .footer-credit {font-size:11px;line-height:1.5;color:var(--muted);}
.site-footer-refined .footer-credit strong {color:var(--plum);font-weight:700;white-space:nowrap;}
@media(max-width:700px) {
  .site-footer.site-footer-refined {--footer-logo-width:200px;--footer-wordmark-inset:56.4px;padding:19px 22px 12px;border-radius:21px;margin-block:22px 16px;}
  .site-footer-refined .footer-links a {padding-inline:12px;font-size:13px;}
}
@media(max-width:500px) {
  .site-footer-refined .footer-bottom {align-items:flex-start;flex-direction:column;gap:0;}
  .site-footer-refined .copyright {min-height:25px;}
}
@media(max-width:380px) {
  .site-footer.site-footer-refined {--footer-logo-width:190px;--footer-wordmark-inset:53.6px;}
  .site-footer.site-footer-refined .footer-links {position:static;margin-top:12px;margin-left:var(--footer-wordmark-inset);}
}

/* Keep selection and removal separate touch targets. */
.home-profile-choice {display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:stretch;gap:6px;}
.home-profile-choice .profile-option {width:100%;min-width:0;}
.home-profile-delete {width:44px;min-height:44px;padding:0;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--muted);font-size:26px;line-height:1;}
.home-profile-delete:hover {background:#fff0eb;color:#a93c35;border-color:#dcaea7;}
.profile-deletion-status:empty {display:none;}
.profile-deletion-status {font-size:14px;line-height:1.55;color:var(--muted);}


/* The site identity and navigation stay available while reading and browsing. */
.site-header.site-nav-expanded,
.site-header.mobile-nav-home.mobile-nav-ready {
  position:sticky;
  top:0;
  z-index:30;
  background:#fcfaf6f5;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.site-header.site-nav-expanded {min-height:112px;}
@media(max-width:1150px) {
  .site-header.site-nav-expanded {min-height:96px;}
}
@media(max-width:1100px) {
  .site-header.site-nav-expanded {min-height:0;padding-bottom:2px;}
}
@media(max-width:600px) {
  .site-header.mobile-nav-home.mobile-nav-ready {min-height:74px;padding-bottom:2px;}
}
html {scroll-padding-top:150px;}
@media(min-width:1101px) {html {scroll-padding-top:136px;}}
@media(max-width:600px) {html {scroll-padding-top:96px;}}
.attempt-sync-status {margin:12px 0 0;color:var(--muted,#59485a);font-size:.85rem;line-height:1.5;}

/* Parent-only backup tools use the same compact controls across every game. */
.profile-key-tools{margin-block:1rem;padding:1rem;border:1px solid #e4d9ea;border-radius:18px;background:#fbf8fd;color:#39243c;text-align:left;font-size:1rem}
.profile-key-tools summary{min-height:44px;display:list-item;align-content:center;cursor:pointer;font-weight:800;color:#791aac}
.profile-key-tools p{font-size:.95rem;line-height:1.5}
.profile-key-actions,.profile-key-row{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center;margin-block:.75rem}
.profile-key-tools button,.profile-key-tools select{min-height:44px;border:1px solid #cdb4df;border-radius:12px;padding:.55rem .9rem;background:#fff;color:#571b6b;font:inherit;cursor:pointer}
.profile-key-tools button:disabled{opacity:.6;cursor:wait}
.profile-key-row label{display:flex;align-items:center;gap:.6rem;flex:1;min-height:44px;font-weight:700}
.profile-key-row input{width:22px;height:22px;accent-color:#8c21bc}
.profile-key-status:empty{display:none}
.profile-key-tools :focus-visible{outline:3px solid #8c21bc;outline-offset:3px}
@media(max-width:480px){.profile-key-actions>*{flex:1}.profile-key-row select{max-width:100%}}