/*
// main.css
// (c) 2021 - 2022 Insert Coin LLC. All rights reserved.
*/

body
{
    font-family      : 'Open Sans', sans-serif;
    font-size        : 20px;
    margin           : 10px;
    background-color : var(--background-colour);
    color            : var(--text-colour);
}

h1
{
    font-family   : 'Galada', cursive;
    margin-top    : 22px;
    margin-bottom : 0;
}

a
{
    text-decoration : none;
    color           : var(--link-colour);
    font-weight     : bold;
}

/*----*/

.button
{
    padding          : 20px;
    background-color : var(--light-tone);
    color            : var(--darkest-tone);
    text-align       : center;
    cursor           : pointer;
    transition       : background-color 0.3s ease-in-out;
}

.button:hover
{
    background-color : var(--lighter-tone);
}

.button.disabled
{
    pointer-events : none;
    filter         : brightness(0.3);
    color          : var(--medium-tone);
}

/*----*/

.board /*@!- This is ... a bit of a weird name? */
{
    display        : flex;
    flex-direction : row;
    align-items    : top;
    max-height     : 400px; /*@!- Urgh .. no, this won't work for long. I'm tired, though, and it will work for now. */
    margin-bottom  : 10px;
}

.space
{
    --cell-size   : 100px;
    --cell-margin : 0px;
    --cell-extent : calc(var(--cell-size) + var(--cellmargin));
    --columns     : 3;

    display               : grid;
    grid-template-columns : repeat(var(--columns), 1fr);
    max-width             : calc(var(--columns) * var(--cell-size));
    position              : relative;
    margin-left           : 18px;
}

.space .item
{
    position   : absolute;
    left       : 0;
    top        : 0;
    transition : transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.space .item:not(.is-held)
{
    transition : left 0.15s ease-in-out, top 0.15s ease-in-out;
}

.space .cell
{
    width      : var(--cell-size);
    height     : var(--cell-size);
    margin     : var(--cell-margin);
    transition : background-color 0.3s ease-in-out;
}

.space .cell.empty
{
    background-color : var(--darker-tone);
}

.space .cell.void
{
}

.item.is-held
{
    pointer-events : none;
}

/*----*/

.store
{
    display        : flex;
    flex-direction : column;
    margin-left    : 100px;
}

.store .option .title
{
    margin: 5px 0px 12px 0;
}

.store .option .item
{
    margin-bottom : 20px;
}

.store .option .item img
{
    height : 60px;
}

/*----*/

.ship
{
    max-width  : 300px;
}

/*----*/

.onboarding
{
    max-width  : 300px;
    margin-top : 51px;
    font-size  : 18px;
}

.onboarding .note
{
    padding : 12px;
}

/*----*/

[v-cloak]
{
    visibility : hidden;
}

/*----*/

:root
{
    --background-colour     : var(--darkest-tone);
    --text-colour           : var(--lightest-tone);
    --link-colour           : var(--deep-orange-colour);

    --lightest-tone         : #ededed;
    --lighter-tone          : #d0d0d0;
    --light-tone            : #adadad;
    --medium-tone           : #8f8f8f;
    --dim-tone              : #9e9e9e;
    --dark-tone             : #616161;
    --darker-tone           : #424242;
    --darkest-tone          : #212121;

    --lightest-tone-filter  : invert(99%) sepia(81%) saturate(70%) hue-rotate(174deg) brightness(114%) contrast(88%);
    --lighter-tone-filter   : invert(71%) sepia(67%) saturate(0%) hue-rotate(139deg) brightness(112%) contrast(91%);
    --light-tone-filter     : invert(75%) sepia(4%) saturate(9%) hue-rotate(357deg) brightness(95%) contrast(82%);
    --medium-tone-filter    : invert(60%) sepia(3%) saturate(0%) hue-rotate(193deg) brightness(95%) contrast(91%);
    --dim-tone-filter       : invert(76%) sepia(2%) saturate(22%) hue-rotate(318deg) brightness(84%) contrast(81%);
    --dark-tone-filter      : invert(35%) sepia(0%) saturate(236%) hue-rotate(194deg) brightness(100%) contrast(79%);
    --darker-tone-filter    : invert(18%) sepia(4%) saturate(16%) hue-rotate(359deg) brightness(101%) contrast(77%);
    --darkest-tone-filter   : invert(11%) sepia(11%) saturate(13%) hue-rotate(314deg) brightness(100%) contrast(96%);

    --red-colour         : #f44336;
    --pink-colour        : #E91E63;
    --purple-colour      : #9C27B0;
    --deep-purple-colour : #673AB7;
    --indigo-colour      : #3F51B5;
    --blue-colour        : #2196F3;
    --light-blue-colour  : #03A9F4;
    --cyan-colour        : #00BCD4;
    --teal-colour        : #009688;
    --green-colour       : #4CAF50;
    --light-green-colour : #8BC34A;
    --lime-colour        : #CDDC39;
    --yellow-colour      : #FFEB3B;
    --amber-colour       : #FFC107;
    --orange-colour      : #FF9800;
    --deep-orange-colour : #FF5722;
    --brown-colour       : #795548;
    --grey-colour        : #9E9E9E;
    --blue-grey-colour   : #607D8B;

    --red-colour-filter         : invert(62%) sepia(82%) saturate(5751%) hue-rotate(336deg) brightness(93%) contrast(107%);
    --pink-colour-filter        : invert(18%) sepia(72%) saturate(4783%) hue-rotate(330deg) brightness(96%) contrast(90%);
    --purple-colour-filter      : invert(23%) sepia(68%) saturate(2113%) hue-rotate(271deg) brightness(98%) contrast(105%);
    --deep-purple-colour-filter : invert(28%) sepia(12%) saturate(7344%) hue-rotate(239deg) brightness(95%) contrast(101%);
    --indigo-colour-filter      : invert(31%) sepia(64%) saturate(1108%) hue-rotate(204deg) brightness(88%) contrast(96%);
    --blue-colour-filter        : invert(47%) sepia(88%) saturate(2251%) hue-rotate(184deg) brightness(99%) contrast(92%);
    --light-blue-colour-filter  : invert(57%) sepia(53%) saturate(4671%) hue-rotate(168deg) brightness(100%) contrast(98%);
    --cyan-colour-filter        : invert(50%) sepia(95%) saturate(1469%) hue-rotate(147deg) brightness(97%) contrast(101%);
    --teal-colour-filter        : invert(34%) sepia(66%) saturate(3717%) hue-rotate(156deg) brightness(96%) contrast(101%);
    --green-colour-filter       : invert(61%) sepia(12%) saturate(1996%) hue-rotate(73deg) brightness(93%) contrast(88%);
    --light-green-colour-filter : invert(68%) sepia(10%) saturate(2027%) hue-rotate(45deg) brightness(100%) contrast(93%);
    --lime-colour-filter        : invert(91%) sepia(43%) saturate(690%) hue-rotate(6deg) brightness(83%) contrast(109%);
    --yellow-colour-filter      : invert(83%) sepia(36%) saturate(794%) hue-rotate(359deg) brightness(105%) contrast(104%);
    --amber-colour-filter       : invert(67%) sepia(64%) saturate(645%) hue-rotate(354deg) brightness(107%) contrast(101%);
    --orange-colour-filter      : invert(52%) sepia(93%) saturate(574%) hue-rotate(359deg) brightness(101%) contrast(106%);
    --deep-orange-colour-filter : invert(57%) sepia(89%) saturate(4553%) hue-rotate(345deg) brightness(100%) contrast(105%);
    --brown-colour-filter       : invert(35%) sepia(20%) saturate(776%) hue-rotate(330deg) brightness(93%) contrast(89%);
    --grey-colour-filter        : invert(69%) sepia(9%) saturate(0%) hue-rotate(136deg) brightness(92%) contrast(80%);
    --blue-grey-colour-filter   : invert(51%) sepia(14%) saturate(702%) hue-rotate(155deg) brightness(89%) contrast(86%);
}

.material-icon
{
  font-family                   : 'Material Icons';
  font-weight                   : normal;
  font-style                    : normal;
  font-size                     : 24px;
  line-height                   : 1;
  letter-spacing                : normal;
  text-transform                : none;
  display                       : inline-block;
  white-space                   : nowrap;
  word-wrap                     : normal;
  direction                     : ltr;
  -webkit-font-feature-settings : 'liga';
  -webkit-font-smoothing        : antialiased;
  -webkit-user-select           : none;
}