/* hakoo-games.html: page-specific styles (tokens.css + base.css load first). */
.wrap{max-width:1100px;margin:0 auto;padding:30px 22px 70px}
.brand em{color:var(--green)}

.hero{background:linear-gradient(135deg,rgba(63,185,80,.22),var(--card) 55%,#28004E);border:1px solid var(--border);border-radius:16px;padding:32px 28px;margin-bottom:28px}
.hero h1{font-size:32px;font-weight:900;letter-spacing:-.5px}
.hero h1 em{color:var(--green);font-style:normal}
.hero p{color:var(--muted);margin-top:6px;font-size:16px;max-width:640px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.badge{border:1px solid var(--border);border-radius:20px;padding:3px 12px;font-size:12px;font-weight:700;color:var(--muted);background:rgba(0,0,0,.25)}
.badge.ok{color:var(--green);border-color:var(--green)}

h2{font-size:18px;font-weight:800;margin:6px 0 14px}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:30px}
.game-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px}
.game-card.soon{border-style:dashed;grid-column:1/-1;text-align:center;padding:34px 20px}
.game-ic{font-size:36px}
.owl-ic{display:inline-block;width:44px;height:44px;vertical-align:middle;background:url(../iconer/HAKOO.png) center/contain no-repeat}   /* Owldoku: the HAKOO owl */
.game-title{font-size:17px;font-weight:800;margin:8px 0 4px}
.game-card p{color:var(--muted);font-size:14px}
a.game-card.play{color:var(--text);text-decoration:none;transition:border-color .15s}
a.game-card.play:hover,a.game-card.play:focus-visible{border-color:var(--green);text-decoration:none}

.card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:18px 22px}
.privacy ul{padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:14px}
.privacy b{color:var(--text)}
footer{text-align:center}

/* The shelves: a menu of game types on the left (a row you can scroll on a phone), the games on the right */
.hub{display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:start;margin-bottom:30px}
.gmenu{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:8px}
.gm-item{display:block;padding:9px 12px;border-radius:9px;font-size:14px;font-weight:700;color:var(--muted)}
.gm-item small{display:block;font-size:11px;font-weight:500;opacity:.85;margin-top:1px}
.gm-item small:empty{display:none}
.gm-item:hover{color:var(--text);background:var(--bg2);text-decoration:none}
.gm-item[aria-current="page"]{color:var(--text);background:var(--bg2);box-shadow:inset 3px 0 0 var(--green)}
.gm-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.shelf{min-width:0}
.shelf h2{margin-top:0}
.shelf-note{color:var(--muted);font-size:13px;margin:-8px 0 14px}
.shelf-note:empty{display:none}
.shelf .game-grid{margin-bottom:0}
.game-card[hidden]{display:none}
.game-card .plays{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--green);border:1px solid var(--green);border-radius:20px;padding:1px 9px}
.game-card .plays[hidden]{display:none}
/* Path of Berserk: its painted cover behind the card, dark enough under the text to read in every theme (FR-BERSERK-18) */
.game-card[data-key="berserk"]{background:linear-gradient(180deg,rgba(12,8,6,.12) 0,rgba(12,8,6,.8) 50%,rgba(12,8,6,.92) 100%),
  url(../images/berserk/cover-card.webp) 60% 30%/cover no-repeat,#1b1410}
a.game-card.play[data-key="berserk"]{color:#fff}
.game-card[data-key="berserk"] .game-title{color:#fff}
.game-card[data-key="berserk"] p{color:#eadfd6}
@media (max-width:760px){
  .hub{grid-template-columns:1fr;gap:14px}
  .gmenu{position:static;flex-direction:row;overflow-x:auto;padding:6px;gap:4px}
  .gm-item{white-space:nowrap;padding:8px 10px}
  .gm-item small{display:none}
  .gm-item[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--green)}
}