/*
Theme Name: ClawLoyal APK
Theme URI: https://clawloyal.com/
Author: ClawLoyal
Description: Cohesive Android APK game library theme for ClawLoyal.
Version: 1.0.0
Text Domain: clawloyal-apk
*/

:root{
  --cl-bg:#07090d;
  --cl-surface:#10151f;
  --cl-surface-2:#151c28;
  --cl-line:#293244;
  --cl-text:#f4f6fb;
  --cl-muted:#97a3b6;
  --cl-lime:#b5ff35;
  --cl-cyan:#77e3ff;
  --cl-yellow:#ffd166;
  --cl-radius:20px;
  --cl-shadow:0 26px 72px rgba(0,0,0,.3);
  --cl-wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--cl-bg)}
body{margin:0;background:
  radial-gradient(circle at 8% -12%,rgba(119,227,255,.12),transparent 32%),
  radial-gradient(circle at 94% 0%,rgba(181,255,53,.08),transparent 27%),
  var(--cl-bg);color:var(--cl-text);font-family:"Trebuchet MS",ui-sans-serif,sans-serif;line-height:1.6}
a{color:inherit}
img{max-width:100%;height:auto}
.cl-wrap{width:min(var(--cl-wrap),calc(100% - 34px));margin-inline:auto}

.cl-header{position:sticky;top:0;z-index:100;background:rgba(7,9,13,.91);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}
.cl-header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.cl-brand{display:inline-flex;align-items:center;text-decoration:none;font-family:Bahnschrift,"Trebuchet MS",sans-serif;font-size:1.55rem;font-weight:900;letter-spacing:-.045em;color:#fff}
.cl-brand-mark{color:var(--cl-lime);font-size:1.25em;margin-right:7px}
.cl-brand-dot{color:var(--cl-lime)}
.cl-nav{display:flex;align-items:center;gap:5px}
.cl-nav a{padding:10px 12px;border-radius:10px;text-decoration:none;color:#c3ccda;font-size:.92rem;font-weight:700}
.cl-nav a:hover,.cl-nav .current{background:rgba(255,255,255,.055);color:#fff}

.cl-hero{padding:80px 0 42px}
.cl-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:34px;align-items:center}
.cl-eyebrow{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid rgba(181,255,53,.28);border-radius:999px;background:rgba(181,255,53,.045);color:var(--cl-lime);font:800 .73rem/1.2 Bahnschrift,"Trebuchet MS",sans-serif;letter-spacing:.15em;text-transform:uppercase}
.cl-hero h1,.cl-page-hero h1{font-family:Bahnschrift,"Trebuchet MS",sans-serif;font-size:clamp(3.2rem,8vw,7rem);line-height:.91;letter-spacing:-.065em;margin:20px 0}
.cl-hero h1 em{font-style:normal;color:var(--cl-lime)}
.cl-lead,.cl-page-hero p{max-width:760px;color:var(--cl-muted);font-size:1.08rem;line-height:1.75}
.cl-search{display:flex;gap:10px;max-width:720px;margin-top:28px}
.cl-search input,.cl-filter input{flex:1;min-width:0;padding:17px 18px;border:1px solid var(--cl-line);border-radius:14px;background:#0e1520;color:#fff;font:inherit;outline:none}
.cl-search input:focus,.cl-filter input:focus{border-color:var(--cl-cyan);box-shadow:0 0 0 3px rgba(119,227,255,.09)}
.cl-search button{padding:0 24px;border:0;border-radius:14px;background:var(--cl-lime);color:#071006;font:900 .9rem/1 Bahnschrift,"Trebuchet MS",sans-serif;letter-spacing:.04em;cursor:pointer}
.cl-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px;max-width:760px}
.cl-metrics div{padding:16px 17px;border:1px solid var(--cl-line);border-radius:15px;background:rgba(255,255,255,.025)}
.cl-metrics strong{display:block;font-family:Bahnschrift,sans-serif;font-size:1.55rem}
.cl-metrics span{display:block;color:var(--cl-muted);font-size:.82rem;margin-top:3px}
.cl-trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:16px;margin-top:8px;border:1px solid var(--cl-line);border-radius:18px;background:rgba(255,255,255,.025)}
.cl-trust-strip span{display:flex;align-items:center;justify-content:center;min-height:44px;color:#dbe4ef;font-size:.82rem;font-weight:800;text-align:center}
.cl-home-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:28px;margin-bottom:34px;padding:30px;border:1px solid rgba(181,255,53,.26);border-radius:22px;background:linear-gradient(135deg,rgba(181,255,53,.08),rgba(119,227,255,.035))}
.cl-home-cta small{color:var(--cl-lime);font-weight:900;letter-spacing:.12em}
.cl-home-cta h2{font-family:Bahnschrift,sans-serif;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.04em;margin:6px 0 8px}
.cl-home-cta p{max-width:760px;color:var(--cl-muted);margin:0}
.cl-home-cta .cl-primary{flex:0 0 auto;margin-top:0}

.cl-console{border:1px solid rgba(119,227,255,.24);border-radius:24px;overflow:hidden;background:linear-gradient(180deg,rgba(17,29,43,.98),rgba(9,14,23,.98));box-shadow:var(--cl-shadow)}
.cl-console-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--cl-line);background:#0d131d}
.cl-console-bar span{width:8px;height:8px;border-radius:50%;background:#3a465a}
.cl-console-bar span:first-child{background:#ff6b7a}.cl-console-bar span:nth-child(2){background:var(--cl-yellow)}.cl-console-bar span:nth-child(3){background:var(--cl-lime)}
.cl-console-bar b{margin-left:auto;color:#75839a;font-size:.7rem;letter-spacing:.12em}
.cl-console-body{padding:24px}
.cl-console-body p{display:flex;gap:13px;align-items:center;padding:12px 0;margin:0;border-bottom:1px solid rgba(255,255,255,.055);color:#dbe4ef}
.cl-console-body i{font-style:normal;color:var(--cl-cyan);font:800 .75rem/1 ui-monospace,monospace}
.cl-console-body a,.cl-primary{display:inline-flex;margin-top:22px;text-decoration:none;color:#071006;background:var(--cl-lime);padding:13px 16px;border-radius:12px;font-weight:900}

.cl-section{padding:38px 0}
.cl-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}
.cl-section-head small{display:block;color:var(--cl-lime);font-weight:900;letter-spacing:.12em}
.cl-section-head h2{font-family:Bahnschrift,sans-serif;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.04em;margin:6px 0 0}
.cl-section-head>a{color:var(--cl-cyan);text-decoration:none;font-weight:800}

.cl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cl-game-card{display:flex;flex-direction:column;min-height:390px;padding:14px;border:1px solid var(--cl-line);border-radius:18px;background:linear-gradient(180deg,rgba(18,25,37,.98),rgba(10,15,24,.98));text-decoration:none;color:#fff;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.cl-game-card:hover{transform:translateY(-4px);border-color:rgba(181,255,53,.55);box-shadow:0 18px 40px rgba(0,0,0,.23)}
.cl-card-media{height:170px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.07);background:#0b111a;margin-bottom:14px}
.cl-game-image{width:100%;height:100%;object-fit:cover;display:block}
.cl-game-placeholder{width:100%;height:100%;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;background:
  radial-gradient(circle at 75% 18%,rgba(181,255,53,.20),transparent 26%),
  radial-gradient(circle at 18% 0%,rgba(119,227,255,.18),transparent 34%),
  linear-gradient(135deg,#15243a,#0a111c 64%,#0d151f)}
.cl-game-placeholder:after{content:"";position:absolute;inset:auto -18% -42% auto;width:180px;height:180px;border:1px solid rgba(181,255,53,.16);border-radius:50%}
.cl-game-placeholder strong{position:absolute;right:18px;top:8px;font:900 5.5rem/1 Bahnschrift,sans-serif;color:rgba(255,255,255,.08)}
.cl-game-placeholder b{position:relative;z-index:1;font:900 1.15rem/1.1 Bahnschrift,sans-serif;letter-spacing:-.03em;color:#fff;max-width:85%}
.cl-game-placeholder small{position:relative;z-index:1;color:var(--cl-muted);margin-top:5px;font-size:.7rem}
.cl-placeholder-kicker{position:absolute;left:14px;top:14px;z-index:1;padding:6px 8px;border-radius:999px;border:1px solid rgba(119,227,255,.18);background:rgba(8,17,28,.6);color:var(--cl-cyan);font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.cl-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cl-chip{padding:7px 9px;border-radius:999px;background:rgba(119,227,255,.07);border:1px solid rgba(119,227,255,.16);color:var(--cl-cyan);font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.cl-card-status{color:var(--cl-lime);font-size:.64rem;font-weight:900;letter-spacing:.08em}
.cl-game-card h3{font-family:Bahnschrift,sans-serif;font-size:1.32rem;letter-spacing:-.035em;margin:16px 4px 8px}
.cl-game-card p{color:var(--cl-muted);line-height:1.6;margin:0 4px 16px;font-size:.9rem}
.cl-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:13px 4px 2px;border-top:1px solid rgba(255,255,255,.06);font-size:.72rem}
.cl-card-bottom span{color:#7f8da2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:58%}
.cl-card-bottom strong{color:var(--cl-lime);font-size:.66rem;letter-spacing:.07em}

.cl-cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cl-cat-grid a{padding:21px;border:1px solid var(--cl-line);border-radius:17px;background:linear-gradient(180deg,#111925,#0b111a);text-decoration:none;color:#fff;transition:.18s ease}
.cl-cat-grid a:hover{border-color:rgba(119,227,255,.45);transform:translateY(-2px)}
.cl-cat-grid strong{display:block;font-family:Bahnschrift,sans-serif;font-size:1.1rem}
.cl-cat-grid span{display:block;color:var(--cl-muted);font-size:.83rem;margin-top:6px}
.cl-cat-grid.large a{min-height:120px;display:flex;flex-direction:column;justify-content:flex-end}

.cl-page-hero{padding:66px 0 28px}
.cl-page-hero h1{font-size:clamp(2.8rem,7vw,5.5rem)}
.cl-filter{display:flex;align-items:center;gap:12px;max-width:760px;margin-top:24px}
.cl-filter span{color:var(--cl-muted);font-size:.84rem;white-space:nowrap}
.cl-empty{padding:30px;border:1px solid var(--cl-line);border-radius:18px;background:var(--cl-surface);color:var(--cl-muted)}
.cl-empty a{color:var(--cl-cyan)}

.cl-copy{max-width:860px;padding:18px 0 72px}
.cl-copy p,.cl-copy li{color:#d7dfeb;line-height:1.8}
.cl-copy h2{font-family:Bahnschrift,sans-serif;font-size:1.7rem;margin:32px 0 10px;letter-spacing:-.03em}
.cl-copy a{color:var(--cl-cyan)}
.cl-mail{display:inline-flex;padding:14px 16px;border-radius:12px;background:var(--cl-lime);color:#061006!important;font-weight:900;text-decoration:none}

.cl-breadcrumbs{padding-top:25px;color:var(--cl-muted);font-size:.86rem}.cl-breadcrumbs a{color:var(--cl-cyan);text-decoration:none}
.cl-single{padding:24px 0 54px}
.cl-single-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.72fr);gap:24px;align-items:start}
.cl-panel{background:linear-gradient(180deg,#121925,#0b111a);border:1px solid var(--cl-line);border-radius:22px;box-shadow:var(--cl-shadow)}
.cl-game-hero{padding:28px}
.cl-game-hero h1{font-family:Bahnschrift,sans-serif;font-size:clamp(2.5rem,6vw,4.8rem);line-height:.96;letter-spacing:-.055em;margin:18px 0}
.cl-game-hero>p{color:var(--cl-muted)}
.cl-art{margin-top:22px;min-height:320px;border-radius:16px;border:1px solid var(--cl-line);background:linear-gradient(135deg,#101b2b,#0c111b);overflow:hidden}
.cl-art .cl-game-image,.cl-art .cl-game-placeholder{min-height:320px}
.cl-game-placeholder-hero{padding:28px}
.cl-game-placeholder-hero strong{font-size:9rem;right:26px;top:14px}
.cl-game-placeholder-hero b{font-size:clamp(1.8rem,4vw,3.2rem);max-width:70%}
.cl-game-placeholder-hero small{font-size:.82rem}
.cl-download{padding:24px;position:sticky;top:98px}
.cl-download h2{margin-top:0;font-family:Bahnschrift,sans-serif}
.cl-pending{margin-top:15px;padding:13px 14px;border:1px solid rgba(255,209,102,.24);border-radius:12px;background:rgba(255,209,102,.07);color:var(--cl-yellow);font-weight:800}
.cl-download-btn{display:flex;align-items:center;justify-content:center;padding:14px 16px;border-radius:12px;background:var(--cl-lime);color:#071006;text-decoration:none;font-weight:900}
.cl-meta{margin-top:18px;border-top:1px solid var(--cl-line)}
.cl-meta-row{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--cl-line);font-size:.86rem}
.cl-meta-row span:first-child{color:var(--cl-muted)}.cl-meta-row span:last-child{text-align:right;word-break:break-word}
.cl-content{padding:26px;margin-top:20px}.cl-content h2{font-family:Bahnschrift,sans-serif;font-size:1.5rem;margin:26px 0 10px}.cl-content h2:first-child{margin-top:0}.cl-content h3{font-family:Bahnschrift,sans-serif;font-size:1.05rem;margin:22px 0 7px}.cl-content p,.cl-content li{color:#d8e1ee;line-height:1.75}.cl-content a{color:var(--cl-cyan)}
.cl-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;list-style:none}.cl-features li{padding:12px 13px;border:1px solid var(--cl-line);border-radius:12px;background:rgba(255,255,255,.02)}
.cl-info-pending,.cl-status-note,.cl-source-pending{padding:13px 14px;border-radius:12px;border:1px solid var(--cl-line);background:rgba(255,255,255,.025);color:var(--cl-muted)}
.cl-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.cl-info-grid div{padding:12px 13px;border:1px solid var(--cl-line);border-radius:12px;background:rgba(255,255,255,.02)}
.cl-info-grid span{display:block;color:var(--cl-muted);font-size:.75rem;margin-bottom:5px}
.cl-info-grid strong{display:block;color:#fff;font-size:.9rem;word-break:break-word}

.cl-footer{margin-top:54px;border-top:1px solid rgba(255,255,255,.07);padding:38px 0 48px;background:#05070b}
.cl-footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}
.cl-footer p{color:var(--cl-muted);max-width:400px}
.cl-footer nav{display:flex;gap:8px;flex-wrap:wrap}
.cl-footer nav a{color:#bdc6d5;text-decoration:none;font-size:.88rem;padding:8px 9px}
.cl-footer nav a:hover{color:var(--cl-lime)}
.screen-reader-text{position:absolute;left:-9999px}
[hidden]{display:none!important}

@media(max-width:920px){
  .cl-hero-grid,.cl-single-grid{grid-template-columns:1fr}
  .cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-home-cta{align-items:flex-start;flex-direction:column}
  .cl-download{position:static}
}
@media(max-width:640px){
  .cl-wrap{width:min(100% - 22px,var(--cl-wrap))}
  .cl-header-inner{min-height:0;padding:13px 0 8px;flex-wrap:wrap}
  .cl-brand{font-size:1.32rem}
  .cl-nav{order:2;width:100%;overflow-x:auto;gap:3px;padding-bottom:5px;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .cl-nav a{padding:9px 10px;font-size:.84rem}
  .cl-hero{padding:42px 0 22px}
  .cl-hero h1,.cl-page-hero h1{font-size:clamp(2.45rem,12vw,3.65rem)}
  .cl-lead,.cl-page-hero p{font-size:1rem}
  .cl-search{flex-direction:column}.cl-search button{min-height:52px}
  .cl-metrics,.cl-grid,.cl-cat-grid,.cl-features,.cl-trust-strip,.cl-info-grid{grid-template-columns:1fr}
  .cl-trust-strip{padding:12px}
  .cl-home-cta{padding:22px}
  .cl-section{padding:28px 0}
  .cl-section-head,.cl-footer-inner{align-items:flex-start;flex-direction:column}
  .cl-filter{align-items:stretch;flex-direction:column}
  .cl-game-card{min-height:355px}
  .cl-card-media{height:155px}
  .cl-single{padding-top:12px}
  .cl-game-hero,.cl-download,.cl-content{padding:20px}
  .cl-art,.cl-art .cl-game-image,.cl-art .cl-game-placeholder{min-height:240px}
  .cl-game-placeholder-hero strong{font-size:6rem}
  .cl-game-placeholder-hero b{font-size:2rem;max-width:82%}
  .cl-meta-row{grid-template-columns:1fr}.cl-meta-row span:last-child{text-align:left}
}