/* =========================================
   GIAO GAME — giagame.css
   Hub + shared game styles
========================================= */
:root{
  --cream:#F5EDD4; --yellow:#F9C900; --blue:#2B5CB8;
  --pink:#E8347C;  --orange:#E86428; --red:#DC3040;
  --dark:#1A1A1A;  --white:#FFFFFF;  --navy:#0d1226;
  --fh:'Playfair Display',Georgia,serif;
  --fb:'Be Vietnam Pro',sans-serif;
  --t:.26s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--fb);background:var(--cream);color:var(--dark);-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.star{color:var(--yellow);}
.eyebrow{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:1rem;}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(245,237,212,.95);backdrop-filter:blur(12px);border-bottom:2px solid rgba(200,180,80,.25);transition:border-color var(--t),box-shadow var(--t);}
.nav.scrolled{border-bottom-color:var(--yellow);box-shadow:0 4px 20px rgba(0,0,0,.07);}
.nav-inner{max-width:1100px;margin:0 auto;padding:0 1.5rem;height:60px;display:flex;align-items:center;gap:.75rem;}
.nav-logo{font-family:var(--fh);font-size:1.3rem;font-weight:900;color:var(--blue);flex-shrink:0;}
.nav-center{flex:1;display:flex;align-items:center;gap:.4rem;}
.nav-sep{color:#c8b880;}.nav-sub{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#7a6a55;}
.nav-links{display:flex;gap:.2rem;align-items:center;}
.nav-links a{font-size:.8rem;font-weight:600;padding:.38rem .75rem;border-radius:50px;color:var(--dark);transition:var(--t);white-space:nowrap;}
.nav-links a:hover{background:var(--yellow);}
.npill.yellow{background:var(--yellow)!important;color:var(--dark)!important;}
.npill.pink{background:var(--pink)!important;color:var(--white)!important;}
.npill.orange{background:var(--orange)!important;color:var(--white)!important;}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px;cursor:pointer;flex-shrink:0;}
.nav-burger span{display:block;width:22px;height:2px;background:var(--dark);border-radius:2px;}
.nav-mobile{display:none;flex-direction:column;padding:.75rem 1.5rem 1rem;gap:.35rem;border-top:1px solid rgba(0,0,0,.08);}
.nav-mobile a{font-size:.9rem;font-weight:600;padding:.55rem 1rem;border-radius:6px;display:block;}
.nav-mobile a:hover{background:var(--yellow);}
.nav-mobile.open{display:flex;}

/* HERO */
.hero{padding:120px 2rem 3rem;background:var(--navy);overflow:hidden;position:relative;}
.hero-inner{max-width:700px;margin:0 auto;text-align:center;position:relative;z-index:2;}
.hero-inner .eyebrow{color:var(--yellow);}
.hero h1{font-family:var(--fh);font-size:clamp(3rem,8vw,5rem);font-weight:900;color:var(--white);line-height:.95;letter-spacing:-.03em;margin-bottom:1.25rem;}
.hero h1 em{font-style:italic;color:var(--yellow);}
.hero-sub{font-size:1rem;color:rgba(255,255,255,.5);letter-spacing:.06em;}
.hero-deco{position:absolute;inset:0;pointer-events:none;}
.deco-circle{position:absolute;border-radius:50%;opacity:.06;}
.c1{width:400px;height:400px;background:var(--yellow);top:-100px;right:-80px;}
.c2{width:300px;height:300px;background:var(--blue);bottom:-100px;left:-60px;}
.c3{width:200px;height:200px;background:var(--pink);top:40%;left:10%;}

/* GAMES GRID */
.games-grid-wrap{padding:3rem 1.5rem 5rem;max-width:1100px;margin:0 auto;}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;}

/* GAME CARD */
.game-card{background:var(--white);border:2px solid rgba(0,0,0,.06);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);}
.game-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.1);border-color:var(--yellow);}

/* Art area */
.gc-art{height:200px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.gc-art-oanquan{background:linear-gradient(135deg,#7B4F28,#5a3618);}
.gc-art-tetris{background:linear-gradient(135deg,#0d1226,#1a2a4a);}
.gc-art-snake{background:linear-gradient(135deg,#1a3a1a,#0d2010);}
.gc-art-banbi{background:linear-gradient(135deg,#2B5CB8,#1a3a80);}
.gc-art-nempao{background:linear-gradient(135deg,#E8347C,#b01860);}
.gc-art-cotuong{background:linear-gradient(135deg,#8b1a1a,#600);}
.gc-art-duathuyen{background:linear-gradient(135deg,#1a5c8b,#0d3a5a);}

/* Ô ăn quan preview */
.oanquan-preview{display:flex;flex-direction:column;gap:8px;padding:8px;}
.oaq-row{display:flex;align-items:center;gap:6px;}
.oaq-row2{flex-direction:row-reverse;}
.oaq-big{width:48px;height:48px;border-radius:50%;background:rgba(249,201,0,.8);border:2px solid rgba(255,255,255,.3);}
.oaq-smalls{display:flex;gap:5px;}
.oaq-smalls span{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.25);border:1.5px solid rgba(255,255,255,.2);}
.oaq-smalls span:nth-child(odd){background:rgba(255,255,255,.15);}

/* Tetris preview */
.tetris-preview{display:flex;flex-direction:column;align-items:center;gap:8px;}
.tp-grid{display:flex;flex-direction:column;gap:2px;background:rgba(0,0,0,.3);padding:4px;border-radius:4px;}
.tp-row{display:flex;gap:2px;}
.b{width:22px;height:22px;border-radius:2px;background:rgba(255,255,255,.08);}
.b-y{background:#F9C900;}.b-b{background:#2B5CB8;}.b-r{background:#DC3040;}.b-o{background:#E86428;}.b-p{background:#9B59B6;}
.tp-gameboy{display:flex;gap:6px;margin-top:4px;}
.tp-gameboy span{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.25);}
.tp-gameboy span:nth-child(1){background:var(--red);}
.tp-gameboy span:nth-child(2){background:var(--orange);}
.tp-gameboy span:nth-child(3){background:var(--yellow);}
.tp-gameboy span:nth-child(4){background:var(--blue);}

/* Snake preview */
.snake-preview{width:120px;height:120px;position:relative;}
.sn-grid{width:100%;height:100%;background:rgba(0,0,0,.3);border-radius:6px;position:relative;}
.sn-snake{width:18px;height:18px;border-radius:3px;background:#4CAF50;position:absolute;}
.sn-s1{top:50%;left:20%;transform:translateY(-50%);}
.sn-s2{top:50%;left:36%;transform:translateY(-50%);}
.sn-s3{top:50%;left:52%;transform:translateY(-50%);}
.sn-s4{top:50%;left:68%;transform:translateY(-50%);background:#81C784;}
.sn-head{background:#2E7D32;}
.sn-food{position:absolute;top:25%;right:15%;color:#FF5252;font-size:18px;line-height:1;}

/* Bắn bi preview */
.banbi-preview{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center;}
.bb-target{position:relative;width:80px;height:80px;display:flex;align-items:center;justify-content:center;}
.bb-ring{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.3);}
.r1{width:80px;height:80px;}
.r2{width:54px;height:54px;}
.r3{width:30px;height:30px;}
.bb-center{width:10px;height:10px;border-radius:50%;background:var(--yellow);}
.bb-marbles{position:absolute;bottom:5px;left:5px;display:flex;gap:5px;}
.bb-m{width:14px;height:14px;border-radius:50%;display:inline-block;}
.m1{background:#E86428;}.m2{background:#2B5CB8;}.m3{background:#E8347C;}

/* Ném pao preview */
.nempao-preview{width:140px;height:120px;position:relative;display:flex;align-items:flex-end;justify-content:space-between;padding:0 10px 10px;}
.np-basket{font-size:36px;line-height:1;}
.np-ball{position:absolute;font-size:16px;color:rgba(255,255,255,.8);}
.np-b1{top:50%;left:50%;}
.np-b2{top:25%;left:65%;}
.np-arc{position:absolute;top:20%;left:30%;width:60px;height:40px;border-top:2px dashed rgba(255,255,255,.3);border-radius:50% 50% 0 0;}

/* Cờ tướng preview */
.ct-preview{width:140px;height:140px;padding:8px;}
.ct-board{width:100%;height:100%;background:rgba(200,150,80,.15);border:1.5px solid rgba(255,255,255,.2);border-radius:4px;position:relative;}
.ct-line{position:absolute;background:rgba(255,255,255,.2);}
.ct-horiz{left:0;right:0;height:1px;}
.ct-vert{top:0;bottom:0;width:1px;}
.ct-river{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:7px;color:rgba(255,255,255,.25);white-space:nowrap;letter-spacing:.05em;}
.ct-piece{position:absolute;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;border:1.5px solid;}
.ct-piece.red{background:rgba(180,30,30,.8);color:#ffcccc;border-color:rgba(255,100,100,.5);}
.ct-piece.black{background:rgba(20,20,20,.8);color:#ccc;border-color:rgba(255,255,255,.3);}

/* Đua thuyền preview */
.dt-preview{width:160px;height:120px;position:relative;overflow:hidden;}
.dt-river{position:absolute;inset:0;background:linear-gradient(180deg,#1a6a8a,#0d4a6a);}
.dt-wave{position:absolute;left:0;right:0;height:2px;background:rgba(255,255,255,.15);border-radius:1px;}
.dt-wave{top:35%;}.dt-w2{top:70%;}
.dt-boat{position:absolute;left:20%;top:50%;transform:translateY(-50%);font-size:32px;line-height:1;}
.dt-obs{position:absolute;font-size:22px;line-height:1;}
.dt-o1{top:15%;right:20%;}
.dt-o2{top:55%;right:35%;}
.dt-o3{top:70%;right:10%;}

/* GAME CARD INFO */
.gc-info{padding:1.25rem;flex:1;}
.gc-tag{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  background:var(--yellow);color:var(--dark);padding:.25rem .65rem;border-radius:50px;margin-bottom:.6rem;}
.gc-info h2{font-family:var(--fh);font-size:1.3rem;font-weight:900;color:var(--dark);margin-bottom:.35rem;}
.gc-info p{font-size:.82rem;color:rgba(0,0,0,.5);line-height:1.5;margin-bottom:.75rem;}
.gc-modes{display:flex;gap:.4rem;flex-wrap:wrap;}
.gc-modes span{font-size:.68rem;font-weight:600;padding:.22rem .6rem;background:var(--cream);border-radius:50px;color:var(--dark);}

/* FOOTER */
.site-footer{background:var(--dark);border-top:2px solid rgba(249,201,0,.25);padding:1.25rem 1.5rem;}
.fi{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.fl{font-family:var(--fh);font-size:1.1rem;font-weight:700;color:var(--yellow);}
.fn{font-size:.7rem;letter-spacing:.1em;color:rgba(255,255,255,.2);}

/* RESPONSIVE */
@media(max-width:900px){.nav-links{display:none;}.nav-burger{display:flex;}}
@media(max-width:480px){.games-grid{grid-template-columns:1fr;}.gc-art{height:160px;}}

/* ═══════════════════════════════
   SHARED GAME PAGE STYLES
   Used by all individual game files
═══════════════════════════════ */
.game-page{min-height:100vh;padding-top:60px;background:var(--navy);}
.game-header{background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.08);padding:.75rem 1.5rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.game-header h1{font-family:var(--fh);font-style:italic;font-size:1.3rem;color:var(--white);flex:1;}
.back-btn{font-size:.78rem;font-weight:600;color:rgba(255,255,255,.5);padding:.35rem .75rem;border:1px solid rgba(255,255,255,.15);border-radius:50px;text-decoration:none;transition:var(--t);white-space:nowrap;}
.back-btn:hover{color:var(--yellow);border-color:var(--yellow);}
.mode-btn{font-size:.72rem;font-weight:700;padding:.35rem .8rem;border-radius:50px;border:1.5px solid rgba(255,255,255,.2);background:none;color:rgba(255,255,255,.55);cursor:pointer;transition:var(--t);}
.mode-btn:hover,.mode-btn.active{background:var(--yellow);border-color:var(--yellow);color:var(--dark);}
.diff-btn{font-size:.68rem;font-weight:700;padding:.28rem .65rem;border-radius:50px;border:1.5px solid rgba(255,255,255,.15);background:none;color:rgba(255,255,255,.4);cursor:pointer;transition:var(--t);}
.diff-btn:hover,.diff-btn.active{border-color:var(--orange);color:var(--orange);}
.game-body{display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem 3rem;gap:1rem;}
.score-bar{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;}
.score-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.5rem 1.25rem;text-align:center;}
.score-box .label{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:.2rem;}
.score-box .value{font-family:var(--fh);font-size:1.6rem;font-weight:900;color:var(--yellow);line-height:1;}
.game-canvas-wrap{border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.game-controls{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;}
.ctrl-btn{font-family:var(--fb);font-size:.85rem;font-weight:700;padding:.65rem 1.5rem;border-radius:50px;border:none;cursor:pointer;transition:var(--t);}
.ctrl-btn.primary{background:var(--yellow);color:var(--dark);}
.ctrl-btn.primary:hover{background:var(--orange);}
.ctrl-btn.secondary{background:rgba(255,255,255,.1);color:var(--white);}
.ctrl-btn.secondary:hover{background:rgba(255,255,255,.2);}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:rgba(0,0,0,.75);border-radius:14px;}
.overlay h2{font-family:var(--fh);font-size:2rem;color:var(--white);}
.overlay p{font-size:.9rem;color:rgba(255,255,255,.5);}

/* ══════════════════════
   MOBILE GAME OPTIMIZATIONS
══════════════════════ */
@media(max-width:480px){
  /* Game header compact */
  .game-header{padding:.5rem .75rem;gap:.3rem;flex-wrap:wrap;}
  .game-header h1{font-size:1rem;flex:1 1 100%;margin-bottom:.15rem;}
  .mode-btn{font-size:.7rem;padding:.28rem .6rem;}
  .diff-btn{font-size:.65rem;padding:.22rem .5rem;}

  /* Game body */
  .game-body{padding:.75rem .5rem 3rem;gap:.65rem;}
  .score-bar{gap:.4rem;flex-wrap:wrap;}
  .score-box{padding:.35rem .65rem;}
  .score-box .label{font-size:.58rem;}
  .score-box .value{font-size:1.2rem;}

  /* Canvas stretch to screen */
  .game-canvas-wrap canvas,#gc{width:100%!important;height:auto!important;}

  /* Controls compact */
  .game-controls{gap:.4rem;}
  .ctrl-btn{font-size:.8rem;padding:.55rem 1rem;}

  /* Hero section */
  .hero{padding:90px 1rem 2rem;}
  .hero h1{font-size:clamp(2.2rem,10vw,4rem);}
  .hero-sub{font-size:.85rem;}

  /* Game cards */
  .games-grid{grid-template-columns:1fr 1fr;gap:.75rem;}
  .gc-art{height:140px;}
  .gc-info{padding:.65rem;}
  .gc-info h2{font-size:1.05rem;}
  .gc-info p{font-size:.72rem;}
  .gc-tag{font-size:.55rem;padding:.18rem .5rem;}
  .gc-modes span{font-size:.6rem;padding:.18rem .45rem;}
  .fc-pick{font-size:.7rem;}

  /* Hide non-essential text in game pages */
  .back-btn{font-size:.72rem;padding:.3rem .65rem;}
}

@media(max-width:360px){
  .games-grid{grid-template-columns:1fr;}
}

/* Prevent text overflow on small game headers */
.game-header{overflow-x:auto;}

/* Touch-friendly hit areas */
.mode-btn,.diff-btn,.ctrl-btn,.back-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}