/* Additions: language switcher, task details, ID hint, RTL (Arabic) and non-Latin scripts. */
html.i18n-pending body{visibility:hidden}
body{font-family:Montserrat,'Noto Sans Arabic','Noto Sans Bengali','Noto Sans Sinhala',Arial,sans-serif}
.halloween-dialog{font-family:Arial,'Noto Sans Arabic','Noto Sans Bengali','Noto Sans Sinhala',Helvetica,sans-serif}
:lang(ar) *,:lang(bn) *,:lang(si) *{letter-spacing:0!important}
:lang(bn) body,:lang(si) body{line-height:1.6}
:lang(bn) h1,:lang(si) h1,:lang(ar) h1{line-height:1.1}

/* Header */
.header-tools{display:flex;align-items:center;gap:16px}
.lang{position:relative}
.lang-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;border:1px solid #ffffff38;border-radius:9px;background:transparent;font-size:14px;font-weight:700}
.lang-toggle:hover,.lang-toggle[aria-expanded=true]{border-color:var(--yellow);color:var(--yellow)}
.lang-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.lang-toggle .lang-chevron{width:14px;height:14px;transition:transform .18s}
.lang-toggle[aria-expanded=true] .lang-chevron{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:30;min-width:210px;margin:0;padding:6px;list-style:none;background:#1b1918;border:1px solid #5b5137;border-radius:14px;box-shadow:0 20px 60px #000a}
.lang-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border:0;border-radius:9px;background:transparent;font-size:15px;text-align:start}
.lang-menu button small{font-size:11px;color:var(--muted);font-weight:700;font-family:Montserrat,Arial,sans-serif}
.lang-menu button:hover,.lang-menu button:focus-visible{background:#2a2720;outline:none}
.lang-menu button[aria-selected=true]{color:var(--yellow)}
.lang-menu button[aria-selected=true] small{color:var(--yellow)}

/* Calendar: casino / sport preview */
.path-switch{display:flex;justify-content:center;align-items:center;gap:8px;margin:-18px auto 30px;flex-wrap:wrap}
.path-switch__label{font-size:14px;color:var(--muted);margin-inline-end:6px}
.path-switch button{min-height:40px;padding:8px 20px;border:1px solid #ffffff38;border-radius:999px;background:transparent;font-size:14px;font-weight:700;text-transform:uppercase}
.path-switch button[aria-pressed=true]{background:var(--yellow);border-color:var(--yellow);color:#101010}
.day-ended .status{background:#3a3734;color:#cfcac3}
.day-ended .day-label,.day-missed .day-label{color:var(--muted)}

/* Task details */
.task-detail{align-items:flex-start}
.task-detail .button{align-self:center}
.task-body{flex:1;min-width:0}
.task-detail h3{margin-bottom:6px}
.task-period{font-size:14px!important;color:var(--muted);margin-bottom:16px}
.task-text{font-size:18px;line-height:1.45}
.task-state{display:inline-block;margin-bottom:12px;padding:6px 12px;border-radius:8px;font-size:13px!important;font-weight:700;background:#2b2926;color:#d6d1ca}
.task-state-done{background:#163d28;color:#5fe39e}
.task-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.task-chips li{padding:6px 12px;border-radius:999px;background:#2a2826;font-size:14px;line-height:1.3}
.task-tiers{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.task-tiers .task-reward{margin:0}
.task-note{margin-top:14px;font-size:14px!important;color:var(--yellow)}
.task-terms{margin-top:12px;font-size:13px!important;color:#b6b2ad}

/* Join form */
.field-hint{margin:8px 0 0;color:#a6a4a4;font-size:13px;text-align:start}
.account-input{letter-spacing:.06em}
.progress-id{margin:14px 0 0;color:#a6a4a4;font-size:14px;line-height:1.5}

/* Long translations: let buttons wrap instead of overflowing */
.button{white-space:normal;text-align:center}
.status{white-space:normal;text-align:center;line-height:1.15}

@media(max-width:1100px){.task-text{font-size:15px}.header-tools{gap:10px}}
@media(max-width:800px){.task-detail .button{align-self:stretch}}
@media(max-width:600px){
  .header-tools{gap:6px}
  .lang-toggle{min-height:36px;padding:6px 8px;border-radius:8px;font-size:12px;gap:4px}
  .lang-toggle svg{width:16px;height:16px}
  .lang-toggle .lang-chevron{display:none}
  .lang-menu{min-width:190px}
  .path-switch{margin:-8px auto 20px}
  .path-switch__label{width:100%;text-align:center;margin:0 0 2px}
  .path-switch button{min-height:36px;padding:6px 16px;font-size:12px}
  .task-text{font-size:14px}
  .task-chips li{font-size:12px}
}

/* RTL (Arabic): mirror the layout */
[dir=rtl] .hero-scenery{background:linear-gradient(270deg,#0a0a0a 18%,#0a0a0ae8 38%,#0a0a0a88 59%,#0a0a0a11 100%),linear-gradient(0deg,#0a0a0a 0%,transparent 30%),url('assets/hero-background.webp') center 40%/cover}
[dir=rtl] .hero-giraffe{right:auto;left:-90px;transform:none}
[dir=rtl] .hero-bat{left:auto;right:12%}
[dir=rtl] .hero-cauldron{right:auto;left:-20px}
[dir=rtl] .hero-ghost{left:auto;right:50%}
[dir=rtl] h1{text-align:right}
[dir=rtl] .path-card{text-align:right}
[dir=rtl] .info-card>img{margin:-18px 0 -18px -12px}
[dir=rtl] .info-card:after{right:auto;left:-80px}
[dir=rtl] .task-detail .button{margin-left:0;margin-right:20px}
[dir=rtl] .prize-scenery{inset:0 57% 0 0;border-radius:var(--radius) 0 0 var(--radius);background:linear-gradient(270deg,var(--surface),transparent 55%),url('assets/prize-background.webp') center/cover}
[dir=rtl] .prize-giraffe{right:auto;left:92px}
[dir=rtl] th{text-align:right}
[dir=rtl] th:last-child,[dir=rtl] td:last-child{text-align:left}
[dir=rtl] .rules-list{padding-left:0;padding-right:20px}
[dir=rtl] dialog h2{text-align:right;margin:0 0 24px 30px}
[dir=rtl] .dialog-close{right:auto;left:14px}
[dir=rtl] .modal__close{right:auto;left:25px}
[dir=rtl] .modal--join form{text-align:right}
[dir=rtl] .carousel-controls svg{transform:scaleX(-1)}
[dir=rtl] tbody tr:first-child td:first-child{border-radius:0 18px 0 0}
[dir=rtl] tbody tr:first-child td:last-child{border-radius:18px 0 0 0}
[dir=rtl] tbody tr:last-child td:first-child{border-radius:0 0 18px 0}
[dir=rtl] tbody tr:last-child td:last-child{border-radius:0 0 0 18px}
@media(min-width:1600px){[dir=rtl] .hero-giraffe{left:-90px}[dir=rtl] .hero-ghost{right:63%}}
@media(max-width:1599px) and (min-width:1101px){[dir=rtl] .hero-giraffe{left:-22px}[dir=rtl] .hero-cauldron{left:0}}
@media(max-width:1100px){[dir=rtl] .hero-giraffe{left:-24px}[dir=rtl] .hero-ghost{right:53%}[dir=rtl] .hero-bat{right:8%}[dir=rtl] .hero-cauldron{left:0}[dir=rtl] .task-detail .button{margin-right:4px}[dir=rtl] .prize-giraffe{left:25px}}
@media(max-width:800px) and (min-width:601px){[dir=rtl] .hero-giraffe{left:-20px}[dir=rtl] .prize-giraffe{left:4px}[dir=rtl] .task-detail .button{margin-right:0}}
@media(max-width:600px){
  [dir=rtl] .hero-scenery{background:linear-gradient(180deg,#0a0a0a 2%,#0a0a0aaa 38%,transparent 66%,#0a0a0a 100%),url('assets/hero-background.webp') 42% bottom/auto 620px no-repeat}
  [dir=rtl] .hero-giraffe{left:auto}
  [dir=rtl] h1{text-align:center}
  [dir=rtl] .info-card>img{margin:-8px 0 -8px -5px}
  [dir=rtl] .prize-scenery{inset:115px 0 0 0;border-radius:18px;background:linear-gradient(180deg,var(--surface),transparent 50%,var(--surface)),url('assets/prize-background.webp') center/cover}
  [dir=rtl] .prize-giraffe{left:50%;transform:translateX(-50%)}
  [dir=rtl] .task-detail .button{margin:0}
  [dir=rtl] .modal__close{left:17px}
}
.halloween-dialog .primary-button,.halloween-dialog .secondary-button{text-transform:uppercase;padding:8px 14px;line-height:1.2}
@media(max-width:600px){
  .lang{position:static}
  .lang-menu{top:calc(100% - 2px);left:16px;right:16px;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .lang-menu[hidden]{display:none}
  .lang-menu button{font-size:14px;padding:11px 10px}
}
.task-text-sheet{white-space:pre-line}
.task-links .task-link{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#2a2826;border:1px solid #4a4335;font-size:14px;line-height:1.3;color:var(--text,#fff);text-decoration:none;transition:border-color .15s,color .15s}
.task-links .task-link:after{content:'↗';font-size:12px;color:var(--yellow)}
.task-links .task-link:hover,.task-links .task-link:focus-visible{border-color:var(--yellow);color:var(--yellow);outline:none}
.task-links li{padding:0;background:none}
a.android-button{text-decoration:none;color:inherit}
.android-button[hidden]{display:none}
@media(max-width:600px){.hero h1{white-space:normal}.task-links .task-link{font-size:12px;padding:6px 10px}}