/* Achievement art v2. Real vector symbols remain visible inside animated
   gradient names and across light/dark themes. */
.tg-achievement-badge{
 --badge-accent:#5b98b6;--badge-ink:#fff;
 display:inline-grid!important;place-items:center;flex:none;position:relative;
 width:25px;height:25px;box-sizing:border-box;padding:0;overflow:hidden;
 vertical-align:middle;isolation:isolate;border-radius:8px;
 background:linear-gradient(145deg,
   color-mix(in srgb,var(--badge-accent) 88%,#fff 12%),
   color-mix(in srgb,var(--badge-accent) 80%,#181d24 20%))!important;
 background-clip:padding-box!important;-webkit-background-clip:padding-box!important;
 border:1px solid color-mix(in srgb,var(--badge-accent) 65%,#e9eef0 35%);
 box-shadow:inset 0 1px 0 #fff5,0 1px 3px #0002;
 color:var(--badge-ink)!important;-webkit-text-fill-color:var(--badge-ink)!important;
 font:normal 0/1 system-ui!important;text-shadow:none!important;
 filter:none;transform:none;text-decoration:none;cursor:help
}
.tg-achievement-badge::before{
 content:'';position:absolute;inset:2px;border:1px solid #fff3;
 border-radius:calc(8px - 2px);pointer-events:none
}
.tg-achievement-badge svg{
 display:block!important;width:72%;height:72%;position:relative;z-index:1;
 overflow:visible;flex:none;stroke:var(--badge-ink)!important;
 fill:none!important;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;
 opacity:1!important;filter:drop-shadow(0 1px 1px #0004)
}
.tg-achievement-badge svg path{stroke:var(--badge-ink)!important;fill:none!important}
.tg-achievement-badge .tg-badge-detail{fill:#fff!important;stroke:none!important;opacity:.74}
/* Four distinct earned tiers. The tier belongs to the verified achievement,
   not an arbitrary index in the client catalogue. */
.tg-achievement-badge[data-badge-tier=common]{border-color:#8da0ab80}
.tg-achievement-badge[data-badge-tier=rare]{
 border-color:#74a9da;box-shadow:inset 0 1px 0 #fff6,0 0 0 1px #74a9da33
}
.tg-achievement-badge[data-badge-tier=epic]{
 border-color:#b9a0fb;box-shadow:inset 0 1px 0 #fff9,0 0 0 1px #9c74ea55
}
.tg-achievement-badge[data-badge-tier=legendary]{
 border-color:#ffda7e;box-shadow:inset 0 1px 0 #fffa,0 0 0 1px #e5b95077
}
.tg-achievement-badge[data-badge-tier=epic]::after,
.tg-achievement-badge[data-badge-tier=legendary]::after{
 content:'';position:absolute;z-index:2;inset:0;pointer-events:none;
 background:linear-gradient(110deg,transparent 32%,#fff0 40%,#ffffff55 49%,#fff0 57%,transparent 69%);
 background-size:310% 100%;animation:tg-achievement-glimmer 9s linear infinite
}
@keyframes tg-achievement-glimmer{
 0%,84%{background-position:100% 0}97%,100%{background-position:0 0}
}
:root:not([data-theme=dark]) .tg-achievement-badge{box-shadow:inset 0 1px 0 #fff7,0 1px 4px #0002}
.tg-achievement-badge:focus-visible{
 outline:2px solid var(--accent);outline-offset:3px
}
/* Compact boards: background and SVG never inherit transparent gradient ink. */
:is(.memory-rank-player,.float-board-name,.float-ribbon-name,.float-dialog-name,
 .rankings-combined-player,.tg-mini-board-row) .tg-achievement-badge,
.tg-score-achievement{
 width:10px!important;height:10px!important;min-width:10px!important;
 border-radius:3px!important;margin-left:2px;vertical-align:middle;
 -webkit-text-fill-color:#fff!important;
 background-clip:padding-box!important;
 opacity:1!important
}
:is(.memory-rank-player,.float-board-name,.float-ribbon-name,.float-dialog-name,
 .rankings-combined-player,.tg-mini-board-row) .tg-achievement-badge svg,
.tg-score-achievement svg{width:79%!important;height:79%!important;stroke:#fff!important;opacity:1!important}
.tg-score-achievement::after{animation:none!important}
:is(.memory-rank-player,.float-board-name,.float-ribbon-name,.float-dialog-name)
 :is(.tg-achievement-badge,.tg-achievement-badge svg){-webkit-text-fill-color:#fff!important}
.memory-rank-player:has(.tg-achievement-badge),
.float-board-name:has(.tg-achievement-badge),
.float-ribbon-name:has(.tg-achievement-badge),
.float-dialog-name:has(.tg-achievement-badge){
 display:inline-flex;align-items:center;justify-content:flex-start;
 min-width:0;gap:3px;white-space:nowrap
}
:is(.memory-rank-player,.float-board-name,.float-ribbon-name,.float-dialog-name) .tg-achievement-badge{flex:0 0 10px}
/* Profile display: generous, readable medals with colour that stays on-brand. */
.profile-achievements{margin:15px 0}
.profile-achievements h2,.profile-achievements-showcase h2{margin:0;font-size:17px}
.profile-achievement-status{font-size:12px;color:var(--muted);margin:7px 0 13px}
.profile-achievement-list{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:9px
}
.tg-achievement-option{
 display:flex;align-items:center;gap:11px;min-width:0;min-height:65px;
 text-align:left;border:1px solid var(--line);border-radius:11px;
 padding:10px 12px;background:var(--surface-soft);color:var(--text);cursor:pointer
}
.tg-achievement-option>.tg-achievement-badge,
.tg-achievement-option>.tg-no-badge-icon{
 width:33px;height:33px;min-width:33px;border-radius:10px
}
.tg-achievement-option .tg-achievement-badge svg{width:70%;height:70%}
.tg-no-badge-icon{
 display:inline-grid;place-items:center;flex:none;
 border:1px dashed var(--line);background:var(--surface);color:var(--muted);
 font-size:22px;line-height:1
}
.tg-achievement-option>span:nth-child(2){display:flex;flex-direction:column;min-width:0;gap:4px}
.tg-achievement-option strong{font-size:12px;font-weight:720;line-height:1.25}
.tg-achievement-option small{font-size:11px;color:var(--muted);line-height:1.35}
.tg-achievement-rarity{
 font-size:9px!important;font-weight:800;letter-spacing:.115em;
 color:#65859d!important;text-transform:uppercase
}
.tg-achievement-option:has([data-badge-tier=rare]) .tg-achievement-rarity{color:#70a7dc!important}
.tg-achievement-option:has([data-badge-tier=epic]) .tg-achievement-rarity{color:#af91ea!important}
.tg-achievement-option:has([data-badge-tier=legendary]) .tg-achievement-rarity{color:#d7aa49!important}
.tg-achievement-option.is-equipped{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tg-achievement-option.is-locked{opacity:.48;cursor:default}
.tg-achievement-earned{margin-left:auto;font-size:10px;color:var(--muted);white-space:nowrap}
.tg-achievement-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Public profile heading and earned emblems have room to breathe. */
.profile-achievements-showcase .stats-section-heading{
 display:flex;align-items:baseline;justify-content:flex-start;flex-wrap:wrap;
 gap:9px 15px;min-width:0
}
.profile-achievements-showcase #public-profile-achievement-count{font-size:12px;color:var(--muted);font-weight:500}
.profile-public-badges{display:flex;flex-wrap:wrap;gap:10px;margin:15px 0 0}
.profile-public-badges .tg-achievement-badge{width:47px;height:47px;border-radius:13px}
.profile-public-badges .tg-achievement-badge::before{border-radius:10px;inset:3px}
.profile-public-badges .tg-achievement-badge svg{width:70%;height:70%;stroke-width:1.8}
.profile-public-badges .tg-achievement-badge:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* Fixed, viewport-clamped tooltip works with hover, keyboard and touch taps. */
.tg-achievement-tooltip{
 position:fixed;z-index:400;max-width:min(265px,calc(100vw - 20px));
 width:max-content;box-sizing:border-box;padding:10px 12px;
 border:1px solid var(--line);border-radius:10px;background:var(--surface);
 color:var(--text);box-shadow:0 9px 25px #0003;
 font-size:12px;line-height:1.4;pointer-events:none;white-space:normal
}
.tg-achievement-tooltip[hidden]{display:none!important}
.tg-achievement-tooltip strong{font-weight:750;display:block;margin:0 0 3px}
.tg-achievement-tooltip span{font-size:11px;color:var(--muted);display:block}
/* Expanded, actionable unlock notification. One substantial edge sweep, no loop. */
.tg-achievement-toast{
 position:fixed;top:24px;right:24px;z-index:450;
 display:flex;align-items:center;gap:21px;padding:22px 25px;
 width:min(550px,calc(100vw - 32px));min-height:112px;
 box-sizing:border-box;text-align:left;font-family:inherit;
 border:1px solid var(--line);border-radius:17px;background:var(--surface);
 color:var(--text);box-shadow:0 16px 45px #0005;
 isolation:isolate;overflow:hidden;cursor:pointer;touch-action:pan-y;
 user-select:none;-webkit-user-select:none;
 animation:tg-achievement-appear .4s cubic-bezier(.2,.8,.2,1) both;
 transition:opacity .2s ease,translate .2s ease;
}
.tg-achievement-toast::before{
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 border:3px solid transparent;
 background:linear-gradient(115deg,transparent 13%,#ffffffef 44%,var(--accent,#99a8cc) 53%,#fff9 60%,transparent 82%) border-box;
 background-size:270% 100%;background-position:100% 0;
 mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
 mask-composite:exclude;
 opacity:0;animation:tg-achievement-edge 1.15s ease-out .15s both;
}
@keyframes tg-achievement-appear{
 from{opacity:0;transform:translate3d(38px,-8px,0)}
 to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes tg-achievement-edge{
 0%{opacity:0;background-position:100% 0}
 14%{opacity:1}70%{opacity:1}
 100%{opacity:0;background-position:-90% 0}
}
.tg-achievement-toast[hidden]{display:none!important}
.tg-achievement-toast:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.tg-achievement-toast.is-dismissing{opacity:0;translate:55px 0;pointer-events:none}
.tg-achievement-toast>span:nth-child(2){display:flex;flex-direction:column;gap:7px;min-width:0}
.tg-achievement-toast strong{font-size:20px;font-weight:790;line-height:1.15}
.tg-achievement-toast small{font-size:16px;line-height:1.3;color:var(--muted)}
.tg-achievement-toast .tg-toast-reward{
 color:var(--text);font-weight:730;font-size:14px
}
.tg-achievement-toast .tg-toast-badge{width:76px;height:76px;min-width:76px;border-radius:18px}
.tg-achievement-toast .tg-toast-badge svg{width:70%;height:70%;stroke-width:1.9}
/* Reward-bearing unlocks reveal the ACTUAL earned Bit sprite, never a
   generic gift emoji. The delayed appearance gives the badge the first beat. */
.tg-achievement-toast[data-has-reward="true"]{width:min(610px,calc(100vw - 32px))}
.tg-achievement-toast .tg-achievement-reward-preview{
 --bit-edge:#463b69;--bit-body:#b8a2e9;
 display:grid;place-items:center;flex:none;width:76px;height:76px;
 border:0;background:transparent;opacity:0;transform:translateY(8px) scale(.86);
 animation:tg-achievement-reward-in .55s cubic-bezier(.2,.9,.3,1.2) 1s both
}
.tg-achievement-toast .tg-achievement-reward-preview svg{
 display:block;width:100%;height:100%;image-rendering:pixelated
}
@keyframes tg-achievement-reward-in{
 to{opacity:1;transform:translateY(0) scale(1)}
}
.tg-achievement-toast[data-tier="epic"]::before{--accent:#b89af7}
.tg-achievement-toast[data-tier="legendary"]::before{--accent:#e7bd5b}
@media(max-width:560px){
 .profile-achievement-list{grid-template-columns:1fr}
 .tg-achievement-toast{
  top:12px;right:12px;padding:16px 18px;gap:13px;min-height:90px;
  width:min(440px,calc(100vw - 24px))
 }
 .tg-achievement-toast .tg-toast-badge{width:59px;height:59px;min-width:59px;border-radius:14px}
 .tg-achievement-toast strong{font-size:16px}
 .tg-achievement-toast small{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
 .tg-achievement-badge:is([data-badge-tier=epic],[data-badge-tier=legendary])::after{animation:none;background:none}
 .profile-public-badges .tg-achievement-badge:hover{transform:none}
 .tg-achievement-toast,.tg-achievement-toast::before,
 .tg-achievement-toast .tg-achievement-reward-preview{animation:none;opacity:1;transform:none}
}
