/* General styling */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body {
    margin: 0;
    font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
    background-color: rgb(164,230,157);
    background-image: url("Graphics/fabricbg.png");
}
body * {
    -webkit-box-sizing: border-box; /* fixes a borked detail view in pre-Safari 5.1. Opera supports this since version 7. */
    box-sizing: border-box;
}

table { border-spacing: 0; }
td { padding: 0; }





/* Top bar */
#top {
    position: absolute; top: 0; z-index: 1;
    width: 100%; height: 28px;
    background-color: rgb(57,177,44); color: white;
}
#top a { color: white; }
#top table { width: 100%; height: 100%; }
#top td { padding: 0 8px; }
#spacer { width: 100%; }
#top #credits { padding: 0; }
#credits img { display: block; }





/* Puzzle navigator widget */
#master {
    position: absolute;
    /* Fix for calc() on mobile devices: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ */
    top: max(28px, calc(28px + ((100vh - 28px) / 2) - 180px) ); /*fallback*/
    top: max(28px, calc(28px + ((var(--vh,100vh) - 28px) / 2) - 180px) );
    left: max(0px, calc((100vw / 2) - 384px) ); /*NOTE: Needs to be "0px", not just "0", otherwise max() won't work!!!*/
    width: 768px; height: 360px;/*don't listen to that "Maban" website, apparently the viewport for the Internet Channel is GREATER than 350px tall!!! It's actually 388px tall in widescreen!!!*/
}
.pad {
    height: 8px;
    border: 1px solid rgb(128,128,128);
    background-image: url("Graphics/padbg.png");
    /*Notes on images: 
      - Opera before 9.5 (i.e. Internet Channel) does NOT support background-size, even with a vendor prefix. In general, any images above 1x look pixelly in the Internet Channel, so make everything 1x for consistency.
      - Make sure total size of all files and graphics is BELOW 16MB!!! Otherwise the browser will run out of memory!!! No ginormous 1MB images!!! And maybe fine-tune the Inkscape settings to export to the maximum amount of compression.
      - IE6 support is a complete fever dream. It has no transparent PNG support, so it's doomed from the start. Besides, Mac and Nintendo browsers are my priority here—it's a conspiracy to make Windows look even shittier than it already is. No wait I'VE SAID TOO MUCH—
    */
}



/* ~ Logo and switcher buttons */
#controls { display: block; }
#controls td * { display: block; }

#logo .pad { border-right: 0; }

#switcher {
    width: 100%;
    vertical-align: bottom;
}
#switcher div {
    height: 40px; padding: 1px;
    background-image: url("Graphics/switcherbg.png");
}
#switcher div img {
    display: inline; margin: 3px 0 0 3px;
}
#switcher div img:hover { cursor: pointer; }



/* ~ Navigation area and detail view */
#viewer {
    position: relative;
    height: 280px;
}
#navigation, #detail {
    position: absolute; height: 100%;
    border: solid rgb(128,128,128);
    border-width: 0 1px;
}

#navigation {
    left: 0; width: 494px;
    overflow: auto;
    background-color: rgb(0,101,255);
    background-image: url("Graphics/pluckingbg.png");
    color: white;
}
#navigation table { height: 256px; }
#navigation td { vertical-align: top; }
#navigation div { height: 64px; }
#navigation img { display: block; width: 46px; }

#detail {
    right: 0;
    padding: 16px;
    background-color: rgb(224,224,255);
    background-image: url("Graphics/detailbg.png");
}
#detail #video { margin-bottom: 16px; }
#video video { display: block; background-color: black; }
#novideo {
    width: 240px; height: 160px; padding: 16px;
    background-color: black; color: white;
    background-image: url("Graphics/novideobg.png");
    text-align: center; font-size: small;
}
#difficulty { width: 240px; }
#difficulty td img {
    vertical-align: top;
    /* Source of this unusual fix:
    https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
    */
}
#flowers { text-align: right; }



/* ~ YouTube link */
#yt {
    height: 16px; line-height: 16px; padding-right: 4px;
    font-size: x-small; text-align: right;
}