@charset "UTF-8"; :root { --color-white: rgba(255, 255, 255, 1); --color-safe: #38b000; --color-black: rgba(0, 0, 0, 1); --color-red: rgba(230, 0, 33, 1); --color-purple: rgba(109, 108, 199, 1); --color-official-purple: #400099; --color-btn-blue: rgba(158, 216, 245, 1); --color-btn-red: rgba(230, 0, 33, 1); --color-btn-gray: rgba(222, 222, 222, 1); --button-height: 60px; --share-width: 60px; --fs-btn-game: 21px; --btn-start: 174px; } @media all and (min-width: 960px) { :root { --btn-start: 252px; } } /*** 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 *, 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; } html { font-size: 3.125vw; } body { font-size: 14px; font-size: 1.4rem; } /* Small Devices, Tablets */ @media all and (min-width: 960px) { html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } } /* PC */ :root { --vh: 100vh; } body { color: #000; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ＭＳＰゴシック", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; overscroll-behavior-y: none; touch-action: manipulation; overflow-wrap: anywhere; word-break: normal; line-break: strict; overflow: hidden; position: fixed; top: 0px; left: 0px; } a { color: #000; text-decoration: none; text-decoration-thickness: 1px; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } .textbox { text-box: trim-both cap alphabetic; } .cvs { width: 100%; height: 100vh; position: fixed; } .cvs canvas { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; touch-action: none; } #bg { display: none; } @media all and (min-width: 960px) { body { width: 100%; height: 100%; overflow: visible; } #bg { display: block; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgb(109, 108, 199); } #bg:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: url(../images/pc/bg.webp) center center; background-size: 1600px 900px; } #wrapper { width: 960px; height: 540px; position: absolute; top: 50%; left: 50%; margin: -270px 0 0 -480px; overflow: hidden; } #wrapper .cvs { position: absolute; top: 0px; left: 0px; height: 100%; } #wrapper #ink, #wrapper #b-howto, #wrapper #s-result, #wrapper #screen_caution, #wrapper #s-countdown, #wrapper #score, #wrapper #s-start { position: absolute; } } .bangers { font-family: "Bangers", system-ui; font-weight: 400; font-style: normal; } button { cursor: pointer; } button.c-btn { display: block; width: 100%; height: var(--button-height); position: relative; border-radius: 100vmax; } button.c-btn .center { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center; } button.c-btn span.txt { font-size: 3rem; display: block; font-family: "Bangers", system-ui; font-weight: 400; font-style: normal; position: relative; } button.c-btn span.txt span.bg_txt { position: absolute; top: 0px; left: 0px; text-stroke: 4px var(--color-black); -webkit-text-stroke: 4px var(--color-black); } button.c-btn span.txt span.front_txt { position: relative; } .c-score { pointer-events: none; position: fixed; top: 6px; left: 55px; } .c-score p { font-size: 2.4rem; text-align: right; font-weight: 700; color: var(--color-red); text-stroke: 3px var(--color-black); -webkit-text-stroke: 3px var(--color-black); filter: drop-shadow(2px 2px 0 rgb(0, 0, 0)); font-family: "Bangers", system-ui; font-weight: 400; font-style: normal; } .c-score p:after { content: " MM"; font-size: 1.2rem; text-stroke: 1.5px var(--color-black); -webkit-text-stroke: 1.5px var(--color-black); } @keyframes blinkPen { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes moveGradient { to { background-position: 100% 0; } } #ink { width: 185px; height: 25px; position: fixed; top: 12px; right: 20px; background-image: url(../images/ui/pen.svg); background-repeat: no-repeat; background-position: top left; background-size: cover; } #ink .wrap_ink { width: 108px; height: 14px; position: absolute; left: 25px; top: 10px; } #ink p { background: var(--color-black); display: block; position: absolute; height: 100%; left: 0px; top: 0px; } #ink p.danger { background: var(--color-red); } #ink.infinite_mode p { opacity: 0; /*background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%); position: relative;*/ /* &:after{ content: ""; width: 100%; height: 100%; display: block; top: 0px; left: 0px; background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%); background-size: 500% 100%; @include mx.animation(moveGradient, .2s, ease, 0s, infinite); } */ } #ink.infinite_mode:after { content: ""; width: 100%; height: 100%; display: block; background-image: url(../images/ui/pen.webp); background-repeat: no-repeat; background-position: 0 0; background-size: 500% 100%; animation: moveGradient 0.25s steps(4) infinite; } .nobg #ui_setting { display: none; } #ui_setting { position: fixed; right: 0px; top: 100px; width: 110px; z-index: 5; background: rgba(255, 255, 255, 0.5); padding: 0 6px; } #ui_setting input { width: 100%; } #ui_setting input[type=range] { border: 1px solid #fff; border-radius: 100vmax; } #ui_setting dl { margin-bottom: 0.5em; } #ui_setting dl dt { font-size: 12px; margin-bottom: 0.2em; } #ui_setting dl dd { display: flex; align-items: center; column-gap: 5%; } #ui_setting dl dd input { width: 75%; } #ui_setting dl dd span { width: 20%; font-size: 10px; } #ui_setting #toggle_controll, #ui_setting #toggle_bg { width: 20px; aspect-ratio: 1/1; background: #06923E; border-radius: 100vmax; } #ui_setting #toggle_play { width: 20px; aspect-ratio: 1/1; border-radius: 100vmax; background: #06923E; display: block; } #ui_setting #toggle_play.is_pause { background: #ff0000; } #ui_setting dl#mode { display: flex; } #ui_setting dl#mode dt { margin-right: 0.5em; } #ui_setting dl#mode p#noEnemy { display: none; } #ui_setting dl#mode p#hasEnemy { display: block; background: var(--color-red); padding: 2px 4px; font-size: 1rem; border-radius: 100vmax; width: fit-content; color: var(--color-white); } #ui_setting dl#mode.is_practice p#hasEnemy { display: none; } #ui_setting dl#mode.is_practice p#noEnemy { display: block; background: var(--color-safe); padding: 2px 4px; font-size: 1rem; border-radius: 100vmax; width: fit-content; color: var(--color-white); } #ui_setting .btn_controll, #ui_setting .toggle_play_game, #ui_setting .btn_bg, #ui_setting #se_sound { padding: 5px 0; } #ui_setting .btn_controll p, #ui_setting .toggle_play_game p, #ui_setting .btn_bg p, #ui_setting #se_sound p { font-size: 10px; } #ui_setting .btn_controll label, #ui_setting .toggle_play_game label, #ui_setting .btn_bg label, #ui_setting #se_sound label { width: 100%; display: flex; justify-content: space-between; align-items: center; } #ui_setting .btn_controll button, #ui_setting .toggle_play_game button, #ui_setting .btn_bg button, #ui_setting #se_sound button { width: 20px; height: 20px; background: #06923E; border-radius: 100vmax; } .nocontroll #ui_setting { display: none; } .sound_off #ui_setting #se_sound button { background: var(--color-red); } #screen_caution { width: 100%; height: 100%; position: fixed; z-index: 10000; background: var(--color-purple); display: none; } #screen_caution .caution_inner { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center; } #screen_caution figure { width: 280px; margin-inline: auto; margin-bottom: 30px; } #screen_caution p { width: 280px; margin-inline: auto; } img { width: 100%; height: auto; vertical-align: top; } @media screen and (orientation: portrait) { #screen_caution { display: block; } } @media all and (min-width: 960px) { .c-score { top: 6px; left: 20px; } .c-score p { font-size: 7rem; } .c-score p:after { font-size: 3.4rem; } #ink { width: 240px; height: 32px; position: fixed; top: 20px; right: 20px; } #ink .wrap_ink { width: 140px; height: 18px; left: 32px; top: 13px; } }