/* freeonlinegame.net — "Cabinet" theme
   Direction: late-80s arcade cabinet. Dark phosphor field, amber + cyan signal
   colours, hard geometry, condensed technical type. Deliberately not the
   light/violet/rounded look used elsewhere. */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --void:#0B0E14;        /* cabinet black */
  --panel:#141924;       /* raised panel */
  --panel-2:#1C2331;     /* hover / inset */
  --line:#2A3346;        /* hairline */
  --amber:#FFB627;       /* primary signal */
  --cyan:#3DD6F5;        /* secondary signal */
  --magenta:#FF4D6D;     /* alert / player 2 */
  --text:#E6EAF2;
  --text-dim:#8794AB;
  --radius:4px;
  --radius-lg:6px;
  --maxw:1180px;
  --shadow:0 2px 0 rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:'Barlow',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  /* faint scanline field — the signature texture */
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.014) 0px,
    rgba(255,255,255,.014) 1px,
    transparent 1px,
    transparent 3px
  );
}
img{max-width:100%;display:block;}
button{font-family:inherit;}
a{color:var(--cyan);text-decoration:none;}
a:hover{text-decoration:underline;}

h1,h2,h3{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.15;
  margin:0;
  text-transform:uppercase;
}
h1{font-size:clamp(1.6rem,4vw,2.4rem);}
h2{font-size:1.35rem;}
h3{font-size:1rem;letter-spacing:.03em;}

:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--void);
  padding:10px 16px;font-weight:600;z-index:999;
}
.skip-link:focus{left:0;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 18px;}

/* ---------- top bar ---------- */
.topbar{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.topbar-inner{
  max-width:var(--maxw);margin:0 auto;padding:12px 18px;
  display:flex;align-items:center;gap:20px;
}
.logo{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:1.3rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text);display:flex;align-items:center;gap:9px;
}
.logo:hover{text-decoration:none;}
.logo .bar{
  width:5px;height:20px;background:var(--amber);
  box-shadow:8px 0 0 var(--cyan);margin-right:8px;
}
.search-form{flex:1;max-width:420px;}
.search-form input{
  width:100%;background:var(--void);border:1px solid var(--line);
  color:var(--text);padding:9px 13px;border-radius:var(--radius);
  font-family:inherit;font-size:.9rem;
}
.search-form input::placeholder{color:var(--text-dim);}
.search-form input:focus{border-color:var(--amber);outline:none;}
.nav-desktop{display:flex;gap:22px;}
.nav-desktop a{
  color:var(--text-dim);font-family:'Barlow Condensed',sans-serif;
  font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;
}
.nav-desktop a:hover{color:var(--amber);text-decoration:none;}
@media(max-width:720px){.nav-desktop{display:none;}}

/* ---------- eyebrow / section heads ---------- */
.section-head{
  display:flex;align-items:baseline;gap:14px;
  margin:34px 0 16px;padding-bottom:9px;border-bottom:1px solid var(--line);
}
.section-head h2{color:var(--text);}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  color:var(--amber);letter-spacing:.12em;text-transform:uppercase;
}

/* ---------- game grid ---------- */
.grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
.game-card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;color:var(--text);
  transition:border-color .12s,transform .12s;
}
.game-card:hover{
  border-color:var(--amber);transform:translateY(-2px);text-decoration:none;
}
.game-thumb{
  height:86px;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;border-bottom:1px solid var(--line);
}
/* thumb tints — muted, so the emoji reads as the subject */
.thumb-1{background:linear-gradient(150deg,#1D2B3A,#16202C);}
.thumb-2{background:linear-gradient(150deg,#2A2233,#1E1926);}
.thumb-3{background:linear-gradient(150deg,#1F2E2B,#17211F);}
.thumb-4{background:linear-gradient(150deg,#33271C,#241C14);}
.thumb-5{background:linear-gradient(150deg,#231F35,#1A1728);}
.thumb-6{background:linear-gradient(150deg,#2C2027,#20171D);}
.game-info{padding:9px 11px 12px;}
.game-info h3{
  font-size:.92rem;margin-bottom:3px;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.game-info p{
  margin:0;font-size:.75rem;color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tag-2p{
  display:inline-block;font-family:'JetBrains Mono',monospace;
  font-size:.6rem;color:var(--magenta);border:1px solid var(--magenta);
  padding:1px 5px;margin-top:5px;letter-spacing:.06em;
}

/* ---------- play page ---------- */
.play-wrap{padding-bottom:80px;}
.breadcrumb{
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
  color:var(--text-dim);margin:16px 0 12px;letter-spacing:.03em;
}
.breadcrumb a{color:var(--text-dim);}
.breadcrumb a:hover{color:var(--amber);}
.play-head{margin-bottom:16px;}
.play-head h1{display:flex;align-items:center;gap:12px;}

.stage{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:16px;
  display:flex;flex-direction:column;align-items:center;gap:13px;
  position:relative;
}
.score-row{
  display:flex;gap:26px;font-family:'JetBrains Mono',monospace;
  font-size:.8rem;color:var(--text-dim);letter-spacing:.05em;
  text-transform:uppercase;
}
.score-row b{color:var(--amber);font-weight:500;}
canvas{
  background:var(--void);border:1px solid var(--line);
  border-radius:var(--radius);max-width:100%;touch-action:none;
}
.stage-controls{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;}
.btn{
  border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  padding:9px 17px;border-radius:var(--radius);cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;
  box-shadow:var(--shadow);transition:background .12s,border-color .12s;
}
.btn:hover{background:#242D3E;border-color:var(--text-dim);}
.btn:active{transform:translateY(1px);box-shadow:none;}
.btn-primary{
  background:var(--amber);color:var(--void);border-color:var(--amber);font-weight:700;
}
.btn-primary:hover{background:#FFC55A;border-color:#FFC55A;}

/* d-pad */
.dpad{
  display:grid;grid-template-columns:repeat(3,54px);
  grid-template-rows:repeat(3,54px);gap:5px;
}
.dpad button{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  font-size:1.1rem;cursor:pointer;border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.dpad button:active{transform:translateY(1px);box-shadow:none;background:var(--amber);color:var(--void);}
.dpad .up{grid-area:1/2;} .dpad .left{grid-area:2/1;}
.dpad .center{grid-area:2/2;visibility:hidden;} .dpad .right{grid-area:2/3;}
.dpad .down{grid-area:3/2;}
@media(min-width:900px){.dpad{display:none;}}

/* ---------- content blocks ---------- */
.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:20px 22px;margin-top:24px;
}
.panel h2{margin-bottom:12px;}
.panel p{margin:0 0 12px;color:#C4CCDB;}
.panel p:last-child{margin-bottom:0;}
.panel ul{margin:0 0 12px;padding-left:20px;color:#C4CCDB;}
.panel li{margin-bottom:7px;}
.panel strong{color:var(--text);}

/* controls table — replaces the plain how-to list */
.controls-table{width:100%;border-collapse:collapse;margin-bottom:6px;}
.controls-table td{
  padding:8px 10px;border-bottom:1px solid var(--line);
  font-size:.9rem;color:#C4CCDB;vertical-align:top;
}
.controls-table tr:last-child td{border-bottom:none;}
.controls-table td:first-child{
  width:38%;font-family:'JetBrains Mono',monospace;font-size:.78rem;
  color:var(--cyan);white-space:nowrap;
}
.key{
  display:inline-block;background:var(--panel-2);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:3px;padding:1px 7px;
  font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--text);
}

/* spec strip — factual metadata, encodes real info */
.spec-strip{
  display:flex;flex-wrap:wrap;gap:0;margin-top:24px;
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
}
.spec{
  flex:1 1 140px;padding:12px 15px;background:var(--panel);
  border-right:1px solid var(--line);
}
.spec:last-child{border-right:none;}
.spec dt{
  font-family:'JetBrains Mono',monospace;font-size:.65rem;
  color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;
}
.spec dd{
  margin:0;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:1rem;text-transform:uppercase;letter-spacing:.02em;color:var(--text);
}

.faq details{
  border-bottom:1px solid var(--line);padding:11px 0;
}
.faq details:last-child{border-bottom:none;}
.faq summary{
  cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:1.02rem;color:var(--text);letter-spacing:.02em;
}
.faq summary::marker{color:var(--amber);}
.faq p{margin:9px 0 0;color:#C4CCDB;font-size:.94rem;}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);margin-top:48px;padding:26px 0 90px;
  background:var(--panel);
}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.83rem;color:var(--text-dim);
  font-family:'JetBrains Mono',monospace;
}
.footer-bottom a{color:var(--text-dim);}
.footer-bottom a:hover{color:var(--amber);}

/* ---------- bottom nav (mobile) ---------- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--panel);border-top:1px solid var(--line);
  display:flex;justify-content:space-around;align-items:center;
  padding:7px 0 calc(7px + env(safe-area-inset-bottom));
}
.bottom-nav a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:'Barlow Condensed',sans-serif;font-size:.68rem;
  color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;
}
.bottom-nav a:hover{text-decoration:none;color:var(--amber);}
.bottom-nav a.active{color:var(--amber);}
.bottom-nav svg{width:21px;height:21px;}
@media(min-width:900px){.bottom-nav{display:none;} footer{padding-bottom:26px;}}

/* ---------- fullscreen ---------- */
.fake-fullscreen{
  position:fixed !important;inset:0 !important;z-index:9999 !important;
  margin:0 !important;border-radius:0 !important;border:none !important;
  width:100vw !important;height:100vh !important;
  justify-content:center;background:var(--void) !important;
}

/* ---------- win celebration ---------- */
.win-celebration{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:rgba(11,14,20,.93);z-index:100;
  animation:cab-fade .22s ease-out;
}
@keyframes cab-fade{from{opacity:0;}to{opacity:1;}}
.win-celebration .win-title{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(1.8rem,7vw,3rem);text-transform:uppercase;
  letter-spacing:.08em;color:var(--amber);
  animation:cab-blink 1s steps(2,end) infinite;
}
@keyframes cab-blink{0%,49%{opacity:1;}50%,100%{opacity:.35;}}
.win-celebration .win-sub{
  font-family:'JetBrains Mono',monospace;font-size:.85rem;
  color:var(--text-dim);letter-spacing:.06em;
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ---------- status line (engines that report state as text) ---------- */
.status-line{
  font-family:'JetBrains Mono',monospace;font-size:.8rem;
  color:var(--text-dim);letter-spacing:.03em;text-align:center;
  min-height:1.2em;
}
.status-line b,.status-line #turn{color:var(--cyan);font-weight:500;}

/* ---------- DOM playfields (engines that build their own grids) ---------- */
.playfield{
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
  max-width:100%;
}
.playfield:empty{display:none;}
.playfield button,.playfield .cell{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:var(--radius);cursor:pointer;font-family:inherit;
}
.playfield button:hover,.playfield .cell:hover{border-color:var(--amber);}

.lr-pad{display:flex;gap:10px;}
.lr-pad button{
  flex:1;min-width:96px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--text);font-size:1.2rem;padding:13px 0;border-radius:var(--radius);
  cursor:pointer;box-shadow:var(--shadow);
}
.lr-pad button:active{transform:translateY(1px);box-shadow:none;background:var(--amber);color:var(--void);}
@media(min-width:900px){.lr-pad{display:none;}}

/* ---------- home hero ---------- */
.hero{padding:44px 0 8px;border-bottom:1px solid var(--line);margin-bottom:8px;}
.hero .eyebrow{display:block;margin-bottom:12px;}
.hero h1{font-size:clamp(2rem,6vw,3.4rem);max-width:16ch;margin-bottom:14px;}
.hero-sub{color:var(--text-dim);max-width:56ch;margin:0 0 30px;font-size:1.02rem;}

/* ---------- category tiles ---------- */
.cat-row{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(184px,1fr));
}
.cat-tile{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:var(--radius);padding:15px 16px;color:var(--text);
  transition:border-color .12s,background .12s;
}
.cat-tile:hover{background:var(--panel-2);border-left-color:var(--cyan);text-decoration:none;}
.cat-tile h3{margin-bottom:5px;}
.cat-tile p{margin:0 0 9px;font-size:.83rem;color:var(--text-dim);line-height:1.45;}
.cat-count{
  font-family:'JetBrains Mono',monospace;font-size:.68rem;
  color:var(--amber);letter-spacing:.08em;text-transform:uppercase;
}
.cat-intro{color:var(--text-dim);margin:0 0 20px;max-width:62ch;}

/* ---------- pager ---------- */
.pager{display:flex;gap:7px;flex-wrap:wrap;margin:28px 0 8px;}
.pager a,.pager-current{
  min-width:40px;text-align:center;padding:8px 11px;
  border:1px solid var(--line);border-radius:var(--radius);
  font-family:'JetBrains Mono',monospace;font-size:.85rem;
}
.pager a{color:var(--text-dim);background:var(--panel);}
.pager a:hover{border-color:var(--amber);color:var(--amber);text-decoration:none;}
.pager-current{background:var(--amber);color:var(--void);border-color:var(--amber);font-weight:600;}

/* ---------- search page ---------- */
.search-big{
  width:100%;background:var(--panel);border:1px solid var(--line);
  color:var(--text);padding:14px 16px;border-radius:var(--radius);
  font-family:inherit;font-size:1.05rem;margin-bottom:10px;
}
.search-big:focus{border-color:var(--amber);outline:none;}
.search-big::placeholder{color:var(--text-dim);}
#count{text-align:left;margin:0 0 18px;}

/* ---------- turn pills ---------- */
.pill-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.pill{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;
  padding:5px 13px;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text-dim);background:var(--panel-2);
}
.pill.active{background:var(--amber);color:var(--void);border-color:var(--amber);}

/* ---------- pool table wrapper ---------- */
.table-wrap{display:flex;justify-content:center;max-width:100%;}
.table-wrap canvas{max-width:100%;height:auto;}

/* ---------- power meter ---------- */
.power-bar{
  width:min(300px,90%);height:9px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;
}
.power-bar>div{
  height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--amber),var(--magenta));
}

/* ---------- sudoku numpad ---------- */
.numpad{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:340px;}
.numpad button{
  min-width:38px;padding:9px 0;flex:1 0 38px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:var(--radius);cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:.95rem;
}
.numpad button:hover{border-color:var(--amber);color:var(--amber);}
.numpad button.active{background:var(--amber);color:var(--void);border-color:var(--amber);}

/* ---------- card game zones ---------- */
.card-top{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;}
.pile,.pile-group{display:flex;gap:6px;min-height:62px;}
.pile-group{flex:1;justify-content:flex-end;}
.tableau{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;width:100%;}
.pile:empty,.pile-group:empty,.tableau:empty{min-height:0;}