/* Home is part of the landscape. The greeting and menu occupy opposite corners. */
.at-home #world::before {
  background: linear-gradient(180deg,#172d2c9c 0%,#1d302b3a 24%,transparent 45%),
              linear-gradient(90deg,#182f313d,transparent 62%);
}
.at-home .scorebar, .at-home header :is(#goHome,#ranking,#journal) {display: none;}
.at-home header {z-index: 2;}
.home-intro {
  position: absolute; left: var(--safe); top: clamp(85px,13vh,150px);
  max-width: min(680px,85%); color: #fff6db;
  text-shadow: 0 2px 0 #24392dd9, 0 3px 16px #1c302e75;
}
.home-calendar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  color: #fff4cd; font: 650 clamp(11px,1.15vw,15px)/1.4 var(--mono);
  font-variant-numeric: tabular-nums;
}
#hello {
  margin: 7px 0 2px; font: 700 clamp(36px,5.4vw,78px)/1.04 Georgia,serif;
  letter-spacing: -.055em; overflow-wrap: anywhere;
}
#hello:focus {outline: none;}
#nameAction {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px;
  min-height: 36px; padding: 3px 2px;
  color: #fff4ce; border: 0; background: transparent; text-shadow: inherit;
  font: 650 13px/1.3 system-ui,sans-serif;
}
#nameAction canvas {width: 17px; height: 17px;}
#nameAction:hover span {text-decoration: underline; text-underline-offset: 3px;}
.home-menu {
  position: absolute; right: max(var(--safe),env(safe-area-inset-right));
  bottom: max(23px,env(safe-area-inset-bottom));
  display: grid; gap: 8px; width: min(344px,40vw); padding: 13px 13px 4px;
  border: 2px solid #a99e72; background: #192f2cf5;
  box-shadow: inset 0 0 0 2px #374c41, 4px 5px 0 #172b2777;
}
.home-menu .carved {justify-content: flex-start; height: auto; min-height: 55px;}
.home-links {display: grid; grid-template-columns: 1fr 1.14fr; border-top: 1px solid #546451;}
.home-links .field-link {border-radius: 0; box-shadow: none; font-size: 13px; padding: 0 2px; white-space: nowrap;}
.home-links .field-link:hover {background: #2d4439;}
#victoryBoard {margin: 5px 0 0;}
body:has(#modal[open][data-view="board"]) #home {visibility: hidden;}
@media(max-width: 720px) {
  .home-intro {top: max(84px,12dvh); max-width: calc(100% - 32px);}
  #hello {font-size: clamp(32px,8.8vw,50px);}
  .home-menu {right: max(12px,env(safe-area-inset-right)); bottom: max(13px,env(safe-area-inset-bottom));
    width: min(310px,calc(100% - 24px)); padding: 10px 10px 2px; gap: 6px;}
  .home-menu .carved {min-height: 47px; padding: 6px 10px;}
}
@media(max-height: 500px) and (orientation: landscape) {
  .home-intro {top: 65px; max-width: 48vw;}
  #hello {font-size: clamp(28px,4vw,42px);}
  .home-menu {width: min(300px,41vw); right: 12px; bottom: max(9px,env(safe-area-inset-bottom));
    padding: 8px 9px 2px; gap: 5px;}
  .home-menu .carved {min-height: 44px; padding-block: 5px;}
}