/* Blurt's page (game.js). docs/mockups/blurt-daily.html is the round; blurt-daily-start.html the way in.
   Blurt's white window in the middle of an orange desk, under systemfun's menu bar. Only what the round needs:
   the question, the bar, the box. */
:root{--ink:#1e1e1e;--paper:#fefefe;--blurt:#ff5a1f;--words:"Inter Tight",sans-serif;--nums:"Departure Mono",monospace}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:flex;flex-direction:column;color:var(--ink);font:13px var(--nums)}
button{font:inherit;color:inherit}
/* above the menu bar, under the phone's clock, is white like the bar, and below the page, under Safari's buttons, is
   the desk's orange. Safari tints both with the page's own colour unless something fixed touches that edge, so the
   page is white and a thin orange strip sits fixed along the foot. Tried on an iPhone: Safari skips a pseudo-element,
   a strip under 8px or one behind the page, so it's a real element in the page, 8px, over the orange desk */
html{background:var(--paper)}
.foot-tint{position:fixed;left:0;right:0;bottom:0;height:8px;background:var(--blurt);pointer-events:none}

/* one column the width of the screen, so a long line of waiting words can't stretch the window past it */
/* the desk is Blurt's orange under a dot grid; the window is white, so the eye goes to it */
.desk{flex:1;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:60px 20px 40px;position:relative;overflow:hidden;
  background:radial-gradient(rgba(30,30,30,.16) .7px,transparent .8px) 0 0/6px 6px,var(--blurt)}
/* the window's top stays put from the round to the end card and its back, so only its foot moves: placed where the
   free card sits centred, and high enough that the tallest side and the row under it still fit */
@media (min-width:601px) and (min-height:501px){.desk{place-items:start center;padding-top:max(16px,min(calc(50vh - 245px * var(--z,1)),calc(100vh - 650px * var(--z,1))))}}
@media (max-height:500px){.desk{padding:8px 20px}}   /* a phone on its side: the window gets the height (fit() in game.js) */
.stage{position:relative;width:min(560px,100%)}
.bwin{width:100%;position:relative;z-index:1;background:var(--paper);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}

/* the title bar: the day, and System 1's pinstripes draining away with the seconds on the right.
   On the free card it's only the name: no number, no clock */
.bar{background:var(--ink);color:var(--paper);font:15px var(--nums);padding:5px 10px;display:flex;gap:12px;height:34px;align-items:center}
.bar .day{white-space:nowrap;word-spacing:-.2em}   /* the mono's wide spaces, drawn tighter round the dot */
.bar .stripes{flex:1;height:12px}
.bar .stripes span{display:block;height:100%;width:100%;background:repeating-linear-gradient(var(--paper) 0 1px,transparent 1px 2px);transition:width .2s linear}
.bar .tt{font:400 20px/1 var(--nums)}
.free .bar .stripes,.free .bar .tt,.ready .bar .stripes,.ready .bar .tt{visibility:hidden}
/* the ? for how to play, on the card only: a round in play has no time for it */
.bar .howto-help{display:none;margin-left:0}
.free .bar .howto-help,.ready .bar .howto-help{display:grid}
/* free play's ↻ sits just before the ?, the two sharing the space between them to tap */
.bar .howto-help.again{display:none}   /* free play only, not the way in */
.free .bar .howto-help.again{display:grid;margin-right:-4px}
.bar .again svg{width:11px;height:auto;fill:currentColor;shape-rendering:crispEdges}
.bar .again::after{right:-4px}
.bar .again+.howto-help::after{left:-4px}
.waiting .bar .tt{opacity:.4}
.urgent .bar .tt{color:var(--blurt)}
.urgent .bar .stripes span{background:repeating-linear-gradient(var(--blurt) 0 1px,transparent 1px 2px)}
.timeup .bar .tt{animation:blink .5s steps(1) 4}
@keyframes blink{50%{opacity:.25}}
/* the old Mac's watch beside the countdown, in the round only (game.js) */
.bar .tw{display:flex;width:20px;height:20px;padding:1px}
.bar .tw svg{width:100%;height:100%;fill:var(--paper);shape-rendering:crispEdges}
.free .bar .tw,.ready .bar .tw,.ended .bar .tw{display:none}
.waiting .bar .tw{opacity:.4}
.tw .hand,.bigwatch .hand{transform-origin:6.5px 7.5px}
/* 0:00: the 3·2·1's screen again, the watch ringing big over "time's up" */
.count.ring{grid-auto-rows:auto;justify-items:center;align-content:center;gap:18px;font-size:min(64px,12vw);white-space:nowrap}
.count.ring span{display:block}
.count.ring small{position:absolute;left:0;right:0;bottom:24px;text-align:center;font:15px var(--nums)}   /* what's next, at the screen's foot */
.bigwatch{width:78px;height:78px;justify-self:center;fill:var(--ink);shape-rendering:crispEdges;animation:ring 70ms steps(1) 10}
@keyframes ring{0%{transform:rotate(-14deg) translateX(-2px)}50%{transform:rotate(14deg) translateX(2px)}}
@media (prefers-reduced-motion:reduce){.bigwatch{animation:none}}

.panel{margin:5px;padding:30px;display:flex;flex-direction:column;position:relative}
#panel{justify-content:center}   /* a screen shorter than the window sits in its middle */
.q{font:600 32px/1.04 var(--words);letter-spacing:-.035em;margin:0;min-height:1.04em}
.tgt{display:inline-block;font:400 .62em/1 var(--nums);background:var(--ink);color:var(--paper);padding:.18em .32em .16em;vertical-align:.18em;letter-spacing:0;margin-left:.1em}
#bar{display:block;width:100%;height:auto;overflow:visible;margin-top:2px;margin-bottom:14px}   /* room for the sprayed word under it, its tails and its tilt */
#tnum,#sn{font:18px var(--nums);letter-spacing:-.12em;fill:var(--ink)}
#sn{paint-order:stroke;stroke-width:5px;stroke-linejoin:round}
/* the target shows once, in the box after the question; its number over the line stays only to place the crown by */
#tnum{visibility:hidden}
#said{font-family:"Sedgwick Ave";font-weight:400;fill:var(--ink);transform-box:fill-box;transform-origin:center}
#said,#sn{transition:opacity .2s}
/* the scale's two ends (tutorial.js) sit right under the bar, in the room it keeps below for the word that lands
   (32 of its 500 wide); they dither away on the first word, so the word takes their place */
#win .scale-ends{margin-top:calc(-6.4% - 6px);margin-bottom:calc(6.4% + 6px - 1em);position:relative;z-index:1;letter-spacing:-.08em;word-spacing:-.3em}   /* the mono's wide letters, drawn tighter like the bar's numbers */

.say{display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--ink);padding:4px 0;margin-top:14px;font:500 22px var(--words);letter-spacing:-.02em}
.say input{flex:1;border:0;outline:0;background:none;font:inherit;color:inherit;min-width:0;padding:0}
.say input::placeholder{color:var(--ink);opacity:.32}
.say.nudge{border-bottom-color:var(--blurt)}   /* it shakes too (systemMoves.react) */
.say.nudge input::placeholder{color:var(--blurt);opacity:1}
/* a word you already said goes orange, and the machine says so at the line's end (black on the orange card) */
.say.nudge input{color:var(--warm,var(--blurt))}
.dupe{flex:none;font:13px var(--nums);color:var(--warm,var(--blurt));white-space:nowrap}
/* words waiting their turn, greyed at the end of the line you type on; the next to land at the far right. Nothing
   clips the queue, so a word stays seen for all of its glide in from where you typed it */
.queue{display:flex;align-items:baseline;gap:10px;flex:none;max-width:58%;overflow:visible;white-space:nowrap;color:rgba(30,30,30,.28)}
.queue span{font-size:var(--qsize,22px)}
.queue .more{font:400 15px var(--nums)}
.note{min-height:1em;margin:6px 0 0;font:13px var(--nums);opacity:.7}

/* the gut's symbol for each word, over the spot it landed, then gone */
.remark{position:absolute;pointer-events:none;z-index:5;transform:translate(-50%,-100%) rotate(var(--r));transition:opacity .5s}

/* the way in (docs/mockups/blurt-today-final.html): today's question, the watch and "30 seconds" under it, and start,
   laid over the card in its middle */
.intro{position:absolute;inset:0;z-index:6;background:var(--paper);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:30px}
.intro[hidden]{display:none}
/* the way in is a screen, not text: nothing on it selects or takes a caret */
.intro{user-select:none;-webkit-user-select:none;cursor:default}
/* the box you type in stays focusable under the way in and the 3·2·1, which cover it, so the keyboard can open then */
.waiting .panel>:not(.intro):not(.say){visibility:hidden}
.intro-p{display:flex;align-items:center;gap:8px;word-spacing:-.2em;font:15px/1.4 var(--nums);margin:14px 0 26px}
.watch{position:relative;top:1px;flex:none;width:13px;height:13px;fill:currentColor;shape-rendering:crispEdges}
.intro .btn{display:flex;width:100%}
.count{position:absolute;left:5px;right:5px;top:39px;bottom:5px;z-index:7;background:var(--paper);display:grid;place-items:center;font:400 120px/1 var(--nums)}

/* the free card's way into today's: the site's big button, the card's width, under the input inside the window */
.strip{display:flex;width:100%;margin-top:18px}
.strip[hidden]{display:none}

/* the end card (docs/mockups/blurt-end.html): your words sprayed round the bar, the closest crowned. The title bar
   keeps the day and counts down to tomorrow's question */
.end[hidden],.panel[hidden]{display:none}
/* once played the day steps back, and the wait for the next game comes forward behind the same watch */
.ended .bar .day{opacity:1}
.ended .bar .tt{font:15px var(--nums);display:flex;align-items:center;gap:8px;word-spacing:-.2em;white-space:nowrap}
.ended #bar,.ended .say,.ended .note,.ended .scale-ends{display:none}
#board{display:block;width:100%;height:auto;overflow:visible;margin-top:6px}
.endline{margin:14px 0 0;font:15px var(--nums)}
.endline[hidden]{display:none}

/* under the card, on the wall: share, black, takes 70% of the row and free play, white, the rest. There's nothing to
   share on the way in */
.outrow{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:18px;margin-top:26px}
.outrow[hidden]{display:none}
/* every button on the wall is the site's big one, so the row stays one height from screen to screen */
.outrow .btn{min-width:0;height:44px;font-size:16px}
/* in free play the wall holds only the way to today's blurt, the whole row, where share sits on the end card */
.todaybtn,.free~.outrow .sharebtn,.free~.outrow .onward{display:none}
.todaybtn{grid-column:1/-1}
.free~.outrow .todaybtn{display:flex}
.ready~.outrow .sharebtn{display:none}
.ready~.outrow .onward{grid-column:1/-1}   /* on the way in, free play has the row to itself, still white */
/* the smallest phones: free play keeps its words on one line, share takes the rest */
@media (max-width:360px){ .outrow{grid-template-columns:minmax(0,1fr) max-content} }

/* "blurt", shouted and sprayed, on the wall behind the window. Pinned a fixed distance below the window's top, which
   never moves, rather than to its middle, so the wall stays put while the window grows and shrinks between screens */
.tag{position:absolute;left:50%;top:245px;font:400 80px/1.2 "Sedgwick Ave";white-space:nowrap;z-index:0;color:#c23d0f;pointer-events:none;user-select:none;
  transform:translate(calc(-50% - 90px),calc(-50% - 70px)) rotate(-9deg)}
.tag span{display:inline-block;margin-right:.02em}
.tag{visibility:hidden}   /* the letters only measure the wall; the logo below is what shows */
/* Blurt's logo on the wall: "cleaner · u r spaced", in the wall's colour at half strength, placed by hand
   (docs/brand/spray-desk-blurt-wall.json) */
.wall{position:absolute;left:50%;top:245px;z-index:0;pointer-events:none;background:#c23d0f;opacity:.5;
  -webkit-mask:url(/brand/blurt-wall-word.png) 0 0/100% 100% no-repeat;mask:url(/brand/blurt-wall-word.png) 0 0/100% 100% no-repeat}

@media (max-width:600px){
 .desk{padding:24px 10px 20px;place-items:start center}
 .panel{padding:24px 18px 20px}
 .q{font-size:26px}
 .intro{padding:24px 18px 20px}
 .ended .bar .tt{white-space:nowrap}
}
/* the end card's title bar holds the day, the stat box and the wait for tomorrow on one line: on a small phone it's
   drawn smaller, and on the smallest the wait is only its time, behind the watch. Should it still not fit, the day's
   end gives way, not the time */
@media (max-width:440px){
 .ended .bar{gap:8px}
 .ended .bar .day,.ended .bar .tt{font-size:13px}
 .ended .bar .day{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:350px){ .ended .bar .tt .next{display:none} }