/* Divide Pal 2.0 (UI layer only) — keeps original mechanics intact */

:root{
  --dp2-scale:1;
  --bg1:#f7fafc;
  --bg2:#eef2ff;
  --ink:#0f172a;
  --muted:#475569;
  --card:#ffffff;
  --line:rgba(15,23,42,.12);
  --accent:#2563eb;
  --accent2:#7c3aed;
  --good:#16a34a;
  --bad:#dc2626;
  --focus:#000;
}

html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1100px 650px at 10% 0%, rgba(37,99,235,.14), transparent 55%),
    radial-gradient(900px 520px at 100% 10%, rgba(124,58,237,.12), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* Keep the original fixed game size but present it like an app */
#app_shell{
  width: 980px;
  max-width: calc(100vw - 24px);
  margin: 18px auto;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(15,23,42,.16),
    0 6px 18px rgba(15,23,42,.10);
  overflow: hidden;
}

#app_header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
}

#brand{display:flex; align-items:center; gap:10px;}

#brand_mark{
  width: 36px; height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,.92), rgba(124,58,237,.92));
  display:grid; place-items:center;
  color:#fff;
  font-weight: 800;
  letter-spacing:.5px;
}

#brand_title{display:flex; flex-direction:column; line-height:1.05;}
#brand_title b{font-size:16px;}
#brand_title span{font-size:12px;color:var(--muted)}

#support_chip{
  display:flex; align-items:center; gap:8px;
  padding: 8px 10px;
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 999px;
}
#support_chip_emoji{font-size:18px;}
#support_chip_label{font-size:12px;color:var(--muted)}

#app_content{position:relative; padding: 14px; display:flex; justify-content:center;}

#dp2_stage{position:relative; width:800px; height:600px;}

/* Force original game surfaces to sit inside the stage */
#frontpage_div, #game_div{top:0 !important; left:0 !important;}


/* Original game containers: keep their 800x600 logic but center them */
#frontpage_div,
#game_div{
  position: relative !important;
  width: 800px !important;
  height: 600px !important;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
  overflow:hidden;
}

#frontpage_div{padding-top: 10px;}

/* Modernize the options card */
.dp2_options{
  width: 640px;
  max-width: calc(100% - 28px);
  margin: 0 auto;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(124,58,237,.04));
}

.dp2_options h2{font-size:20px;margin:8px 0 10px 0;}
.dp2_sub{color:var(--muted); font-size:13px; margin-bottom:10px;}

.dp2_options table{font-size:16px;}
.dp2_options td{font-size:16px; padding: 6px 8px;}

select{
  font-size:16px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  border:1px solid rgba(15,23,42,.18) !important;
  background:#fff;
}

input[type="checkbox"]{transform: scale(1.25);}

/* Make the original .button classes feel modern (keep class name to avoid breaking) */
.button, .button:visited{
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(124,58,237,.95)) !important;
  border: 1px solid rgba(15,23,42,.18) !important;
  box-shadow: 0 10px 24px rgba(37,99,235,.22) !important;
  border-radius: 12px !important;
  text-shadow: none !important;
}
.button:hover{filter: brightness(1.03);}
.button:active{transform: translateY(1px);}

/* Popup: turn into a toast-card */
.popup_big{
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: 520px !important;
  max-width: calc(100vw - 40px);
  height: auto !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: rgba(15,23,42,.92) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.30);
}

/* Support animal panel */
#support_panel{
  position:absolute;
  right: 16px;
  bottom: 16px;
  width: 380px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 50px rgba(15,23,42,.18);
  padding: 12px 12px 10px;
  display:none;
  z-index: 9999;
}

#support_panel_header{display:flex; align-items:center; justify-content:space-between; gap:10px;}
#support_panel_emoji{font-size: calc(48px * var(--dp2-scale)); line-height:1;}
#support_panel_title{font-weight:900; font-size: calc(16px * var(--dp2-scale));}
#support_panel_msg{margin-top:6px; color:var(--muted); font-size: calc(16px * var(--dp2-scale)); line-height:1.25;}

#support_panel_close{
  background: transparent;
  border: 1px solid rgba(15,23,42,.15);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  cursor: pointer;
}
#support_panel_close:focus{outline: 3px solid var(--focus); outline-offset: 2px;}

/* Game top bar for Change Animal */
#dp2_gamebar{
  position:absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  z-index: 5000;
  pointer-events:none;
}

#dp2_gamebar .bar_left,
#dp2_gamebar .bar_right{display:flex; align-items:center; gap:8px; pointer-events:auto;}

.dp2_iconbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.15);
  background: rgba(255,255,255,.92);
  cursor:pointer;
  font-size: 13px;
}
.dp2_iconbtn:focus{outline: 3px solid var(--focus); outline-offset: 2px;}

/* Animal chooser modal */
#animal_modal_backdrop{
  position: fixed;
  inset:0;
  background: rgba(15,23,42,.55);
  display:none;
  z-index: 20000;
}

#animal_modal{
  position: fixed;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: 720px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(15,23,42,.30);
  padding: 14px;
  display:none;
  z-index: 20001;
  overflow:auto;
}

#animal_modal h3{margin: 4px 0 0; font-size:18px;}
#animal_modal p{margin:6px 0 12px; font-size:13px; color:var(--muted)}

.animal_grid{display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;}
@media (max-width: 720px){.animal_grid{grid-template-columns: repeat(4, minmax(0, 1fr));}}

.animal_btn{
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 14px;
  background: #fff;
  padding: 10px 8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
}
.animal_btn .emo{font-size:30px;}
.animal_btn .lbl{font-size:12px;color:var(--muted)}
.animal_btn[aria-pressed="true"]{border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 4px rgba(37,99,235,.18);}
.animal_btn:focus{outline: 3px solid var(--focus); outline-offset: 2px;}

#animal_modal_actions{display:flex; justify-content:flex-end; gap:10px; margin-top: 12px;}

.dp2_secondary{
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
}

.dp2_primary{
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(124,58,237,.95));
  color:#fff;
  border: 1px solid rgba(15,23,42,.18);
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
}

.dp2_secondary:focus,.dp2_primary:focus{outline: 3px solid var(--focus); outline-offset: 2px;}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;}
}


/* Completion banner (appears when 'All done.' is reached) */
.dp2_done_banner{
  display:flex;
  align-items:center;
  gap: 14px;
  margin: 8px auto 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 2px solid rgba(16,185,129,.35);
  background: linear-gradient(90deg, rgba(16,185,129,.12), rgba(99,102,241,.10));
  box-shadow: 0 10px 30px rgba(15,23,42,.12);
  max-width: 880px;
}
.dp2_done_emo{
  font-size: calc(56px * var(--dp2-scale));
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(15,23,42,.18));
}
.dp2_done_title{
  font-weight: 1000;
  font-size: calc(24px * var(--dp2-scale));
  color: var(--ink);
  letter-spacing: .2px;
}
.dp2_done_sub{
  margin-top: 2px;
  font-size: calc(16px * var(--dp2-scale));
  color: var(--muted);
}

/* Make the original popup feedback feel bigger, without changing logic */
#popup_message{
  font-size: calc(22px * var(--dp2-scale)) !important;
  font-weight: 800 !important;
}
#popup_div{
  transform: translate(-50%, -50%) scale(var(--dp2-scale));
  transform-origin: center;
}