/* =============================================
TiiFa BASE 社会 — バトル共通CSS
battle-common.css
バトルHTML（01〜04）で共有するスタイル。
各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;
}
.subcategory-group {
border: 1px solid var(--light-gray);
border-radius: 14px;
overflow: hidden;
background: #fff;
}
.subcategory-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
cursor: pointer;
font-weight: 700;
color: var(--navy);
background: #fff;
transition: background 0.2s;
user-select: none;
}
.subcategory-header:active {
background: var(--tiifa-light);
}
.subcategory-header .check-icon {
width: 22px;
height: 22px;
border: 2px solid var(--light-gray);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
transition: all 0.2s;
}
.subcategory-header .check-icon.checked {
background: var(--tiifa);
border-color: var(--tiifa);
color: #fff;
}
.subcategory-header .check-icon.indeterminate {
background: var(--tiifa-light);
border-color: var(--tiifa);
color: var(--tiifa);
}
.subcategory-header .arrow {
margin-left: auto;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--tiifa-light);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s, background 0.2s;
color: var(--tiifa);
flex-shrink: 0;
}
.subcategory-header .arrow:active {
background: var(--tiifa);
color: #fff;
}
.subcategory-header .arrow.open {
transform: rotate(90deg);
}
.subsubcategory-list {
display: none;
padding: 0 14px 10px 46px;
flex-direction: column;
gap: 6px;
}
.subsubcategory-list.open {
display: flex;
}
.subsub-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 10px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--navy);
background: var(--light-gray);
transition: all 0.2s;
user-select: none;
}
.subsub-item:active {
transform: scale(0.97);
}
.subsub-item .subsub-check {
width: 18px;
height: 18px;
border: 2px solid #ccc;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
transition: all 0.2s;
}
.subsub-item .subsub-check.checked {
background: var(--tiifa);
border-color: var(--tiifa);
color: #fff;
}
.subsub-item.selected {
background: var(--tiifa-light);
border: 1px solid var(--tiifa);
}
/* === Question Count Selection === */
.question-count-group {
display: flex;
gap: 10px;
}
.question-count-group .option-btn {
flex: 1;
}
/* ===== 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;
}
/* ===== TiiFa 吹き出し（アバター外出し） ===== */
.result-ai-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 12px 0;
justify-content: center;
}
.tiifa-speak-avatar {
width: 72px !important;
height: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
min-height: 72px !important;
max-height: 72px !important;
border-radius: 50%;
object-fit: contain;
flex-shrink: 0;
background: none;
border: none;
}
.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% - 90px);
}
.result-ai-bubble::before {
content: '';
position: absolute;
top: 12px;
left: -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;
}
.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-title {
font-size: 22px;
font-weight: 800;
color: var(--navy);
margin-bottom: 6px;
}
.result-stamp {
font-size: 80px;
margin: 12px 0;
animation: stampSlam 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ===== スコア比較 ===== */
.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-comparison-value.ai {
color: var(--orange);
}
/* ===== スコアカード ===== */
.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);
}
/* ===== 振り返りセクション ===== */
.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;
}
@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-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.wrong {
border-left-color: var(--pastel-pink);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 13px;
font-weight: 800;
color: var(--navy);
}
.review-question {
font-size: 14px;
font-weight: 700;
color: var(--navy);
line-height: 1.6;
margin-bottom: 10px;
}
.review-answer-row {
display: flex;
flex-direction: column;
gap: 6px;
}
.review-answer-item {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 13px;
line-height: 1.5;
}
.review-answer-label {
flex-shrink: 0;
font-size: 11px;
font-weight: 800;
padding: 2px 8px;
border-radius: 6px;
min-width: 52px;
text-align: center;
}
.review-answer-label.yours {
background: var(--pastel-ice);
color: var(--navy);
}
.review-answer-label.correct {
background: var(--pastel-mint);
color: #15803d;
}
.review-answer-text {
color: var(--navy);
font-weight: 500;
}
.review-answer-text.wrong-text {
color: var(--red);
text-decoration: line-through;
text-decoration-color: rgba(239,68,68,0.35);
}
.review-answer-text.correct-text {
color: #15803d;
font-weight: 700;
}
.review-explanation {
font-size: 12px;
color: var(--tiifa-dark);
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--light-gray);
line-height: 1.6;
}
.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: 44px;
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: 44px;
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;
}
.q-badge {
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;
}
.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;
position: relative;
}
.ai-speech::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;
}
.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 {
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 {
transform: translateY(-1px);
border-color: var(--tiifa-dark);
background: rgba(92, 193, 198, 0.05);
}
.choice-btn.selected,
.p1-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 {
border-color: var(--mint);
background: rgba(16, 185, 129, 0.08);
}
.choice-btn.wrong,
.p1-choice-btn.wrong {
border-color: var(--red);
background: rgba(239, 68, 68, 0.06);
}
.choice-btn:disabled,
.p1-choice-btn:disabled {
cursor: default;
opacity: 0.9;
transform: none;
}
.choice-btn + .choice-btn,
.p1-choice-btn + .p1-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 rgba(139, 92, 246, 0.25);
}
.start-warning {
text-align: center;
font-size: 13px;
font-weight: 700;
color: var(--red);
background: var(--pastel-pink);
border-radius: 10px;
padding: 8px 14px;
margin-bottom: 10px;
display: none;
animation: shake 0.4s ease;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
/* ===== 説明画面 ===== */
#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);
}
.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);
}
.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%);
min-height: 100vh;
padding: 0 !important;
}
.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 {
font-size: 14px;
font-weight: 800;
color: var(--navy);
}
.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;
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; }
/* Cause-effect matching */
.ce-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.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;
}
.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-label { font-size: 11px; font-weight: 700; margin-bottom: 6px; padding: 2px 8px; border-radius: 999px; display: inline-block; }
.ce-label.cause { background: var(--tiifa-light); color: var(--tiifa-dark); }
.ce-label.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: pointer;
transition: all 0.2s ease;
user-select: none;
}
.group-chip.placed { opacity: 0.4; pointer-events: none; }
.group-chip.selected { border-color: #C08040; background: #FDF0E2; }
.group-bucket {
border: 2px dashed rgba(92,193,198,0.3);
border-radius: 14px;
padding: 12px;
min-height: 80px;
}
.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: pointer;
transition: all 0.2s;
}
.group-placed-chip:active { transform: scale(0.92); }
/* 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; }
.dojo-start {
background: linear-gradient(135deg, #D4964A, #C08040) !important;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}