/* Game Link: lightweight glass surfaces and fluid layouts. */
.info-preferences { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
#gamelink-sound-toggle { min-height: 40px; font-size: 13px; padding: 8px 12px; border: 1px solid var(--glass-border); background: var(--glass-bg); white-space: nowrap; }
#info-modal .website-header { gap: 10px; }
#info-modal .website-close-btn { flex-shrink: 0; }
:root {
  --main-text-color: #15364b;
  --sub-text-color: #476375;
  --glass-bg: rgba(255,255,255,.48);
  --glass-border: rgba(255,255,255,.8);
  --glass-shadow: 0 12px 36px rgba(32,78,106,.12);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.24);
  --input-bg: rgba(255,255,255,.38);
  --input-focus: rgba(255,255,255,.76);
  --square-bg: rgba(255,255,255,.38);
  --square-filled-bg: rgba(255,255,255,.84);
  --square-filled-text: #12658c;
  --highlight-bg: rgba(255,255,255,.78);
  --modal-bg: rgba(244,250,255,.95);
  --ease-glass: cubic-bezier(.22,1,.36,1);
}
html.dark {
  --main-text-color: #ecf6ff;
  --sub-text-color: #b0c6d8;
  --glass-bg: rgba(33,55,78,.65);
  --glass-border: rgba(206,233,255,.22);
  --glass-shadow: 0 12px 36px rgba(0,10,24,.24);
  --glass-highlight: inset 0 1px 0 rgba(221,240,255,.28), inset 0 -1px 0 rgba(255,255,255,.06);
  --input-bg: rgba(18,37,57,.55);
  --input-focus: rgba(48,72,94,.9);
  --square-bg: rgba(55,80,103,.65);
  --square-filled-bg: rgba(66,102,132,.92);
  --square-filled-text: #e2f5ff;
  --highlight-bg: rgba(110,152,185,.28);
  --modal-bg: rgba(22,39,57,.97);
}
body {
  min-height: 100vh;
  min-height: 100svh;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  gap: 24px;
}
button, a, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #258ab7; outline-offset: 4px; }
.inputSquare,.button-29,.menu-btn,.ios-toolbar,.footer-container,.menu-dropdown {
  background: linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,0)), var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow),var(--glass-highlight);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}
#input-div { width: min(100%,720px); margin-block: auto; padding-block: 88px 40px; }
#b-container { margin: 0 !important; width: 100%; gap: 22px; }
#b-container label { font-size: 14px; letter-spacing: .18em; color: var(--sub-text-color); }
#b-container #input-text { width: 70%; }
#input-text { width: 100%; height: 72px; margin: 0; padding: 16px 24px; font-size: clamp(18px,2.3vw,24px); border-radius: 26px; }
.inputSquare { transition: background-color .2s ease, transform .25s var(--ease-glass); }
.inputSquare:focus { transform: none; }
.button-29 { min-height: 52px; padding: 14px 30px; font-size: 17px; border-radius: 20px; transition: transform .25s var(--ease-glass),background-color .2s ease; }
.button-29:active,.menu-btn:active,.ios-btn:active,.social-btn:active { transform: scale(.96); }
.info-menu-container { top: max(20px,env(safe-area-inset-top)); left: max(16px,env(safe-area-inset-left)); }
.google-menu-container { top: max(20px,env(safe-area-inset-top)); right: max(16px,env(safe-area-inset-right)); }
.menu-btn { width: 48px; height: 48px; transition: transform .25s var(--ease-glass); }
#google-menu-btn svg { fill: var(--main-text-color); }
.wordSize { margin: clamp(88px, 16svh, 180px) 0 0; text-align: center; font-size: clamp(20px,3vw,32px); line-height: 1.3; letter-spacing: -.03em; text-shadow: none; }
.wordSize:empty { display: none; }
#square-container { width: min(70vw,1080px); max-width: 100%; gap: clamp(8px,1.4vw,16px); margin: 0 auto; }
@media(max-width:767px) { #square-container { width: 100%; } }
#square-container:empty { display: none; }
.square { width: clamp(44px,7vw,84px); height: clamp(52px,8vw,96px); margin: 0; border-radius: 18px; font-size: clamp(25px,4vw,48px) !important; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--glass-highlight),0 6px 16px rgba(32,78,106,.06); }
.square:not(:empty) { text-shadow: none; box-shadow: var(--glass-highlight),0 8px 22px rgba(32,78,106,.12); animation: glass-reveal .28s var(--ease-glass) both; }
@keyframes glass-reveal { from { opacity: .4; transform: translateY(5px) scale(.94); } to { opacity: 1; transform: none; } }
.ios-toolbar { flex-wrap: wrap; justify-content: center; width: fit-content; max-width: 100%; margin: 4px 0 32px; padding: 6px; gap: 4px; border-radius: 26px; overflow: visible; }
.ios-btn { min-height: 48px; padding: 12px 20px; font-size: 15px; border-radius: 20px; transition: transform .2s var(--ease-glass),opacity .2s ease; }
#wrong-button { min-width: 64px; }
.ios-highlight { top: 0; left: 0; bottom: auto; border-radius: 20px; transition: transform .3s var(--ease-glass),width .3s var(--ease-glass),height .3s var(--ease-glass),opacity .15s ease; }
.footer-container { width: min(100%,600px); flex-shrink: 0; margin-bottom: 0; padding: 10px 14px; gap: 10px; }
.social-btn { width: 44px; height: 44px; flex: 0 0 44px; }
.footer-title { font-size: 13px; letter-spacing: 0; }
/* A quiet aurora behind the youth-group signature, not across its text. */
.footer-container { position: relative; isolation: isolate; overflow: hidden; border-color: rgba(100,145,215,.45); }
.footer-container::before {
  content: ''; position: absolute; inset: -55% -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 15% 45%,rgba(62,181,224,.32),transparent 45%),
              radial-gradient(ellipse at 65% 65%,rgba(167,112,229,.25),transparent 45%),
              radial-gradient(ellipse at 90% 35%,rgba(247,179,106,.28),transparent 40%);
  animation: youth-aurora 12s ease-in-out infinite alternate;
}
.footer-container .footer-title { color: #233e67; }
.dark .footer-container .footer-title { color: #edf0ff; }
.footer-container .social-btn:first-child { color: #2563b9; background: rgba(110,177,255,.16); }
.footer-container .social-btn:last-child { color: #a4417d; background: rgba(220,136,190,.16); }
.dark .footer-container .social-btn:first-child { color: #a4d2ff; }
.dark .footer-container .social-btn:last-child { color: #ffc0e3; }
@keyframes youth-aurora {
  from { transform: translate3d(-4%,0,0) scale(1); opacity: .7; }
  to { transform: translate3d(4%,3%,0) scale(1.08); opacity: 1; }
}
@media(prefers-reduced-motion:reduce) { .footer-container::before { animation: none; } }
.footer-subtitle { font-size: 10px; letter-spacing: .06em; }
.menu-dropdown { max-width: calc(100vw - 32px); }
.modal-overlay { padding: max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); }
.info-modal-content,.website-modal-content { width: min(100%,760px); max-width: 100%; max-height: calc(100dvh - 32px); border-radius: 28px; background: var(--modal-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.website-modal-content { height: calc(100dvh - 32px); }
.website-header { flex-shrink: 0; padding: 16px 20px; gap: 12px; }
.website-close-btn { width: 44px; height: 44px; flex-shrink: 0; }
.info-body { font-size: 16px; padding: 20px; overscroll-behavior: contain; }
.info-body h4 { font-size: 19px; }
.lang-btn { font-size: 14px; min-height: 40px; }
.mock-btn { font-size: 14px; }
#show-answer-parent { padding: 28px; background: var(--modal-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow-y: auto; }
#show-answer { font-size: clamp(32px,8vw,100px) !important; line-height: 1.2; letter-spacing: -.03em; text-shadow: none; overflow-wrap: anywhere; max-height: 70dvh; overflow-y: auto; }
#show-answer-parent [data-i18n="tapToClose"] { font-size: 15px !important; bottom: max(24px,env(safe-area-inset-bottom)) !important; }
@media(max-width:600px) {
  body { gap: 20px; }
  #input-text { height: 64px; padding-inline: 16px; border-radius: 22px; }
  .square { width: calc((100vw - 72px)/6); height: calc((100vw - 72px)/6 + 8px); border-radius: 13px; font-size: clamp(22px,6vw,34px) !important; }
  .ios-toolbar { width: min(100%,420px); }
  .ios-btn { flex: 0 0 calc((100% - 8px)/3); min-width: 0 !important; padding: 12px 6px; font-size: 14px; }
  .footer-container { padding: 8px; border-radius: 26px; gap: 6px; }
  .footer-title { font-size: 11px; }
  .footer-subtitle { font-size: 9px; }
  .info-body { padding: 16px; }
}
@media(max-width:768px), (pointer:coarse) {
  .inputSquare,.button-29,.menu-btn,.ios-toolbar,.footer-container,.menu-dropdown {
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
  }
  #show-answer-parent {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-old(root),::view-transition-new(root) { animation: none !important; }
}
@supports not (backdrop-filter:blur(1px)) {
  .inputSquare,.button-29,.menu-btn,.ios-toolbar,.footer-container,.menu-dropdown { background: var(--modal-bg); }
}

/* Shared press, release and presentation timing. */
button,.social-btn,.menu-item {
  transition: transform 280ms var(--ease-glass), background-color 180ms ease, opacity 180ms ease;
}
button:active:not(:disabled),.social-btn:active,.menu-item:active {
  transform: scale(.96);
  transition-duration: 90ms;
}
.menu-btn:hover,.social-btn:hover,.button-29:hover,.menu-item:hover { transform: none; }
.menu-dropdown,.modal-overlay,.info-modal-content,.website-modal-content,#show-answer-parent,#show-answer {
  transition: none;
  animation: none !important;
  transform-origin: center;
}
.menu-dropdown.active,.modal-overlay.unhidden .info-modal-content,.modal-overlay.unhidden .website-modal-content,#show-answer-parent.unhidden #show-answer {
  transform: none;
  animation: none;
}
.ios-highlight { transition-duration: 320ms; transition-timing-function: var(--ease-glass); }
.square:not(:empty) { animation-duration: 320ms; }
@media(prefers-reduced-motion:reduce) {
  button,.social-btn,.menu-item,.ios-highlight { transition: none !important; }
}