/* =========================================================
   i18n.css — language selector, flags
   ========================================================= */
/* extra glyphs for translations (Œœ € „ ‹› ™ − and Latin Extended-A: ŁłŚšŽž ẞ ...). Same Jersey 10/15 typeface
   (OFL, Google Fonts v4 builds); unicode-range keeps them out of the way unless such a glyph is on screen */
@font-face{ font-family:'Jersey10'; src:url('../fonts/jersey10-extra.woff2') format('woff2'); font-display:swap; unicode-range:U+0102, U+0131, U+0152-0153, U+201E, U+2039-203A, U+20AC, U+2122, U+2212; }
@font-face{ font-family:'Jersey15'; src:url('../fonts/jersey15-extra.woff2') format('woff2'); font-display:swap; unicode-range:U+0102, U+0131, U+0152-0153, U+201E, U+2039-203A, U+20AC, U+2122, U+2212; }
@font-face{ font-family:'Jersey10'; src:url('../fonts/jersey10-latinext.woff2') format('woff2'); font-display:swap; unicode-range:U+0100-0101, U+0103-017F, U+0218-021B, U+1E9E; }
@font-face{ font-family:'Jersey15'; src:url('../fonts/jersey15-latinext.woff2') format('woff2'); font-display:swap; unicode-range:U+0100-0101, U+0103-017F, U+0218-021B, U+1E9E; }

canvas.flag{image-rendering:pixelated; display:block; flex:none; width:calc(var(--u) * 21.6); height:calc(var(--u) * 15.2);}

/* title screen: compact flag button, top-right */
.lang-btn{
  position:absolute; top:calc(var(--u) * 10); right:calc(var(--u) * 12); z-index:2;
  display:flex; align-items:center; gap:calc(var(--u) * 4);
  padding:calc(var(--u) * 3) calc(var(--u) * 5) calc(var(--u) * 3) calc(var(--u) * 3);
  background:#0d0a09; box-shadow:inset 0 0 0 var(--u) #000, 0 var(--u) 0 rgba(255,255,255,.08);
  font:calc(var(--u) * 11)/1 var(--FD); letter-spacing:.06em; color:var(--bone-dim);
  cursor:pointer; outline:none; opacity:.85; touch-action:manipulation;
}
.lang-btn:hover, .lang-btn:focus-visible{opacity:1; color:var(--bone); box-shadow:inset 0 0 0 var(--u) var(--gold);}
.lang-btn .lang-code{padding-top:calc(var(--u) * 1.5);}
.lang-btn::after{content:""; position:absolute; inset:calc(var(--u) * -6);}

/* settings row */
.lang-pick{
  display:flex; align-items:center; gap:calc(var(--u) * 5); min-width:calc(var(--u) * 142); height:calc(var(--u) * 20);
  padding:calc(var(--u) * 2) calc(var(--u) * 7) calc(var(--u) * 2) calc(var(--u) * 3);
  background:#151313; box-shadow:inset 0 0 0 var(--u) #000, 0 var(--u) 0 rgba(255,255,255,.08);
  font:calc(var(--u) * 10)/1 var(--FD); letter-spacing:.06em; text-transform:uppercase; color:var(--bone);
  cursor:pointer; outline:none; touch-action:manipulation;
}
.lang-pick canvas.flag{width:calc(var(--u) * 18.9); height:calc(var(--u) * 13.3);}
.lang-pick .lang-name{flex:1; text-align:left; padding-top:calc(var(--u) * 1.5);}
.lang-pick::after{content:"\25B6"; font-size:calc(var(--u) * 7); color:var(--gold);}
.lang-pick:hover, .lang-pick:focus-visible{background:#262222; box-shadow:inset 0 0 0 var(--u) var(--gold);}

/* language sub-screen */
.lang-panel{width:calc(var(--u) * 360); padding:calc(var(--u) * 12) calc(var(--u) * 14);}
.lang-list{display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--u) * 6);}
.lang-opt{
  display:flex; align-items:center; gap:calc(var(--u) * 8); min-height:calc(var(--u) * 28);
  padding:calc(var(--u) * 4) calc(var(--u) * 8) calc(var(--u) * 4) calc(var(--u) * 5);
  background:#151313; box-shadow:inset 0 0 0 var(--u) #000, 0 var(--u) 0 rgba(255,255,255,.08);
  font:calc(var(--u) * 13)/1 var(--FD); letter-spacing:.04em; color:#a08a76; text-align:left;
  cursor:pointer; outline:none; touch-action:manipulation;
}
.lang-opt .lang-name{padding-top:calc(var(--u) * 2);}
.lang-opt:hover, .lang-opt:focus-visible{color:var(--bone); background:#262222;}
.lang-opt:focus-visible{box-shadow:inset 0 0 0 var(--u) var(--gold);}
.lang-opt.on{color:#fff1dc; background:linear-gradient(#c22a12, #5a0704); box-shadow:inset 0 var(--u) 0 rgba(255,200,150,.45);}
.lang-opt.on canvas.flag{box-shadow:0 0 0 var(--u) #ffd35a;}

html[data-orient=portrait] .lang-panel{width:calc(var(--u) * 300);}
html[data-orient=portrait] .lang-list{grid-template-columns:1fr;}
html[data-orient=portrait] .lang-opt{min-height:calc(var(--u) * 26);}

/* long translations: one-line labels shrink to fit (UI.fitTitle / UI.fitText) instead of wrapping */
.lv-title, .screen-title, .end-title, .diff-name{white-space:nowrap;}
.stat-l, .rtab, .card-band{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.ars-head > span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}