/* Shared image skin for native, custom and dynamically created controls. */
:root {
  --button-frame: url('../images/ui/petal-frame.webp');
  --button-ink: #fff7f5;
  --button-edge: #f5c4d252;
  --button-surface: linear-gradient(110deg, #35212d66, #38273740);
}
/* Nine-slice painting preserves the corners on icons, tabs and wide choices.
   Keep this independent of background/::after: legacy inline surfaces, icons
   and language arrows must not hide the frame or replace each other. */
body :is(button, input[type='button'], input[type='submit'], input[type='reset'], [role='button'], .start-btn, .contact-link, .contact-option, .archerlab-link, .back-btn, .lang-combo-selected, .lang-combo-option) {
  border-style: solid !important;
  border-width: 1px !important;
  border-image-source: var(--button-frame) !important;
  border-image-slice: 64 112 !important;
  border-image-width: 10px 16px !important;
  border-image-repeat: stretch !important;
  border-image-outset: 0 !important;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body :is(button, input[type='button'], input[type='submit'], input[type='reset'], [role='button'], .contact-link, .contact-option, .archerlab-link, .back-btn, .lang-combo-selected, .lang-combo-option):focus-visible {
  outline: 2px solid #ffe0ec;
  outline-offset: 3px;
}
:is(.start-btn, .modal-btn, .cu-btn-accent, .cu-btn-soft, #name-confirm-btn, .freetalk-btn, .contact-link, .lang-btn, .lang-combo-selected, .archerlab-link, .tab-btn, .back-btn, #chat-skip-btn, #upload-image-btn, #action-toggle-btn, #gallery-btn, #home-btn, #settings-btn, .gft-close-btn, #chat-send, .choice-btn) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  color: var(--button-ink);
  border-color: var(--button-edge);
  border-radius: 4px;
  background: var(--button-surface);
  box-shadow: none;
  text-shadow: 0 1px 3px #20101fed, 0 0 8px #20101f99;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 160ms ease, border-color 160ms ease, filter 160ms ease;
}
:is(.start-btn, .modal-btn.confirm, .cu-btn-accent, #name-confirm-btn, .freetalk-btn:not(.locked), #chat-send) {
  position: relative;
  border-color: transparent;
  background: linear-gradient(110deg, #a64d6a80, #66384c59);
  font-weight: 600;
}
#continue-btn { background: var(--button-surface); font-weight: 500; }
.start-btn {
  width: clamp(148px, 17vw, 184px);
  max-width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.35;
  font-size: clamp(.78rem, 1.5vmin, .94rem);
  letter-spacing: .06em;
  text-transform: none;
}
.start-btn:hover { letter-spacing: .06em; }
:is(.contact-link, .lang-btn, .lang-combo-selected, .archerlab-link, .back-btn, .modal-btn, .tab-btn, #chat-skip-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  line-height: 1.3;
}
:is(#landing-settings-btn, #gallery-btn, #home-btn, #settings-btn, #chat-send, #upload-image-btn, #action-toggle-btn, .gft-close-btn) { min-width: 44px; min-height: 44px; }
#chat-send svg { fill: currentColor; }
:is(.tab-btn.active, #action-toggle-btn.active) { background: #a64d6a80; border-color: #f6c4d2b3; }
:is(.start-btn, .modal-btn, .cu-btn-accent, .cu-btn-soft, #name-confirm-btn, .freetalk-btn, .contact-link, .lang-btn, .lang-combo-selected, .archerlab-link, .tab-btn, .back-btn, #chat-skip-btn, #upload-image-btn, #action-toggle-btn, #gallery-btn, #home-btn, #settings-btn, .gft-close-btn, #chat-send, .choice-btn):focus-visible { outline: 2px solid #ffe0ec; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  :is(.start-btn, .modal-btn, .contact-link, .lang-btn, .lang-combo-selected, .archerlab-link, .tab-btn, .back-btn, .choice-btn):not(:disabled):not([aria-disabled='true']):hover {
    background-color: #b9668338;
    border-color: #ffdfeba6;
    filter: brightness(1.08);
  }
}
:is(.start-btn, .modal-btn, .contact-link, .tab-btn, .choice-btn):not(:disabled):active { filter: brightness(.9); }
:is(.start-btn, .freetalk-btn, .tab-btn):is(:disabled, [aria-disabled='true']) { filter: saturate(.25); cursor: not-allowed; }
.choice-btn {
  min-height: 44px;
  padding: 10px 20px;
  background: linear-gradient(110deg, #36212c99, #291e328c);
  border-color: #ecc0d278;
  color: #fff7fa;
  line-height: 1.45;
}
/* A single compact row gives the cast the height of the old second row. */
#landing-container { height: 100svh; height: 100dvh; }
#landing-container::before { background: linear-gradient(180deg, #21131f26, transparent 45%, #1e14252b); }
@media (orientation: landscape) and (min-height: 561px) {
  #landing-container { justify-content: flex-start; padding-top: max(76px, calc(env(safe-area-inset-top) + 64px)); box-sizing: border-box; }
  .lang-switch .archerlab-link { left: max(16px, env(safe-area-inset-left)); transform: none; }
}
#landing-container .title-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  margin-inline: auto;
}
#landing-container .footer .contact-links { gap: 8px; width: min(100%, 330px); max-width: 330px; justify-content: center; }
#landing-container .footer .contact-link {
  flex: 1 1 0;
  min-width: 0;
  max-width: 110px;
  min-height: 44px;
  padding: 6px 12px;
  font-size: .75rem;
  letter-spacing: 0;
  background: #291c3038;
  border-color: #f6dce638;
}
.lang-switch :is(.archerlab-link, .lang-btn, .lang-combo-selected) { background: #2b1c3033; border-color: #f6dce633; box-shadow: none; }
.lang-combo-option { min-height: 44px; box-sizing: border-box; }
.lang-combo-dropdown { max-height: calc(100dvh - 76px - env(safe-area-inset-bottom)); overflow-y: auto; }
.modal-overlay { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); box-sizing: border-box; }
.modal-container { max-height: 100%; overflow-y: auto; box-sizing: border-box; }
#settingsModal .modal-container { display: flex; flex-direction: column; overflow: hidden; }
#settingsModal .modal-title { flex-shrink: 0; }
#settingsModal :is(.contact-options, .settings-options) { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#settingsModal .modal-container > button { flex-shrink: 0; align-self: center; }
.unlock-popup-overlay {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  box-sizing: border-box;
}
.unlock-popup-content { display: flex; flex-direction: column; max-height: 100%; overflow: hidden; box-sizing: border-box; }
.unlock-popup-message { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.unlock-popup-icon, .unlock-popup-title, .unlock-popup-btn { flex-shrink: 0; }
.unlock-popup-btn { align-self: center; }
@media (max-height: 560px) {
  .unlock-popup-content { padding: 16px 20px; }
  .unlock-popup-icon { font-size: 2rem; margin-bottom: 8px; }
  .unlock-popup-title { margin: 0 0 8px; }
}
@media (orientation: portrait) {
  #landing-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    padding: max(68px, calc(env(safe-area-inset-top) + 56px)) 0 0;
    box-sizing: border-box;
  }
  #landing-container .content { grid-area: 1 / 1; justify-self: center; width: min(calc(100% - 32px), 480px); }
  #landing-container .content > p { margin: 0 0 12px; line-height: 1.4; }
  #landing-container .title-actions { width: min(100%, 360px); gap: 8px; }
  #landing-container .start-btn { flex: 1 1 0; width: 0; min-width: 0; padding-inline: 10px; }
  #landing-container .title-heroines { position: relative; grid-area: 2 / 1; min-height: 0; --title-heroine-max-height: 78svh; --title-heroine-max-width: none; }
  .lang-switch { top: max(8px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); gap: 6px; }
  .lang-switch .archerlab-link { position: static; margin-right: auto; transform: none; padding-inline: 8px; font-size: .7rem; }
  .lang-switch .archerlab-link:hover { transform: none; }
  .lang-combo-selected { padding-left: 9px; padding-right: 24px; font-size: .72rem; }
  #landing-container .footer { width: calc(100% - 24px); left: 12px; bottom: max(6px, env(safe-area-inset-bottom)); gap: 4px; }
  #landing-container .footer .contact-links { width: 100%; justify-content: center; gap: 6px; }
  #landing-container .footer .contact-link { padding-inline: 10px; }
}
@media (max-width: 359px) and (orientation: portrait) {
  #landing-container .content { width: calc(100% - 24px); }
  #landing-container .visual-h1 { font-size: 2.1rem; }
  #landing-container .content > p { font-size: .75rem; margin-bottom: 8px; }
  #landing-container .footer .contact-link { font-size: .7rem; padding-inline: 7px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  #landing-container { padding: max(54px, calc(env(safe-area-inset-top) + 48px)) 16px 0; justify-content: flex-start; box-sizing: border-box; }
  #landing-container .visual-h1 { font-size: clamp(1.6rem, 6vmin, 2.2rem); margin-bottom: 3px; }
  #landing-container .content > p { margin: 0 0 8px; font-size: .75rem; }
  #landing-container .start-btn { width: clamp(140px, 23vw, 172px); }
  #landing-container .title-actions { position: fixed; left: 50%; bottom: calc(102px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(360px, calc(100% - 32px)); }
  #landing-container .footer { bottom: max(4px, env(safe-area-inset-bottom)); gap: 2px; max-width: calc(100% - 24px); }
  #landing-container .footer p { margin: 0 !important; font-size: 10px !important; }
  #landing-container .footer nav { margin: 0 !important; font-size: 10px !important; }
  .lang-switch { top: max(4px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
  .archerlab-link { top: max(4px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.start-btn, .modal-btn, .contact-link, .lang-btn, .lang-combo-selected, .archerlab-link, .tab-btn, .back-btn, .choice-btn) { animation: none; transition: none; }
  .choice-btn { opacity: 1; transform: none; }
}