:root {
  --gc-yellow: #FFFF00;
  --gc-white:  #FFFFFF;
  --gc-gold:   #FFD700;
  --gc-silver: #C0C0C0;
  --gc-gray:   #999999;
  --gc-lcd:    #22e222;
  --gc-lcd-glow: rgba(34,226,34,0.5);
  --gc-lcd-glow-bright: rgba(34,226,34,0.55);
  --gc-lcd-glow-dim: rgba(34,226,34,0.45);
  --gc-black:  #000000;
  --gc-green:  #00FF00;
  --gc-red:    #FF0000;
  --gc-cyan:   #00FFFF;
}

html { box-sizing: border-box; overflow-y: scroll; }
*, *::before, *::after { box-sizing: inherit; }

/* pixel strike webfonts: verdana/tahoma renders traced to on-grid outlines, aliased on every platform */
@font-face { font-family: 'GCV8';  src: url(font/GCV8.ttf);  font-weight: 400; font-display: block; }
@font-face { font-family: 'GCV9';  src: url(font/GCV9.ttf);  font-weight: 400; font-display: block; }
@font-face { font-family: 'GCV10'; src: url(font/GCV10.ttf); font-weight: 400; font-display: block; }
@font-face { font-family: 'GCV12'; src: url(font/GCV12.ttf); font-weight: 400; font-display: block; }
@font-face { font-family: 'GCV14'; src: url(font/GCV14B.ttf); font-weight: 700; font-display: block; }
@font-face { font-family: 'GCV16'; src: url(font/GCV16.ttf); font-weight: 400; font-display: block; }
@font-face { font-family: 'GCV16'; src: url(font/GCV16B.ttf); font-weight: 700; font-display: block; }
@font-face { font-family: 'GCV16'; src: url(font/GCV16I.ttf); font-weight: 400; font-style: italic; font-display: block; }
/* per-symbol line growth for 16px text, matching chromium's native rendering
   (plain line = 18): stars/check/heavy-heart grow the line to 21 (.gc-tall), diamond
   and small-heart to 20 (.gc-med). SEPARATE families (not unicode-range on GCV16)
   because gecko builds the line strut from the whole family, so a taller face inside
   GCV16 would inflate every line. applied only to spans holding those symbols so the
   line grows exactly where chromium does. 16px only (the sole size with symbols). */
@font-face { font-family: 'GCV16sym'; src: url(font/GCV16S.ttf); font-weight: 400; font-display: block; }
@font-face { font-family: 'GCV16med'; src: url(font/GCV16D.ttf); font-weight: 400; font-display: block; }
.gc-tall { font-family: 'GCV16sym', 'GCV16', Verdana, Arial, Helvetica, sans-serif; }
.gc-med  { font-family: 'GCV16med', 'GCV16', Verdana, Arial, Helvetica, sans-serif; }
@font-face { font-family: 'GCV18'; src: url(font/GCV18.ttf); font-weight: 400; font-display: block; }
@font-face { font-family: 'GCV18'; src: url(font/GCV18B.ttf); font-weight: 700; font-display: block; }
@font-face { font-family: 'GCV18'; src: url(font/GCV18BI.ttf); font-weight: 700; font-style: italic; font-display: block; }
@font-face { font-family: 'GCV24'; src: url(font/GCV24B.ttf); font-weight: 700; font-display: block; }
@font-face { font-family: 'GCV24'; src: url(font/GCV24BI.ttf); font-weight: 700; font-style: italic; font-display: block; }
@font-face { font-family: 'GCV64'; src: url(font/GCV64B.ttf); font-weight: 700; font-display: block; }
@font-face { font-family: 'GCT8';  src: url(font/GCT8.ttf);  font-weight: 400; font-display: block; }
@font-face { font-family: 'GCT9';  src: url(font/GCT9.ttf);  font-weight: 400; font-display: block; }
@font-face { font-family: 'GCT10'; src: url(font/GCT10.ttf); font-weight: 400; font-display: block; }
@font-face { font-family: 'GCT11'; src: url(font/GCT11.ttf); font-weight: 400; font-display: block; }
@font-face { font-family: 'GCT11'; src: url(font/GCT11B.ttf); font-weight: 700; font-display: block; }

/* common text sizing, strike per size so glyph edges stay on the pixel grid */
.text-large { font-size: 18px; font-family: 'GCV18', Verdana, Arial, Helvetica, sans-serif; }

/* shared positioning rules, used by every page */
#starsCanvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    contain: layout style paint;
}

#keygen { position: fixed; left: 0; bottom: 0; z-index: 60; }

/* animated cursor, 14-frame gif-style cursor animation, identical on all pages */
@keyframes ani-cur {
  0%     { cursor: url(image/cursor/cur_00.png), default; }
  7.14%  { cursor: url(image/cursor/cur_01.png), default; }
  14.29% { cursor: url(image/cursor/cur_02.png), default; }
  21.43% { cursor: url(image/cursor/cur_03.png), default; }
  28.57% { cursor: url(image/cursor/cur_04.png), default; }
  35.71% { cursor: url(image/cursor/cur_05.png), default; }
  42.86% { cursor: url(image/cursor/cur_06.png), default; }
  50%    { cursor: url(image/cursor/cur_07.png), default; }
  57.14% { cursor: url(image/cursor/cur_08.png), default; }
  64.29% { cursor: url(image/cursor/cur_09.png), default; }
  71.43% { cursor: url(image/cursor/cur_10.png), default; }
  78.57% { cursor: url(image/cursor/cur_11.png), default; }
  85.71% { cursor: url(image/cursor/cur_12.png), default; }
  92.86% { cursor: url(image/cursor/cur_13.png), default; }
  100%   { cursor: url(image/cursor/cur_00.png), default; }
}

body { animation: ani-cur 1s infinite; }

/* link styling, identical on all pages */
a { color: var(--gc-white); text-decoration: none; }
a:hover { color: var(--gc-yellow); }
a:focus-visible { color: var(--gc-yellow); outline: 1px solid var(--gc-yellow); outline-offset: 2px; }

/* body base, identical on all pages */
body {
    background: url(image/stars.gif) repeat;
    font-family: 'GCV16', Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-kerning: normal;
    font-variant-ligatures: none;
    /* not optimizeSpeed: gecko disables kerning under it, and our kern tables
       carry integer-pixel pairs that reproduce native spacing on the grid */
    text-rendering: auto;
    color: var(--gc-white);
    margin: 0;
    padding: 0;
}

/* logo, identical on all pages */
.logo {
    width: 400px;
    margin: 100px auto 0;
    position: relative;
}

/* sparkle decorations behind logo, identical on all pages */
#sparkle1 { position: absolute; z-index: 1; top: 82px; left: 47px; }
#sparkle2 { position: absolute; z-index: 1; top: 47px; left: 251px; }

/* footer, identical on all pages */
.footer {
    margin: auto;
    width: 500px;
}

/* floatbox, identical on all pages */
.floatbox {
    margin: auto;
    width: 400px;
    position: relative;
}

/* centered box base, pages override width */
.content-box {
    margin: auto;
    position: relative;
}

/* star gif CSS sprites, 4-frame twinkle, compositor-driven */
@keyframes spr-twinkle{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.spr-star,.spr-starred,.spr-starblue,.spr-starpurple{display:inline-block;overflow:hidden;vertical-align:baseline;}
.spr-star::before,.spr-starred::before,.spr-starblue::before,.spr-starpurple::before{content:"";display:block;animation:spr-twinkle 2s steps(4) infinite;}
.spr-star{width:41px;height:41px} .spr-star::before{width:164px;height:41px;background:url('image/star_sprite.png') 0 0 no-repeat}
.spr-starred{width:21px;height:21px} .spr-starred::before{width:84px;height:21px;background:url('image/starred_sprite.png') 0 0 no-repeat}
.spr-starblue{width:31px;height:31px} .spr-starblue::before{width:124px;height:31px;background:url('image/starblue_sprite.png') 0 0 no-repeat}
.spr-starpurple{width:25px;height:25px} .spr-starpurple::before{width:100px;height:25px;background:url('image/starpurple_sprite.png') 0 0 no-repeat}

/* NEW gifs CSS sprite, loops forever, compositor-driven */
@keyframes new-burst{from{transform:translateX(0);}to{transform:translateX(-348px);}}
.new-badge{display:inline-block;position:absolute;top:-15px;pointer-events:none;
  width:87px;height:53px;overflow:hidden;}
.new-badge::before{content:"";display:block;width:348px;height:53px;
  background:url('image/new_sprite.png') 0 0 no-repeat;
  animation:new-burst .15s steps(4) infinite;}

/* gold glow text effect */
.gold-glow { color: var(--gc-white); text-shadow: 0 0 1px var(--gc-gold), 0 0 2px var(--gc-gold), 0 0 3px var(--gc-gold); }

/* logo image, sits above sparkles */
.logo-img { position: relative; z-index: 2; }

/* page title heading, identical on all subpages */
.page-title { font-size: 24px; font-family: 'GCV24', Verdana, Arial, Helvetica, sans-serif; margin: .83em 0 0; font-weight: bold; }

/* bare h2 (room list heading) is default 1.5em bold, pin it to the 24px strike */
h2 { font-size: 24px; font-family: 'GCV24', Verdana, Arial, Helvetica, sans-serif; }

/* return link, identical on all subpages */
.return-link { margin: 0 0 20px; font-weight: bold; }

/* focus outline for interactive widgets */
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--gc-yellow);
  outline-offset: 2px;
}

/* open 24 hours badge, identical on all pages */
.open-badge { position: absolute; width: 254px; height: 39px; z-index: 2; left: 70px; top: -33px; }

/* common widget hint label style */
.widget-hint {
  margin-top: 4px;
  font-size: 10px;
  font-family: 'GCV10', Verdana, Arial, Helvetica, sans-serif;
  color: var(--gc-yellow);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
  user-select: none;
}

/* defer rendering of off-screen widgets until near viewport */
#magic8wrap, #radio-container, #crt-wrap,
#scope-wrap, #joystickwrap, #coinwrap, #gravitywrap, #warp-nav {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}