:root{
  --void:#070911;
  --blueprint:#C9A24D;       /* gold — structural accent, borders, icons */
  --blueprint-2:#B9AD8F;     /* champagne-grey — secondary text/labels */
  --line:#6C4FC7;            /* violet — ambient depth glow only */
  --paper:#11162A;           /* deep navy panel / page surface */
  --paper-2:#212A47;         /* lighter navy-slate — hairlines, borders */
  --ink:#F2EFE6;             /* warm ivory text */
  --signal:#B5273D;          /* ruby — CTA / highlight / pop */
  --signal-2:#84182A;        /* deep ruby — hover / danger */
  --ok:#2F9968;              /* emerald — success, felt-table green */
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background-color:var(--void);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.5;
  min-height:100vh;
  background-image:
    radial-gradient(760px 480px at 12% -8%, rgba(108,79,199,0.20), transparent 60%),
    radial-gradient(680px 520px at 108% 12%, rgba(197,155,62,0.16), transparent 62%),
    radial-gradient(900px 620px at 50% 118%, rgba(181,39,61,0.14), transparent 60%),
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: auto, auto, auto, 34px 34px, 34px 34px;
  background-attachment: fixed, fixed, fixed, scroll, scroll;
}
h1,h2,h3{
  font-family:'Space Grotesk', sans-serif;
  margin:0;
  font-weight:700;
  letter-spacing:-0.01em;
}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit;}

header{
  background:linear-gradient(135deg,#161D36,#0C0F1C 70%);
  color:var(--ink);
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--paper-2);
  box-shadow:0 12px 30px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
  flex-wrap:wrap;
  gap:10px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-size:20px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  text-decoration:none;
  color:var(--ink);
}
.logo .mark{
  width:28px;height:28px;
  border:2px solid var(--blueprint);
  color:var(--blueprint);
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono';
  font-size:13px;
  transform:rotate(45deg);
  box-shadow:0 0 14px -2px rgba(201,162,77,0.55);
}
.logo .mark span{transform:rotate(-45deg);}
nav{display:flex;gap:22px;font-family:'IBM Plex Mono';font-size:13px;flex-wrap:wrap;}
nav a{text-decoration:none;opacity:0.75;cursor:pointer;color:var(--blueprint-2);}
nav a:hover{opacity:1;color:var(--blueprint);}

main{max-width:1080px;margin:0 auto;padding:48px 24px 100px;}

.hero{
  border:1px solid var(--paper-2);
  border-radius:var(--radius);
  background:linear-gradient(165deg, rgba(201,162,77,0.07), rgba(255,255,255,0.015) 40%, rgba(108,79,199,0.06));
  background-color:var(--paper);
  padding:40px 32px;
  position:relative;
  margin-bottom:40px;
  overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05);
}
.hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(201,162,77,0.10) 46%, transparent 62%);
  background-size:220% 220%;
  animation:sheen 9s ease-in-out infinite;
}
@keyframes sheen{0%,100%{background-position:0% 0%;}50%{background-position:100% 100%;}}
.hero:after,.hero .c3,.hero .c4{
  content:"";position:absolute;width:16px;height:16px;
  border-color:var(--signal);border-style:solid;
}
.hero:after{top:10px;right:10px;border-width:2px 2px 0 0;}
.hero .c3{bottom:10px;left:10px;border-width:0 0 2px 2px;}
.hero .c4{bottom:10px;right:10px;border-width:0 2px 2px 0;}
.hero h1{font-size:38px;max-width:640px;color:var(--ink);}
.hero p{max-width:560px;color:var(--blueprint-2);font-size:15px;margin-top:14px;}
.hero .tag{
  font-family:'IBM Plex Mono';font-size:12px;color:var(--signal);
  text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;display:block;
}

.section-label{
  font-family:'IBM Plex Mono';font-size:12px;color:var(--blueprint-2);
  margin:36px 0 14px;padding-bottom:6px;border-bottom:1px solid var(--paper-2);
  display:flex;align-items:center;justify-content:space-between;
  scroll-margin-top:90px;
}
.section-label a.viewall{color:var(--signal);text-decoration:none;}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.card{
  background:linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 55%);
  background-color:var(--paper);
  border:1px solid var(--paper-2);
  border-radius:var(--radius);
  padding:18px;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  text-decoration:none;
  color:var(--ink);
  display:block;
  box-shadow:0 10px 24px -18px rgba(0,0,0,0.7);
}
.card:hover{transform:translate(0,-3px);border-color:var(--blueprint);box-shadow:0 16px 34px -16px rgba(0,0,0,0.8), 0 0 0 1px var(--blueprint), 0 0 24px -6px rgba(201,162,77,0.45);}
.card .num{font-family:'IBM Plex Mono';font-size:11px;color:var(--signal);}
.card h3{font-size:17px;margin-top:8px;color:var(--ink);}
.card p{font-size:13px;color:var(--blueprint-2);margin-top:6px;}
.card .status{font-family:'IBM Plex Mono';font-size:10px;color:var(--ok);margin-top:10px;display:block;}
.card.soon{opacity:0.5;cursor:default;}
.card.soon:hover{transform:none;box-shadow:0 10px 24px -18px rgba(0,0,0,0.7);border-color:var(--paper-2);}
.card.soon .status{color:#6B7290;}
.card.game{border-color:rgba(181,39,61,0.4);}
.card.game:hover{border-color:var(--signal);box-shadow:0 16px 34px -16px rgba(0,0,0,0.8), 0 0 0 1px var(--signal), 0 0 24px -6px rgba(181,39,61,0.5);}
.card.game .num{color:var(--blueprint);}

.back-link{
  font-family:'IBM Plex Mono';font-size:13px;color:var(--blueprint-2);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-bottom:20px;
  text-decoration:none;
}
.back-link:hover{color:var(--signal);}
.tool-box{
  border:1px solid var(--paper-2);border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 50%);
  background-color:var(--paper);padding:32px;
  box-shadow:0 30px 70px -34px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
}
.tool-box h1{font-size:26px;margin-bottom:8px;color:var(--ink);}
.tool-box .desc{color:var(--blueprint-2);font-size:14px;margin-bottom:26px;max-width:620px;}
label{display:block;font-family:'IBM Plex Mono';font-size:12px;margin-bottom:6px;color:var(--blueprint-2);}
input[type=text],input[type=number],input[type=file],input[type=date],input[type=color],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--paper-2);border-radius:6px;background:#0D1224;
  font-family:'IBM Plex Sans';font-size:14px;color:var(--ink);margin-bottom:18px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--signal);outline-offset:1px;}
input[type=range]{width:100%;margin-bottom:18px;accent-color:var(--signal);}
.btn{
  font-family:'IBM Plex Mono';font-size:13px;background:linear-gradient(135deg,#C7984A,#9E7530);color:#1A1204;
  border:none;border-radius:7px;padding:12px 22px;cursor:pointer;letter-spacing:0.02em;font-weight:600;
  box-shadow:0 8px 20px -8px rgba(201,162,77,0.55);transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(201,162,77,0.7);}
.btn.secondary{background:transparent;border:1px solid var(--blueprint);color:var(--blueprint);box-shadow:none;}
.btn.secondary:hover{background:rgba(201,162,77,0.12);color:var(--blueprint);}
.btn.danger{background:linear-gradient(135deg,#C23A50,#84182A);color:#FBEAEA;box-shadow:0 8px 20px -8px rgba(181,39,61,0.55);}
.row{display:flex;gap:12px;flex-wrap:wrap;}
.output{margin-top:26px;padding-top:22px;border-top:1px dashed var(--paper-2);}
#qr-canvas-wrap, .preview-box{display:flex;align-items:center;justify-content:center;background:#0D1224;border:1px solid var(--paper-2);border-radius:8px;padding:20px;min-height:120px;}
.fav-preview{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;}
.fav-preview .item{text-align:center;font-family:'IBM Plex Mono';font-size:10px;color:var(--blueprint-2);}
.fav-preview canvas{border:1px solid var(--paper-2);display:block;margin-bottom:6px;background:#0D1224;}
.palette-swatches{display:flex;margin-top:16px;border:1px solid var(--paper-2);border-radius:8px;overflow:hidden;}
.swatch{flex:1;height:70px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;cursor:pointer;position:relative;}
.swatch span{font-family:'IBM Plex Mono';font-size:10px;background:rgba(7,9,17,0.75);color:#F2EFE6;padding:2px 4px;border-radius:3px;}
.result-num{font-family:'IBM Plex Mono';font-size:34px;color:var(--blueprint);margin:10px 0;text-shadow:0 0 24px rgba(201,162,77,0.35);}
.result-note{font-size:13px;color:var(--blueprint-2);}
.icon-card{background:#0D1224;border:1px solid var(--paper-2);border-radius:8px;padding:14px;text-align:center;}
.icon-card .icon-preview{width:40px;height:40px;margin:0 auto 8px;color:var(--blueprint);}
.icon-card .icon-preview svg{width:100%;height:100%;}
.icon-card .icon-name{font-family:'IBM Plex Mono';font-size:11px;color:var(--blueprint-2);margin-bottom:8px;text-transform:capitalize;}
.icon-card .icon-actions{display:flex;gap:6px;justify-content:center;}
.icon-card .icon-actions button{font-family:'IBM Plex Mono';font-size:10px;background:transparent;border:1px solid var(--blueprint);border-radius:5px;color:var(--blueprint);padding:4px 8px;cursor:pointer;}
.icon-card .icon-actions button:hover{background:var(--blueprint);color:#1A1204;}
footer{text-align:center;padding:30px;font-family:'IBM Plex Mono';font-size:12px;color:#6B7290;}
footer a{color:var(--blueprint-2);}

/* ---- Game-specific shared styles ---- */
.game-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;}
.game-hud{display:flex;gap:24px;font-family:'IBM Plex Mono';font-size:13px;color:var(--blueprint-2);flex-wrap:wrap;justify-content:center;}
.game-hud b{color:var(--signal);font-size:16px;}
.game-board{background:#0D1224;border:1px solid var(--paper-2);border-radius:10px;padding:12px;box-shadow:0 20px 50px -28px rgba(0,0,0,0.8);}
.game-msg{font-family:'IBM Plex Mono';font-size:13px;color:var(--ok);min-height:20px;text-align:center;}
canvas.game-canvas{display:block;background:#0D1224;}

/* ---- SEO content: how-to guide, related links, share row ---- */
.guide{border:1px solid var(--paper-2);border-radius:var(--radius);background:var(--paper);padding:26px 32px;margin-top:20px;}
.guide h2{font-size:17px;margin-bottom:10px;color:var(--blueprint);}
.guide p{color:var(--blueprint-2);font-size:14px;line-height:1.7;margin:0;max-width:720px;}
.cross-links{border:1px solid var(--paper-2);border-radius:var(--radius);background:var(--paper);padding:20px 32px;margin-top:16px;}
.cross-links h2{font-size:12px;margin-bottom:12px;color:var(--blueprint-2);font-family:'IBM Plex Mono';text-transform:uppercase;letter-spacing:0.05em;font-weight:600;}
.cross-links .links-row{display:flex;flex-wrap:wrap;gap:10px;}
.cross-links a{font-family:'IBM Plex Mono';font-size:12px;color:var(--blueprint);border:1px solid var(--blueprint);border-radius:6px;padding:7px 12px;text-decoration:none;}
.cross-links a:hover{background:rgba(201,162,77,0.12);}
.share-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.share-btn{font-family:'IBM Plex Mono';font-size:12px;border:1px solid var(--paper-2);border-radius:6px;padding:9px 14px;text-decoration:none;color:var(--ink);background:#0D1224;display:inline-flex;align-items:center;gap:6px;cursor:pointer;}
.share-btn:hover{border-color:var(--blueprint);color:var(--blueprint);}