/* The Traitors — Habbo Hotel: Origins companion
   Shared stylesheet. Component styling is inline in each page template (as designed
   on the canvas); this file holds the font, colour tokens, head sprites, animations
   and other shared rules. */

:root {
  --tt-page: #140A10;
  --tt-window: #2A1420;
  --tt-inset: #12080D;
  --tt-titlebar: #6B2240;
  --tt-outline: #0A0408;
  --tt-orange: #F08A1C;
  --tt-orange-light: #FFC27A;
  --tt-orange-dark: #B85F0A;
  --tt-rose: #F2B8CC;
  --tt-traitor: #E8455A;
  --tt-traitor-light: #FF8A96;
  --tt-faithful: #9FE3B8;
  --tt-text: #F3E6EC;
  --tt-text-muted: #D9C2CD;
  --tt-text-subtle: #B8A0AC;
  --tt-font: 'Volter Goldfish', monospace;
}

@font-face { font-family: 'Volter Goldfish'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/VolterGoldfish.woff2') format('woff2'), url('../fonts/VolterGoldfish.woff') format('woff'); }

template { display: none; }

/* Shared rules */
body{margin:0;background:#140A10}
a{color:#F2B8CC}
a:hover{color:#FFFFFF}
input::placeholder{color:#7A6470}
input[type=range]{accent-color:#F08A1C}
.tt-head-l{display:inline-block;flex-shrink:0;width:54px;height:62px;background:url(../img/heads-large.png) no-repeat -594px 0;image-rendering:pixelated}
.tt-head-s{display:inline-block;flex-shrink:0;width:27px;height:30px;background:url(../img/heads-small.png) no-repeat -297px 0;image-rendering:pixelated}
.tt-head-l[data-habbo-user="TheQuestion" i]{background-position:-0px 0}
.tt-head-s[data-habbo-user="TheQuestion" i]{background-position:-0px 0}
.tt-head-l[data-habbo-user="Mel.x" i]{background-position:-54px 0}
.tt-head-s[data-habbo-user="Mel.x" i]{background-position:-27px 0}
.tt-head-l[data-habbo-user="KatyOG1306" i]{background-position:-108px 0}
.tt-head-s[data-habbo-user="KatyOG1306" i]{background-position:-54px 0}
.tt-head-l[data-habbo-user="Katrimo" i]{background-position:-162px 0}
.tt-head-s[data-habbo-user="Katrimo" i]{background-position:-81px 0}
.tt-head-l[data-habbo-user="Liam" i]{background-position:-216px 0}
.tt-head-s[data-habbo-user="Liam" i]{background-position:-108px 0}
.tt-head-l[data-habbo-user="gai" i]{background-position:-270px 0}
.tt-head-s[data-habbo-user="gai" i]{background-position:-135px 0}
.tt-head-l[data-habbo-user="titsoak" i]{background-position:-324px 0}
.tt-head-s[data-habbo-user="titsoak" i]{background-position:-162px 0}
.tt-head-l[data-habbo-user="callumrfc" i]{background-position:-378px 0}
.tt-head-s[data-habbo-user="callumrfc" i]{background-position:-189px 0}
.tt-head-l[data-habbo-user="jampot" i]{background-position:-432px 0}
.tt-head-s[data-habbo-user="jampot" i]{background-position:-216px 0}
.tt-head-l[data-habbo-user="Youns" i]{background-position:-486px 0}
.tt-head-s[data-habbo-user="Youns" i]{background-position:-243px 0}
.tt-head-l[data-habbo-user="Youness" i]{background-position:-486px 0}
.tt-head-s[data-habbo-user="Youness" i]{background-position:-243px 0}
.tt-head-l[data-habbo-user="Osiris" i]{background-position:-540px 0}
.tt-head-s[data-habbo-user="Osiris" i]{background-position:-270px 0}
@keyframes tt-blink{0%,100%{opacity:.25}50%{opacity:1}}
.tt-dot{animation:tt-blink 1.2s steps(2,end) infinite}
.tt-dot2{animation-delay:.2s}
.tt-dot3{animation-delay:.4s}
@media (prefers-reduced-motion: reduce){.tt-dot{animation:none;opacity:1}}
@keyframes tt-nudge{0%,100%{transform:translate(0,0)}10%{transform:translate(-8px,2px)}20%{transform:translate(7px,-3px)}30%{transform:translate(-6px,-2px)}40%{transform:translate(8px,3px)}50%{transform:translate(-5px,1px)}60%{transform:translate(6px,-2px)}70%{transform:translate(-3px,2px)}80%{transform:translate(3px,-1px)}90%{transform:translate(-1px,0)}}
.tt-nudge{animation:tt-nudge .7s steps(1,end) 2}
@keyframes tt-beam{0%,100%{opacity:.35}50%{opacity:1}}
.tt-beam{animation:tt-beam .8s steps(2,end) infinite}
@media (prefers-reduced-motion: reduce){.tt-dot,.tt-nudge,.tt-beam{animation:none;opacity:1}}
@keyframes tt-stamp{0%{transform:scale(1.6) rotate(-8deg);opacity:0}60%{transform:scale(.95) rotate(-8deg);opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:1}}
.tt-stamp{animation:tt-stamp .35s steps(4,end) both}
@media (prefers-reduced-motion: reduce){.tt-dot,.tt-stamp{animation:none;opacity:1}}
[data-lb-row]:hover{outline:2px solid #6B2240;outline-offset:-2px}