@layer base {
  dialog { z-index: var(--z-dialog); }
  * {
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 20px;
  }
  body {
    margin: 0;
    color: var(--ink);
    font: 1rem/1.7 var(--sans);
    background:
      linear-gradient(
        #c6e9e6,
        #e9e6d8 280px,
        #e0e9db);
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  button,
  input,
  select {
    font: inherit;
  }
  button {
    cursor: pointer;
  }
  button:disabled {
    cursor: not-allowed;
    opacity: .55;
  }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible {
    outline: 3px solid #cc9c50;
    outline-offset: 2px;
  }
  [hidden] {
    display: none !important;
  }
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 12px;
    background: var(--surface);
    color: var(--text);
    z-index: var(--z-skip);
  }
  .skip-link:focus {
    left: 8px;
  }
  .site-shell {
    max-width: 1190px;
    margin: 20px auto;
    background: #fbf9f0;
    border: 1px solid #86a99d;
    box-shadow: 0 15px 50px #31544852;
  }
  .top-status {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    background: #294f4e;
    color: #eff5d9;
    padding: 5px 17px;
    font-size: 0.75rem;
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 118px;
    padding: 15px 28px;
    background:
      radial-gradient(
        circle at 74% 38%,
        #fff7cf 0 5%,
        transparent 24%),
      linear-gradient(
        180deg,
        #a7d9e4,
        #d7e8de 70%,
        #ece7cf);
    border-bottom: 1px solid #9abcac;
  }
  .brand-group {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .wordmark {
    font: 700 clamp(1.875rem, 4.2vw, 3.125rem)/1.1 var(--display);
    color: #235b4d;
    text-shadow: 1px 2px #fff2d3;
  }
  .wordmark small {
    display: block;
    font: 700 0.8125rem var(--sans);
    letter-spacing: .27em;
    margin-top: 4px;
  }
  .brand-seal {
    border: 2px solid #ac6053;
    color: #a95348;
    background: #fff5e4c9;
    padding: 4px 7px;
    font: 700 0.875rem/1.25 var(--serif);
    transform: rotate(-8deg);
  }
  .header-caption {
    font: 700 clamp(0.75rem, 2vw, 1.125rem) var(--display);
    color: #547b6c;
  }
  .site-credit {
    background: #fffdf2c9;
    padding: 7px 12px;
    border: 1px solid #86b5a0;
    color: #356e5c;
    font-size: 0.75rem;
    font-weight: 700;
  }
  .site-nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background:
      linear-gradient(
        #72cbaa,
        #389f7e 43%,
        #1b735b);
    border-top: 1px solid #b6f5d0;
    border-bottom: 3px solid #145c49;
    padding: 0 10px;
  }
  .site-nav a {
    text-align: center;
    color: #f8ffec;
    font-weight: 800;
    font-size: 0.8125rem;
    padding: 11px 2px;
    text-shadow: 0 1px #225844;
    border-right: 1px solid #c8f3c73a;
  }
  @media (hover: hover) {
    .site-nav a:hover {
      background: #12523e91;
    }
  }
  main {
    padding: 12px 13px 24px;
    background: linear-gradient(#fbf9f1e9, #fbf9f1e9), url(assets/ricepaper_v3.webp) repeat;
  }
  .noticebar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 6px 9px;
    border: 1px solid #d8dbc0;
    background: #fffdf5;
    margin-bottom: 12px;
    font-size: 0.75rem;
  }
  .noticebar strong {
    background: #a96351;
    color: #fff;
    padding: 2px 8px;
    flex-shrink: 0;
  }
  .notice-label {
    margin-left: auto;
    white-space: nowrap;
    color: #a27b45;
  }
  .main-grid {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 245px;
    align-items: start;
    gap: 12px;
  }
  .left-rail,
  .middle-rail,
  .right-rail {
    display: grid;
    gap: 12px;
    min-width: 0;
  }
  .widget,
  .panel {
    background: #fffef9;
    border: 1px solid var(--edge);
    box-shadow: 0 2px 5px #3c55400e;
    min-width: 0;
  }
  .widget-heading {
    padding: 8px 10px;
    margin: 0;
    border-bottom: 1px solid #c7dac8;
    background: linear-gradient(#f5f9ef, #e1efe3);
    font: 800 0.75rem var(--sans);
    color: #356951;
  }
  .widget-inner {
    padding: 11px;
  }
  .widget-intro {
    margin: 0 0 10px;
    color: #697b6b;
    line-height: 1.9;
    word-break: keep-all;
    font-size: 0.75rem;
  }
  .create-form {
    display: grid;
    gap: 6px;
  }
  .create-form label {
    font-weight: 700;
    font-size: 0.75rem;
    margin-top: 5px;
  }
  .create-form input,
  .create-form select {
    width: 100%;
    min-width: 0;
    padding: 9px 7px;
    background: #fefcf3;
    border: 1px solid #b4cdb6;
    color: #3c5847;
    border-radius: 2px;
  }
  .main-button,
  .small-button {
    background: linear-gradient(#73bd94, #28745e);
    border: 1px solid #2d6954;
    color: #fffdf3;
    font-weight: 800;
    padding: 9px 8px;
    border-radius: 3px;
    box-shadow: inset 0 1px #d8f3dc;
  }
  @media (hover: hover) {
    .main-button:hover,
    .small-button:hover {
      filter: brightness(1.07);
    }
  }
  .full {
    width: 100%;
  }
  .reset-button {
    display: block;
    margin: 12px auto 0;
    color: var(--muted);
    text-decoration: underline;
    border: 0;
    background: none;
    font-size: 0.75rem;
  }
  .character-crest {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0 12px;
  }
  .crest-symbol {
    font: 700 1.5625rem var(--display);
    padding: 5px 12px;
    background: #eff4e8;
    border: 1px solid #b9cba5;
    color: #49806b;
  }
  .character-crest strong {
    display: block;
    font: 700 1.0625rem var(--display);
    color: #2e715b;
  }
  .character-crest small {
    color: var(--muted);
  }
  .stat-pair {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    font-size: 0.75rem;
    margin: 8px 0 3px;
  }
  .stat-pair strong {
    color: #44715b;
  }
  .meter {
    height: 7px;
    background: #e7e9dc;
    border: 1px solid #cfd8c7;
  }
  .meter > span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(#df9483, #aa5f52);
    transition: width .2s;
  }
  .qi-meter > span {
    background: linear-gradient(#89c3a5, #3f876b);
  }
  .exp-meter > span {
    background: linear-gradient(#dfc488, #b28a41);
  }
  .stat-gold {
    margin: 13px 0;
  }
  .stat-gold b {
    color: #9c7044;
  }
  .quick-links a {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    padding: 8px 11px;
    border-bottom: 1px dotted #dce7d9;
    font-size: 0.75rem;
    color: #52715d;
  }
  @media (hover: hover) {
    .quick-links a:hover {
      background: #f2f8ee;
    }
  }
  .quick-links a:last-child {
    border: 0;
  }
  .proverb-body {
    text-align: center;
    background: #fffdf5;
    padding: 7px 10px 15px;
  }
  .proverb-moon {
    font-size: 3.375rem;
    line-height: 1.3;
    color: #b89a53;
  }
  .proverb p {
    font: 700 0.875rem/2 var(--serif);
    margin: 0 0 8px;
  }
  .proverb small {
    font-size: 0.75rem;
    color: var(--muted);
  }
  .hero {
    height: 309px;
    border: 1px solid #c5ccab;
    position: relative;
    overflow: hidden;
    background: #b8dbd4;
    isolation: isolate;
  }
  .landscape {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    z-index: -2;
  }
  .hero-shade {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        90deg,
        #f9f0dce5,
        #f1eddacc 46%,
        transparent);
    z-index: -1;
  }
  .hero-copy {
    padding: 45px 26px;
    max-width: 76%;
  }
  .hero-kicker {
    font-size: 0.75rem;
    color: #916f4f;
  }
  #onboarding-title {
    font: 700 clamp(1.5625rem, 3vw, 2.5rem)/1.37 var(--display);
    color: #255b49;
    letter-spacing: -.04em;
    margin: 10px 0;
    text-shadow: 1px 1px #fff9e7;
  }
  #onboarding-title em {
    font-style: normal;
    color: #a1534c;
  }
  .hero-copy p {
    max-width: 320px;
    font-size: 0.75rem;
    line-height: 2;
    color: #5d745d;
    word-break: keep-all;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 17px;
  }
  .gold-button {
    background: linear-gradient(#e9c780, #ab7c39);
    padding: 8px 14px;
    color: #fff;
    border: 1px solid #977033;
    box-shadow: inset 0 1px #fff1d2;
    font-weight: 800;
  }
  .outline-button {
    border: 1px solid #a7c4ac;
    color: #386e55;
    background: #fff9e9d6;
    padding: 8px 12px;
    font-weight: 700;
  }
  .hero-seal {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #aa5144;
    background: #fff3daab;
    border: 2px solid #ae6555;
    padding: 5px 9px;
    font: 700 0.9375rem/1.1 var(--serif);
    transform: rotate(5deg);
  }
  .ticker {
    border: 1px solid #dcd9bd;
    background: #fffaf0;
    font-size: 0.75rem;
    padding: 7px 10px;
    display: flex;
    gap: 12px;
    align-items: center;
  }
  .ticker b {
    background: #a8594d;
    color: white;
    padding: 1px 7px;
  }
  .panel-heading {
    background: linear-gradient(#f4faee, #dbece1);
    padding: 8px 11px;
    border-bottom: 1px solid #bad2bd;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
  }
  .panel-heading h2 {
    margin: 0;
    color: #2e6752;
    font-weight: 800;
    font-size: 0.8125rem;
  }
  .panel-heading h2 small {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 400;
    margin-left: 7px;
  }
  .panel-heading > span {
    font-size: 0.75rem;
    color: var(--muted);
  }
  .panel-body {
    padding: 12px;
  }
  .action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .action-tile {
    min-width: 0;
    padding: 13px 9px 11px;
    text-align: center;
    background: #fffdf5;
    border: 1px solid #dde5d4;
    box-shadow: inset 0 0 0 3px #fbfcf4;
  }
  .tile-icon {
    display: block;
    font-size: 1.75rem;
    color: #43806a;
    line-height: 1.35;
  }
  .action-tile h3 {
    margin: 4px 0;
    color: #396651;
    font: 700 0.875rem var(--serif);
  }
  .action-tile p {
    min-height: 39px;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.7;
    word-break: keep-all;
  }
  .action-tile button,
  .shop-actions button {
    padding: 7px 5px;
    background: #e8f2e6;
    border: 1px solid #acc8b3;
    color: #2c7058;
    font-weight: 700;
    font-size: 0.75rem;
    width: 100%;
  }
  @media (hover: hover) {
    .action-tile button:hover,
    .shop-actions button:hover {
      background: #d6e9d7;
    }
  }
  .event-log {
    list-style: none;
    padding: 10px 13px;
    margin: 0;
    max-height: 220px;
    overflow: auto;
  }
  .event-log li {
    padding: 6px 0 6px 15px;
    border-bottom: 1px dotted #dbe6d8;
    font-size: 0.75rem;
    color: #647667;
    position: relative;
  }
  .event-log li::before {
    content: "\2727";
    position: absolute;
    left: 0;
    color: #b09153;
  }
  .announcement-list p {
    padding: 7px 0;
    border-bottom: 1px dotted #dce8d8;
    font-size: 0.75rem;
    margin: 0;
    color: #627766;
  }
  .announcement-list strong {
    color: #a55e4f;
    display: block;
  }
  .announcement-list p:last-child {
    border: 0;
  }
  .quest-progress {
    padding: 10px;
    background: #f3f7e9;
    border: 1px solid #d6e2c9;
    font-size: 0.75rem;
    margin-bottom: 10px;
    font-weight: 700;
    color: #567963;
  }
  .widget-tip {
    font-size: 0.75rem;
    line-height: 1.8;
    color: var(--muted);
    word-break: keep-all;
  }
  .compact-inventory {
    font-size: 0.75rem;
    color: #667968;
  }
  .compact-inventory p {
    margin: 2px;
  }
  .compact-inventory div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dotted #dce6d7;
  }
  .widget-bottom-link {
    display: block;
    text-align: right;
    padding: 0 11px 10px;
    color: #3c8163;
    font-size: 0.75rem;
    font-weight: 700;
  }
  .bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
  }
  .inventory-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .inventory-items span {
    display: block;
    background: #f6f8ee;
    border: 1px solid #d7e4d4;
    padding: 7px;
    font-size: 0.75rem;
    text-align: center;
  }
  .shop-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 12px;
  }
  .rules-list p {
    margin: 0;
    padding: 7px 0;
    border-bottom: 1px dotted #dce5da;
    color: #617461;
    font-size: 0.75rem;
  }
  .rules-list p:last-child {
    border: 0;
  }
  .rules-list b {
    margin-right: 9px;
    color: #9a604a;
  }
  .site-footer {
    background: linear-gradient(#e7f0e2, #c6decb);
    border-top: 2px solid #448973;
    padding: 17px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.75rem;
    color: #55785e;
  }
  .site-footer a {
    font-weight: 700;
  }
  .bgm-toggle {
    position: fixed;
    z-index: var(--z-hud);
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(#66b58f, #2b7860);
    border: 1px solid #1a5d4b;
    color: #fff;
    padding: 10px 14px;
    font-weight: 800;
    border-radius: 4px;
    box-shadow: 0 5px 16px #28493f66;
  }
  .bgm-toggle[aria-pressed=true] {
    background: linear-gradient(#cfac69, #9c7439);
  }
  @media (max-width: 1100px) {
    .site-shell {
      margin: 0 auto;
    }
    .main-grid {
      grid-template-columns: 165px minmax(0, 1fr) 180px;
      gap: 9px;
    }
    main {
      padding: 9px;
    }
    .middle-rail,
    .left-rail,
    .right-rail {
      gap: 9px;
    }
    .hero-copy {
      max-width: 85%;
    }
    .panel-heading h2 small {
      display: none;
    }
    .header-caption {
      display: none;
    }
  }
  @media (max-width: 780px) {
    .main-grid {
      grid-template-columns: minmax(0, 1fr) 190px;
    }
    .middle-rail {
      grid-column: 1;
      grid-row: 1;
    }
    .right-rail {
      grid-column: 2;
      grid-row: 1;
    }
    .left-rail {
      grid-column: 1/-1;
      grid-row: 2;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .left-rail .widget {
      height: 100%;
    }
    .bottom-grid {
      gap: 9px;
    }
  }
  @media (max-width: 780px) {
    .top-status span:last-child {
      display: none;
    }
    .header-inner {
      min-height: 95px;
      padding: 12px;
    }
    .wordmark {
      font-size: 2.125rem;
    }
    .brand-seal {
      font-size: 0.75rem;
    }
    .site-credit {
      font-size: 0.75rem;
      padding: 5px;
    }
    .site-nav {
      display: flex;
      overflow-x: auto;
      padding: 0;
    }
    .site-nav a {
      flex-shrink: 0;
      padding: 10px 13px;
      font-size: 0.75rem;
    }
    .notice-label {
      display: none;
    }
    .main-grid,
    .bottom-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .middle-rail,
    .right-rail,
    .left-rail {
      width: 100%;
      gap: 10px;
    }
    .left-rail {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .left-rail .proverb {
      grid-column: 1/-1;
    }
    .right-rail {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .right-rail > .widget:last-child {
      grid-column: 1/-1;
    }
    .hero {
      height: 290px;
    }
    .hero-copy {
      max-width: 94%;
      padding: 36px 18px;
    }
    #onboarding-title {
      font-size: 1.8125rem;
    }
    .hero-copy p {
      font-size: 0.75rem;
    }
    .hero-shade {
      background:
        linear-gradient(
          90deg,
          #f9f0dcef,
          #f1eddac8 62%,
          transparent);
    }
    .action-grid {
      gap: 5px;
    }
    .action-tile {
      padding: 9px 5px;
    }
    .action-tile p {
      min-height: 53px;
    }
    .action-tile button {
      font-size: 0.75rem;
    }
    .bottom-grid {
      margin-top: 10px;
    }
    .panel-heading h2 small {
      display: none;
    }
    .site-footer {
      font-size: 0.75rem;
    }
    .bgm-toggle {
      right: 10px;
      bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
  }
  @media (max-width: 480px) {
    .left-rail,
    .right-rail {
      grid-template-columns: 1fr;
    }
    .left-rail .proverb,
    .right-rail > .widget:last-child {
      grid-column: auto;
    }
    #onboarding-title {
      font-size: 1.5625rem;
    }
    .action-grid {
      grid-template-columns: 1fr;
    }
    .action-tile p {
      min-height: 0;
    }
    .inventory-items {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition: none !important;
      animation: none !important;
    }
    html {
      scroll-behavior: auto;
    }
  }
}