*{
box-sizing:border-box;
}

body{
margin:0;
padding:20px;
background:#f3f4f6;
font-family:
"Hiragino Sans",
"Yu Gothic",
sans-serif;
line-height:1.8;
color:#222;
}

.container{
max-width:900px;
margin:auto;
}

.title{
text-align:center;
font-size:2.2rem;
margin-bottom:30px;
padding:20px;
background:#111827;
color:white;
border-radius:12px;
}

.card{
background:white;
padding:20px;
margin-bottom:20px;
border-radius:12px;
box-shadow:
0 2px 8px rgba(0,0,0,.08);
}

h2{
margin-top:0;
border-left:6px solid #1e3a8a;
padding-left:10px;
font-size:1.3rem;
}

h3{
margin-top:25px;
}

ul{
padding-left:20px;
}

li{
margin-bottom:8px;
}

button{
background:#1e3a8a;
color:white;
border:none;
padding:12px 24px;
font-size:1rem;
border-radius:8px;
cursor:pointer;
transition:.2s;
}

button:hover{
background:#2563eb;
}

.law-card{
display:flex;
gap:15px;
align-items:flex-start;
padding:15px;
margin-bottom:12px;
background:white;
border-radius:10px;
border:2px solid #ddd;
cursor:pointer;
transition:.2s;
}

.law-card:hover{
border-color:#2563eb;
transform:translateY(-2px);
}

.law-card input{
margin-top:5px;
transform:scale(1.3);
}

.desc{
color:#666;
font-size:.9rem;
margin-top:4px;
}

.judgment{
background:#fff8dc;
border:3px solid #d4af37;
padding:25px;
border-radius:12px;
margin:20px 0;
}

.sentence{
font-size:1.5rem;
font-weight:bold;
text-align:center;
color:#7f1d1d;
}

.income{
font-size:2rem;
font-weight:bold;
color:#15803d;
text-align:center;
margin:20px 0;
}

.notice{
background:#eff6ff;
border-left:5px solid #2563eb;
padding:15px;
margin:15px 0;
}

.hint{
background:#fefce8;
border-left:5px solid #ca8a04;
padding:15px;
margin:15px 0;
}

.prosecutor{
background:#fee2e2;
padding:15px;
border-radius:10px;
font-size:1.2rem;
font-weight:bold;
text-align:center;
}

.reason-box{
background:#fafafa;
padding:20px;
border-radius:10px;
border:1px solid #ddd;
}

ul li::marker{
color:#1e3a8a;
}

@media(max-width:700px){

body{
padding:10px;
}

.title{
font-size:1.7rem;
}

.card{
padding:15px;
}

.law-card{
padding:12px;
}

.sentence{
font-size:1.2rem;
}

}

.trophy-box{

text-align:center;

background:
linear-gradient(
135deg,
#fff7c2,
#ffe07a
);

padding:30px;

border-radius:20px;

margin:30px 0;

border:4px solid gold;

box-shadow:
0 0 30px rgba(255,215,0,.4);

}

.trophy{

font-size:70px;

margin-bottom:10px;

}

.income-title{

font-size:20px;

color:#555;

}

.income-value{

font-size:48px;

font-weight:bold;

color:#b45309;

}

.rank{

font-size:32px;

font-weight:bold;

margin-top:10px;

}

.judge-title{

font-size:26px;

font-weight:bold;

color:#7c2d12;

}

.ultra-hit{

background:

linear-gradient(
135deg,
#2563eb,
#38bdf8
);

color:white;

padding:25px;

border-radius:15px;

font-size:26px;

font-weight:bold;

text-align:center;

margin:20px 0;

animation: glow 1s infinite alternate;

}

@keyframes glow{

from{
box-shadow:
0 0 10px #38bdf8;
}

to{
box-shadow:
0 0 35px #38bdf8;
}

}

.trap-box{

background:#fee2e2;

border:3px solid #dc2626;

padding:20px;

border-radius:15px;

margin:20px 0;

}

.ultra-card{

background:#dbeafe;

padding:10px;

border-left:8px solid #2563eb;

font-weight:bold;

margin-bottom:10px;

}

.fake-card{

background:#fee2e2;

padding:10px;

border-left:8px solid #dc2626;

font-weight:bold;

margin-bottom:10px;

}

.normal-card{

background:white;

padding:10px;

border-left:8px solid #d1d5db;

margin-bottom:10px;

}

.score-board{

display:grid;

grid-template-columns:
1fr 1fr 1fr;

gap:15px;

margin:20px 0;

}

.score-item{

background:white;

padding:15px;

text-align:center;

border-radius:10px;

box-shadow:
0 2px 8px rgba(0,0,0,.08);

}

.score-value{

font-size:28px;

font-weight:bold;

color:#2563eb;

}

.chat{
margin-bottom:15px;
}

.speaker{
font-weight:bold;
margin-bottom:5px;
}

.bubble{
display:inline-block;
background:#f3f4f6;
padding:12px;
border-radius:12px;
max-width:80%;
}

.chat:nth-child(even) .bubble{
background:#dbeafe;
}

.chat:nth-child(odd) .bubble{
background:#dcfce7;
}