.activity-dialog.triad-dialog { box-sizing: border-box; width: min(980px,calc(100vw - 1rem)); max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); overflow-y: auto; padding: clamp(.75rem,3vw,1.8rem); overscroll-behavior: contain; }
.activity-dialog.triad-dialog .dialog-close { min-width: 44px; min-height: 44px; }
.triad-game { padding: clamp(.5rem,2vw,1rem); border-radius: 1rem; background: #edf4f3; border: 1px solid #b5c9cf; }
.triad-game .game-progress { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .9rem; font-size: .9rem; font-weight: 700; }
.triad-console { background: linear-gradient(135deg,#214e60,#102f44); color: #f3fafa; border: 3px solid #8aaab3; border-radius: .8rem; padding: clamp(.7rem,2vw,1.3rem); box-shadow: inset 0 0 0 4px #183b4c; }
.triad-console .eyebrow { color: #ffe0a2; }
.triad-console h3 { color: #fff; font-family: Georgia,serif; margin: .9rem 0 .6rem; }
.triad-console p { line-height: 1.5; }
.triad-direction strong { display: inline-block; color: #ffe39d; font-size: 1.15em; }
.triad-clue { padding: .8rem; background: #e7f6f1; color: #163d48; border-radius: .4rem; }
.triad-deck { position: relative; overflow: hidden; background: #173b52; border: 1px solid #6e9db0; border-radius: .5rem; }
.triad-deck svg { display: block; width: 100%; height: 110px; }
.triad-sea { fill: #317796; animation: triad-sea 3s ease-in-out infinite alternate; }
.triad-crane { fill: #e9c766; stroke: #ad8736; stroke-width: 2; }
.triad-cable { stroke: #d1e8e6; stroke-width: 2; }
.triad-rosette { fill: #9fcac8; stroke: #d4f1ec; stroke-width: 2; animation: triad-sample 4s ease-in-out infinite alternate; }
.triad-rosette rect { fill: #658b9b; }
.triad-trace { fill: none; stroke: #77b8d5; stroke-width: 3; stroke-dasharray: 8 5; animation: triad-trace 5s linear infinite; }
.triad-deck span { position: absolute; left: .4rem; bottom: .3rem; background: #143548; padding: .25rem .4rem; border-radius: .2rem; font-size: .75rem; }
.triad-console.is-calibrated .triad-trace { stroke: #9bffdc; stroke-dasharray: none; animation: none; }
.triad-console.is-calibrated .triad-deck span { color: #b9ffdf; }
.triad-prompts { display: grid; gap: .6rem; grid-template-columns: 1fr; margin: .9rem 0; }
.triad-prompts > div { padding: .7rem; border: 2px solid #8dc5d1; background: #def1f4; color: #173b4d; border-radius: .4rem; min-width: 0; }
.triad-prompts small { display: block; font-size: .75rem; font-weight: 700; }
.triad-prompts strong { display: block; font: 800 1.4rem/1.4 Georgia,serif; overflow-wrap: anywhere; }
.triad-console label { display: block; margin: 1rem 0 .5rem; font-weight: 700; }
.triad-console input { display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: .7rem; font-size: 1.25rem; font-weight: 800; letter-spacing: .08em; background: #fffdf4; color: #153d50; border: 3px solid #edce83; border-radius: .4rem; }
.triad-console input:focus-visible, .triad-game button:focus-visible { outline: 3px solid #ffdf88; outline-offset: 3px; }
.triad-console input.is-wrong { border-color: #f5a5a7; }
.triad-console input.is-correct { border-color: #9befc9; background: #d9f8e8; }
.triad-console input:disabled { opacity: 1; -webkit-text-fill-color: #153d50; }
.triad-input-help { font-size: .9rem; }
.triad-game button { min-height: 44px; min-width: 44px; touch-action: manipulation; }
.triad-letter-toggle { width: 100%; }
.triad-letters { display: grid; grid-template-columns: repeat(auto-fit,minmax(44px,1fr)); gap: .45rem; padding: .9rem 0; }
.triad-letters[hidden] { display: none; }
.triad-letters button { box-sizing: border-box; border: 2px solid #90bbc9; border-radius: .35rem; background: #edf7f7; color: #123d50; font-weight: 800; padding: .4rem; cursor: pointer; }
.triad-letters button:disabled { opacity: .55; }
.triad-letters .triad-delete { grid-column: 1/-1; }
.triad-preview { margin: .9rem 0; padding: .8rem; border: 1px dashed #96c3cc; border-radius: .4rem; background: #153d50; }
.triad-preview h4 { margin: 0 0 .6rem; font-size: .9rem; color: #cce7ed; }
.triad-preview ol { padding-left: 1.3rem; margin: 0; line-height: 1.6; }
.triad-preview li { overflow-wrap: anywhere; }
.triad-console .game-feedback { background: #eef5f4; color: #153d50; }
.triad-console .game-feedback.is-correct { background: #d7f4e7; color: #154d40; }
.triad-console .game-feedback.is-wrong { background: #ffe9e2; color: #6f322b; }
.triad-hint { padding: .8rem; background: #fff1d8; color: #443c29; border-left: 4px solid #d2a456; }
.triad-controls { display: flex; flex-wrap: wrap; gap: .6rem; padding-bottom: max(.2rem,env(safe-area-inset-bottom)); }
.triad-controls button { flex: 1 1 140px; }
.triad-next { margin-top: 1rem; width: 100%; }
.triad-log, .triad-result { background: #fffaf0; padding: 1rem; border-radius: .5rem; line-height: 1.55; margin-top: 1rem; }
.triad-log { border-left: 4px solid #29887c; }
.triad-log h4 { font-size: 1.25rem; color: #184c58; overflow-wrap: anywhere; }
.triad-log h5 { font-size: 1.05rem; margin: .8rem 0; color: #184c58; overflow-wrap: anywhere; }
.triad-log ul, .triad-result ul { padding-left: 1.2rem; }
.triad-log li { border-top: 1px solid #c6d6d2; padding-top: .25rem; }
.triad-log li p { margin: .5rem 0; }
.triad-fact { border-top: 1px dashed #9ebcbb; padding-top: .9rem; }
.triad-result li { margin-bottom: .8rem; overflow-wrap: anywhere; }
.triad-result li p { margin-top: .2rem; }
@media (min-width: 540px) { .triad-prompts { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@keyframes triad-sea { to { transform: translateY(4px); } }
@keyframes triad-sample { to { transform: translateY(-5px); } }
@keyframes triad-trace { to { stroke-dashoffset: -65; } }
@media (prefers-reduced-motion: reduce) { .triad-game *, .triad-game *::before, .triad-game *::after { animation: none !important; transition: none !important; } }