@charset "UTF-8"; /* You can add global styles to this file, and also import other style files */ /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, g, path, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype"); font-style: normal; font-display: block; } @font-face { font-family: "Unbounded"; src: url("../fonts/Unbounded-VariableFont_wght.ttf") format("truetype"); font-style: normal; font-display: block; } html, body { cursor: default !important; -webkit-text-size-adjust: none; overscroll-behavior-y: contain; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html { scroll-behavior: smooth; } body { font-family: Unbounded, Arial, Helvetica, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #0b1520; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.is-fake-scroll::after { content: ""; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll; z-index: 3; } button { font-family: Unbounded, Arial, Helvetica, sans-serif; } :root { --cardWidth: 120px; --cardHeight: calc(var(--cardWidth) * 1.5); --slotMargin: 10px; --cardOffset: 25px; --cardOffsetSmall: 0.5px; } a { font-weight: 500; color: #646cff; text-decoration: inherit; transition: color 0.2s; } a:hover { color: #535bf2; } body { /* margin: 0; display: flex; place-items: center; */ min-width: 320px; min-height: 100vh; } h1 { font-size: 3.2em; line-height: 1.1; } h2 { width: 100%; font-size: 24px; line-height: 50px; text-align: center; } .is-overflow { overflow: hidden; } /* button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #1a1a1a; cursor: pointer; transition: border-color 0.25s; } */ /* button:hover { border-color: #646cff; } button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } */ /* @media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } a:hover { color: #747bff; } button { background-color: #f9f9f9; } } */ .header { display: flex; } .header__free-slots, .header__stack-slots { flex-grow: 1; display: flex; } .header__middle { flex-grow: 1; display: flex; justify-content: space-between; width: calc(var(--cardWidth) * 2); margin: var(--slotMargin); } .header__middle .slot { margin-top: 0; margin-bottom: 0; } .header__home-slots { display: flex; justify-content: flex-end; } .game { height: 100vh; display: flex; flex-direction: column; padding: 40px; } .game__field { position: relative; height: 100%; display: flex; flex-direction: column; /* display: grid; grid-template-columns: repeat(8, 140px); grid-auto-rows: 280px; */ } .game__row { display: flex; } .game__row:nth-of-type(2) { flex-grow: 1; } .game__controls { position: relative; z-index: 10; } /* STATES */ .main[data-state=idle] .card-root { transition: none; } .main[data-state=idle] .card-root::after { opacity: 1; } .main[data-state=idle] .panel__button[data-elt=repeatDeck], .main[data-state=idle] .panel__button[data-elt=copyDeck] { pointer-events: none; opacity: 0.5; } .main[data-state=idle] .panel__share { pointer-events: none; opacity: 0.5; } .controls { display: flex; justify-content: space-between; width: calc(var(--cardWidth)); height: var(--cardHeight); margin: var(--slotMargin); } .controls__wrap { display: flex; flex-direction: column; justify-content: space-between; } .controls button { position: relative; display: block; width: 46px; height: 46px; border-radius: 50%; font-size: 0; overflow: hidden; transition: filter 0.3s, box-shadow 0.3s; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 6px hsl(223, 40%, 12%), 0 0 0 7px hsl(223, 40%, 12%); } .controls button::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .controls button:not(.is-active) { pointer-events: none; } .controls button:not(.is-active)::before { filter: grayscale(1); } .controls button.is-active[data-id=red] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 6px hsl(223, 40%, 12%), 0 0 0 7px hsl(340, 100%, 50%); } .controls button.is-active[data-id=green] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 6px hsl(223, 40%, 12%), 0 0 0 7px hsl(200, 100%, 50%); } .controls button.is-active[data-id=black] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 6px hsl(223, 40%, 12%), 0 0 0 7px hsl(300, 100%, 40%); } .controls button[data-id=red]::before { background: url("/assets/images/themes/space/suit/control-triangle.jpg") center no-repeat; background-size: contain; } .controls button[data-id=green]::before { background: url("/assets/images/themes/space/suit/control-circle.jpg") center no-repeat; background-size: contain; } .controls button[data-id=black]::before { background: url("/assets/images/themes/space/suit/control-square.jpg") center no-repeat; background-size: contain; } .controls button:hover[data-id=red] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 6px hsl(340, 100%, 20%), 0 0 0 7px hsl(340, 100%, 50%); } .controls button:hover[data-id=green] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 6px hsl(200, 100%, 20%), 0 0 0 7px hsl(200, 100%, 50%); } .controls button:hover[data-id=black] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 6px hsl(300, 100%, 20%), 0 0 0 7px hsl(300, 100%, 40%); } .slot { position: relative; width: var(--cardWidth); min-height: var(--cardHeight); margin: var(--slotMargin); border-radius: 6px; transition: background-color 0.3s; } .slot::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: var(--cardHeight); border: 1px dotted #444CD9; border-radius: 6px; } .slot.is-drop-target { background-color: rgba(170, 170, 255, 0.0666666667); } .slot[data-type=free], .slot[data-type=deck], .slot[data-type=home] { height: var(--cardHeight); } .slot[data-type=stack] { height: calc(var(--cardHeight) * 2); } .slot[data-type=flower]::before { border-color: #8c3d8f; } .slot:not([data-type=flower]) .card-root:nth-of-type(1) { z-index: 0; } .slot:not([data-type=flower]) .card-root:nth-of-type(2) { z-index: 1; } .slot:not([data-type=flower]) .card-root:nth-of-type(3) { z-index: 2; } .slot:not([data-type=flower]) .card-root:nth-of-type(4) { z-index: 3; } .slot:not([data-type=flower]) .card-root:nth-of-type(5) { z-index: 4; } .slot:not([data-type=flower]) .card-root:nth-of-type(6) { z-index: 5; } .slot:not([data-type=flower]) .card-root:nth-of-type(7) { z-index: 6; } .slot:not([data-type=flower]) .card-root:nth-of-type(8) { z-index: 7; } .slot:not([data-type=flower]) .card-root:nth-of-type(9) { z-index: 8; } .slot:not([data-type=flower]) .card-root:nth-of-type(10) { z-index: 9; } .slot:not([data-type=flower]) .card-root:nth-of-type(11) { z-index: 10; } .slot:not([data-type=flower]) .card-root:nth-of-type(12) { z-index: 11; } .slot:not([data-type=flower]) .card-root:nth-of-type(13) { z-index: 12; } .slot:not([data-type=flower]) .card-root:nth-of-type(14) { z-index: 13; } .slot:not([data-type=flower]) .card-root:nth-of-type(15) { z-index: 14; } .slot:not([data-type=flower]) .card-root:nth-of-type(16) { z-index: 15; } .slot:not([data-type=flower]) .card-root:nth-of-type(17) { z-index: 16; } .slot:not([data-type=flower]) .card-root:nth-of-type(18) { z-index: 17; } .slot:not([data-type=flower]) .card-root:nth-of-type(19) { z-index: 18; } .slot:not([data-type=flower]) .card-root:nth-of-type(20) { z-index: 19; } .slot:not([data-type=flower]) .card-root:nth-of-type(21) { z-index: 20; } .slot:not([data-type=flower]) .card-root:nth-of-type(22) { z-index: 21; } .slot:not([data-type=flower]) .card-root:nth-of-type(23) { z-index: 22; } .slot:not([data-type=flower]) .card-root:nth-of-type(24) { z-index: 23; } .slot:not([data-type=flower]) .card-root:nth-of-type(25) { z-index: 24; } .slot:not([data-type=flower]) .card-root:nth-of-type(26) { z-index: 25; } .slot:not([data-type=flower]) .card-root:nth-of-type(27) { z-index: 26; } .slot:not([data-type=flower]) .card-root:nth-of-type(28) { z-index: 27; } .slot:not([data-type=flower]) .card-root:nth-of-type(29) { z-index: 28; } .slot:not([data-type=flower]) .card-root:nth-of-type(30) { z-index: 29; } .slot:not([data-type=flower]) .card-root:nth-of-type(31) { z-index: 30; } .slot:not([data-type=flower]) .card-root:nth-of-type(32) { z-index: 31; } .slot:not([data-type=flower]) .card-root:nth-of-type(33) { z-index: 32; } .slot:not([data-type=flower]) .card-root:nth-of-type(34) { z-index: 33; } .slot:not([data-type=flower]) .card-root:nth-of-type(35) { z-index: 34; } .slot:not([data-type=flower]) .card-root:nth-of-type(36) { z-index: 35; } .slot:not([data-type=flower]) .card-root:nth-of-type(37) { z-index: 36; } .slot:not([data-type=flower]) .card-root:nth-of-type(38) { z-index: 37; } .slot:not([data-type=flower]) .card-root:nth-of-type(39) { z-index: 38; } .slot:not([data-type=flower]) .card-root:nth-of-type(40) { z-index: 39; } .main { display: flex; align-items: center; justify-content: center; background: #000 url("/assets/images//themes/space/bg/space0.jpg") center no-repeat; } .card-root { --numColorRed: hsl(340deg 80% 45%); --numColorGreen: hsl(200deg 100% 50%); --numColorBlack: hsl(280deg 140% 45%); --cardMargin: calc(var( --slotMargin) * 2); position: absolute; top: var(--slotMargin); left: var(--slotMargin); width: var(--cardWidth); height: var(--cardHeight); background-color: #ffffff; border-radius: 6px; padding: 7px 10px; font-size: 14px; font-weight: 700; color: #000; overflow: hidden; user-select: none; transition: transform 0.4s; will-change: transform; /* > * { pointer-events: none; } */ } .card-root::after { content: ""; opacity: 0; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background: #000 url("/assets/images/themes/space/suit/back.jpg") center no-repeat; background-size: cover; } .card-root::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(255, 255, 255, 0.0352941176), rgba(0, 0, 0, 0.1333333333) 90%); opacity: 0; transition: opacity 0.2s; box-shadow: inset 0px 1px 0 0px rgba(255, 255, 255, 0.1333333333); border-radius: 6px; } .card-root:hover::before { opacity: 1; } .card-root:not(.is-dealed) { opacity: 1; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 1px 1px 0 rgba(255, 255, 255, 0.0823529412), inset -1px -1px 0 rgba(255, 255, 255, 0.0392156863); } .card-root.is-flipped::after { opacity: 1; transition: opacity 0s 0.2s; } .card-root.is-inactive { pointer-events: none; box-shadow: 0px 1px 0 rgba(255, 255, 255, 0.1333333333); } .card-root span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .card-root pre { display: none; position: absolute; top: 20px; left: 10px; background-color: #000; color: #fff; font-size: 8px; line-height: 1.4; font-family: "Fira Code Retina", "Courier New", Courier, monospace; } .card-root.is-draggable { cursor: default; transition: none; } .card-root.flower { background: #000 url("/assets/images/themes/space/suit/flower.jpg") center no-repeat; background-size: cover; } .card-root.flower .number { display: none; } .card-root.supreme { display: flex; flex-direction: column; } .card-root.supreme.red { background: #000 url("/assets/images/themes/space/suit/supreme-triangle.jpg") center no-repeat; background-size: cover; } .card-root.supreme.green { background: #000 url("/assets/images/themes/space/suit/supreme-circle.jpg") center no-repeat; background-size: cover; } .card-root.supreme.black { background: #000 url("/assets/images/themes/space/suit/supreme-square.jpg") center no-repeat; background-size: cover; } .card-root.card { display: flex; flex-direction: column; background: linear-gradient(180deg, hsl(225, 40%, 15%) 0%, hsl(225, 40%, 12%) 100%); } .card-root.card.red.num-1 span { background: url("/assets/images/themes/space/suit/T1.svg") center no-repeat; } .card-root.card.red.num-2 span { background: url("/assets/images/themes/space/suit/T2.svg") center no-repeat; } .card-root.card.red.num-3 span { background: url("/assets/images/themes/space/suit/T3.svg") center no-repeat; } .card-root.card.red.num-4 span { background: url("/assets/images/themes/space/suit/T4.svg") center no-repeat; } .card-root.card.red.num-5 span { background: url("/assets/images/themes/space/suit/T5.svg") center no-repeat; } .card-root.card.red.num-6 span { background: url("/assets/images/themes/space/suit/T6.svg") center no-repeat; } .card-root.card.red.num-7 span { background: url("/assets/images/themes/space/suit/T7.svg") center no-repeat; } .card-root.card.red.num-8 span { background: url("/assets/images/themes/space/suit/T8.svg") center no-repeat; } .card-root.card.red.num-9 span { background: url("/assets/images/themes/space/suit/T9.svg") center no-repeat; } .card-root.card.red .number { color: var(--numColorRed); } .card-root.card.green.num-1 span { background: url("/assets/images/themes/space/suit/O1.svg") center no-repeat; } .card-root.card.green.num-2 span { background: url("/assets/images/themes/space/suit/O2.svg") center no-repeat; } .card-root.card.green.num-3 span { background: url("/assets/images/themes/space/suit/O3.svg") center no-repeat; } .card-root.card.green.num-4 span { background: url("/assets/images/themes/space/suit/O4.svg") center no-repeat; } .card-root.card.green.num-5 span { background: url("/assets/images/themes/space/suit/O5.svg") center no-repeat; } .card-root.card.green.num-6 span { background: url("/assets/images/themes/space/suit/O6.svg") center no-repeat; } .card-root.card.green.num-7 span { background: url("/assets/images/themes/space/suit/O7.svg") center no-repeat; } .card-root.card.green.num-8 span { background: url("/assets/images/themes/space/suit/O8.svg") center no-repeat; } .card-root.card.green.num-9 span { background: url("/assets/images/themes/space/suit/O9.svg") center no-repeat; } .card-root.card.green .number { color: var(--numColorGreen); } .card-root.card.black.num-1 span { background: url("/assets/images/themes/space/suit/S1.svg") center no-repeat; } .card-root.card.black.num-2 span { background: url("/assets/images/themes/space/suit/S2.svg") center no-repeat; } .card-root.card.black.num-3 span { background: url("/assets/images/themes/space/suit/S3.svg") center no-repeat; } .card-root.card.black.num-4 span { background: url("/assets/images/themes/space/suit/S4.svg") center no-repeat; } .card-root.card.black.num-5 span { background: url("/assets/images/themes/space/suit/S5.svg") center no-repeat; } .card-root.card.black.num-6 span { background: url("/assets/images/themes/space/suit/S6.svg") center no-repeat; } .card-root.card.black.num-7 span { background: url("/assets/images/themes/space/suit/S7.svg") center no-repeat; } .card-root.card.black.num-8 span { background: url("/assets/images/themes/space/suit/S8.svg") center no-repeat; } .card-root.card.black.num-9 span { background: url("/assets/images/themes/space/suit/S9.svg") center no-repeat; } .card-root.card.black .number { color: var(--numColorBlack); } .card-root.is-drop-target.card-root { background: none; background-color: #acc9ff !important; } .card-root .symbol:nth-child(2) { margin-top: auto; transform: rotate(180deg); } .card-root .symbol::before { display: block; width: 10px; height: 10px; } .card-root .symbol[data-symbol="0"]::before { content: ""; background: url("/assets/images/themes/space/suit/T1.svg") center no-repeat; background-size: contain; } .card-root .symbol[data-symbol="1"]::before { content: ""; background: url("/assets/images/themes/space/suit/O1.svg") center no-repeat; background-size: contain; } .card-root .symbol[data-symbol="2"]::before { content: ""; background: url("/assets/images/themes/space/suit/S1.svg") center no-repeat; background-size: contain; } .card-root .number::before { display: block; line-height: 12px; content: attr(data-symbol); } .card-root .number:nth-child(2) { margin-top: auto; transform: rotate(180deg); } .panels-container { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; } .panel { display: none; } .panel.is-open { display: block; } .panel input[type=text] { flex-shrink: 0; padding: 10px 14px; flex-grow: 1; border-radius: 14px; line-height: 30px; background-color: #2B344F; color: rgba(255, 255, 255, 0.4); } .panel input[type=text]:not([disabled]) { color: #fff; cursor: text; } .panel input[type=text]::placeholder { color: rgba(255, 255, 255, 0.3333333333); } .panel__container { display: flex; background-color: #191E2E; border-radius: 10px; padding: 12px 14px; width: 600px; margin: 0 auto; justify-content: space-between; margin-bottom: 10px; font-size: 12px; } .panel__button { display: flex; align-items: center; border: 1px solid #2B344F; padding: 10px 20px; font-size: 12px; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; color: #BB33FF; } .panel__button--start { color: #08B5FF; } .panel__button--copy-link span:nth-child(2) { display: none; } .panel__row { display: flex; align-items: center; } .panel__row:nth-of-type(n+2) { margin-top: 10px; } .panel__share { margin-right: auto; display: flex; } .panel__checkbox { position: relative; width: 18px; height: 18px; border-radius: 3px; margin-right: 10px; border: 1px solid #2B344F; } .panel__checkbox svg { position: absolute; top: -6px; left: -6px; pointer-events: none; opacity: 0; transition: opacity 0.15s; } .panel__checkbox input { width: 18px; height: 18px; } .panel__checkbox input:checked ~ svg { opacity: 1; } .panel__deck-string.is-error { box-shadow: inset 0 0 0 3px rgba(255, 0, 0, 0.4); } .panel__deck-string.is-error ~ .panel__button { pointer-events: none; opacity: 0.5; } .panel--main { display: block !important; } .panel--cols .panel__container { flex-direction: column; } .panel--deck button { margin-left: 15px; } .panel--transparent { background: none; } .panel--info { display: block !important; font-size: 14px; line-height: 30px; } .panel--info .panel__container { background: none; padding-top: 0; margin-bottom: 0; } .panel--info button { line-height: 30px; opacity: 0.4; font-size: 14px; cursor: pointer; margin-left: 15px; transition: opacity 0.3s; } .panel.is-hidden { display: none; } @media only screen and (hover: hover) { .panel__button:hover { background-color: #2B344F; } .panel--info button:hover { opacity: 1; } } .popup { overflow-y: auto; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; display: grid; align-items: center; justify-content: center; pointer-events: none; opacity: 0; } .popup h2 { text-align: left; } .popup h3 { font-size: 14px; font-weight: 600; margin-bottom: 10px; margin-top: 15px; } .popup p { margin-bottom: 15px; } .popup ul { margin-bottom: 15px; } .popup ul li::before { content: "— "; } .popup.is-open { pointer-events: auto; opacity: 1; } .popup__close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; opacity: 1; cursor: pointer; transition: opacity 0.2s; } .popup__close::before, .popup__close::after { position: absolute; top: 15px; left: 0; width: 32px; height: 1px; background-color: #08B5FF; content: ""; } .popup__close::before { transform: rotate(45deg); } .popup__close::after { transform: rotate(-45deg); } .popup__close:hover { opacity: 0.7; } .popup__container { display: flex; flex-direction: column; border-radius: 10px; max-width: 800px; padding: 30px 50px; background-color: rgba(25, 30, 46, 0.2); backdrop-filter: blur(20px); } .popup__content { font-family: Inter, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 300; }