/* =============================================
TiiFa BASE 国語 — 思考力バトル共通CSS
thinking-common.css
思考力バトルHTML（05〜07）で共有するスタイル。
各HTMLの 内で読み込む:
============================================= */
body {
min-height: 100vh;
background: linear-gradient(135deg, #E8F7F8 0%, #D1F0F2 40%, #B8E8EB 100%);
color: var(--navy);
user-select: text;
-webkit-tap-highlight-color: transparent;
}
.app {
max-width: 430px;
margin: 0 auto;
min-height: 100vh;
padding-bottom: 40px;
}
/* ===== HERO (portal design) ===== */
.hero {
padding: 32px 20px 24px;
text-align: center;
background: linear-gradient(135deg, rgba(92,193,198,0.22), rgba(232,247,248,0.96));
border-radius: 0 0 28px 28px;
border-bottom: 1px solid rgba(92,193,198,0.22);
box-shadow: 0 10px 24px rgba(26,58,92,0.08);
margin-bottom: 20px;
}
.hero-logo {
font-size: 36px;
font-weight: 900;
letter-spacing: 0.04em;
color: var(--navy);
}
.hero-logo span { color: var(--tiifa); }
.hero-sub {
font-size: 13px;
font-weight: 700;
color: var(--tiifa-dark);
margin-top: 6px;
letter-spacing: 1px;
}
.hero-desc {
font-size: 13px;
color: var(--dark-gray);
line-height: 1.8;
margin-top: 10px;
}
.hero-mascot {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 14px;
}
.hero-mascot img {
width: 56px;
height: auto;
object-fit: contain;
}
.hero-mascot span {
font-size: 12px;
font-weight: 700;
color: var(--dark-gray);
background: #fff;
border: 2px solid var(--tiifa);
border-radius: 16px;
padding: 6px 12px;
position: relative;
box-shadow: 0 4px 12px rgba(92, 193, 198, 0.10);
}
.hero-mascot span::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
margin-top: -8px;
width: 10px;
height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' width='10' height='16'%3E%3Cpath d='M 10 0 C 6 4 3 6 0 8 C 3 10 6 12 10 16 L 10 0 Z' fill='white'/%3E%3Cpath d='M 10 0 C 6 4 3 6 0 8 C 3 10 6 12 10 16' fill='none' stroke='%235CC1C6' stroke-width='2' stroke-linejoin='round' stroke-linecap='butt'/%3E%3C/svg%3E") no-repeat;
}
/* ===== SECTIONS (portal design) ===== */
.portal-section {
padding: 0 16px;
margin-bottom: 24px;
}
.section-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
padding: 0 4px;
}
.section-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.section-title {
font-size: 15px;
font-weight: 800;
color: var(--navy);
}
.section-subtitle {
font-size: 11px;
font-weight: 600;
color: var(--dark-gray);
opacity: 0.7;
margin-top: 1px;
}
/* ===== DIVIDER (portal design) ===== */
.portal-divider {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 20px 8px;
margin: 0 0 20px;
}
.divider-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(92,193,198,0.35), transparent);
}
.divider-text {
font-size: 11px;
font-weight: 700;
color: var(--tiifa-dark);
white-space: nowrap;
letter-spacing: 0.5px;
}
/* ===== GRID (portal design) ===== */
.app-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* ===== PORTAL CARD SYSTEM (260402_demo style) ===== */
.app-card {
background: #fff;
border-radius: 22px;
padding: 20px 14px 18px;
box-shadow: 0 6px 24px rgba(26,58,92,0.08), 0 2px 6px rgba(26,58,92,0.04);
border: 3px solid transparent;
aspect-ratio: 1 / 1;
justify-content: center;
cursor: pointer;
transition: all 0.25s cubic-bezier(.4,0,.2,1);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
}
.app-card:active {
transform: scale(0.95) translateY(2px);
box-shadow: 0 2px 10px rgba(26,58,92,0.1);
}
.app-card::before {
content: '';
position: absolute;
top: -30px;
right: -30px;
width: 90px;
height: 90px;
border-radius: 50%;
pointer-events: none;
opacity: 0.5;
}
/* Master card (teal) */
.app-card.master-card {
border-color: rgba(92,193,198,0.45);
box-shadow: 0 6px 24px rgba(92,193,198,0.12), 0 2px 8px rgba(92,193,198,0.08), inset 0 0 0 1px rgba(92,193,198,0.06);
}
.master-card::before {
background: radial-gradient(circle, rgba(92,193,198,0.25), transparent 70%);
}
.master-card .card-icon {
background: linear-gradient(140deg, #D4F3F5, rgba(92,193,198,0.25));
box-shadow: 0 4px 12px rgba(92,193,198,0.15);
}
.master-card .card-icon svg { stroke: var(--tiifa-dark); }
.master-card .card-number {
background: var(--tiifa-light);
color: var(--tiifa-dark);
}
/* Dojo card (warm orange) */
.app-card.dojo-card {
border-color: rgba(212,150,100,0.45);
box-shadow: 0 6px 24px rgba(212,150,100,0.12), 0 2px 8px rgba(212,150,100,0.08), inset 0 0 0 1px rgba(212,150,100,0.06);
}
.dojo-card::before {
background: radial-gradient(circle, rgba(212,150,100,0.2), transparent 70%);
}
.dojo-card .card-icon {
background: linear-gradient(140deg, #FDEBD6, rgba(212,150,100,0.2));
box-shadow: 0 4px 12px rgba(212,150,100,0.15);
}
.dojo-card .card-icon svg { stroke: #C08040; }
.dojo-card .card-number {
background: #FDF0E2;
color: #B07030;
}
.card-icon {
width: 52px;
height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.card-icon svg { width: 24px; height: 24px; }
.card-number {
font-size: 10px;
font-weight: 800;
padding: 3px 10px;
border-radius: 999px;
letter-spacing: 0.5px;
}
.card-name {
font-size: 13px;
font-weight: 800;
line-height: 1.45;
color: var(--navy);
}
.card-desc {
font-size: 10px;
color: var(--dark-gray);
line-height: 1.5;
opacity: 0.7;
}
/* Section headers */
.section-icon.master {
background: linear-gradient(135deg, var(--tiifa-light), rgba(92,193,198,0.2));
color: var(--tiifa-dark);
}
.section-icon.dojo {
background: linear-gradient(135deg, #FDEBD6, rgba(212,150,100,0.18));
color: #C08040;
}
.sub-section-label {
font-size: 14px;
font-weight: 800;
color: var(--navy);
padding: 0 4px;
margin-bottom: 12px;
}
.sub-divider {
padding: 12px 0;
}
/* ===== FOOTER (portal design) ===== */
.portal-footer {
text-align: center;
padding: 20px 20px 0;
font-size: 11px;
color: var(--dark-gray);
opacity: 0.5;
font-weight: 600;
}
/* ===== ルビ表示 ===== */
ruby {
ruby-align: center;
}
ruby rt {
font-size: 0.55em;
color: var(--dark-gray);
}
/* ===== TiiFaちゃん画像 ===== */
.tiifa-image {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.tiifa-vs-img {
width: 72px;
height: auto;
object-fit: contain;
animation: bounce 2s infinite;
}
.tiifa-avatar {
background: none !important;
width: 52px;
height: auto;
border: none;
box-shadow: none;
overflow: visible;
display: flex;
justify-content: center;
align-items: center;
}
.tiifa-avatar-img {
width: 52px;
height: auto;
object-fit: contain;
display: block;
}
.tiifa-listener-img {
width: 44px;
height: auto;
object-fit: contain;
display: block;
}
#homeScreen > div[style*="margin-bottom: 32px"] img {
width: 80px !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto !important;
}
.result-ai-icon {
width: 24px;
}
.result-ai-message {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
background: #fff;
border: 2px solid var(--tiifa);
border-radius: 20px;
padding: 10px 16px;
font-size: 14px;
font-weight: 700;
color: var(--navy);
position: relative;
box-shadow: 0 4px 12px rgba(92, 193, 198, 0.10);
}
.result-ai-message::before {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
margin-left: -8px;
width: 16px;
height: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' width='16' height='10'%3E%3Cpath d='M 0 0 C 4 3 6 6 8 10 C 10 6 12 3 16 0 L 0 0 Z' fill='white'/%3E%3Cpath d='M 0 0 C 4 3 6 6 8 10 C 10 6 12 3 16 0' fill='none' stroke='%235CC1C6' stroke-width='2' stroke-linejoin='round' stroke-linecap='butt'/%3E%3C/svg%3E") no-repeat;
}
.result-ai-message img {
width: 24px;
height: auto;
object-fit: contain;
display: block;
flex-shrink: 0;
}
/* TiiFaちゃん吹き出しレイアウト（アバター＋吹き出し） */
.result-ai-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 12px 0;
justify-content: center;
}
.tiifa-speak-avatar {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
border-radius: 50%;
object-fit: contain;
flex-shrink: 0;
background: var(--pastel-teal);
border: 2px solid var(--pastel-teal);
}
.result-ai-bubble {
background: #fff;
border: 2px solid var(--tiifa);
border-radius: 18px;
padding: 10px 16px;
font-size: 14px;
font-weight: 700;
color: var(--navy);
position: relative;
box-shadow: 0 4px 12px rgba(92, 193, 198, 0.10);
text-align: left;
max-width: calc(100% - 54px);
}
.result-ai-bubble::before {
content: '';
position: absolute;
top: 12px;
left: -8px;
width: 10px;
height: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10'%3E%3Cpath d='M 10 0 C 6 2 3 4 0 5 C 3 6 6 8 10 10 L 10 0 Z' fill='white'/%3E%3Cpath d='M 10 0 C 6 2 3 4 0 5 C 3 6 6 8 10 10' fill='none' stroke='%235CC1C6' stroke-width='2' stroke-linejoin='round' stroke-linecap='butt'/%3E%3C/svg%3E") no-repeat;
}
.tiifa-inline-icon {
width: 16px;
height: auto;
vertical-align: middle;
display: inline-block;
margin-right: 2px;
}
/* ===== スクリーン管理 ===== */
.screen {
display: none;
flex: 1;
padding: 24px 20px;
animation: fadeIn 0.3s ease-in;
user-select: text;
}
.screen.active {
display: flex;
flex-direction: column;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.final-question-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
animation: overlayFade 0.3s ease;
}
.explanation-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.48);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 998;
}
.explanation-overlay.show {
opacity: 1;
pointer-events: auto;
}
.explanation-popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.96);
width: min(88vw, 360px);
background: white;
border-radius: 22px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
padding: 20px 18px 16px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 999;
text-align: center;
}
.explanation-popup.show {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.explanation-result-icon {
font-size: 40px;
margin-bottom: 8px;
}
.explanation-title {
font-size: 28px;
font-weight: 800;
color: var(--navy);
margin-bottom: 10px;
}
.explanation-correct-answer {
font-size: 14px;
font-weight: 700;
color: var(--tiifa-dark);
margin-bottom: 10px;
}
.explanation-divider {
height: 1px;
background: var(--light-gray);
margin: 12px 0;
}
.explanation-text {
font-size: 14px;
line-height: 1.6;
color: var(--dark-gray);
text-align: left;
}
.explanation-tag {
display: inline-block;
margin-top: 14px;
padding: 6px 10px;
border-radius: 999px;
background: var(--tiifa-light);
color: var(--tiifa-dark);
font-size: 12px;
font-weight: 800;
}
@keyframes overlayFade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.final-text {
font-size: 44px;
font-weight: 800;
color: white;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
animation: finalPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes finalPop {
0% { transform: scale(0) rotate(-20deg); opacity: 0; }
50% { transform: scale(1.2) rotate(10deg); }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* ===== 結果画面 ===== */
#resultScreen {
justify-content: flex-start;
padding-top: 20px;
overflow-y: auto;
}
.result-header {
text-align: center;
margin-bottom: 20px;
}
.result-stamp {
font-size: 80px;
margin: 12px 0;
animation: stampSlam 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#thinkingResultScreen .result-title {
display: none;
}
@keyframes stampSlam {
0% { transform: scale(0) rotate(-45deg); opacity: 0; }
50% { transform: scale(1.2) rotate(10deg); }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
.review-detail .your-answer { color: var(--red); }
.review-detail .correct-answer { color: var(--green); font-weight: 700; }
.review-explanation {
font-size: 12px;
color: var(--tiifa-dark);
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--light-gray);
line-height: 1.5;
}
.result-buttons {
display: flex;
gap: 12px;
margin-top: 24px;
margin-bottom: 24px;
}
.result-btn {
flex: 1;
padding: 12px 15px;
font-size: 15px;
font-weight: 700;
border: none;
border-radius: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.result-btn.primary {
background: var(--pastel-teal); color: var(--navy); border: 2px solid #fff;
}
.result-btn.secondary {
background: var(--light-gray);
color: var(--navy);
}
.result-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
#resultScreen.explain-result-mode .score-comparison,
#resultScreen.explain-result-mode .result-detail-section,
#resultScreen.explain-result-mode .score-card,
#resultScreen.explain-result-mode #retryBtn {
display: none;
}
#resultScreen.explain-result-mode .result-header {
margin-bottom: 14px;
}
#resultScreen.explain-result-mode .result-buttons {
justify-content: center;
}
#resultScreen.explain-result-mode #modeChangeBtn {
flex: 0 1 260px;
}
.explain-feedback-panel {
display: none;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(92, 193, 198, 0.2);
border-radius: 18px;
box-shadow: 0 10px 22px rgba(26, 58, 92, 0.08);
padding: 14px;
margin-top: 8px;
}
#resultScreen.explain-result-mode .explain-feedback-panel {
display: block;
}
.explain-feedback-title-main {
font-size: 15px;
font-weight: 800;
color: var(--tiifa-dark);
margin-bottom: 10px;
}
.explain-feedback-block {
margin-bottom: 12px;
padding: 10px 12px;
border-radius: 12px;
background: #f8fbfd;
border: 1px solid #e6eef3;
}
.explain-feedback-block:last-child {
margin-bottom: 0;
}
.explain-feedback-label {
font-size: 12px;
font-weight: 800;
color: var(--tiifa-dark);
margin-bottom: 4px;
}
.explain-feedback-value {
font-size: 14px;
line-height: 1.65;
color: var(--navy);
white-space: pre-wrap;
}
/* ===== バージョン表示 ===== */
.version-tag {
text-align: center;
font-size: 10px;
color: rgba(0,0,0,0.2);
margin-top: 12px;
}
/* ===== 結果画面 詳細テーブル ===== */
.result-detail-section {
margin-top: 16px;
}
.result-detail-header {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
padding: 12px 16px;
border-radius: 14px 14px 0 0;
position: relative;
overflow: hidden;
}
.result-detail-header.player-win {
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
}
.result-detail-header.draw {
background: linear-gradient(135deg, #e2e3e5 0%, #d6d8db 100%);
}
.result-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
min-width: 80px;
}
.result-side-avatar {
font-size: 20px;
}
.result-side-name {
font-size: 11px;
font-weight: 700;
color: var(--navy);
}
.result-side-streak {
font-size: 10px;
padding: 2px 8px;
border-radius: 6px;
background: rgba(255,255,255,0.7);
font-weight: 600;
color: var(--dark-gray);
}
.result-side-score {
font-size: 32px;
font-weight: 800;
}
.result-side-score.player-color { color: var(--tiifa-dark); }
.result-side-score.ai-color { color: var(--orange); }
.result-side-unit {
font-size: 11px;
font-weight: 600;
color: var(--dark-gray);
}
.result-center {
text-align: center;
}
.result-win-label {
font-size: 28px;
font-weight: 800;
color: var(--navy);
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Per-question detail rows */
.result-q-table {
border-radius: 0 0 14px 14px;
overflow: hidden;
border: 2px solid var(--light-gray);
border-top: none;
}
.result-q-row {
display: flex;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid var(--light-gray);
min-height: 56px;
position: relative;
}
.result-q-row:last-child {
border-bottom: none;
}
.result-q-row:nth-child(odd) {
background: #fafbfc;
}
.result-q-left {
flex: 1;
display: flex;
align-items: center;
gap: 4px;
justify-content: flex-start;
}
.result-q-center {
flex: 1.5;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.result-q-right {
flex: 1;
display: flex;
align-items: center;
gap: 4px;
justify-content: flex-end;
}
.result-q-flag-slot {
width: 36px;
display: flex;
justify-content: center;
flex-shrink: 0;
}
.result-q-icon-slot {
width: 22px;
display: flex;
justify-content: center;
flex-shrink: 0;
}
.result-q-subject {
font-size: 13px;
font-weight: 700;
color: var(--navy);
line-height: 1.3;
}
.result-q-category {
font-size: 10px;
color: var(--dark-gray);
}
.result-q-win-badge {
font-size: 10px;
font-weight: 800;
color: white;
background: var(--red);
padding: 2px 4px;
border-radius: 4px;
line-height: 1;
}
.result-q-win-badge.player-win {
background: var(--tiifa);
}
.result-q-win-badge.placeholder {
visibility: hidden;
}
.result-q-score {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
}
.result-q-pt {
font-size: 12px;
font-weight: 700;
color: var(--navy);
background: #e8f0fe;
padding: 2px 3px;
border-radius: 6px;
width: 52px;
text-align: center;
flex-shrink: 0;
}
.result-q-pt.zero {
background: #fee;
color: var(--red);
}
.result-q-time {
font-size: 11px;
color: var(--dark-gray);
background: #f0f0f0;
padding: 1px 4px;
border-radius: 4px;
min-width: 36px;
text-align: center;
}
.result-q-icon {
font-size: 18px;
min-width: 24px;
text-align: center;
line-height: 1;
}
.result-q-tiifa-avatar {
width: 28px;
height: auto;
object-fit: contain;
}
/* ===== バトル画面 ===== */
#battleScreen {
justify-content: flex-start;
overflow-y: auto;
align-items: center;
padding-top: 20px;
}
#battleScreen > * {
width: 100%;
max-width: 390px;
}
.battle-header {
margin-bottom: 12px;
}
.battle-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.score-display {
display: flex;
align-items: stretch;
gap: 8px;
flex: 1;
justify-content: flex-end;
}
.score-item {
min-width: 0;
flex: 1;
max-width: 120px;
padding: 10px 12px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(92, 193, 198, 0.18);
box-shadow: 0 8px 18px rgba(26, 58, 92, 0.06);
text-align: center;
}
.score-label {
font-size: 11px;
font-weight: 800;
color: var(--dark-gray);
line-height: 1.2;
margin-bottom: 3px;
}
.score-label img {
width: 18px;
height: auto;
object-fit: contain;
vertical-align: middle;
}
.score-value {
font-size: 30px;
font-weight: 800;
line-height: 1;
}
.score-value.player {
color: var(--tiifa-dark);
}
.score-value.ai {
color: var(--orange);
}
.tug-of-war-section {
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(92, 193, 198, 0.18);
border-radius: 18px;
box-shadow: 0 10px 22px rgba(26, 58, 92, 0.07);
padding: 12px 14px 14px;
}
.tug-labels {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 12px;
font-weight: 800;
color: var(--navy);
}
.tug-of-war-bar {
position: relative;
height: 18px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(92, 193, 198, 0.18), rgba(224, 120, 48, 0.18));
overflow: hidden;
border: 1px solid rgba(92, 193, 198, 0.18);
}
.tug-progress {
height: 100%;
background: linear-gradient(90deg, var(--tiifa), var(--tiifa-dark));
border-radius: 999px;
transition: width 0.35s ease;
}
.tug-marker {
position: absolute;
left: 50%;
top: -4px;
width: 4px;
height: 26px;
margin-left: -2px;
border-radius: 999px;
background: rgba(26, 58, 92, 0.55);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
pointer-events: none;
}
.lead-badge {
min-height: 18px;
margin-top: 8px;
font-size: 12px;
font-weight: 800;
color: var(--tiifa-dark);
text-align: center;
}
.battle-content {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 16px;
}
.avatar-section,
.question-section,
.choices-section {
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(92, 193, 198, 0.18);
border-radius: 18px;
box-shadow: 0 10px 22px rgba(26, 58, 92, 0.07);
padding: 12px 14px;
}
.avatar-section {
display: flex;
align-items: center;
gap: 12px;
}
.avatar {
width: 52px;
height: auto;
min-height: 52px;
border-radius: 18px;
background: var(--tiifa-light);
display: flex;
align-items: flex-end;
justify-content: center;
flex-shrink: 0;
overflow: visible;
}
.ai-speech {
flex: 1;
border: 2px solid var(--tiifa);
border-radius: 16px;
background: #fff;
padding: 10px 12px;
color: var(--navy);
font-size: 14px;
font-weight: 700;
line-height: 1.65;
}
.question-section {
padding-top: 14px;
padding-bottom: 14px;
}
.question-text {
font-size: 20px;
font-weight: 800;
color: var(--navy);
line-height: 1.65;
white-space: pre-wrap;
}
.choices-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.choice-btn,
.p1-choice-btn,
.p2-choice-btn {
width: 100%;
border: 2px solid #E2E8F0;
border-radius: 14px;
background: #fff;
padding: 13px 14px;
color: var(--navy);
font: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
text-align: left;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
user-select: text;
}
.choice-btn:hover,
.p1-choice-btn:hover,
.p2-choice-btn:hover {
transform: translateY(-1px);
border-color: var(--tiifa-dark);
background: rgba(92, 193, 198, 0.05);
}
.choice-btn.selected,
.p1-choice-btn.selected,
.p2-choice-btn.selected {
border-color: var(--tiifa-dark);
background: rgba(92, 193, 198, 0.1);
box-shadow: 0 8px 16px rgba(92, 193, 198, 0.12);
}
.choice-btn.correct,
.p1-choice-btn.correct,
.p2-choice-btn.correct {
border-color: var(--mint);
background: rgba(16, 185, 129, 0.08);
}
.choice-btn.wrong,
.p1-choice-btn.wrong,
.p2-choice-btn.wrong {
border-color: var(--red);
background: rgba(239, 68, 68, 0.06);
}
.choice-btn:disabled,
.p1-choice-btn:disabled,
.p2-choice-btn:disabled {
cursor: default;
opacity: 0.9;
transform: none;
}
.choice-btn + .choice-btn,
.p1-choice-btn + .p1-choice-btn,
.p2-choice-btn + .p2-choice-btn {
margin-top: 0;
}
.subject-button {
width: 100%;
padding: 14px 20px;
font-size: 16px;
font-weight: 700;
border: none;
border-radius: 14px;
color: var(--navy);
cursor: pointer;
transition: all 0.2s ease;
}
.subject-button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.subject-button:active { transform: translateY(0); }
.btn-seiji { background: var(--pastel-mint); color: var(--navy); border: 2px solid rgba(16, 185, 129, 0.25); }
.btn-rekishi { background: var(--pastel-yellow); color: var(--navy); border: 2px solid rgba(224, 120, 48, 0.25); }
.btn-kokusai { background: var(--pastel-blue); color: var(--navy); border: 2px solid rgba(59, 130, 246, 0.25); }
.home-mode-section {
width: 100%;
margin-top: 18px;
padding: 16px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(92, 193, 198, 0.18);
backdrop-filter: blur(10px);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.settings-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.back-btn {
width: 40px;
height: 40px;
border: none;
border-radius: 14px;
background: white;
color: var(--navy);
font-size: 18px;
font-weight: 800;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
flex-shrink: 0;
}
.settings-mode-icon {
width: 40px;
height: 40px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: var(--tiifa-light);
font-size: 20px;
flex-shrink: 0;
}
.settings-mode-title {
font-size: 20px;
font-weight: 800;
color: var(--navy);
line-height: 1.2;
}
.settings-hero {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.settings-hero-avatar {
width: 72px;
height: auto;
flex-shrink: 0;
}
.settings-hero-avatar img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.settings-hero-bubble {
flex: 1;
border: 2px solid var(--tiifa);
background: rgba(255, 255, 255, 0.92);
border-radius: 18px;
padding: 12px 14px;
box-shadow: 0 8px 18px rgba(92, 193, 198, 0.12);
position: relative;
}
.settings-hero-bubble::before {
content: '';
position: absolute;
left: -8px;
top: 14px;
width: 10px;
height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' width='10' height='16'%3E%3Cpath d='M 10 0 C 6 4 3 6 0 8 C 3 10 6 12 10 16 L 10 0 Z' fill='white'/%3E%3Cpath d='M 10 0 C 6 4 3 6 0 8 C 3 10 6 12 10 16' fill='none' stroke='%235CC1C6' stroke-width='2' stroke-linejoin='round' stroke-linecap='butt'/%3E%3C/svg%3E") no-repeat;
}
.settings-hero-label {
font-size: 13px;
font-weight: 800;
color: var(--tiifa-dark);
margin-bottom: 4px;
}
.settings-hero-text {
font-size: 14px;
line-height: 1.7;
color: var(--navy);
font-weight: 700;
}
.settings-card {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(92, 193, 198, 0.18);
border-radius: 22px;
box-shadow: 0 10px 24px rgba(26, 58, 92, 0.08);
padding: 16px;
margin-bottom: 14px;
}
.settings-section-title {
font-size: 15px;
font-weight: 800;
color: var(--navy);
margin-bottom: 12px;
}
.settings-card .button-group,
.settings-card .category-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.settings-card .option-btn,
.settings-card .category-btn {
border: none;
border-radius: 14px;
padding: 12px 14px;
font: inherit;
font-weight: 700;
width: 100%;
text-align: center;
cursor: pointer;
}
.settings-card .option-btn {
border: 2px solid var(--light-gray);
background: white;
border-radius: 14px;
padding: 12px 6px;
font-weight: 700;
color: var(--navy);
}
.settings-card .option-btn.active {
background: var(--pastel-teal);
color: var(--navy);
border-color: rgba(92, 193, 198, 0.4);
}
.settings-card .category-btn.active {
background: var(--pastel-teal);
color: var(--navy);
border-color: rgba(92, 193, 198, 0.4);
}
.settings-card .category-btn {
background: white;
color: var(--navy);
border: 1px solid var(--light-gray);
}
.settings-footer-action {
margin-top: 4px;
}
@keyframes pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(92, 193, 198, 0.6); transform: scale(1); }
50% { box-shadow: 0 0 0 16px rgba(92, 193, 198, 0); transform: scale(1.03); }
100% { box-shadow: 0 0 0 0 rgba(92, 193, 198, 0); transform: scale(1); }
}
.start-btn {
background: var(--pastel-teal);
color: var(--navy);
border: 2px solid #fff;
border-radius: 14px;
padding: 14px;
font-size: 16px;
font-weight: 800;
width: 100%;
animation: pulse-ring 1.8s ease-in-out infinite;
}
.start-btn.explain-mode {
background: var(--pastel-lavender); color: var(--navy); border: 2px solid #fff;
}
/* ===== 説明画面 ===== */
#explainScreen {
justify-content: flex-start;
overflow-y: auto;
align-items: center;
padding-top: 20px;
}
#explainScreen > * {
width: 100%;
max-width: 390px;
}
.explain-header {
margin-bottom: 12px;
}
.explain-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.explain-badge {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(92, 193, 198, 0.26);
color: var(--tiifa-dark);
font-size: 12px;
font-weight: 800;
}
.explain-progress {
font-size: 18px;
font-weight: 800;
color: var(--navy);
}
.explain-content {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 16px;
}
.explain-listener {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px;
border: 1px solid rgba(92, 193, 198, 0.2);
border-radius: 18px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 8px 18px rgba(26, 58, 92, 0.08);
}
.explain-listener-avatar {
width: 44px;
height: auto;
min-height: 44px;
border-radius: 14px;
background: var(--tiifa-light);
display: flex;
align-items: flex-end;
justify-content: center;
flex-shrink: 0;
overflow: visible;
}
.explain-listener-bubble {
flex: 1;
border: 2px solid var(--tiifa);
border-radius: 14px;
background: #fff;
padding: 10px 12px;
color: var(--navy);
font-size: 14px;
font-weight: 700;
line-height: 1.65;
}
.explain-listener-name {
font-size: 12px;
font-weight: 800;
color: var(--tiifa-dark);
margin-bottom: 2px;
}
.explain-label {
font-size: 13px;
font-weight: 800;
color: var(--tiifa-dark);
margin-bottom: 8px;
}
.explain-prompt {
font-size: 29px;
font-weight: 700;
color: var(--navy);
line-height: 1.65;
margin-bottom: 8px;
white-space: pre-wrap;
}
.explain-note {
font-size: 13px;
color: var(--dark-gray);
line-height: 1.6;
}
.explain-rubric {
font-size: 14px;
color: var(--navy);
line-height: 1.7;
}
.explain-rubric ul {
margin-left: 18px;
display: grid;
gap: 4px;
}
.explain-input {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
min-height: 132px;
resize: vertical;
border: 2px solid rgba(92, 193, 198, 0.32);
border-radius: 14px;
background: #fff;
padding: 12px;
color: var(--navy);
font-size: 15px;
line-height: 1.7;
outline: none;
-webkit-user-select: text;
user-select: text;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.explain-input:focus {
border-color: var(--tiifa-dark);
box-shadow: 0 0 0 4px rgba(92, 193, 198, 0.16);
}
.p3-tool-row {
display: flex;
align-items: center;
gap: 10px;
}
.p3-voice-btn {
border: 1px solid var(--light-gray);
border-radius: 12px;
background: #fff;
color: var(--navy);
font-size: 14px;
font-weight: 800;
padding: 9px 12px;
cursor: pointer;
white-space: nowrap;
}
.p3-voice-status {
font-size: 12px;
color: var(--dark-gray);
line-height: 1.45;
}
.explain-counter {
font-size: 12px;
font-weight: 700;
color: var(--dark-gray);
text-align: right;
}
.explain-submit {
width: 100%;
background: linear-gradient(135deg, #1D4ED8, #0F766E) !important;
color: #fff;
border: none;
border-radius: 14px;
padding: 12px 16px;
font-size: 16px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 10px 18px rgba(29, 78, 216, 0.2);
}
.explain-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
}
.explain-feedback {
display: none;
border-radius: 16px;
border: 1px solid rgba(92, 193, 198, 0.2);
background: rgba(232, 247, 248, 0.55);
padding: 12px;
color: var(--navy);
font-size: 14px;
line-height: 1.7;
}
.explain-feedback.show {
display: block;
animation: slideUp 0.2s ease;
}
.explain-feedback-title {
font-size: 13px;
font-weight: 800;
color: var(--tiifa-dark);
margin-bottom: 8px;
}
.explain-next-btn {
width: 100%;
margin-top: 10px;
}
.difficulty-hint {
font-size: 12px;
color: var(--dark-gray);
margin-top: 10px;
line-height: 1.5;
}
#settingsScreen {
align-items: center;
}
#settingsScreen > * {
width: 100%;
max-width: 390px;
}
#categorySelectionGroup {
margin-top: 0;
}
#categorySelectionGroup.hidden {
display: none;
}
#settingsScreen .settings-footer-action {
margin-bottom: 0;
}
#homeScreen {
padding: 0 !important;
}
#homeScreen .home-mode-title,
#homeScreen .logo,
#homeScreen .title,
#homeScreen .explain-button,
#homeScreen .subject-button,
#homeScreen .home-mode-section {
-webkit-user-select: text;
user-select: text;
}
.home-mode-title {
font-size: 13px;
font-weight: 800;
color: var(--tiifa-dark);
letter-spacing: 1.2px;
margin-bottom: 10px;
text-transform: uppercase;
}
.explain-button {
background: var(--pastel-lavender); color: var(--navy); border: 2px solid rgba(139, 92, 246, 0.25);
}
.explain-button:hover {
box-shadow: 0 6px 16px rgba(29, 78, 216, 0.22);
}
.sub-mode-btn {
flex: 1;
min-width: 72px;
padding: 12px 14px;
font-size: 14px;
font-weight: 700;
border: 2px solid var(--light-gray);
background: white;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
color: var(--dark-gray);
}
.sub-mode-btn:hover {
border-color: var(--tiifa);
background: var(--tiifa-light);
}
.sub-mode-btn.active {
background: var(--pastel-teal);
color: var(--navy);
border-color: var(--tiifa);
box-shadow: 0 4px 12px rgba(92, 193, 198, 0.3);
}
/* ===== P2 ステップアップ論述 ===== */
.p2-step-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-bottom: 14px;
}
.p2-step-dot {
width: 30px; height: 30px;
border-radius: 50%;
background: #E2E8F0;
color: #94A3B8;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s;
}
.p2-step-dot.active {
background: var(--orange);
color: #fff;
box-shadow: 0 3px 8px rgba(224,120,48,0.35);
transform: scale(1.15);
}
.p2-step-dot.done {
background: var(--mint);
color: #fff;
}
.p2-step-connector {
width: 24px; height: 2px;
background: #E2E8F0;
border-radius: 2px;
}
.p2-step-connector.done { background: var(--mint); }
.p2-step-label {
font-size: 12px;
font-weight: 700;
color: var(--orange);
background: rgba(224,120,48,0.08);
border-left: 3px solid var(--orange);
padding: 6px 10px;
border-radius: 0 8px 8px 0;
margin-bottom: 10px;
}
.p2-choices-container {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 10px;
}
.p2-choice-btn {
width: 100%;
padding: 11px 14px;
border-radius: 12px;
border: 2px solid #E2E8F0;
background: #fff;
font-size: 13px;
font-weight: 600;
color: var(--navy);
cursor: pointer;
text-align: left;
line-height: 1.45;
transition: border-color 0.15s, background 0.15s;
font-family: var(--font);
}
.p2-choice-btn:hover { border-color: var(--orange); background: rgba(224,120,48,0.05); }
.p2-step-info {
display: flex;
justify-content: flex-end;
margin-bottom: 6px;
}
.selected-count {
font-size: 11px;
font-weight: 700;
color: var(--orange);
background: rgba(224,120,48,0.1);
padding: 3px 10px;
border-radius: 20px;
}
.p2-choice-label {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 12px;
border: 2px solid #E2E8F0;
border-radius: 12px;
cursor: pointer;
font-size: 13px;
line-height: 1.45;
transition: all 0.15s;
background: #fff;
font-family: var(--font);
color: var(--navy);
}
.p2-choice-label.selected {
border-color: var(--orange);
background: rgba(224,120,48,0.06);
}
.p2-choice-label input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: var(--orange);
flex-shrink: 0;
margin-top: 2px;
}
.step2-confirm-btn {
width: 100%;
padding: 12px;
border-radius: 12px;
border: none;
background: var(--pastel-yellow); border: 2px solid rgba(224, 120, 48, 0.3);
color: var(--navy);
font-size: 14px;
font-weight: 800;
cursor: pointer;
margin-top: 8px;
font-family: var(--font);
box-shadow: 0 6px 14px rgba(224,120,48,0.3);
transition: opacity 0.15s;
}
.step2-confirm-btn:disabled {
background: #CBD5E1;
color: #94A3B8;
cursor: not-allowed;
box-shadow: none;
}
.p2-synthesized-box {
background: linear-gradient(135deg, rgba(224,120,48,0.07), rgba(92,193,198,0.07));
border: 2px solid var(--orange);
border-radius: 12px;
padding: 14px;
margin-bottom: 12px;
}
.synthesis-title {
font-size: 10px;
font-weight: 700;
color: var(--orange);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.synthesis-text {
font-size: 14px;
font-weight: 700;
color: var(--navy);
line-height: 1.65;
}
.p2-question-text {
font-size: 14px;
font-weight: 700;
color: var(--navy);
text-align: center;
margin: 10px 0 12px;
}
.p2-step3-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.step3-btn {
padding: 14px;
border-radius: 12px;
border: 2px solid;
font-size: 16px;
font-weight: 800;
cursor: pointer;
transition: all 0.15s;
font-family: var(--font);
}
.yes-btn { background: #fff; border-color: var(--mint); color: var(--mint); }
.yes-btn:hover { background: var(--mint); color: #fff; }
.no-btn { background: #fff; border-color: var(--red); color: var(--red); }
.no-btn:hover { background: var(--red); color: #fff; }
.p2-evaluation-spinner {
text-align: center;
padding: 20px;
color: var(--dark-gray);
font-size: 12px;
font-weight: 700;
}
.p2-spinner-ring {
width: 34px; height: 34px;
border: 3px solid #E2E8F0;
border-top-color: var(--orange);
border-radius: 50%;
animation: p2spin 0.75s linear infinite;
margin: 0 auto 8px;
}
@keyframes p2spin { to { transform: rotate(360deg); } }
.p1-perspective-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: var(--tiifa-dark);
background: var(--tiifa-light);
border: 1px solid var(--tiifa);
border-radius: 20px;
padding: 3px 10px;
margin-bottom: 8px;
}
/* ===== カウントダウン画面 ===== */
#countdownScreen {
justify-content: center;
align-items: center;
background: linear-gradient(135deg, var(--tiifa) 0%, var(--tiifa-dark) 100%);
}
.countdown-display {
font-size: 120px;
font-weight: 800;
color: white;
animation: countdownPop 0.8s ease-out;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
@keyframes countdownPop {
0% { transform: scale(0.5); opacity: 0; }
50% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}
/* ===== タイマーバー ===== */
.timer-bar {
width: 100%;
height: 6px;
background: #E2E8F0;
border-radius: 3px;
overflow: hidden;
margin-bottom: 10px;
}
.timer-fill {
height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--tiifa), var(--mint));
border-radius: 3px;
transition: width 1s linear, background 0.5s;
}
.timer-fill.warning {
background: linear-gradient(90deg, var(--orange), var(--red));
}
/* ===== 思考力バトル CSS ===== */
.thinking-type-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.thinking-type-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
border: 2px solid var(--light-gray);
border-radius: 14px;
background: #fff;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
}
.thinking-type-btn.active {
border-color: #C08040;
background: #FDF0E2;
}
.thinking-type-btn[data-type="random"] {
grid-column: 1 / -1;
}
.thinking-type-icon { font-size: 18px; }
.thinking-type-label { font-size: 12px; font-weight: 700; color: var(--navy); }
.thinking-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
}
.thinking-progress {
background: var(--pastel-teal);
color: var(--navy);
font-size: 15px;
font-weight: 800;
padding: 3px 10px;
border-radius: 10px;
min-width: 38px;
text-align: center;
line-height: 1.4;
}
.thinking-type-badge {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
background: #FDF0E2;
color: #B07030;
}
.thinking-question-area {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.thinking-feedback {
background: rgba(255,255,255,0.95);
border: 1px solid rgba(92,193,198,0.18);
border-radius: 18px;
padding: 20px;
margin-top: 16px;
text-align: center;
}
.thinking-feedback-icon { font-size: 40px; margin-bottom: 8px; }
.thinking-feedback-text { font-size: 14px; color: var(--navy); margin-bottom: 16px; line-height: 1.6; }
/* Timeline sorting */
.timeline-item {
background: #fff;
border: 2px solid var(--light-gray);
border-radius: 14px;
padding: 14px 16px;
cursor: grab;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 12px;
user-select: none;
}
.timeline-item:active { cursor: grabbing; }
.timeline-item.dragging { opacity: 0.5; border-color: #C08040; }
.timeline-item .drag-handle { font-size: 16px; color: #ccc; }
.timeline-item .tl-text { font-size: 14px; font-weight: 600; flex: 1; }
.timeline-item.correct { border-color: #22C55E; background: #F0FDF4; }
.timeline-item.wrong { border-color: #EF4444; background: #FEF2F2; }
/* Timeline arrow separator */
.tl-arrow-sep {
display: flex;
justify-content: center;
align-items: center;
padding: 4px 0;
opacity: 0.45;
}
.tl-arrow-sep svg {
width: 22px;
height: 22px;
}
/* Cause-effect matching */
.ce-columns { display: flex; gap: 12px; }
.ce-columns > div { display: flex; flex-direction: column; flex: 1; gap: 14px; }
.ce-item {
background: #fff;
border: 2px solid var(--light-gray);
border-radius: 12px;
padding: 12px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.ce-item.selected { border-color: #C08040; background: #FDF0E2; }
.ce-item.matched { border-color: #22C55E; background: #F0FDF4; opacity: 0.7; pointer-events: none; }
.ce-item.wrong-flash { border-color: #EF4444; background: #FEF2F2; animation: shake 0.4s ease; }
.ce-column-header {
font-size: 12px;
font-weight: 800;
text-align: center;
padding: 4px 10px;
border-radius: 999px;
display: inline-block;
align-self: center;
}
.ce-column-header.cause { background: var(--tiifa-light); color: var(--tiifa-dark); }
.ce-column-header.effect { background: #FDF0E2; color: #B07030; }
/* True/False */
.tf-statement {
background: #fff;
border: 1px solid rgba(92,193,198,0.18);
border-radius: 18px;
padding: 20px;
font-size: 15px;
font-weight: 600;
line-height: 1.7;
text-align: center;
}
.tf-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.tf-btn {
flex: 1;
padding: 16px;
border-radius: 14px;
border: 2px solid var(--light-gray);
background: #fff;
font-size: 18px;
font-weight: 800;
cursor: pointer;
transition: all 0.2s ease;
}
.tf-btn:active { transform: scale(0.95); }
.tf-btn.selected-correct { border-color: #22C55E; background: #F0FDF4; }
.tf-btn.selected-wrong { border-color: #EF4444; background: #FEF2F2; }
.tf-correction { margin-top: 12px; }
.tf-correction-options { display: grid; gap: 8px; margin-top: 8px; }
.tf-correction-opt {
padding: 12px 16px;
border: 2px solid var(--light-gray);
border-radius: 12px;
background: #fff;
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: all 0.2s ease;
}
.tf-correction-opt.selected { border-color: #C08040; background: #FDF0E2; }
/* Data reading */
.data-table-wrap {
overflow-x: auto;
border-radius: 14px;
border: 1px solid rgba(92,193,198,0.18);
background: #fff;
padding: 14px;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { background: var(--tiifa-light); padding: 8px; font-weight: 700; border: 1px solid #e5e7eb; }
.data-table td { padding: 8px; text-align: center; border: 1px solid #e5e7eb; }
.data-question { font-size: 14px; font-weight: 700; margin: 12px 0; line-height: 1.6; }
/* Grouping */
.group-pool {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 14px;
background: #fff;
border-radius: 14px;
border: 1px solid rgba(92,193,198,0.18);
min-height: 60px;
}
.group-chip {
padding: 8px 14px;
border-radius: 999px;
border: 2px solid var(--light-gray);
background: #fff;
font-size: 12px;
font-weight: 700;
cursor: grab;
transition: all 0.2s ease;
user-select: none;
}
.group-chip:active { cursor: grabbing; }
.group-chip.placed { opacity: 0.4; pointer-events: none; }
.group-chip.dragging { opacity: 0.6; transform: scale(0.95); }
.group-bucket {
border: 2px dashed rgba(92,193,198,0.3);
border-radius: 14px;
padding: 12px;
min-height: 80px;
transition: all 0.2s ease;
}
.group-bucket.drag-over {
border-color: var(--tiifa);
border-style: solid;
background: rgba(92,193,198,0.06);
}
.group-bucket-title { font-size: 12px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.bucket-count { font-weight: 600; color: var(--dark-gray); opacity: 0.6; }
.group-bucket-items { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.group-placed-chip {
padding: 6px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
background: var(--tiifa-light);
color: var(--tiifa-dark);
border: 1.5px solid rgba(92,193,198,0.3);
cursor: grab;
transition: all 0.2s;
}
.group-placed-chip:active { cursor: grabbing; transform: scale(0.92); }
/* Drag ghost element for touch */
.drag-ghost {
position: fixed;
padding: 8px 14px;
border-radius: 999px;
background: #fff;
border: 2px solid var(--light-gray);
font-size: 12px;
font-weight: 700;
pointer-events: none;
z-index: 10000;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
opacity: 0.9;
}
/* Fill blank */
.fb-sentence {
font-size: 15px;
font-weight: 600;
line-height: 2;
padding: 20px;
background: #fff;
border-radius: 18px;
border: 1px solid rgba(92,193,198,0.18);
}
.fb-blank {
display: inline-block;
min-width: 80px;
border-bottom: 3px solid #C08040;
text-align: center;
padding: 2px 8px;
margin: 0 4px;
color: #C08040;
font-weight: 800;
}
.fb-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fb-opt {
padding: 10px 16px;
border: 2px solid var(--light-gray);
border-radius: 12px;
background: #fff;
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: all 0.2s ease;
}
.fb-opt.selected { border-color: #C08040; background: #FDF0E2; }
.fb-opt.used { opacity: 0.4; pointer-events: none; }
.fb-blank-active {
animation: blankPulse 1.2s ease-in-out infinite;
border-color: var(--tiifa) !important;
}
@keyframes blankPulse {
0%, 100% { background: #fff; }
50% { background: var(--tiifa-light); }
}
.fb-blank-filled {
cursor: pointer;
color: var(--navy);
border-color: var(--tiifa);
background: var(--tiifa-light);
}
.fb-blank-filled:active {
transform: scale(0.95);
}
.dojo-start {
background: var(--pastel-teal) !important;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
/* ===== 回答ボタンエリア ===== */
.thinking-action-area {
padding-top: 16px;
}
/* ===== スコア比較表示 ===== */
.score-comparison {
display: flex;
justify-content: center;
gap: 32px;
margin-top: 16px;
}
.score-comparison-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 90px;
}
.score-comparison-label {
font-size: 13px;
font-weight: 700;
color: var(--dark-gray);
display: flex;
align-items: center;
gap: 4px;
}
.score-comparison-value {
font-size: 36px;
font-weight: 800;
line-height: 1;
}
.score-comparison-value.player {
color: var(--tiifa-dark);
}
/* ===== スコアカード ===== */
.score-card {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(92, 193, 198, 0.18);
border-radius: 22px;
box-shadow: 0 10px 24px rgba(26, 58, 92, 0.08);
padding: 6px 0;
margin-top: 20px;
overflow: hidden;
}
.card-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 20px;
border-bottom: 1px solid rgba(92, 193, 198, 0.10);
}
.card-row:last-child {
border-bottom: none;
}
.card-label {
font-size: 14px;
font-weight: 700;
color: var(--dark-gray);
}
.card-value {
font-size: 16px;
font-weight: 800;
color: var(--navy);
}
/* ===== 結果画面アクションボタン ===== */
.result-actions {
display: flex;
gap: 12px;
padding-top: 16px;
}
/* ===== 資料読み取り — 選択肢ボタン（仕様書3: 欠落CSS修正） ===== */
.quiz-options {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 14px;
}
.quiz-opt {
width: 100%;
padding: 14px 18px;
font-size: 14px;
font-weight: 700;
font-family: var(--font);
color: var(--navy);
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(92, 193, 198, 0.18);
border-radius: 14px;
box-shadow: 0 4px 12px rgba(26, 58, 92, 0.06);
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
line-height: 1.5;
}
.quiz-opt:active {
transform: scale(0.97);
}
.quiz-opt.selected {
border-color: var(--tiifa);
background: var(--tiifa-light);
box-shadow: 0 4px 16px rgba(92, 193, 198, 0.18);
}
/* ===== 思考力バトル 振り返りセクション（仕様書2） ===== */
.review-section {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(92, 193, 198, 0.18);
border-radius: 22px;
box-shadow: 0 10px 24px rgba(26, 58, 92, 0.08);
padding: 18px;
margin-top: 20px;
}
.review-title {
font-size: 15px;
font-weight: 800;
color: var(--navy);
margin-bottom: 14px;
}
.review-item {
background: #fff;
border-radius: 14px;
padding: 14px;
margin-bottom: 10px;
border-left: 4px solid var(--pastel-mint);
box-shadow: 0 2px 8px rgba(26,58,92,0.06);
}
.review-item:last-child {
margin-bottom: 0;
}
.review-item.correct {
border-left-color: var(--pastel-mint);
}
.review-item.wrong {
border-left-color: var(--pastel-pink);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
font-weight: 700;
color: var(--navy);
margin-bottom: 6px;
}
.review-type-badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
background: var(--tiifa-light);
color: var(--tiifa-dark);
font-weight: 700;
}
.review-question {
font-size: 13px;
color: var(--dark-gray);
line-height: 1.6;
margin-bottom: 6px;
}
.review-detail {
font-size: 12px;
color: var(--dark-gray);
line-height: 1.5;
}
.review-detail .your-answer {
color: var(--red);
}
.review-detail .correct-answer {
color: var(--mint);
font-weight: 700;
}
/* ===== 振り返り 構造化表示 ===== */
.review-detail-structured {
font-size: 12px;
color: var(--dark-gray);
line-height: 1.5;
margin-top: 4px;
}
.review-detail-label {
font-size: 11px;
font-weight: 700;
color: var(--dark-gray);
margin-top: 6px;
margin-bottom: 2px;
}
.review-detail-label.correct-label {
color: var(--tiifa-dark);
}
.review-ordered-list {
list-style: none;
counter-reset: step;
padding: 0;
margin: 4px 0 8px;
}
.review-ordered-list li {
counter-increment: step;
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
margin-bottom: 3px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
background: rgba(239, 68, 68, 0.06);
}
.review-ordered-list li::before {
content: counter(step);
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--light-gray);
font-size: 11px;
font-weight: 800;
color: var(--dark-gray);
flex-shrink: 0;
}
.review-ordered-list li.order-correct {
background: rgba(16, 185, 129, 0.08);
}
.review-ordered-list li.order-wrong {
background: rgba(239, 68, 68, 0.08);
}
.review-ordered-list.correct-list li {
background: rgba(92, 193, 198, 0.08);
}
.review-ordered-list.correct-list li::before {
background: var(--tiifa-light);
color: var(--tiifa-dark);
}
.review-year {
margin-left: auto;
font-size: 11px;
font-weight: 700;
color: var(--tiifa-dark);
opacity: 0.8;
}
/* 因果関係ペア */
.review-pair-list {
margin: 4px 0 8px;
}
.review-pair-item {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
margin-bottom: 3px;
border-radius: 8px;
background: rgba(92, 193, 198, 0.08);
font-size: 12px;
}
.pair-cause {
font-weight: 700;
color: var(--navy);
}
.pair-arrow {
color: var(--tiifa-dark);
font-weight: 800;
flex-shrink: 0;
}
.pair-effect {
color: var(--dark-gray);
}
/* グループ分類 */
.review-group-item {
display: flex;
align-items: baseline;
gap: 8px;
padding: 5px 10px;
margin-bottom: 3px;
border-radius: 8px;
background: rgba(92, 193, 198, 0.08);
font-size: 12px;
}
.group-name {
font-weight: 800;
color: var(--tiifa-dark);
flex-shrink: 0;
white-space: nowrap;
}
.group-name::after {
content: ':';
}
.group-items {
color: var(--dark-gray);
line-height: 1.6;
}
/* 穴埋め */
.review-blank-item {
padding: 4px 0;
font-size: 12px;
}
.blank-label {
font-weight: 700;
color: var(--dark-gray);
}
/* =============================================
新思考力タイプ共通スタイル (2026-04-13)
============================================= */
/* Reading badge (文脈判断) */
.tk-reading-badge {
display: inline-block;
background: var(--tiifa-light);
color: var(--tiifa-dark);
font-size: 16px;
font-weight: 800;
padding: 6px 20px;
border-radius: 999px;
margin-bottom: 12px;
letter-spacing: 2px;
border: 2px solid rgba(92,193,198,0.3);
}
/* Sentence display */
.tk-sentence {
background: #fff;
border-radius: 16px;
padding: 16px 18px;
font-size: 15px;
line-height: 1.8;
color: var(--navy);
margin-bottom: 16px;
border: 1px solid rgba(26,58,92,0.08);
box-shadow: 0 2px 8px rgba(26,58,92,0.04);
}
/* Blank placeholder */
.tk-blank {
display: inline-block;
background: linear-gradient(135deg, #FFF3D6, #FDEBD6);
color: var(--orange);
font-weight: 800;
padding: 2px 14px;
border-radius: 8px;
border: 2px dashed var(--orange);
margin: 0 2px;
font-size: 16px;
}
/* Blank placeholder with ruby reading above (Bug #27 fix) */
.tk-blank ruby {
ruby-align: center;
}
.tk-blank ruby rt {
font-size: 10px;
font-weight: 700;
color: var(--orange);
opacity: 0.9;
letter-spacing: 0.05em;
}
/* Options (shared) */
.tk-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.tk-opt-btn {
display: block;
width: 100%;
padding: 14px 18px;
font-size: 15px;
font-weight: 700;
color: var(--navy);
background: #fff;
border: 2px solid rgba(26,58,92,0.12);
border-radius: 14px;
cursor: pointer;
transition: all 0.2s;
text-align: left;
box-shadow: 0 2px 6px rgba(26,58,92,0.04);
}
.tk-opt-btn:active { transform: scale(0.97); }
.tk-opt-btn.selected {
border-color: var(--tiifa);
background: var(--tiifa-light);
}
.tk-opt-btn.correct {
border-color: #22C55E;
background: rgba(34,197,94,0.1);
color: #166534;
}
.tk-opt-btn.correct::before {
content: '◎ ';
color: #22C55E;
}
.tk-opt-btn.wrong {
border-color: #EF4444;
background: rgba(239,68,68,0.06);
color: #991B1B;
text-decoration: line-through;
opacity: 0.7;
}
/* Instruction / hint */
.tk-instruction {
font-size: 14px;
font-weight: 700;
color: var(--navy);
margin-bottom: 12px;
line-height: 1.6;
}
.tk-hint {
font-size: 12px;
color: var(--tiifa-dark);
background: var(--tiifa-light);
border-radius: 10px;
padding: 8px 14px;
margin-bottom: 12px;
border-left: 3px solid var(--tiifa);
}
.tk-question-sub {
font-size: 13px;
font-weight: 700;
color: var(--dark-gray);
margin-bottom: 12px;
}
/* Group display (仲間分け) */
.tk-group-display {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 16px;
}
.tk-group-kanji {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
font-size: 24px;
font-weight: 800;
color: var(--navy);
background: #fff;
border: 2px solid var(--tiifa);
border-radius: 14px;
box-shadow: 0 3px 10px rgba(92,193,198,0.15);
}
/* Error correction */
.tk-error-kanji {
display: inline-block;
background: rgba(239,68,68,0.12);
color: #EF4444;
font-weight: 800;
padding: 1px 6px;
border-radius: 6px;
border: 2px solid rgba(239,68,68,0.3);
text-decoration: underline wavy #EF4444;
}
.tk-error-arrow {
text-align: center;
font-size: 14px;
font-weight: 700;
color: var(--dark-gray);
margin-bottom: 14px;
}
.tk-wrong {
color: #EF4444;
font-weight: 800;
}
/* Scene matching */
.tk-scene {
background: linear-gradient(135deg, #fff, #F8FFFE);
border-radius: 16px;
padding: 16px 18px;
margin-bottom: 16px;
border: 1px solid rgba(92,193,198,0.2);
box-shadow: 0 2px 8px rgba(92,193,198,0.06);
}
.tk-scene-label {
font-size: 11px;
font-weight: 800;
color: var(--tiifa-dark);
background: var(--tiifa-light);
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
margin-bottom: 8px;
}
.tk-scene-text {
font-size: 14px;
line-height: 1.8;
color: var(--navy);
}
/* Odd one out */
.tk-odd-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
.tk-odd-btn {
padding: 16px 12px;
font-size: 14px;
font-weight: 700;
color: var(--navy);
background: #fff;
border: 2px solid rgba(26,58,92,0.12);
border-radius: 14px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
line-height: 1.5;
box-shadow: 0 2px 6px rgba(26,58,92,0.04);
}
.tk-odd-btn:active { transform: scale(0.97); }
.tk-odd-btn.selected {
border-color: var(--tiifa);
background: var(--tiifa-light);
}
.tk-odd-btn.odd-correct {
border-color: #EF4444;
background: rgba(239,68,68,0.08);
color: #991B1B;
}
.tk-odd-btn.odd-correct::after {
content: ' ← 仲間はずれ';
font-size: 10px;
display: block;
color: #EF4444;
margin-top: 4px;
}
.tk-odd-btn.odd-group {
border-color: #22C55E;
background: rgba(34,197,94,0.06);
}
.tk-odd-btn.wrong {
border-color: #EF4444;
background: rgba(239,68,68,0.06);
}
/* Review items */
.review-item {
background: #fff;
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 8px;
border: 1px solid rgba(26,58,92,0.06);
}
.review-q-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.review-q-num {
font-size: 12px;
font-weight: 800;
color: var(--navy);
}
.review-type-tag {
font-size: 10px;
color: var(--tiifa-dark);
background: var(--tiifa-light);
padding: 2px 8px;
border-radius: 999px;
}
.review-q-text {
font-size: 12px;
line-height: 1.6;
color: var(--dark-gray);
}
/* Sentence transform - original sentence box */
.tk-original-sentence {
background: linear-gradient(135deg, #FFF8F0, #FFFAF5);
border-radius: 16px;
padding: 16px 18px;
margin-bottom: 16px;
border: 1px solid rgba(224,120,48,0.2);
box-shadow: 0 2px 8px rgba(224,120,48,0.06);
}
.tk-original-label {
font-size: 11px;
font-weight: 800;
color: #C05621;
background: rgba(224,120,48,0.12);
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
margin-bottom: 8px;
}
.tk-original-text {
font-size: 15px;
font-weight: 700;
line-height: 1.8;
color: var(--navy);
}
/* Passage block for reading comprehension */
.tk-passage {
background: linear-gradient(135deg, #fff, #F8F9FF);
border-radius: 16px;
padding: 16px 18px;
margin-bottom: 16px;
border: 1px solid rgba(26,58,92,0.1);
box-shadow: 0 2px 8px rgba(26,58,92,0.04);
font-size: 14px;
line-height: 1.9;
color: var(--navy);
}