/* CLOUD GAMES / V2 — visual system.
 * Image-first, high contrast, compact editorial typography, predictable interaction.
 * Loaded LAST, so player, account, and seasonal styles resolve in one place.
 * No web fonts, animation libraries, external artwork, or tracking. */
:root{
 --gd-bg:#0c0e12;--gd-surface:#171a20;--gd-surface-2:#20242d;
 --gd-stroke:rgba(239,242,246,.105);--gd-text:#f5f5f1;--gd-muted:#a1a6b1;
 --gd-accent:#e6e7e6;--gd-accent-rgb:230,231,230;--gd-glow:rgba(255,255,255,.06);
 --gd-card-radius:13px;--gd-design-ease:cubic-bezier(.2,.75,.25,1);
}
html[data-gd-theme=obsidian]{
 --gd-bg:#0c0e12;--gd-surface:#171a20;--gd-surface-2:#20242d;
 --gd-text:#f5f5f1;--gd-muted:#a1a6b1;--gd-accent:#e6e7e6;
 --gd-accent-rgb:230,231,230;--gd-glow:rgba(255,255,255,.06);
}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
#shell{background:var(--gd-bg)!important}
.top{
 min-height:65px;gap:10px!important;padding-block:10px!important;
 background:var(--gd-bg)!important;border-bottom:1px solid var(--gd-stroke)!important;
 box-shadow:none!important;backdrop-filter:none!important;
}
.top .brand{min-width:0;letter-spacing:-.035em}
.top .brand span{font-weight:900;letter-spacing:-.045em}
.top .searchbox{border-radius:11px!important}
#search{border-radius:11px!important;font-size:14px!important;min-height:39px}
#search::placeholder{color:var(--gd-muted);opacity:.86}
.top .gd-account,.top .gds-settings-trigger,.top .gd-more summary,.top button.btn{
 border-radius:10px!important;box-shadow:none!important;
}
#side{
 background:var(--gd-bg)!important;border-right:1px solid var(--gd-stroke)!important;
 padding:15px 10px!important;
}
#side .nav{min-height:41px!important;margin:2px 0!important;font-size:13px!important;font-weight:640!important;
 border-radius:9px!important;transition:background .15s,color .15s!important}
#side .nav:hover{transform:none!important}
#side .nav[aria-current=true],#side .nav.active{font-weight:780!important}
#side .gds-side-trigger{background:var(--gd-surface);border-radius:10px;font-size:12px}
#side .gd-genre-toggle{background:transparent!important;border-color:var(--gd-stroke)!important;
 border-radius:10px;font-size:12px!important;margin-top:12px}
#gd-studio{max-width:1420px;padding:22px 26px 6px}
.gds-hero{
 position:relative;min-height:255px;margin-bottom:14px;padding:36px 40px;
 background:linear-gradient(115deg,rgba(var(--gd-accent-rgb),.065),transparent 69%),var(--gd-surface)!important;
 border:1px solid var(--gd-stroke);border-radius:19px!important;box-shadow:none!important;
 display:flex;align-items:center;justify-content:space-between;gap:22px;isolation:isolate;
}
.gds-hero:before{width:360px;height:360px;top:-170px;right:-50px;filter:none;
 background:radial-gradient(circle,rgba(var(--gd-accent-rgb),.055),transparent 72%)!important}
.gds-hero-copy{max-width:710px;position:relative;z-index:2}
.gds-hero .gds-overline{letter-spacing:.14em;font-size:10px;font-weight:780}
.gds-hero h1{font-size:clamp(36px,4.55vw,63px)!important;line-height:1.03!important;
 font-weight:850!important;letter-spacing:-.065em!important;margin:13px 0 15px!important;max-width:690px}
.gds-hero p{font-size:14px;line-height:1.6;max-width:480px;color:var(--gd-muted);margin:0 0 23px}
.gds-actions{gap:9px}
.gds-btn{border-radius:10px!important;font-size:12px;font-weight:760;
 transition:background .15s,border-color .15s,transform .15s var(--gd-design-ease)!important}
.gds-btn:hover{filter:none;transform:translateY(-1px)}
.gds-btn.primary{background:var(--gd-accent);border-color:var(--gd-accent);color:var(--gd-bg)}
.gds-art{width:230px;flex:0 0 230px;height:195px;display:grid;place-items:center;isolation:isolate}
.gds-art .disc{border-radius:20%!important;width:170px;height:170px;
 animation:none!important;box-shadow:none!important;transform:rotate(12deg)!important;
 border:1px solid rgba(var(--gd-accent-rgb),.22)}
.gds-art .disc.two{border-radius:19%!important;width:123px;height:123px;
 transform:rotate(-14deg)!important;background:rgba(var(--gd-accent-rgb),.055)}
.gds-art>strong{font-size:71px;font-weight:900;text-shadow:none!important;letter-spacing:-.105em;line-height:1;
 color:var(--gd-accent)}
.gds-art-caption{position:absolute;bottom:-9px;left:0;right:0;text-align:center;
 font:700 9px/1.35 system-ui,sans-serif;letter-spacing:.18em;color:var(--gd-muted)}
.gds-shortcuts{gap:9px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:10px}
.gds-shortcut{border-radius:11px;min-height:75px;gap:11px;padding:14px;
 transition:background .15s,border-color .15s!important}
.gds-shortcut:hover{transform:none;background:var(--gd-surface-2)}
.gds-shortcut .gds-icon{border-radius:9px;flex-basis:34px;height:34px;font-size:18px;
 background:rgba(var(--gd-accent-rgb),.085)}
.gds-shortcut strong{font-size:12px;line-height:1.35}
.gds-shortcut span:last-child{color:var(--gd-muted);font-size:10px;line-height:1.35}
#gds-discover-panel{border-radius:17px;background:transparent;border:0;
 margin:13px 0 18px;padding:10px 0 0}
.gds-picks-header{margin-bottom:15px;gap:12px}
.gds-picks-header h2{font-size:clamp(22px,2.9vw,32px)!important;line-height:1.12;
 letter-spacing:-.05em!important;margin:7px 0!important;font-weight:850!important}
.gds-picks-header p{font-size:12px;line-height:1.5;margin:4px 0 0}
.gds-moods{gap:7px;margin-bottom:15px}
.gds-mood{border-radius:9px;min-height:36px;padding:8px 13px;font-size:11px;
 font-weight:730;transition:background .15s,border-color .15s!important}
.gds-mood[aria-pressed=true]{color:var(--gd-accent);border-color:rgba(var(--gd-accent-rgb),.46);
 background:rgba(var(--gd-accent-rgb),.08)}
.gds-pick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gds-pick{
 display:flex;flex-direction:column;padding:9px;gap:0;min-height:0;align-items:stretch;
 background:var(--gd-surface)!important;border:1px solid var(--gd-stroke);
 border-radius:14px;text-align:left;overflow:hidden;
 box-shadow:none!important;transition:transform .18s var(--gd-design-ease),border-color .18s!important;
}
.gds-pick:hover,.gds-pick:focus-visible{
 transform:translateY(-3px);border-color:rgba(var(--gd-accent-rgb),.45);
 background:var(--gd-surface)!important;
}
.gds-pick-cover{display:block;position:relative;aspect-ratio:16/10;width:100%;overflow:hidden;
 border-radius:9px;background:var(--gd-surface-2)}
.gds-pick-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s var(--gd-design-ease)}
.gds-pick:hover .gds-pick-cover img{transform:scale(1.035)}
.gds-pick-cover.gds-pick-fallback{background:linear-gradient(135deg,var(--gd-surface-2),rgba(var(--gd-accent-rgb),.17))}
.gds-pick-initials{display:none;position:absolute;inset:0;place-items:center;letter-spacing:-.07em;
 font-size:clamp(34px,5vw,69px);font-weight:900;opacity:.25;color:var(--gd-text)}
.gds-pick-fallback .gds-pick-initials{display:grid}
.gds-pick-info{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:88px;padding:13px 5px 5px}
.gds-pick-kicker{color:var(--gd-muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:730}
.gds-pick strong{font-size:16px;letter-spacing:-.025em;line-height:1.28;
 overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.gds-pick-open{margin-top:auto;color:var(--gd-accent);font-size:11px;font-weight:780;
 letter-spacing:0;display:flex;align-items:center;gap:4px}
.gds-pick-open:after{content:"↗";font-size:13px}
.gds-join{margin:14px 0 0;border-radius:12px;border:1px solid var(--gd-stroke);
 background:var(--gd-surface);padding:13px 15px}
.gds-join span{line-height:1.4;font-size:11px}
.gds-join .gds-btn{min-height:37px;padding:9px 13px}
#view .grid{gap:15px!important;--gmin:180px}
#view .row{gap:13px!important}
#view .tile,#sheet .tile{
 background:var(--gd-surface)!important;border:1px solid var(--gd-stroke)!important;
 padding:8px!important;border-radius:13px!important;
 box-shadow:none!important;transition:border-color .18s,transform .18s!important;
}
#view .tile:hover,#view .tile:focus-within,#sheet .tile:hover,#sheet .tile:focus-within{
 transform:translateY(-2px)!important;box-shadow:none!important;
 border-color:rgba(var(--gd-accent-rgb),.38)!important;
}
#view .tile .art,#sheet .tile .art{border-radius:8px!important;border:0}
#view .tile .name,#sheet .tile .name{
 min-height:36px;max-height:36px;font-size:13px!important;line-height:18px!important;
 margin:10px 3px 1px!important;letter-spacing:-.02em}
#view .tile .meta,#sheet .tile .meta{font-size:10px!important;min-height:15px}
#view .tile .gd-rating,#sheet .tile .gd-rating{display:flex!important;gap:6px!important;min-height:29px;
 margin:8px 2px 0!important;padding:7px 0 0!important;flex-wrap:nowrap!important}
#view .tile .gd-rating-trigger,#sheet .tile .gd-rating-trigger{
 border:0!important;border-radius:6px!important;background:transparent!important;
 min-height:22px!important;padding:2px!important;font-size:11px!important}
#view .tile .gd-rating-detail,#sheet .tile .gd-rating-detail{font-size:10px!important;min-width:0}
#view .tile .gd-rating-own,#sheet .tile .gd-rating-own{display:none!important}
#view .tile .fav,#sheet .tile .fav{top:13px!important;right:13px!important;width:31px;height:31px;
 border-radius:8px!important;box-shadow:0 3px 15px rgba(0,0,0,.19)}
#view .tile .hit .art:before,#sheet .tile .hit .art:before{border-radius:6px;background:#11151cdc;
 color:white;padding:8px 10px;font-size:9px}
@media(max-width:1050px){
 #gd-studio{padding:17px 18px 5px}
 .gds-hero{padding:29px 30px;min-height:210px}
 .gds-art{flex-basis:170px;width:170px}
 .gds-art .disc{width:125px;height:125px}
 .gds-art .disc.two{width:90px;height:90px}
 .gds-art>strong{font-size:57px}
 .gds-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 .top{gap:7px!important}
 .gds-hero{padding:25px 21px;min-height:185px;border-radius:15px!important}
 .gds-hero h1{font-size:clamp(32px,8vw,44px)!important}
 .gds-hero p{font-size:12px;margin-bottom:16px}
 .gds-hero-copy{max-width:100%}
 .gds-art:not(.gd-seasonal-art){display:none}
 .gds-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .gds-shortcut{padding:11px;min-height:69px}
 .gds-pick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .gds-pick{padding:6px;border-radius:11px}
 .gds-pick-cover{border-radius:7px;aspect-ratio:1/1}
 .gds-pick-info{padding:10px 5px 6px;min-height:84px}
 .gds-pick strong{font-size:13px}
 .gds-pick-kicker{font-size:9px}
 .gds-pick-open{font-size:10px}
 .gds-picks-header .gds-btn{width:auto}
 #view .grid{--gmin:145px;gap:10px!important}
 #view .tile{padding:6px!important}
 #view .tile .name{font-size:12px!important}
 #view .tile .gd-rating{flex-wrap:wrap!important;min-height:29px}
 #view .tile .gd-rating-detail{display:none!important}
 .gds-join{padding:11px;gap:8px}
}
@media(max-width:390px){
 .gds-hero .gds-actions{flex-direction:column;align-items:stretch}
 .gds-pick-grid{gap:7px}
 #view .grid{--gmin:136px}
}
@media(prefers-reduced-motion:reduce){
 #view .tile,#sheet .tile,.gds-pick,.gds-pick-cover img,.gds-btn{transition:none!important;transform:none!important}
}
html[data-gd-motion=reduce] #view .tile,html[data-gd-motion=reduce] .gds-pick{transition:none!important;transform:none!important}
