:root { --highlow-blue: #1f75ff; --highlow-blue-strong: #0f5fe0; --highlow-red: #ef5b70; --highlow-red-soft: #fff0f2; --highlow-ink: #121826; --highlow-muted: #718096; }
main.highlow { max-width: 420px; min-height: 100vh; margin: 0 auto; padding: 16px; }
[hidden] { display: none !important; }
.highlow__section { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 0 28px 28px; }.highlow__section--setup { min-height: calc(100vh - 32px); align-items: stretch; justify-content: center; }.highlow__hero { position: relative; align-self: center; width: 132px; height: 116px; }.highlow__hero span, .highlow__hero b { position: absolute; display: flex; flex-direction: column; width: 76px; height: 106px; padding: 9px; border-radius: 12px; font: 700 29px/1 Georgia, serif; box-shadow: 0 10px 20px rgba(18,24,38,.14); }.highlow__hero span { align-items: center; justify-content: center; left: 8px; top: 8px; color: #fff; border: 2px solid #1f75ff; background: repeating-linear-gradient(45deg,#4e8bff 0 6px,#1f63d4 6px 12px); transform: rotate(-12deg); }.highlow__hero b { right: 7px; color: #df4059; background: #fffdf9; border: 1px solid var(--color-border); transform: rotate(10deg); }.highlow__hero small { align-self: flex-end; font-size: 25px; }.highlow__heading { margin: -4px 0 0; color: var(--highlow-ink); text-align: center; font-size: 27px; }.highlow__lead { margin: -12px 0 2px; color: var(--highlow-muted); text-align: center; font-size: 14px; line-height: 1.75; }.highlow__field { display: flex; flex-direction: column; gap: 8px; }.highlow__field-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }.highlow__field-head span { color: var(--highlow-muted); font-size: 12px; font-weight: 500; }.highlow__field-head > span { color: var(--highlow-blue); font-weight: 700; }.highlow__field textarea, .highlow__field input { width: 100%; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-text); font: inherit; }.highlow__field textarea { min-height: 108px; resize: vertical; }.highlow__field textarea:focus, .highlow__field input:focus { outline: none; border-color: var(--highlow-blue); box-shadow: 0 0 0 4px rgba(31,117,255,.15); }.highlow__field p { margin: -2px 0 0; color: var(--highlow-muted); font-size: 12px; }.highlow__field--count { flex-direction: row; align-items: center; justify-content: space-between; }.highlow__field--count label { font-weight: 600; }.highlow__field--count input { width: 84px; padding: 9px 12px; text-align: center; }.highlow__error { margin: -8px 0 0; padding: 10px 14px; border-radius: var(--radius-pill); color: #d3455e; background: var(--highlow-red-soft); font-size: 13px; text-align: center; }.highlow__primary { width: 100%; padding: 14px; border-radius: var(--radius-pill); color: #fff; background: var(--highlow-blue); box-shadow: 0 8px 18px rgba(31,117,255,.25); font-weight: 700; }.highlow__plain-button { align-self: center; color: var(--highlow-blue); font-size: 14px; font-weight: 600; }.highlow__plain-button i { margin-right: 5px; }
.highlow__section--game { gap: 16px; padding: 0 4px 26px; }.highlow__header { position: relative; min-height: 46px; display: flex; align-items: center; justify-content: center; }.highlow__header h1 { margin: 0; font-size: 18px; }.highlow__header .result__back-button { top: 0; left: 0; }.highlow__rules-button { position: absolute; right: 0; padding: 8px 10px; border-radius: var(--radius-pill); color: var(--highlow-blue); background: var(--color-primary-soft); font-size: 12px; font-weight: 700; }.highlow__turn-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface-alt); }.highlow__turn-card strong { font-size: 18px; }.highlow__turn-card span { color: var(--highlow-blue); font-size: 12px; font-weight: 700; }.highlow__board { display: flex; flex-direction: column; align-items: center; }.highlow__prompt { margin: 5px 0 18px; font-size: 16px; font-weight: 700; }.highlow__cards { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; }.playing-card { position: relative; width: min(37vw, 138px); aspect-ratio: .7; border-radius: 13px; box-shadow: 0 10px 22px rgba(18,24,38,.15); transform-style: preserve-3d; }.playing-card--current { color: var(--card-color, #dc4059); border: 1px solid #e7e3dc; background: #fffdf8; }.playing-card--current::before { content: attr(data-rank) '\A' attr(data-suit); position: absolute; top: 10px; left: 11px; white-space: pre; font-family: Georgia, serif; font-size: 26px; font-weight: 700; line-height: 1.14; }.playing-card--current::after { content: attr(data-suit); position: absolute; left: 50%; top: 56%; transform: translate(-50%,-50%); font: 700 77px/1 Georgia,serif; }.playing-card--back { border: 3px solid #2c7ff4; background: repeating-linear-gradient(45deg,#72a9ff 0 6px,#3475db 6px 12px); }.playing-card--back::after { content: '♠'; position: absolute; inset: 7px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.72); font: 57px Georgia, serif; }.highlow__arrow { color: #9aa8ba; font-size: 17px; }.playing-card--flip { animation: highlow-flip .72s cubic-bezier(.22,.78,.28,1) both; }.highlow__hint { margin: 18px 0 10px; color: var(--highlow-muted); font-size: 12px; text-align: center; }.highlow__streak { display: flex; align-items: baseline; gap: 6px; margin-bottom: 15px; padding: 6px 15px; border-radius: 999px; color: var(--highlow-blue); background: var(--color-primary-soft); }.highlow__streak span, .highlow__streak small { font-size: 12px; font-weight: 600; }.highlow__streak strong { font-size: 25px; line-height: 1; }.highlow__choice-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }.highlow__choice { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 9px; align-items: center; min-height: 76px; padding: 10px 14px; border-radius: var(--radius-medium); color: #fff; text-align: left; }.highlow__choice i { grid-row: 1 / span 2; font-size: 23px; }.highlow__choice span { font-size: 10px; letter-spacing: .11em; opacity: .82; }.highlow__choice b { font-size: 22px; line-height: 1; }.highlow__choice--low { background: #3b91de; }.highlow__choice--high { background: var(--highlow-red); }.highlow__bank { width: 100%; margin-top: 12px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--highlow-blue); background: #fff; font-size: 14px; font-weight: 700; }.highlow__bank:not(:disabled) { border-color: rgba(31,117,255,.25); background: var(--color-primary-soft); }.highlow__bank:disabled { color: var(--highlow-muted); }
.highlow__modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(18,24,38,.42); }.highlow__modal-card { position: relative; width: min(100%,380px); padding: 28px 24px 23px; border-radius: var(--radius-large); background: #fff; color: var(--highlow-ink); box-shadow: var(--shadow-soft); text-align: center; }.highlow__modal-card h2 { margin: 0; color: var(--highlow-ink); font-size: 25px; }.highlow__modal-card > p:not(.highlow__modal-kicker):not(.highlow__safe-note) { margin: 11px 0 19px; color: var(--highlow-muted); font-size: 14px; line-height: 1.75; }.highlow__result-icon { width: 49px; height: 49px; display: grid; place-items: center; margin: -51px auto 6px; border-radius: 50%; color: #fff; background: var(--highlow-blue); box-shadow: 0 5px 14px rgba(31,117,255,.28); }.highlow__modal-kicker { margin: 8px 0 2px; color: var(--highlow-blue); font-size: 11px; font-weight: 800; letter-spacing: .12em; }.highlow__modal-actions { display: grid; gap: 9px; }.highlow__modal-actions button { padding: 12px; border-radius: var(--radius-pill); font-weight: 700; }.highlow__modal-actions .primary { color: #fff; background: var(--highlow-blue); }.highlow__modal-actions .secondary { color: var(--highlow-blue); background: var(--color-primary-soft); }.highlow__close { position: absolute; top: 12px; right: 13px; color: var(--highlow-muted); font-size: 18px; }.highlow__modal-card--rules { padding-top: 29px; text-align: left; }.highlow__modal-card--rules h2 { text-align: center; }.highlow__rules-list { padding: 0; margin: 20px 0; list-style: none; counter-reset: rules; }.highlow__rules-list li { position: relative; margin: 12px 0; padding-left: 28px; color: #4e5a6e; font-size: 14px; line-height: 1.65; }.highlow__rules-list li::before { counter-increment: rules; content: counter(rules); position: absolute; top: 2px; left: 0; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; background: var(--highlow-blue); font-size: 11px; font-weight: 700; }.highlow__safe-note { margin: 0; padding-top: 14px; border-top: 1px solid var(--color-border); color: var(--highlow-muted); font-size: 12px; text-align: center; }
@keyframes highlow-flip { 0% { transform: rotateY(0); } 48% { transform: rotateY(90deg) scale(1.06); } 100% { transform: rotateY(0); } } @media (max-width:360px) { main.highlow { padding: 12px; }.highlow__section { padding-left: 16px; padding-right: 16px; }.playing-card { width: 120px; }.highlow__cards { gap: 12px; } } @media (prefers-reduced-motion:reduce) { .playing-card--flip { animation-duration:.01ms; } }

/* カード卓らしいネイビー／パープルのカラーテーマ */
body { background: #11152f; }
main.highlow {
  color: #f9f7f0;
  background:
    radial-gradient(circle at 50% 26%, rgba(76, 132, 176, .18), transparent 31%),
    linear-gradient(165deg, #403475 0%, #242b5b 39%, #11152f 79%);
}
.highlow .editor__back-button,
.highlow .result__back-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .09);
}
.highlow__section--setup .editor__back-button { top: 0; left: 0; }
.highlow__section--game .result__back-button { top: 0; left: -4px; }
.highlow__heading, .highlow__header h1 { color: #fff; }
.highlow__lead, .highlow__field p, .highlow__hint { color: rgba(239, 243, 255, .66); }
.highlow__field-head, .highlow__field--count label { color: #fff; }
.highlow__field-head span { color: rgba(239, 243, 255, .66); }
.highlow__field-head > span { color: #f7cf73; }
.highlow__field textarea, .highlow__field input {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(10, 13, 40, .30);
  color: #fff;
}
.highlow__field textarea::placeholder, .highlow__field input::placeholder { color: rgba(239, 243, 255, .42); }
.highlow__field textarea:focus, .highlow__field input:focus { border-color: #7bb6ff; box-shadow: 0 0 0 4px rgba(91, 162, 255, .18); }
.highlow__primary { color: #302554; background: linear-gradient(135deg, #ffe3a0, #f4c259); box-shadow: 0 10px 22px rgba(0, 0, 0, .24); }
.highlow__plain-button, .highlow__rules-button { color: #fff; }
.highlow__rules-button { background: rgba(255, 255, 255, .12); }
.highlow__hero span { border-color: #f8ca64; background: repeating-linear-gradient(45deg, #793da9 0 6px, #40216a 6px 12px); }
.highlow__turn-card { border-color: rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .08); }
.highlow__turn-card p { color: rgba(255, 255, 255, .65); }.highlow__turn-card span { color: #f7cf73; }
.highlow__prompt { color: #fff; }.highlow__arrow { color: rgba(255, 255, 255, .68); }
.playing-card--back { border-color: #f6c85e; background: repeating-linear-gradient(45deg, #7437a3 0 6px, #3d2066 6px 12px); }.playing-card--back::after { color: #f7cf73; border-color: rgba(247, 207, 115, .68); }
.highlow__streak { color: #f9d27a; background: rgba(248, 202, 100, .14); }
.highlow__choice--low { background: linear-gradient(135deg, #3588db, #4ba8e5); }.highlow__choice--high { background: linear-gradient(135deg, #ce4260, #ee7180); }
.highlow__bank { border-color: rgba(255, 255, 255, .19); color: #fff; background: rgba(255, 255, 255, .08); }.highlow__bank:not(:disabled) { border-color: rgba(247, 207, 115, .5); color: #f9d27a; background: rgba(248, 202, 100, .13); }.highlow__bank:disabled { color: rgba(255, 255, 255, .47); }