/*
 * ツールボックス / css/style.css
 * ---------------------------------------------------------------
 * 画面の「見た目」を担当します。色、サイズ、余白、並び方、スマホ対応など。
 * JavaScript から書き換えられる要素（定規の幅・ルーレットの回転等）は
 * CSSを変更しても動作するよう、既存のクラス・IDを維持しています。
 *
 * 重要：CSSは後に書いた同じ詳細度の指定が優先されます。
 *       元コードのルール順を維持しているため、途中の同名指定にも意味があります。
 */

:root {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top,0px);
    padding-bottom: env(safe-area-inset-bottom,0px);
    --bg: #eef1f4;
    --sf: #fff;
    --tx: #142033;
    --mt: #5d6b7e;
    --bd: #d5dbe3;
    --hi: #ffc233;
}

html {
    scroll-padding-top: env(safe-area-inset-top,0px);
}

@media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f141b;
        --sf: #171e28;
        --tx: #e6ebf2;
        --mt: #93a0b3;
        --bd: #2a3442;
    }
}

:root[data-theme="dark"] {
    --bg: #0f141b;
    --sf: #171e28;
    --tx: #e6ebf2;
    --mt: #93a0b3;
    --bd: #2a3442;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--tx);
    font: 16px/1.6 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif;
}

.w {
    max-width: 680px;
    margin: 0 auto;
    padding: 16px;
}

h1 {
    font-size: 22px;
    margin: 8px 0 14px;
    letter-spacing: .04em;
}

nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 10px;
}

nav button {
    flex: none;
    border-radius: 20px;
    padding: 6px 14px;
    background: transparent;
}

nav button.on {
    background: var(--tx);
    color: var(--bg);
    border-color: var(--tx);
}

main {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: 16px;
    padding: 18px;
}

section {
    display: none;
}

section.on {
    display: block;
}

input,select,textarea,button {
    font: inherit;
    color: var(--tx);
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 0;
}

button {
    cursor: pointer;
}

button:hover {
    border-color: var(--mt);
}

button.p {
    background: var(--hi);
    color: #142033;
    border-color: var(--hi);
    font-weight: 600;
}

:focus-visible {
    outline: 2px solid var(--hi);
    outline-offset: 2px;
}

textarea {
    width: 100%;
    min-height: 220px;
    resize: vertical;
}

.r {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 10px 0;
}

.r>input,.r>select {
    flex: 1 1 120px;
}

.mt {
    color: var(--mt);
    font-size: 13px;
}

.big {
    font-size: 34px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    margin: 8px 0;
}

.g {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
}

.g button {
    padding: 14px 0;
    font-size: 19px;
}

#cI {
    width: 100%;
    font-size: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#cH {
    min-height: 24px;
    text-align: right;
}

ul {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}

li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--bd);
}

li span {
    flex: 1;
    word-break: break-all;
}

.done {
    text-decoration: line-through;
    color: var(--mt);
}

.st {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
    gap: 10px;
}

.st div {
    border-left: 3px solid var(--hi);
    padding-left: 10px;
}

.st b {
    display: block;
    font-size: 24px;
    font-variant-numeric: tabular-nums;
}

.st span {
    color: var(--mt);
    font-size: 13px;
}

.tb {
    border-top: 1px solid var(--bd);
    margin-top: 16px;
    padding-top: 8px;
}

.sw {
    height: 90px;
    border-radius: 10px;
    border: 1px solid var(--bd);
}

hr {
    border: 0;
    border-top: 1px solid var(--bd);
    margin: 20px 0;
}

.note {
    color: var(--mt);
    font-size: 13px;
    margin: 8px 0;
}

.block {
    padding: 14px;
    border: 1px solid var(--bd);
    border-radius: 12px;
    margin: 12px 0;
}

.block h3 {
    font-size: 16px;
    margin: 0 0 10px;
}

.out {
    background: var(--bg);
    border-radius: 10px;
    padding: 14px;
    margin: 12px 0;
    text-align: center;
}

.out strong {
    font-size: 28px;
    font-variant-numeric: tabular-nums;
}

.preset {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.preset button {
    font-size: 13px;
    padding: 5px 9px;
}

.field {
    flex: 1 1 100px;
    min-width: 0;
}

.field label {
    display: block;
    font-size: 13px;
    color: var(--mt);
    margin-bottom: 4px;
}

.field input,.field select {
    width: 100%;
}

@media (max-width:420px) {
    .w {
        padding: 10px;
    }

    main {
        padding: 12px;
    }

    .big {
        font-size: 28px;
    }

    nav button {
        padding: 6px 10px;
    }
}

/* 追加ツール */

.w {
    max-width: 900px;
}

nav {
    scrollbar-width: thin;
}

nav button {
    white-space: nowrap;
}

h2 {
    font-size: 19px;
    margin: 8px 0;
}

h3 {
    font-size: 16px;
    margin: 16px 0 6px;
}

.two {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 10px;
}

.three {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(165px,1fr));
    gap: 10px;
}

.panel {
    padding: 14px;
    border: 1px solid var(--bd);
    border-radius: 12px;
    margin: 12px 0;
}

.panel>h3:first-child {
    margin-top: 0;
}

.wide {
    width: 100%;
}

.field {
    margin-bottom: 8px;
}

.field textarea {
    min-height: 90px;
}

.result {
    background: var(--bg);
    padding: 12px;
    border-radius: 9px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.listline {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid var(--bd);
    padding: 8px 0;
}

.listline>div {
    min-width: 0;
    overflow-wrap: anywhere;
}

.listline button {
    flex-shrink: 0;
}

.kpi {
    font-size: 23px;
    font-weight: 700;
}

.favgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(125px,1fr));
    gap: 10px;
}

.favtile {
    padding: 14px 8px;
    border: 1px solid var(--bd);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    background: var(--bg);
}

.favtile b {
    display: block;
}

.star {
    background: none;
    border: none;
    padding: 4px 8px;
    color: var(--mt);
    font-size: 22px;
}

.star.active {
    color: #ce8d00;
}

.home-head {
    font-size: 24px;
    font-weight: 700;
}

.status {
    font-size: 13px;
    color: var(--mt);
}

.warn {
    color: #c15137;
}

.ok {
    color: #28794b;
}

.preview {
    border: 1px solid var(--bd);
    border-radius: 10px;
    padding: 16px;
    overflow-wrap: anywhere;
    min-height: 120px;
}

.preview img {
    max-width: 100%;
}

.preview pre {
    white-space: pre-wrap;
    background: var(--bg);
    padding: 8px;
    overflow: auto;
}

.preview blockquote {
    border-left: 3px solid var(--hi);
    margin-left: 0;
    padding-left: 12px;
}

.preview table {
    border-collapse: collapse;
}

.preview th,.preview td {
    border: 1px solid var(--bd);
    padding: 5px;
}

.imgprev {
    max-width: 100%;
    max-height: 310px;
    display: block;
    margin: 10px auto;
    object-fit: contain;
}

.tag {
    font-size: 12px;
    border: 1px solid var(--bd);
    padding: 2px 6px;
    border-radius: 8px;
}

.wheel {
    display: block;
    max-width: 100%;
    margin: 10px auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 7px solid var(--bd);
    transition: transform 3.8s cubic-bezier(.14,.7,.18,1);
}

.pointer {
    text-align: center;
    font-size: 24px;
    margin-bottom: -10px;
    position: relative;
    z-index: 1;
}

.smallbutton {
    font-size: 13px;
    padding: 5px 9px;
}

textarea {
    min-height: 110px;
}

@media (max-width:500px) {
    .home-head {
        font-size: 20px;
    }

    .kpi {
        font-size: 19px;
    }
}

/* 六つの追加ツール */

.reactpad {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 16px;
    background: #426b9a;
    color: white;
    font-size: 24px;
    font-weight: 750;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    padding: 22px;
}

.reactpad.wait {
    background: #a84444;
}

.reactpad.go {
    background: #19865e;
}

.reactpad.early {
    background: #ab7728;
}

.rulerWrap {
    overflow-x: auto;
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 12px;
    background: var(--sf);
}

#rulerCanvas {
    display: block;
    max-width: none;
    touch-action: none;
}

#qrVideo {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: 12px;
    background: #171e28;
}

#qrScanCanvas {
    display: none;
}

.tripnotes {
    min-height: 75px;
}

@media (max-width:500px) {
    .reactpad {
        min-height: 190px;
    }

    .w {
        padding: 8px;
    }
}

/* ゲームセンターと追加実用ツール */

.gamepad {
    border-radius: 14px;
    border: 2px solid var(--bd);
    padding: 18px;
    text-align: center;
    min-height: 150px;
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    background: var(--bg);
}

.gamepad:active {
    transform: scale(.99);
}

.game-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
    gap: 12px;
}

.game-card {
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 14px;
    background: var(--bg);
}

.game-card button {
    width: 100%;
    margin-top: 10px;
}

.challenge-number {
    font-size: 50px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.gm-board {
    display: grid;
    grid-template-columns: repeat(15,minmax(0,1fr));
    width: min(100%,540px);
    margin: 12px auto;
    border: 2px solid #98754e;
    aspect-ratio: 1;
    background: #dec59b;
    touch-action: manipulation;
}

.gm-cell {
    padding: 0;
    border: 1px solid #a38a63;
    border-radius: 0;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    min-width: 0;
    position: relative;
}

.gm-cell::after {
    content: "";
    width: 76%;
    aspect-ratio: 1;
    border-radius: 50%;
}

.gm-cell.black::after {
    background: #202124;
    box-shadow: inset -2px -2px 4px #0007;
}

.gm-cell.white::after {
    background: #fff;
    box-shadow: inset -2px -2px 4px #999;
}

.gm-cell.last {
    outline: 2px solid #f33;
    outline-offset: -3px;
}

.gm-cell:focus-visible {
    outline: 2px solid #276bca;
    outline-offset: -3px;
}

.codebox {
    min-height: 220px;
    font: 13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
    tab-size: 2;
}

.codepreview {
    width: 100%;
    height: 370px;
    border: 1px solid var(--bd);
    background: white;
    border-radius: 10px;
}

.type-prompt {
    font-size: 20px;
    line-height: 1.8;
    background: var(--bg);
    padding: 14px;
    border-radius: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.type-prompt .correct {
    color: #25845e;
}

.type-prompt .incorrect {
    background: #fbd6d6;
    color: #aa2525;
}

.type-prompt .pending {
    opacity: .6;
}

/* 元HTMLのstyle属性を移動：HTML側に見た目の指定を残さないため */

#homeTools {
    margin-top: 10px;
}

#fuOilStatus {
    margin-top: 12px;
}

#ruCard {
    border: 3px dashed #268dc1;
    border-radius: 9px;
    height: 53px;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    white-space: nowrap;
}

#qsResult {
    min-height: 85px;
}

#mdInput {
    min-height: 340px;
}

#tyInput {
    min-height: 90px;
    margin-top: 10px;
}

#cG {
    margin: 10px 0;
}

#cEq {
    width: 100%;
    padding: 14px;
    font-size: 20px;
}

#kO {
    margin-top: 14px;
}

#pO {
    font-size: 20px;
}

#oC {
    height: 44px;
    padding: 2px;
}

#qT {
    min-height: 90px;
}

#qO {
    text-align: center;
    margin: 12px 0;
}

#rdList {
    min-height: 125px;
}