@charset "UTF-8";
/* Reusable STEP, flow, checklist, controls, stats and comparison UI. */
.gamelinq-steps{counter-reset:gamelinq-step;display:grid;gap:12px;margin:20px 0;padding:0;list-style:none}.gamelinq-steps>li{counter-increment:gamelinq-step;position:relative;min-height:44px;padding:10px 12px 10px 58px}.gamelinq-steps>li::before{content:counter(gamelinq-step);position:absolute;left:0;top:4px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gamelinq-color-primary);color:#fff;font-weight:800}
.gamelinq-timeline{position:relative;display:grid;gap:20px;margin:24px 0;padding-left:28px}.gamelinq-timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--gamelinq-color-border)}.gamelinq-timeline__item{position:relative}.gamelinq-timeline__item::before{content:"";position:absolute;left:-27px;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--gamelinq-color-teal)}
.gamelinq-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.gamelinq-flow>*{position:relative;padding:20px;border:1px solid var(--gamelinq-color-border);border-radius:var(--gamelinq-radius-md);background:#fff}.gamelinq-flow>*:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:50%;z-index:1;color:var(--gamelinq-color-primary);font-weight:900}
/* GameLinQ article UI component library (2026-09-09) */
.glq-component{
  min-width:0;
  border:1px solid var(--glq-line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--glq-shadow);
}
.glq-component-title{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
}
.glq-component-title__number{
  display:grid;
  width:48px;
  height:48px;
  flex:0 0 48px;
  place-items:center;
  border-radius:11px;
  background:linear-gradient(145deg,#1899f0,#075fd6);
  color:#fff;
  font-size:21px;
  font-weight:900;
  box-shadow:0 6px 14px rgba(5,112,213,.2);
}
.glq-component-title h3{
  height:auto;
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:var(--glq-navy);
  font-size:24px;
  line-height:1.25;
}
.glq-component-title p{
  margin:0 0 0 auto;
  color:#5c7694;
  font-size:12px;
  line-height:1.5;
}
.glq-step-list{
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:glq-step;
}
.glq-step-list>li{
  counter-increment:glq-step;
  position:relative;
  display:grid;
  min-height:102px;
  grid-template-columns:58px minmax(0,1fr);
  gap:16px;
  align-items:center;
  margin-left:26px;
  padding:15px 18px;
  border:1px solid var(--glq-line);
  border-radius:12px;
  background:linear-gradient(105deg,#fff,#f0f9ff);
}
.glq-step-list>li::before{
  position:absolute;
  left:-48px;
  top:24px;
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:50%;
  background:#e6f3fc;
  color:var(--glq-navy);
  content:counter(glq-step);
  font-weight:900;
}
.glq-step-list>li:first-child::before{background:linear-gradient(145deg,#159bf0,#075fd7);color:#fff}
.glq-step-list>li:not(:last-child)::after{
  position:absolute;
  left:-29px;
  top:65px;
  width:2px;
  height:52px;
  background:#a9d5f3;
  content:"";
}
.glq-step-list__icon{
  display:grid;
  width:54px;
  height:54px;
  place-items:center;
  border-radius:50%;
  background:#e8f5ff;
  color:var(--glq-blue);
  font-size:25px;
  font-weight:900;
}
.glq-step-list strong{display:block;color:#0873d5;font-size:19px}
.glq-step-list p{margin:3px 0 0;color:#486b91;font-size:14px;line-height:1.55}
/* A compact overview of states or system transitions, separate from detailed STEP instructions. */
.glq-flow{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:18px;
  align-items:stretch;
}
.glq-flow:has(> .glq-flow-card:nth-child(4):last-child){
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.glq-flow-card{
  position:relative;
  display:flex;
  min-width:0;
  min-height:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:16px 14px;
  border:1px solid var(--glq-line);
  border-radius:12px;
  background:linear-gradient(145deg,#fff,#f5fbff);
  text-align:center;
  box-shadow:0 4px 12px rgba(17,74,119,.05);
}
.glq-flow-card:not(:last-child)::after{
  position:absolute;
  right:-17px;
  top:50%;
  z-index:1;
  transform:translateY(-50%);
  color:var(--glq-blue);
  content:"→";
  font-size:21px;
  line-height:1;
  font-weight:900;
}
/* A four-card overview is read left-to-right, then top-to-bottom; do not point across rows. */
.glq-flow:has(> .glq-flow-card:nth-child(4):last-child) > .glq-flow-card:nth-child(2)::after{
  display:none;
}
.glq-flow-card__icon{
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 40px;
  place-items:center;
  margin-bottom:8px;
  border-radius:50%;
  background:#eaf6ff;
  color:var(--glq-blue);
  font-size:20px;
  font-weight:900;
}
.glq-flow-card > strong{
  display:block;
  margin:0;
  color:var(--glq-navy);
  font-size:16px;
  line-height:1.45;
}
.glq-flow-card > p{
  margin:5px 0 0;
  color:#506f91;
  font-size:13px;
  line-height:1.55;
}
.glq-flow-card > small{
  display:inline-flex;
  width:auto;
  align-self:center;
  margin:8px 0 0;
  padding:3px 10px;
  border-radius:99px;
  background:#e7f4fd;
  color:#0877d8;
  font-size:11px;
  line-height:1.4;
  font-weight:800;
}
.glq-checklist,.glq-condition-list{
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}
.glq-checklist li,.glq-condition-list li{
  display:grid;
  min-height:64px;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:13px;
  align-items:center;
  padding:10px 14px;
  border:1px solid var(--glq-line);
  border-radius:10px;
  background:#fff;
}
.glq-checklist li::before{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border:2px solid #087fe0;
  border-radius:6px;
  background:#087fe0;
  color:#fff;
  content:"✓";
  font-weight:900;
  box-sizing:border-box;
}
.glq-checklist__mark{display:none}
.glq-checklist strong,.glq-condition-list strong{display:block;line-height:1.35}
.glq-checklist small,.glq-condition-list small{display:block;color:#65809d;line-height:1.4}
.glq-condition-list__icon{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:9px;
  background:#e9f5ff;
  color:#0875d8;
  font-weight:900;
}
.glq-tag{
  display:inline-flex;
  min-width:54px;
  min-height:28px;
  align-items:center;
  justify-content:center;
  padding:4px 11px;
  border-radius:99px;
  font-size:12px;
  font-weight:900;
}
.glq-tag--required{background:#fff0f1;color:#d91c38}
.glq-tag--optional{background:#e8f4ff;color:#0875d8}
.glq-control-groups{display:grid;gap:12px}
.glq-control-group{
  padding:14px 16px;
  border-radius:12px;
  background:linear-gradient(105deg,#f2f9ff,#eaf6ff);
}
.glq-control-group>strong{display:block;margin-bottom:12px;color:#0b3a74}
.glq-control-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px}
.glq-control-set{display:grid;justify-items:center;gap:7px;padding-right:18px;border-right:1px solid #b9d7eb}
.glq-control-set:last-child{padding-right:0;border-right:0}
.glq-control-set>span:last-child{color:#496b90;font-size:12px}
.glq-key{
  display:inline-grid;
  min-width:39px;
  height:39px;
  place-items:center;
  margin:0 2px;
  padding:0 10px;
  border:1px solid #b6c8d8;
  border-bottom-width:5px;
  border-radius:7px;
  background:#fff;
  color:#0b2d5e;
  font-weight:900;
  box-shadow:0 2px 5px rgba(8,45,90,.08);
}
.glq-key--wide{min-width:110px}
/* Reusable mouse controls alongside the keyboard-control UI.
   Use .glq-mouse--left, --right or --wheel to highlight one input in red. */
.glq-mouse{
  --glq-mouse-accent:#e64e58;
  position:relative;
  display:block;
  box-sizing:border-box;
  width:50px;
  height:70px;
  overflow:hidden;
  border:2px solid #a6bcd0;
  border-radius:24px 24px 21px 21px;
  background:linear-gradient(150deg,#fff 0%,#edf5fb 100%);
  box-shadow:0 3px 8px rgba(8,45,90,.1);
}
.glq-mouse__button{
  position:absolute;
  top:0;
  width:50%;
  height:28px;
  border-bottom:1px solid #b4c9da;
  background:#f7fbfe;
}
.glq-mouse__button--left{
  left:0;
  border-right:1px solid #b4c9da;
}
.glq-mouse__button--right{right:0}
.glq-mouse__wheel{
  position:absolute;
  z-index:1;
  top:8px;
  left:50%;
  box-sizing:border-box;
  width:9px;
  height:19px;
  transform:translateX(-50%);
  border:2px solid #8da8bf;
  border-radius:6px;
  background:#dce9f3;
}
.glq-mouse__wheel::after{
  position:absolute;
  top:4px;
  left:50%;
  width:2px;
  height:6px;
  transform:translateX(-50%);
  border-radius:2px;
  background:rgba(51,86,114,.55);
  content:"";
}
.glq-mouse--left .glq-mouse__button--left,
.glq-mouse--right .glq-mouse__button--right{
  border-bottom-color:#c63845;
  background:var(--glq-mouse-accent);
}
.glq-mouse--wheel .glq-mouse__wheel{
  border-color:#ba3745;
  background:var(--glq-mouse-accent);
}
.glq-mouse--wheel .glq-mouse__wheel::after{background:#fff}
.glq-pad{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border:3px solid color-mix(in srgb,var(--pad) 70%,#fff);
  border-radius:50%;
  background:var(--pad);
  color:#fff;
  font-weight:900;
  box-shadow:0 4px 10px color-mix(in srgb,var(--pad) 20%,transparent);
}
.glq-outcomes,.glq-procon{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.glq-outcome,.glq-procon__panel{
  --tone:#10a873;
  padding:19px;
  border:1px solid color-mix(in srgb,var(--tone) 28%,#fff);
  border-radius:12px;
  background:color-mix(in srgb,var(--tone) 8%,#fff);
}
.glq-outcome--fail,.glq-procon__panel--demerit{--tone:#ee3451}
.glq-outcome h4,.glq-procon h4{
  display:flex;
  height:auto;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  padding:0 0 12px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--tone) 24%,#fff);
  background:none;
  color:var(--tone);
  font-size:23px;
}
.glq-outcome h4 span,.glq-procon h4 span{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:50%;
  background:var(--tone);
  color:#fff;
}
.glq-outcome ul,.glq-procon ul{margin:0;padding:0;list-style:none}
.glq-outcome li,.glq-procon li{position:relative;margin:8px 0;padding-left:25px;color:#3d6084}
.glq-outcome li::before,.glq-procon li::before{
  position:absolute;
  left:0;
  top:.15em;
  display:grid;
  width:18px;
  height:18px;
  place-items:center;
  border-radius:50%;
  background:var(--tone);
  color:#fff;
  content:"✓";
  font-size:11px;
  font-weight:900;
}
.glq-outcome--fail li::before,.glq-procon__panel--demerit li::before{content:"×"}

/* Shared two-, three-, and four-column content panels. */
.glq-procon h4 span .fa{
  color:inherit;
  font-size:18px;
  line-height:1;
}
.glq-columns{
  display:grid;
  min-width:0;
  gap:14px;
  align-items:stretch;
}
.glq-columns--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.glq-columns--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.glq-columns--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.glq-column{
  min-width:0;
  padding:18px 20px;
  border:1px solid #d6e8f6;
  border-radius:12px;
  background:linear-gradient(145deg,#fff 0%,#f5fbff 100%);
  box-shadow:0 5px 16px rgba(17,74,119,.07);
  overflow-wrap:anywhere;
}
.glq-column>strong{
  display:block;
  margin:0 0 7px;
  color:#153f6d;
  font-size:17px;
  line-height:1.4;
}
.glq-column>p{
  margin:0;
  color:#486b91;
  font-size:14px;
  line-height:1.65;
}
.glq-column>*:first-child{margin-top:0}
.glq-column>*:last-child{margin-bottom:0}
.glq-column>p:empty{display:none}
.glq-column img{max-width:100%;height:auto}

.glq-columns--2>.glq-column:nth-child(1),
.glq-columns--3>.glq-column:nth-child(1),
.glq-columns--4>.glq-column:nth-child(1){
  border-color:#b9ddf7;
  background:linear-gradient(145deg,#fff 0%,#f1f8ff 100%);
}
.glq-columns--2>.glq-column:nth-child(1)>strong,
.glq-columns--3>.glq-column:nth-child(1)>strong,
.glq-columns--4>.glq-column:nth-child(1)>strong{color:#0b6fc8}
.glq-columns--2>.glq-column:nth-child(2),
.glq-columns--3>.glq-column:nth-child(2),
.glq-columns--4>.glq-column:nth-child(2){
  border-color:#bfe8d1;
  background:linear-gradient(145deg,#fff 0%,#f1faf5 100%);
}
.glq-columns--2>.glq-column:nth-child(2)>strong,
.glq-columns--3>.glq-column:nth-child(2)>strong,
.glq-columns--4>.glq-column:nth-child(2)>strong{color:#16805b}
.glq-columns--3>.glq-column:nth-child(3),
.glq-columns--4>.glq-column:nth-child(3){
  border-color:#f0d7a7;
  background:linear-gradient(145deg,#fff 0%,#fff8ec 100%);
}
.glq-columns--3>.glq-column:nth-child(3)>strong,
.glq-columns--4>.glq-column:nth-child(3)>strong{color:#a66a12}
.glq-columns--4>.glq-column:nth-child(4){
  border-color:#d9c8f2;
  background:linear-gradient(145deg,#fff 0%,#f8f3ff 100%);
}
.glq-columns--4>.glq-column:nth-child(4)>strong{color:#7650aa}

.glq-compare-table th.is-best,.glq-compare-table td.is-best{
  border-inline:2px solid #1687e5;
  background:#eaf6ff;
  color:#076fd1;
  font-weight:900;
}
.glq-compare-table th.is-best{position:relative;border-top:2px solid #1687e5}
.glq-compare-table tr:last-child td.is-best{border-bottom:2px solid #1687e5}
.glq-rank{
  display:inline-grid;
  min-width:40px;
  height:26px;
  place-items:center;
  border-radius:99px;
  background:#e6f1fa;
  color:#143c69;
  font-weight:900;
}
.glq-rank--best{background:#087fe0;color:#fff}

@media(max-width:1024px){
  .glq-columns--3,.glq-columns--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .glq-columns--3>.glq-column:last-child:nth-child(odd){grid-column:1/-1}
}

@media(max-width:767px){
  .glq-component{border-radius:11px}
  .glq-component-title{gap:9px;margin-bottom:12px;align-items:flex-start}
  .glq-component-title__number{width:42px;height:42px;flex-basis:42px;font-size:18px}
  .glq-component-title h3{font-size:20px}
  .glq-component-title p{max-width:45%;font-size:10px}
  .glq-step-list>li{min-height:90px;grid-template-columns:45px minmax(0,1fr);gap:11px;margin-left:23px;padding:12px}
  .glq-step-list>li::before{left:-41px;width:35px;height:35px}
  .glq-step-list>li:not(:last-child)::after{left:-24px;top:59px;height:47px}
  .glq-step-list__icon{width:43px;height:43px;font-size:20px}
  .glq-step-list strong{font-size:16px}.glq-step-list p{font-size:12px}
  .glq-flow,
  .glq-flow:has(> .glq-flow-card:nth-child(4):last-child){grid-template-columns:1fr;gap:20px}
  .glq-flow-card{min-height:0;padding:14px 16px}
  .glq-flow-card:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%);content:"↓";font-size:20px}
  .glq-flow:has(> .glq-flow-card:nth-child(4):last-child) > .glq-flow-card:nth-child(2)::after{display:block}
  .glq-flow-card__icon{width:36px;height:36px;flex-basis:36px;font-size:18px}
  .glq-checklist li,.glq-condition-list li{min-height:57px;grid-template-columns:35px minmax(0,1fr) auto;gap:9px;padding:8px 10px}
  .glq-checklist li::before{width:29px;height:29px}.glq-condition-list__icon{width:32px;height:32px}
  .glq-checklist strong,.glq-condition-list strong{font-size:13px}.glq-checklist small,.glq-condition-list small{font-size:11px}
  .glq-tag{min-width:46px;min-height:25px;padding:3px 8px;font-size:10px}
  .glq-control-group{padding:12px}
  .glq-control-row{gap:11px}
  .glq-control-set{padding-right:10px}
  .glq-key{min-width:32px;height:34px;padding:0 7px;font-size:12px}.glq-key--wide{min-width:86px}
  .glq-pad{width:36px;height:36px}
  .glq-outcomes,.glq-procon{grid-template-columns:1fr;gap:10px}
  .glq-outcome,.glq-procon__panel{padding:15px}
  .glq-outcome h4,.glq-procon h4{font-size:19px}
  .glq-columns--2,.glq-columns--3,.glq-columns--4{grid-template-columns:1fr}
  .glq-columns--3>.glq-column:last-child:nth-child(odd){grid-column:auto}
  .glq-column{padding:16px}
}


/* Article UI correction and reusable promotion (2026-09-09) */
.glq-component>p:empty,
.glq-demo-label>p:empty,
.glq-step-list>li>p:empty,
.glq-flow-card>p:empty,
.glq-checklist>li>p:empty,
.glq-condition-list>li>p:empty,
.glq-outcome>p:empty,
.glq-procon__panel>p:empty{
  display:none;
}
.glq-step-list{
  padding-left:50px;
}
.glq-step-list>li{
  width:auto;
  margin-left:0;
}
.glq-flow-card__icon i,
.glq-flow-card__icon .fa{
  color:inherit;
  font-size:20px;
  line-height:1;
}
.glq-step-list__icon .fa{
  color:inherit;
  font-size:1em;
  line-height:1;
}

@media(max-width:767px){
  .glq-step-list{
    padding-left:42px;
  }
  .glq-step-list>li::before{
    left:-40px;
  }
  .glq-step-list>li:not(:last-child)::after{
    left:-23px;
  }
  .glq-flow-card__icon i,
  .glq-flow-card__icon .fa{
    font-size:18px;
  }
}


/* Article UI STEP cascade guard (2026-09-09) */
.entry-content .glq-step-list{
  margin:0;
  padding-left:50px;
}
.entry-content .glq-step-list>li{
  width:auto;
  margin:0;
}
@media(max-width:767px){
  .entry-content .glq-step-list{
    padding-left:42px;
  }
  .entry-content .glq-step-list>li{
    margin:0;
  }
}

/* Space between article headings and the first guide component. */
:is(.entry-content,.gamelinq-content) :is(h2,h3,h4) + :is(.glq-step-list,.glq-flow,.glq-checklist,.glq-condition-list){
  margin-top:24px;
}
@media(max-width:767px){
  :is(.entry-content,.gamelinq-content) :is(h2,h3,h4) + :is(.glq-step-list,.glq-flow,.glq-checklist,.glq-condition-list){
    margin-top:20px;
  }
}