/* the site's /style.css brings the palette, the font, the logo shimmer, the
   ── rules ── and the dotted status board. this is the game's own layout */
/* a display rule below would otherwise beat the hidden attribute */
[hidden] { display: none !important; }
.tn { max-width: 1180px; margin: 0 auto; padding: 32px 20px 50px; display: grid;
      grid-template-columns: 270px minmax(0, 1fr); gap: 44px; align-items: start; }
.tn > * { min-width: 0; }
.ident .logo { margin-bottom: 8px; font-size: 9.5px; }
.ident .sub { margin-bottom: 0; }
#status { color: var(--accent); }
#status:empty { display: none; }
.ident .stat { margin-top: 16px; }
.ident .links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 16px; font-size: 14px; }
.ident .links a { color: var(--g1); }
.ident .np { margin: 10px 0 0; padding-left: 8px; border-left: 2px solid var(--ok); font-size: 13px; line-height: 1.4; color: var(--tx); }
.ident .np .npl { display: block; color: var(--ok); font-size: 11px; }
#radiobtn.on { color: var(--ok); }
button { font: inherit; cursor: pointer; }
.links button, #discard { background: none; border: 0; padding: 0; color: var(--accent); }
.links button:hover, #discard:hover { color: var(--tx); }

#login .row { display: flex; gap: 10px; margin-top: 10px; max-width: 420px; }
#login input, #say { font: inherit; flex: 1; min-width: 0; padding: 7px 10px; color: var(--tx);
  background: #111612; border: 1px solid var(--rule); border-left: 2px solid var(--accent); outline: 0; }
#login input:focus, #say:focus { border-color: var(--accent); }
#login button, #start, #send { color: var(--bg); background: var(--ok); border: 1px solid var(--ok); padding: 6px 18px; }
#login button { animation: beckon 2.4s ease-in-out infinite; }
#login button:hover, #start:hover, #send:hover { filter: brightness(1.12); }
@keyframes beckon { 50% { box-shadow: 0 0 14px var(--ok); } }

#game { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: start; }
.mine .rule, .room .rule { margin-top: 0; }
.play { display: flex; gap: 16px; align-items: flex-start; margin-top: 8px; }
#me { display: block; width: 300px; height: 550px; border: 1px solid var(--rule);
  box-shadow: 0 0 0 1px #000, 0 0 26px rgba(63, 224, 255, .07); image-rendering: pixelated; }
.side { width: 120px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-width: 0; }
.side .lbl { color: var(--dim); font-size: 12px; }
#next { width: 96px; height: 72px; margin-bottom: 6px; }
#queue { display: flex; flex-wrap: wrap; gap: 3px; min-height: 22px; }
.sp { width: 28px; height: 28px; flex: none; display: block; image-rendering: pixelated; }
.sp.first { outline: 1px solid var(--accent); outline-offset: 1px; }
#qname { color: var(--accent); font-size: 12px; }
#queue:empty + #qname { color: var(--dim); }
#qdoes { color: var(--g1); font-size: 12px; line-height: 1.35; }
#qaim { color: var(--dim); font-size: 11px; line-height: 1.35; }
#qdoes:empty, #qaim:empty { display: none; }
#mynum { color: var(--accent); }
#start { margin-top: 10px; animation: beckon 2.4s ease-in-out infinite; }

#others { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 22px; }
#alone { color: var(--dim); font-size: 13px; margin: -12px 0 22px; }
#alonebtn, #invcopy, #invclose { background: none; border: 0; padding: 0; color: var(--accent); }
#alonebtn:hover, #invcopy:hover, #invclose:hover { color: var(--tx); }
#invite { margin: 8px 0 14px; padding: 8px 10px; background: #111612; border: 1px solid var(--rule); border-left: 2px solid var(--accent); font-size: 13px; }
.invlbl { color: var(--g1); margin-bottom: 6px; }
.invrow { display: flex; gap: 12px; align-items: center; }
#invlink { font: inherit; flex: 1; min-width: 0; padding: 4px 8px; color: var(--tx); background: var(--bg); border: 1px solid var(--rule); outline: 0; }
.other { cursor: pointer; }
.other canvas { display: block; border: 1px solid var(--rule); }
.other:hover canvas { border-color: var(--accent); }
.other .tag { display: flex; align-items: center; gap: 5px; font-size: 12px; max-width: 96px; margin-bottom: 3px; color: var(--g1); }
.other .nick { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the number is what you press to aim, so it has to read at a glance */
.other .num { flex: none; min-width: 1.4em; padding: 0 3px; text-align: center; font-size: 15px; line-height: 1.35;
  color: var(--bg); background: var(--accent); }
.other:hover .num { background: var(--tx); }
.other.out .num { background: var(--dim); }
.other.out { opacity: .35; }
#chat { list-style: none; margin: 8px 0 0; padding: 8px 10px; height: 11em; overflow-y: auto; font-size: 14px;
  background: #111612; border: 1px solid var(--rule); }
#chat .ev { color: var(--dim); }
#chat .srv { color: var(--g3); }
#chat .win { color: var(--accent); }
#sayf { display: flex; gap: 8px; margin-top: 8px; }
#send { display: none; }
.legend { margin-top: 20px; }
#legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 6px 14px; margin-top: 8px; font-size: 12px; }
.lg { display: flex; align-items: center; gap: 7px; color: var(--dim); white-space: nowrap; min-width: 0; }
.lg img { width: 24px; height: 24px; flex: none; image-rendering: pixelated; }
.lg b { font-weight: normal; }
.keys, .taps { color: var(--dim); font-size: 12px; margin: 12px 0 0; }
.taps { display: none; }

@media (max-width: 900px) {
  .tn { grid-template-columns: 1fr; gap: 20px; padding-top: 22px; }
}
@media (max-width: 720px) {
  #game { grid-template-columns: 1fr; }
}

/* phones: once you're in, the logo and board fold away, the others go in a
   strip, then the field as big as fits with next and specials in a bar under
   it. chat opens under the field and the field shrinks for it, so the bottom
   rows never hide */
body.touch { overscroll-behavior: none; touch-action: manipulation; }
body.touch .tn { padding: 10px 12px calc(8px + env(safe-area-inset-bottom)); gap: 8px; }
body.touch.joined .logo, body.touch.joined #board, body.touch.joined .np, body.touch .rule, body.touch .keys { display: none; }
body.touch.joined .ident { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font-size: 13px; }
body.touch.joined .ident .sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
body.touch.joined .ident .links { margin: 0; flex: none; font-size: 13px; gap: 4px 9px; }
body.touch #chatbtn:not([hidden]) { display: inline; }
body.touch #game { grid-template-columns: minmax(0, 1fr); gap: 6px; }
body.touch .mine { order: 2; min-width: 0; }
body.touch .room { order: 1; min-width: 0; display: contents; }
body.touch #others { order: 1; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0; }
body.touch #alone { order: 1; margin: 0; font-size: 12px; }
body.touch #alone .solo { display: none; }
body.touch #invite { order: 1; margin: 0; padding: 6px 8px; font-size: 12px; }
body.touch #invitebtn:not([hidden]) { display: inline; }
body.touch .other canvas { height: 76px; width: auto; }
body.touch .other .tag { font-size: 10px; max-width: 42px; gap: 3px; margin-bottom: 2px; }
body.touch .other .num { font-size: 11px; min-width: 1.2em; padding: 0 1px; }
body.touch .play { flex-direction: column; align-items: center; gap: 6px; margin: 0; min-width: 0; }
body.touch #me { width: auto; height: min(calc(100dvh - 270px), calc((100vw - 24px) * 22 / 12)); touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.touch.chatting #me, body.touch.keying #me { height: min(calc(100dvh - 346px), calc((100vw - 24px) * 22 / 12)); }
body.touch .side { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow: hidden; }
body.touch #qdoes { order: 9; flex: 1 0 100%; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.touch .side .lbl { display: none; }
body.touch #next { width: 48px; height: 36px; margin: 0; flex: none; }
body.touch #queue { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
body.touch #qname { flex: none; max-width: 38%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.touch #discard:not([hidden]) { display: block; flex: none; }
body.touch #start { margin: 0; flex: none; padding: 6px 12px; }
body.touch .talk { order: 3; display: none; }
body.touch .talk.open { display: block; }
body.touch #chat { height: 5.6em; font-size: 13px; margin: 0; }
body.touch #sayf { margin-top: 6px; }
body.touch #send { display: block; }
body.touch .taps { display: block; order: 4; margin: 0; font-size: 11px; }
body.touch.chatting .taps, body.touch.keying .taps { display: none; }
body.touch #keybtn:not([hidden]) { display: inline; }
body.touch .legend { display: none; order: 3; margin: 0; }
body.touch.keying .legend { display: block; }
body.touch #legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; font-size: 12px; margin: 0; }
body.touch .lg img { width: 20px; height: 20px; }

.solob { margin-top: 22px; font-size: 13px; }
.solob .rule { margin-top: 0; }
#solo { list-style: none; margin: 0; padding: 0; }
#solo li { display: flex; gap: 12px; line-height: 1.6; }
#solo .n { color: var(--dim); min-width: 5.5em; }
#solo .who { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solob .best { color: var(--dim); margin: 8px 0 0; }
.solob .best b { color: var(--tx); font-weight: normal; }

/* ?watch=1: the others' boards big, no field of your own, no typing */
#watchnote { display: none; color: var(--dim); font-size: 13px; margin: 0 0 10px; }
#watchnote a { color: var(--accent); }
body.watching #watchnote { display: block; }
body.watching .mine, body.watching .legend, body.watching .keys, body.watching .taps, body.watching #sayf, body.watching #nickbtn, body.watching #invitebtn, body.watching #keybtn { display: none !important; }
body.watching #game { grid-template-columns: minmax(0, 1fr); }
body.watching .other canvas { width: 144px; height: 264px; }
/* ?embed=1: inside the radio page, which has the logo and the music */
body.embed .tn { grid-template-columns: minmax(0, 1fr); padding: 10px 6px 20px; gap: 12px; max-width: none; }
body.embed .ident .logo, body.embed #board, body.embed #back, body.embed #radiobtn, body.embed .ident .np { display: none !important; }
body.embed .ident { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
body.embed .ident .links { margin: 0; }
/* a phone inside the radio page: the radio's strip is the header, so the
   board gets the height the logo and the solo board took */
body.embed.touch.joined .solob { display: none !important; }
body.embed.touch #me { height: min(calc(100dvh - 190px), calc((100vw - 24px) * 22 / 12)); }
body.embed.touch.chatting #me, body.embed.touch.keying #me { height: min(calc(100dvh - 290px), calc((100vw - 24px) * 22 / 12)); }

/* inside the radio page on a computer: the board as tall as the space, start
   and the end of a game over it, the specials legend folded small */
.well { position: relative; flex: none; }
.over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 16px; padding: 24px; text-align: center; background: rgba(6, 8, 7, .74); }
#overmsg { margin: 0; color: var(--tx); font-size: 15px; line-height: 1.5; }
body.embed:not(.touch) .tn { padding-top: 6px; }
body.embed:not(.touch) .ident { margin-bottom: 4px; }
body.embed:not(.touch) #hdstats { color: var(--dim); }
body.embed:not(.touch).joined .solob, body.embed:not(.touch) .mine > .rule { display: none !important; }
body.embed:not(.touch) #game { grid-template-columns: auto minmax(220px, 1fr); gap: 28px; }
body.embed:not(.touch) .play { margin-top: 0; }
body.embed:not(.touch) #me { height: calc(100vh - 70px); max-height: 660px; min-height: 340px; width: auto; }
body.embed #over #start { font-size: 18px; padding: 10px 28px; white-space: nowrap; }
body.embed.touch #over #start { font-size: 16px; padding: 8px 18px; }
body.embed.touch #overmsg { font-size: 13px; }
#overmsg .how { display: block; margin-top: 10px; color: var(--dim); font-size: 12px; }
/* the right column is the frame's height: the partyline takes what's left */
body.embed:not(.touch) .room { display: flex; flex-direction: column; height: calc(100vh - 66px); min-height: 0; }
body.embed:not(.touch) .talk { flex: 1; display: flex; flex-direction: column; min-height: 0; }
body.embed:not(.touch) #chat { flex: 1; height: auto; min-height: 5em; }
body.embed:not(.touch) .legend { margin-top: 12px; }
body.embed:not(.touch) #legend { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 2px 10px; font-size: 11px; }
body.embed:not(.touch) .lg img { width: 18px; height: 18px; }

/* a phone inside the radio page: under the board one bar the board's width,
   next on the left and the specials on the right, and the controls centred
   below it until a game's been played */
body.embed.touch .play { gap: 0; }
body.embed.touch .side { margin: 6px auto 0; padding: 3px 2px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
                         justify-content: space-between; flex-wrap: nowrap; gap: 10px; }
body.embed.touch .side .lbl:first-child { display: block; font-size: 11px; color: var(--dim); }
body.embed.touch #next { margin: 0 auto 0 0; }
/* the specials you hold are what you tap to use one: they never get squeezed
   out, the name beside them does */
body.embed.touch #queue { flex: none; overflow: visible; }
body.embed.touch #queue:empty { display: none; }
body.embed.touch #qname { flex: 1 1 auto; min-width: 0; max-width: none; text-align: right; }
body.embed.touch #queue .sp { width: 30px; height: 30px; }
body.embed.touch #queue .sp:not(.first) { width: 22px; height: 22px; opacity: .7; }
body.embed.touch #queue:empty + #qname::before { content: "specials: "; color: var(--dim); }
body.embed.touch #qdoes { display: none; }
/* the controls are said on the board before a game instead */
body.embed.touch .taps { display: none !important; }
body.embed.touch #next { width: 48px; height: 36px; }
body.embed.touch .side.idle > * { visibility: hidden; }
body.embed.touch #queue .sp:nth-child(n+7) { display: none; }