h1 {
     font-size: 1.8rem;
     color: #ffff88;
 }

 .guide-section {
     padding: 1.5rem;
     max-width: 960px;
     margin: auto;
     text-align: center;
 }

 /* 女神區 */
 .rest-room-section h2 {
     margin-bottom: 1rem;
     font-size: 1.25rem;
     text-align: center;
 }

 .rest-day-container {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 1px;
     width: 100%;
     box-sizing: border-box;
 }

 .rest-day {
     flex: 1;
     text-align: center;
     font-weight: bold;
     color: black;
     font-size: 14px;
     line-height: 1.4;
     padding: 8px 4px;
     background-color: #f0f0f0;
     border: 1px solid #ccc;
     min-width: 90px;
     box-sizing: border-box;
 }

 /* 各日背景顏色 */
 .rest-day[data-day="1"] {
     background-color: hsl(27, 87%, 67%);
 }

 .rest-day[data-day="2"] {
     background-color: #f7e94f;
 }

 .rest-day[data-day="3"] {
     background-color: #6f00ff;
     color: white;
 }

 .rest-day[data-day="4"] {
     background-color: #003cff;
     color: white;
 }

 .rest-day[data-day="5"] {
     background-color: #3fcfff;
 }

 .rest-day[data-day="6"] {
     background-color: #20ff2c;
     color: rgb(0, 0, 0);
 }

 .rest-day[data-day="0"] {
     background-color: #ff0015;
     color: yellow;
 }

 .day-arrow-container {
     position: relative;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     margin-top: 4px;
     height: 1px;
 }

 #day-arrow {
     grid-column: var(--today-col);
     justify-self: center;
     font-size: 14px;
     color: white;
     text-align: center;
     line-height: 1.2;
     transform-origin: center top;
 }

 .stage-section {
     max-width: 1000px;
     margin: auto;
 }

 .stage-section h2 {
     font-size: 1.4rem;
     margin-bottom: 0.8rem;
     text-align: center;
 }

 .stage-description p,
 .stage-description ul {
     font-size: 1rem;
     line-height: 1.6;
 }

 .stage-description ul {
     padding-left: 1.2rem;
     margin-bottom: 1rem;
 }

 .stage-description mark {
     background-color: #ffff88;
     padding: 0 4px;
     border-radius: 3px;
 }

 .alert-box {
     background-color: #fff3cd;
     color: #856404;
     border: 1px solid #ffeeba;
     padding: 0.75rem;
     margin-top: 1rem;
     border-radius: 5px;
     font-weight: bold;
 }

 .stage-extra {
     margin-top: 1.5rem;
 }

 .stage-extra ol {
     padding-left: 1.5rem;
     margin-bottom: 1rem;
     line-height: 1.7;
 }

 details.collapsible summary {
     cursor: pointer;
     font-weight: bold;
     font-size: 1.1rem;
     margin: 1rem 0;
     padding: 0.5rem;
     background: #000000;
     border-radius: 6px;
     transition: background 0.2s;
     text-align: center;
 }

 details.collapsible[open] summary {
     background: #000000;
 }

 @media (max-width: 768px) {
     body {
         padding: 0;
         margin: 0;
     }

     .guide-section,
     .stage-section {
         width: 100%;
         max-width: 100%;
         padding: 1rem;
         box-sizing: border-box;
     }

     .rest-day-container {
         grid-template-columns: repeat(7, 1fr);
         gap: 1px;
         width: 100%;
     }

     .rest-day {
         font-size: 13px;
         padding: 6px 2px;
         min-width: 0;
         word-break: break-word;
         line-height: 1.4;
     }

     .day-arrow-container {
         display: grid;
         grid-template-columns: repeat(7, 1fr);
         margin-top: 2px;
         height: 20px;
         font-size: 12px;
         overflow-x: hidden;
     }

     .alert-box {
         font-size: 0.95rem;
         padding: 0.6rem;
         text-align: left;
     }

     details.collapsible summary {
         font-size: 1rem;
         padding: 0.4rem;
     }

     .stage-description ol {
         padding-left: 1rem;
     }

     .stage-description p {
         font-size: 0.95rem;
         text-align: left;
     }



     h2 {
         font-size: 1.2rem;
     }

     .stage-description mark {
         background-color: #ffff88;
         padding: 2px 4px;
         border-radius: 3px;
     }

     .weekday-full {
         display: none;
     }

     .weekday-short {
         display: inline;
     }
 }

 .weekday-full {
     display: inline;
 }

 .weekday-short {
     display: none;
 }

 /* === 400小工具 === */
 #result {
     transition: all 0.3s ease;
     font-weight: bold;
     color: #003366;
 }

 #codeInput {
     outline: none;
 }

 #codeInput:focus {
     border-color: #4a90e2;
     box-shadow: 0 0 3px #4a90e288;
 }

 .seal-result {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #ff8800;
     color: #002244;
     font-weight: bold;
     font-size: 2rem;
     border-radius: 12px;
     width: 260px;
     height: 80px;
     margin: 0.8rem auto;
     padding: 0.6rem 1rem;
     text-align: center;
     box-shadow: 0 0 8px #00000055 inset;
     overflow: hidden;
 }

 .seal-result span {
     display: inline-block;
     white-space: normal;
     word-break: break-word;
     text-align: center;
     line-height: 1.4;
     max-width: 100%;
     max-height: 100%;
     overflow-wrap: break-word;
     padding-bottom: 8px;
 }

 .seal-buttons button {
     font-size: 1.2rem;
     padding: 0.4rem 1rem;
     margin: 0.2rem;
     border: none;
     border-radius: 6px;
     background-color: #2a3b5c;
     color: #ffffff;
     cursor: pointer;
     transition: background 0.2s;
 }

 .seal-buttons button:hover {
     background-color: #4a6ba5;
 }

 .seal-buttons button {
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
     user-select: none;
 }

 /* 向上通道 */
 .upward-tool {
     margin-top: 1rem;
     padding: 1rem;
     background: #2e2e3a;
     border-radius: 8px;
     border: 1px solid #444;
     color: #e6e6ea;
 }

 .tool-header.center {
     text-align: center;
     font-size: 1rem;
     margin-bottom: 1rem;
 }

 .platform-buttons {
     display: flex;
     justify-content: center;
     gap: 0.75rem;
     margin-bottom: 1rem;
 }

 .platform-buttons button {
     padding: 0.6rem 1.2rem;
     font-size: 1.1rem;
     border: none;
     border-radius: 6px;
     background-color: #444a64;
     color: #fff;
     cursor: pointer;
     transition: background 0.2s;
     touch-action: manipulation;
 }

 .platform-buttons button:hover {
     background-color: #5e6890;
 }

 .result-box {
     text-align: center;
     font-size: 1rem;
 }

 #upward-result {
     margin: 0.5rem 0;
     padding: 0.75rem;
     font-size: 1.8rem;
     background-color: #1f1f28;
     color: #eaeaea;
     border-radius: 6px;
     border: 1px solid #555;
     min-height: 2.2rem;
     word-break: break-word;
     font-family: monospace;
 }

 .tool-actions {
     display: flex;
     justify-content: center;
     gap: 1rem;
     margin-top: 0.5rem;
 }

 .tool-actions button {
     padding: 0.4rem 1rem;
     font-size: 0.9rem;
     border: none;
     border-radius: 4px;
     background-color: #3d435e;
     color: #fff;
     cursor: pointer;
     touch-action: manipulation;
 }

 .tool-actions button:hover {
     background-color: #60668c;
 }

 .side-bookmark {
     position: fixed;
     top: 150px;
     left: 12px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     z-index: -1;
 }

 .side-bookmark button {
     background: linear-gradient(to right, #333, #444);
     color: #fff;
     border: none;
     border-radius: 6px;
     padding: 6px 12px;
     font-size: 0.85rem;
     white-space: nowrap;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
     transition: all 0.2s ease;
     cursor: pointer;
     text-align: left;
     width: 60px;
 }

 .side-bookmark button:hover {
     background: linear-gradient(to right, #555, #666);
     transform: translateX(2px);
 }

 @media (max-width: 870px) {
     .side-bookmark {
         display: none;
     }
 }