/* Viewport layout for profiles; the player retains its scaled 1920x1080 stage.
   Chromium 47: flex/margins, no grid, gap, CSS variables or native dialog. */
#stage.profiles-surface { position: fixed; width: 100%; height: 100%; max-height: 100%; }
.profiles-surface #sky, #profiles { width: 100%; height: 100%; }
.profiles-surface .screen:not(#profiles) { display: none; }
#profiles:not(.on) { transition: none; -webkit-transition: none; }
#profiles { overflow: hidden; }
#profiles *, #profiles *:before, #profiles *:after { box-sizing: border-box; }
#profiles button { font-family: inherit; border: 0; cursor: pointer; }
#profiles button:focus { outline: none; }
#profiles .brand { left: 32px; top: 28px; font-size: 38px; }
.profiles-content { height: 100%; overflow: auto; padding: 96px 24px 36px; display: flex; flex-direction: column; align-items: center; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#profiles .pf-title { position: static; flex-shrink: 0; margin: auto 0 30px; font-size: 32px; line-height: 1.2; }
#profiles .pf-row { position: static; display: flex; flex-wrap: wrap; justify-content: center; flex-shrink: 0; width: 100%; max-width: 1200px; white-space: normal; }
#profiles .pf { width: 168px; margin: 14px 16px; padding: 0; background: transparent; color: inherit; font: inherit; }
#profiles .pf-av { display: block; width: 144px; height: 144px; border-radius: 26px; font-size: 58px; line-height: 144px; }
#profiles .pf-av img, #profiles .pe-a img, .pe-preview img { width: 100%; height: 100%; display: block; }
#profiles .pf.focus .pf-av { transform: scale(1.035); -webkit-transform: scale(1.035); box-shadow: 0 0 0 3px #F5F5F7, 0 12px 28px rgba(0,0,0,.35); animation: none; -webkit-animation: none; }
#profiles .pf-n { display: block; margin-top: 18px; font-size: 18px; line-height: 25px; }
#profiles .pf-tags { display: block; height: 24px; margin-top: 5px; font-size: 12px; line-height: 22px; }
#profiles .pf-tags svg { width: 16px; height: 16px; }
#profiles .pf-ed { line-height: 144px; }
#profiles .pf-ed svg { width: 36px; height: 36px; }
#profiles .pf-actions { position: static; flex-shrink: 0; margin-top: 26px; margin-bottom: auto; text-align: center; }
#profiles .pf-btn { min-height: 44px; height: auto; margin: 4px 6px; padding: 10px 22px; border-radius: 9px; font-size: 14px; line-height: 24px; }
#profiles .pf-btn.focus { transform: none; -webkit-transform: none; box-shadow: 0 0 0 2px #F5F5F7; }
#profiles .pf-modal { width: 100%; height: 100%; padding: 24px; padding: calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left)); align-items: center; justify-content: center; background: rgba(0,0,0,.72); }
#profiles .pf-modal.on { display: flex; }
#profiles .pf-box.edit { position: relative; top: auto; left: auto; width: 620px; max-width: 100%; height: auto; max-height: 100%; padding: 0; border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; }
.pe-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.09); }
.pe-header > div:first-child { min-width: 0; }
#profiles .pe-title { margin: 0; padding: 0; font-size: 23px; line-height: 30px; }
.pe-header p { margin: 5px 16px 0 0; color: #B5B5BE; font-size: 13px; line-height: 20px; }
.pe-preview { width: 58px; height: 58px; flex-shrink: 0; border-radius: 14px; overflow: hidden; text-align: center; line-height: 58px; font-size: 26px; font-weight: 600; }
.pe-body { min-height: 0; overflow: auto; padding: 0 24px 22px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#profiles .edit .lg-l { margin: 20px 0 8px; padding: 0; font-size: 13px; line-height: 20px; color: #B5B5BE; }
#profiles .edit .lg-in { width: 100%; height: 40px; margin: 0; padding: 0 12px; border-radius: 8px; font-size: 16px; }
#profiles .edit .lg-in.focus, #profiles .edit .lg-in:focus { box-shadow: inset 0 0 0 2px #91C8FF; }
#profiles .pe-avatars { display: block; margin: 0; padding: 0; font-size: 0; white-space: normal; }
.pe-avatar-grid { display: flex; flex-wrap: wrap; margin: -5px; }
.pe-gallery-title { margin: 20px 0 12px; font-size: 12px; line-height: 18px; color: #B5B5BE; }
.pe-gallery-title:first-child { margin-top: 0; }
#profiles .pe-a { position: relative; display: block; flex-shrink: 0; width: 68px; height: 68px; margin: 5px; padding: 0; border-radius: 13px; line-height: 68px; font-size: 25px; transform: none; -webkit-transform: none; }
#profiles .pe-a.sel { box-shadow: 0 0 0 2px #28282D, 0 0 0 4px #0A84FF; animation: avatar-select .18s ease-out; -webkit-animation: avatar-select .18s ease-out; }
@keyframes avatar-select { from { transform: scale(.96); } to { transform: scale(1); } }
@-webkit-keyframes avatar-select { from { -webkit-transform: scale(.96); } to { -webkit-transform: scale(1); } }
.pe-photo-row { display: flex; align-items: center; margin-top: 22px; cursor: pointer; }
.pe-photo-row > div { min-width: 0; margin-left: 14px; }
.pe-photo-row strong { font-size: 14px; line-height: 20px; font-weight: 500; }
.pe-photo-row p, .pe-photo-help { margin: 4px 0 0; color: #B5B5BE; font-size: 12px; line-height: 18px; }
#profiles .pe-photo-help { margin-top: 20px; }
#profiles .pe-photo { margin: 0; background: #34343A; color: #B8DFFF; }
.pe-camera { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pe-camera svg { width: 30px; height: 30px; }
.pe-photo-status { margin: 12px 0 0; color: #FF9994; font-size: 13px; line-height: 20px; }
.pe-photo-status:empty { display: none; }
#pe-photo-file { display: none; }
#profiles .pe-btns .pf-btn:disabled { opacity: .5; cursor: default; }
#profiles .pe-a.sel:after { content: '✓'; position: absolute; right: 3px; bottom: 3px; width: 19px; height: 19px; border-radius: 10px; color: #FFF; background: #007AFF; font-size: 12px; line-height: 19px; text-align: center; }
#profiles .pe-a.focus { outline: 2px solid #F5F5F7; outline-offset: 3px; }
#profiles .pe-colors { display: flex; flex-wrap: wrap; padding: 0; margin: -5px; font-size: 0; }
#profiles .pe-c { position: relative; width: 34px; height: 34px; flex-shrink: 0; margin: 5px 13px 5px 5px; padding: 0; border-radius: 50%; transform: none; -webkit-transform: none; }
#profiles .pe-c.sel { box-shadow: 0 0 0 2px #28282D, 0 0 0 4px #F5F5F7; }
#profiles .pe-c.focus { outline: 2px solid #91C8FF; outline-offset: 5px; }
#profiles .pe-kids { display: flex; width: 100%; align-items: center; margin: 20px 0 0; padding: 14px; border-radius: 10px; text-align: left; color: #F5F5F7; font-size: 14px; line-height: 21px; }
#profiles .pe-kids.focus { box-shadow: inset 0 0 0 2px #91C8FF; }
#profiles .pe-tg { width: 38px; height: 24px; flex-shrink: 0; margin: 0 12px 0 0; border-radius: 12px; }
#profiles .pe-tg span { width: 18px; height: 18px; left: 3px; top: 3px; }
#profiles .pe-tg.on span { left: 17px; }
#profiles .lg-in.pe-pin { max-width: 180px; letter-spacing: 8px; }
#profiles .pe-btns { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; flex-shrink: 0; margin: 0; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.12); }
#profiles .pe-btns .pf-btn { margin: 4px 6px; min-width: 92px; }
#profiles .pe-btns .primary { background: #007AFF; color: #FFF; }
#profiles .pe-btns .danger { margin-right: auto; color: #FF8580; }
.profiles-surface #toast { top: auto; bottom: 24px; max-width: calc(100% - 32px); height: auto; padding: 12px 20px; border-radius: 12px; font-size: 14px; line-height: 22px; white-space: normal; text-align: center; }
#profiles .pf-box.pin { position: relative; top: auto; left: auto; width: 360px; max-width: 100%; height: auto; max-height: 100%; padding: 24px; overflow: auto; border-radius: 20px; touch-action: pan-y; }
#profiles .pin .hint, #profiles .pin .code, #profiles .pin .keypad, #profiles .pin .error { position: static; width: auto; height: auto; margin: 0; padding: 0; }
#profiles .pin .hint { font-size: 18px; line-height: 26px; }
#profiles .pin .code { margin: 22px 0; }
#profiles .pin .code span { width: 48px; height: 56px; margin: 0 5px; border-radius: 12px; font-size: 30px; line-height: 56px; }
#profiles .pin .code span.next:after { top: 17px; left: 23px; height: 24px; width: 2px; }
#profiles .pin .keypad { display: flex; flex-wrap: wrap; justify-content: center; }
#profiles .pin .key { float: none; width: calc(33.333% - 10px); height: 54px; margin: 5px; border-radius: 10px; font-size: 24px; line-height: 54px; }
#profiles .pin .key.word { font-size: 16px; }
#profiles .pin .error { min-height: 24px; margin-top: 12px; font-size: 14px; line-height: 22px; }
#profiles .pin .pf-btn { display: block; width: 100%; margin: 12px 0 0; }
#profiles .pin .pf-btn:focus { box-shadow: 0 0 0 2px #F5F5F7; }
#profiles[data-input="pointer"] .pe-a.focus, #profiles[data-input="touch"] .pe-a.focus,
#profiles[data-input="pointer"] .pe-c.focus, #profiles[data-input="touch"] .pe-c.focus { outline: none; }
.m-tv #profiles .brand { left: 4%; top: 5%; font-size: 60px; }
.m-tv #profiles .pf-title { font-size: 48px; margin-bottom: 50px; }
.m-tv #profiles .pf { width: 230px; margin: 18px 24px; }
.m-tv #profiles .pf-row { max-width: 1600px; }
.m-tv #profiles .pf-av { width: 200px; height: 200px; line-height: 200px; font-size: 84px; border-radius: 36px; }
.m-tv #profiles .pf-ed { line-height: 200px; }
.m-tv #profiles .pf-n { font-size: 28px; line-height: 36px; }
.m-tv #profiles .pf-tags { height: 30px; font-size: 18px; line-height: 28px; }
.m-tv #profiles .pf-tags svg { width: 24px; height: 24px; }
.m-tv #profiles .pf-btn { min-height: 56px; padding: 12px 28px; font-size: 22px; line-height: 32px; }
.m-tv #profiles .pf-box.edit { width: 880px; }
.m-tv .pe-header { padding: 24px 32px; }
.m-tv #profiles .pe-title { font-size: 32px; line-height: 40px; }
.m-tv .pe-header p { font-size: 20px; line-height: 28px; }
.m-tv .pe-preview { width: 76px; height: 76px; line-height: 76px; }
.m-tv .pe-body { padding: 0 32px 28px; }
.m-tv #profiles .edit .lg-l { font-size: 20px; line-height: 28px; }
.m-tv #profiles .edit .lg-in { height: 56px; font-size: 24px; }
.m-tv #profiles .pe-a { width: 96px; height: 96px; margin: 8px; line-height: 96px; border-radius: 18px; }
.m-tv #profiles .pe-avatars { margin: 0; }
.m-tv .pe-avatar-grid { margin: -8px; }
.m-tv .pe-gallery-title { margin-top: 24px; font-size: 18px; line-height: 24px; }
.m-tv .pe-photo-row strong { font-size: 20px; line-height: 28px; }
.m-tv .pe-photo-row p, .m-tv .pe-photo-help { font-size: 18px; line-height: 26px; }
.m-tv #profiles .pe-c { width: 44px; height: 44px; margin-right: 22px; }
.m-tv #profiles .pe-kids { font-size: 21px; line-height: 30px; padding: 16px; }
.m-tv #profiles .pe-btns { padding: 14px 26px; }
.m-tv.profiles-surface #toast { font-size: 22px; line-height: 30px; }
.m-tv #profiles .pf-box.pin { width: 480px; padding: 32px; }
.m-tv #profiles .pin .key { height: 70px; line-height: 70px; font-size: 30px; }
.m-tv #profiles .pin .hint { font-size: 26px; line-height: 34px; }
@media (max-width: 1400px), (max-height: 800px) {
  .m-tv #profiles .pf-box.edit { width: 720px; }
  .m-tv #profiles .pe-a { width: 76px; height: 76px; margin: 7px; line-height: 76px; }
  .m-tv #profiles .pe-title { font-size: 28px; line-height: 34px; }
  .m-tv .pe-header { padding: 18px 28px; }
  .m-tv .pe-header p { font-size: 18px; line-height: 24px; }
  .m-tv #profiles .edit .lg-l { margin-top: 16px; font-size: 18px; line-height: 24px; }
  .m-tv #profiles .edit .lg-in { height: 48px; font-size: 22px; }
  .m-tv #profiles .pe-kids { font-size: 18px; line-height: 26px; }
  .m-tv #profiles .pf-av { width: 154px; height: 154px; line-height: 154px; }
  .m-tv #profiles .pf-ed { line-height: 154px; }
  .m-tv #profiles .pf { width: 180px; margin: 14px 18px; }
  .m-tv #profiles .pf-title { font-size: 38px; margin-bottom: 28px; }
}
@media (pointer: coarse), (max-width: 600px) {
  #profiles .edit .lg-in { height: 44px; }
  #profiles .pe-c { width: 44px; height: 44px; margin-right: 10px; }
  #profiles .pf-btn { min-height: 44px; font-size: 16px; }
}
@media (max-width: 600px) {
  #profiles .brand { left: 20px; top: 22px; font-size: 30px; }
  .profiles-content { padding: 84px 12px 28px; justify-content: flex-start; }
  #profiles .pf-title { font-size: 26px; margin: 20px 0; }
  #profiles .pf { width: calc(50% - 24px); max-width: 156px; margin: 12px; }
  #profiles .pf-av { width: 112px; height: 112px; line-height: 112px; border-radius: 22px; }
  #profiles .pf-ed { line-height: 112px; }
  #profiles .pf-n { margin-top: 14px; font-size: 16px; line-height: 22px; }
  #profiles .pf-modal { padding: 12px; padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
  #profiles .pf-box.edit { border-radius: 16px; }
  .pe-header { padding: 16px; }
  #profiles .pe-title { font-size: 21px; line-height: 28px; }
  .pe-header p { font-size: 13px; line-height: 19px; }
  .pe-preview { width: 48px; height: 48px; line-height: 48px; border-radius: 12px; }
  .pe-body { padding: 0 16px 18px; }
  #profiles .edit .lg-l { margin-top: 18px; font-size: 14px; }
  #profiles .pe-a { width: calc(20% - 10px); height: auto; line-height: 1; }
  #profiles .pe-a:before { content: ''; display: block; padding-top: 100%; }
  #profiles .pe-a img, #profiles .pe-a .pe-initial { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  #profiles .pe-a .pe-camera { position: absolute; top: 0; left: 0; }
  #profiles .pe-a .pe-initial { display: flex; align-items: center; justify-content: center; }
  #profiles .pe-btns { padding: 8px 10px; }
  #profiles .pe-btns .pf-btn { min-width: 0; padding: 10px 14px; font-size: 14px; }
}
@media (max-height: 500px) {
  #profiles .brand { top: 14px; font-size: 28px; }
  .profiles-content { padding-top: 58px; justify-content: flex-start; }
  #profiles .pf-title { margin: 8px 0 16px; font-size: 25px; }
  #profiles .pf-av { width: 100px; height: 100px; line-height: 100px; }
  #profiles .pf-ed { line-height: 100px; }
  #profiles .pf { width: 128px; margin: 10px; }
  #profiles .pf-actions { margin-top: 10px; }
  .pe-header { padding-top: 12px; padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #profiles, #profiles .pf-av, #profiles .pf-btn, #profiles .pe-a, #profiles .pe-c { transition: none; -webkit-transition: none; animation: none; -webkit-animation: none; }
}
#profiles[data-theme="light"] .pf-box { background: #F5F5F7; color: #1D1D1F; }
#profiles[data-theme="light"] .pe-header, #profiles[data-theme="light"] .pe-btns { border-color: rgba(0,0,0,.1); }
#profiles[data-theme="light"] .pe-header p, #profiles[data-theme="light"] .edit .lg-l { color: #63636D; }
#profiles[data-theme="light"] .pf-n, #profiles[data-theme="light"] .pf-tags { color: #63636D; }
#profiles[data-theme="light"] .pf.focus .pf-n { color: #1D1D1F; }
#profiles[data-theme="light"] .pf.focus .pf-av { box-shadow: 0 0 0 3px #1D1D1F, 0 12px 28px rgba(0,0,0,.15); }
#profiles[data-theme="light"] .pf.add .pf-av { background: rgba(0,0,0,.06); color: #63636D; box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); }
#profiles[data-theme="light"] .pe-kids { color: #1D1D1F; }
#profiles[data-theme="light"] .pe-a.sel { box-shadow: 0 0 0 2px #F5F5F7, 0 0 0 4px #007AFF; }
#profiles[data-theme="light"] .pe-a.focus { outline-color: #1D1D1F; }
#profiles[data-theme="light"] .pe-gallery-title, #profiles[data-theme="light"] .pe-photo-row p, #profiles[data-theme="light"] .pe-photo-help { color: #63636D; }
#profiles[data-theme="light"] .pe-photo { background: #E1E7EF; color: #0054AD; }
#profiles[data-theme="light"] .pe-photo-status { color: #B42318; }
#profiles[data-theme="light"] .pe-c.sel { box-shadow: 0 0 0 2px #F5F5F7, 0 0 0 4px #1D1D1F; }
#profiles[data-theme="light"] .pe-tg { background: #B5B5BE; }
#profiles[data-theme="light"] .pe-tg.on { background: #30D158; }
#profiles[data-theme="light"] .pe-btns .danger { color: #D70015; }