* { box-sizing: border-box; font-family: system-ui, sans-serif; } body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #0f1724 0%, #0b1020 60%); color: #e6eef8; display: flex; justify-content: center; align-items: center; padding: 30px 12px; } .logo { position: absolute; top: 18px; right: 18px; width: 48px; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6)); } .card { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); color: #e6eef8; width: 920px; max-width: calc(100% - 48px); padding: 22px; border-radius: 14px; box-shadow: 0 10px 50px rgba(3,6,23,0.75), inset 0 1px 0 rgba(255,255,255,0.02); text-align: center; position: relative; } /* Game stage layout similar to xplain.png (ignoring chess background) */ .game-stage { position: relative; width: 100%; height: 480px; margin: 12px 0 18px; } .ai-panel { display: grid; grid-template-columns: 140px 1fr 140px; gap: 20px; align-items: start; width: 100%; margin-bottom: 18px; } .ai-avatars { display:flex; gap:6px } display:flex; flex-direction: column; align-items: center; gap:8px; /* board child elements styling */ #statusText { width:100%; background:rgba(255,255,255,0.03); padding:6px 8px; border-radius:6px; text-align:center } #tossBox, #choiceBox, #bgBox, #scoreBoard { width:100%; margin-top:6px } #tossBox select, #bgBox select { width:48%; display:inline-block } #tossBox p { margin:6px 0 4px } #scoreBoard { font-weight:700; text-align:center } .hand-container { width:100%; display:flex; justify-content:center; padding:8px; background:transparent } .controls-row { width:100%; display:flex; gap:8px; margin-top:6px } .controls-row .restart-btn, .controls-row .logout-btn { flex:1 } .user-panel { position:absolute; left:8px; bottom:-68px; display:flex; gap:8px; align-items:center } .user-photo { width:72px; height:72px; border-radius:10px; object-fit:cover; border:2px solid rgba(255,255,255,0.08) } .user-label { background:rgba(0,0,0,0.6); padding:6px 8px; border-radius:6px } .photo-label { display:block; margin-top:8px; text-align:left; font-size:0.85rem } .photo-preview { width:64px; height:64px; object-fit:cover; border-radius:8px; margin-top:6px } .hidden { display:none } h1 { margin: 6px 0 10px; font-size: 1.4rem; letter-spacing: 0.6px; } input, select, button { width: 100%; margin-top: 8px; padding: 10px; border-radius: 12px; border: none; font-size: 0.9rem; } button { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color: #eaf6ff; cursor: pointer; border: 1px solid rgba(255,255,255,0.04); transition: all 160ms ease; font-weight:700; } button:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(2,6,23,0.5); } .hidden { display: none; } .card-header { font-size: 0.9rem; opacity: 0.8; } #statusText { margin: 6px 0; font-size: 0.95rem; color: #bfe8ff; } #scoreBoard { margin: 8px 0 4px; font-weight: 800; color: #ffd880; } .hand-container { background: transparent; padding: 6px 4px; border-radius: 10px; display: flex; justify-content: center; } .row img { width: 52px; margin: 6px; cursor: pointer; } .row img:hover { transform: translateY(-6px) scale(1.06); filter: drop-shadow(0 10px 18px rgba(0,0,0,0.5)); transition: all 140ms ease } .logout-btn { margin-top: 10px; font-size: 0.9rem; opacity: 0.95; } .logout-btn:hover { opacity: 1; } .controls-row { display: flex; gap: 8px; margin-top: 8px; } .restart-btn { flex: 1; background: linear-gradient(180deg,#1f7aef,#1455c8); color: white; border-radius: 10px; padding: 10px; cursor: pointer; border: none; } .restart-btn:hover { filter:brightness(1.06) } /* Background variants applied to via class */ body.beach { background: linear-gradient(135deg,#a8e6cf,#dcedc1); } body.space { background: radial-gradient(circle at 30% 20%, #0f0c29, #302b63, #24243e); } body.forest { background: linear-gradient(135deg,#134e4a,#1e3a2b); } /* Game-stage polish */ .game-stage { display: flex; align-items: flex-start; justify-content: center; gap: 20px; width: 100%; margin-bottom: 18px; } .ai-panel { position: relative; display:flex; flex-direction: column; align-items: center; width: 120px; } .ai-avatar { width:86px; height:86px; border-radius:14px; object-fit:cover; border:2px solid rgba(255,255,255,0.06) } .ai-talk { background:#ff6347; color:#07101b; padding:8px 10px; margin-top:8px; border-radius:8px; font-weight:800; text-align:center } .board-panel { position: relative; margin: 0; width: 560px; height: auto; display:flex; align-items:stretch; justify-content:center } .board { width:100%; height:auto; min-height:420px; background: linear-gradient(180deg,#020203,#0b0b0d); border:1px solid rgba(255,255,255,0.04); box-shadow: 0 10px 30px rgba(2,8,23,0.6); padding:16px } .board .board { } .user-panel { position: relative; display:flex; flex-direction: column; align-items:center; width:120px } .user-photo { width:96px; height:96px; border-radius:14px; border:3px solid rgba(255,255,255,0.04); box-shadow:0 12px 26px rgba(0,0,0,0.6) } /* Inputs inside the board should be compact */ #tossBox select, #bgBox select { padding:8px; font-size:0.9rem } #tossBox button { padding:8px 10px; margin-top:6px } /* Responsive tweaks */ @media (max-width: 720px) { .card { width: 96%; padding: 14px } .board-panel { width: 100%; height: auto } .board { height: auto } .ai-avatar { width:56px; height:56px } .user-photo { width:64px; height:64px } }