:root { --min-width: 486px; --select-size: 16px; } html { scroll-behavior: smooth; } body { background: rgb(120,120,120); font-family: sans-serif; margin: 0; height: 100%; margin: 0; padding: 0; zoom: calc((100% / 88) * 100); } @media screen and (min-width: 900px) { body { zoom: calc((100% / 50) * 100); } } select:disabled { color: -internal-light-dark(graytext, rgb(170, 170, 170)); opacity: 1; border-color: rgba(18, 18, 18, 0.7); } table { border: 1px solid #cbcbcb; border-spacing: 0; empty-cells: show; border-collapse: collapse; } table td, table th { border-bottom-width: 0; border-left: 1px solid #cbcbcb; border-right-width: 0; border-top-width: 0; font-size: inherit; margin: 0; overflow: visible; background: white; } table td, th { padding: 0.5em 1em; padding-top: 0.5em; padding-right: 1em; padding-bottom: 0.5em; padding-left: 1em; } th { padding: 0.5em 1em; } table th { background-color: white; color: rgb(20,20,20); font-weight: bold; } #logo-box { z-index: 10; } #logo { top: 0; left: 0; width: 115px; height: 46px; background-image: url(./img/revealword-logo.png); background-size: 115px; background-repeat: no-repeat; opacity: 1; } #logo::after { content: '⚙️'; color: white; margin-left: 125px; margin-top: 10px; position: absolute; width: auto; font-size: 24px; text-shadow: 0px 1px 2px rgb(10 0 0); opacity: .5; } #logo-box, #vari-box { width: 100%; display: flex; justify-content: center; position: absolute; top: 0; } #box { min-width: var(--min-width); } #main { min-width: var(--min-width); min-height: 450px; margin-top: 64px; } #vari-box { z-index: 5; } #wgrid .wsq1 { top: 0px; left: 0px; } #wgrid .wsq2 { top: -30px; left: 30px; } #wgrid .wsq3 { top: -60px; left: 60px; } #wgrid .wsq4 { top: -60px; left: 0px; } #wgrid .wsq5 { top: -90px; left: 30px; } #wgrid .wsq6 { top: -120px; left: 60px; } #wgrid .wsq7 { top: -120px; left: 0px; } #wgrid .wsq8 { top: -150px; left: 30px; } #wgrid .wsq9 { top: -180px; left: 60px; } #wsq1-3, #wsq1-6, #wsq1-9 { box-shadow: -1px 0 0 0 black; } #wgrid .w { position: relative; top: -270px; left: 0px; } #wgrid .wsq { position: relative; width: 30px; height: 30px; background: black; z-index: 1; opacity: 1; outline: 1px solid rgb(60,60,60); outline-offset: -2px; } #wgrid { height: 145px; display: flex; flex-direction: row; justify-content: center; } #wfield { margin-top: 50px; } #wgrid > div { width: 90px; margin-right: 8px; } #wgrid > div:nth-child(5) { margin-right: 0; } #wgrid .w { padding: 2px; display: flex; align-items: center; justify-content: space-around; min-height: 88px; } #wgrid-foot { height: 200px; grid-gap: 8px; display: flex; flex-direction: row; justify-content: center; } .guessed { position: relative; top: -245px; left: 24px; } #guess-enter-wrap { display: block; align-items: center; } #guess-enter { margin-top: 145px; width: 64px; height: 2em; } .guess { position: relative; top: -245px; left: 24px; } .guess select { display: block; margin-bottom: 4px; /* font-size: 22px; */ } #dash { position: absolute; top: -23px; left: -166px; font-family: system-ui; font-weight: bold; border-radius: 3px; width: 400px; font-size: 13px; text-align: center; } .dash { opacity: 0.6; color: white; background: rgb(229,14,13); padding: 1px 4px 1px 4px; } .dash-p5 { opacity: 1; color: white; background: rgb(70,70,70); padding: 2px 4px 2px 4px; } #special-msg { display: none; z-index: 999; padding: 10px; margin: 0px 20px 20px 20px; background: linear-gradient(180deg, gray, #00000075); min-height: 100%; position: absolute; border-radius: 6px; } #special-msg-close-btn { float: right; } #special-msg > div { background: #ffab00e6; padding: 10px; margin: 20px 10px 10px 10px; border-radius: 6px; } #special-msg > div > p { padding: 10px; filter: drop-shadow(2px 2px 4px rgb(130,99,99, .9)); } #stats { min-width: var(--min-width); background: black; z-index: 2; position: absolute; width: 100%; opacity: 1; font-size: 20px; } .stat-wordGuessIn1 td { background-color: #D0C188; } .stat-wordGuessIn5 td { background-color: rgb(130,130,130); } .stat-wordGuessIn4 td { background-color: rgb(170,170,170); } .stat-wordGuessIn3 td { background-color: rgb(220,220,220); } .stat-wordGuessIn2 td { background-color: rgb(240,240,240); } .stat-wordGuessIn1Streak td { background-color: #D0C188; } .stat-wordGuessIn5Streak td { background-color: rgb(130,130,130); } .stat-wordGuessIn4Streak td { background-color: rgb(170,170,170); } .stat-wordGuessIn3Streak td { background-color: rgb(220,220,220); } .stat-wordGuessIn2Streak td { background-color: rgb(240,240,240); } .statpos { border: 1px solid rgb(40, 40, 40); padding: 1px 2px 1px 2px; border-radius: 3px; } .stat-solved .statpos { padding: 2px 2px 1px 4px; } .stat-container { display: flex; flex-flow: row wrap; text-align: center; } .stats-close div { float:right; opacity: .5; } .stats-close:hover { cursor: pointer; } .stat-label-tiny { font-size: 11px; } #stat-vari-nav, #pop-game-nav { font-size: 19px; } #stats table td { text-align: right; } /* #stat-table-header { font-size:17px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: auto; align-content: start; justify-content: flex-end; } */ #stat-table-header { font-size:17px; display: grid; grid-template-columns: 33% 33% 33%; } #stat-header-ordinal { font-size: 22px; color:rgb(200,200,200); text-align: left; } #stats-close-btn { text-align: right; } .stat-header-close-x { font-size: 14px; } .stat-header-close { opacity: .7; font-size: 17px; } #stat-table-header > div { flex: 0 0 auto; margin: 10px; } #vari { color: white; font-size: 13px; text-shadow: 0px 1px 2px rgb(10 0 0); opacity: .5; margin-top: 46px; } .xrow { position: absolute; left: -22px; top: -4px; display: inline; opacity: .8; } #memorial, #anniversary { color: rgb(210,210,210); text-align: center; } #memorial > div, #anniversary > div { padding: 8px; } #memorial img { border-radius: 14px; filter: drop-shadow(12px 12px 13px #0f0f0f) } #anniversary img { width: 190px; height: auto; border-radius: 4px; filter: drop-shadow(12px 12px 13px #0f0f0f) } #anniversary:before { content: "🎉"; font-size: 36px; } .anniversary-year { padding: 4px; border: 1px solid #cd5c5ce6; padding: 4px; filter: drop-shadow(2px 2px 3px #0f0f0f); border-radius: 10px; } #copyright { /* display:table; */ margin: 0 auto; text-align: center; } #copyright-wrap { display: flex; justify-items: center; font-size: 14px; color: rgb(210,210,210); min-height: 2em; padding: 1em; } #copyright-wrap a { font-size: 13px; color: rgb(210,210,210); text-decoration: underline; } #copyright-wrap a:hover { color:lightcoral; } .norm { font-weight: normal; } .anniversary-dash { font-size: 10px; } .url { font-family: monospace; } .pct { font-size: 14px; } .system { font-family: monospace; color: rgb(200,200,200); } #gameover-msg { margin-top: 145px; height: 2em; } #gameover-msg span { text-shadow: 1px 1px 3px rgb(30 0 0); color: white; opacity: .75; letter-spacing: 1px; } .gameover-lookup button { padding: 2px 4px; background-color: lightcoral; border: 1px solid rgb(40,40,40); color: white; border-radius: 2px; opacity: .75; font-size: 15px; text-shadow: 1px 1px 2px black; min-width: 70px; margin-bottom: 1em; } .gameover-lookup { font-size: 13px; text-shadow: 1px 1px 3px rgb(30 0 0); color: white; opacity: .75; letter-spacing: 1px; } .dash-tip-intro::before { content: 'Turn phone sideways for best view. Goal: Guess the five letter word with as few taps and guesses as possible. How: Tap blackout tiles to reveal parts of the letters in the 5-letter word puzzle. Use revealed letter pieces to guess the word by selecting letters via the 5 drop-downs. Then press enter.'; /* margin-left: -40%; */ /* margin-top: 58px; */ position: absolute; /* width: 150%; */ text-align: left; font-size: 16px; text-shadow: 0px 1px 2px rgb(10 0 0); color: white; opacity: 1; letter-spacing: 1px; left: -44px; top: 55px; } .dash-tip-intro-2::before { content: 'Reveal 1 or more tiles and try again. 4 guesses left.'; margin-left: -22%; margin-top: 74px; position: absolute; width: auto; text-align: left; font-size: 16px; text-shadow: 0px 1px 2px rgb(10 0 0); color: white; opacity: 1; letter-spacing: 1px; } #mosaic { height:4em; font-size: 16px; line-height: 16px; margin-top: 7px; } #popwrap, #popwrap * { box-sizing: border-box; } #popwrap { top: 0; background: black; z-index: 20; position: absolute; width: 100%; min-width: var(--min-width); opacity: 0; visibility: hidden; /* height: auto; */ display: flex; justify-content: center; /* height: 100%; */ } #popwrap.open { opacity: 1; visibility: visible; min-height: 3500px; /* height: 100%; */ padding-top: 45px; opacity: 1; } #popbox { position: absolute; width: clamp(320px, 100%, 600px); padding: 12px; } #poptitle { background: lightcoral; } #poptext { background: #fff; min-height: 56px; margin: 0 auto; } #poptext select, #poptext button { font-size: 19px; } #poptitle, #poptext { padding: 6px; margin: 0; } #poptitle, #popclose { font-size: 1em; color: #fff; } #popclose { position: absolute; top: 15px; right: 18px; cursor: pointer; } .pop-close-bottom { cursor: pointer; margin-top: 15px; border-top: 1px gray solid; padding-top: 5px; } .pop-on-puzzle { font-family: monospace; font-size: 16px; border: 1px solid white; padding: 1px 4px; border-radius: 4px; background: black; color: white; } .demo-wrap { text-align: center; } .demo-wrap img { margin: auto 0; } #share { padding: 4px 8px; background-color: lightcoral; border: 1px solid rgb(40,40,40); color: white; font-weight: bold; border-radius: 3px; opacity: .75; font-size: 18px; text-shadow: 1px 1px 2px black; min-width: 80px; margin-bottom: 1em; } .share-pop-options { margin: 1em; /* min-width: 450px; */ } .share-pop-options button { margin: 1.25em; font-size: 1.1em; font-weight: bold; height:1.5em; margin: auto 0; text-align: center; font-size: 1.1em; min-width: 150px; height: 2em; } .share-pop-options { text-align: center; } .share-pop-options td { vertical-align: top; text-align: center; } .share-pop-options img { margin-top: 6px; } #export-stats { font-size: 16px; } .p5L, .p5End { font-family: monospace; border: 1px solid black; padding: 0 4px; } .p5L { background: lightcoral; } .p5End { background: rgb(140,140,140); }