/* The game page, in the style of airza.net (Tufte CSS): ET Book, the same colors, a 55%
   text column that goes full width under 760px. */
@font-face{font-family:"et-book";src:url("https://airza.net/assets/css/et-book/rlf.woff") format("woff");font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:"et-book-roman-old-style";src:url("https://airza.net/assets/css/et-book/rosf.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:"et-book";src:url("https://airza.net/assets/css/et-book/italic.woff2") format("woff2");font-weight:normal;font-style:italic;font-display:swap}
@font-face{font-family:"et-book";src:url("https://airza.net/assets/css/et-book/bold.woff2") format("woff2");font-weight:bold;font-style:normal;font-display:swap}

:root{
  --pink-accent:#ED3A72; --blue-accent:#6CCCE4;
  color-scheme:light;
  --text:#111; --bg:#fffff8; --muted:#6b6b66; --rule:#ccc; --accent:var(--pink-accent); --accent-ink:#111; --video:#060708;
  --exact:#2e7d46; --exact-ink:#fff; --close:#b07f08; --close-ink:#fff;
  --edh:var(--pink-accent); --cube:var(--blue-accent); /* the pools' colors: the site's pink and blue */
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --text:#ddd; --bg:#151515; --muted:#8f8f8f; --rule:#3d3d3d; --accent:var(--blue-accent); --accent-ink:#151515;
    --exact:#3a9f5b; --exact-ink:#06120a; --close:#d4a02a; --close-ink:#1b1302;
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html{font-size:15px}
body{box-sizing:content-box;width:87.5%;max-width:1400px;margin-left:auto;margin-right:auto;padding-left:12.5%;
  font-family:et-book,Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif;
  color:var(--text);background-color:var(--bg);-webkit-text-size-adjust:100%}
article{padding:3rem 0 max(4rem,env(safe-area-inset-bottom))}
a:link,a:visited{color:inherit;text-underline-offset:.1em;text-decoration-thickness:.05em}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

button{background:transparent;color:var(--text);border:1px solid var(--text);padding:.5rem 1rem;font-family:inherit;font-size:1.2rem;line-height:1.2;cursor:pointer;transition:.2s;border-radius:0}
button:hover:not(:disabled){background:var(--text);color:var(--bg)}
button:disabled{opacity:.35;cursor:default}
.text-btn{border:0;padding:0;white-space:nowrap;font-size:1.1rem;font-variant:small-caps;letter-spacing:.05em;text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.05em}
.text-btn:hover:not(:disabled){background:none;color:var(--text);text-decoration-color:var(--accent)}
/* Whatever's in the accent, or a pool's color, keeps the text's color, which reads better than
   either accent, and carries the color in its underline, as thin as a link's. */
.edh,.cube,a.home:is(:link,:visited),.msg,.result-kicker{text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.15em}

/* The feed beside the guesses, as wide as the page's full-width figures; stacked on narrow screens. */
.game{display:grid;gap:2.5rem;max-width:90%;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .game{grid-template-columns:minmax(260px,400px) minmax(0,1fr);gap:3rem}
  .feed-col{position:sticky;top:1.5rem;align-self:start}
}
.feed-col{width:100%;max-width:min(400px,calc((100svh - 20rem) * 672 / 936))}
@media (min-width:900px){.feed-col{max-width:min(400px,calc((100svh - 19rem) * 672 / 936))}}
/* Above the feed, the game's name on the left and on the right which pool the card is from, both
   in the small caps of the buttons under it. The pool is underlined in its color: pink for
   EDHREC's, blue for the cube, which only partly overlap, and neither for all of them, so it
   doesn't give away which its card is from. */
.feed-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 1rem;margin:0 0 .5rem}
.feed-head h1,.pool-tag{margin:0;font-weight:400;font-size:1.1rem;line-height:1.2;font-variant:small-caps;letter-spacing:.05em}
.edh{text-decoration-color:var(--edh)} .cube{text-decoration-color:var(--cube)}
.video{position:relative;aspect-ratio:672/936;background:var(--video)}
/* Cards run a few pixels taller or shorter than 672×936; filling the box keeps its dark
   background from showing as a hairline beside the table cam's table. */
.video canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.feed-actions{display:flex;justify-content:space-between;margin-top:.8rem}
.feed-menu{display:flex;align-items:baseline;gap:1.2rem}
/* Beside Give up, a way home to airza.net, underlined in the accent. */
a.home{line-height:1.2}
a.home:link,a.home:visited{text-decoration-color:var(--accent)}
a.text-btn.home:hover{text-decoration-color:var(--text)}
.status{margin:.6rem 0 0;font-size:1.1rem;font-style:italic;color:var(--muted)}
.status:empty{display:none}

.play-col{min-width:0}
.guess-box{display:flex;gap:1rem;align-items:flex-end}
.combo{position:relative;flex:1;min-width:0}
#guess{width:100%;font:inherit;font-size:1.4rem;padding:.35rem 0;border:0;border-bottom:1px solid var(--text);border-radius:0;background:transparent;color:var(--text)}
#guess::placeholder{color:var(--muted);font-style:italic}
#guess:focus{outline:none;border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
#guess:disabled{opacity:.5}
#suggest{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 2px);margin:0;padding:.25rem 0;list-style:none;background:var(--bg);border:1px solid var(--rule);box-shadow:0 8px 24px rgba(0,0,0,.18);max-height:320px;overflow:auto}
/* On touch screens the box docks right above the keyboard while you type (see app.js). */
.guess-box.docked{position:fixed;z-index:15;left:0;right:0;margin:0;padding:.6rem max(8%,env(safe-area-inset-right)) .6rem max(8%,env(safe-area-inset-left));background:var(--bg);border-top:1px solid var(--rule);transition:opacity .15s}
/* Its background runs on down behind the keyboard, so none of the page shows (or takes a tap)
   between them, as it would behind iOS's address bar there. */
.guess-box.docked::after{content:'';position:absolute;left:0;right:0;top:100%;height:100vh;background:var(--bg)}
/* Until the keyboard's up it waits unseen, then fades in right above it. */
.guess-box.docked.waiting{opacity:0;pointer-events:none;transition:none}
#suggest.up{top:auto;bottom:calc(100% + 2px);box-shadow:0 -8px 24px rgba(0,0,0,.18)}
#suggest li{padding:.35rem .7rem;font-size:1.3rem;cursor:pointer}
#suggest li[aria-selected="true"]{background:var(--text);color:var(--bg)}
#suggest li mark{background:none;color:inherit;text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.05em}
#suggest li.none{cursor:default;font-style:italic;color:var(--muted)}
.msg{margin:.6rem 0 0;min-height:1.6rem;font-size:1.1rem;font-style:italic;text-decoration-color:var(--accent)}

.result{margin:.5rem 0 2rem}
.result-kicker{margin:0;font-size:1.1rem;font-variant:small-caps;letter-spacing:.05em;text-decoration-color:var(--accent)}
/* A one-shot's time glitches now and then like the welcome's "what" (see Interludes below). */
.result-kicker .time{position:relative;white-space:nowrap;animation:glitch 3.2s infinite}
/* Share's sides always have a pink and a blue ghost, a pixel either way, like a bad webcam
   frame's fringe, and they jump apart and cross on the same beat as the glitch. Only the sides:
   a ghost of the top and bottom would cover the border itself. */
#share{position:relative}
#share::before,#share::after{content:'';position:absolute;inset:-1px;border:solid var(--pink-accent);border-width:0 1px;pointer-events:none;--d:-1px;transform:translateX(var(--d));animation:fringe 3.2s infinite}
#share::after{border-color:var(--blue-accent);--d:1px}
@keyframes fringe{0%,82%,90%,100%{transform:translateX(var(--d))}
  84%{transform:translateX(calc(var(--d) * 3))}
  87%{transform:translateX(calc(var(--d) * -2))}}
.result h2{font-style:italic;font-weight:400;font-size:2.2rem;line-height:1.1;margin:.4rem 0 .6rem}
.result-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem}
#share-text{width:100%;min-height:8rem;margin-top:1rem;font:1rem/1.4 Consolas,"Liberation Mono",Menlo,monospace;background:transparent;color:var(--text);border:1px solid var(--rule);padding:.5rem}

.guesses{list-style:none;margin:0;padding:0;container-type:inline-size}
.row{padding:1rem 0 1.1rem;border-top:1px solid var(--rule)}
.row-name{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.6rem;font-size:1.4rem;line-height:1.3}
.row-name .n{font-family:et-book-roman-old-style,et-book,Georgia,serif;color:var(--muted);min-width:1.2rem}
.row-name .tag{margin-left:auto;font-size:1.1rem;font-style:italic;color:var(--exact);white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
@container (min-width:290px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:620px){.tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;gap:.15rem;min-height:3.8rem;padding:.35rem .4rem .45rem;border:1px solid var(--rule)}
.tile.exact{background:var(--exact);color:var(--exact-ink);border-color:var(--exact)}
.tile.close{background:var(--close);color:var(--close-ink);border-color:var(--close)}
.tile .lbl{display:flex;justify-content:space-between;align-items:center;gap:.3rem;font-size:.95rem;font-variant:small-caps;letter-spacing:.05em}
.tile .lbl,.tile .year{opacity:.85}
.tile .val{font-size:1.1rem;line-height:1.3}
.tile .year{font-family:et-book-roman-old-style,et-book,Georgia,serif}
.seticon{flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.gem{flex:none;margin-right:2px;width:8px;height:8px;transform:rotate(45deg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.gem.common{background:#2b2b2b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)} .gem.uncommon{background:#b9c6d2} .gem.rare{background:#d9b44a}
.gem.mythic{background:#e2612c} .gem.special,.gem.bonus{background:#9a67c9}
.pip{width:17px;height:17px;margin-right:2px;vertical-align:-3px;border-radius:50%;display:inline-grid;place-items:center;font-size:.85rem;line-height:1;color:#1b1b1b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.pip.W{background:#f8f2d4} .pip.U{background:#a9d7f2} .pip.B{background:#c9c0bc} .pip.R{background:#f2a58c} .pip.G{background:#9fd1ab}

/* Help, like airza.net's card tooltips: beside the button with a mouse, and on touch screens
   and phones a popup over the dimmed page that any tap dismisses. */
.help{position:fixed;z-index:20;margin:0;padding:1rem 1.2rem;background:var(--bg);color:var(--text);border:1px solid var(--rule);box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:1.1rem;line-height:1.35}
.help:focus{outline:none}
.help.tooltip{width:min(26rem,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:hidden;pointer-events:none}
.help.popup{left:50%;top:50%;transform:translate(-50%,-50%);width:min(30rem,calc(100vw - 2rem));max-height:calc(100svh - 2rem);overflow:auto}
.help-overlay{position:fixed;inset:0;z-index:19;background:var(--bg);opacity:.85}
.help h2{margin:0 0 .5rem;font-weight:400;font-style:italic;font-size:1.5rem}
.help p,.help dl{margin:0}
.help dt{margin-top:.6rem;font-variant:small-caps;letter-spacing:.05em}
.help dd{margin:0}
.help .key{padding:0 .3em}
.key.exact{background:var(--exact);color:var(--exact-ink)} .key.close{background:var(--close);color:var(--close-ink)}
.help-close{margin-top:1rem}
.help.tooltip .help-close{display:none}

/* Options: a dialog over the dimmed page, like Help's popup. Its content fills it, so a click
   on the dialog element itself is on the backdrop. */
.options{padding:0;width:min(30rem,calc(100vw - 2rem));max-height:calc(100svh - 2rem);background:var(--bg);color:var(--text);border:1px solid var(--rule);box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:1.1rem;line-height:1.35}
.options::backdrop{background:rgba(255,255,248,.85)}
@media (prefers-color-scheme: dark){.options::backdrop{background:rgba(21,21,21,.85)}}
.options-body{padding:1rem 1.2rem}
.options h2{margin:0;font-weight:400;font-style:italic;font-size:1.5rem}
.options fieldset{margin:.9rem 0 0;padding:0;border:0;min-width:0}
.options legend{padding:0;font-variant:small-caps;letter-spacing:.05em}
.options label{display:flex;gap:.5rem;align-items:baseline;margin-top:.35rem;cursor:pointer}
.options input:is([type=radio],[type=checkbox]){margin:0;accent-color:var(--accent)}
.options p{margin:.35rem 0 0}
.options-note{color:var(--muted)}
#options-close{margin-top:1.1rem}

@media (max-width:760px){
  body{width:84%;padding-left:8%;padding-right:8%}
  article{padding-top:1.5rem}
  .game{max-width:100%;gap:1.8rem}
  /* Once the card's out, the message line stops holding its room, so Share fits on the screen. */
  #guess-slot[hidden] + .msg:empty{min-height:0;margin:0}
}
/* Interludes (see app.js): the welcome on first visits, and the break after 25 games. Each is
   typed out over the page, every letter arriving through a pink and blue fringe that settles,
   like a bad webcam frame, beside a cursor that turns from one to the other. Once the welcome's
   all there, "what" keeps glitching now and then. */
.interlude{display:none;position:fixed;inset:0;z-index:30;align-items:center;justify-content:center;padding:2rem 8%;background:var(--bg);cursor:pointer;transition:opacity .35s}
.welcoming #welcome,.breaking #break{display:flex}
.welcoming body,.breaking body{overflow:hidden}
#break.done{cursor:auto} /* past typing, only its choices do anything */
.interlude.leaving{opacity:0}
.interlude:focus{outline:none}
.interlude-body{width:min(34rem,100%)}
.interlude-text{margin:0;font-style:italic;font-size:clamp(1.7rem,6vw,2.6rem);line-height:1.25}
.interlude-text .ch{position:relative;opacity:0}
.interlude-text .ch.on{opacity:1;animation:arrive .5s ease-out backwards}
@keyframes arrive{from{opacity:0;text-shadow:-.2em 0 var(--pink-accent),.2em 0 var(--blue-accent)}35%{opacity:1}to{text-shadow:0 0 var(--pink-accent),0 0 var(--blue-accent)}}
.interlude-text .cursor::after{content:'';position:absolute;left:100%;top:.2em;height:.89em;width:.07em;margin-left:.06em;background:var(--pink-accent);animation:cursor 1.1s steps(1) infinite}
@keyframes cursor{50%{background:var(--blue-accent)}}
/* Once it's typed, the cursor holds pink and blinks blue just once every 2 seconds. */
.interlude.done .cursor::after{animation:blink 2s steps(1) infinite}
@keyframes blink{85%{background:var(--blue-accent)}}
.interlude-text .what{position:relative} /* inline, so "?" can't wrap away from it; it jitters by left */
.interlude.done .what{animation:glitch 3.2s infinite}
@keyframes glitch{0%,82%,100%{left:0;text-shadow:none}
  84%{left:-.04em;text-shadow:-.09em 0 var(--pink-accent),.09em 0 var(--blue-accent)}
  87%{left:.05em;text-shadow:.07em 0 var(--pink-accent),-.11em 0 var(--blue-accent)}
  90%{left:0;text-shadow:-.03em 0 var(--pink-accent),.03em 0 var(--blue-accent)}}
.interlude-go,.choices{visibility:hidden;opacity:0;transition:opacity .4s}
.interlude.done :is(.interlude-go,.choices){visibility:visible;opacity:1}
.interlude-go{margin-top:1.6rem}
/* The break's choices, the same size side by side, or stacked when there's no room: Yes framed in
   the accent, arriving through the same pink and blue fringe as the letters, then holding still;
   No plain. Both say theirs in the text's color, and Yes on the accent in its dark ink. */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;margin-top:1.8rem}
.choice{display:block;width:100%;padding:.7rem 1rem;font-family:inherit;font-size:1.3rem;line-height:1.2;text-align:center;text-decoration:none;color:var(--text);background:transparent;border:1px solid var(--text)}
a.choice:link,a.choice:visited{color:var(--text)}
.choice.yes{position:relative;border-color:var(--accent);transition:background-color .2s,color .2s}
a.choice.yes:hover{background:var(--accent);color:var(--accent-ink)}
/* Its border arrives the way the letters do: a pink and a blue ghost of it slide in and merge. */
.choice.yes::before,.choice.yes::after{content:'';position:absolute;inset:-1px;border:1px solid var(--pink-accent);opacity:0;pointer-events:none}
.choice.yes::after{border-color:var(--blue-accent)}
.interlude.done .choice.yes span{animation:arrive .7s ease-out backwards}
.interlude.done .choice.yes::before{animation:ghost .7s ease-out;--from:-.4em}
.interlude.done .choice.yes::after{animation:ghost .7s ease-out;--from:.4em}
@keyframes ghost{from{opacity:1;transform:translateX(var(--from))}to{opacity:0;transform:none}}

@media (prefers-reduced-motion: reduce){
  button,.interlude,.guess-box.docked{transition:none}
  .result-kicker .time,#share::before,#share::after,.interlude-text .ch.on,.interlude.done .what,.interlude-text .cursor::after,.interlude.done .cursor::after,.interlude.done .choice.yes span,.interlude.done .choice.yes::before,.interlude.done .choice.yes::after{animation:none}
}