:root{
--bg:#0e1016;
--card:#161922;
--text:#f1f5ff;
--accent:#7c5cff;
--glow:rgba(124,92,255,0.4);
--radius:16px;
}

html{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
text-rendering:optimizeLegibility;
-webkit-text-rendering:optimizeLegibility;
}

/* OPENING PAGE STYLES */

.opening-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px 20px;
background: linear-gradient(135deg, #0e1016 0%, #1a1f2e 50%, #0e1016 100%);
background-size: 200% 200%;
animation: bgShift 8s ease-in-out infinite;
}

@keyframes bgShift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}

.opening-header {
text-align: center;
margin-bottom: 60px;
}

.site-title {
font-size: 4rem;
margin: 0;
background: linear-gradient(135deg, #7c5cff, #a78bfa, #7c5cff);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
letter-spacing: -2px;
animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}

.site-subtitle {
font-size: 1.2rem;
color: #a0aec0;
margin: 10px 0 0 0;
font-weight: 300;
}

.welcome-text {
font-size: 1.1rem;
color: #cbd5e0;
margin-bottom: 50px;
}

.opening-content {
width: 100%;
max-width: 1000px;
}

.nav-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}

.nav-card {
background: var(--card);
border: 2px solid rgba(124, 92, 255, 0.2);
border-radius: var(--radius);
padding: 40px 30px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}

.nav-card:hover {
border-color: var(--accent);
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(124, 92, 255, 0.3), 0 0 40px var(--glow);
}

.nav-icon {
font-size: 3.15rem;
margin-bottom: 20px;
display: block;
transition: transform 0.3s ease;
animation: float 3s ease-in-out infinite;
}

@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}

.nav-card:hover .nav-icon {
transform: scale(1.1) rotate(10deg);
}

.nav-card h2 {
margin: 20px 0 15px 0;
font-size: 1.8rem;
color: var(--text);
}

.nav-card p {
color: #a0aec0;
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}

.main-content {
display: block;
}

.main-content.hidden {
display: none;
}

.back-btn {
background: var(--card);
border: 2px solid var(--accent);
color: var(--accent);
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 0.95rem;
transition: all 0.3s ease;
font-weight: 600;
}

.back-btn:hover {
background: var(--accent);
color: var(--bg);
}

/* BACKGROUND - Optimized to run only on hover */

#bg{
position:fixed;
width:100%;
height:100%;
background:
radial-gradient(circle at 20% 30%,#1d1f35 0%,transparent 50%),
radial-gradient(circle at 80% 70%,#11142b 0%,transparent 50%);
z-index:-1;
opacity:.5;
}

/* TOPBAR */

.topbar{
position:sticky;
top:0;
display:flex;
gap:15px;
justify-content:center;
align-items:center;
padding:20px;
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
background:rgba(15,17,25,0.6);
border-bottom:1px solid rgba(255,255,255,0.05);
z-index:5;
will-change:backdrop-filter;
}

.back-btn{
position:absolute;
left:20px;
}

.topbar button{
background:var(--card);
border:none;
padding:10px 18px;
border-radius:12px;
color:var(--text);
cursor:pointer;
transition:.25s;
will-change:background,transform;
-webkit-user-select:none;
user-select:none;
}
.topbar button:hover{
background:var(--accent);
}
.topbar button.active{
background:var(--accent);
box-shadow:0 0 15px var(--glow);
transform:scale(1.05);
}

/* Tab styling */
.tab{
padding:12px 24px;
border-radius:10px;
cursor:pointer;
transition:.3s cubic-bezier(0.25,0.46,0.45,0.94);
border:2px solid transparent;
font-weight:600;
font-size:15px;
-webkit-user-select:none;
user-select:none;
}

.tab:hover{
transform:translateY(-2px);
}

#gamesTab{
background:rgba(107,140,255,0.15);
border-color:rgba(107,140,255,0.3);
color:#6b8cff;
}

#gamesTab:hover{
background:rgba(107,140,255,0.25);
border-color:rgba(107,140,255,0.5);
}

#gamesTab.active{
background:#6b8cff;
border-color:#6b8cff;
color:#fff;
box-shadow:0 0 20px rgba(107,140,255,0.6);
transform:translateY(-2px) scale(1.05);
}

#moviesTab{
background:rgba(107,140,255,0.15);
border-color:rgba(107,140,255,0.3);
color:#6b8cff;
}

#moviesTab:hover{
background:rgba(107,140,255,0.25);
border-color:rgba(107,140,255,0.5);
}

#moviesTab.active{
background:#6b8cff;
border-color:#6b8cff;
color:#fff;
box-shadow:0 0 20px rgba(107,140,255,0.6);
transform:translateY(-2px) scale(1.05);
}

.topbar input,
.topbar select{
background:var(--card);
border:1px solid transparent;
padding:12px 18px;
border-radius:12px;
color:var(--text);
width:600px;
max-width:70%;
flex-grow:0;
transition:.25s;
}

.topbar input:focus{
outline:none;
border:1px solid #6b8cff;
}

/* GRID */

#grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
padding:40px;
animation:fadeIn 0.4s ease-in-out;
will-change:transform,opacity;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}

#grid.fade-out {
animation: fadeOut 0.3s ease-in-out forwards;
}

#grid.slide-out-left {
animation: slideOutLeft 0.4s ease-in-out forwards;
}

#grid.slide-in-right {
animation: slideInRight 0.4s ease-in-out forwards;
}

#grid.slide-out-right {
animation: slideOutRight 0.4s ease-in-out forwards;
}

#grid.slide-in-left {
animation: slideInLeft 0.4s ease-in-out forwards;
}

@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-10px);
}
}

@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes slideOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-100%);
}
}

@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

@keyframes slideOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(100%);
}
}

@keyframes slideInLeft {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

.card{
position:relative;
border-radius:var(--radius);
overflow:hidden;
background:var(--card);
cursor:pointer;
transition:all .3s ease;
box-shadow:0 10px 40px rgba(0,0,0,0.3);
animation:cardAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
animation-delay:calc(var(--card-index, 0) * 0.05s);
}

@keyframes cardAppear {
0% {
opacity: 0;
transform: scale(0.3) translateY(30px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}

.card:hover{
transform:translateY(-4px);
box-shadow:0 15px 50px rgba(0,0,0,0.4),0 0 20px var(--glow);
}

.card img{
width:100%;
aspect-ratio:16/9;
object-fit:cover;
display:block;
}

.overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
height:40%;
background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.9));
opacity:0;
display:flex;
align-items:flex-end;
justify-content:center;
padding:15px;
transition:opacity .3s ease;
color:white;
font-weight:600;
text-align:center;
font-size:16px;
box-sizing:border-box;
pointer-events:none;
}

.card:hover .overlay{
opacity:1;
}

/* Bottom Screen Tooltip */
.tooltip {
    display: none;
}

.tooltip.show {
    display: none;
}

/* fallback text for images that fail or time out */
.card .no-img {
width:100%;
aspect-ratio:16/9;
display:flex;
align-items:flex-end;
justify-content:center;
padding:0 10px 12px;
color:var(--text);
font-weight:600;
text-align:center;
background:var(--card);
}

/* fallback text for images that fail or time out */
.card .no-img {
    width:100%;
    aspect-ratio:16/9;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:0 10px 12px;
    color:var(--text);
    font-weight:600;
    text-align:center;
    background:var(--card);
}

.play{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0.4);
opacity:0;
transition:.3s;
font-size:40px;
}
.card:hover .play{
opacity:1;
}

/* Game Opening Animation */
@keyframes gameOpen{
0%{
opacity:0;
transform:scale(0.95) translateY(20px);
}
100%{
opacity:1;
transform:scale(1) translateY(0);
}
}

/* Game Closing Animation */
@keyframes gameClose{
0%{
opacity:1;
transform:scale(1) translateY(0);
}
100%{
opacity:0;
transform:scale(0.95) translateY(20px);
}
}

#player{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
display:none;
flex-direction:column;

/* ensure children stretch */
align-items:stretch;
justify-content:flex-start;
z-index:10;
}

#player.opening{
display:flex;
animation:gameOpen 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#player.closing{
animation:gameClose 0.3s cubic-bezier(0.36, 0, 0.66, -0.56);
}

#player iframe{
flex:1;
width:100%;
height:100%;
border:none;
}

.controls{
display:flex;
gap:10px;
padding:15px;
background:#111;
}

.controls button{
background:var(--accent);
border:none;
padding:10px 20px;
border-radius:10px;
color:white;
cursor:pointer;
transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}

.controls button:hover{
transform:translateY(-1px);
}

.controls button.active{
background:#dc2626;
box-shadow:0 0 0 2px rgba(220,38,38,0.35);
}

.hidden{display:none;}

.credits{
position:fixed;
bottom:20px;
left:20px;
font-size:12px;
color:var(--accent);
font-weight:bold;
display:none;
line-height:1.6;
}

.credits.show{
display:block;
}

.secret{
position:fixed;
top:0;
right:0;
width:250px;
height:100%;
background:#000c;
backdrop-filter:blur(10px);
display:none;
padding:10px;
z-index:1000;
overflow-y:auto;
}



/* Mobile & Responsive Optimizations */
@media(max-width:1200px){
#grid{grid-template-columns:repeat(3,1fr);}
.topbar input{
width:500px;
}
}

@media(max-width:768px){
#grid{grid-template-columns:repeat(2,1fr);gap:15px;padding:15px;}
.topbar{flex-direction:column;gap:12px;}
.topbar input{
width:100%;
max-width:100%;
}
.tab{
padding:12px 20px;
font-size:14px;
}
}

@media(max-width:480px){
#grid{grid-template-columns:1fr;gap:10px;padding:10px;}
.topbar{padding:10px;gap:10px;}
.topbar input{width:100%;padding:10px;max-width:100%;}
.tab{
padding:10px 16px;
font-size:13px;
}
}

/* MacBook-specific optimizations */
html.macos-optimized{
--transition-duration:0.35s;
}

html.macos-optimized .card,
html.macos-optimized .topbar button{
transition-duration:var(--transition-duration);
transition-timing-function:cubic-bezier(0.25,0.46,0.45,0.94);
}

/* OSX trackpad scroll smoothing */
html.macos-optimized {
scroll-behavior:smooth;
}

/* Better focus styles for Mac users */
html.macos-optimized button:focus,
html.macos-optimized input:focus,
html.macos-optimized select:focus{
outline:2px solid var(--accent);
outline-offset:2px;
}

/* Optimized for Metal GPU - improved performance */
html.macos-optimized #grid,
html.macos-optimized .card{
-webkit-font-smoothing:subpixel-antialiased;
}

/* Better Apple Silicon performance with transform3d */
html.macos-optimized .card:hover{
transform:translate3d(0,-8px,0) scale3d(1.04,1.04,1);
}

html.macos-optimized .topbar button.active{
transform:scale3d(1.05,1.05,1);
}

/* Reduced pointer delay for trackpad */
html.macos-optimized {
cursor:auto;
}

html.macos-optimized button,
html.macos-optimized .card{
cursor:pointer;
}

/* Optimized for macOS notch support */
@supports (padding: max(0px)) {
html.macos-optimized {
padding-left:max(12px,env(safe-area-inset-left));
padding-right:max(12px,env(safe-area-inset-right));
}
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}