:root{
  --white:#f5f5f5; --gray-1:#cfcfcf; --gray-2:#9a9a9a; --gray-3:#6b6b6b;
  --panel: rgba(255,255,255,0.075); --panel-strong: rgba(255,255,255,0.12);
  --border: rgba(255,255,255,0.14); --border-soft: rgba(255,255,255,0.08);
  --radius: 20px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; overflow-y:scroll; scrollbar-gutter:stable;}
body{margin:0; min-height:100vh; color:var(--white); font-family:'Inter',sans-serif; background:#050505; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:var(--white);} button{font-family:inherit;}
:focus-visible{outline:2px solid var(--white); outline-offset:3px;}

.bg-fixed{position:fixed; inset:0; z-index:-2; background-size:cover; background-position:center; transition:background-image .4s ease;}
.bg-fixed:not(.empty){filter:grayscale(1) contrast(1.05) brightness(.48);}
.bg-fixed.empty{background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(255,255,255,.07), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 64px), #060606;}
.bg-overlay{position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.6) 100%);}

header.topbar{position:sticky; top:0; z-index:30; display:grid; grid-template-columns:1fr auto 1fr; grid-template-areas:"mark nav side"; align-items:center; gap:14px;
  padding:16px clamp(16px,4vw,40px); background:rgba(5,5,5,.55); backdrop-filter:blur(18px); border-bottom:1px solid var(--border-soft);}
.mark{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:9px; justify-self:start; grid-area:mark;}
.mark .sq{width:9px;height:9px; background:var(--white); border-radius:2px;}
.eye-stat{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem; opacity:.65; cursor:default; outline:none;
}
.eye-stat:hover, .eye-stat:focus{ opacity:1; }
.eye-tooltip{
  position:absolute; top:135%; left:0; z-index:40;
  background:#141416; border:1px solid var(--border); border-radius:8px;
  padding:8px 12px; font-size:.7rem; font-weight:600; color:var(--gray-1);
  white-space:nowrap; opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease;
}
.eye-stat:hover .eye-tooltip, .eye-stat:focus .eye-tooltip{ opacity:1; transform:translateY(0); }
nav.tabs{display:flex; gap:4px; overflow-x:auto; padding:4px; background:var(--panel); border:1px solid var(--border-soft); border-radius:999px; justify-self:center; max-width:100%; grid-area:nav;}
nav.tabs button{background:none; border:none; color:var(--gray-2); font-size:.78rem; font-weight:600; text-transform:uppercase;
  padding:9px 16px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:background .25s ease, color .25s ease;}
nav.tabs button.active{background:var(--white); color:#050505;}
.nav-icon-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--panel);
  color:var(--white); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.nav-icon-btn:hover{border-color:var(--white);}
.nav-icon-btn.active{background:var(--white); color:#050505; border-color:var(--white);}

main{max-width:900px; margin:0 auto; padding:38px clamp(16px,4vw,40px) 80px;}
section{display:none;} section.active{display:block; animation:sectionFadeIn .32s cubic-bezier(.22,.61,.36,1);}
@keyframes sectionFadeIn{ from{transform:translateY(10px);} to{transform:translateY(0);} }
.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); backdrop-filter:blur(20px); padding:clamp(20px,4vw,36px); margin-bottom:22px; max-width:100%; box-sizing:border-box;}
@media (max-width:480px){
  main{padding-left:6px; padding-right:6px;}
  .panel{padding:16px 12px; border-radius:14px;}
  .section-header-row{align-items:flex-start;}
  .header-actions{flex-wrap:wrap;}
}
.eyebrow{font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-2); margin:0 0 6px;}
h2.section-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.55rem; margin:0 0 22px; display:flex; align-items:center; gap:8px;}
.info-tip{position:relative; display:inline-flex; align-items:center; color:var(--gray-2); cursor:default; outline:none; vertical-align:middle;}
.info-tip:hover, .info-tip:focus{ color:var(--white); }
.info-tip-bubble{
  position:absolute; top:calc(100% + 8px); left:0; z-index:25;
  background:#141416; border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; font-size:.76rem; font-weight:400; line-height:1.5; color:var(--gray-1);
  width:260px; opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease;
}
.info-tip:hover .info-tip-bubble, .info-tip:focus .info-tip-bubble{ opacity:1; transform:translateY(0); }
.section-header-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.section-header-row h2.section-title{margin-bottom:0;}
.header-actions{display:flex; align-items:center; gap:10px;}
.name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.9rem,4vw,2.5rem); margin:0 0 4px;}
.tagline{color:var(--gray-1); margin:0 0 14px;}
.bio{max-width:60ch; line-height:1.65; color:var(--gray-1);}
.contacts{display:flex; flex-direction:column; gap:2px; margin-top:16px;}
.contact-chip{font-size:.8rem; padding:4px 13px; border:1px solid var(--border); border-radius:999px; text-decoration:none; background:var(--panel-strong); position:relative;}
.chip-tooltip{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(4px);
  background:#141416; border:1px solid var(--border); border-radius:8px; padding:6px 10px;
  font-size:.68rem; font-weight:400; color:var(--gray-1); white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis;
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:30;
}
.contact-chip:hover .chip-tooltip, .contact-chip:focus .chip-tooltip{opacity:1; transform:translateX(-50%) translateY(0);}

.profile-grid{display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start;}
.avatar{width:150px; height:150px; border-radius:16px; object-fit:cover; border:1px solid var(--border); background:var(--panel-strong); display:block;}
.avatar-placeholder{width:150px; height:150px; display:flex; align-items:center; justify-content:center; border:1px dashed var(--border);
  border-radius:16px; color:var(--gray-2); font-size:.72rem; text-align:center; padding:8px;}
.appearance-row{display:none; gap:8px; flex-wrap:wrap; margin-top:18px; padding-top:18px; border-top:1px solid var(--border-soft);}
.edit-on .appearance-row{display:flex;}

.avatar-col{display:flex; flex-direction:column; align-items:center; gap:10px;}
.avatar-actions{display:none; gap:8px;}
.edit-on .avatar-actions{display:flex;}
.icon-btn{
  display:none;
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--panel-strong);
  color:var(--white); font-size:14px; cursor:pointer; align-items:center; justify-content:center;
  line-height:1;
}
.edit-on .icon-btn{display:flex;}
.icon-btn:hover{border-color:var(--white);}

.socials-rail{flex:0 0 auto; display:flex; flex-direction:column; align-items:stretch; gap:8px;}
@media (max-width:600px){
  .avatar-col{order:1;}
  .socials-rail{order:2; flex:1; min-width:0; max-width:180px;}
  .profile-main{order:3; flex:1 1 100%; width:100%;}
}
.socials-label{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-2); text-align:center;}
.socials-rail #pSocials{display:flex; flex-direction:column; gap:8px;}
.socials-rail .contact-chip{text-align:center; display:block; width:100%;}
.profile-divider{border:none; border-top:1px solid var(--border-soft); margin:22px 0 18px;}
.contacts-row{display:flex; align-items:flex-start; flex-wrap:wrap; gap:14px;}
.contacts-row .contacts{margin-top:0; flex:1;}
.contact-text{font-size:.85rem; color:var(--gray-1); padding:7px 0;}

.resume-item{border-bottom:1px solid var(--border-soft); padding:16px 0;}
.resume-item:last-child{border-bottom:none;}
.resume-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.resume-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem;}
.resume-sub{color:var(--gray-1); font-size:.92rem; margin-top:2px;}
.resume-period{font-size:.76rem; color:var(--gray-2); white-space:nowrap;}
.resume-desc{margin-top:8px; color:var(--gray-1); font-size:.9rem; line-height:1.55; white-space:pre-wrap;}
.resume-actions{display:none; gap:10px; margin-top:10px;}
.edit-on .resume-actions{display:flex;}
.resume-actions button{font-size:.72rem; text-transform:uppercase; background:none; border:1px solid var(--border);
  border-radius:999px; padding:6px 13px; cursor:pointer; color:var(--gray-1);}

.skill-chip{display:inline-flex; align-items:center;}
.skill-chip .x{margin-left:8px; opacity:.6; cursor:pointer;}
.skill-chip .x:hover{opacity:1;}
.ghost-btn{display:none; font-size:.75rem; font-weight:600; text-transform:uppercase; background:none; border:1px solid var(--border);
  color:var(--gray-1); padding:9px 16px; border-radius:999px; cursor:pointer;}
.edit-on .ghost-btn{display:inline-block;}

.chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;}
.chip{font-size:.78rem; font-weight:600; padding:8px 15px; border-radius:999px; border:1px solid var(--border);
  background:var(--panel-strong); color:var(--gray-1); cursor:pointer;}
.chip.active{background:var(--white); color:#050505; border-color:var(--white);}

.article-item{border-bottom:1px solid var(--border-soft); padding:18px 0;}
.article-item:last-child{border-bottom:none;}
.article-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; cursor:pointer;}
.article-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.15rem; margin:0;}
.article-date{font-size:.75rem; color:var(--gray-2); white-space:nowrap;}
.article-body{max-height:0; overflow:hidden; line-height:1.7; color:var(--gray-1); transition:max-height .35s ease, padding-top .35s ease;}
.article-item.open .article-body{max-height:2000px; padding-top:12px;}
.article-actions{display:none; gap:10px; margin-top:10px;}
.edit-on .article-actions{display:flex;}
.article-actions button, .rating-remove{font-size:.72rem; text-transform:uppercase; background:none; border:1px solid var(--border);
  border-radius:999px; padding:6px 13px; cursor:pointer; color:var(--gray-1);}

.ratings-layout{display:flex; gap:26px; align-items:flex-start; min-width:0; max-width:100%;}
.rating-cats-col{flex:0 0 170px; display:flex; flex-direction:column; gap:4px;}
.rating-main-col{flex:1; min-width:0;}
.cat-list-item{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:9px 12px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  font-size:.85rem; color:var(--gray-1); background:none; text-align:left;
}
.cat-list-item:hover{background:var(--panel-strong);}
.cat-list-item.active{background:var(--panel-strong); border-color:var(--border); color:var(--white); font-weight:600;}
.cat-list-item .x{opacity:.5; font-size:.8rem;}
.cat-list-item .x:hover{opacity:1;}
.cat-add-row{margin-top:6px;}
.cat-add-row button{
  width:100%; text-align:left; padding:9px 12px; border-radius:10px; border:1px dashed var(--border);
  background:none; color:var(--gray-2); cursor:pointer; font-size:.8rem;
}
.cat-add-row button:hover{border-color:var(--white); color:var(--white);}
.cat-filter-dropdown{display:none; position:relative;}
@media (max-width:720px){
  .ratings-layout{flex-direction:column; align-items:stretch;}
  .rating-cats-col{display:none;}
  .cat-filter-dropdown{display:block;}
}

.rating-count{font-size:.78rem; color:var(--gray-2); margin:10px 0 12px;}

.rating-search{
  width:100%; font-size:.88rem; border:1px solid var(--border); border-radius:12px; padding:10px 14px;
  background:var(--panel-strong); color:var(--white); margin-bottom:14px;
}
.rating-search::placeholder{color:var(--gray-2);}
.rating-controls{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px;}
.rating-controls select, .rating-controls input[type=date]{
  font-size:.78rem; border:1px solid var(--border); border-radius:999px; padding:8px 14px;
  background:var(--panel-strong); color:var(--white);}
.rating-controls select option{background:#141416; color:var(--white);}
.rating-controls .btn-secondary{padding:8px 14px; font-size:.72rem;}

.star-filter-dropdown{position:relative;}
#starFilterToggle{color:#d8b34a;}
.star-filter-popover{
  position:absolute; top:calc(100% + 6px); left:0; z-index:25;
  background:#141416; border:1px solid var(--border); border-radius:12px; padding:10px;
  display:none; flex-direction:column; gap:6px; min-width:150px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.star-filter-popover.open{display:flex;}
.star-filter-popover button{
  font-size:.82rem; letter-spacing:1px; padding:8px 10px; border-radius:8px; border:1px solid var(--border);
  background:none; color:#d8b34a; cursor:pointer; text-align:left;}
.star-filter-popover button.active{background:rgba(216,179,74,.16); border-color:#d8b34a; color:#e8c96a;}
@media (max-width:480px){
  .rating-controls{display:flex; flex-wrap:wrap; gap:8px;}
  .rating-controls select{flex:1 1 120px; min-width:0;}
  .cat-filter-dropdown, .rating-controls .star-filter-dropdown{flex:0 0 auto;}
  .rating-controls .btn-secondary{flex:1 1 100%; width:100%;}
  #starFilterToggle, #ratingCatFilterToggle, #planCatFilterToggle{padding-left:14px; padding-right:14px;}
}
.ratings-list{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--panel-strong); min-width:0; max-width:100%; width:100%;}
.rating-row{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border-soft); cursor:pointer; min-width:0; width:100%;}
.rating-row:last-child{border-bottom:none;}
.rating-row:hover{background:rgba(255,255,255,.04);}
.rr-cat{font-size:.68rem; color:var(--gray-2); text-transform:uppercase; letter-spacing:.05em; width:78px; flex:0 0 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rr-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.92rem; flex:1 1 0; min-width:0; width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.stars{display:flex; gap:2px;}
.stars .star{font-size:.85rem; color:var(--gray-3);}
.stars .star.filled{color:#d8b34a;}
.rr-stars{flex:0 0 auto;}
.rr-date{font-size:.7rem; color:var(--gray-2); width:64px; text-align:right; flex:0 0 auto;}
.rr-date.watch-badge{width:auto; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#d8b34a;}
.rating-remove{flex:0 0 auto; display:none;}
.rating-remove.show{display:block;}
@media (max-width:640px){ .rr-cat{display:none;} .rr-date:not(.watch-badge){display:none;} .rr-date.watch-badge{max-width:90px;} }
.star-picker{display:flex; gap:6px; margin-top:4px;}
.star-picker button{background:none; border:1px solid var(--border); border-radius:8px; width:38px; height:38px; font-size:1.15rem; color:var(--gray-3); cursor:pointer;}
.star-picker button.filled{color:#d8b34a; border-color:#d8b34a;}

.empty{font-size:.85rem; color:var(--gray-2); border:1px dashed var(--border); border-radius:14px; padding:26px; text-align:center;}
.add-btn{font-size:.78rem; font-weight:600; text-transform:uppercase; background:var(--white); color:#050505; border:1px solid var(--white);
  padding:11px 20px; border-radius:999px; cursor:pointer; display:none; margin-top:18px;}
.edit-on .add-btn{display:inline-block;}

.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index:80; padding:20px;}
.modal-backdrop.show{display:flex;}
.modal{background:#0d0d0f; border:1px solid var(--border); border-radius:18px; width:100%; max-width:480px; max-height:88vh; overflow:auto; padding:26px;}
.modal h3{font-family:'Space Grotesk',sans-serif; margin:0 0 16px; font-size:1.25rem;}
.modal label{display:block; font-size:.72rem; text-transform:uppercase; color:var(--gray-2); margin:14px 0 6px;}
.modal input[type=text], .modal input[type=password], .modal textarea, .modal select{
  width:100%; font-size:.94rem; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:rgba(255,255,255,.04); color:var(--white);}
.modal select option{background:#141416; color:var(--white);}
.modal textarea{min-height:120px; resize:vertical;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}
.btn-secondary{background:none; border:1px solid var(--border); padding:10px 17px; border-radius:999px; cursor:pointer; font-size:.76rem; font-weight:600; text-transform:uppercase; color:var(--gray-1);}
.btn-primary{background:var(--white); border:1px solid var(--white); color:#050505; padding:10px 17px; border-radius:999px; cursor:pointer; font-size:.76rem; font-weight:600; text-transform:uppercase;}
.modal-note{font-size:.78rem; color:var(--gray-2); margin-top:12px; line-height:1.5;}

.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--white); color:#050505;
  padding:11px 20px; border-radius:999px; font-size:.82rem; font-weight:600; opacity:0; transition:opacity .25s ease, transform .25s ease; z-index:90; pointer-events:none;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.mobile-menu-btn{display:none;}

@media (max-width:720px){
  header.topbar{grid-template-columns:1fr auto; grid-template-areas:"mark side"; position:relative;}
  .mark{flex-direction:column; align-items:flex-start; gap:8px;}
  .mark-top{display:flex; align-items:center; gap:9px;}
  .mobile-menu-btn{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--panel);
    color:var(--white); cursor:pointer;
  }
  .mobile-menu-btn:hover{border-color:var(--white);}
  nav.tabs{
    display:none; position:absolute; top:100%; left:clamp(16px,4vw,40px); margin-top:10px;
    flex-direction:column; width:200px; background:#141416; border:1px solid var(--border);
    border-radius:14px; padding:8px; box-shadow:0 20px 50px rgba(0,0,0,.6); z-index:40;
    overflow-x:visible;
  }
  nav.tabs.mobile-open{display:flex; animation:navDropIn .18s ease;}
  nav.tabs button{width:100%; text-align:left;}
}
@keyframes navDropIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }

.games-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px;}
.game-card{
  background:var(--panel-strong); border:1px solid var(--border); border-radius:14px; padding:18px;
  cursor:pointer; text-align:left;
}
.game-card:hover{border-color:var(--white);}
.game-card .game-emoji{display:block; margin-bottom:10px; color:var(--white);}
.game-card .game-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.02rem; margin-bottom:4px;}
.game-card .game-desc{font-size:.82rem; color:var(--gray-2); line-height:1.4;}

.game-frame-wrap{
  background:#050505; border-radius:14px; overflow:hidden; border:1px solid var(--border);
  display:flex; justify-content:center; min-width:0; width:100%; box-sizing:border-box;
}
.game-frame{
  width:100%; max-width:400px; height:min(var(--gh, 640px), 78vh); border:none; display:block; background:#050505; min-width:0;
}
@media (max-width:480px){
  #gamePlayerPanel{ padding:12px; }
  .game-frame-wrap{ padding:0; }
  .game-frame{ max-width:100%; width:100%; height:min(var(--gh, 600px), 72vh); }
}

.site-footer{
  max-width:900px; margin:0 auto; padding:0 clamp(16px,4vw,40px) 40px;
  text-align:center; font-size:.74rem; color:var(--gray-3);
}