/* Playwoo TG Quiz -- the mini app's one stylesheet.
 *
 * Look: the layouts in usable/ (2026-09-27) -- yellow pages, dark purple
 * cards, yellow 3D buttons with a gloss; their palette is below as it was.
 * Their positions were absolute on a 375x800 canvas. Here everything flows,
 * and only the two pictures that must stay whole scale as a unit: the intro
 * scene and the profile header. Those use --u, one design pixel at the
 * current width (100cqw / 375).
 */

/* ------------------------------------------------------------------ fonts */

/* Nunito, SIL Open Font License: Black (900) stands in for the layouts'
 * display face, 800 for their body face. Those are Clash (Supercell) and
 * Tarnation Sans (SparkyType), both "All rights reserved" -- neither can ship.
 * The face has to cover Latvian and Cyrillic; Lilita One was tried and has no
 * ē, ā or ū. Swapping it later is --font-display plus @font-face blocks. */
@font-face {
  font-family: 'Nunito';
  src: url(fonts/nunito-latin.woff2) format('woff2');
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  src: url(fonts/nunito-latin-ext.woff2) format('woff2');
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  src: url(fonts/nunito-cyrillic.woff2) format('woff2');
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  src: url(fonts/nunito-cyrillic-ext.woff2) format('woff2');
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ------------------------------------------------------------------ tokens */

:root {
  --ink:      #0e0624;   /* hard shadows */
  --purple:   #2a0d6c;   /* titles on yellow */
  --lav:      #e4d9f6;   /* light text on purple */
  --lav-dim:  #9d86d4;   /* inactive tabs, hints */
  --yellow:   #ffbe21;   /* buttons */
  --yellow-d: #997214;   /* yellow 3D edge */
  --gold:     #ffd814;   /* titles on purple */
  --on-y:     #3a1470;   /* text on yellow */
  --page:     #ffcf28;   /* the yellow pages (= --bg-yellow) */
  --blue:     #009eff;   /* the intro's first stage */
  --loader:   #451982;
  --bad:      #ff8a98;
  --good:     #7ee08a;

  --card-bg:  linear-gradient(to bottom, rgba(140, 0, 255, .75) 0%, transparent 60%),
              linear-gradient(180deg, #33205e 0%, #241448 42%, #190c36 100%);
  --card-sh:  inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(170, 110, 250, .26), 0 3px 0 var(--ink);
  --well:     rgba(10, 3, 30, .6);
  --well-sh:  inset 0 1px 3px rgba(0, 0, 0, .6);
  --y-edge:   0 1px 0 rgba(153, 114, 20, .95), 0 2px 0 rgba(153, 114, 20, .85), 0 3px 0 rgba(153, 114, 20, .75);

  /* Backgrounds: usable/playwoo-bg (1).css, as the designer made them. The
   * patterns are masks, so their colours come from the variables. Its names are
   * prefixed bg- here because --purple and --yellow already mean other things. */
  --maze-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill-rule='evenodd' d='M-8 81.5L-8.2 68L-6 59L-8.3 55L-8.2 45L-4.9 37L-8.2 28L-8 22.4L-2.6 27L0.2 34L-0.5 43L-6.8 47L-4 53.6L-1 53.7L3.3 49L6.8 34L6.1 29L-2 17.5L-8.3 15L-8 11L-4 10.8L-2.9 8L-4 3.2L-8 3.6L-8 -1.4L-4.6 -2L-2.5 -8L2 -8.4L3.4 -8L0.8 0L2.3 6L1.3 13L11.4 27L12.5 32L8.6 51L5.9 55L-0.7 60L-8 81.5ZM25 135.1L19.5 135L19.4 130L23 122L21.5 110L20 106.4L18 105.2L10 107.4L6 111.3L0.8 128L2.3 135L-2.9 135L-4 131.2L-8 131.6L-8.3 130L-8 126.6L-5 126.4L-3.9 125L0.9 110L3.9 105L9 102L17 100.7L19 99.1L23.7 84L28.4 74L27 70.5L24 70.3L21.2 72L13.9 93L10 96.5L1 97.4L-8 116.6L-8.2 103L-2.9 93L-2.8 85L5.1 65L15.4 54L18.3 33L22 30.7L59 26.5L65 27.4L69.2 31L70.2 36L69 40L65 44L61 45.4L49 44.9L29 48.4L26 47.3L25 45L26.1 43L29 41.9L62 39.5L64.8 36L64 33.3L62 32L24 36.1L21.4 40L20.8 52L23 53.6L30 54.4L52 50.8L63 52.7L74.2 44L76.2 40L76.4 35L73 24.8L70 22.5L63 20.5L56 20.3L22 25.2L17 24.3L10.7 16L8 9L8.4 -2L10.3 -8L12 -8.4L15.8 -8L13.2 7L15.7 14L20 19L39 18.2L57 14.5L70 16.7L77 21L80.3 27L81.6 33L80.4 45L65.1 58L63.3 68L55.7 81L54.8 88L49.3 101L52 117L51.3 123L48 126.5L42 128.5L34 129.5L27 127.6L24.6 131L25 135.1ZM95 135.3L90.3 135L92 120.5L106.9 103L122 60L111.7 43L109.4 33L111 30.8L114.3 31L116.5 41L120 43.6L123 38L121.6 31L119 27.9L115 26.2L107 25.4L104.6 27L104.8 43L114.3 59L114.9 63L110.7 69L109.3 78L101.2 100L96.7 106L85.7 116L85.1 128L82.9 135L37.9 135L47 133.3L56 128.8L58.9 120L56 106L56.7 99L71.7 62L80.9 53L87.1 49L87.5 29L85.5 23L77 11.2L67 10.2L58 6.8L43 11.5L29 13.3L23 12.4L20.6 10L19.2 4L22.7 -4L22.8 -8L27 -8.3L29 -4.8L36 -3.8L43 -4.9L47 -8.2L52.1 -8L50 -3.1L45 -0.3L35 1.5L28 -0.5L26 0.3L24.8 6L29 8.1L44 6.1L54 2.7L56 0.8L58.9 -8L61 -8.3L73 -6.9L75.9 -3L74.9 -1L72 -0.1L64 -4L61.1 0L62 3L77 6.2L79.3 3L80.7 -8L85.4 -8L85.1 0L82.7 8L92.4 25L93 49L97.3 54L99.8 60L107 65L109 63L108.9 60L102 50.6L99.4 44L98.7 32L100 24L90.4 8L91.8 -7L93 -8.3L98.5 -8L96.1 -2L95.7 6L97.5 11L103.8 20L120 22.4L126.6 29L128.2 34L127.9 42L121.1 48L123 52.5L126 54.1L129.1 52L132.2 47L134.8 34L134.1 29L125 16.4L113 15.2L106 12.5L102.5 7L101.7 1L103.4 -4L106.9 -8L116.8 -8L108.3 -2L107.3 5L112 9.7L123 11.2L125.1 8L124 3.2L122 2.6L115 5L112.9 3L113 0.7L116 -1.6L123 -1.6L125.5 -8L131.4 -8L128.8 0L130.3 6L129.2 12L135.2 22L135.2 53L127.3 60L116.4 95L109.9 109L97.8 121L95 135.3ZM77.5 134L79.5 130L80.3 118L70 113.2L68.1 109L67.8 104L81.7 69L86 63.5L93.2 60L92.5 56L90 53.7L87 54.9L76.4 65L61.5 103L64.5 119L74 121.6L75.9 125L74.9 127L72 127.9L64 124L61.8 126L61.2 130L65 132.2L77.5 134ZM39.2 124L44 122.6L46.7 119L43.7 101L50.4 84L50 80.6L47 79.9L43.2 82L37.6 97L37.1 104L40.3 116L38 119.7L36 119.6L33.9 117L31.3 103L31.9 97L40.1 77L44 74.7L52 76.1L55.2 73L59.9 61L59.5 58L58 57L48 56.4L30 59.9L19 58L9.8 68L2.3 87L3 92.1L9 90.2L15 72.2L21 65.1L25 64.7L31 67.4L50 61.8L53.6 63L54.1 66L52 67.9L41 69.7L33.6 73L23.8 101L27 110L28.8 123L39.2 124ZM108 135.1L102.5 135L102.5 126L105.8 121L116 112L124.7 94L125.5 84L135 62.2L135 75.7L129.9 90L131 92.1L135 91.7L135 96.8L129 97.4L119.1 118L108.3 126L106.9 130L108 135.1ZM81.6 112L90.4 105L95.4 99L104 77L104.7 69L96 63.9L93 64.8L86.7 71L73.5 103L74.1 109L81.6 112ZM83 104.5L79.3 104L78.1 101L84.5 94L93 72L97 70.4L98.8 72L98.8 75L90.2 95L83 104.5ZM130 135.1L125.1 135L123 130.6L115 133L112.9 129L115 126.6L123.4 126L129.8 108L135 102.8L135 109.7L128.8 128L130 135.1ZM13 135.1L7.8 135L7.7 131L11.1 114L14 111.5L16 112.1L17.5 115L13 135.1Z'/%3E%3C/svg%3E");  /* 128x128 seamless tile */
  --cells-gradient: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='700'%3E%3Cpath stroke='%23000' stroke-linejoin='round' d='M27 191L30 202L14 217L-2 214L-11 197L-9 187L15 180ZM427 191L430 202L414 217L398 214L389 197L391 187L415 180ZM98 648L94 649L92 652L94 660L97 661L99 660L100 649ZM351 138L340 130L335 131L327 143L337 161L348 157ZM229 372L232 383L224 391L209 378L216 370ZM36 73L70 92L71 94L57 114L34 109L24 89ZM204 451L194 459L191 459L186 451L195 439L201 441ZM191 647L195 645L200 649L197 655L191 655L189 653ZM57 630L61 626L65 631L64 634L58 634ZM285 53L295 55L302 70L299 80L284 87L267 75L267 65ZM52 440L54 452L41 457L39 439ZM154 638L157 645L161 645L163 638L157 635ZM191 120L197 134L210 137L219 130L220 115L200 107ZM161 269L152 286L163 292L173 288L176 270L175 269ZM211 514L216 507L220 506L227 510L228 513L218 523L215 522ZM288 530L283 521L271 526L273 534L281 537ZM-20 299L-10 292L1 293L6 312L-7 325L-15 326L-20 323ZM380 299L390 292L401 293L406 312L393 325L385 326L380 323ZM108 435L100 437L96 453L112 451L113 438ZM257 501L263 493L272 492L277 499L276 503L263 508L258 505ZM268 243L270 228L280 225L285 229L286 243L279 249ZM111 481L112 472L110 470L96 472L96 472L95 480L104 485ZM7 417L19 416L22 403L11 394L6 396L1 408ZM11 488L1 484L-8 491L-9 495L-3 502L6 502L12 493ZM411 488L401 484L392 491L391 495L397 502L406 502L412 493ZM129 376L115 379L109 376L108 373L110 361L120 355L128 355L131 357ZM98 234L107 244L114 244L125 237L123 215L116 209L107 210ZM349 296L364 299L365 324L346 325L336 309ZM239 676L237 677L231 676L229 672L231 667L235 666ZM184 116L160 117L155 113L165 79L190 86L194 102ZM320 95L306 82L309 72L331 67L339 77L336 89ZM-92 -153L-138 -218L-61 -401L9 -382L67 -220L-9 -146L-50 -137L-58 -137ZM308 -153L262 -218L339 -401L409 -382L467 -220L391 -146L350 -137L342 -137ZM297 619L290 626L287 624L288 616L294 615ZM56 140L53 121L32 117L18 135L25 146ZM246 187L252 197L277 191L278 183L264 173ZM376 126L371 107L385 93L393 96L395 128L386 131ZM96 398L83 407L83 413L92 418L101 416L101 401ZM245 354L261 351L260 336L245 338ZM124 604L130 604L132 606L132 610L129 613L124 613L122 612L121 606ZM283 141L295 145L302 139L300 121L284 115L279 120ZM314 636L315 639L312 644L308 643L306 640L312 635ZM70 305L72 290L88 288L99 301L94 311L86 314ZM325 601L332 595L329 589L323 587L319 589L318 596L321 600ZM231 568L238 569L240 574L234 581L227 580ZM263 653L262 653L266 662L267 662L272 656L271 654L268 652ZM312 318L304 327L310 347L321 350L331 334L322 319ZM164 437L166 441L173 442L182 430L176 425L168 427ZM292 395L307 403L312 400L318 381L315 375L304 372L293 378L290 389ZM319 110L334 123L339 123L347 105L338 94L322 100ZM48 338L43 355L54 362L59 359L62 350ZM338 655L334 660L336 663L342 661L343 657ZM162 693L163 694L162 702L161 702L157 695L160 693ZM244 -227L318 -404L253 -468L32 -385L88 -230L129 -206L157 -201ZM58 470L46 475L44 478L45 484L57 489L67 481L67 473ZM280 199L277 216L267 220L254 211L254 203L279 197ZM111 107L79 92L79 90L88 67L117 62L124 68ZM372 66L376 48L356 36L339 44L337 63L344 72ZM126 564L121 567L122 575L130 575L131 569ZM221 720L215 729L223 732L225 721ZM148 378L150 359L161 357L174 376L172 378L151 381ZM239 260L243 250L231 236L221 237L220 254L233 262ZM94 357L83 349L76 353L73 362L91 370ZM88 605L82 603L76 606L76 608L83 614L88 612ZM305 561L299 558L298 553L303 548L308 550L309 559ZM279 -28L310 -36L333 -13L310 13L291 9ZM243 140L227 130L228 115L241 107L254 120L246 140ZM348 623L349 627L356 630L359 627L358 620L353 618ZM52 325L67 339L75 336L77 324L62 315L52 324ZM338 485L345 494L357 489L358 485L348 474L340 477ZM78 542L69 539L64 545L67 551L73 553L79 548ZM367 452L364 459L375 471L385 463L383 453ZM242 530L246 532L248 538L243 544L236 542L233 539ZM248 366L262 363L271 371L268 382L249 380L247 368ZM-10 141L-2 138L9 141L15 151L13 168L-12 175L-17 168ZM390 141L398 138L409 141L415 151L413 168L388 175L383 168ZM313 109L302 115L287 109L288 93L302 86L315 99ZM315 835L322 840L319 867L293 863L300 836L306 834ZM140 488L133 484L134 476L142 475L146 482ZM24 653L27 653L29 647L28 644L25 643L21 647ZM80 151L74 149L67 139L64 121L78 102L106 115L109 119L103 142ZM71 20L114 15L117 11L115 -38L94 -50L61 -41L69 19ZM324 266L308 284L313 298L325 299L338 285L330 266ZM59 235L45 254L34 253L25 228L41 214L50 218ZM121 333L109 319L113 310L126 308L128 334ZM219 301L211 300L203 306L203 322L208 325L223 320L225 308ZM344 695L349 698L353 695L350 691L345 692ZM29 67L27 46L8 36L-17 49L-21 68L-13 84L-3 88L16 85ZM429 67L427 46L408 36L383 49L379 68L387 84L397 88L416 85ZM301 689L306 687L306 683L304 680L300 679L296 685ZM49 -55L0 -137L76 -211L118 -186L92 -62L58 -52ZM194 701L195 703L191 710L189 709L191 701ZM288 201L313 208L307 218L291 222L285 218ZM38 510L47 514L49 521L43 527L36 526L32 519ZM275 -37L248 -70L302 -138L334 -122L308 -43L278 -36ZM144 336L140 334L138 306L143 302L144 302L155 308L160 329L156 333ZM235 472L232 484L240 488L246 480L241 471ZM270 431L282 418L295 425L293 438L284 442L271 434ZM260 593L252 595L249 592L254 586L259 588ZM202 100L198 84L215 69L239 90L237 100L223 109ZM227 271L215 263L206 269L212 286L221 287ZM83 438L74 432L67 438L70 451L79 455L79 455ZM177 -11L157 -45L190 -76L218 -64L210 -14L192 -7ZM33 609L32 604L36 598L39 598L44 603L44 605L38 610ZM203 289L197 272L187 271L183 290L195 295ZM228 184L207 197L196 186L198 174L213 167L223 172ZM321 147L307 146L301 152L303 167L324 175L331 165ZM163 475L159 467L163 460L169 461L175 469L168 476ZM63 21L55 -42L46 -45L2 -17L11 29L31 38ZM208 144L210 160L195 167L186 154L195 141ZM72 229L63 211L84 198L97 206L87 230ZM290 194L315 202L322 198L321 183L300 175L289 184L288 192ZM150 529L140 529L138 526L144 520L151 524ZM152 432L156 422L148 417L140 427ZM389 670L385 674L383 674L380 669L380 666L383 664L386 665ZM168 505L164 496L159 495L153 501L153 504L161 509ZM155 200L159 192L147 170L132 171L124 197L132 203ZM147 239L136 236L134 213L156 210L161 224ZM167 71L193 79L211 64L213 54L207 43L196 38L169 44L163 66ZM64 156L37 181L24 170L26 153L57 147ZM243 436L231 429L223 435L226 445L232 448L238 448L244 439ZM355 519L366 515L372 522L367 534L363 535L353 525ZM236 194L242 204L242 211L230 223L219 224L213 218L212 205L233 193ZM308 225L312 245L294 243L293 229ZM364 582L370 584L373 581L374 573L370 570L367 570L362 577ZM317 734L316 743L325 744L326 735L321 732ZM279 25L290 14L309 18L314 32L296 49L286 46ZM318 31L313 16L336 -11L351 -9L354 31L336 40ZM332 558L331 547L337 543L345 552L339 560ZM112 341L99 325L92 328L89 339L101 348ZM190 322L173 326L168 305L179 301L189 306ZM145 446L146 449L141 456L132 457L130 454L131 442L133 442ZM117 538L116 535L109 532L104 537L105 544L110 546L116 543ZM251 24L239 9L234 8L213 39L219 50L244 43ZM121 731L115 738L110 736L113 724L114 724L117 724ZM268 729L268 737L263 739L260 736L262 727L264 726L265 727ZM243 274L255 286L253 294L237 298L231 291L237 276ZM33 274L20 284L26 304L41 310L52 300L54 286L43 275ZM185 183L188 172L179 159L163 158L156 165L168 187ZM155 396L156 404L164 410L172 408L173 394ZM251 143L260 122L273 122L277 142L263 150ZM33 367L46 374L44 385L34 390L22 380L26 369ZM72 723L69 738L63 737L63 737L65 724L70 723ZM198 342L200 356L192 365L188 366L174 347L178 343L193 339ZM171 609L178 613L183 611L184 605L179 602L172 605ZM259 114L246 101L248 92L263 81L280 93L279 109L273 114ZM126 654L125 663L128 664L133 660L130 653ZM36 65L34 44L65 28L67 29L83 64L73 86ZM372 133L358 139L355 159L376 167L383 138ZM92 513L86 519L77 515L76 508L84 501L92 507ZM56 203L45 198L42 186L69 162L74 164L79 188ZM88 63L71 27L115 21L117 57ZM156 64L163 42L152 23L123 17L119 21L122 57L130 63ZM101 579L99 571L95 569L91 572L92 579L98 581ZM240 -75L296 -145L251 -208L162 -181L194 -85L222 -73ZM-45 -122L-23 -29L-2 -24L41 -52L-6 -130ZM355 -122L377 -29L398 -24L441 -52L394 -130ZM58 862L49 868L46 891L61 902L76 889L68 865L63 863ZM162 568L156 572L155 577L158 580L166 576L165 570ZM259 241L261 227L249 219L238 230L250 244ZM369 127L365 108L351 108L344 124L355 133ZM-4 624L-9 623L-10 615L-7 612L-0 615L1 619ZM396 624L391 623L390 615L393 612L400 615L401 619ZM34 555L40 556L42 561L38 568L35 568L30 561ZM219 469L217 481L212 482L205 473L214 465ZM348 345L364 344L368 347L366 364L357 370L343 367L339 360ZM9 362L-4 349L-12 350L-15 366L-1 375L5 373ZM409 362L396 349L388 350L385 366L399 375L405 373ZM256 1093L241 1105L241 1140L280 1150L298 1140L298 1105L284 1094L262 1091ZM86 384L72 394L63 387L65 377L69 374L85 381ZM307 67L300 52L317 35L333 44L331 62ZM5 29L-4 -15L-25 -19L-45 -9L-41 29L-20 42ZM405 29L396 -15L375 -19L355 -9L359 29L380 42ZM193 394L192 408L198 414L204 415L212 408L212 404L198 392L194 392ZM5 534L9 541L6 547L-2 549L-7 544L-3 534ZM405 534L409 541L406 547L398 549L393 544L397 534ZM10 440L21 439L23 440L24 458L21 462L9 457L6 447ZM175 539L173 534L174 529L180 526L184 527L188 535L179 541ZM352 168L341 171L334 181L335 196L345 202L373 193L376 182L371 175ZM71 243L57 263L69 275L86 272L95 255L86 244ZM268 156L281 149L292 153L294 167L283 176L269 166ZM154 245L167 232L178 236L176 256L161 256ZM104 195L114 193L122 168L107 154L86 163L90 186ZM267 614L266 621L258 621L258 614L265 612ZM117 107L130 71L155 71L159 77L148 111L120 111ZM115 144L121 121L148 121L152 125L154 150L147 158L131 159ZM311 519L307 511L308 508L317 505L324 512L322 518L316 521ZM187 257L188 258L199 259L208 253L209 236L203 231L188 237ZM325 247L321 243L317 224L322 215L329 211L337 216L342 238L332 248ZM187 802L184 801L184 802L176 809L185 834L192 833L198 808L195 805ZM57 662L62 662L64 669L58 670L54 668ZM184 124L161 124L162 149L180 150L190 137ZM342 90L345 78L373 72L381 88L366 102L351 101ZM215 340L217 354L232 356L233 354L233 339L228 335ZM377 381L369 387L373 400L384 400L389 389ZM20 259L6 270L-6 269L-15 247L-4 232L11 234ZM420 259L406 270L394 269L385 247L396 232L411 234ZM133 397L120 400L120 417L125 420L128 419L138 408L136 399ZM298 483L311 479L314 469L304 460L295 464L293 475ZM291 592L285 593L283 591L282 586L287 582L293 585ZM239 146L224 136L214 143L217 159L227 164ZM262 452L274 459L271 470L262 470L256 460ZM338 -19L315 -41L341 -120L349 -120L371 -28L351 -17ZM276 22L287 10L276 -28L272 -29L243 5L255 21ZM194 -2L211 -8L231 6L209 38L198 32ZM245 50L221 55L219 65L243 85L259 74L260 65ZM272 557L266 555L262 560L263 564L268 566L273 563ZM144 251L133 249L123 256L139 282L140 282L151 263ZM276 331L273 335L273 351L283 359L295 352L288 331ZM240 311L238 322L243 327L259 325L262 320L255 308ZM316 114L305 121L307 139L321 140L331 127ZM167 40L195 33L191 -2L175 -6L156 20ZM17 93L-1 96L0 128L12 131L26 112ZM417 93L399 96L400 128L412 131L426 112ZM223 612L227 613L229 615L229 621L229 622L225 623L220 618L221 613ZM350 213L355 236L373 237L385 221L376 205ZM272 291L282 286L292 291L298 304L289 313L276 313L269 299ZM241 181L259 168L258 157L247 150L245 150L233 168L238 180ZM152 549L145 553L140 549L141 544L150 545ZM131 507L125 514L118 511L117 504L124 500L130 504ZM286 257L293 252L311 254L316 258L299 277L287 272ZM35 329L29 347L22 350L9 336L21 323L35 328ZM343 260L353 251L370 252L380 274L368 283L351 280ZM339 389L352 391L356 405L349 413L333 406ZM366 427L372 419L384 419L389 428L385 435L368 434ZM59 410L51 404L41 408L39 420L40 421L53 422L60 416ZM25 698L29 698L32 700L30 714L22 702ZM386 756L391 760L398 755L398 755L392 746L390 746L387 749ZM153 17L124 11L122 -39L152 -43L172 -8ZM115 262L130 287L126 290L111 292L99 279L108 262ZM153 -179L125 -184L99 -61L121 -49L152 -52L185 -82ZM250 265L255 255L263 252L274 258L275 272L264 277ZM67 576L68 582L63 586L58 581L62 575ZM186 498L183 490L188 484L190 484L197 492L192 500ZM254 417L265 404L263 399L247 396L239 405L239 409ZM275 26L283 48L264 62L249 45L255 25ZM10 575L14 582L10 588L1 585L2 576ZM320 441L322 429L326 426L341 433L343 439L339 447L330 450ZM172 220L166 206L170 197L188 194L199 204L199 219L183 225ZM195 563L197 571L203 576L206 574L210 562L207 558L204 557ZM268 -31L241 -65L223 -63L215 -13L234 1L240 1Z'/%3E%3C/svg%3E");  /* 400x700 strip, seamless left-right, fades out downwards */
  --bg-purple: #200335; --bg-purple-lines: #27043d;
  --bg-yellow: #ffcf28; --bg-yellow-cells: #f7c31e;
  --bg-separator: #ffffff;
  --maze-size: 256px;
  --cells-width: 400px;
  --separator-size: 16px;

  --font-display: 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --max: 480px;
  --nav-h: 74px;

  /* Telegram sets these inside the app (Bot API 8.0); outside it they are 0. */
  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--lav);
  background: var(--page);
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
body[data-theme='blue'] { background: var(--blue); }

/* "Full yellow screen" (playwoo-bg .bg-yellow): the cells strip across the top
 * of the page, fading into plain yellow below. */
.page, .intro { isolation: isolate; background: var(--bg-yellow); }
.page::before, .intro::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--bg-yellow-cells);
  -webkit-mask: var(--cells-gradient) center top / var(--cells-width) auto repeat-x;
          mask: var(--cells-gradient) center top / var(--cells-width) auto repeat-x;
}
/* On the profile the cells start under the purple part, not at the page top. */
.profile::before { display: none; }
.profile__body { position: relative; isolation: isolate; }
.profile__body::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bg-yellow-cells);
  -webkit-mask: var(--cells-gradient) center top / var(--cells-width) auto repeat-x;
          mask: var(--cells-gradient) center top / var(--cells-width) auto repeat-x;
}
body.has-modal { overflow: hidden; }

input { user-select: text; -webkit-user-select: text; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#app { min-height: 100dvh; }

.screen { animation: screen-in 320ms var(--ease) backwards; }
@keyframes screen-in { from { opacity: 0; } }

/* A page: one column, phone width, the yellow texture behind it. */
.page {
  position: relative;
  width: 100%;
  max-width: var(--max);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 14px) 12px calc(var(--safe-bottom) + 18px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Room for the fixed nav bar. */
.page:has(> .navbar) { padding-bottom: calc(var(--safe-bottom) + var(--nav-h) + 22px); }

/* ------------------------------------------------------------------ shared looks */

.card-dark { background: var(--card-bg); box-shadow: var(--card-sh); border-radius: 16px; }
.panel-yellow {
  border-radius: 16px;
  background: linear-gradient(180deg, #ffd24a 0%, var(--yellow) 55%, #f5ac0f 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 3px 0 var(--yellow-d);
}

.ico { display: inline-flex; flex: none; }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ico svg.fill { fill: currentColor; stroke: none; }
.ico-shadow { filter: drop-shadow(0 2px 0 rgba(14, 6, 36, .55)); }
.ico-shadow svg, .stat__icon svg, .level__crown svg, .top3__crown svg, .since__icon svg, .row__trophy svg { stroke: none; }

/* The yellow 3D button with its gloss. */
.btn-y {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--yellow);
  color: var(--on-y);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--y-edge);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;
}
.btn-y::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 6px; right: 6px; top: 2px;
  height: 42%;
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .2) 100%);
}
.btn-y:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(153, 114, 20, .9); }
.btn-y .ico { width: 16px; height: 16px; }
.btn-y .ico svg { stroke-width: 2.6; }
.btn-y--sm { min-height: 30px; padding: 0 10px; font-size: 11px; }
.btn-y--md { min-height: 38px; font-size: 12px; }
.btn-y--lg { min-height: 44px; font-size: 15px; border-radius: 12px; }
.btn-y--xl { min-height: 52px; font-size: 21px; border-radius: 14px; letter-spacing: .5px; }
.btn-y[aria-disabled='true'] { filter: grayscale(.85) brightness(.9); opacity: .75; }
.btn-y:disabled { opacity: .7; }

/* The dark button that sits on yellow. */
.btn-d {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 14px; border-radius: 12px;
  background: linear-gradient(180deg, #3a0a6a, #1c0238);
  color: var(--gold);
  font-family: var(--font-display); font-weight: 900; font-size: 15px; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 2px 0 var(--ink);
  transition: transform .12s ease;
}
.btn-d .ico { width: 18px; height: 18px; }
.btn-d .ico svg { stroke-width: 2.8; }
.btn-d:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }

.icon-btn {
  width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lav);
  transition: transform .12s ease;
}
.icon-btn .ico { width: 20px; height: 20px; }
.icon-btn:active { transform: translateY(2px); }
.icon-btn--well { width: 34px; height: 34px; border-radius: 10px; background: var(--well); box-shadow: var(--well-sh); }
.icon-btn--well .ico { width: 16px; height: 16px; }
.icon-btn--well .ico svg { stroke-width: 3; }

.back-chip {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-bg); box-shadow: var(--card-sh); color: var(--lav);
}
.back-chip .ico { width: 20px; height: 20px; }
.back-chip .ico svg { stroke-width: 3; }

.link-btn {
  align-self: center;
  padding: 8px 12px;
  font-family: var(--font-display); font-weight: 900; font-size: 12px;
  text-transform: uppercase; letter-spacing: .3px;
  color: var(--on-y);
  text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:active { opacity: .6; }

.sec-title {
  display: block;
  font-family: var(--font-display); font-weight: 900; font-size: 13px; line-height: 1.1;
  text-transform: uppercase; letter-spacing: .3px;
  color: var(--gold); text-shadow: 0 1px 0 var(--ink);
}
.card-title { font-family: var(--font-display); font-weight: 900; font-size: 15px; line-height: 1; text-transform: uppercase; color: #fff; }
.hint { font-size: 12px; line-height: 1.3; color: var(--lav-dim); }

.yellow-title {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
  font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1.1;
  color: var(--purple); text-shadow: 0 2px 0 rgba(153, 114, 20, .45);
}
.yellow-title .ico { width: 26px; height: 24px; color: var(--purple); }
.yellow-title .ico--line svg { stroke-width: 2.6; }

.bar { height: 11px; border-radius: 999px; background: rgba(10, 3, 30, .7); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); overflow: hidden; }
.bar i { display: block; height: 100%; min-width: 0; border-radius: 999px; background: linear-gradient(180deg, #fff08a 0%, var(--gold) 45%, #f2a900 100%); box-shadow: inset 0 -1px 0 rgba(153, 114, 20, .6); }
.bar--thin { height: 7px; }

.notice {
  padding: 11px 14px; border-radius: 14px;
  background: var(--card-bg); box-shadow: var(--card-sh);
  color: var(--gold); font-size: 14px; line-height: 1.3; text-align: center;
}

.dev-badge {
  position: absolute; z-index: 3; right: 20px; top: calc(var(--safe-top) + 22px);
  padding: 4px 8px; border-radius: 999px;
  background: rgba(14, 6, 36, .75); color: var(--gold);
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
}

/* ------------------------------------------------------------------ faces */

/* An avatar tile. The art has its own rounded square and shading, so it is
 * drawn whole (contain); an empty one is a silhouette in a well. */
.face { position: relative; display: block; overflow: hidden; }
.face img { width: 100%; height: 100%; object-fit: contain; }
.face--empty { display: flex; align-items: center; justify-content: center; background: var(--well); box-shadow: var(--well-sh); border-radius: 12px; }
.face--empty .ico { width: 52%; height: 56%; }
.face--empty .ico svg { stroke: none; }

/* ------------------------------------------------------------------ 1. intro */

/* The designer's scene is a 375x800 canvas; it keeps its proportions across
 * the width and spreads over the height, with the duo anchored to the bottom. */
.intro {
  position: relative;
  width: 100%;
  max-width: var(--max);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  container-type: size;
  transition: opacity .4s ease;
}
.intro > * { --u: calc(100cqw / 375); }
.intro.is-leaving { opacity: 0; }

.intro__blue {
  position: absolute; inset: 0; z-index: 1;
  background: var(--blue);
  transition: opacity .4s ease-out;
}
/* Sizes are what the designer's tool drew: it fits a picture inside its box,
 * centred, so a 213x45 box around the logo shows it 125 wide. */
.intro__logo {
  position: absolute; z-index: 3;
  left: calc(128 * var(--u)); width: calc(125 * var(--u));
  top: calc(-60 * var(--u));
  transition: top 2s var(--ease) 2s;
}
.intro__mark {
  position: absolute; z-index: 3; left: 0; right: 0;
  top: calc(var(--safe-top) + 11.25cqh);
  height: calc(90 * var(--u));
  transition: top .9s ease-out 1.2s;
}
.intro__telegram { position: absolute; left: calc(37 * var(--u)); top: 0; width: calc(300 * var(--u)); }
.intro__edition { position: absolute; left: calc(202 * var(--u)); top: calc(37 * var(--u)); width: calc(139 * var(--u)); }

.intro__loader {
  position: absolute; z-index: 2; left: 50%; top: 24cqh;
  transform: translateX(-50%);
  --size: calc(90 * var(--u));
  transition: opacity .8s ease-out 1.2s;
}
.intro__duo {
  position: absolute; z-index: 2; left: 50%; bottom: calc(-3 * var(--u));
  width: min(calc(357 * var(--u)), 44cqh);
  transform: translateX(-50%);
}
.intro__slot {
  position: absolute; z-index: 4; left: 0; right: 0;
  top: calc(34.4cqh + 100 * var(--u));
  display: flex; justify-content: center;
}

.intro.is-revealed .intro__blue { opacity: 0; }
.intro.is-revealed .intro__loader { opacity: 0; }
.intro.is-revealed .intro__mark { top: 34.4cqh; }
.intro.is-revealed .intro__logo { top: calc(var(--safe-top) + 20 * var(--u)); }

/* The loader (usable/logo loader.html, "one lap"): six jumps, four shapes. */
.ldr { --color: var(--loader); --speed: 1s; position: relative; width: calc(var(--size) * 1.7); height: calc(var(--size) * 2.75); }
.ldr .gsh { position: absolute; left: 50%; bottom: 0; width: calc(var(--size) * .78); height: calc(var(--size) * .13); margin-left: calc(var(--size) * -.39); border-radius: 50%; background: var(--color); animation: m4-sh calc(var(--speed) * 6) linear infinite; }
.ldr .hop { position: absolute; left: 0; right: 0; bottom: calc(var(--size) * -.01); height: var(--size); animation: m4-hop calc(var(--speed) * 6) infinite; }
.ldr .sq { position: absolute; inset: 0; transform-origin: 50% 92%; animation: m4-sq calc(var(--speed) * 6) infinite; }
.ldr svg { position: absolute; left: 50%; top: 0; width: var(--size); height: var(--size); margin-left: calc(var(--size) * -.5); fill: var(--color); transform-origin: 50% 92%; }
.ldr svg:nth-of-type(1) { animation: m4-1 calc(var(--speed) * 6) linear infinite; }
.ldr svg:nth-of-type(2) { animation: m4-2 calc(var(--speed) * 6) linear infinite; }
.ldr svg:nth-of-type(3) { animation: m4-3 calc(var(--speed) * 6) linear infinite; }
.ldr svg:nth-of-type(4) { animation: m4-4 calc(var(--speed) * 6) linear infinite; }
@keyframes m4-hop {
  0% { transform: translateY(-55%); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  8.0% { transform: translateY(0%); animation-timing-function: cubic-bezier(.1, .55, .35, 1); }
  16.6667% { transform: translateY(-55%); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  24.6667% { transform: translateY(0%); animation-timing-function: cubic-bezier(.1, .55, .35, 1); }
  33.3333% { transform: translateY(-55%); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  41.3333% { transform: translateY(0%); animation-timing-function: cubic-bezier(0, .59, .3, .98); }
  56.6667% { transform: translateY(-130%); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  76.6667% { transform: translateY(-124%); animation-timing-function: cubic-bezier(.71, .01, 1, .6); }
  91.3333% { transform: translateY(0%); animation-timing-function: cubic-bezier(.1, .55, .35, 1); }
  100% { transform: translateY(-55%); }
}
@keyframes m4-sq { 0% { transform: scale(1, 1); } 6.8% { transform: scale(1, 1); } 8.0% { transform: scale(1.24, .78); } 9.3% { transform: scale(.93, 1.07); } 10.6% { transform: scale(1, 1); } 23.4667% { transform: scale(1, 1); } 24.6667% { transform: scale(1.24, .78); } 25.9667% { transform: scale(.93, 1.07); } 27.2667% { transform: scale(1, 1); } 40.1333% { transform: scale(1, 1); } 41.3333% { transform: scale(1.24, .78); } 42.6333% { transform: scale(.84, 1.18); } 44.3333% { transform: scale(1, 1); } 90.1333% { transform: scale(1, 1); } 91.3333% { transform: scale(1.34, .70); } 92.6333% { transform: scale(.9, 1.1); } 93.9333% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } }
@keyframes m4-sh { 0% { transform: scale(.55); opacity: .10; } 5.6% { transform: scale(.55); opacity: .10; } 8.0% { transform: scale(1); opacity: .26; } 10.4% { transform: scale(.55); opacity: .10; } 22.2667% { transform: scale(.55); opacity: .10; } 24.6667% { transform: scale(1); opacity: .26; } 27.0667% { transform: scale(.55); opacity: .10; } 38.9333% { transform: scale(.55); opacity: .10; } 41.3333% { transform: scale(1); opacity: .26; } 43.7333% { transform: scale(.55); opacity: .10; } 66% { transform: scale(.3); opacity: .05; } 88.9333% { transform: scale(.55); opacity: .10; } 91.3333% { transform: scale(1); opacity: .26; } 93.7333% { transform: scale(.55); opacity: .10; } 100% { transform: scale(.55); opacity: .10; } }
@keyframes m4-1 { 0% { opacity: 1; } 7.4% { opacity: 1; } 8.6% { opacity: 0; } 90.7333% { opacity: 0; } 91.9333% { opacity: 1; } 100% { opacity: 1; } }
@keyframes m4-2 { 0% { opacity: 0; } 7.4% { opacity: 0; } 8.6% { opacity: 1; } 24.0667% { opacity: 1; } 25.2667% { opacity: 0; } 100% { opacity: 0; } }
@keyframes m4-3 { 0% { opacity: 0; } 24.0667% { opacity: 0; } 25.2667% { opacity: 1; } 40.7333% { opacity: 1; } 41.9333% { opacity: 0; } 100% { opacity: 0; } }
@keyframes m4-4 { 0% { opacity: 0; transform: scale(1); } 40.7333% { opacity: 0; transform: scale(1); } 41.9333% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0, .59, .3, .98); } 52% { opacity: 1; transform: scale(1.5); } 76.6667% { opacity: 1; transform: scale(1.5); animation-timing-function: cubic-bezier(.71, .01, 1, .6); } 90.7333% { opacity: 1; transform: scale(1); } 91.9333% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* 2. language, in the revealed scene */
.lang { text-align: center; animation: rise-in .5s var(--ease) backwards; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
.lang__title { font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--purple); text-shadow: 0 2px 0 rgba(153, 114, 20, .45); }
.lang__flags { display: flex; justify-content: center; gap: 22px; margin-top: 12px; }
.lang__flag {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 900; font-size: 14px; text-transform: uppercase; color: var(--purple);
  transition: transform .2s var(--ease), opacity .2s;
}
.lang__flag img { width: 84px; height: 84px; filter: drop-shadow(0 3px 0 rgba(58, 20, 112, .35)); transition: transform .2s var(--ease); }
.lang__flag:active img { transform: scale(.94); }
.lang.is-busy .lang__flag { pointer-events: none; opacity: .5; }
.lang__flag.is-chosen { opacity: 1; transform: scale(1.1) rotate(-4deg); }

/* ------------------------------------------------------------------ 3. profile form */

.page-head { position: relative; text-align: center; padding: 2px 44px 0; }
.page-title {
  font-family: var(--font-display); font-weight: 900; font-size: 26px; line-height: 1.05;
  text-transform: uppercase; color: var(--purple); text-shadow: 0 2px 0 rgba(153, 114, 20, .45);
}
.page-sub { margin-top: 4px; font-size: 13px; color: var(--on-y); }

.profile-form__form { display: flex; flex-direction: column; gap: 10px; }
.profile-form__card { padding: 12px 14px; }

.profile-form__avatar-top { display: flex; align-items: center; gap: 14px; }
.profile-form__preview { flex: none; width: 96px; height: 96px; }

/* An avatar inside a frame: the face sits in the frame's window. */
.framed { position: relative; display: block; width: 100%; height: 100%; }
.framed::before {
  content: ''; position: absolute; inset: 9%; border-radius: 6px;
  background: radial-gradient(circle at 50% 35%, #4b2596 0%, #2a0f66 60%, #1a0845 100%);
}
.framed .face { position: absolute; inset: 13%; width: auto; height: auto; }
.framed .face--empty { background: none; box-shadow: none; }
.framed--round::before, .framed--round .face { border-radius: 50%; }
.framed__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

.divider { display: flex; align-items: center; gap: 8px; margin: 12px 0 9px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: rgba(157, 134, 212, .25); }
.choices { display: grid; gap: 8px; }
.choices--frames { grid-template-columns: repeat(4, 1fr); }
.choices--plates { grid-template-columns: repeat(3, 1fr); }
.choice {
  position: relative; padding: 4px; border-radius: 12px;
  background: var(--well); box-shadow: var(--well-sh);
  transition: transform .12s ease, box-shadow .12s ease;
}
.choices--frames .choice { aspect-ratio: 1; }
.choice.is-on { box-shadow: inset 0 0 0 3px var(--gold), 0 3px 0 var(--yellow-d); transform: translateY(-2px); }
.choice:active { transform: translateY(1px); }
.plate-thumb { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 4px; }
.plate-thumb img { max-height: 100%; }
.profile-form__avatar-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.nick-row {
  margin-top: 8px; display: flex; align-items: center; height: 46px;
  border-radius: 12px; background: var(--well); box-shadow: var(--well-sh);
  transition: box-shadow .15s ease;
}
.nick-row:focus-within { box-shadow: var(--well-sh), inset 0 0 0 2px var(--gold); }
.nick-row.is-bad { box-shadow: var(--well-sh), inset 0 0 0 2px #ff5a6e; }
.nick-row > .ico { width: 18px; height: 18px; margin: 0 8px 0 12px; color: var(--lav-dim); }
.nick-row__input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font-family: var(--font-display); font-weight: 900; font-size: 17px; color: #fff; letter-spacing: .2px;
}
.nick-row__input::placeholder { color: var(--lav-dim); opacity: .8; }
.nick-row__count { flex: none; margin: 0 12px 0 6px; font-size: 12px; color: var(--lav-dim); }
.nick-row__count.is-over { color: var(--bad); }
.nick-msg { margin-top: 7px; min-height: 16px; }
.nick-msg.is-bad { color: var(--bad); }
.nick-msg.is-good { color: var(--good); }

.profile-form__lang { text-align: center; }
.flags { display: flex; justify-content: center; gap: 18px; margin: 10px 0 8px; }
.flag {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: var(--font-display); font-weight: 900; font-size: 12px; text-transform: uppercase; color: var(--lav-dim);
  transition: transform .15s ease, color .15s ease;
}
.flag__well { width: 52px; height: 52px; border-radius: 14px; background: var(--well); box-shadow: var(--well-sh); display: flex; align-items: center; justify-content: center; }
.flag__well img { width: 40px; height: 40px; }
.flag.is-on { color: var(--gold); transform: translateY(-2px); }
.flag.is-on .flag__well { background: rgba(255, 216, 20, .12); box-shadow: inset 0 0 0 2.5px var(--gold), 0 3px 0 var(--yellow-d); }

.profile-form__form > .btn-y--xl { margin-top: 4px; }
.profile-form__save-hint { text-align: center; color: var(--on-y); min-height: 16px; margin-top: -2px; }

/* The avatar window */
.modal { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: center; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(14, 4, 38, .72); animation: fade .2s ease both; }
.sheet {
  position: relative; width: calc(100% - 24px); max-width: calc(var(--max) - 24px);
  margin: calc(var(--safe-top) + 48px) 0 calc(var(--safe-bottom) + 48px);
  display: flex; flex-direction: column; padding: 14px 14px 16px;
  animation: pop .22s cubic-bezier(.34, 1.56, .64, 1) both;
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet__head .sec-title { font-size: 16px; }
.sheet__grid {
  flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  align-content: start; padding: 3px 3px 8px; margin: 0 -3px;
  scrollbar-width: thin; scrollbar-color: var(--lav-dim) transparent;
}
.sheet__foot { display: flex; margin-top: 12px; }
.sheet__confirm { flex: 1; min-height: 48px; font-size: 17px; border-radius: 12px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }

.tile {
  position: relative; aspect-ratio: 1; padding: 3px; border-radius: 12px;
  background: var(--well); box-shadow: var(--well-sh);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tile .face { width: 100%; height: 100%; }
.tile .face--empty { background: none; box-shadow: none; }
.tile.is-on { box-shadow: inset 0 0 0 3px var(--gold), 0 3px 0 var(--yellow-d); transform: translateY(-2px); }
.tile.is-on::after {
  content: ''; position: absolute; z-index: 2; right: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a1470' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: 0 1px 0 var(--ink);
}
.tile:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ profile page */

.profile { padding-top: 0; padding-left: 0; padding-right: 0; gap: 0; }

/* The purple maze (playwoo-bg .bg-maze) with the white separator under it. It is
 * the avatar's stage: a bigger or wider avatar spills out of its frame but never
 * out of the purple. */
.profile__head {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--safe-top) + 12px) 12px 18px;
  background: var(--bg-purple);
  border-bottom: var(--separator-size) solid var(--bg-separator);
}
.profile__head::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--bg-purple-lines);
  -webkit-mask: var(--maze-tile) 0 0 / var(--maze-size) var(--maze-size) repeat;
          mask: var(--maze-tile) 0 0 / var(--maze-size) var(--maze-size) repeat;
}

.profile__top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.profile__logo { width: 150px; }

/* The player's frame round their avatar, and the name plate under it. */
.profile__stage { display: flex; flex-direction: column; align-items: center; margin-top: 2px; }
.profile__avatar { position: relative; display: block; width: min(58%, 230px); aspect-ratio: 1; }
.profile__avatar .framed .face { overflow: visible; }
/* The face keeps its height and may be wider than the window. */
.profile__avatar .framed .face img {
  position: absolute; left: 50%; top: 0; height: 100%; width: auto; max-width: none;
  transform: translateX(-50%);
}
.profile__avatar .framed__frame { z-index: 1; }

.profile__plate { position: relative; z-index: 1; width: min(66%, 260px); margin-top: -8px; display: flex; align-items: center; justify-content: center; }
.profile__plate img { position: absolute; inset: 0; width: 100%; height: 100%; }
.profile__plate span {
  position: relative; max-width: 78%;
  font-family: var(--font-display); font-weight: 900; font-size: 16px; line-height: 1;
  color: #fff; text-shadow: 0 1px 0 var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile__plate.is-long span { font-size: 12px; }

.level { position: relative; padding: 12px 14px; border-radius: 14px; }
.level__crown { position: absolute; left: 12px; top: 12px; width: 44px; height: 36px; }
.level__text { margin-left: 54px; min-height: 36px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.level__title { font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 1; color: #fff; white-space: nowrap; }
.level__title b { color: var(--gold); font-size: 21px; }
.level__next { font-size: 12px; color: var(--lav-dim); }
.level .bar { margin-top: 8px; }
.level__foot { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--lav); }
.level__pct { color: var(--gold); }

.profile__body { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 0; }
.profile__body > .level { margin-bottom: 2px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 10px 6px 12px; border-radius: 14px; }
.stat__icon { height: 36px; width: auto; }
.stat__icon svg { height: 36px; width: auto; }
.stat__label { margin-top: 6px; font-size: 12px; color: var(--lav); }
.stat__num { margin-top: 3px; font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 1; color: var(--gold); text-shadow: 0 2px 0 var(--ink); }

.top3 { display: flex; align-items: center; gap: 14px; padding: 14px; box-shadow: var(--card-sh), 0 0 0 2px var(--yellow-d); }
.top3__crown { width: 58px; height: 46px; }
.top3__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.top3__label { font-size: 12px; color: var(--lav); }
.top3__pct { font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 1; color: var(--gold); text-shadow: 0 2px 0 var(--ink); }
.top3__of { flex: none; width: 76px; padding-left: 12px; border-left: 2px solid rgba(157, 134, 212, .35); font-size: 12px; line-height: 1.35; color: var(--lav-dim); }

.empty-card { padding: 14px; font-size: 13px; line-height: 1.4; color: var(--lav); }

/* ------------------------------------------------------------------ lobby */

.banner { aspect-ratio: 361 / 120; overflow: hidden; }
.banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* Two equal cards that may shrink (minmax 0: Samsung phones are ~360px wide),
 * and a podium sized as shares of the card, never in fixed pixels. */
.leaders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.leaders__card { min-width: 0; padding: 10px 6px 12px; text-align: center; }
.leaders__card .sec-title { font-size: clamp(11px, 3.4vw, 13px); }
.leaders__empty { margin-top: 12px; font-size: 11px; color: var(--lav-dim); }
.podium--empty { opacity: .55; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 2%; margin-top: 8px; }
.podium__spot { position: relative; flex: none; aspect-ratio: 1; }
.podium__spot .face { width: 100%; height: 100%; border-radius: 12px; }
.podium__spot--gold { width: 42%; max-width: 72px; margin-bottom: 10px; z-index: 2; }
.podium__spot--silver, .podium__spot--bronze { width: 29%; max-width: 51px; }
.podium__rank {
  position: absolute; z-index: 5; left: 50%; bottom: -8px; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 900; font-size: 11px; line-height: 18px; text-align: center;
  color: var(--on-y); box-shadow: 0 1.5px 0 var(--ink);
}
.podium__spot--gold .podium__rank { background: #ffd814; width: 20px; height: 20px; line-height: 20px; }
.podium__spot--silver .podium__rank { background: #c9d3e6; }
.podium__spot--bronze .podium__rank { background: #e08a4a; }
.podium__spot--gold .face--empty { box-shadow: inset 0 0 0 2.5px #ffd814; }
.podium__spot--silver .face--empty { box-shadow: inset 0 0 0 2px #c9d3e6; }
.podium__spot--bronze .face--empty { box-shadow: inset 0 0 0 2px #e08a4a; }

.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; border-radius: 13px; }
.tabs__tab {
  position: relative; isolation: isolate;
  min-height: 32px; padding: 0 6px; border-radius: 9px;
  font-family: var(--font-display); font-weight: 900; font-size: 11px; line-height: 1.1;
  text-transform: uppercase; letter-spacing: .1px; color: var(--lav-dim);
}
.tabs__tab.is-on { background: var(--yellow); color: var(--on-y); box-shadow: 0 2px 0 var(--yellow-d); }

.games, .tournaments { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 8px; }
.games { min-height: 150px; }
.games__empty { padding: 18px 8px; text-align: center; font-size: 14px; color: var(--on-y); }
.games__create { margin-top: 4px; }
.games .btn-d, .tournaments .btn-d { margin-top: 4px; }
.panel-title {
  padding: 2px 4px 2px; font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 1.1;
  text-transform: uppercase; color: var(--purple); text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}
.panel-sub { margin: -4px 4px 2px; font-size: 12px; color: var(--on-y); }

.row {
  display: flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 5px 6px 5px 5px; border-radius: 12px;
}
.row--ghost { background: rgba(58, 20, 112, .18); box-shadow: none; animation: shimmer 1.2s ease-in-out infinite alternate; }
@keyframes shimmer { to { opacity: .5; } }
.row__face { width: 36px; height: 36px; flex: none; }
.row__face.face--empty { border-radius: 9px; }
.row__trophy { width: 34px; height: 34px; flex: none; }
.row__info { flex: 1; min-width: 0; }
.row__title {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-weight: 900; font-size: 14px; line-height: 1.15; color: var(--lav);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row__title--gold { color: var(--gold); }
.row__lock { width: 13px; height: 13px; color: var(--gold); }
.row__lock svg { stroke-width: 2.8; }
.row__meta { margin-top: 2px; font-size: 11px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.count-pill {
  flex: none; min-width: 38px; height: 34px; padding: 0 6px; border-radius: 8px;
  background: rgba(10, 3, 30, .55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 12px; line-height: 1; color: #fff;
}
.count-pill .ico { width: 11px; height: 11px; color: var(--lav-dim); }
.row .btn-y { flex: none; }

/* The narrowest phones (320-359px): tighter rows so the game name keeps room. */
@media (max-width: 359px) {
  .row { gap: 6px; }
  .row__face { width: 30px; height: 30px; }
  .row .btn-y--sm { padding: 0 7px; font-size: 10px; }
  .count-pill { min-width: 32px; }
  .tabs__tab { font-size: 10px; padding: 0 3px; }
}

/* The tournament with art: the big card from the lobby layout. */
.tcard { display: flex; gap: 10px; padding: 9px; border-radius: 12px; }
.tcard__art { flex: none; width: 42%; aspect-ratio: 139 / 78; object-fit: cover; border-radius: 9px; align-self: center; }
.tcard__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tcard__title { font-family: var(--font-display); font-weight: 900; font-size: 15px; line-height: 1.1; color: var(--gold); text-transform: uppercase; }
.tcard__status { font-size: 12px; color: var(--lav); }
.tcard__prize { font-size: 12px; color: #fff; }
.tcard__actions { display: flex; gap: 6px; margin-top: 4px; }
.tcard__actions .btn-y { flex: 1; min-width: 0; }
.tcard__actions .count-pill { height: 30px; }
.tcard .btn-y.is-joined { filter: saturate(.4) brightness(.95); }

.rent { padding: 14px; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.rent__title { font-family: var(--font-display); font-weight: 900; font-size: 17px; color: var(--gold); text-transform: uppercase; }
.rent__text { font-size: 13px; line-height: 1.4; color: var(--lav); }

/* ------------------------------------------------------------------ settings */

.settings__card { padding: 4px 14px; }
.setting {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 8px 0; text-align: left;
}
.setting + .setting { border-top: 1px solid rgba(157, 134, 212, .2); }
.setting > .ico { width: 24px; height: 24px; color: var(--gold); }
.setting__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.setting__label { font-family: var(--font-display); font-weight: 900; font-size: 15px; color: #fff; }
.setting__value { font-size: 13px; color: var(--lav-dim); }
.setting__chevron { width: 18px; height: 18px; color: var(--lav-dim); transform: scaleX(-1); }
.switch {
  flex: none; position: relative; width: 50px; height: 30px; border-radius: 999px;
  background: var(--well); box-shadow: var(--well-sh), inset 0 0 0 2px var(--lav-dim);
  transition: background .15s ease, box-shadow .15s ease;
}
.switch::after {
  content: ''; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--lav-dim); transition: transform .18s var(--ease), background .15s ease;
}
.setting[aria-checked='true'] .switch { background: var(--yellow); box-shadow: 0 2px 0 var(--yellow-d); }
.setting[aria-checked='true'] .switch::after { transform: translateX(20px); background: #fff; }
.settings__dev { margin-top: 8px; }

/* ------------------------------------------------------------------ nav bar */

.navbar {
  position: fixed; z-index: 20;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + 8px);
  width: calc(min(100%, var(--max)) - 16px);
  height: var(--nav-h);
  padding: 5px; border-radius: 18px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
}
.navbar__item {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: 14px; color: var(--lav-dim);
  font-family: var(--font-display); font-weight: 900; font-size: 10px; line-height: 1; text-transform: uppercase;
  transition: transform .12s ease;
}
.navbar__item .ico { width: 24px; height: 24px; }
.navbar__item:active { transform: translateY(2px); }
.navbar__item.is-on { background: var(--yellow); color: var(--on-y); box-shadow: var(--y-edge); }
.navbar__item.is-on::after {
  content: ''; position: absolute; z-index: -1; left: 8px; right: 8px; top: 2px; height: 30%;
  border-radius: 10px 10px 6px 6px; opacity: .6;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .2) 100%);
}
.navbar__item.is-on .ico svg { stroke-width: 2.5; }

/* ------------------------------------------------------------------ landscape */

/* The app is portrait only. Telegram 8.0+ locks it (app.js); on an older
 * client a phone turned sideways gets this instead of a cut-off layout. */
#rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #rotate {
    position: fixed; inset: 0; z-index: 100;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: var(--bg-yellow); color: var(--purple);
    font-family: var(--font-display); font-weight: 900; font-size: 20px; text-align: center;
  }
  #rotate img { width: 140px; }
  #rotate::after {
    content: ''; width: 34px; height: 54px; border: 4px solid var(--purple); border-radius: 8px;
    animation: turn 1.6s var(--ease) infinite alternate;
  }
  body:has(#rotate) #app, body:has(#rotate) .navbar { visibility: hidden; }
}
@keyframes turn { from { transform: rotate(-90deg); } to { transform: rotate(0deg); } }

/* ------------------------------------------------------------------ toast */

#toast {
  position: fixed; z-index: 50; left: 50%; top: calc(var(--safe-top) + 20px);
  transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 11px 18px; border-radius: 12px;
  background: var(--card-bg); box-shadow: var(--card-sh);
  font-size: 14px; color: var(--gold); text-align: center;
  animation: toast-in 220ms var(--ease) both;
}
#toast.is-out { opacity: 0; transition: opacity 250ms; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -12px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}