@charset "UTF-8";

@font-face {
  font-family: 'AdvoCut';
  src: url(./assets/fonts/advocut-webfont.eot);
  src: url(./assets/fonts/advocut-webfont.eot?#iefix) format('embedded-opentype'),
       url(./assets/fonts/advocut-webfont.woff) format('woff'),
       url(./assets/fonts/advocut-webfont.ttf) format('truetype'),
       url(./assets/fonts/advocut-webfont.svg#AndinaRegular) format('svg');
  font-weight: normal;
  font-style: normal;
}

@-ms-viewport {
  width: device-width;
}

html {
  min-height:100%;
  background: #1f1f1f;
}

/* a phone: the page never scrolls, bounces, zooms or selects; a tap is only a tap */
html, body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

body {
  overflow:hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  margin:0;
  color: white;
  font-family: 'AdvoCut', sans-serif;
  text-align: center;
  cursor: default;
}

*:focus {
  outline:none;
}

*,*::before,*::after {
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background:transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 14px;
}
::-webkit-scrollbar-corner {
  background:transparent;
}
::selection{
  color:#EEE;
  background:#141414;
}

button, a {
  padding: 0;
  border: 1px solid transparent;
  background: none;
  outline: none;
  text-decoration: none;
}

#ui {
  z-index: 2;
}

#canvas {
  z-index: 1;
}

#webgl {
  z-index: 1;
}

canvas, img {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  image-rendering: optimizeSpeed;
  image-rendering: -o-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: optimize-contrast;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
  -ms-touch-action: none;
  touch-action: none;
  transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  transform: scale(1, 1);
  -ms-transform: scale(1, 1); 
  -webkit-transform: scale(1, 1); 
  -o-transform: scale(1, 1); 
  -moz-transform: scale(1, 1);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  cursor: grab;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#dialog {
  display: none;
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 3vmin;
  transform: translateX(-50%);
  width: min(92vw, 780px);
  min-height: 5.6em;
  padding: .7em 1em .9em;
  font-size: clamp(16px, 3.4vmin, 30px);
  line-height: 1.35;
  text-align: left;
  color: #f8f8f8;
  background: #1c2a4a;
  border: .16em solid #f8f8f8;
  border-radius: .3em;
  box-shadow: 0 0 0 .16em #1c2a4a, 0 .4em 1em rgba(0, 0, 0, .5);
  cursor: pointer;
}

#dialog.open {
  display: block;
}

#dialog .dialog-name {
  margin-bottom: .2em;
  color: #ffd75e;
}

#dialog .dialog-rest {
  visibility: hidden;
}

#dialog .dialog-arrow {
  display: none;
  position: absolute;
  right: 1em;
  bottom: .6em;
  border: .4em solid transparent;
  border-top: .5em solid #f8f8f8;
  border-bottom: 0;
  animation: dialog-blink .8s steps(2, start) infinite;
}

#dialog.done .dialog-arrow {
  display: block;
}

#dialog.auto .dialog-arrow {
  display: none;
}

@keyframes dialog-blink {
  to { visibility: hidden; }
}

#fade {
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-timing-function: linear;
}

#battle {
  display: none;
  position: fixed;
  z-index: 8;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(#8fd0ff 0%, #d7f0ff 38%, #a6d27c 38%, #6fae55 100%);
  text-align: left;
}

#battle.open {
  display: block;
}

#battle .mon {
  position: absolute;
  transition: opacity .5s, transform .5s;
}

#battle .mon.enemy {
  top: 12vh;
  right: 14vw;
}

#battle .mon.player {
  bottom: 28vh;
  left: 14vw;
}

#battle .mon.fainted {
  opacity: 0;
  transform: translateY(20%);
}

#battle .sprite {
  image-rendering: pixelated;
  background-repeat: no-repeat;
}

#battle .info {
  position: absolute;
  width: min(42vw, 340px);
  padding: .5em .8em .6em;
  font-size: clamp(14px, 2.8vmin, 24px);
  color: #202020;
  background: #f8f8e8;
  border: .14em solid #404040;
  border-radius: .4em;
  box-shadow: .15em .15em 0 rgba(0, 0, 0, .3);
}

#battle .info.enemy {
  top: 6vh;
  left: 5vw;
}

#battle .info.player {
  bottom: 30vh;
  right: 5vw;
}

#battle .info .title {
  display: flex;
  justify-content: space-between;
}

#battle .info .hp {
  margin-top: .3em;
  height: .6em;
  background: #585858;
  border-radius: .3em;
  overflow: hidden;
}

#battle .info .fill {
  height: 100%;
  background: #38c048;
  transition-property: width;
  transition-timing-function: linear;
}

#battle .info .fill.half {
  background: #f8c020;
}

#battle .info .fill.low {
  background: #e83820;
}

#battle .info .hptext {
  margin-top: .2em;
  text-align: right;
  font-size: .8em;
}

#battle .info.enemy .hptext {
  display: none;
}

#battle .menu {
  display: none;
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 3vmin;
  transform: translateX(-50%);
  width: min(92vw, 780px);
  min-height: 5.6em;
  padding: .7em 1em .9em;
  font-size: clamp(16px, 3.4vmin, 30px);
  line-height: 1.35;
  color: #f8f8f8;
  background: #1c2a4a;
  border: .16em solid #f8f8f8;
  border-radius: .3em;
  box-shadow: 0 0 0 .16em #1c2a4a, 0 .4em 1em rgba(0, 0, 0, .5);
}

#battle .menu.open {
  display: flex;
  justify-content: space-between;
}

#battle .menu .options {
  display: grid;
  grid-template-columns: repeat(2, minmax(6em, auto));
  gap: 0 1.5em;
}

#battle .menu .option {
  position: relative;
  padding-left: 1em;
  cursor: pointer;
}

#battle .menu .option.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  border: .32em solid transparent;
  border-left: .5em solid #f8f8f8;
  border-right: 0;
}

/* the controls (H): what every key does; with a keyboard the keys are buttons (a click, then the new key), in two columns */
#help { width: min(96vw, 900px); z-index: 14; }
#help .panel-body { padding: 10px 16px 6px; font: 15px/1.35 sans-serif; color: #303040; }
#help .help-note { font-size: 13px; color: #505064; }
#help .help-lead { display: inline; }
#help .help-message { display: inline; margin-left: 8px; color: #a04030; }
#help .help-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6em; }
#help .help-head { margin: 10px 2px 5px; font: 14px 'AdvoCut', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #505064; }
#help .help-row { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
#help .help-keys { flex: 0 0 7.4em; }
#help .help-key { min-width: 4.2em; padding: 2px 8px; font: bold 13px sans-serif; color: #ffd84a; background: #14141e; border: 2px solid #5a5a70; border-radius: 3px; cursor: pointer; }
#help .help-key:hover { border-color: #ffd84a; }
#help .help-key.none { color: #8890a8; font-weight: normal; }
#help .help-key.listening { color: #202020; background: #ffd84a; border-color: #404040; }
#help .help-group .help-row > .help-keys:not(:has(button)) { font: 14px 'AdvoCut', sans-serif; color: #202020; }
#help .help-buttons { display: flex; justify-content: flex-end; margin-top: 10px; }
/* a touch screen: no keys to change, one list */
#help .help-list .help-row { align-items: baseline; padding: 4px 0; border-bottom: 1px solid #e0dcc4; }
#help .help-list .help-keys { flex: 0 0 9.5em; font: 15px 'AdvoCut', sans-serif; color: #202020; }
@media (max-width: 700px) { #help .help-columns { grid-template-columns: 1fr; } }

#status {
  display: none;
  position: fixed;
  z-index: 30;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  max-width: 80vw;
  padding: 1em 1.4em;
  font-size: clamp(16px, 3vmin, 26px);
  color: #f8f8f8;
  background: #1c2a4a;
  border: .16em solid #f8f8f8;
  border-radius: .3em;
  text-align: center;
}

#status.open {
  display: block;
}

#ui {
  pointer-events: none;
}

#toasts {
  position: fixed;
  z-index: 11;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

/* while a duel's banner is on the screen, the messages come under it */
#toasts.low { top: 68px; }
#toasts.raid { top: 96px; }

#toasts .toast {
  padding: .3em .8em;
  font-size: clamp(14px, 2.6vmin, 22px);
  color: #f8f8f8;
  background: rgba(28, 42, 74, .92);
  border: .12em solid #f8f8f8;
  border-radius: .3em;
  animation: toast-fade .5s ease 3s forwards;
}

@keyframes toast-fade {
  to { opacity: 0; }
}

/* the line of the chat: it appears above the log, bottom left */
#chat {
  position: fixed;
  z-index: 15;
  left: 14px;
  bottom: 52px;
  width: 280px;
  display: none;
  padding: 6px 8px;
  font: 15px sans-serif;
  color: #fff;
  background: rgba(10, 10, 20, .92);
  border: 2px solid #f8f0c0;
  outline: none;
}

#chat.open {
  display: block;
}

/* the account (L) */
#account { width: min(96vw, 440px); }
#account .panel-body { padding: 12px 16px 8px; font: 15px sans-serif; color: #303040; }
#account label { display: block; margin: 0 0 8px; font: 14px 'AdvoCut', sans-serif; color: #505064; }
#account label .panel-input { margin-top: 3px; }
#account .account-note { margin: 6px 0; font-size: 13px; color: #505064; }
#account .account-error { min-height: 1.2em; font-size: 14px; color: #c03020; }
#account .account-ok { min-height: 1.2em; font-size: 14px; color: #1c8a2c; }
#account .account-go { display: block; width: 100%; margin-top: 4px; }
#account .account-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#account .account-member { display: none; }
#account.member .account-guest { display: none; }
#account.member .account-member { display: block; }
#account .account-extra { display: none; margin-top: 10px; border-radius: 3px; }
#account .account-extra.on { display: block; }
#account .account-extra .panel-btn { display: block; width: 100%; }
#account .account-warning { margin-bottom: 10px; padding: 6px 8px; font-size: 13px; color: #2a1a00; background: #f8c020; border: 2px solid #404040; border-radius: 3px; }

/* the choice of a Pokémon (the Professor) */
#choosepanel {
  display: none;
  position: fixed;
  z-index: 15;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 720px);
  max-height: 92vh;
  overflow: auto;
  padding: 16px 20px 14px;
  font: 15px sans-serif;
  color: #f4f4f4;
  background: #1c2a4a;
  border: 3px solid #f4f4f4;
  border-radius: 6px;
  box-shadow: 0 0 0 3px #1c2a4a, 0 8px 24px rgba(0, 0, 0, .6);
}
#choosepanel.open { display: block; }
#choosepanel .choose-title { font-size: 21px; margin-bottom: 12px; }
#choosepanel .choose-cards { display: flex; gap: 12px; }
#choosepanel .choose-card { flex: 1; min-width: 0; padding: 10px 8px; text-align: center; background: #24365c; border: 2px solid #4a5878; border-radius: 6px; cursor: pointer; }
#choosepanel .choose-card:hover { border-color: #8fa8dc; }
#choosepanel .choose-card.chosen { border-color: #ffe070; background: #35508a; }
#choosepanel .choose-picture { position: static; display: block; margin: 0 auto; width: 96px; height: 96px; image-rendering: pixelated; }
#choosepanel .choose-name { font-size: 18px; margin: 2px 0 4px; }
#choosepanel .choose-types { margin-bottom: 6px; }
#choosepanel .choose-types span { display: inline-block; margin: 0 2px; padding: 1px 8px; font-size: 12px; text-transform: capitalize; color: #10182c; border-radius: 9px; }
#choosepanel .choose-stat { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 2px 0; color: #b8c4e8; }
#choosepanel .choose-stat span { width: 52px; text-align: right; }
#choosepanel .choose-stat i { flex: 1; height: 7px; background: #141e38; border-radius: 4px; overflow: hidden; }
#choosepanel .choose-stat b { display: block; height: 100%; background: #78d858; }
#choosepanel .choose-skills { margin-top: 8px; font-size: 13px; text-align: left; padding-left: 14px; }
#choosepanel .choose-confirm { display: block; width: 100%; margin-top: 12px; padding: 8px; font: inherit; color: #fff; background: #35508a; border: 2px solid #8fa8dc; border-radius: 4px; cursor: pointer; }
#choosepanel .choose-confirm:hover:not(:disabled) { background: #4a6ab0; border-color: #ffe070; }
#choosepanel .choose-confirm:disabled { color: #808898; background: #2a3450; border-color: #4a5878; cursor: default; }
@media (max-width: 640px) {
  #choosepanel .choose-cards { flex-direction: column; }
  #choosepanel .choose-card { display: grid; grid-template-columns: 96px 1fr; text-align: left; column-gap: 10px; }
  #choosepanel .choose-picture { grid-row: 1 / span 6; margin: 0; }
}
body.touch #choosepanel { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
body.touch #choosepanel .choose-confirm { min-height: 44px; font-size: 16px; }

/* the pictures of items sit in their rows: not placed like the canvases of the game */
canvas.item-icon { position: static; z-index: auto; }

/* a shop: buy | sell, a row an item on the tray */
#shoppanel { width: min(96vw, 600px); }
#shoppanel .panel-body { padding: 12px 14px 8px; }
#shoppanel .shop-list { font: 14px sans-serif; }
#shoppanel .shop-row { display: grid; grid-template-columns: 30px 1fr auto auto auto; gap: 0 8px; align-items: center; margin-bottom: 5px; padding: 4px 6px; color: #e8e8f0; background: rgba(10, 10, 20, .88); border: 2px solid #444458; border-radius: 3px; }
#shoppanel .shop-row .shop-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
#shoppanel .shop-row .shop-item { grid-column: 2; font: 15px 'AdvoCut', sans-serif; }
#shoppanel .shop-row .shop-effect { grid-column: 2; font-size: 12px; color: #a8a8c0; }
#shoppanel .shop-row .shop-price { grid-column: 3; grid-row: 1 / span 2; min-width: 56px; text-align: right; color: #ffe070; }
#shoppanel .shop-row .panel-btn { grid-row: 1 / span 2; min-width: 44px; padding: 4px 8px; }
#shoppanel .shop-row .panel-btn:nth-of-type(1) { grid-column: 4; }
#shoppanel .shop-row .panel-btn:nth-of-type(2) { grid-column: 5; }
#shoppanel .shop-empty { padding: 12px 0; text-align: center; color: #707080; }

/* ---- the panels of the menu (src/Game/panel.js): one frame for all of them, the cream plate of the HUD with a dark edge, a title bar with
   the ✕ always at the top right, a body that scrolls when the window is short, and a line of what the keys do at the bottom ---- */
.panel {
  display: none;
  position: fixed;
  z-index: 14;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  width: min(96vw, 940px);
  max-height: 90vh;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  font: 15px 'AdvoCut', sans-serif;
  text-align: left;
  color: #202020;
  background: #f8f8e8;
  border: 3px solid #404040;
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px #e0dcc4, 0 10px 30px rgba(0, 0, 0, .55);
  cursor: default;
}
.panel.open { display: flex; }
.panel .panel-bar { flex: none; display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 6px 8px 6px 16px; background: linear-gradient(#34344e, #202030); border-bottom: 3px solid #404040; }
.panel .panel-title { flex: 1 1 auto; min-width: 4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 22px; color: #f8f0c0; letter-spacing: 1px; text-shadow: 0 2px 0 #000; }
.panel .panel-x { flex: none; display: block; width: 30px; height: 30px; margin: 0; padding: 0; font: 16px sans-serif; line-height: 26px; text-align: center; color: #e8e8f0; background: #14141e; border: 2px solid #5a5a70; border-radius: 3px; cursor: pointer; }
.panel .panel-x:hover { color: #fff; border-color: #ffd84a; }
.panel .panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panel .panel-note { flex: none; padding: 4px 16px 8px; font: 12px sans-serif; color: #707080; }
.panel .panel-note:empty { display: none; }
.panel .panel-note b { color: #202020; }
/* a pill in the title bar: the gold of the bag and of a shop, the counts of the Pokédex */
.panel .panel-gold, .panel .panel-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 6px; font-size: 17px; color: #ffe070; text-shadow: 0 2px 0 #000; background: #14141e; border: 2px solid #5a5a70; border-radius: 12px; white-space: nowrap; }
.panel .panel-pill { padding: 2px 10px; font-size: 14px; color: #f8f0c0; }
.panel canvas { position: static; }
/* the parts every panel draws with: tabs over a tray (the pockets of the bag), a small header over a list, buttons, a line to type in */
.panel .panel-tabs { display: flex; gap: 3px; padding-left: 4px; }
.panel .panel-tab { flex: 1 1 auto; min-width: 0; margin: 0; padding: 4px 6px 3px; font: 13px 'AdvoCut', sans-serif; color: #505064; background: #d8d4bc; border: 2px solid #404040; border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; white-space: nowrap; }
.panel .panel-tab:hover { color: #202020; }
.panel .panel-tab.chosen, .panel .panel-tab.on { color: #f8f0c0; background: #2a2a40; text-shadow: 0 1px 0 #000; }
.panel .panel-tray { padding: 8px; background: #e4e0cc; border: 2px solid #404040; border-radius: 0 3px 3px 3px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18); }
.panel .panel-head { display: flex; justify-content: space-between; margin: 0 2px 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #505064; }
.panel .panel-btn { margin: 0; padding: 5px 12px; font: 14px 'AdvoCut', sans-serif; color: #202020; background: #ece8d4; border: 2px solid #404040; border-radius: 3px; cursor: pointer; }
.panel .panel-btn:hover:not(:disabled) { background: #f8d848; }
.panel .panel-btn:disabled { color: #a8a490; cursor: default; }
.panel .panel-btn.main { background: #f8d848; box-shadow: 0 3px 0 #906010; }
.panel .panel-btn.main:hover:not(:disabled) { background: #ffe070; }
.panel .panel-btn.main:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #906010; }
.panel .panel-btn.on { color: #f8f0c0; background: #2a2a40; }
.panel .panel-input { display: block; box-sizing: border-box; width: 100%; padding: 6px 8px; font: 16px sans-serif; color: #202020; background: #fffff4; border: 2px solid #404040; border-radius: 3px; outline: none; }
.panel .panel-input:focus { border-color: #3880f0; box-shadow: 0 0 0 2px rgba(56, 128, 240, .35); }
.panel .panel-input::placeholder { color: #a8a490; }

/* the Pokémon (P): the party and the box, in the frames of the game's own HUD (the dark slots of the party) */
#boxpanel .box-body { display: grid; grid-template-columns: 260px minmax(0, 1fr) 270px; grid-template-areas: "side pc detail"; gap: 14px; padding: 12px 14px 4px; align-items: start; }
#boxpanel .box-side { grid-area: side; }
#boxpanel .box-pc { grid-area: pc; min-width: 0; }
#boxpanel .box-detail { grid-area: detail; min-width: 0; position: sticky; top: 0; }
:is(#boxpanel, #bagpanel) .box-head { display: flex; justify-content: space-between; margin: 0 2px 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #505064; }
:is(#boxpanel, #bagpanel) .box-line { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
:is(#boxpanel, #bagpanel) .box-small { font-size: 12px; }

/* a Pokémon's picture: one cell of its sheet (3 x 4 cells), `--s` wide; the big one walks */
.panel .box-sprite { flex: none; width: var(--s); height: var(--s); background-size: calc(var(--s) * 3) calc(var(--s) * 4); background-position: calc(var(--s) * -1) 0; background-repeat: no-repeat; image-rendering: pixelated; }
.panel .box-sprite.big { animation: box-walk .6s steps(3) infinite; }
:is(#boxpanel, #bagpanel) .box-sprite.down, :is(#boxpanel, #bagpanel) .down .box-sprite { filter: grayscale(1); opacity: .45; animation: none; }
@keyframes box-walk { from { background-position-x: 0; } to { background-position-x: calc(var(--s) * -3); } }

/* the bars: hit points as the HUD draws them (black edge, green, yellow, red), experience in blue */
:is(#boxpanel, #bagpanel) .box-bar { height: 7px; background: #101010; border: 1px solid #101010; }
:is(#boxpanel, #bagpanel) .box-bar i { display: block; height: 100%; background: #38c048; }
:is(#boxpanel, #bagpanel) .box-hp.mid i { background: #f8c020; }
:is(#boxpanel, #bagpanel) .box-hp.low i { background: #e83820; }
:is(#boxpanel, #bagpanel) .box-exp i { background: #3880f0; }

/* the party: six dark slots, the one that fights with a gold edge, the one chosen with a white one */
#boxpanel .box-party { display: flex; flex-direction: column; gap: 6px; }
:is(#boxpanel, #bagpanel) .box-card { position: relative; display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 0 8px 0 0; color: #e8e8f0; background: rgba(10, 10, 20, .88); border: 2px solid #444458; border-radius: 3px; cursor: pointer; }
:is(#boxpanel, #bagpanel) .box-card:hover { border-color: #8888a0; }
:is(#boxpanel, #bagpanel) .box-card.lead { border-color: #ffd84a; box-shadow: 0 0 6px rgba(255, 216, 74, .6); }
:is(#boxpanel, #bagpanel) .box-mon.chosen { border-color: #ffffff; background: #2a2a48; box-shadow: 0 0 0 2px #3880f0; }
:is(#boxpanel, #bagpanel) .box-card.lead.chosen { box-shadow: 0 0 0 2px #3880f0, 0 0 8px rgba(255, 216, 74, .7); border-color: #ffd84a; }
:is(#boxpanel, #bagpanel) .box-card.empty { justify-content: center; background: transparent; border: 2px dashed #c8c0a8; cursor: default; }
:is(#boxpanel, #bagpanel) .box-ball { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c8c0a8; background: linear-gradient(#e8e0c8 44%, #c8c0a8 44%, #c8c0a8 56%, transparent 56%); opacity: .8; }
:is(#boxpanel, #bagpanel) .box-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
:is(#boxpanel, #bagpanel) .box-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:is(#boxpanel, #bagpanel) .box-level { flex: none; color: #c8c8d8; }
:is(#boxpanel, #bagpanel) .box-card .box-hptext { color: #c8c8d8; }
#boxpanel .box-tag { color: #ffd84a; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
:is(#boxpanel, #bagpanel) .box-card.down .box-tag { color: #ff8070; }
:is(#boxpanel, #bagpanel) .box-key { position: absolute; left: 3px; top: 3px; min-width: 14px; padding: 0 3px; font-size: 10px; line-height: 14px; text-align: center; color: #e8e8f0; background: #14141e; border: 1px solid #5a5a70; border-radius: 2px; }

/* the box: a grid of small slots on an inset tray */
#boxpanel .box-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 5px; align-content: start; min-height: 150px; max-height: 390px; overflow-y: auto; padding: 6px; background: #e4e0cc; border: 2px solid #404040; border-radius: 3px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18); }
#boxpanel .box-cell { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2px 3px 4px; background: rgba(10, 10, 20, .88); border: 2px solid #444458; border-radius: 3px; cursor: pointer; }
#boxpanel .box-cell:hover { border-color: #8888a0; }
#boxpanel .box-cell .box-sprite { margin-bottom: -2px; }
#boxpanel .box-cell-level { position: absolute; right: 3px; top: 2px; font-size: 10px; color: #c8c8d8; }
#boxpanel .box-cell .box-bar { align-self: stretch; height: 4px; }
#boxpanel .box-cell.empty { min-height: 62px; background: rgba(0, 0, 0, .06); border: 2px dashed #c8c0a8; cursor: default; }
#boxpanel .box-empty { margin-top: 6px; text-align: center; font: 12px sans-serif; color: #707080; }

/* the one chosen, in full */
#boxpanel .box-stage { height: 124px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 6px; background: radial-gradient(ellipse 60% 22% at 50% 88%, #7cc860 0%, #5aa848 60%, transparent 62%), linear-gradient(#cfe8f8, #f0f4e0); border: 2px solid #404040; border-radius: 3px; }
#boxpanel .box-detail-name { font-size: 20px; }
#boxpanel .box-detail-name .box-level { color: #505064; }
#boxpanel .box-types { display: inline-flex; gap: 4px; }
#boxpanel .box-type { padding: 1px 8px; font: 11px sans-serif; text-transform: capitalize; color: #10182c; border: 1px solid rgba(0, 0, 0, .35); border-radius: 9px; }
#boxpanel .box-where { color: #505064; }
#boxpanel .box-meter { margin-top: 7px; }
#boxpanel .box-meter .box-line { margin-bottom: 2px; }
#boxpanel .box-meter .box-bar { height: 9px; }
:is(#boxpanel, #bagpanel) .box-exptext { color: #2050b0; }
:is(#boxpanel, #bagpanel) .box-stats { margin-top: 8px; padding: 6px 8px; background: #ece8d4; border-radius: 3px; }
#boxpanel .box-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; }
#boxpanel .box-skill { display: flex; align-items: center; gap: 5px; padding: 2px 4px 2px 2px; font-size: 12px; color: #e8e8f0; background: #14141e; border-radius: 3px; min-width: 0; }
#boxpanel canvas { position: static; }
#boxpanel .box-skill-icon { flex: none; width: 24px; height: 24px; border-radius: 2px; background: linear-gradient(color-mix(in srgb, var(--c) 70%, transparent), #202030); }
#boxpanel .box-skill-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#boxpanel .box-skill-key { flex: none; font-size: 10px; color: #98a8d0; }
#boxpanel .box-equip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#boxpanel .box-equip-item { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 2px; font-size: 11px; background: #ece8d4; border: 1px solid #c8c0a8; border-radius: 3px; }
:is(#boxpanel, #bagpanel) .box-move { display: block; width: 100%; margin-top: 10px; padding: 7px 8px; font: 16px 'AdvoCut', sans-serif; color: #202020; background: #f8d848; border: 2px solid #404040; border-radius: 3px; box-shadow: 0 3px 0 #906010; cursor: pointer; }
:is(#boxpanel, #bagpanel) .box-move:hover:not(:disabled) { background: #ffe070; }
:is(#boxpanel, #bagpanel) .box-move:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #906010; }
:is(#boxpanel, #bagpanel) .box-move:disabled { color: #808080; background: #d8d4c4; box-shadow: none; cursor: default; }
:is(#boxpanel, #bagpanel) .box-why { margin-top: 5px; font: 12px sans-serif; color: #a04030; }

/* narrower: the box goes under; a phone standing up: one column, the party two by two */
@media (max-width: 860px) {
  #boxpanel .box-body { grid-template-columns: 210px minmax(0, 1fr) 230px; gap: 10px; padding: 10px 10px 4px; }
  #boxpanel .box-box { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); max-height: none; }
}
@media (max-width: 640px) {
  #boxpanel .box-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "detail" "pc"; padding: 10px; }
  #boxpanel .box-detail { position: static; }
  #boxpanel .box-party { display: grid; grid-template-columns: 1fr 1fr; }
  :is(#boxpanel, #bagpanel) .box-card { min-height: 52px; }
  #boxpanel .box-card .box-sprite { --s: 36px !important; }
}
/* a phone lying down: little height, so smaller cards and a shorter stage */
@media (max-height: 520px) {
  :is(#boxpanel, #bagpanel) .box-card { min-height: 44px; padding: 2px 6px 2px 2px; }
  #boxpanel .box-card .box-sprite { --s: 36px !important; }
  #boxpanel .box-party { gap: 4px; }
  #boxpanel .box-stage { height: 76px; }
  #boxpanel .box-sprite.big { --s: 88px !important; }
}
body.touch :is(#boxpanel, #bagpanel) .box-move { min-height: 44px; }

/* the bag (I), in the same frames: the items as a grid of slots in pockets | the item chosen | the party to use it on, and what the chosen one wears */
#bagpanel { width: min(96vw, 900px); }
#bagpanel .bag-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px 250px; grid-template-areas: "items detail side"; gap: 14px; padding: 12px 14px 4px; align-items: start; }
#bagpanel .bag-items { grid-area: items; min-width: 0; }
#bagpanel .bag-detail { grid-area: detail; min-width: 0; position: sticky; top: 0; }
#bagpanel .bag-side { grid-area: side; min-width: 0; }

/* the pockets: tabs over the grid */
#bagpanel .bag-pockets { display: flex; gap: 3px; padding-left: 4px; }
#bagpanel .bag-pocket { flex: 1 1 auto; min-width: 0; margin: 0; padding: 4px 6px 3px; font: 13px 'AdvoCut', sans-serif; color: #505064; background: #d8d4bc; border: 2px solid #404040; border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; white-space: nowrap; }
#bagpanel .bag-pocket:hover { color: #202020; }
#bagpanel .bag-pocket.none { color: #a8a490; }
#bagpanel .bag-pocket.chosen { color: #f8f0c0; background: #2a2a40; text-shadow: 0 1px 0 #000; }

/* the grid: dark slots on the cream, a coloured edge for the rarer gear */
#bagpanel .bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; align-content: start; min-height: 150px; max-height: 420px; overflow-y: auto; padding: 8px; background: #e4e0cc; border: 2px solid #404040; border-radius: 0 3px 3px 3px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18); }
#bagpanel .bag-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 74px; padding: 6px 3px 4px; color: #e8e8f0; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tint, #888) 26%, transparent) 0, transparent 60%), rgba(10, 10, 20, .88); border: 2px solid #444458; border-radius: 3px; cursor: pointer; }
#bagpanel .bag-cell:hover { border-color: #8888a0; }
#bagpanel .bag-cell.tier2 { border-color: #3a6aa8; }
#bagpanel .bag-cell.tier3 { border-color: #c07a18; box-shadow: inset 0 0 8px rgba(255, 176, 64, .35); }
#bagpanel .bag-cell.chosen { border-color: #ffffff; background-color: #2a2a48; box-shadow: 0 0 0 2px #3880f0; }
#bagpanel .bag-cell.empty { background: rgba(0, 0, 0, .06); border: 2px dashed #c8c0a8; cursor: default; box-shadow: none; }
#bagpanel .bag-cell .bag-count { position: absolute; right: 3px; top: 2px; font-size: 11px; color: #f8f0c0; }
#bagpanel .bag-cell-name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; color: #c8c8d8; }

/* the item chosen */
#bagpanel .bag-stage { position: relative; height: 104px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--tint, #888) 45%, transparent) 0, transparent 46%), linear-gradient(#2e2e46, #16161f); border: 2px solid #404040; border-radius: 3px; }
#bagpanel .bag-big { filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .5)); }
#bagpanel .bag-stage .bag-count { position: absolute; right: 7px; bottom: 4px; font-size: 16px; color: #f8f0c0; text-shadow: 0 2px 0 #000; }
#bagpanel .bag-detail-name { font-size: 20px; }
#bagpanel .bag-kind { color: #505064; text-transform: uppercase; letter-spacing: .06em; }
#bagpanel .bag-stars { letter-spacing: 1px; }
#bagpanel .bag-stars.tier1 { color: #3a9a3a; }
#bagpanel .bag-stars.tier2 { color: #2a68c0; }
#bagpanel .bag-stars.tier3 { color: #d07a00; }
#bagpanel .bag-about { margin-top: 6px; font: 13px/1.35 sans-serif; color: #303040; }
#bagpanel .bag-effect { display: inline-block; margin-top: 6px; padding: 2px 8px; font-size: 13px; color: #1c5a24; background: #d8ecc8; border: 1px solid #98c088; border-radius: 3px; }
#bagpanel .bag-compare { margin-top: 8px; padding: 5px 8px; background: #ece8d4; border-radius: 3px; }
#bagpanel .bag-compare b { font-weight: normal; }
#bagpanel .bag-compare b.up { color: #1c8a2c; }
#bagpanel .bag-compare b.down { color: #c03020; }
#bagpanel .bag-swap { margin-top: 3px; font: 11px sans-serif; color: #707080; }
#bagpanel .bag-none { padding: 30px 8px; text-align: center; font: 13px/1.4 sans-serif; color: #707080; }

/* the party, a little smaller than in the Pokémon panel, and the one that the item does nothing to, dim */
#bagpanel .bag-party { display: flex; flex-direction: column; gap: 5px; }
#bagpanel .box-card { min-height: 50px; }
#bagpanel .box-card.unfit:not(.chosen) { opacity: .55; }
#bagpanel .bag-worn { display: inline-flex; gap: 1px; }
#bagpanel .bag-gear { margin-top: 10px; }
#bagpanel .bag-slot { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
#bagpanel .bag-slot-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: radial-gradient(circle, color-mix(in srgb, var(--tint, #888) 30%, transparent) 0, transparent 70%), rgba(10, 10, 20, .88); border: 2px solid #444458; border-radius: 3px; }
#bagpanel .bag-slot.free .bag-slot-icon { background: rgba(0, 0, 0, .06); border: 2px dashed #c8c0a8; }
#bagpanel .bag-slot-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
#bagpanel .bag-slot-name { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #707080; }
#bagpanel .bag-slot-item { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
#bagpanel .bag-slot.free .bag-slot-item { color: #a8a490; }
#bagpanel .bag-off { flex: none; margin: 0; padding: 3px 8px; font: 12px 'AdvoCut', sans-serif; color: #202020; background: #ece8d4; border: 2px solid #404040; border-radius: 3px; cursor: pointer; }
#bagpanel .bag-off:hover { background: #f8d848; }
.panel .bag-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; }
.panel .box-pace { grid-column: 1 / -1; margin-top: 2px; padding-top: 3px; font: 12px sans-serif; color: #505064; border-top: 1px solid #d8d4bc; }
.panel .bag-stat { display: flex; justify-content: space-between; font-size: 12px; }
.panel .bag-stat em { font-style: normal; }
.panel .bag-plus { margin-left: 4px; color: #1c8a2c; }

@media (max-width: 860px) {
  #bagpanel .bag-body { grid-template-columns: minmax(0, 1fr) 210px 220px; gap: 10px; padding: 10px 10px 4px; }
  #bagpanel .bag-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  #bagpanel .bag-cell-name { display: none; }
  #bagpanel .bag-cell { min-height: 56px; }
}
@media (max-width: 640px) {
  #bagpanel .bag-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "items" "detail"; padding: 10px; }
  #bagpanel .bag-detail { position: static; }
  #bagpanel .bag-party { display: grid; grid-template-columns: 1fr 1fr; }
  #bagpanel .box-card .box-sprite { --s: 36px !important; }
  #bagpanel .bag-grid { max-height: none; }
}
@media (max-height: 520px) {
  #bagpanel .box-card { min-height: 40px; padding: 1px 6px 1px 2px; }
  #bagpanel .box-card .box-sprite { --s: 34px !important; }
  #bagpanel .bag-party { gap: 3px; }
  #bagpanel .bag-stage { height: 72px; }
  #bagpanel .bag-grid { max-height: none; }
}
body.touch #bagpanel .bag-pocket { min-height: 36px; font-size: 14px; }
body.touch #bagpanel .bag-off { min-height: 34px; }

/* the world map (O): a map to drag and zoom (src/Game/worldmap.js). The sea, the plates of the regions, the roads, a picture per map; the
   places listed at the left, the buttons and the card of the map chosen over the map. --k is 1 / the zoom: what has to keep its size on the
   screen (names, marks, the dot of the player) is multiplied by it */
#worldmap { width: min(97vw, 1180px); height: min(760px, calc(100dvh - 24px)); }
#worldmap .panel-body { display: flex; overflow: hidden; }
#worldmap .wm { position: relative; flex: 1; min-width: 0; display: flex; }
#worldmap .wm-places { flex: none; width: 150px; overflow-y: auto; padding: 10px 8px 10px 12px; }
#worldmap .wm-places .panel-head { margin-top: 8px; font-size: 12px; }
#worldmap .wm-places .panel-head:first-child { margin-top: 0; }
#worldmap .wm-places button { display: block; width: 100%; margin: 0 0 2px; padding: 3px 8px; font: 14px 'AdvoCut', sans-serif; text-align: left; color: #303040; background: transparent; border: 2px solid transparent; border-radius: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#worldmap .wm-places button:hover { background: #ece8d4; }
#worldmap .wm-places button.chosen { color: #f8f0c0; background: #2a2a40; }
#worldmap .wm-places button.here::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; vertical-align: 1px; background: #ffd84a; border: 2px solid #202020; border-radius: 50%; }
#worldmap .wm-places button.quest::before { content: "!"; display: inline-block; width: 13px; margin-right: 4px; font: bold 11px/13px sans-serif; text-align: center; color: #10182c; background: #ffe070; border-radius: 50%; }
#worldmap .wm-view { position: relative; flex: 1; min-width: 0; overflow: hidden; margin: 8px 8px 8px 0; background: radial-gradient(circle at 30% 20%, #3f7fa6 0, #2c6388 45%, #214b6a 100%); border: 2px solid #404040; border-radius: 3px; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#worldmap .wm-view:active { cursor: grabbing; }
#worldmap .wm-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
#worldmap .wm-world.fly { transition: transform .3s ease; }
#worldmap .wm-inner { position: absolute; }
#worldmap .wm-region { position: absolute; background: #e8dcb4; border: 3px solid #5a4a30; border-radius: 22px; box-shadow: 0 0 0 6px rgba(232, 220, 180, .25), 0 6px 18px rgba(0, 0, 0, .35); }
#worldmap .wm-region span { position: absolute; left: 14px; top: 6px; transform-origin: 0 0; transform: scale(var(--k)); font: 15px 'AdvoCut', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6a5838; white-space: nowrap; }
#worldmap .worldmap-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
#worldmap .worldmap-lines path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#worldmap .wm-road-edge { stroke: #5a4a30; stroke-width: 8; }
#worldmap .wm-road { stroke: #d8b878; stroke-width: 4; }
#worldmap .wm-sea { stroke: #f4f8ff; stroke-width: 2.5; stroke-dasharray: 7 6; opacity: .85; }
#worldmap .worldmap-cell { position: absolute; cursor: pointer; }
#worldmap .worldmap-thumb { position: absolute; inset: 0; background: #203020; outline: calc(2px * var(--k)) solid #404040; }
#worldmap .worldmap-thumb img { position: static; display: block; width: 100%; height: 100%; pointer-events: none; }
#worldmap .near .worldmap-thumb img { image-rendering: pixelated; }
#worldmap .worldmap-cell:hover .worldmap-thumb { outline-color: #ffffff; }
#worldmap .worldmap-cell.here .worldmap-thumb { outline: calc(3px * var(--k)) solid #ffd84a; }
#worldmap .worldmap-cell.chosen .worldmap-thumb { outline: calc(3px * var(--k)) solid #ffffff; box-shadow: 0 0 0 calc(5px * var(--k)) #3880f0; }
#worldmap .worldmap-label { position: absolute; z-index: 2; left: 50%; top: 100%; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(var(--k)); padding: 0 6px; font: 14px 'AdvoCut', sans-serif; line-height: 18px; color: #202020; white-space: nowrap; background: rgba(248, 248, 232, .92); border: 1px solid #5a4a30; border-radius: 3px; pointer-events: none; }
#worldmap .worldmap-cell.here .worldmap-label { background: #ffd84a; }
#worldmap .tiny .worldmap-label { display: none; }
#worldmap .tiny .worldmap-cell:is(.here, .chosen, :hover) .worldmap-label { display: block; }
#worldmap .worldmap-quests { position: absolute; z-index: 1; left: 3px; top: 3px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; transform-origin: 0 0; transform: scale(min(1, var(--k))); max-width: 100%; }
#worldmap .far .worldmap-quests { flex-direction: row; transform: scale(var(--k)); }
#worldmap .worldmap-pin { max-width: 120px; padding: 1px 5px; font: bold 11px/15px sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #14203a; background: #c8c8c8; border: 1px solid #202020; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
#worldmap .far .worldmap-pin { width: 17px; padding: 1px 0; text-align: center; border-radius: 50%; }
#worldmap .far .worldmap-pin span { display: none; }
#worldmap .worldmap-pin.offer { background: #ffe070; }
#worldmap .worldmap-pin.talk { background: #ffd84a; }
#worldmap .worldmap-pin.hunt { background: #f0b0e0; }
#worldmap .worldmap-pin.followed { background: #7ef0ff; outline: 2px solid #ffffff; }
/* the player: a dot that beats, the size of a finger's tip whatever the zoom */
#worldmap .wm-me { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; transform: scale(var(--k)); background: #ff4040; border: 3px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 2px #202020; pointer-events: none; }
#worldmap .wm-me::after { content: ""; position: absolute; inset: -9px; border: 3px solid #ff4040; border-radius: 50%; animation: wm-beat 1.4s ease-out infinite; }
@keyframes wm-beat { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
/* the buttons over the map, top right */
#worldmap .wm-tools { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
#worldmap .wm-tools button { width: 34px; height: 34px; margin: 0; padding: 0; font: 20px/30px sans-serif; color: #e8e8f0; background: rgba(20, 20, 30, .9); border: 2px solid #5a5a70; border-radius: 3px; cursor: pointer; }
#worldmap .wm-tools button:hover { color: #fff; border-color: #ffd84a; }
#worldmap .wm-me-icon { display: inline-block; width: 10px; height: 10px; background: #ff4040; border: 2px solid #fff; border-radius: 50%; vertical-align: 1px; }
#worldmap .wm-places-button { display: none; }
/* the card of the map chosen, bottom left over the map */
#worldmap .wm-card { display: none; position: absolute; left: 8px; bottom: 8px; width: 250px; max-height: calc(100% - 16px); overflow-y: auto; padding: 8px 10px 10px; font: 13px/1.35 sans-serif; color: #303040; background: #f8f8e8; border: 3px solid #404040; border-radius: 4px; box-shadow: inset 0 0 0 2px #e0dcc4, 0 6px 16px rgba(0, 0, 0, .45); cursor: default; }
#worldmap .wm-card.open { display: block; }
#worldmap .wm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#worldmap .wm-card-head b { font: 20px 'AdvoCut', sans-serif; font-weight: normal; color: #202020; }
#worldmap .wm-card-x { flex: none; width: 24px; height: 24px; margin: 0; padding: 0; font: 13px/20px sans-serif; color: #505064; background: transparent; border: 2px solid #c8c0a8; border-radius: 3px; cursor: pointer; }
#worldmap .wm-card-sub { color: #707080; }
#worldmap .wm-card-sub.here { display: inline-block; padding: 0 6px; color: #202020; background: #ffd84a; border-radius: 3px; }
#worldmap .wm-card-section { margin-top: 8px; }
#worldmap .wm-card-title { margin-bottom: 3px; font: 13px 'AdvoCut', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #505064; }
#worldmap .wm-mons { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
#worldmap .wm-mon { display: inline-flex; background: rgba(10, 10, 20, .88); border: 2px solid #444458; border-radius: 3px; }
#worldmap .wm-mon.night { border-color: #8a70e0; }
#worldmap .wm-mon.rare { border-color: #e0b020; }
#worldmap .wm-mon.boss, #worldmap .wm-mon.raid { border-color: #e06040; }
#worldmap .wm-mon.shadow .box-sprite { filter: brightness(0) opacity(.6); }
#worldmap .wm-unknown { margin-left: 4px; color: #707080; }
#worldmap .wm-quest { margin-bottom: 2px; padding: 2px 6px; background: #ece8d4; border-left: 4px solid #c8c8c8; border-radius: 2px; }
#worldmap .wm-quest.offer, #worldmap .wm-quest.talk { border-left-color: #e0b020; }
#worldmap .wm-quest.hunt { border-left-color: #e080c8; }
#worldmap .wm-quest.followed { border-left-color: #30b8d0; }
#worldmap .wm-links { display: flex; flex-wrap: wrap; gap: 4px; }
#worldmap .wm-links .panel-btn { padding: 2px 8px; font-size: 13px; }

/* narrower or short: the places are a list opened by a button of the map */
@media (max-width: 760px), (max-height: 520px) {
  #worldmap .wm-places { display: none; position: absolute; z-index: 2; left: 8px; top: 8px; bottom: 8px; width: 170px; background: #f8f8e8; border: 3px solid #404040; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
  #worldmap .wm.places-open .wm-places { display: block; }
  #worldmap .wm-places-button { display: block; }
  #worldmap .wm-view { margin-left: 8px; }
}
/* a phone held up: the card is a band at the bottom */
@media (max-width: 520px) {
  #worldmap .wm-card { left: 6px; right: 6px; bottom: 6px; width: auto; max-height: 45%; }
}
/* a phone lying down: the card at the left, narrower */
@media (max-height: 520px) {
  #worldmap .wm-card { width: 220px; padding: 6px 8px 8px; }
  #worldmap .wm-card-head b { font-size: 17px; }
  #worldmap .wm-view { margin-top: 6px; margin-bottom: 6px; }
}
body.touch #worldmap .wm-tools button { width: 40px; height: 40px; font-size: 22px; line-height: 36px; }
body.touch #worldmap .wm-card-x { width: 32px; height: 32px; }
body.touch #worldmap .wm-links .panel-btn { min-height: 32px; }
body.touch #worldmap .wm-places button { padding: 7px 8px; }

/* the Pokédex (K): the list (a search, the filters as tabs, every species as a slot on a tray) | the one chosen. Its height is fixed: the
   tray scrolls, the one chosen stays in sight */
#pokedex { width: min(96vw, 880px); height: min(640px, calc(100dvh - 24px)); }
#pokedex .panel-body { display: flex; overflow: hidden; }
#pokedex .dex-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; padding: 12px 14px 6px; }
#pokedex .dex-list { min-height: 0; display: flex; flex-direction: column; }
#pokedex .dex-search { flex: none; margin-bottom: 8px; }
#pokedex .dex-filters { flex: none; }
#pokedex .dex-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; align-content: start; font-size: 13px; color: #707080; }
#pokedex .dex-cell { position: relative; padding: 3px 2px 4px; text-align: center; background: rgba(0, 0, 0, .06); border: 2px dashed #c8c0a8; border-radius: 3px; cursor: default; }
#pokedex .dex-cell.seen, #pokedex .dex-cell.wanted { color: #e8e8f0; background: rgba(10, 10, 20, .88); border: 2px solid #444458; cursor: pointer; }
#pokedex .dex-cell.seen:hover, #pokedex .dex-cell.wanted:hover { border-color: #8888a0; }
#pokedex .dex-cell.caught { border-color: #6a6a88; }
#pokedex .dex-cell.selected { border: 2px solid #ffffff; background-color: #2a2a48; box-shadow: 0 0 0 2px #3880f0; }
#pokedex .dex-cell:not(.seen):not(.wanted).selected { background: #d8d4bc; border-color: #404040; }
#pokedex .dex-cell.caught::after, #pokedex .dex-ball { content: ""; position: absolute; right: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #10182c; background: linear-gradient(#e83838 45%, #10182c 45%, #10182c 55%, #f4f4f4 55%); }
#pokedex .dex-number { padding-left: 3px; font-size: 11px; text-align: left; color: #a8a490; }
#pokedex .dex-cell.seen .dex-number, #pokedex .dex-cell.wanted .dex-number { color: #9898b0; }
#pokedex .dex-picture { width: 56px; height: 56px; margin: -4px auto -4px; background-size: 168px 224px; background-position: 0 0; background-repeat: no-repeat; image-rendering: pixelated; }
#pokedex .dex-cell:not(.seen) .dex-picture::before { content: "?"; display: block; line-height: 56px; font-size: 24px; color: #c8c0a8; }
#pokedex .dex-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
#pokedex .dex-cell:not(.seen) .dex-name { color: #a8a490; }
#pokedex .dex-cell.wanted::before { content: "!"; position: absolute; left: 4px; top: 16px; width: 14px; height: 14px; line-height: 14px; font: bold 11px sans-serif; color: #10182c; background: #ffe070; border-radius: 50%; }
#pokedex .dex-cell.wanted:not(.seen) .dex-picture { filter: brightness(0) opacity(.7); }
#pokedex .dex-cell.wanted:not(.seen) .dex-picture::before { content: none; }
#pokedex .dex-cell.wanted:not(.seen) .dex-name { color: #c8c8d8; }

/* the one chosen */
#pokedex .dex-side { min-height: 0; overflow-y: auto; }
#pokedex .dex-none { grid-column: 1 / -1; padding: 40px 12px; text-align: center; font: 13px/1.4 sans-serif; color: #707080; }
#pokedex .dex-stage { position: relative; height: 116px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; background: radial-gradient(ellipse 60% 22% at 50% 88%, #7cc860 0%, #5aa848 60%, transparent 62%), linear-gradient(#cfe8f8, #f0f4e0); border: 2px solid #404040; border-radius: 3px; }
#pokedex .dex-stage .dex-ball { top: 6px; right: 6px; width: 16px; height: 16px; }
#pokedex .dex-stage .box-sprite.shadow { filter: brightness(0) opacity(.6); animation: none; }
#pokedex .dex-unknown::before { content: "?"; font-size: 44px; color: #a8a490; }
#pokedex .dex-detail-name { font-size: 20px; }
#pokedex .dex-detail-name b { font-weight: normal; }
#pokedex .dex-types { display: flex; gap: 4px; margin-top: 3px; }
#pokedex .dex-type { padding: 1px 8px; font: 11px sans-serif; text-transform: capitalize; color: #10182c; border: 1px solid rgba(0, 0, 0, .35); border-radius: 9px; }
#pokedex .dex-status { margin-top: 4px; color: #505064; }
#pokedex .dex-where { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; font: 13px/1.35 sans-serif; color: #303040; }
#pokedex .dex-where-title { margin: 0 2px 2px; font: 14px 'AdvoCut', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #505064; }
#pokedex .dex-place { display: flex; align-items: center; gap: 5px; padding: 3px 7px; background: #ece8d4; border: 1px solid #c8c0a8; border-radius: 3px; }
#pokedex .dex-place.here { border: 1px solid #b08a10; background: #f8ecb0; }
#pokedex .dex-place b { flex: 1; min-width: 0; font-weight: normal; }
#pokedex .dex-kind { padding: 0 6px; font-size: 11px; color: #10182c; background: #b8c8e8; border-radius: 7px; }
#pokedex .dex-kind.night { background: #c4b4ff; }
#pokedex .dex-kind.rare { background: #ffe070; }
#pokedex .dex-kind.boss, #pokedex .dex-kind.raid { background: #ff9a80; }
#pokedex .dex-levels { color: #707080; white-space: nowrap; }

@media (max-width: 700px) {
  #pokedex .dex-body { grid-template-columns: minmax(0, 1fr) 200px; gap: 10px; padding: 8px 10px 4px; }
  #pokedex .dex-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  #pokedex .dex-picture { width: 48px; height: 48px; background-size: 144px 192px; }
  #pokedex .dex-cell:not(.seen) .dex-picture::before { line-height: 48px; }
}
/* a phone held up: the list over the one chosen, which is a band at the bottom */
@media (max-width: 520px) {
  #pokedex .dex-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  #pokedex .dex-side { max-height: 40vh; border-top: 2px solid #d8d4bc; padding-top: 6px; }
  #pokedex .dex-detail { display: grid; grid-template-columns: 88px 1fr; column-gap: 10px; align-items: start; }
  #pokedex .dex-stage { grid-row: 1 / span 3; height: 80px; margin: 0; }
  #pokedex .dex-stage .box-sprite { --s: 72px !important; }
  #pokedex .dex-none { padding: 6px; }
  #pokedex .dex-counts { font-size: 12px; padding: 2px 8px; }
}
/* a phone lying down: little height, so the search and the note give way */
@media (max-height: 520px) {
  #pokedex .dex-body { padding-top: 8px; }
  #pokedex .dex-search { padding: 3px 8px; margin-bottom: 5px; }
  #pokedex .dex-stage { height: 84px; }
  #pokedex .dex-stage .box-sprite { --s: 72px !important; }
}

/* the menu that opens when another player is clicked */
#playermenu {
  display: none;
  position: fixed;
  z-index: 15;
  width: 160px;
  padding: 8px;
  font: 14px sans-serif;
  color: #f4f4f4;
  background: rgba(14, 14, 26, .96);
  border: 2px solid #f8f0c0;
  border-radius: 4px;
}
#playermenu.open { display: block; }
#playermenu .pm-name { margin-bottom: 6px; color: #f8f0c0; font-weight: bold; }
#playermenu button { display: block; width: 100%; margin: 0 0 4px; padding: 6px 8px; text-align: left; font: inherit; color: #fff; background: #35508a; border: 1px solid #8fa8dc; border-radius: 3px; cursor: pointer; }
#playermenu button:hover { background: #4a6ab0; }

/* the pictures of the menu in the grid of a phone (src/Game/menubar.js, controls.js; with a keyboard the canvas draws them): the sound
   with its waves or crossed out, a red dot for something new */
.tc-grid .mb-waves { display: inline; }
.tc-grid .mb-muted { display: none; }
.tc-grid .muted .mb-waves { display: none; }
.tc-grid .muted .mb-muted { display: inline; }
.mb-dot {
  display: none;
  position: absolute; right: -4px; top: -4px;
  width: 10px; height: 10px;
  background: #ff3b30;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 60, 40, .9);
}
.new > .mb-dot { display: block; }

/* ---- a touch screen (body.touch, see src/Game/controls.js and layout.js) ---- */
/* the page is the screen: it does not bounce (older iPhones ignore overscroll-behavior), and a double tap is two taps, not a zoom */
body.touch { position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
body.touch, body.touch * { touch-action: manipulation; }
body.touch canvas { touch-action: none; }
body.touch #stats { display: none !important; }

#touch-controls { display: none; }
body.touch #touch-controls { display: block; }
body.chatting #touch-controls { display: none; }

#touch-controls .tc-pad,
#touch-controls .tc-action,
#touch-controls .tc-menu-button {
  position: fixed;
  z-index: 7;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* the D-pad: a disc with an arrow to each side, and a knob that follows the finger */
#touch-controls .tc-pad {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 20, 34, .35) 0%, rgba(20, 20, 34, .55) 100%);
  border: 3px solid rgba(248, 240, 192, .45);
}
#touch-controls .tc-pad.held { border-color: rgba(248, 240, 192, .9); }
#touch-controls .tc-pad.running { box-shadow: 0 0 14px 2px rgba(255, 216, 74, .8); }
#touch-controls .tc-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 38%; height: 38%;
  margin: -19% 0 0 -19%;
  border-radius: 50%;
  background: rgba(248, 240, 192, .55);
  border: 2px solid rgba(248, 240, 192, .9);
  pointer-events: none;
}
#touch-controls .tc-pad i {
  position: absolute;
  width: 0; height: 0;
  border: 8px solid transparent;
  pointer-events: none;
  opacity: .8;
}
#touch-controls .tc-pad .tc-up    { left: calc(50% - 8px); top: 6px;    border-bottom-color: #f8f0c0; border-top-width: 0; }
#touch-controls .tc-pad .tc-down  { left: calc(50% - 8px); bottom: 6px; border-top-color: #f8f0c0; border-bottom-width: 0; }
#touch-controls .tc-pad .tc-left  { top: calc(50% - 8px); left: 6px;    border-right-color: #f8f0c0; border-left-width: 0; }
#touch-controls .tc-pad .tc-right { top: calc(50% - 8px); right: 6px;   border-left-color: #f8f0c0; border-right-width: 0; }
#touch-controls .tc-pad[data-direction=up] .tc-up,
#touch-controls .tc-pad[data-direction=down] .tc-down,
#touch-controls .tc-pad[data-direction=left] .tc-left,
#touch-controls .tc-pad[data-direction=right] .tc-right { opacity: 1; filter: drop-shadow(0 0 4px #fff); }

/* the action button */
#touch-controls .tc-action {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font: bold 26px sans-serif;
  color: #f8f0c0;
  background: rgba(40, 80, 150, .6);
  border: 3px solid rgba(248, 240, 192, .8);
  text-shadow: 0 2px 2px #000;
}
#touch-controls .tc-action.held { background: rgba(70, 120, 210, .9); }

/* the menu button (three bars) and its list */
#touch-controls .tc-menu-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15%;
  border-radius: 8px;
  background: rgba(20, 20, 34, .6);
  border: 2px solid rgba(248, 240, 192, .6);
}
#touch-controls .tc-menu-button span { display: block; width: 52%; height: 3px; border-radius: 2px; background: #f8f0c0; }

#touch-controls .tc-sheet {
  display: none;
  position: fixed;
  z-index: 13;
  min-width: 220px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  padding: 6px;
  text-align: left;
  background: rgba(20, 20, 34, .96);
  border: 2px solid #f8f0c0;
  border-radius: 6px;
}
#touch-controls .tc-sheet.open { display: block; }
#touch-controls .tc-sheet button {
  display: block; width: 100%; min-height: 46px; margin: 0 0 4px; padding: 8px 12px;
  text-align: left; font: 16px sans-serif; color: #fff;
  background: #35508a; border: 1px solid #8fa8dc; border-radius: 4px;
}
#touch-controls .tc-sheet button:last-child { margin-bottom: 0; }
#touch-controls .tc-sheet button:active { background: #4a6cb0; }
#touch-controls .tc-sheet .tc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
#touch-controls .tc-sheet .tc-grid button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 76px; min-height: 64px; margin: 0; padding: 6px 2px; text-align: center; font-size: 12px; line-height: 1.1;
}
#touch-controls .tc-sheet .tc-grid .mb-icon { width: 28px; height: 28px; }
#touch-controls .tc-sheet .tc-grid .mb-dot { right: 3px; top: 3px; }
#touch-controls .tc-menu-button > .mb-dot { right: -5px; top: -5px; width: 12px; height: 12px; }

/* an iPhone in Safari cannot fill the screen by itself: this says what does (added to the home screen) */
#touch-controls .tc-install {
  display: none;
  position: fixed;
  z-index: 14;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  padding: 14px 16px;
  text-align: left;
  font: 16px/1.4 sans-serif;
  background: rgba(20, 20, 34, .97);
  border: 2px solid #f8f0c0;
  border-radius: 6px;
}
#touch-controls .tc-install.open { display: block; }
#touch-controls .tc-install > b { display: block; font-size: 18px; color: #f8f0c0; }
#touch-controls .tc-install p { margin: 8px 0 12px; }
#touch-controls .tc-install .tc-share { color: #8fc0ff; font-weight: bold; }
#touch-controls .tc-install button {
  display: block; width: 100%; min-height: 46px; padding: 8px 12px;
  font: 16px sans-serif; color: #fff; background: #35508a; border: 1px solid #8fa8dc; border-radius: 4px;
}

/* the line of the chat, on top of the keyboard of the phone */
body.touch #chat {
  left: 10px; right: 10px; bottom: 10px; width: auto;
  padding: 10px 12px;
  font-size: 18px;
}

/* a phone held up (src/Game/orientation.js): over everything, the loading and the login too, until it is turned */
#turn { display: none; }
#turn.open {
  position: fixed; z-index: 40; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center;
  font: 16px sans-serif; color: #f4f4f4;
  background: radial-gradient(ellipse at 50% 35%, #2a3d68 0%, #14203a 55%, #0b1224 100%);
}
#turn b { font-family: 'AdvoCut', sans-serif; font-size: 30px; font-weight: normal; color: #f8c020; }
#turn p { max-width: 300px; margin: 0; line-height: 1.4; color: #c8d0e0; }
#turn button { min-height: 46px; padding: 10px 22px; font: 17px sans-serif; color: #fff; background: #35508a; border: 2px solid #f8f0c0; border-radius: 6px; }
#turn .turn-phone { width: 96px; height: 96px; animation: turn-phone 2.4s ease-in-out infinite; }
@keyframes turn-phone { 0%, 20% { transform: rotate(0deg); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }

/* the messages of the page on a phone: smaller, never wider than the room between the Pokémon and the menu (hud.js puts them, drawDuel) */
body.touch #toasts { max-width: min(420px, calc(100vw - 28px)); }
body.touch #toasts .toast { font-size: 13px; max-width: 100%; text-align: center; }

/* the panels on a phone: as big as the screen allows, the ✕ big enough for a thumb (there is no Esc), buttons a finger can hit */
body.touch .panel { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
body.touch .panel .panel-x { width: 44px; height: 38px; font-size: 20px; line-height: 34px; }
body.touch .panel .panel-tab { min-height: 36px; font-size: 14px; }
body.touch .panel .panel-btn { min-height: 40px; font-size: 16px; }
@media (max-height: 520px) {
  .panel .panel-bar { padding: 3px 6px 3px 12px; }
  .panel .panel-title { font-size: 19px; }
  .panel .panel-note { padding: 2px 12px 4px; }
}
/* (the page does not let text be selected, but a line to type in has to be typed in) */
input, textarea { -webkit-user-select: text; -moz-user-select: text; user-select: text; }
body.touch #playermenu { width: 220px; }
body.touch #playermenu button { min-height: 46px; margin-bottom: 6px; font-size: 16px; }
body.touch #playermenu .pm-name { font-size: 16px; margin-bottom: 8px; }

/* ---- the loading screen and the login form (index.html, src/Game/login.js) ---- */
#loader {
  position: fixed;
  z-index: 25;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 35%, #2a3d68 0%, #14203a 55%, #0b1224 100%);
  opacity: 1;
  transition: opacity .35s ease;
}
#loader.gone { opacity: 0; pointer-events: none; }
#loader .loader-box { width: min(100%, 380px); margin: auto; font: 16px sans-serif; color: #f4f4f4; }
#loader .loader-title { font-family: 'AdvoCut', sans-serif; font-size: 44px; color: #f8c020; text-shadow: 0 3px 0 #3a5ba8, 0 0 18px rgba(248, 192, 32, .25); margin-bottom: 22px; letter-spacing: 1px; }
#loader .loader-bar { height: 12px; background: #0e1830; border: 2px solid #8fa8dc; border-radius: 8px; overflow: hidden; }
#loader .loader-fill { width: 0; height: 100%; background: linear-gradient(90deg, #f8c020, #ffe070); border-radius: 6px; transition: width .2s ease; }
#loader .loader-text { margin-top: 8px; min-height: 1.3em; font-size: 13px; color: #c8d4f0; }

#login { display: none; margin-top: 20px; padding: 16px 18px 14px; text-align: left; background: #1c2a4a; border: 3px solid #f4f4f4; border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
#login.open { display: block; }
#login .login-tabs { display: flex; gap: 6px; margin-bottom: 6px; }
#login .login-tabs button { flex: 1; }
#login button { font: inherit; color: #fff; background: #35508a; border: 2px solid #8fa8dc; border-radius: 4px; padding: 8px 12px; cursor: pointer; }
#login button.on { background: #f8c020; color: #202020; border-color: #fff; }
#login button:disabled { opacity: .6; cursor: default; }
#login label { display: block; margin: 8px 0; }
#login input:not([type=checkbox]) { display: block; width: 100%; margin-top: 3px; padding: 8px; font: inherit; font-size: 16px; color: #fff; background: #0e1830; border: 2px solid #8fa8dc; border-radius: 4px; }
#login input:not([type=checkbox]):focus { border-color: #f8c020; }
#login .login-again { display: none; }
#login.register .login-again { display: block; }
#login .login-remember { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #dce4f8; cursor: pointer; }
#login .login-remember input { width: 18px; height: 18px; margin: 0; accent-color: #f8c020; }
#login .login-note { font-size: 13px; color: #c8d4f0; margin: 6px 0 2px; }
#login .login-error { min-height: 1.2em; color: #ff9080; font-size: 14px; }
#login .login-go { width: 100%; margin-top: 4px; background: #f8c020; color: #202020; border-color: #fff; font-weight: bold; }
#login .login-warning { margin-bottom: 10px; padding: 6px 8px; font-size: 13px; color: #2a1a00; background: #f8c020; border-radius: 4px; }
body.touch #login button, body.touch #login input:not([type=checkbox]) { min-height: 44px; }
/* (a phone in landscape: the title and the bar take less of the height the form needs) */
@media (max-height: 520px) {
  #loader { padding: 8px 16px; }
  #loader .loader-box { width: min(100%, 560px); }
  #loader .loader-title { font-size: 24px; margin-bottom: 6px; }
  #loader .loader-text { margin-top: 4px; }
  #login { margin-top: 8px; padding: 8px 14px; display: none; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  #login.open { display: grid; }
  #login > :not(label), #login .login-remember { grid-column: 1 / -1; }
  #login .login-note { display: none; }
  #login label { margin: 4px 0; font-size: 14px; }
  #login.register .login-again { grid-column: 1 / -1; }
  body.touch #login button, body.touch #login input:not([type=checkbox]) { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
}