Tic Tac Toe CSS
<style>
*{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',sans-serif}
body{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background: radial-gradient(circle at 10% 10%, #7b61ff 0%, #4f46e5 30%, #0f172a 100%);
color:#111;
padding:24px;
}
/* 3D container */
.stage{
perspective:1200px;
width:100%;
max-width:920px;
display:flex;
gap:18px;
align-items:flex-start;
}
.container{
position:relative;
margin:0 auto;
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,255,0.85));
border-radius:16px;
padding:28px;
box-shadow: 0 20px 50px rgba(2,6,23,0.6), inset 0 -6px 24px rgba(255,255,255,0.2);
transform-style:preserve-3d;
transform: rotateX(6deg) translateZ(0);
width:600px;
}
header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:14px;
}
h1{font-size:1.6rem;color:#0b1020;letter-spacing:-0.5px}
.controls{
display:flex;
gap:8px;
align-items:center;
}
.btn, button{
background:#0f172a;
color:white;
border:none;
padding:8px 12px;
border-radius:10px;
cursor:pointer;
font-weight:600;
box-shadow: 0 6px 18px rgba(15,23,42,0.35);
transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover, button:hover{transform:translateY(-4px);box-shadow: 0 12px 28px rgba(15,23,42,0.45)}
#historyBtn{
position:absolute;
right:18px;
top:18px;
background:linear-gradient(180deg,#10b981,#059669);
padding:6px 10px;
border-radius:8px;
box-shadow: 0 8px 20px rgba(5,150,105,0.25);
}
.status{
font-size:1.05rem;
margin-bottom:12px;
color:#14213d;
font-weight:700;
}
.score-container{
display:flex;
gap:10px;
margin-bottom:18px;
align-items:center;
}
.score{
flex:1;
background:rgba(15,23,42,0.03);
padding:10px;
border-radius:10px;
text-align:center;
box-shadow: 0 6px 18px rgba(2,6,23,0.05);
}
.score h3{margin-bottom:6px;font-size:.9rem}
.score p{font-size:1.3rem;font-weight:800}
/* 3D board */
.board-wrap{
display:flex;
justify-content:center;
margin-bottom:18px;
transform-style:preserve-3d;
}
.board{
display:grid;
grid-template-columns:repeat(3,120px);
grid-template-rows:repeat(3,120px);
gap:12px;
padding:18px;
border-radius:18px;
background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(245,247,255,0.6));
box-shadow: 0 18px 40px rgba(2,6,23,0.35);
transform: translateZ(40px) rotateX(6deg);
}
.cell{
display:flex;
align-items:center;
justify-content:center;
font-size:2.6rem;
font-weight:900;
background:linear-gradient(180deg,#fff,#f2f6ff);
border-radius:12px;
cursor:pointer;
user-select:none;
box-shadow: 0 10px 20px rgba(2,6,23,0.08);
transition: transform .15s cubic-bezier(.2,.9,.3,1), box-shadow .15s;
transform-style:preserve-3d;
perspective:800px;
}
.cell:hover{ transform: translateY(-8px) translateZ(14px) rotateX(6deg); box-shadow: 0 24px 40px rgba(3,7,20,0.18); }
.cell.x{ color:#ef4444; text-shadow: 0 2px 0 rgba(0,0,0,0.06); }
.cell.o{ color:#2563eb; text-shadow: 0 2px 0 rgba(0,0,0,0.06); }
.options{
display:flex;
gap:8px;
align-items:center;
margin-bottom:10px;
justify-content:center;
}
.small{font-size:.9rem;padding:6px 10px;border-radius:8px;background:rgba(15,23,42,0.06)}
/* assistant / chat UI */
.side-panel{
width:320px;
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,255,0.98));
border-radius:16px;
padding:12px;
box-shadow: 0 20px 50px rgba(2,6,23,0.6);
position:relative;
transform-style:preserve-3d;
}
.assistant-toggle{
position:fixed;
right:18px;
bottom:18px;
z-index:90;
border-radius:50%;
width:56px;height:56px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,#ef4444,#dc2626);
color:white;font-weight:800;font-size:1.1rem;
box-shadow: 0 14px 34px rgba(220,38,38,0.28);
cursor:pointer;
}
.assistant-panel{
position:fixed;
right:24px;
bottom:86px;
width:360px;
max-width:92%;
background:white;
border-radius:12px;
box-shadow:0 30px 80px rgba(2,6,23,0.6);
display:none;
flex-direction:column;
overflow:hidden;
z-index:95;
}
.assistant-header{padding:12px 14px;background:linear-gradient(90deg,#111827,#0f172a);color:white;display:flex;align-items:center;justify-content:space-between}
.assistant-body{padding:10px;height:300px;overflow:auto;background:#f8fafc}
.assistant-input{display:flex;gap:8px;padding:10px;border-top:1px solid #eef2f7;background:white}
.chat-bubble{padding:8px 10px;border-radius:10px;margin:8px 0;max-width:85%;}
.from-user{background:linear-gradient(90deg,#e2e8f0,#ffffff);margin-left:auto;text-align:right}
.from-bot{background:linear-gradient(90deg,#0ea5a5,#60a5fa);color:white}
.kb-editor{margin-top:10px;font-size:.9rem}
.proj-desc{width:100%;height:80px;border-radius:8px;padding:8px;border:1px solid #e6eef8;resize:vertical}
/* modal/history */
.overlay{ position:fixed; inset:0; background:rgba(2,6,23,0.45); display:none; align-items:center; justify-content:center; z-index:60 }
.panel{
background:white; padding:18px; border-radius:12px; width:320px; max-width:92%;
box-shadow: 0 24px 64px rgba(2,6,23,0.5);
}
.panel h3{margin-bottom:8px}
.history-list{max-height:220px; overflow:auto; margin-top:8px; padding-right:6px}
.history-item{padding:8px 6px;border-bottom:1px solid #f1f3f5;font-weight:700;display:flex;justify-content:space-between}
/* congrats full screen */
.congrats{
position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:80;
pointer-events:none;
}
.confetti { position:absolute; width:10px;height:18px; opacity:0; transform:translateY(-300px) rotate(0deg); animation: fall 1400ms linear forwards; }
@keyframes fall { 0%{opacity:1; transform:translateY(-300px) rotate(0deg)} 100%{opacity:1; transform:translateY(80vh) rotate(720deg)} }
.congrats-card{ background:linear-gradient(90deg,#0ea5a5,#60a5fa); padding:24px 36px; border-radius:18px; box-shadow:0 18px 48px rgba(2,6,23,0.45); color:white; text-align:center; transform:translateY(-20px) scale(.95); animation: pop 420ms cubic-bezier(.2,.8,.2,1) forwards; pointer-events:auto;}
@keyframes pop { to{ transform:translateY(0) scale(1) } }
/* responsive */
@media (max-width:920px){
.stage{flex-direction:column;align-items:center}
.container{width:100%}
}
@media (max-width:520px){
.board{ grid-template-columns:repeat(3,84px); grid-template-rows:repeat(3,84px); gap:8px; padding:12px }
.cell{ font-size:2rem }
}
footer{ margin-top:12px; text-align:center; font-size:.85rem; color:#334155 }
</style>
Public Last updated: 2026-08-25 08:35:30 AM