header{height:auto;min-height:88px;flex-wrap:wrap;padding:20px 0;gap:12px}header .exam-date{display:none}.brand{margin-right:auto}#account-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}#account-bar button{font-size:12px}#account-status{font-size:11px;color:var(--muted);width:100%;text-align:right}#account-status:empty{display:none}.account-page{max-width:420px;margin:8vh auto}.account-page h1{font-size:32px}.account-form{display:grid;gap:18px}.account-form label{display:grid;gap:8px;font-size:13px}.account-links{display:flex;gap:20px;margin-top:20px}.account-links button{padding:0;border:0;background:none;font-size:13px}.account-error{color:#a42626;font-size:13px;line-height:1.5}.recovery-code{overflow-wrap:anywhere;padding:18px;background:var(--soft);border-radius:10px;user-select:all;font-size:15px;line-height:1.7}.social-page{max-width:800px;margin:auto}.social-page h1{margin:0}.social-head{margin-bottom:28px}.social-controls{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}.social-controls label{display:grid;gap:8px;font-size:12px}.social-controls select{max-width:100%}.social-controls label:first-child{flex:1;min-width:180px}.friends-code{font-size:22px;letter-spacing:2px;font-variant-numeric:tabular-nums}.friend-row{display:flex;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}.friend-row .friend-name{flex:1}.friend-row button{padding:8px 12px;font-size:12px}.friend-name small{display:block;color:var(--muted);margin-top:6px}.friend-add{display:flex;gap:12px;margin:24px 0}.friend-add input{min-width:0;flex:1;text-transform:uppercase}.daily-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:30px}.daily-stat{padding:22px 18px;border-radius:14px;background:var(--soft)}.daily-stat strong{display:block;font-size:26px;font-weight:500;margin-bottom:8px}.daily-stat span{font-size:12px;color:var(--muted)}.board-wrap{overflow-x:auto}.board{width:100%;border-collapse:collapse;font-size:13px}.board th{font-size:11px;color:var(--muted);font-weight:400}.board th,.board td{text-align:left;padding:17px 12px;border-bottom:1px solid var(--line);white-space:nowrap}.board td:nth-child(2){white-space:normal;min-width:120px}.board tr.you td{background:var(--soft);font-weight:600}.board tr.you td:first-child{border-radius:10px 0 0 10px}.board tr.you td:last-child{border-radius:0 10px 10px 0}.board-empty{padding:30px 0;color:var(--muted);font-size:13px}.board-rule{font-size:12px;color:var(--muted);margin:20px 0}.account-dialog button{margin-top:16px}@media(max-width:560px){#app{padding:0 18px}header{gap:8px}.brand{font-size:22px}#account-bar{width:100%;justify-content:space-between;gap:4px}#account-bar button{padding:8px}.daily-stat{padding:17px 12px}.daily-stat strong{font-size:22px}.board th,.board td{padding:14px 9px}.social-controls{gap:10px}.friend-add{flex-wrap:wrap}.friends-code{font-size:19px}.account-page{margin:4vh auto}}

/* Fit everyday practice to the available window, including the account controls. */
html,body{height:100%;overscroll-behavior:none}
#app{height:100dvh;display:flex;flex-direction:column;max-width:1180px}
header{flex:none;min-height:0;padding:12px 0 6px;gap:8px}
header .brand{font-size:22px}
#account-bar{gap:3px;flex-wrap:nowrap}
#account-bar button{padding:7px 9px;min-height:32px}
#account-status{line-height:14px;height:14px;font-size:10px}
.tab-strip{flex:none}
.tab-strip nav button{padding:10px 0;min-height:38px}
main{min-height:0;flex:1;overflow:auto;padding:16px 0 18px;scrollbar-gutter:stable}
main:has(.practice-home),main:has(.study),main:has(.home-menu){scrollbar-gutter:auto}
h1{font-size:25px;margin-bottom:16px}
.stats{gap:16px;padding-bottom:12px;margin-bottom:14px}
.stat strong{font-size:25px;margin-bottom:3px}
.practice-home{max-width:100%;}
.practice-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.practice-options button{padding:13px 8px 8px;min-height:88px;border-radius:14px}
.practice-options button kbd{top:5px;left:7px;font-size:9px;width:18px;height:18px}
.practice-options button .mode-example{min-height:35px;gap:6px}
.practice-options button .mode-hanzi{font-size:28px}
.practice-options button .mode-pinyin{font-size:22px}
.practice-options button .mode-meaning{font-size:17px}
.practice-options button .mode-label{font-size:12px;min-height:28px;margin-top:5px}
.word-selection{margin-top:8px;padding:10px 0}
.word-selection .controls{padding:12px 0 4px;gap:12px}
.start-row{margin-top:12px}
.start-row button.primary{padding:10px 32px}
.home-menu{height:100%;display:flex;flex-direction:column;justify-content:center;max-width:540px}
.home-logo{width:200px;max-height:22vh;object-fit:contain;margin:0 auto 20px}
.level-card{min-height:62px;padding:15px 22px;font-size:21px}
.study{width:100%;max-width:760px}
.study .question{min-height:100px;height:clamp(100px,20dvh,175px);gap:8px;padding:6px 38px}
.study .hanzi{font-size:clamp(42px,8dvh,70px)}
.study .hanzi.long{font-size:36px}
.study .choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.study .choice{min-height:50px;padding:9px 14px}
.study .choice>span[lang="zh-CN"]{font-size:30px}
.study .study-actions{margin-top:12px}
.study .hint{margin-top:10px}
.study .feedback{margin-top:12px;padding:12px;min-height:0}
.study .feedback .answer,.study .answer-hanzi:not(:empty){margin-top:8px;font-size:28px}
.study .components{margin-top:8px}
.study .tones button{min-height:48px;padding:4px 0}
.study .syllable input{height:48px}
.study .track{margin-top:10px}
.study .answered-question{height:100px}
.social-head{margin-bottom:16px}
.social-page .panel{padding:16px;margin:14px 0}
.friend-add{margin:14px 0}
.friend-row{padding:12px 0}
.friend-presence{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;margin-top:6px}
.player-title,.achievement-title{display:inline-block;margin-left:7px;padding:2px 7px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11px;font-weight:600}
.player-title small,.player-title i{margin-left:5px;font-size:8px;font-style:normal;text-transform:uppercase;letter-spacing:.08em;opacity:.8}.player-title[data-rarity="Common"]{color:#b9825d;border-color:#b9825d77}.player-title[data-rarity="Rare"]{color:#9cc9e8;border-color:#78abd077}.player-title[data-rarity="Epic"]{color:#78cda9;border-color:#55ad8877}.player-title[data-rarity="Amethyst"]{color:#c3a0ee;border-color:#a47ad377}.player-title[data-rarity="Gold"],.player-title[data-rarity="Legendary"]{color:#e5bc58;border-color:#c5943377}.player-title[data-rarity="Celestial"]{color:#b9e9f0;border-color:#d8fbff99;background:linear-gradient(110deg,#6cc7d615,#e4b9ff1c)}
.title-choice{display:flex;align-items:end;gap:12px}.title-choice label{flex:1}.title-choice select{width:100%;margin-top:6px}.title-choice #title-status{min-width:110px;color:var(--muted);font-size:12px}
.achievement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.achievement-card{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.achievement-card h2{font-size:16px;margin:0 0 3px}.achievement-card p{color:var(--muted);font-size:13px;margin:7px 0}.achievement-card progress{width:100%;height:7px}.achievement-card small{display:block;color:var(--muted);margin-top:4px}.achievement-card.is-locked .achievement-medal{filter:grayscale(1);opacity:.28}.achievement-medal{width:76px;height:76px;background:url('/hskduel/achievement-medals.png') var(--medal-x) var(--medal-y)/400% 300% no-repeat}
.achievement-medal.illustrated-medal{background-image:url('/hskduel/medals-illustrated.png');background-position:var(--illustrated-x) var(--illustrated-y);background-size:400% 300%}
.online-dot{width:8px;height:8px;background:#17834a;border-radius:50%;flex:none}
.daily-stats{margin-bottom:16px}
.daily-stat{padding:15px}
dialog{max-height:90dvh;overflow:auto}
@media(max-width:720px){
 #app{padding:0 16px}header{padding-top:8px;gap:4px}.brand span{display:none}
 #account-bar{order:3;width:100%;justify-content:space-between}#account-bar button{font-size:11px;padding:6px}
 #account-status{order:4}.tab-arrow kbd{display:none}.tab-strip nav{gap:16px}
 main{padding-top:10px}.stats{padding-bottom:8px;margin-bottom:8px}.stat strong{font-size:21px}
 .practice-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:8px 0}
 .practice-options button{display:flex;align-items:center;gap:6px;padding:10px 7px;min-height:60px}
 .practice-options button kbd{display:none}.practice-options button .mode-example{flex:1;gap:4px;min-width:0}
 .practice-options button .mode-label{flex:1;font-size:11px;line-height:1.25;min-height:0;margin:0}
 .practice-options button .mode-hanzi{font-size:23px}.practice-options button .mode-pinyin{font-size:18px}
 .practice-options button .mode-meaning{font-size:14px}.practice-options button .mode-arrow{font-size:14px}
 .practice-options button .mode-icon{width:24px;height:24px}.practice-options button .mode-tones{font-size:17px;letter-spacing:0}
 .practice-home h1{font-size:21px;margin:0}.word-selection{padding:8px 0}.controls input,.controls select{padding:8px;min-height:36px}
 .word-selection .controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.controls label{gap:4px}
 #order{align-self:end;min-height:36px;height:36px;font-size:16px}#length{width:100%}
 .start-row{margin-top:8px}.start-row button.primary{min-height:38px;padding:8px 22px}
 .study .meaning-prompt{font-size:22px}.study .pinyin-prompt{font-size:32px}
 .syllables{gap:8px}.syllable{min-width:85px}.syllable input{font-size:20px}
 .study .question{height:clamp(90px,17dvh,140px);min-height:90px}.study .hanzi.long{font-size:28px}
 .social-page h1{font-size:22px}.social-controls{margin-bottom:12px}.board th,.board td{padding:10px 6px}
 .daily-stat strong{font-size:22px}.social-page .panel{margin:10px 0}.friend-row{gap:8px}
 .achievement-grid{grid-template-columns:1fr}.title-choice{align-items:stretch;flex-direction:column}.achievement-card{grid-template-columns:64px 1fr}.achievement-medal{width:64px;height:64px}
}
@media(max-height:700px){
 header{padding-top:6px}main{padding-top:8px;padding-bottom:8px}
 .practice-options button{min-height:54px}.practice-options button .mode-label{min-height:22px}
 .home-logo{width:150px;margin-bottom:12px}.level-card{min-height:52px;padding:11px 18px}
 .study .question{height:90px;min-height:80px}.study .hanzi{font-size:46px}.study .answered-question{height:70px}
 .study .choice{min-height:44px}.study .choice>span[lang="zh-CN"]{font-size:26px}.study .feedback{padding:8px}
 .study .feedback .study-actions{margin-top:6px}.study .feedback .answer{margin-top:4px}
}
@media(max-width:720px){
 .tab-strip .tab-arrow{display:none}.tab-strip nav{gap:8px;justify-content:space-between;overflow:visible}
 .tab-strip nav button{font-size:11px;padding:8px 0;min-height:34px}
}
@media(max-width:720px) and (max-height:700px){
 header{gap:2px}#account-status{height:12px;line-height:12px}
 .practice-options button{min-height:46px;padding:5px 6px}.practice-options{gap:5px;margin:6px 0}
 .practice-options button .mode-example{min-height:30px}.practice-options button .mode-label{font-size:10px}
 .practice-home h1{font-size:19px}.stats{padding-bottom:6px;margin-bottom:6px}.stat strong{font-size:18px}
 .word-selection{padding:6px 0;margin-top:6px}.word-selection .controls{padding:8px 0 2px;gap:6px}
 .controls input,.controls select{min-height:32px;padding:6px}.controls label{font-size:11px}
 #order{height:32px;min-height:32px;font-size:14px}.start-row{margin-top:6px}
}

.achievement-card progress{display:block;appearance:none;border:0;border-radius:999px;background:var(--soft);height:4px;margin-top:13px;overflow:hidden}.achievement-card progress::-webkit-progress-bar{background:var(--soft);border-radius:999px}.achievement-card progress::-webkit-progress-value{background:var(--fg);border-radius:999px}.achievement-card progress::-moz-progress-bar{background:var(--fg);border-radius:999px}

/* Evolving medal families, one card per path. */
.medal-collection-header{margin:26px 0 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}.medal-collection-header>strong{font-size:26px;font-weight:550}.medal-collection-header>strong>span{font-size:13px;color:var(--muted);font-weight:400}.medal-filters{display:flex;gap:6px;flex-wrap:wrap}.medal-filters button{font-size:12px;padding:8px 14px;border-radius:999px;background:transparent}.medal-filters button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.achievement-card.medal-family{position:relative;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:18px;padding:22px;border-radius:24px;background:radial-gradient(ellipse at 10% 10%,#96969612,transparent 70%);overflow:hidden;box-shadow:inset 0 1px 0 #ffffff10,0 12px 32px #00000004}.medal-family[hidden]{display:none}.medal-family-top{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.17em}.medal-family h2{font-size:20px;font-weight:550;letter-spacing:-.025em}.medal-current{font-size:12px;color:var(--muted);font-weight:450}.medal-family-copy>p{min-height:34px;font-size:12px;line-height:1.5}.medal-family small{font-size:11px}
.medal-emblem{position:relative;width:104px;height:112px;display:grid;place-items:center;isolation:isolate}.medal-emblem .achievement-medal{width:100px;height:100px}.medal-emblem:before{content:'';position:absolute;inset:8px 6px 14px;border:1px solid #99999933;border-radius:50%;z-index:-1}.medal-emblem.tier-1:before{border-color:transparent}.medal-emblem.tier-2:before{box-shadow:0 0 0 3px #99999908}.medal-emblem.tier-3:before{border-style:double;border-width:3px}.medal-emblem.tier-4:before,.medal-emblem.tier-5:before{border-width:3px;box-shadow:0 0 0 4px #9999991a,0 0 20px #aaa2}.medal-emblem.tier-6:before,.medal-emblem.tier-7:before,.medal-emblem.tier-8:before{border-width:3px;box-shadow:0 0 0 4px #9994,0 0 0 8px #9992,0 0 30px #aaa5}.medal-rank{position:absolute;bottom:0;left:50%;transform:translateX(-50%);min-width:26px;text-align:center;padding:3px 7px;background:var(--fg);color:var(--bg);border-radius:6px;font-size:9px;letter-spacing:.12em;font-weight:600}
.medal-tier-track{display:flex;gap:4px;margin-top:12px}.medal-tier-track i{height:3px;flex:1;background:var(--line);border-radius:4px}.medal-tier-track i.earned{background:var(--fg)}.medal-tier-list{grid-column:1/-1;border-top:1px solid var(--line);padding-top:11px}.medal-tier-list summary{cursor:pointer;color:var(--muted);font-size:11px;list-style:none}.medal-tier-list summary:after{content:'+';float:right}.medal-tier-list[open] summary:after{content:'−'}.medal-tier-list>div{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);opacity:.6}.medal-tier-list>div.earned{opacity:1}.medal-tier-list>div:last-child{border:0}.medal-tier-list strong{font-size:13px}.medal-tier-list p{font-size:12px;line-height:1.5;margin:4px 0}.medal-tier-number{font-size:11px;min-width:22px;color:var(--muted)}.medal-family[data-rarity="Legendary"]{border-color:#9b876455;background:radial-gradient(ellipse at 10% 0%,#ae96701a,transparent 65%)}.medal-family[data-rarity="Legendary"] .medal-family-top>span:last-child{color:#aa8e56}
.medal-unlock{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#050506b8;backdrop-filter:blur(8px);animation:medal-veil .4s both;color:#f5f5f5;--fg:#f5f5f5;--bg:#141414;--line:#ffffff20;--muted:#aaa}.medal-unlock-body{position:relative;text-align:center;width:min(420px,calc(100vw - 40px));padding:34px 26px;border:1px solid #fff2;border-radius:28px;background:radial-gradient(ellipse at 50% 20%,#99999926,transparent 70%),#131313;box-shadow:0 30px 120px #000a;animation:medal-arrive .8s cubic-bezier(.2,.8,.2,1) both}.medal-unlock-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase}.medal-unlock .medal-emblem{transform:scale(1.6);margin:48px auto 42px;filter:drop-shadow(0 0 25px #ffffff30);animation:medal-forge 1s both}.medal-unlock h2{font-size:30px;font-weight:500;letter-spacing:-.035em;margin:0}.medal-unlock p{font-size:12px;color:#aaa;margin:10px 0}.medal-unlock .achievement-title{font-size:11px;margin:6px auto 22px;display:table}.medal-unlock button{display:block;width:100%;border:0;border-radius:14px;padding:14px;background:#eee;color:#161616;font:inherit}.medal-unlock-rays{position:absolute;width:min(700px,100vw);aspect-ratio:1;background:repeating-conic-gradient(from 15deg,#ffffff08 0deg 2deg,transparent 2deg 20deg);border-radius:50%;mask-image:radial-gradient(circle,#000,transparent 65%);animation:medal-rays 12s linear infinite}.medal-unlock[data-rarity="Legendary"] .medal-unlock-body{border-color:#b69c6466;box-shadow:0 0 90px #a88d4426,0 30px 120px #000a}
@keyframes medal-veil{from{opacity:0}}@keyframes medal-arrive{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}@keyframes medal-forge{0%{opacity:0;transform:scale(2) translateY(-24px);filter:brightness(4)}60%{opacity:1;transform:scale(1.55)}100%{transform:scale(1.6)}}@keyframes medal-rays{to{transform:rotate(360deg)}}
@media(max-width:720px){.achievement-grid{grid-template-columns:1fr}.achievement-card.medal-family{padding:18px;gap:14px;grid-template-columns:88px 1fr}.medal-emblem{width:86px;height:100px}.medal-emblem .achievement-medal{width:86px;height:86px}.medal-family h2{font-size:18px}.medal-collection-header{align-items:flex-start}.medal-filters{gap:5px}.medal-filters button{padding:7px 11px}.medal-unlock h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.medal-unlock,.medal-unlock-body,.medal-unlock .medal-emblem,.medal-unlock-rays{animation:none!important}}

dialog.medal-unlock{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:20px;border:0;box-sizing:border-box}dialog.medal-unlock::backdrop{background:transparent}

/* Atlas artwork is off-centre inside its original cells. Offset the art, never the rank. */
.medal-emblem .achievement-medal{transform:translateX(var(--medal-offset,0));filter:var(--metal-filter,none)}
.medal-emblem{--metal:#c7d6e2}.medal-emblem[data-material=bronze]{--metal:#c28c57;--metal-filter:sepia(.8) saturate(1.8)}
.medal-emblem[data-material=jade]{--metal:#62deb1;--metal-filter:sepia(.8) saturate(2.2) hue-rotate(95deg)}
.medal-emblem[data-material=gold]{--metal:#f4c965;--metal-filter:sepia(1) saturate(2.6)}
.medal-emblem[data-material=platinum]{--metal:#c9e9ff;--metal-filter:brightness(1.3) contrast(1.1)}
.medal-emblem[data-material=amethyst]{--metal:#c78bff;--metal-filter:sepia(.8) saturate(3) hue-rotate(220deg)}
.medal-emblem[data-material=diamond]{--metal:#8ae9ff;--metal-filter:sepia(.7) saturate(2) hue-rotate(140deg) brightness(1.2)}
.medal-emblem[data-material=celestial]{--metal:#ffd897;--metal-filter:sepia(.9) saturate(3) brightness(1.2)}
.medal-emblem[data-material=obsidian]{--metal:#ca98fc;--metal-filter:brightness(.8) sepia(.6) saturate(2) hue-rotate(210deg)}
.medal-emblem:before{border-color:var(--metal);box-shadow:0 0 18px color-mix(in srgb,var(--metal) 22%,transparent)}
.medal-emblem .medal-rank{background:var(--metal);color:#151515}.medal-live-count{font-size:12px;color:var(--muted)}
.medal-family>[data-equip-family]{font-size:12px;padding:10px}.medal-family>[data-equip-family][aria-pressed=true]{border-color:#6ad5b2;color:#6ad5b2}
.medal-showcase{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.profile-medal{position:relative}.profile-medal>button{padding:0;border:0;background:none;display:block}.profile-medal .medal-emblem{width:66px;height:76px}.profile-medal .achievement-medal{width:66px;height:66px}.profile-medal .medal-rank{font-size:8px;padding:2px 5px;min-width:20px}
.medal-tooltip{display:none;position:absolute;top:calc(100% + 8px);left:0;width:240px;max-width:70vw;padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--bg);color:var(--fg);box-shadow:0 16px 50px #0008;z-index:60;font-size:12px;line-height:1.5;text-align:left}.medal-tooltip>span,.medal-tooltip>b{display:block;margin-top:6px}.medal-tooltip>span{color:var(--muted)}.medal-tooltip p{margin:10px 0}.profile-medal:focus-within .medal-tooltip,.profile-medal:hover .medal-tooltip,.profile-medal:has([aria-expanded=true]) .medal-tooltip{display:block}.profile-medal-selection{padding:24px;border:1px solid var(--line);border-radius:22px;margin:20px 0}.profile-medal-selection h2{font-size:18px;margin-bottom:16px}.profile-medal-selection:has(.medal-showcase:empty){min-height:0}
.profile-medal-selection>p{color:var(--muted);font-size:13px}.medal-collection-header label{display:flex;align-items:center;gap:8px}.medal-collection-header select{min-width:150px}.achievement-grid.compact-medals{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.compact-medals .achievement-card{min-height:118px;padding:14px;display:flex;align-items:center;gap:13px;text-align:left}.compact-medals .medal-emblem{flex:none;transform:scale(.8)}.compact-medals .medal-family-copy{display:grid;gap:5px;min-width:0}.compact-medals .medal-family-copy small{color:var(--muted)}.compact-medals progress{width:100%;height:6px}.mystery-medal{display:grid;place-items:center;width:64px;height:64px;flex:none;border:1px solid var(--line);border-radius:50%;background:linear-gradient(145deg,var(--soft),var(--bg));font-size:26px;color:var(--muted)}.mystery-medal.large{width:100px;height:100px;margin:auto;font-size:42px}#medal-detail{width:min(560px,calc(100vw - 24px));max-height:88dvh;overflow:auto;border:1px solid var(--line);border-radius:24px;padding:26px;background:var(--bg);color:var(--fg)}#medal-detail::backdrop{background:#0009;backdrop-filter:blur(4px)}#medal-detail .medal-emblem{margin:0 auto 14px}.medal-detail-close{float:right;width:44px;height:44px;padding:0;border-radius:50%;font-size:24px}.medal-detail-tiers{display:grid;gap:8px;margin:18px 0}.medal-detail-tiers>div{display:grid;gap:3px;padding:11px;border:1px solid var(--line);border-radius:12px;color:var(--muted)}.medal-detail-tiers>div.earned{color:var(--fg);border-color:var(--accent)}#medal-detail-body>button{margin:6px 6px 0 0}.selected-profile-title{color:var(--muted);font-size:13px}
.duel-profile{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;border-radius:24px;background:linear-gradient(125deg,var(--soft),transparent);border:1px solid var(--line);margin:20px 0}.duel-profile h2{font-size:24px;margin:0 0 6px}.duel-profile .player-title{display:block}.duel-open-person+.medal-showcase{margin-top:10px}.duel-player .medal-showcase{margin-top:12px}
.medal-unlock-body{box-sizing:border-box;max-height:calc(100dvh - 40px);overflow-y:auto;margin:auto}.medal-unlock .medal-emblem{flex-shrink:0}.medal-unlock:not([open]){display:none}
@media(max-width:720px){.duel-profile{padding:18px;flex-wrap:wrap}.duel-profile h2{font-size:20px}.medal-tooltip{width:210px}.medal-showcase{gap:8px}.profile-medal .medal-emblem{width:55px;height:65px}.profile-medal .achievement-medal{width:55px;height:55px}.duel-player .medal-rank{font-size:7px}.duel-player .profile-medal .medal-emblem{width:40px;height:48px}.duel-player .profile-medal .achievement-medal{width:40px;height:40px}}
.profile-icon{display:inline-grid;place-items:center;width:2em;height:2em;margin-right:.35em;border:1px solid var(--line);border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff5,transparent 30%),linear-gradient(145deg,#77c9c0,#5f568f);color:#fff;vertical-align:middle;font-weight:700;text-shadow:0 1px 2px #0008}.profile-flag{display:inline-block;margin-right:.35em;font-size:1.25em;vertical-align:middle}.profile-icon-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:0;padding:0}.profile-icon-picker legend{margin-bottom:8px}.profile-icon-choice{display:flex;align-items:center;gap:7px;padding:8px;border:1px solid var(--line);border-radius:12px}.profile-icon-choice:has(input:checked){border-color:var(--accent);background:var(--soft)}.profile-icon-choice.is-locked{opacity:.5}.profile-country-note{font-size:12px;margin-top:-4px}.friend-row>.profile-icon{flex:none}.board .profile-icon{font-size:11px}
@media(max-width:520px){.profile-icon-picker{grid-template-columns:1fr}}

.profile-icon{position:relative;overflow:hidden;flex-shrink:0;background:radial-gradient(circle at 50% 30%,#355663,#141c27 78%);text-shadow:none}.profile-icon>img{width:78%;height:78%;object-fit:contain}.profile-icon-crop{position:relative;display:block;width:94%;aspect-ratio:calc(var(--w)/var(--h));overflow:hidden}.profile-icon-crop img{position:absolute;max-width:none!important;width:calc(887 / var(--w) * 100%);height:auto;left:calc(var(--x) / var(--w) * -100%);top:calc(var(--y) / var(--h) * -100%)}.profile-icon-choice .profile-icon{width:48px;height:48px;margin:0}.profile-icon-choice input{flex-shrink:0}.profile-icon-picker{max-height:280px;overflow:auto;padding:2px}.profile-icon-choice{cursor:pointer}.profile-icon-choice.is-locked{cursor:default}

.account-form .profile-icon-choice{display:flex;align-items:center;gap:9px;font-size:12px;min-height:68px}.account-form .profile-icon-choice input[type=radio]{width:18px;height:18px;min-height:18px;padding:0;margin:0;flex:0 0 18px;accent-color:#c8b580}.account-form .profile-icon-choice>span:last-child{min-width:0}.account-form .profile-icon-picker{max-height:260px}.account-form .profile-icon-picker .profile-icon{width:42px;height:42px}