:root{
  --court-bg:#100a08;
  --court-ink:#231812;
  --court-paper:#fff6df;
  --court-paper-2:#f5dfb8;
  --court-gold:#f0c36c;
  --court-red:#be3c35;
  --court-green:#2f9f63;
  --court-blue:#3f79c8;
  --court-shadow:0 24px 80px rgba(0,0,0,.34);
}

html,body{
  background:
    radial-gradient(circle at 18% 8%,rgba(240,195,108,.24),transparent 28%),
    radial-gradient(circle at 84% 18%,rgba(190,60,53,.16),transparent 30%),
    linear-gradient(135deg,#120907 0%,#21110b 42%,#050303 100%) !important;
}

.app{
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    radial-gradient(circle at 50% -10%,rgba(240,195,108,.12),transparent 38%) !important;
  background-size:42px 42px,42px 42px,auto !important;
}

.loading-card,.menu,.result-card{
  position:relative;
  overflow:hidden;
  border-radius:34px !important;
  border:1px solid rgba(240,195,108,.34) !important;
  background:linear-gradient(145deg,rgba(37,23,15,.96),rgba(18,10,7,.92)) !important;
  box-shadow:0 35px 120px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.loading-card::before,.menu::before,.result-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(circle at 20% 0,rgba(255,222,151,.18),transparent 28%),linear-gradient(120deg,transparent,rgba(255,255,255,.04),transparent);
  pointer-events:none;
}

.seal-mark,.stamp{
  border-color:#d93b31 !important;
  color:#f15e51 !important;
  background:radial-gradient(circle,rgba(255,244,216,.14),rgba(130,31,26,.1)) !important;
  text-shadow:0 2px 0 rgba(0,0,0,.24);
}

h1{
  letter-spacing:-.07em !important;
  text-shadow:0 6px 28px rgba(0,0,0,.36);
}

.menu-grid,.case-list{
  position:relative;
  z-index:1;
}

.notice,.daily-card,.case-card{
  border:1px solid rgba(240,195,108,.28) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035)) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.18);
}

.case-card{
  min-height:134px;
}

.case-card:hover{
  transform:translateY(-4px) scale(1.01) !important;
  box-shadow:0 24px 72px rgba(0,0,0,.28);
}

.topbar{
  border-bottom:1px solid rgba(240,195,108,.22) !important;
  background:rgba(13,7,5,.84) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.3);
}

.case-title b::before{
  content:"⚖ ";
  color:var(--court-gold);
}

.pill{
  border-color:rgba(240,195,108,.25) !important;
  background:rgba(255,246,229,.09) !important;
}

.game-grid{
  grid-template-columns:minmax(380px,1.04fr) minmax(360px,.96fr) !important;
  gap:18px !important;
}

.scene,.side,.board{
  border-radius:28px !important;
  border:1px solid rgba(240,195,108,.26) !important;
  background:linear-gradient(145deg,rgba(255,248,232,.98),rgba(238,214,174,.97)) !important;
  box-shadow:var(--court-shadow) !important;
}

.scene{
  min-height:560px !important;
  background:
    radial-gradient(circle at 50% 36%,rgba(255,255,255,.28),transparent 30%),
    linear-gradient(180deg,#eac99c 0 58%,#7b4b2d 58% 100%) !important;
}

.room{
  border:0 !important;
  border-radius:26px !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(180deg,#e8c394 0 58%,#8f5734 58% 100%) !important;
  background-size:54px 54px,54px 54px,auto !important;
  box-shadow:inset 0 0 0 6px rgba(74,43,26,.18), inset 0 -95px 160px rgba(35,20,13,.16);
}

.room::before{
  content:"분실물 재판소 / 증거 보관실";
  position:absolute;
  left:24px;
  top:20px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(35,24,18,.72);
  color:#ffe4a4;
  font-size:12px;
  font-weight:1000;
  letter-spacing:-.02em;
}

.object{
  border:1px solid rgba(72,43,25,.5) !important;
  border-radius:19px !important;
  background:linear-gradient(145deg,#fff9ea,#ead1a8) !important;
  box-shadow:0 12px 28px rgba(69,38,18,.24), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.object:hover{
  transform:translateY(-3px) scale(1.035);
  box-shadow:0 18px 42px rgba(69,38,18,.32),0 0 0 5px rgba(240,195,108,.24) !important;
}

.object.found{
  opacity:.62 !important;
  filter:saturate(.75);
}

.object.is-suspect-object{
  box-shadow:0 12px 28px rgba(69,38,18,.24),0 0 0 5px rgba(190,60,53,.22) !important;
}

.object .label{
  background:rgba(21,13,9,.9) !important;
  border:1px solid rgba(240,195,108,.25);
}

.side{
  gap:14px !important;
}

.request,.lpc-helper,.lpc-a11y-help{
  border-radius:20px !important;
  border-color:#d2aa72 !important;
  background:linear-gradient(145deg,#fffdf4,#f3dfbd) !important;
}

.request h2::before,.panel-title::before{
  content:"§ ";
  color:#b65b22;
}

.tabs{
  padding:4px;
  border-radius:18px;
  background:rgba(71,45,26,.08);
}

.tab{
  border:0 !important;
  background:transparent !important;
}

.tab.active{
  background:#2b2119 !important;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}

.card-zone{
  max-height:310px !important;
  padding:4px 6px 4px 0;
}

.e-card{
  display:block;
  width:100%;
  border-radius:18px !important;
  border:1px solid rgba(117,79,43,.2) !important;
  border-left:9px solid #fff !important;
  background:linear-gradient(145deg,#fffdf8,#fff2d3) !important;
  box-shadow:0 10px 26px rgba(74,43,25,.1) !important;
}

.e-card:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 36px rgba(74,43,25,.17) !important;
}

.e-card.trait{border-left-color:var(--court-blue) !important;}
.e-card.context{border-left-color:#d99a24 !important;}
.e-card.counter{border-left-color:var(--court-red) !important;}
.e-card.absence{border-left-color:#77716a !important;}
.e-card.trust{border-left-color:#8f63d6 !important;}

.e-card.selected{
  outline:3px solid rgba(47,159,99,.45) !important;
  background:linear-gradient(145deg,#f5ffe8,#fff1cc) !important;
}

.e-card.is-decoy{
  background:linear-gradient(145deg,#fff5ed,#ffe2d6) !important;
}

.court-card-tag{
  display:inline-flex;
  margin-top:8px;
  border-radius:999px;
  padding:3px 8px;
  background:rgba(190,60,53,.12);
  color:#93332c;
  font-size:11px;
  font-weight:1000;
}

.board{
  position:relative;
  overflow:visible !important;
}

.proof-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}

.proof-step{
  border-radius:20px !important;
  border:1px dashed rgba(125,81,43,.38) !important;
  background:linear-gradient(145deg,#fffaf0,#f5e2c4) !important;
}

.proof-step h3{
  font-size:14px !important;
  letter-spacing:-.02em;
}

.slot{
  border-radius:14px !important;
  border-color:rgba(128,84,46,.22) !important;
}

.slot.filled{
  background:#fff7df !important;
  box-shadow:inset 0 0 0 1px rgba(240,195,108,.25);
}

.link-lines,.judgement{
  border:1px solid rgba(125,81,43,.2) !important;
  background:linear-gradient(145deg,#fffaf1,#f1ddb9) !important;
}

.btn{
  border-radius:16px !important;
  transition:transform .13s ease, box-shadow .13s ease, filter .13s ease;
}

.btn:hover{
  transform:translateY(-2px);
  filter:saturate(1.06);
}

.btn.primary{
  box-shadow:0 12px 30px rgba(214,164,67,.22) !important;
}

.inspect-card{
  border-radius:30px !important;
  border:1px solid rgba(240,195,108,.38) !important;
}

.inspect-head{
  background:linear-gradient(145deg,#2b1a11,#16100c);
  color:#fff2d7;
}

.inspect-art{
  background:
    radial-gradient(circle,rgba(255,255,255,.6),transparent 36%),
    linear-gradient(145deg,#f4dfbb,#fff8ea) !important;
}

.court-docket{
  margin:0 0 16px;
  padding:15px;
  border-radius:24px;
  border:1px solid rgba(87,52,31,.2);
  background:
    radial-gradient(circle at 10% 0,rgba(240,195,108,.22),transparent 32%),
    linear-gradient(145deg,#2a1a12,#130c09);
  color:#fff7e8;
  box-shadow:0 16px 50px rgba(43,24,14,.22);
}

.court-docket.shake{
  animation:courtShake .34s ease both;
}

@keyframes courtShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  50%{transform:translateX(5px)}
  75%{transform:translateX(-3px)}
}

.court-docket__head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}

.court-eyebrow{
  display:inline-flex;
  margin-bottom:6px;
  border-radius:999px;
  padding:4px 8px;
  background:rgba(240,195,108,.14);
  color:#ffe29d;
  font-size:11px;
  font-weight:1000;
}

.court-docket h2{
  margin:0 0 5px;
  font-size:20px;
  letter-spacing:-.04em;
}

.court-docket p{
  margin:0;
  color:#e8d1ae;
  font-size:13px;
  line-height:1.55;
}

.court-pressure{
  flex:0 0 auto;
  min-width:86px;
  border-radius:18px;
  padding:10px;
  text-align:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(240,195,108,.18);
}

.court-pressure b{
  display:block;
  color:#ffe29d;
  font-size:26px;
  line-height:1;
}

.court-pressure span{
  color:#d6c1a1;
  font-size:11px;
  font-weight:900;
}

.court-docket__steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}

.court-step{
  display:flex;
  gap:10px;
  align-items:flex-start;
  min-height:112px;
  padding:11px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  color:#fff7e8;
  background:rgba(255,255,255,.07);
  text-align:left;
}

.court-step.ready{
  border-color:rgba(240,195,108,.5);
  background:rgba(240,195,108,.13);
}

.court-step.done{
  border-color:rgba(93,212,128,.42);
  background:rgba(47,159,99,.18);
}

.court-step.partial{
  border-color:rgba(255,255,255,.22);
}

.court-step__no{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#ffe29d;
  font-weight:1000;
}

.court-step__body b,
.court-step__body small,
.court-step__body em{
  display:block;
}

.court-step__body b{
  font-size:14px;
}

.court-step__body small{
  margin-top:4px;
  color:#e5cba5;
  font-size:12px;
  line-height:1.42;
}

.court-step__body em{
  margin-top:8px;
  color:#ffe29d;
  font-size:11px;
  font-style:normal;
  font-weight:1000;
}

.court-docket__meter{
  height:8px;
  margin-top:12px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.11);
}

.court-docket__meter span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#be3c35,#f0c36c,#2f9f63);
  transition:width .2s ease;
}

@media(max-width:1080px){
  .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

@media(max-width:980px){
  .game-grid{grid-template-columns:1fr !important;}
  .proof-grid{grid-template-columns:1fr !important;}
  .court-docket__steps{grid-template-columns:1fr;}
}

@media(max-width:620px){
  .scene{min-height:470px !important;}
  .court-docket__head{display:block;}
  .court-pressure{margin-top:10px;}
  .card-zone{max-height:240px !important;}
}