*, *:before, *:after { box-sizing: border-box; }

/* Times New Roman carries no CJK glyphs, so Korean/Chinese/Japanese park names
   drop into the OS serif fallback and read heavier than everything around them.
   Re-declaring the family for just those ranges routes them to the system
   sans-serif; every other character still comes from the real Times.
   Chrome resolves local() against PostScript names, not family names, so each
   face lists the PostScript name first and the family name after it for the
   browsers that want that instead. */
@font-face {
    font-family: 'Times New Roman';
    src: local('AppleSDGothicNeo-Regular'), local('Apple SD Gothic Neo'),
         local('MalgunGothic'), local('Malgun Gothic'),
         local('NotoSansKR-Regular'), local('Noto Sans KR'),
         local('NotoSansCJKkr-Regular'), local('Noto Sans CJK KR');
    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7FF;
}
@font-face {
    font-family: 'Times New Roman';
    src: local('HiraginoSans-W3'), local('Hiragino Sans'),
         local('HiraKakuProN-W3'), local('Hiragino Kaku Gothic ProN'),
         local('YuGothicUI-Regular'), local('Yu Gothic UI'),
         local('NotoSansJP-Regular'), local('Noto Sans JP'),
         local('NotoSansCJKjp-Regular'), local('Noto Sans CJK JP');
    unicode-range: U+3040-30FF, U+31F0-31FF;
}
@font-face {
    font-family: 'Times New Roman';
    src: local('PingFangSC-Regular'), local('PingFang SC'),
         local('MicrosoftYaHei'), local('Microsoft YaHei'),
         local('NotoSansSC-Regular'), local('Noto Sans SC'),
         local('NotoSansCJKsc-Regular'), local('Noto Sans CJK SC'),
         local('HiraginoSans-W3'), local('Hiragino Sans');
    unicode-range: U+2E80-2EFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

html {
    background-color: #78b800;
}
body.page {
    margin: 0;
    padding: 90px 20px 120px;
    background-color: #78b800;
    color: #000;
    font-family: 'Times New Roman', Times, serif;
    -webkit-font-smoothing: antialiased;
}
body.page.centered {
    text-align: center;
}

nav.page-nav {
    position: fixed;
    bottom: 12px;
    left: 12px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 9px;
    padding: 3px 9px;
    background-color: #78b800;
    border: 1px solid #000;
    border-radius: 6px;
    font-family: 'Times New Roman', Times, serif;
    z-index: 100;
}
nav.page-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    font-size: 16px;
    line-height: 1;
    color: #000;
    background: transparent;
    border: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}
nav.page-nav a.current {
    font-weight: bold;
}
/* hand-drawn question mark illustration, same size as the player's ? */
nav.page-nav a.nav-q {
    position: relative;
    width: 9px;
    height: 18px;
}
nav.page-nav a.nav-q::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    -webkit-mask: url('../images/question-mark.svg') no-repeat center / contain;
    mask: url('../images/question-mark.svg') no-repeat center / contain;
}
/* stack the nav vertically on mobile, each item its own pill */
@media (max-width: 700px) {
    nav.page-nav {
        flex-flow: column nowrap;
        align-items: flex-start;
        gap: 5px;
        background: transparent;
        border: 0;
        padding: 0;
    }
    nav.page-nav a {
        background-color: #78b800;
        border: 1px solid #000;
        border-radius: 6px;
        padding: 5px 11px;
    }
    nav.page-nav a.nav-q {
        width: auto;
        height: auto;
    }
    nav.page-nav a.nav-q::before {
        position: static;
        display: block;
        width: 9px;
        height: 18px;
    }
}

h1 {
    font-size: clamp(40px, 8vw, 96px);
    line-height: 1.05;
    margin: 0 0 12px;
    font-weight: normal;
    color: #000;
    font-family: 'Times New Roman', Times, serif;
}
.count {
    font-size: calc(0.55 * clamp(26px, 4.5vw, 54px));
    margin: 0 0 70px;
    opacity: .85;
}

/* parks page */
#list {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* inline-block so only the text is the hover/click target, not the whole row */
#list a.entry {
    display: inline-block;
    color: #000;
    text-decoration: none;
    font-size: clamp(26px, 4.5vw, 54px);
    line-height: 1.3;
}
#list a.entry:hover {
    text-decoration: underline;
}
/* keep the location / count out of the park-name hover underline */
#list .loc,
#list .x {
    display: inline-block;
    font-size: .55em;
    opacity: .8;
}
#list .loc {
    margin-left: .6em;
}
#list .x {
    margin-left: .4em;
}

/* minutes page */
#minutes .minute {
    display: block;
    font-size: clamp(34px, 6vw, 76px);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    color: rgba(0, 0, 0, 0.3);
    text-decoration: none;
}
#minutes a.minute {
    color: #000;
    text-decoration: none;
}
#minutes a.minute:hover {
    text-decoration: underline;
}
/* arriving from the clock on the player: ring the minute you came from.
   (a class, not :target — the list is fetched, so by the time these exist the
   browser has already resolved the fragment and won't match them) */
#minutes .minute.here {
    outline: 2px solid #000;
    outline-offset: 4px;
    border-radius: 4px;
}
#minutes .pk {
    display: inline-block;
    font-size: .55em;
    opacity: .8;
    margin-left: .8em;
}