/* ===== shared parts (js/shell/shell.js) ===== */

:root {
  --bg: #4b413d;
  --paper: #615651;
  --band: #3d3532;
  --red: #7f3434;
  --red-edge: #682a2a;
  --cream: #dcbdb0;
  --disc: #ece3de;
  --ink: #2f2826;
  --surface: #ece3de;
  --surface-2: #d9cbc4;
  --field: #f6efec;
  --bar: #7f3434;
  --line: #5a2424;
  --accent: #dcbdb0;
  --on-dark: #f3e7e1;
}

body {
  background-color: var(--bg);
}

#app {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* beside the centred column on wide screens: the table's own colour, so no edge of the column shows */
html,
body {
  background: var(--band);
}

/* the frame: full screen on phones, an upright centred column on wide screens */
.shell-frame {
  position: absolute;
  background-color: var(--band);
}

/* the whole page boils as one picture (js/shell/shell.js boil): one filter on the page, nothing is filtered on its own */
.bag-boil {
  filter: url(#bag-boil);
}

.is-boiled .modal,
.is-boiled .popover {
  filter: url(#bag-boil);
}

/* the table (the stage canvas) fills the whole page; the banner, the basic buttons, the tool buttons and the choice strip float
   on top of it. Only their own bodies take touches: the room between them goes through to the table. */
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* title banner, drawn as the crimped top seal of a packet */
.shell-head {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 3;
  height: calc(var(--u) * 21);
}

.shell-banner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.shell-title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--u) * 13.5);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 7.4);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--cream);
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}

/* on a very short screen the frame unit is small: the title shrinks a little so it keeps clear of the language switch */
.is-tight .shell-title {
  font-size: calc(var(--u) * 6.2);
}

/* language: one pill split in two, no seam; at least 12px from the screen edge; the hit area is 44px tall */
.shell-lang {
  position: absolute;
  right: calc(var(--u) * 1 + 12px);
  top: calc(var(--u) * 6.75);
  height: 44px;
  margin-top: -22px;
  display: flex;
  align-items: center;
}

.shell-lang-pill {
  display: flex;
  border: calc(var(--lu) * 0.45) solid var(--cream);
  border-radius: 999px;
  overflow: hidden;
}

.shell-lang-half {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--lu) * 6.4);
  height: calc(var(--lu) * 5.6);
  padding: 0 calc(var(--lu) * 1.3);
  font-size: calc(var(--lu) * 3);
  font-weight: 900;
  line-height: 1;
  color: var(--cream);
  background: transparent;
}

.shell-lang-half::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  margin-top: -22px;
}

.shell-lang-half.is-on {
  background: var(--cream);
  color: var(--red);
}

/* the five basic buttons: one flat strip, centred under the banner. Fixed size, never scaled with the screen:
   each button 44 wide and 30 tall (at most 48 x 32), its icon 18; the hit area grows to 44 tall with ::after */
.shell-icons {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 21);
  width: 100%;
  z-index: 3;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  /* the banner's seal teeth end 1.1u above this row and the table starts 2u below it: shift the buttons down
     by half the difference so they sit midway between the two */
  padding-top: calc(var(--u) * 0.9);
}

.shell-icons .shell-icon {
  background: #6e615b;
  pointer-events: auto;
  position: relative;
  width: 44px;
  height: 30px;
  min-width: 0;
  min-height: 0;
  margin: 0 3px;
  border-radius: 9px;
}

.shell-icons .shell-icon.is-off {
  background: #4a413d;
  color: #8c7d76;
}

.shell-icons .shell-icon::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  bottom: -7px;
}

.shell-icons .shell-icon .icon {
  width: 18px;
  height: 18px;
}

.shell-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 11.5);
  height: calc(var(--u) * 11.5);
  min-width: 44px;
  min-height: 44px;
  margin: 0 calc(var(--u) * 1.6);
  border-radius: 50%;
  background: var(--band);
  color: var(--cream);
}

.shell-icon .icon {
  display: flex;
  width: 52%;
  height: 52%;
}

.shell-icon .icon svg {
  width: 100%;
  height: 100%;
}

.shell-icon.is-off {
  background: #82756f;
  color: #b9aaa3;
  cursor: default;
}

/* the bag's tool buttons: a small column at the top right of the table */
.bag-tools {
  position: absolute;
  z-index: 2;
  right: calc(var(--u) * 3);
  top: calc(var(--u) * 26 + 40px);
  display: flex;
  flex-direction: column;
}

.bag-tools .shell-icon {
  margin: 0 0 calc(var(--u) * 2.4);
}

.shell-glyph {
  background: var(--disc);
}

.shell-glyph canvas {
  width: 100%;
  height: 100%;
}

.shell-glyph.is-on {
  box-shadow: 0 0 0 calc(var(--u) * 0.9) var(--red), 0 0 0 calc(var(--u) * 1.7) var(--disc);
}

/* tab strip: tabs on top of one cream panel; the open tab joins the panel */
.shell-strip {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 3;
  pointer-events: none;
  padding: 0 calc(var(--u) * 3) calc(var(--u) * 3);
}

.shell-strip .shell-tabs,
.shell-strip .shell-panel {
  pointer-events: auto;
}

.shell-tabs {
  display: flex;
}

.shell-tab {
  flex: 1 1 0;
  min-height: 44px;
  height: calc(var(--u) * 10);
  margin-right: calc(var(--u) * 1);
  border-radius: calc(var(--u) * 2.4) calc(var(--u) * 2.4) 0 0;
  background: #cdbfb8;
  color: var(--red);
  font-size: calc(var(--u) * 3.8);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.shell-tab:last-child {
  margin-right: 0;
}

.shell-tab.is-on {
  background: var(--disc);
}

.shell-panel {
  position: relative;
  overflow: hidden;
  height: calc(var(--u) * 21);
  min-height: 56px;
  border-radius: 0 0 calc(var(--u) * 2.4) calc(var(--u) * 2.4);
  background: var(--disc);
}

.shell-rows {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.shell-row {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.shell-row.is-on {
  visibility: visible;
}

.shell-row-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 calc(var(--u) * 2);
}

.shell-pick {
  position: relative;
  flex: none;
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
  min-width: 44px;
  min-height: 44px;
  margin-right: calc(var(--u) * 1);
}

.shell-pick canvas {
  width: 100%;
  height: 100%;
}

.shell-pick-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.shell-pick-icon .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: var(--band);
  color: var(--cream);
}

.shell-pick-icon .icon svg {
  width: 56%;
  height: 56%;
}

.shell-pick-icon.is-on .icon {
  box-shadow: 0 0 0 calc(var(--u) * 0.8) var(--red);
}

/* small x on a character's corner after a long press */
.shell-pick-x {
  position: absolute;
  right: 0;
  top: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  background: var(--red);
  color: var(--disc);
}

.shell-pick-x .icon {
  display: flex;
  width: 58%;
  height: 58%;
}

.shell-pick-x .icon svg {
  width: 100%;
  height: 100%;
}

.shell-pick.is-deleting .shell-pick-x {
  display: flex;
}

button:focus-visible {
  box-shadow: 0 0 0 calc(var(--u) * 0.6) var(--cream);
  border-radius: calc(var(--u) * 2);
}

/* message: text only, no background, no border; under the title and the round buttons, on the dark strip */
.shell-frame {
  --toast-top: calc(var(--u) * 21 + 46px);
}

.shell-frame .toast {
  border: 0;
  background: transparent;
  color: var(--on-dark);
  font-weight: 900;
}

.shell-frame .toast-action {
  border: 0;
  background: transparent;
  color: var(--cream);
  text-decoration: underline;
}

/* ===== page: bag (js/pages/bag.js) ===== */

.bag-mid {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.bag-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}