/* Tiny Hammer - SNES theme
   Rename to tinyhammer.css to use it. */



:root{
    

    
    --bg:
        linear-gradient(rgba(0,0,20,.45), rgba(0,0,20,.45)),
        url("https://tinyhammer.neocities.org/supermetroid.png") center / cover fixed,
        #000a24;

    
    --win-top:#3a4fc4;
    --win-bottom:#141c6b;

    
    --log-top:#2b2160;
    --log-bottom:#120c33;

    
    --frame:#f2f4ff;
    --frame-shadow:#050720;
    --ink-shadow:#050830;

    
    --text:#ffffff;
    --text-soft:#c9d0ff;
    --gold:#ffd966;
    --gold-hover:#fff2b3;
    --pink:#ffb3c7;

    --pixel:"Pixelify Sans", "Courier New", monospace;
    --body:"Atkinson Hyperlegible", Verdana, sans-serif;
}

*{
    box-sizing:border-box;
}

html, body{
    margin:0;
    padding:0;
}

body{
    image-rendering:pixelated;
    min-height:100vh;

    background:var(--bg);

    color:var(--text);
    font-family:var(--body);
    font-size:16px;
    line-height:1.6;
}

img{
    image-rendering:pixelated;
}

a{
    color:var(--gold);
}

a:hover{
    color:var(--gold-hover);
}

a:focus-visible{
    outline:2px dashed var(--gold);
    outline-offset:3px;
}

p{
    margin:0 0 12px;
}

sub{
    display:block;
    margin-top:4px;

    color:var(--text-soft);
    font-size:13px;
    font-style:italic;
    line-height:1.5;
    vertical-align:baseline;
}

.page{
    max-width:1140px;
    margin:0 auto;
    padding:18px 16px 40px;
}

.win{
    position:relative;
    min-width:0;

    padding:16px 18px;

    background:linear-gradient(to bottom, var(--win-top), var(--win-bottom));

    border:3px solid var(--frame);
    border-radius:7px;

    box-shadow:
        0 0 0 2px var(--frame-shadow),
        inset 0 0 0 2px #0a1050,
        4px 4px 0 2px rgba(0,0,0,.45);
}

.win > :last-child{
    margin-bottom:0;
}

.winTitle{
    margin:0 0 10px;

    font-family:var(--pixel);
    font-weight:600;
    font-size:21px;
    line-height:1.2;
    color:var(--text);

    text-shadow:2px 2px 0 var(--ink-shadow);
}

.win.logWin{
    background:linear-gradient(to bottom, var(--log-top), var(--log-bottom));
}

.col{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
}

.smallNote{
    color:var(--text-soft);
    font-size:13px;
    line-height:1.5;
}

.banner{
    margin:0 0 18px;
    text-align:center;
}

.banner a{
    display:inline-block;
}

.banner img{
    display:block;
    width:100%;
    max-width:420px;
    margin:0 auto;

    image-rendering:auto;
    filter:drop-shadow(4px 4px 0 rgba(0,0,0,.5));
}

.banner.small img{
    max-width:300px;
}

.commandList{
    list-style:none;
    margin:0;
    padding:0;
}

.commandList a{
    position:relative;

    display:flex;
    align-items:center;
    gap:8px;

    padding:6px 0 6px 28px;

    color:var(--text);
    text-decoration:none;

    font-family:var(--pixel);
    font-size:18px;
    line-height:1.2;

    text-shadow:2px 2px 0 var(--ink-shadow);
}

.commandList img{
    width:18px;
    height:18px;
    image-rendering:auto;
}

.commandList a::before{
    content:"☞";

    position:absolute;
    left:0;
    top:50%;

    font-size:20px;
    color:var(--text);

    transform:translateY(-55%);
    opacity:0;
}

.commandList a:hover::before,
.commandList a:focus-visible::before{
    opacity:1;
    animation:point .6s steps(2) infinite;
}

.commandList a:focus-visible{
    outline:none;
}

@keyframes point{
    from{ transform:translate(0,-55%); }
    to  { transform:translate(3px,-55%); }
}

.commandList .featured{
    color:var(--gold);
    font-size:20px;
}

.commandList .featured::before{
    color:var(--gold);
}

.commandList .selected::before{
    opacity:1;
}

.commandList .divider{
    height:2px;
    margin:6px 0;
    background:rgba(255,255,255,.25);
}

.menuButton,
.readMore,
.navButton{
    display:block;

    padding:9px 12px;

    background:#0a1050;

    border:2px solid var(--frame);
    border-radius:5px;

    color:var(--text);
    text-align:center;
    text-decoration:none;

    font-family:var(--pixel);
    font-size:17px;
    line-height:1.3;

    box-shadow:3px 3px 0 var(--ink-shadow);
}

.menuButton:hover,
.readMore:hover,
.navButton:hover{
    background:#24319a;
    color:var(--gold);
}

.menuButton:active,
.readMore:active,
.navButton:active{
    transform:translate(2px,2px);
    box-shadow:1px 1px 0 var(--ink-shadow);
}

.readMore{
    width:max-content;
    max-width:100%;
    margin:14px auto 2px;
}

.layout{
    display:grid;
    grid-template-columns:220px minmax(0,1fr) 230px;
    gap:16px;
    align-items:stretch;
}

.gifWin{
    flex:1;
    min-height:170px;

    padding:8px;

    display:flex;
}

.gifFrame{
    position:relative;
    flex:1;

    overflow:hidden;
    border-radius:3px;
    background:#050830;
}

.gifFrame img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
}

.dialogue{
    padding-top:24px;
}

.nameTab{
    position:absolute;
    top:-17px;
    left:16px;

    padding:3px 14px 4px;

    background:var(--win-top);

    border:3px solid var(--frame);
    border-radius:6px;

    box-shadow:0 0 0 2px var(--frame-shadow);

    font-family:var(--pixel);
    font-size:16px;
    line-height:1.3;
    color:var(--gold);
}

.dialogue .winTitle{
    font-size:26px;
}

.dialogue p{
    max-width:62ch;
    font-size:17px;
}

.party{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:18px;

    margin-top:14px;
    padding-top:10px;

    border-top:2px solid rgba(255,255,255,.18);
}

.party img{
    height:48px;
    width:auto;
}

.dialogue::after{
    content:"▼";

    position:absolute;
    right:16px;
    bottom:8px;

    color:var(--text);
    font-size:13px;

    animation:blink 1s steps(1) infinite;
}

@keyframes blink{
    50%{ opacity:0; }
}

.questWin{
    flex:1;
    display:flex;
    flex-direction:column;
}

.questHead{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:4px 12px;

    margin-bottom:14px;
    padding-bottom:8px;

    border-bottom:2px solid rgba(255,255,255,.25);
}

.questHead .winTitle{
    margin:0;
}

.questDate{
    color:var(--text-soft);
    font-size:13px;
}

.questBody{
    flex:1;

    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    gap:20px;
    align-items:center;
}

.boxArtLink{
    display:block;
    line-height:0;
}

.boxArt{
    width:150px;
    height:auto;

    border:3px solid var(--frame);
    border-radius:4px;

    box-shadow:0 0 0 2px var(--frame-shadow), 4px 4px 0 2px rgba(0,0,0,.45);

    image-rendering:auto;
}

.questTitle{
    margin:0 0 10px;

    font-family:var(--pixel);
    font-weight:600;
    font-size:27px;
    line-height:1.15;
    color:var(--gold);

    text-shadow:2px 2px 0 var(--ink-shadow);
}

.stats{
    display:grid;
    grid-template-columns:max-content 1fr;
    gap:2px 14px;

    margin:0 0 12px;

    font-family:var(--pixel);
    font-size:16px;
}

.stats dt{
    color:var(--text-soft);
}

.stats dd{
    margin:0;
}

.questFoot{
    margin-top:12px;
    padding-top:8px;

    border-top:2px dotted rgba(255,255,255,.3);

    color:var(--text-soft);
    font-size:14px;
    font-style:italic;
}

.latestWin{
    flex:1;
    display:flex;
    flex-direction:column;
}

.latestWin .menuButton{
    margin-top:auto;
}

.latestLabel{
    align-self:flex-start;

    margin:0 0 10px;
    padding:1px 8px;

    background:var(--gold);
    border-radius:3px;

    color:var(--log-bottom);
    font-family:var(--pixel);
    font-size:14px;
}

.latestTop{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:10px;
}

.latestIcon{
    width:42px;
    height:42px;
    flex-shrink:0;

    object-fit:contain;

    padding:3px;
    background:var(--log-bottom);
    border:2px solid rgba(255,255,255,.35);
    border-radius:3px;
}

.latestName{
    margin:0;

    font-family:var(--pixel);
    font-size:17px;
    line-height:1.15;
}

.latestTag{
    margin:2px 0 0;

    color:var(--text-soft);
    font-size:12px;
    line-height:1.3;
}

.latestShot{
    display:block;

    width:100%;
    height:auto;

    border:2px solid rgba(255,255,255,.35);
    border-radius:3px;

    image-rendering:auto;
}

.latestTeaserText{
    margin:10px 0 14px;
    font-size:14px;
    line-height:1.5;
}

.bottomRow{
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    gap:16px;
    margin-top:16px;
    align-items:stretch;
}

.siteButton{
    display:block;
    margin:4px auto 10px;
}

.codeBox{
    margin-bottom:8px;
    padding:8px;

    background:#070a3a;
    border:2px solid rgba(255,255,255,.3);
    border-radius:3px;

    color:var(--text-soft);
    font-family:"Courier New", monospace;
    font-size:12px;
    line-height:1.4;
    word-break:break-all;
}

.links{
    text-align:center;
}

.links .winTitle{
    font-size:19px;
}

.inventory{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;

    margin:6px 0 4px;
}

.inventory a,
.inventory > img{
    display:block;
    line-height:0;
}

.inventory img{
    width:88px;
    height:31px;
}

.inventory a{
    padding:3px;
    border:2px solid transparent;
    border-radius:3px;
}

.inventory a:hover,
.inventory a:focus-visible{
    border-color:var(--gold);
    outline:none;
}

.rule{
    height:2px;
    margin:16px 0 14px;
    background:rgba(255,255,255,.2);
}

.shell{
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    gap:16px;
    align-items:start;
}

.shell.three{
    grid-template-columns:230px minmax(0,1fr) 220px;
}

.pageTitle{
    margin:0;

    font-family:var(--pixel);
    font-weight:600;
    font-size:30px;
    line-height:1.2;
    color:var(--gold);

    text-shadow:3px 3px 0 var(--ink-shadow);
}

.titleWin{
    margin-bottom:16px;
}

.sideTitle{
    margin:0 0 8px;

    font-family:var(--pixel);
    font-weight:600;
    font-size:19px;
    line-height:1.2;
    color:var(--text);

    text-shadow:2px 2px 0 var(--ink-shadow);
}

.side ul:not(.commandList){
    margin:8px 0 0;
    padding-left:20px;
}

.side li{
    margin-bottom:4px;
}

.sideImg{
    padding:8px;
}

.sideImg img{
    display:block;
    width:100%;
    border-radius:3px;
}

.latestLog{
    margin-bottom:16px;
}

.latestHeader{
    display:inline-block;

    margin:0 0 12px;
    padding:1px 10px;

    background:var(--gold);
    border-radius:3px;

    color:var(--log-bottom);
    font-family:var(--pixel);
    font-size:15px;
}

.latestTitle{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:12px;
}

.latestTitle img{
    width:58px;
    height:58px;
    flex-shrink:0;

    object-fit:contain;

    padding:4px;
    background:var(--log-bottom);
    border:2px solid rgba(255,255,255,.35);
    border-radius:4px;
}

.latestTitle h2{
    margin:0;

    font-family:var(--pixel);
    font-weight:600;
    font-size:27px;
    line-height:1.15;
    color:var(--gold);

    text-shadow:2px 2px 0 var(--ink-shadow);
}

.latestTitle p{
    margin:3px 0 0;
    color:var(--text-soft);
    font-size:14px;
}

.latestImage{
    display:block;

    width:100%;
    max-width:680px;
    height:auto;

    margin:12px auto;

    border:3px solid var(--frame);
    border-radius:4px;

    box-shadow:0 0 0 2px var(--frame-shadow);

    image-rendering:auto;
}

.latestMeta,
.gameMeta{
    display:flex;
    flex-wrap:wrap;
    gap:4px 16px;

    padding:8px 10px;

    background:rgba(5,8,48,.55);
    border-radius:4px;

    font-family:var(--pixel);
    font-size:15px;
}

.latestMeta strong,
.metaLabel{
    color:var(--text-soft);
    font-weight:400;
}

.metaItem{
    display:flex;
    gap:6px;
}

.latestText{
    margin-top:12px;
}

.latestText p{
    font-size:16px;
    line-height:1.65;
}

.archiveTitle{
    margin:0 0 12px;
    padding:8px 14px;

    font-family:var(--pixel);
    font-weight:600;
    font-size:19px;
    line-height:1.2;

    text-shadow:2px 2px 0 var(--ink-shadow);
}

.impressionGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    align-items:start;
}

.impressionGrid.masonry{
    display:flex;
    gap:16px;
    align-items:flex-start;
}

.masonryCol{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.titleRow{
    display:grid;
    grid-template-columns:52px 1fr 52px;
    align-items:center;
    gap:8px;

    margin-bottom:10px;
}

.gameLogo{
    width:52px;
    height:52px;

    object-fit:contain;

    padding:4px;
    background:#0a1050;
    border:2px solid rgba(255,255,255,.4);
    border-radius:4px;
}

.impressionTitle{
    margin:0;

    font-family:var(--pixel);
    font-weight:600;
    font-size:22px;
    line-height:1.2;
    color:var(--gold);
    text-align:center;

    text-shadow:2px 2px 0 var(--ink-shadow);
}

.imageLink{
    display:block;
    line-height:0;
}

.impressionImage{
    display:block;

    width:100%;
    max-width:460px;
    height:auto;

    margin:10px auto 12px;

    border:3px solid var(--frame);
    border-radius:4px;

    box-shadow:0 0 0 2px var(--frame-shadow);

    image-rendering:auto;
}

.impressionBox{
    margin-top:12px;
}

.impressionBox p{
    font-size:15px;
    line-height:1.6;
}

.projectNote{
    padding:6px 10px;

    background:rgba(5,8,48,.55);
    border-left:4px solid var(--pink);
    border-radius:3px;

    color:var(--pink);
    font-size:13px !important;
    font-weight:700;
}

.aboutText h2{
    margin:26px 0 10px;

    font-family:var(--pixel);
    font-weight:600;
    font-size:22px;
    line-height:1.25;
    color:var(--gold);

    text-shadow:2px 2px 0 var(--ink-shadow);
}

.aboutText p{
    max-width:68ch;
    font-size:17px;
    line-height:1.7;
}

.artImage{
    display:block;

    width:70%;
    max-width:500px;
    height:auto;

    margin:0 auto 18px;

    border:3px solid var(--frame);
    border-radius:4px;

    box-shadow:0 0 0 2px var(--frame-shadow);
}

.cidSprite{
    height:40px;
    width:auto;
    vertical-align:middle;
}

.scrollText p{
    max-width:70ch;
    margin-left:auto;
    margin-right:auto;

    font-size:17px;
    line-height:1.75;
}

.scrollText sub{
    max-width:70ch;
    margin:0 auto 14px;
}

.reviewImg{
    display:block;

    width:95%;
    max-width:460px;
    height:auto;

    margin:20px auto;

    border:3px solid var(--frame);
    border-radius:4px;

    box-shadow:0 0 0 2px var(--frame-shadow), 4px 4px 0 2px rgba(0,0,0,.4);

    image-rendering:auto;
}

.imageRow{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;

    margin:22px auto;
}

.imageRow img{
    width:calc(50% - 7px);
    max-width:380px;
    height:auto;

    border:3px solid var(--frame);
    border-radius:4px;

    box-shadow:0 0 0 2px var(--frame-shadow);

    image-rendering:auto;
}

.scoreStack{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.scoreStack img{
    width:100%;
    max-width:180px;
    height:auto;

    border:3px solid var(--frame);
    border-radius:4px;

    box-shadow:0 0 0 2px var(--frame-shadow);
}

.infoImage{
    display:block;
    width:100%;
    height:auto;

    border:3px solid var(--frame);
    border-radius:4px;

    image-rendering:auto;
}

.smallText{
    margin:0;
    font-size:15px;
    line-height:1.6;
}

.smallText strong{
    font-family:var(--pixel);
    font-weight:400;
    color:var(--text-soft);
}

.comingSoon{
    max-width:540px;
    margin:0 auto;
    text-align:center;
}

.comingSoon img{
    display:block;
    width:100%;
    margin-top:14px;

    border:3px solid var(--frame);
    border-radius:4px;
}

/* SNES THEME */

:root{
    --win-top:#d6d6de;
    --win-bottom:#b9b9c6;
    --log-top:#5a4a9c;
    --log-bottom:#3a2f6e;
    --frame:#6b6b7d;
    --frame-shadow:#2a2438;
    --ink-shadow:transparent;
    --text:#1e1a2e;
    --text-soft:#4d4766;
    --gold:#5a4a9c;
    --gold-hover:#7a68c4;
}

.win{
    border-radius:12px;
    box-shadow:0 0 0 2px var(--frame-shadow), 4px 4px 0 2px rgba(0,0,0,.35);
}

.winTitle,
.sideTitle,
.pageTitle,
.archiveTitle,
.impressionTitle,
.questTitle,
.aboutText h2{
    color:#3a2f6e;
}

.win.logWin{
    color:#ffffff;
}

.logWin .latestTitle h2,
.logWin .latestName,
.logWin p{
    color:#ffffff;
}

.logWin .latestTitle p,
.logWin .latestTag,
.logWin .smallNote,
.logWin .latestMeta strong{
    color:#d6d0f5;
}

.latestHeader,
.latestLabel{
    background:#d6d6de;
    color:#3a2f6e;
}

/* the four SNES button colours down the menu */
.commandList li:nth-child(1) a::before{ color:#d92b2b; }
.commandList li:nth-child(2) a::before{ color:#f2c12e; }
.commandList li:nth-child(3) a::before{ color:#2fa84f; }
.commandList li:nth-child(4) a::before{ color:#2b5fd9; }

.commandList a::before{
    content:"●";
    opacity:1;
}

.commandList .featured{
    color:#3a2f6e;
}

.menuButton,
.readMore,
.navButton{
    background:#5a4a9c;
    color:#ffffff;
    border-color:#3a2f6e;
    border-radius:20px;
}

.menuButton:hover,
.readMore:hover,
.navButton:hover{
    background:#7a68c4;
    color:#ffffff;
}

.nameTab{
    background:#5a4a9c;
    color:#ffffff;
}

.gameMeta,
.latestMeta,
.codeBox{
    background:rgba(90,74,156,.15);
    color:var(--text);
}

.logWin .latestMeta{
    background:rgba(0,0,0,.25);
    color:#ffffff;
}

.gameLogo{
    background:#ffffff;
    border-color:#6b6b7d;
}

.projectNote{
    color:#a3122e;
    border-left-color:#d92b2b;
}

a{
    color:#5a4a9c;
}

.logWin a{
    color:#f2c12e;
}

*{
    scrollbar-color:#5a4a9c #d6d6de;
}

@media (min-width:701px){

    body.inner{
        height:100vh;
        overflow:hidden;
    }

    body.inner .page{
        height:100vh;

        display:flex;
        flex-direction:column;

        padding-bottom:14px;
    }

    body.inner .banner{
        flex-shrink:0;
        margin-bottom:12px;
    }

    body.inner .banner.small img{
        max-width:240px;
    }

    body.inner .titleWin{
        flex-shrink:0;
        margin-bottom:14px;
    }

    body.inner .shell{
        flex:1;
        min-height:0;
        align-items:stretch;
    }

    
    body.inner .shell > .col{
        min-height:0;
        overflow-y:auto;

        padding:3px 12px 12px 3px;
        margin:-3px -12px 0 -3px;
    }

    
    body.inner .shell.three{
        grid-template-columns:200px minmax(0,1fr) 190px;
    }

    body.inner .shell.three .infoCol{
        grid-column:auto;
        display:flex;
    }
}



@media (max-width:980px){

    
    .shell.three{
        grid-template-columns:220px minmax(0,1fr);
    }

    .shell.three .infoCol{
        grid-column:1 / -1;

        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
        align-items:start;
    }
}

@media (max-width:900px){

    .layout{
        grid-template-columns:200px minmax(0,1fr);
    }

    .rightCol{
        grid-column:1 / -1;

        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
        align-items:start;
    }

    .impressionGrid{
        grid-template-columns:1fr;
    }
}

@media (max-width:700px){

    .page{
        padding:14px 16px 30px;
    }

    .banner img{
        max-width:280px;
    }

    .banner.small img{
        max-width:240px;
    }

    
    .layout{
        display:flex;
        flex-direction:column;
    }

    .centerCol{ order:1; }
    .leftCol  { order:2; }
    .rightCol { order:3; display:flex; align-items:stretch; }

    .gifWin,
    .alsoButtons,
    .hideMobile{
        display:none;
    }

    .bottomRow{
        grid-template-columns:1fr;
    }

    
    .shell,
    .shell.three{
        display:flex;
        flex-direction:column;
    }

    .shell .side{
        width:100%;
    }

    
    .shell.three .infoCol{
        display:none;
    }

    .commandList{
        display:grid;
        grid-template-columns:1fr 1fr;
        column-gap:10px;
    }

    .commandList li.wide,
    .commandList .divider{
        grid-column:1 / -1;
    }

    .commandList a{
        font-size:17px;
    }

    .dialogue .winTitle{
        font-size:22px;
    }

    .dialogue p{
        font-size:16px;
    }

    .party img{
        height:38px;
    }

    .questBody{
        grid-template-columns:96px minmax(0,1fr);
        gap:14px;
    }

    .boxArt{
        width:96px;
    }

    .questTitle{
        font-size:21px;
    }

    .pageTitle{
        font-size:24px;
    }

    .latestTitle h2{
        font-size:22px;
    }

    .scrollText p,
    .aboutText p{
        font-size:16px;
    }

    .imageRow img{
        width:100%;
    }

    .artImage{
        width:100%;
    }

    .scoreStack{
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
    }

    .scoreStack img{
        width:45%;
        max-width:160px;
    }
}

@media (prefers-reduced-motion:reduce){

    .dialogue::after,
    .commandList a:hover::before,
    .commandList a:focus-visible::before{
        animation:none;
    }
}