/* Shared touch and safe-area guardrails for iPad and other coarse-pointer screens. */
html { -webkit-text-size-adjust: 100%; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }

@media (pointer: coarse), (min-width: 700px) and (max-width: 1366px) {
  button, a, summary { touch-action: manipulation; }

  .game-header .back,
  .job-header > a,
  .home-header .back,
  .home-header .account-link,
  #peblet-name,
  .account-header .back,
  .account-header .work-link,
  .topbar-actions a,
  .tab,
  .wardrobe-heading button,
  .pet-reserve button,
  .playtest-tools summary,
  .playtest-tools button,
  dialog button,
  .reward-actions a,
  .dialog-actions a {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .drawer-tool,
  .tray-piece,
  .tray-food,
  .cash-option,
  .change-piece,
  .change-coin {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  input[type="range"] { min-height: 44px; }
  input[type="range"]::-webkit-slider-thumb { min-width: 30px; min-height: 30px; }
  .parcel-prop, .delivery-lane, .post-stamp { touch-action: manipulation; }
}

/* The game entrance and wide illustrated scenes share one tablet rotation prompt. */
.peblet-landscape-guard {
  position: fixed;
  z-index: 2147483646;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(18px, 3dvh, 30px);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  align-content: start;
  align-content: safe center;
  padding:
    max(36px, env(safe-area-inset-top))
    max(30px, env(safe-area-inset-right))
    max(36px, env(safe-area-inset-bottom))
    max(30px, env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 18% 18%, rgba(149, 229, 238, .26), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(247, 198, 112, .2), transparent 30%),
    linear-gradient(150deg, #17647a, #21456d 55%, #363c69);
  color: #fffdf2;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  text-align: center;
  isolation: isolate;
}

.peblet-landscape-guard[hidden] { display: none !important; }

.peblet-landscape-guard__symbol { width: min(440px, 88vw); }
.peblet-landscape-guard__symbol svg { display: block; width: 100%; height: auto; }
.peblet-landscape-guard__turn { transform-box: view-box; transform-origin: 92px 121px; animation: pebletLandscapeTurn 3.6s ease-in-out infinite; }
.peblet-landscape-guard__arrow { color: #ffe29a; }
.peblet-landscape-guard::backdrop { background: #21456d; }
.peblet-landscape-guard .peblet-landscape-guard__help { max-width: 38ch; font-size: clamp(16px, 2.2vw, 19px); font-weight: 500; }
@keyframes pebletLandscapeTurn { 0%,15% { transform: rotate(0deg); } 55%,85% { transform: rotate(90deg); } 100% { transform: rotate(0deg); } }
html[data-motion="reduced"] .peblet-landscape-guard__turn { animation: none; }

.peblet-landscape-guard h2 {
  max-width: 15ch;
  margin: 0;
  color: inherit;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.peblet-landscape-guard p {
  max-width: 34ch;
  margin: 0;
  color: rgba(255, 253, 242, .92);
  font-size: clamp(19px, 3vw, 27px);
  font-weight: 800;
  line-height: 1.35;
  text-wrap: balance;
}

html.peblet-landscape-required,
html.peblet-landscape-required body { overflow: hidden !important; }


@media (min-width: 700px) and (max-width: 1180px) {
  dialog { max-height: calc(100dvh - 32px); overflow: auto; }
  .account-shell, .home-world, .bank-game, .cafe-game, .post-game, .game-shell { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .game-header, .job-header, .home-header, .account-header, .topbar { padding-top: max(8px, env(safe-area-inset-top)); }

  /* Viewport emulation does not always report a coarse pointer, so keep the
     iPad-sized hit areas even when a keyboard or trackpad is connected. */
  .brand,
  .game-header .back,
  .job-header > a,
  .home-header .back,
  .home-header .account-link,
  .account-header .back,
  .account-header .work-link,
  .topbar-actions a,
  .tab,
  .wardrobe-heading button,
  .pet-reserve button,
  .playtest-tools summary,
  .playtest-tools button,
  dialog button,
  .reward-actions a,
  .dialog-actions a {
    min-height: 44px;
  }

  .home-header .back,
  .home-header .account-link,
  .topbar-actions a,
  .game-header .back,
  .job-header > a,
  .account-header .back,
  .account-header .work-link,
  .brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .home-header .account-link { min-width: 44px; }
  .account-brand { min-height: 44px; display: inline-flex; align-items: center; }
  .claim-goal { min-height: 44px; }
  .room-copy input,
  #reset-answer { min-height: 44px; }
  .drawer-tool { width: 44px; height: 44px; }
}

@media (min-width: 700px) and (max-width: 850px) and (orientation: portrait) {
  /* The former fixed 960px Post floor produced a 12px page scroll at
     768x1024. The workbench already scales proportionally, so use the exact
     available viewport instead. */
  .post-scene {
    width: 100%;
    height: calc(100dvh - 76px);
    min-height: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .peblet-landscape-guard__turn { animation: none; }
}

@media (forced-colors: active) {
  .peblet-landscape-guard { background: Canvas; color: CanvasText; }
  .peblet-landscape-guard__arrow { color: LinkText; filter: none; }
}
/* Saving is normally silent. If device storage fails, this stays visible so a
   child does not keep playing under the false impression that progress is safe. */
.peblet-save-warning {
  position: fixed;
  z-index: 10000;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  margin: auto;
  max-width: 640px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 42vh;
  max-height: 42dvh;
  overflow: auto;
  padding: 8px 12px;
  border: 2px solid #8a351f;
  border-radius: 14px;
  background: #fff2cb;
  color: #542414;
  box-shadow: 0 8px 24px rgba(45, 24, 12, .28);
  font: 600 16px/1.3 system-ui, sans-serif;
  text-align: left;
}
.peblet-save-warning > p { flex: 1 1 160px; margin: 0; }
.peblet-save-warning button { min-height: 44px; border: 1px solid #8a351f; border-radius: 10px; padding: 6px 10px; color: #542414; background: #fffaf0; font: 700 16px/1.2 system-ui, sans-serif; cursor: pointer; }
.peblet-save-warning button:focus-visible { outline: 3px solid #542414; outline-offset: 2px; }
.peblet-save-warning #peblet-save-help { flex-basis: 100%; font-weight: 400; }

.peblet-save-warning[hidden] { display: none !important; }

.kid-prompt{font-size:clamp(18px,2.3vw,23px)!important;line-height:1.22!important;font-weight:1000!important}

/* Shared app actions use the existing welcome and account palette. */
.app-primary,.account-header .work-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:0;border-radius:16px;background:#8b3064;color:#fff;text-decoration:none;font:800 16px/1.2 system-ui,sans-serif;text-align:center;box-shadow:0 3px 0 #572441;cursor:pointer}
.app-primary[hidden]{display:none!important}
.app-primary:focus-visible,.account-header .work-link:focus-visible{outline:3px solid #274d3e;outline-offset:4px}
.village-next{position:fixed;z-index:40;right:max(16px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-width:240px}
.village-welcome{width:min(460px,calc(100% - 36px));max-height:calc(100dvh - 32px);overflow:auto;border:3px solid #b6b888;border-radius:24px;padding:24px;background:#fff8e8;color:#294939;box-shadow:0 16px 50px #233c3855;font:18px/1.5 system-ui,sans-serif}
.village-welcome::backdrop{background:#243c3766}
.village-welcome h2{margin:0 0 10px;font-size:25px}
.village-welcome .app-primary{width:100%;min-height:52px!important;padding:14px 20px;font-size:18px;touch-action:manipulation}
.account-money-guide,.account-pay-help,.furniture-earn{background:#fff8e8;border:1px solid #d7cbaa;border-radius:18px;padding:14px;margin:12px 0;color:#294939;font-size:16px;line-height:1.4}
.account-money-guide{display:flex;align-items:center;gap:16px}
.account-money-guide[hidden],.account-pay-help[hidden],.furniture-earn[hidden]{display:none!important}
.account-money-guide p,.furniture-earn p{margin:0 0 10px}
.account-money-guide button{min-height:44px;padding:8px 14px;border:1px solid #486858;border-radius:12px;background:#fff;color:#294939;font-weight:800;flex-shrink:0}
#account-last-earned{font-size:16px;font-weight:700;line-height:1.4}
#nickname-error:not(:empty){color:#8b2344;margin:6px 0 12px}
#player-name[aria-invalid="true"]{border-color:#8b2344;outline:2px solid #8b2344}
#goal-funding[hidden],.extras-earn[hidden]{display:none!important}
#goal-state-label{display:block;color:#446747;font-weight:900;line-height:1.3}
.extras-earn{display:flex;gap:6px;align-items:center;justify-content:space-between;margin:4px 0;padding:4px 6px;border-radius:14px;background:#fff8e8;color:#294939;font-size:14px;line-height:1.3;flex-shrink:0}
.extras-earn p{margin:0;white-space:nowrap}.extras-earn a{flex-shrink:0;padding:8px;font-size:14px}
.option .price-badge{position:static;display:block;white-space:normal;line-height:1.2;max-width:100%;font-size:12px;margin-top:5px;border-radius:8px}
.wardrobe .options:has([data-type="accessory"]){grid-auto-rows:max-content;grid-template-rows:none}
.wardrobe .option[data-type="accessory"]{min-height:max-content;align-self:stretch}
.pet-mealtime-tip{background:#fff8e8;border-radius:14px;padding:10px 14px;margin:10px 0;font-size:16px;color:#294939}
.pet-mealtime-tip[hidden]{display:none!important}.pet-mealtime-tip p{margin:0 0 8px}
.pet-mealtime-tip button{min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid #446747;background:#fff;color:#294939;font:700 16px system-ui,sans-serif}
.pet-mealtime-dialog #pet-mealtime-save[data-meal-primary="true"]{background:#315d46;color:#fff;border-color:#315d46;box-shadow:0 3px 0 #203d2e}
.pet-mealtime-dialog #pet-mealtime-save[data-meal-primary="true"] span{color:#fff}
.village .place-card{opacity:1!important;transform:translate(-50%,0)!important;background:rgba(255,248,232,.96)!important;color:#294939!important;border:1px solid #b5bba3;border-radius:999px!important;padding:5px 10px!important;text-shadow:none!important;box-shadow:0 2px 5px #263e3228;line-height:1.2}
.village .place-card strong{color:#294939!important;font-size:clamp(12px,1.3vw,16px)}
.village .sky-ferry-link .sky-ferry-name{opacity:1!important;transform:translate(-50%,0)!important;background:#fff8e8!important;color:#294939!important;border:1px solid #b5bba3;text-shadow:none;font-size:12px}
.village .wonder-mailbox small{opacity:1!important;background:#fff8e8!important;color:#294939!important;border-radius:999px;text-shadow:none}
.village{background:#b2ba96!important}
.game-shell{background:#b2ba96}
.village-player-stack{filter:drop-shadow(0 5px 3px rgba(51,46,30,.28))}
@media(max-height:500px){.village-welcome{padding:16px;font-size:16px}.village-welcome h2{font-size:22px}.village-next{font-size:14px;min-height:44px;padding:8px 12px}.village .place-card{padding:3px 7px!important}}
