/* Hypernix 6.4. Shared visual language for every plugin-served surface. */
@font-face{font-family:Inter;src:url('/Inter-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{
  --hn-bg:#101112;--hn-surface:#191b1d;--hn-surface-2:#212326;--hn-surface-3:#292b2e;
  --hn-text:#f5f2e8;--hn-muted:#a8a9a7;--hn-line:#ffffff14;--hn-line-strong:#ffffff29;
  --hn-accent:color-mix(in srgb,var(--accent,#f5c400) 78%,#ffffff);--hn-accent-hover:#ffdf7a;--hn-radius:12px;--hn-radius-lg:18px;
  --ink:var(--hn-bg);--ink-2:var(--hn-surface);--panel:var(--hn-surface);--panel-2:var(--hn-surface-2);
  --white:var(--hn-text);--yellow:var(--hn-accent);--muted:var(--hn-muted);--line:var(--hn-line);
  --portal-bg:var(--hn-bg);--portal-panel:var(--hn-surface);--portal-panel-2:var(--hn-surface-2);--portal-line:var(--hn-line);--portal-text:var(--hn-text);--portal-muted:var(--hn-muted);--portal-accent:var(--hn-accent);
  --social-surface:var(--hn-surface);--social-text:var(--hn-text);--social-muted:var(--hn-muted);--social-line:var(--hn-line);
  --bg:var(--hn-bg);--surface:var(--hn-surface);--surface2:var(--hn-surface-2);--surface3:var(--hn-surface-3);--border:var(--hn-line);--border2:var(--hn-line-strong);--text:var(--hn-text);--input:var(--hn-bg);--accent:var(--hn-accent);--accent2:var(--hn-accent);--accent-glow:#f5cf580a;
  --body:Inter,'Segoe UI',sans-serif;--ui:var(--body);--display:var(--body);--font:var(--body);color-scheme:dark
}
*{box-sizing:border-box}html,body{background:var(--hn-bg);color:var(--hn-text)}body{font-family:var(--body);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}
:where(button,a,input,textarea,select):focus-visible{outline:2px solid var(--hn-accent);outline-offset:4px}
::selection{background:var(--hn-accent);color:#17150c}
.eyebrow{font:700 10px/1.4 var(--body);letter-spacing:.15em;color:var(--hn-accent)}
.page-hub .site-header{position:sticky;top:0;left:0;transform:none;z-index:100;width:100%;height:78px;margin:0;padding:0 clamp(18px,3.5vw,64px);gap:28px;border:0;border-bottom:1px solid var(--hn-line);border-radius:0;background:#101112f2;box-shadow:none;backdrop-filter:blur(24px)}
.page-hub .brand{flex-shrink:0}.page-hub .brand-wordmark{width:148px;height:auto;max-height:30px;object-fit:contain}
.page-hub .site-nav{gap:6px}.page-hub .nav-link{height:44px;padding:0 14px;border-radius:8px;color:var(--hn-muted);font:600 12px/1 var(--body);box-shadow:none}
.page-hub .nav-link.active{background:#f5cf5814;color:var(--hn-accent);box-shadow:inset 0 -2px var(--hn-accent)}
.page-hub .nav-link:hover{background:var(--hn-surface-2);color:var(--hn-text)}
.page-hub .header-actions{gap:10px}.page-hub .user-pill,.page-hub .lang-button,.page-hub .coin-pill{height:42px;border:1px solid var(--hn-line);border-radius:9px;background:var(--hn-surface)}
.page-hub .user-pill{font-size:12px}.page-hub .coin-pill{padding:0 12px;font-size:13px;color:var(--hn-accent)}
.page-hub .app-shell{width:100%;max-width:1680px;padding:28px clamp(18px,3.5vw,64px) 52px;margin:auto}
.page-hub .app-view{max-width:none;min-height:calc(100vh - 158px)}
.page-hub .btn{min-height:44px;padding:0 18px;border:1px solid var(--hn-line-strong);border-radius:9px;background:var(--hn-surface-2);color:var(--hn-text);font:650 12px/1.35 var(--body);box-shadow:none;letter-spacing:0}
.page-hub .btn-primary{background:var(--hn-accent);border-color:var(--hn-accent);color:#201b0c}.page-hub .btn-primary:hover{background:var(--hn-accent-hover);border-color:var(--hn-accent-hover)}
.page-hub .btn-quiet{background:transparent;border-color:transparent}.page-hub .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.page-hub .portal-lobby{min-height:470px;height:min(620px,calc(100vh - 210px));grid-template-columns:minmax(290px,1.25fr) minmax(180px,.8fr);grid-template-rows:1fr auto;gap:0;padding:42px;border:1px solid var(--hn-line);border-radius:18px;background:#151a19}
.page-hub .portal-lobby::after{background:linear-gradient(90deg,#101413ee,#10141385 60%,#10141322),linear-gradient(0deg,#0d1218bd,transparent 65%)}
.page-hub .portal-lobby video,.page-hub .portal-lobby>.fallback{filter:saturate(.65) brightness(.74)}
.page-hub .portal-lobby .hero-copy{grid-row:1;grid-column:1;align-self:center;max-width:690px;justify-content:center;padding:0}
.page-hub .portal-lobby .hero-copy h1{font-family:var(--body);font-weight:750;font-size:clamp(40px,5.3vw,76px);line-height:1.02;letter-spacing:-.065em;text-transform:none;margin:18px 0 20px}
.page-hub .portal-lobby .hero-copy p{max-width:520px;font-size:14px;line-height:1.75;color:#c5c9c5}
.page-hub .portal-lobby .hero-actions{margin-top:26px;gap:10px}
.page-hub .portal-home-model{grid-column:2;grid-row:1/3;padding:18px 0 28px;overflow:visible}.page-hub .portal-home-model canvas{max-width:350px;height:440px;min-height:280px;max-height:100%;filter:drop-shadow(0 24px 40px #0008)}
.page-hub .portal-home-model b{font-size:16px}.page-hub .portal-home-model small{font-size:9px;letter-spacing:.15em;margin-top:6px}
.page-hub .portal-home-session{grid-column:1;grid-row:2;align-self:end;width:100%;display:flex;align-items:center;gap:24px;padding:18px 0 0;margin-top:26px;border:0;border-top:1px solid #ffffff25;border-radius:0;background:transparent;backdrop-filter:none}
.page-hub .portal-home-session>div{padding:0;border:0}.page-hub .portal-home-session .avatar{width:38px;height:38px;border-radius:8px}.page-hub .portal-home-session small{font-size:9px}.page-hub .portal-home-session dl{display:none}.page-hub .portal-home-session nav{margin-left:auto;gap:8px}.page-hub .portal-social{width:36px;height:36px;justify-content:center;background:#10111260}.page-hub .portal-social span{display:none}
.page-hub .metric-row{grid-template-columns:minmax(240px,1.5fr) repeat(3,minmax(100px,.5fr));gap:0;margin:22px 0 30px;border:1px solid var(--hn-line);border-radius:12px;overflow:hidden;background:var(--hn-surface)}
.page-hub .metric{min-height:100px;justify-content:center;gap:6px;padding:20px 24px;border:0;border-right:1px solid var(--hn-line);border-radius:0;background:transparent;color:var(--hn-text)}.page-hub .metric:last-child{border:0}.page-hub .metric strong{font:650 30px/1.15 var(--body)}.page-hub .metric small{font-size:10px;color:var(--hn-muted)}.page-hub .metric p{font-size:12px;color:var(--hn-text);line-height:1.6;margin:0}
.page-hub [data-view=home]>.section-title:last-of-type{display:flex;margin:30px 0 18px}.page-hub .section-title h2{font:650 clamp(22px,2.4vw,32px)/1.2 var(--body);letter-spacing:-.035em;text-transform:none}.page-hub .section-title p{font-size:13px;line-height:1.65}
.page-hub .page-head{margin:18px 0 32px;align-items:center}.page-hub .page-head h1{font:700 clamp(36px,4.8vw,64px)/1.07 var(--body);letter-spacing:-.055em;text-transform:none}.page-hub .page-head p{font-size:13px;line-height:1.7;max-width:410px}
.page-hub .catalog-hero{min-height:280px;border-radius:16px;padding:36px;background-color:var(--hn-surface)}.page-hub .catalog-hero h1{font:700 clamp(42px,5vw,70px)/1 var(--body);letter-spacing:-.055em;text-transform:none}.page-hub .catalog-hero p{max-width:600px;font-size:14px;line-height:1.7}
.page-hub .catalog-tools{gap:14px;padding:24px 0;background:transparent}.page-hub .search{background:var(--hn-surface);border-color:var(--hn-line);border-radius:10px}.page-hub .search input{font-size:13px}
.page-hub .filter-row{gap:8px}.page-hub .filter{border-radius:7px;font:600 11px/1.3 var(--body);padding:10px 14px}.page-hub .filter.active{background:var(--hn-accent);color:#201b0c}
.page-hub .place-grid{gap:18px!important}.page-hub .place-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px!important;padding:0!important}.page-hub .place-card{max-width:none;border:1px solid var(--hn-line);border-radius:12px;background:var(--hn-surface)}.page-hub .place-card:hover{border-color:#f5cf5860;box-shadow:0 16px 30px #0002}
.page-hub .place-card h3{font:650 19px/1.25 var(--body)!important;letter-spacing:-.025em;text-transform:none}.page-hub .place-card .card-copy,.page-hub .place-card .place-body{padding:18px}.page-hub .place-card .card-stats{font-size:11px;color:var(--hn-muted)}
.page-hub .empty-state{border:1px dashed var(--hn-line-strong);border-radius:12px;background:var(--hn-surface);min-height:140px;grid-column:1/-1}.page-hub .empty-state strong{font:650 17px/1.4 var(--body)}
.page-hub .inventory-hero{grid-template-columns:270px minmax(0,1fr);gap:24px}.page-hub .loadout{padding:26px;border-radius:14px;background:var(--hn-surface)}.page-hub .loadout h2{font:650 25px/1.2 var(--body);text-transform:none;letter-spacing:-.03em}.page-hub .inventory-content{background:transparent}.page-hub .inventory-tabs{gap:6px;padding-bottom:18px}.page-hub .inventory-tabs button{font-size:11px;padding:12px;border-radius:8px;background:var(--hn-surface)}
.page-hub .inventory-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}.page-hub .reward-card{min-height:290px;padding:16px;background:var(--hn-surface);border:1px solid var(--hn-line);border-radius:12px}.page-hub .reward-card.locked{opacity:1;filter:none}.page-hub .reward-card.equipped{border-color:#f5cf586b;background:#f5cf580a}.page-hub .reward-preview{height:158px;border-radius:9px;background:radial-gradient(circle,#353536,#202224 75%)}.page-hub .reward-card h3{font:650 15px/1.4 var(--body);letter-spacing:-.015em;text-transform:none}.page-hub .item-kind{font-size:11px;color:var(--hn-muted);margin-bottom:18px}.page-hub .reward-actions{margin-top:auto;display:flex;gap:8px}.page-hub .reward-actions .btn{font-size:11px;min-height:40px}.page-hub .vip-inventory-summary{border-radius:12px;padding:22px;background:#f5cf580a;border-color:#f5cf5829}.page-hub .vip-inventory-summary h2{font:650 20px/1.2 var(--body);text-transform:none}.page-hub .vip-inventory-summary p{font-size:12px;line-height:1.7}
.page-hub .plans{max-width:1000px;margin:auto;grid-template-columns:1fr 1fr;gap:24px}.page-hub .plan{padding:36px;border:1px solid var(--hn-line);border-radius:16px;background:var(--hn-surface)}.page-hub .plan.vip{border-color:#f5cf5866;background:linear-gradient(150deg,#f5cf5814,var(--hn-surface) 65%)}.page-hub .plan h2{min-height:65px;font:650 30px/1.15 var(--body);letter-spacing:-.045em;text-transform:none}.page-hub .plan-price{font:700 54px/1.15 var(--body);letter-spacing:-.05em}.page-hub .plan li{font-size:13px;line-height:1.6;border-color:var(--hn-line)}
.page-hub .profile-cover{min-height:390px;height:420px;border-radius:16px}.page-hub .profile-name{font:700 42px/1.1 var(--body);letter-spacing:-.05em}.page-hub .profile-layout{gap:22px;margin-top:22px}.page-hub .profile-side,.page-hub .profile-projects{border:1px solid var(--hn-line);border-radius:12px;padding:25px;background:var(--hn-surface)}
.page-hub .social-lobby{border-radius:16px;background:var(--hn-bg)!important}.page-hub .social-stage{background:radial-gradient(ellipse at 50% 65%,#f5cf581c,transparent 60%),linear-gradient(145deg,#252929,#131516)!important}.page-hub .social-stage-heading h2{font:650 42px/1.08 var(--body);letter-spacing:-.05em}.page-hub .social-lobby .person{background:var(--hn-surface-2)!important;border-color:var(--hn-line)}.page-hub .social-lobby .person:hover,.page-hub .social-lobby .person.active{background:#f5cf580d!important;border-color:#f5cf5850}.page-hub .friend-search,.page-hub .chat-compose textarea{background:var(--hn-bg)}.page-hub .social-lobby .message{background:var(--hn-surface-2);border-color:var(--hn-line)}.page-hub .social-lobby .message.mine{background:#f5cf5812;border-color:#f5cf5830}
.page-hub .modal-backdrop{background:#050608c9;backdrop-filter:blur(10px)}.page-hub .modal{border:1px solid var(--hn-line-strong);border-radius:18px;background:var(--hn-surface);padding:28px;box-shadow:0 35px 100px #0008}.page-hub .modal h2{font:650 28px/1.2 var(--body);letter-spacing:-.045em;text-transform:none}.page-hub .field input,.page-hub .field textarea,.page-hub .field select{border-radius:8px;background:var(--hn-bg);font-size:13px;border-color:var(--hn-line-strong)}
.page-hub .checkout-modal{max-width:520px}.checkout-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;border-top:1px solid var(--hn-line);border-bottom:1px solid var(--hn-line);margin-bottom:20px}.checkout-summary>div{display:grid;gap:8px}.checkout-summary small{font-size:9px;letter-spacing:.12em;color:var(--hn-muted)}.checkout-summary strong{font-size:19px}.checkout-summary>div:last-child{text-align:right}.checkout-summary #checkoutPrice{font-size:30px;font-weight:650;letter-spacing:-.04em;color:var(--hn-accent);margin:0}.checkout-currency{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--hn-muted);margin:0 0 20px}.checkout-currency select{border:1px solid var(--hn-line-strong);background:var(--hn-bg);color:var(--hn-text);padding:9px 12px;border-radius:7px;font-size:12px}
.page-hub .provider-grid{display:grid;grid-template-columns:1fr;gap:10px}.page-hub .provider-card{padding:20px;border:1px solid var(--hn-line-strong);border-radius:10px;text-align:left;background:var(--hn-surface-2);color:var(--hn-text);cursor:pointer}.page-hub .provider-card b{display:flex;align-items:center;justify-content:space-between;font:650 15px/1.4 var(--body);margin-bottom:6px}.page-hub .provider-card b span{color:var(--hn-accent);font-size:20px}.page-hub .provider-card>span{font:400 11px/1.6 var(--body);color:var(--hn-muted)}.page-hub .provider-card:hover:not(:disabled){border-color:var(--hn-accent);background:#f5cf5809}.page-hub .provider-card:disabled{opacity:.4;cursor:not-allowed}.page-hub .secure-note{margin:20px 0 0;font-size:11px;line-height:1.8;color:var(--hn-muted)}.page-hub #checkoutStatus{font-size:12px;line-height:1.65}.page-hub .checkout-retry{font-size:11px;padding:8px 0;min-height:36px}
.checkout-receipt{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;margin-bottom:24px;border:1px solid #f5cf584a;border-radius:12px;background:#f5cf580a}.checkout-receipt p{margin:8px 0;font-size:14px;line-height:1.6}.checkout-receipt small{font:10px/1.5 monospace;color:var(--hn-muted);overflow-wrap:anywhere}.checkout-receipt[data-state=fulfilled]{border-color:#74c89966;background:#74c8990c}
.page-hub .coin-shop-modal{max-width:700px}.page-hub .coin-pack-grid{gap:12px}.page-hub .coin-pack{background:var(--hn-surface-2);border:1px solid var(--hn-line-strong);border-radius:12px;min-width:0}.page-hub .coin-pack strong{font-size:16px;letter-spacing:-.025em}.page-hub .coin-pack:hover{border-color:var(--hn-accent)}
.page-hub .site-footer{max-width:1680px;margin:auto;padding:36px clamp(18px,3.5vw,64px);border-top:1px solid var(--hn-line);background:transparent}.page-hub .site-footer h2{font:650 30px/1.1 var(--body);letter-spacing:-.04em;text-transform:none}.page-hub .footer-links{font-size:11px;gap:14px}.page-hub .assistant-trigger{width:52px;height:52px;border-radius:14px;background:var(--hn-surface);border-color:var(--hn-line-strong);box-shadow:0 12px 30px #0005}.page-hub .assistant{border-radius:14px;background:var(--hn-surface)}
.page-hub .toast{max-width:calc(100vw - 32px);background:var(--hn-surface-2);font-size:12px;line-height:1.6;border-radius:10px}
/* Entry screen: one clear path, with the game world in view. */
.launcher-required-page{font-family:var(--body);padding:22px}.launcher-required-shell{min-height:calc(100vh - 44px);grid-template-columns:1fr 1.03fr;border:1px solid var(--hn-line);border-radius:20px;overflow:hidden}.launcher-required-copy{padding:clamp(28px,5.8vw,94px);background:var(--hn-bg)}.launcher-required-brand{margin-bottom:clamp(64px,12vh,130px);font-size:15px;letter-spacing:.12em}.launcher-required-brand img{background:var(--hn-accent);border:0;padding:5px;border-radius:9px}.launcher-required-copy h1{font:750 clamp(38px,4.8vw,72px)/1.05 var(--body);letter-spacing:-.06em;max-width:600px;margin:18px 0 22px}.launcher-required-copy h1 em{display:block;font-style:normal;color:var(--hn-accent)}.launcher-required-copy p{font-size:14px;line-height:1.8;max-width:470px}.launcher-required-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:30px}.launcher-required-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 21px;border:1px solid var(--hn-line-strong);border-radius:9px;color:var(--hn-text);text-decoration:none;font-size:12px;font-weight:650}.launcher-required-actions a:first-child{background:var(--hn-accent);color:#201b0c;border-color:var(--hn-accent)}.launcher-required-steps{margin-top:42px;border:0;border-top:1px solid var(--hn-line);gap:16px;background:none}.launcher-required-steps span{background:none;padding:22px 0 0;font-size:11px;color:var(--hn-muted)}.launcher-required-steps b{font-size:10px;color:var(--hn-accent);letter-spacing:.1em}.launcher-required-art{background:#17170f}.launcher-required-art::after{background:linear-gradient(0deg,#0c1213df,transparent 70%)}.entry-world-label{position:absolute;z-index:2;left:32px;top:28px;color:#eef3e8;font-size:10px;letter-spacing:.15em}.launcher-required-card{left:36px;right:36px;bottom:36px;width:auto;padding:28px;border:1px solid #ffffff30;background:#14191ada;backdrop-filter:blur(18px);border-radius:14px;box-shadow:none}.launcher-required-card strong{font:650 29px/1.2 var(--body);letter-spacing:-.035em}.launcher-required-card p{font-size:13px;line-height:1.75}.entry-footer{display:flex;justify-content:space-between;margin-top:40px;gap:18px;font-size:10px;color:var(--hn-muted)}.entry-footer a{color:inherit}
/* Public landing, editor and administration keep the same typography and chrome. */
.page-welcome .welcome-header{border-bottom:1px solid var(--hn-line);background:#101112ef;backdrop-filter:blur(20px)}.page-welcome .public-hero{margin:22px;border-radius:18px;overflow:hidden;min-height:600px}.page-welcome .public-copy h1{font:750 clamp(46px,7vw,104px)/1.02 var(--body);letter-spacing:-.065em;text-transform:none}.page-welcome .public-copy p{font-size:16px;line-height:1.8}.page-welcome h2{font-family:var(--body);font-weight:650;letter-spacing:-.045em;text-transform:none}.page-welcome .btn{border-radius:9px;box-shadow:none}.page-welcome .manifesto,.page-welcome .examples{background:var(--hn-bg)}.page-welcome .example-card{border-radius:16px}.page-welcome .final-cta{background:var(--hn-surface);border-color:var(--hn-line)}
.page-studio .studio-app,.page-studio .studio-layout{background:var(--hn-bg)}.page-studio .topbar{background:var(--hn-surface);color:var(--hn-text);border-color:var(--hn-line)}.page-studio .topbar input,.page-studio .topbar select,.page-studio .topbar button{border-color:var(--hn-line-strong)}.page-studio .activity-rail,.page-studio .sidebar,.page-studio .properties,.page-studio .bottom-panel{background:var(--hn-surface);border-color:var(--hn-line)}.page-studio .activity-rail button.active{background:#f5cf5814;color:var(--hn-accent)}.page-studio .workbench{background:var(--hn-bg)}.page-studio .studio-empty-state{background:var(--hn-surface);color:var(--hn-text);border-color:var(--hn-line-strong)}.page-studio .properties h2,.page-studio .sidebar h2{font-family:var(--body);letter-spacing:-.025em}.page-studio .btn-primary{background:var(--hn-accent);color:#201b0c}
html[data-launcher-theme=light]{--hn-bg:#f1f0e9;--hn-surface:#fffefa;--hn-surface-2:#eae9e1;--hn-surface-3:#e1e0d7;--hn-text:#202321;--hn-muted:#666c66;--hn-line:#20232117;--hn-line-strong:#2023212b;color-scheme:light}
html[data-launcher-theme=light] .page-hub .site-header{background:#f8f7f0ed}html[data-launcher-theme=light] .page-hub .nav-link.active{background:#f5cf5840;color:#64500e}html[data-launcher-theme=light] .page-hub .modal,html[data-launcher-theme=light] .page-hub .provider-card{color:var(--hn-text)}html[data-launcher-theme=light] .page-hub .social-stage{color:#f5f2e8}
@media(min-width:1500px){.page-hub .portal-home-model canvas{height:480px}}
@media(max-width:1180px){.page-hub .site-header{gap:14px;padding-inline:22px}.page-hub .nav-link{padding-inline:10px}.page-hub .brand-wordmark{width:128px}.page-hub .portal-lobby{padding:32px}.page-hub .place-rail{grid-template-columns:repeat(3,minmax(0,1fr))}.page-hub .portal-home-session{gap:14px}.page-hub .inventory-hero{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:980px){.page-hub .portal-lobby{grid-template-columns:minmax(0,1fr) 220px!important;grid-template-rows:1fr auto!important;padding:30px!important;min-height:440px!important}.page-hub .portal-lobby .hero-copy{grid-row:1;grid-column:1}.page-hub .portal-home-model{display:flex;grid-column:2;grid-row:1/3;height:360px!important;min-height:0!important;align-self:center}.page-hub .portal-home-model canvas{height:300px;min-height:0}.page-hub .portal-home-session{grid-column:1;grid-row:2}.page-hub .portal-lobby .hero-copy h1{font-size:clamp(34px,5.2vw,50px)!important}.page-hub .hero-actions .btn{padding:12px!important;font-size:11px}.page-hub .metric{padding:16px}.page-hub .metric-row{grid-template-columns:1.35fr repeat(3,.6fr)}.page-hub .inventory-hero{grid-template-columns:1fr}.page-hub .loadout{display:none}.launcher-required-shell{grid-template-columns:1fr .85fr}.launcher-required-copy{padding:36px}.launcher-required-card{left:22px;right:22px;bottom:22px;padding:22px}.launcher-required-card strong{font-size:25px}}
@media(max-width:720px){.page-hub .site-header{height:66px;padding:0 16px;justify-content:space-between}.page-hub .site-nav{position:fixed;z-index:100;left:10px;right:10px;bottom:10px;height:62px;padding:6px;background:#191b1df5;border:1px solid #ffffff26;border-radius:14px;box-shadow:0 10px 30px #0006}.page-hub .nav-link{height:48px;gap:6px;padding:4px 10px;flex:1;border-radius:8px}.page-hub .nav-link span{font-size:9px!important}.page-hub .header-actions{margin-left:auto;gap:6px}.page-hub .user-pill{width:40px;padding:3px}.page-hub .user-pill>span:last-child{display:none}.page-hub .coin-pill{padding:0 9px;font-size:11px}.page-hub .lang-button{width:36px}.page-hub .app-shell{padding:18px 16px 88px}.page-hub .portal-lobby{grid-template-columns:1fr!important;min-height:490px!important;padding:25px!important;gap:18px!important}.page-hub .portal-lobby .hero-copy{max-width:440px!important;align-self:center}.page-hub .portal-lobby .hero-copy h1{font-size:42px!important;max-width:370px}.page-hub .portal-home-model{display:none}.page-hub .portal-home-session{grid-column:1;padding-top:18px;margin-top:4px;align-self:end}.page-hub .metric-row{grid-template-columns:repeat(3,1fr)}.page-hub .metric:first-child{grid-column:1/-1;border-bottom:1px solid var(--hn-line);border-right:0;min-height:80px}.page-hub .metric{padding:16px;min-height:86px}.page-hub .metric strong{font-size:26px}.page-hub .metric small{font-size:10px}.page-hub .page-head{gap:16px;align-items:flex-start}.page-hub .page-head h1{font-size:42px}.page-hub .catalog-hero{padding:26px;min-height:250px}.page-hub .catalog-tools{padding:18px 0}.page-hub .place-rail{grid-template-columns:1fr}.page-hub .plans{grid-template-columns:1fr;gap:16px}.page-hub .plan{padding:28px}.page-hub .plan h2{min-height:0}.page-hub .inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.page-hub .reward-card{padding:11px;min-height:270px}.page-hub .reward-preview{height:130px}.page-hub .reward-actions{flex-wrap:wrap}.page-hub .reward-card h3{font-size:13px}.page-hub .modal{padding:22px}.page-hub .modal h2{font-size:25px}.page-hub .modal-backdrop{padding:12px}.page-hub .coin-pack-grid{grid-template-columns:1fr}.page-hub .coin-pack{display:flex;align-items:center;gap:14px;text-align:left;padding:16px}.page-hub .coin-pack img{width:48px}.page-hub .coin-pack span{margin-left:auto}.checkout-receipt{flex-direction:column;align-items:flex-start;padding:20px}.page-hub .site-footer{padding:24px 20px 110px}.page-hub .site-footer h2{font-size:25px}.page-hub .assistant-trigger{right:18px;bottom:88px}.launcher-required-page{padding:12px}.launcher-required-shell{min-height:calc(100vh - 24px);grid-template-columns:1fr;border-radius:14px}.launcher-required-copy{padding:30px 25px}.launcher-required-brand{margin-bottom:62px}.launcher-required-copy h1{font-size:48px}.launcher-required-steps{grid-template-columns:repeat(3,1fr);gap:12px}.launcher-required-steps span{font-size:10px}.launcher-required-art{min-height:380px}.launcher-required-card{padding:24px}.entry-footer{margin-top:32px}.page-welcome .public-hero{margin:12px;min-height:640px}.page-welcome .public-copy h1{font-size:54px}.page-welcome .public-copy p{font-size:14px}.page-welcome .welcome-links{display:none}}
@media(max-width:390px){.page-hub .brand-wordmark{width:100px}.page-hub .portal-lobby .hero-copy h1{font-size:35px!important}.page-hub .inventory-grid{grid-template-columns:1fr}.launcher-required-copy h1{font-size:41px}.launcher-required-actions a{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* --- Places catalogue: the search row and the category rail ------------------
   The tools row is a row, not a card. modern.css still drew a 1px box around it
   while premium had already made it transparent, so the search field and the
   Create button sat flush against a border that was not meant to be there.

   The category rail holds far more chips than fit (about 2700px of them in a
   1180px column). A native scrollbar under the chips is both ugly and easy to
   miss; a masked edge shows there is more and the row scrolls with the wheel. */
.page-hub .catalog-tools{border:0!important;box-shadow:none!important;margin:10px 0 4px;padding:0!important}
.page-hub .catalog-tools .search{flex:1;min-width:0;height:46px}

.page-hub .filter-row{
  position:relative;gap:8px;padding:2px 0 4px;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 56px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 56px),transparent 100%);
}
.page-hub .filter-row::-webkit-scrollbar{display:none}
/* Once the rail is scrolled to the end there is nothing left to hint at, so the
   fade comes off and the last chip is fully legible. */
.page-hub .filter-row[data-scroll-end="true"]{-webkit-mask-image:none;mask-image:none}
.page-hub .filter-row[data-scroll-start="false"]{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
}
.page-hub .filter{transition:background-color .22s ease,border-color .22s ease,color .22s ease,translate .22s cubic-bezier(.2,.85,.25,1)}
.page-hub .filter:hover{translate:0 -2px}

/* --- Place cards: labels that survive the artwork ---------------------------
   The category and the online count sit on top of the place's own screenshot,
   at 9px, in near-white, with no scrim — and .place-image::after only darkens
   the bottom half, so over a bright build they were invisible. Each label gets
   its own surface instead of relying on whatever happens to be behind it. */
.page-hub .place-card-topline{
  position:absolute;z-index:4;top:12px;right:12px;left:12px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  pointer-events:none;
}
.page-hub .place-category-badge,
.page-hub .place-live-status{
  display:inline-flex;align-items:center;gap:6px;
  max-width:52%;overflow:hidden;
  padding:5px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(10,11,9,.72);backdrop-filter:blur(10px);
  color:#fff;font:700 10px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;
  text-overflow:ellipsis;white-space:nowrap;
}
.page-hub .place-live-status::before{
  content:"";width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--hn-muted);
}
.page-hub .place-live-status.is-online{color:#eafff2}
.page-hub .place-live-status.is-online::before{
  background:#5ee08f;box-shadow:0 0 8px rgba(94,224,143,.9);
  animation:hn-live-pulse 2.4s ease-in-out infinite;
}
@keyframes hn-live-pulse{0%,100%{opacity:1;scale:1}50%{opacity:.55;scale:.78}}

/* A scrim across the top of the artwork so the pills never fight a bright sky. */
.page-hub .place-image::before{
  content:"";position:absolute;z-index:1;top:0;right:0;left:0;height:96px;
  background:linear-gradient(180deg,rgba(8,9,7,.62),transparent)!important;
  pointer-events:none;
}

/* --- Profile banner: one headline, not three ---------------------------------
   .profile-name sets 42px/700 and the bio paragraph and the player-type row are
   its children, so both inherited it. Three lines of headline stacked on the
   banner is what made the block read as broken rather than as a profile. */
.page-hub .profile-identity{
  align-items:flex-end;gap:22px;
  /* Stop short of the 3D character, which starts at about 58% of the cover. */
  max-width:min(56%,620px);
}
.page-hub .profile-name{display:grid;gap:12px;min-width:0;font-size:16px;font-weight:400}
.page-hub .profile-name-line{align-items:baseline;gap:14px}
.page-hub .profile-name h1{
  margin:0;font-size:clamp(34px,4.4vw,62px);line-height:1;letter-spacing:-.03em;
  overflow-wrap:anywhere;
}
.page-hub #profileBio{
  margin:0;max-width:46ch;
  color:var(--hn-muted);font:400 14px/1.6 var(--body);
}
.page-hub .profile-type-tags{
  display:flex;flex-wrap:wrap;gap:7px;font:inherit;
}
.page-hub .profile-type-tags>*{
  padding:5px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(10,11,9,.6);backdrop-filter:blur(8px);
  color:var(--hn-text);font:600 11px/1 var(--body);letter-spacing:.04em;
}
/* An empty state is not a tag: it should look like the absence of one. */
.page-hub .profile-type-empty{
  border-style:dashed!important;background:transparent!important;
  color:var(--hn-muted)!important;font-weight:400!important;
}
.page-hub .profile-avatar-wrap{flex:0 0 auto}

@media(max-width:900px){
  .page-hub .profile-identity{max-width:none;gap:16px}
  .page-hub .profile-name h1{font-size:clamp(28px,7vw,40px)}
}

/* --- Selects -----------------------------------------------------------------
   A bare <select> draws its popup in OS chrome — a white list with a blue
   highlight in the middle of a dark product. color-scheme is what Chromium
   actually reads when it paints that popup, and option backgrounds finish the
   job. The closed control gets its own chevron so it stops looking like a
   leftover form element. */
.page-hub select,.page-community select{
  color-scheme:dark;
  appearance:none;-webkit-appearance:none;
  padding:0 34px 0 13px;min-height:44px;
  border:1px solid var(--hn-line);border-radius:var(--hn-radius);
  background-color:var(--hn-surface);color:var(--hn-text);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  font:600 13px/1 var(--body);cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease;
}
.page-hub select:hover,.page-community select:hover{border-color:var(--hn-line-strong)}
.page-hub select option,.page-community select option{background:var(--hn-surface);color:var(--hn-text)}

/* --- Studio activity rail ----------------------------------------------------
   The rail is a 74px column, but the buttons lay their icon and label out side
   by side: 24px icon + 8px gap + 20px padding leaves about five pixels for the
   text. Every label was rendered as a vertical sliver. Stack them instead —
   at this width that is the only arrangement where the label is a label. */
.page-studio .activity-btn{
  height:auto;min-height:54px;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;align-content:center;gap:4px;
  padding:8px 3px;text-align:center;
}
.page-studio .activity-btn span{
  display:block;max-width:100%;
  font-size:10px;font-weight:600;letter-spacing:.01em;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.page-studio .activity-btn svg{width:18px;height:18px}
/* The active marker sat off the left edge of a button that now has no left
   padding to hide it in. */
.page-studio .activity-btn::before{left:-6px;top:8px;bottom:8px}

/* --- Studio project overview -------------------------------------------------
   Two problems in one row. Flex items default to min-width:auto, so the hero's
   two buttons refused to shrink and overflowed into each other. And the metric
   labels were set at 9.5px with nowhere to wrap, so "Игровые объекты" rendered
   as "Игровы объект". */
/* flex:0 0 auto, not 0 1 auto: letting the buttons shrink only moved the
   collision inside them, with the label spilling out of a 34px box. They keep
   their natural width and wrap to a second line when the column is too narrow. */
.page-studio .hero-actions{flex-wrap:wrap;gap:8px}
.page-studio .hero-actions .button{flex:0 0 auto;max-width:100%}

.page-studio .metric-card{align-items:start;padding:14px}
.page-studio .metric-card>span:last-child{min-width:0}
.page-studio .metric-card small{
  margin-top:6px;font-size:11px;line-height:1.35;
  overflow-wrap:anywhere;white-space:normal;
}
/* The four metric tiles used raw blue, purple and green icon wells next to a
   yellow one, which is most of what reads as "the colours do not match the
   theme". Same hue throughout, separated by weight instead. */
.page-studio .metric-card .metric-icon{
  background:color-mix(in srgb,var(--hn-accent) 12%,transparent)!important;
  color:var(--hn-accent)!important;
}
.page-studio .metric-card:nth-child(2) .metric-icon{background:color-mix(in srgb,var(--hn-accent) 18%,transparent)!important}
.page-studio .metric-card:nth-child(3) .metric-icon{background:color-mix(in srgb,var(--hn-accent) 24%,transparent)!important}
.page-studio .metric-card:nth-child(4) .metric-icon{background:color-mix(in srgb,var(--hn-accent) 30%,transparent)!important}

/* Same story on the quick-start tiles under the metrics. */
.page-studio .quick-card{align-items:start}
.page-studio .quick-card small{font-size:11px;line-height:1.4;overflow-wrap:anywhere}

/* --- place card proportions -------------------------------------------------
   The two pills over the cover were sized for a wider card and read as oversized
   labels stuck on a small picture. They are pulled back to roughly a fifth of the
   cover height, and the project icon stops hanging past the bottom edge — that
   overhang was being clipped, so the icon always showed up as a cut-off square. */
.page-hub .place-card-badges{top:10px!important;right:10px!important;left:10px!important;gap:6px!important}
.page-hub .place-category-badge,
.page-hub .place-live-status{
  max-width:46%!important;gap:5px!important;
  padding:3px 8px!important;border-radius:7px!important;
  font:700 9px/1.35 var(--body)!important;letter-spacing:.05em!important;
}
.page-hub .place-live-status::before{width:5px!important;height:5px!important;flex-basis:5px!important}
.page-hub .place-icon{
  bottom:10px!important;left:12px!important;
  width:42px!important;height:42px!important;
  border-width:2px!important;border-radius:11px!important;font-size:16px!important;
}

/* --- friends stage ----------------------------------------------------------
   The character stood on two platforms at once: a bright cyan disc baked into
   the 3D geometry and a thin ring drawn in CSS, different sizes and different
   colours. The 3D one is gone, so the ring is now the only stage — sized to sit
   under the feet, and tinted from the accent like everything else.

   The name plate also sat on top of the character's legs. It moves to the
   corner, and the canvas gives up the strip it occupies. */
.social-stage .social-platform{
  bottom:131px!important;left:29%!important;right:29%!important;height:30px!important;
  border:1px solid color-mix(in srgb,var(--accent,#f5c400) 26%,transparent)!important;
  box-shadow:0 0 42px color-mix(in srgb,var(--accent,#f5c400) 16%,transparent),
             inset 0 8px 24px color-mix(in srgb,var(--accent,#f5c400) 10%,transparent)!important;
  background:color-mix(in srgb,var(--accent,#f5c400) 7%,transparent)!important;
}
.social-stage canvas{inset:118px 5% 96px!important;height:calc(100% - 214px)!important}
.social-stage .social-player{bottom:22px!important;left:26px!important}
.social-stage .social-avatar{flex-basis:38px!important;width:38px!important;height:38px!important}

/* ============================================================================
   INVENTORY — витрина вместо картотеки
   ============================================================================
   Прежний инвентарь был сеткой одинаковых карточек: у каждой рамка, заголовок,
   подпись и кнопка, всегда видимая. Двенадцать таких в ряд — это опись, а не
   коллекция: глазу не за что зацепиться, всё кричит одинаково громко.

   Здесь предмет показан как экспонат. Плитка почти целиком отдана самому
   предмету, подпись уходит вниз мелким шрифтом, кнопка появляется только когда
   до предмета дотянулись. Заблокированное не выцветает до неразличимости — оно
   под штриховкой, как под стеклом: видно, но пока закрыто. Выцветшее читается
   как «сломано», штриховка — как «ещё не ваше».
   ---------------------------------------------------------------------------- */

/* Grid-потомок по умолчанию не уже своего содержимого, поэтому колонка с
   карточками распирала строку и сетка переставала переносить — вместо
   нескольких рядов получался один с горизонтальной прокруткой. */
.page-hub .inventory-content,
.page-hub .inventory-hero { min-width: 0 !important }

.page-hub .inventory-grid {
  display: grid !important;
  min-width: 0 !important;
  /* An earlier sheet turns the inventory into a horizontal rail: auto-flow in
     columns, overflow-x and scroll snapping. Setting the columns alone leaves the
     flow untouched, so items keep marching off the right edge instead of wrapping. */
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)) !important;
  gap: 14px !important;
  padding: 4px 0 8px !important;
}

/* --- сама витрина ---------------------------------------------------------- */
.page-hub .reward-card {
  position: relative;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 1fr auto;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(22, 23, 18, 0), #0d0e0a 78%), #141510 !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform .34s cubic-bezier(.2, .85, .25, 1), border-color .34s ease, box-shadow .34s ease;
}

/* Луч света сверху: предмет стоит в витрине, а не лежит на столе. */
.page-hub .reward-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -30% 20% 45% 20%;
  background: radial-gradient(ellipse at 50% 0%,
    color-mix(in srgb, var(--accent, #f5c400) 22%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .34s ease;
  pointer-events: none;
}

.page-hub .reward-card:hover {
  transform: translateY(-6px) !important;
  border-color: color-mix(in srgb, var(--accent, #f5c400) 44%, transparent) !important;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .5);
}

.page-hub .reward-card:hover::before { opacity: 1 }

/* --- экспонат -------------------------------------------------------------- */
.page-hub .reward-preview {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 18px 14px 8px !important;
  transition: transform .34s cubic-bezier(.2, .85, .25, 1);
}

.page-hub .reward-card:hover .reward-preview { transform: scale(1.06) }

/* Полка под предметом — та же световая линия, что подиум под персонажем. */
.page-hub .reward-preview::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 22%;
  right: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--accent, #f5c400) 40%, transparent), transparent);
}

/* --- подпись --------------------------------------------------------------- */
.page-hub .reward-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: 10px 14px 0 !important;
  font: 650 12px/1.3 var(--body) !important;
  letter-spacing: .01em;
  text-transform: none !important;
  color: #f6f5ee;
}

.page-hub .reward-card .item-kind {
  position: relative;
  z-index: 1;
  padding: 2px 14px 12px !important;
  color: var(--hn-muted, #9a9c8e) !important;
  font-size: 10px !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: opacity .18s ease;
}

/* --- действие появляется, когда до предмета дотянулись ---------------------- */
.page-hub .reward-actions {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.2, .85, .25, 1);
}

.page-hub .reward-card:hover .reward-actions,
.page-hub .reward-card:focus-within .reward-actions { opacity: 1; transform: none }

.page-hub .reward-actions .btn {
  flex: 1;
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
}

/* Кнопка встаёт на место подписи, поэтому подпись уступает ей место. */
.page-hub .reward-card:hover .item-kind,
.page-hub .reward-card:focus-within .item-kind { opacity: 0 }

/* --- надето ---------------------------------------------------------------- */
.page-hub .reward-card.equipped {
  border-color: color-mix(in srgb, var(--accent, #f5c400) 62%, transparent) !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent, #f5c400) 9%, transparent), #0d0e0a 74%), #141510 !important;
}

/* Уголок вместо слова: не занимает строку и виден боковым зрением. */
.page-hub .reward-card.equipped::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  border-width: 0 26px 26px 0;
  border-style: solid;
  border-color: transparent color-mix(in srgb, var(--accent, #f5c400) 85%, transparent) transparent transparent;
}

/* --- заблокировано --------------------------------------------------------- */
.page-hub .reward-card.locked {
  opacity: 1 !important;
  filter: none !important;
  border-color: rgba(255, 255, 255, .05) !important;
}

.page-hub .reward-card.locked .reward-preview { filter: grayscale(.75) brightness(.7) }

.page-hub .reward-card.locked .reward-preview::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, .045) 0 6px, transparent 6px 12px);
}

.page-hub .reward-card.locked h3 { color: #b9b8ad }

.page-hub .reward-lock {
  position: absolute !important;
  z-index: 3;
  top: 10px;
  left: 10px;
  width: 22px !important;
  height: 22px !important;
  padding: 4px;
  border-radius: 7px;
  background: rgba(8, 9, 6, .72);
  color: #cfd0c4 !important;
}

/* --- вкладки: один рельс вместо россыпи кнопок ----------------------------- */
.page-hub .inventory-tabs {
  gap: 0 !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 12px !important;
  background: rgba(8, 9, 6, .55) !important;
  width: max-content;
  max-width: 100%;
}

.page-hub .inventory-tabs button {
  height: 34px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--hn-muted, #9a9c8e) !important;
  font-size: 11px !important;
  letter-spacing: .02em;
  transition: color .2s ease, background .2s ease;
}

.page-hub .inventory-tabs button:hover { color: #f6f5ee !important }

.page-hub .inventory-tabs button.active {
  background: color-mix(in srgb, var(--accent, #f5c400) 16%, transparent) !important;
  color: var(--accent, #f5c400) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #f5c400) 34%, transparent);
}

/* --- предпросмотр слева: тоже витрина, а не карточка ----------------------- */
.page-hub .inventory-hero .loadout {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 18%,
    color-mix(in srgb, var(--accent, #f5c400) 10%, transparent), transparent 62%), #111209 !important;
}

.page-hub .inventory-hero .loadout-preview { position: relative; z-index: 1 }

.page-hub .inventory-hero .loadout-preview::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  translate: -50% 0;
  width: 62%;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #f5c400) 12%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent, #f5c400) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .page-hub .reward-card,
  .page-hub .reward-preview,
  .page-hub .reward-actions { transition: none !important }
  .page-hub .reward-card:hover { transform: none !important }
  .page-hub .reward-actions { opacity: 1; transform: none }
  .page-hub .reward-card:hover .item-kind { opacity: 1 }
}