:root {
    --bg:#111017;
    --ink:#f7f1ff;
    --green:#b7f66c;
    --muted:#aaa4b9;
    --gold:#b7f66c
}

body {
    background:var(--bg);
    color:var(--ink)
}

.topbar {
    background:#c4fa7d;
    color:#1b2613;
    font-weight:bold;
    font-size:10px;
    letter-spacing:2px
}

header {
    max-width:none;
    padding:21px 3%;
    border-bottom:1px solid #34303f;
    background:#17151f;
    gap:32px
}

header .brand {
    background:none;
    padding:0
}

header nav a {
    color:#c1bacf
}

header nav a:hover {
    color:#c4fa7d
}

.button {
    background:#b8f276;
    color:#202817;
    border-radius:0;
    box-shadow:4px 4px 0 #587936;
    font-weight:800
}

.button:hover {
    background:#cef6a2;
    color:#10170a
}

.button.small {
    background:#ad87ff;
    color:#211536;
    box-shadow:4px 4px 0 #5d3a91
}

main {
    max-width:none;
    padding:0 3%;
    position:relative;
    display:grid;
    grid-template-columns:76px minmax(0,1fr);
    gap:35px
}

.arcade-rail {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:40px;
    gap:28px;
    border-right:1px solid #302b3c;
    align-self:start;
    position:sticky;
    top:10px;
    padding-right:25px
}

.arcade-rail a {
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:4px;
    font-size:8px;
    letter-spacing:1px;
    text-decoration:none;
    color:#8b859e
}

.arcade-rail a:hover {
    color:#c4fa7d
}

.arcade-rail span {
    font-size:25px;
    color:#c8b1f7
}

.page-content {
    min-width:0
}

.hero {
    gap:30px;
    padding:50px 0 35px;
    grid-template-columns:1fr 1fr;
    position:relative
}

.hero>div {
    position:relative;
    z-index:1
}

.hero .eyebrow {
    color:#c7adff;
    border-left:20px solid #ad87ff;
    padding-left:10px;
    font-size:10px
}

.hero h1 {
    font-family:Arial,Helvetica,sans-serif;
    font-size:clamp(65px,7.5vw,112px);
    font-weight:900;
    line-height:.88;
    letter-spacing:-6px;
    margin:30px 0
}

.hero h1 em {
    font-style:normal;
    color:#ba94ff
}

.hero p {
    font-size:15px;
    max-width:370px;
    color:#b4adc4
}

.hero figure {
    padding:24px 0 0 28px
}

.hero figure:before {
    content:'';
    position:absolute;
    inset:5% 0 7% 2%;
    background:#8e64df;
    transform:rotate(4deg);
    z-index:-1
}

.hero figure img {
    border-radius:0;
    max-height:540px;
    object-fit:cover;
    border:1px solid #aa87e4;
    transform:rotate(-2deg);
    box-shadow:0 20px 40px #0005
}

.hero figure figcaption {
    color:#a69bb9;
    text-align:right;
    font:9px monospace;
    letter-spacing:1px;
    padding-top:7px
}

.orbit-label {
    position:absolute;
    top:0;
    right:5px;
    background:#fa8254;
    color:#2b180f;
    z-index:2;
    font-size:11px;
    line-height:1.3;
    font-weight:900;
    padding:18px 15px;
    transform:rotate(10deg);
    border:3px solid #111017
}

.hero-notes {
    color:#c4fa7d;
    font-size:10px;
    margin-top:28px
}

.hero .textlink {
    color:#d2c8e4
}

.eyebrow {
    color:#b6a3d4
}

.category-bar {
    display:flex;
    gap:10px;
    align-items:center;
    padding:18px 0;
    margin-top:35px;
    border-top:1px solid #373041;
    border-bottom:1px solid #373041;
    overflow-x:auto;
    white-space:nowrap
}

.category-bar a {
    padding:9px 16px;
    border:1px solid #3c3449;
    text-decoration:none;
    font-size:11px;
    border-radius:30px;
    color:#c3b9d3
}

.category-bar a.active {
    background:#b995fb;
    color:#211533;
    border-color:#b995fb
}

.category-bar span {
    margin-left:auto;
    color:#b8f276;
    font-size:9px;
    letter-spacing:2px
}

.sectionhead {
    padding-top:15px
}

.sectionhead h2 {
    font:900 30px Arial;
    letter-spacing:-1px
}

.cards {
    gap:15px
}

.gamecard {
    border-radius:0;
    background:#211c2b;
    border:1px solid #40344f
}

.gamecard:hover {
    transform:translateY(-6px);
    border-color:#b995fb
}

.cardart {
    height:190px;
    background:radial-gradient(circle at 50% 60%,#7049ab,#302342 70%);
    font-size:70px;
    position:relative;
    color:#dbb8ff;
    text-shadow:3px 4px 0 #6d459c
}

.cardart:after {
    content:'FREE PLAY';
    position:absolute;
    top:12px;
    left:12px;
    background:#c0f379;
    color:#233018;
    font:700 8px Arial;
    padding:5px;
    letter-spacing:1px
}

.c1 .cardart {
    background:radial-gradient(circle,#ab503e,#382136);
    color:#ffa97b;
    text-shadow:3px 4px 0 #983e3e
}

.c2 .cardart {
    background:radial-gradient(circle,#286c72,#18313f);
    color:#83e7df;
    text-shadow:3px 4px 0 #25616b
}

.c3 .cardart {
    background:radial-gradient(circle,#7c693a,#353325);
    color:#efde8e;
    text-shadow:3px 4px 0 #87763d
}

.cardbody {
    padding:20px
}

.cardbody small {
    color:#ac9ebc
}

.cardbody h3 {
    font:800 22px Arial;
    color:#f7f1ff
}

.cardbody p {
    color:#b5a9c3
}

.cardbody b {
    display:block;
    border-top:1px solid #3c3449;
    padding-top:12px;
    color:#c6a3ff
}

.editorial {
    background:#211b2e;
    border:1px solid #473958;
    border-radius:0;
    padding:35px;
    grid-template-columns:.9fr 1fr 1fr;
    gap:15px 28px;
    position:relative
}

.editorial-art {
    grid-row:1/4;
    grid-column:1;
    font:900 49px/.95 Arial;
    letter-spacing:-3px;
    color:#ad88f5;
    transform:rotate(-5deg);
    align-self:center
}

.editorial-art b {
    color:#c1f77f
}

.editorial-art span {
    font:9px monospace;
    letter-spacing:3px;
    display:block;
    margin-top:20px;
    color:#eee
}

.editorial>span {
    grid-column:2/-1
}

.editorial h2 {
    grid-column:2;
    grid-row:2/4;
    font:800 29px/1.1 Arial;
    letter-spacing:-1px
}

.editorial p {
    grid-column:3;
    color:#c2b6d3;
    font-size:13px
}

.editorial>a {
    grid-column:3;
    color:#c6a3ff
}

.reading {
    border-color:#363041
}

.reading h2,.faq h2 {
    font:800 32px/1.15 Arial
}

.reading h3 {
    color:#d2b8ff
}

.reading p,details p {
    color:#b6adc5
}

.reading a {
    color:#c3a5ff
}

.faq details {
    border-color:#383040
}

.warning {
    background:#2b231e;
    border-color:#f29c70;
    color:#ebd3c2
}

.warning a {
    color:#ffb18e
}

.warning strong {
    font-size:18px
}

footer {
    background:#17131f;
    border-top:1px solid #3b3048
}

footer h3 {
    color:#b99be9
}

footer a {
    color:#a99cb8
}

footer p,footer small {
    color:#b4a7c3
}

.sessionbar {
    background:#211a2b;
    border-color:#453551;
    color:#b3a5c6
}

.sessionbar span {
    color:#c2f186
}

.sessionbar button {
    color:#c5b0e5
}

.pagehero {
    background:radial-gradient(ellipse at 80% 30%,#39254d,transparent 70%);
    max-width:none;
    padding:65px 30px 40px;
    margin-bottom:20px;
    border-bottom:1px solid #44324f
}

.pagehero h1 {
    font:900 58px/1.06 Arial;
    letter-spacing:-2px;
    max-width:900px
}

.pagehero p {
    max-width:650px
}

.playpanel {
    background:#241934;
    border:1px solid #65438b;
    border-radius:0
}

.playpanel button {
    background:#bd99ff;
    color:#281637;
    box-shadow:3px 3px 0 #63448a
}

.playpanel .eyebrow {
    color:#c8a7fc
}

.display span,.memorycard {
    background:#e6d8ff;
    color:#342048
}

.sitemap a {
    border-color:#43384f;
    color:#d6c2f3
}

dialog {
    background:#251b32;
    color:#eee0ff;
    border-color:#a781dc
}

.skip:focus {
    background:#241934;
    color:white
}

@media(min-width:1550px) {
    .page-content {
        max-width:1350px;
        margin:auto;
        width:100%
    }

}

@media(max-width:1000px) {
    main {
        grid-template-columns:55px minmax(0,1fr);
        gap:20px
    }

    .arcade-rail {
        padding-right:15px
    }

    .hero h1 {
        font-size:76px
    }

    .hero figure {
        padding-left:10px
    }

    .hero {
        gap:15px
    }

    .cards {
        grid-template-columns:repeat(2,1fr)
    }

    .editorial {
        grid-template-columns:1fr 1fr
    }

    .editorial-art {
        display:none
    }

    .editorial>span {
        grid-column:1/-1
    }

    .editorial h2 {
        grid-column:1;
        grid-row:2/4
    }

    .editorial p,.editorial>a {
        grid-column:2
    }

}

@media(max-width:650px) {
    main {
        display:block;
        padding:0 5%
    }

    .arcade-rail {
        position:static;
        flex-direction:row;
        border:0;
        padding:20px 0 0;
        justify-content:space-between;
        gap:10px
    }

    .arcade-rail a {
        font-size:7px
    }

    .arcade-rail span {
        font-size:20px
    }

    .hero {
        grid-template-columns:1fr;
        padding:30px 0;
        gap:30px
    }

    .hero h1 {
        font-size:79px;
        letter-spacing:-5px
    }

    .hero figure {
        width:100%;
        padding:15px 10px 0
    }

    .hero figure img {
        max-height:none
    }

    .orbit-label {
        right:0
    }

    .hero .eyebrow {
        font-size:9px
    }

    .category-bar {
        margin-top:20px;
        gap:8px
    }

    .category-bar a {
        padding:8px 12px;
        font-size:10px
    }

    .category-bar span {
        display:none
    }

    .sectionhead h2 {
        font-size:23px
    }

    .sectionhead .textlink {
        font-size:9px
    }

    .cardart {
        height:150px;
        font-size:48px
    }

    .cardbody {
        padding:14px
    }

    .cardbody h3 {
        font-size:20px
    }

    .cardbody b {
        font-size:10px
    }

    .editorial {
        display:block;
        padding:25px
    }

    .editorial>span {
        display:block;
        margin-bottom:20px
    }

    .editorial h2 {
        margin-bottom:20px
    }

    .editorial p {
        margin-bottom:20px
    }

    .pagehero {
        padding:35px 0 25px;
        background:none
    }

    .pagehero h1 {
        font-size:40px
    }

    .reading h2,.faq h2 {
        font-size:29px
    }

    .topbar {
        font-size:8px;
        letter-spacing:1px
    }

    header {
        padding:18px 5%;
        gap:15px
    }

    header nav {
        padding:12px 0 2px;
        gap:22px
    }

    .display.memory {
        grid-template-columns:repeat(4,55px)
    }

    .sessionbar {
        font-size:8px
    }

    .sessionbar button {
        font-size:9px
    }

}

header .brand {
    text-decoration:none;
    gap:10px;
    font-size:23px;
    font-weight:900;
    line-height:1;
    letter-spacing:-1px;
    white-space:nowrap
}

header .brand b {
    color:#c0a0ff
}

.brand-symbol {
    color:#c0f379;
    font-size:34px
}

.brand small {
    display:block;
    font-size:7px;
    letter-spacing:3px;
    margin-top:6px;
    color:#9f91b2
}

@media(max-width:650px) {
    header .brand {
        font-size:20px
    }

    .brand-symbol {
        font-size:28px
    }

}

/* Home article: semantic table with a stacked layout on narrow screens. */
.home-guide  {
    margin: 60px 0;
}

.guide-heading  {
    max-width: 740px;
    margin-bottom: 28px;
}

.guide-heading h2  {
    font: 800 36px/1.15 Arial, sans-serif;
    letter-spacing: -1px;
}

.guide-heading > p  {
    color: #b6adc5;
}

.article-table-wrap  {
    border: 1px solid #4b3a60;
}

.article-table  {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.article-table caption  {
    text-align: left;
    padding: 18px 24px;
    color: #cdb6ee;
    background: #21182d;
    font-size: 13px;
}

.article-table thead  {
    background: #b995fb;
    color: #241535;
}

.article-table thead th  {
    text-align: left;
    padding: 15px 24px;
    font-size: 13px;
}

.article-table thead th:first-child  {
    width: 26%;
}

.article-table tbody th, .article-table td  {
    padding: 28px 24px;
    vertical-align: top;
    text-align: left;
    border-top: 1px solid #41334f;
}

.article-table tbody th  {
    background: #211a2b;
    border-right: 1px solid #41334f;
}

.article-table tbody tr:nth-child(even) td  {
    background: #19151f;
}

.article-table h3  {
    font: 700 18px/1.4 Arial, sans-serif;
    margin: 12px 0 0;
    color: #eee3ff;
}

.topic-number  {
    color: #c0f379;
    font: 12px monospace;
    letter-spacing: 2px;
}

.article-table p  {
    margin: 0;
    color: #c4bace;
    line-height: 1.9;
    font-size: 15px;
    overflow-wrap: anywhere;
}

@media (max-width: 700px)  {
    .home-guide  {
        margin: 40px 0;
    }

    .guide-heading h2  {
        font-size: 29px;
    }

    .article-table, .article-table tbody, .article-table tr, .article-table tbody th, .article-table td  {
        display: block;
        width: 100%;
    }

    .article-table thead  {
        display: none;
    }

    .article-table caption  {
        display: block;
        padding: 18px;
    }

    .article-table tbody th  {
        border-right: 0;
        padding: 20px 18px 14px;
    }

    .article-table tbody th h3  {
        display: inline;
        margin-left: 12px;
        font-size: 17px;
    }

    .article-table td  {
        padding: 18px;
        border-top: 0;
    }

    .article-table p  {
        font-size: 14px;
        line-height: 1.85;
    }

}