*{box-sizing:border-box}
body{margin:0;background:#10141b;color:#fff;font-family:Arial,sans-serif}
.app{max-width:1200px;margin:auto;padding:12px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
header b{font-size:23px;color:#ffd15c}
header small{color:#9ca5b4}
.card{background:#191e27;border:1px solid #343c4b;border-radius:16px;padding:12px}
main{display:grid;grid-template-columns:1fr 330px;gap:12px}
.players{display:grid;grid-template-columns:1fr auto 1fr;gap:7px;margin-bottom:8px}
.players span{background:#252c38;padding:8px;border-radius:8px}
.players span:last-child{text-align:right}
.players b{color:#ffd15c;align-self:center;font-size:12px}
.board{background:#6c4027;border:7px solid #3a2115;border-radius:12px;padding:4px}
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:2px}
.point{height:210px;position:relative;cursor:pointer;overflow:visible}
.tri{position:absolute;left:5%;width:90%;height:97%;background:#d4a05f;clip-path:polygon(50% 0,100% 100%,0 100%)}
.point:nth-child(even) .tri{background:#552919}
.row:first-child .tri{top:0}
.row:last-child .tri{bottom:0;clip-path:polygon(0 0,100% 0,50% 100%)}
.stack{position:absolute;left:50%;transform:translateX(-50%);z-index:3;display:flex}
.stack.t{top:24px;flex-direction:column}
.stack.b{bottom:24px;flex-direction:column-reverse}
.checker{width:29px;height:29px;border-radius:50%;border:2px solid #222;box-shadow:0 2px 4px #0008;display:block;flex:none}
.w{background:radial-gradient(circle at 30% 25%,#fff,#d2c19e)}
.bl{background:radial-gradient(circle at 30% 25%,#666,#101010)}
.point small{position:absolute;z-index:4;left:50%;transform:translateX(-50%);font-size:9px}
.row:first-child .point small{top:2px}
.row:last-child .point small{bottom:2px}
.sel .tri{outline:4px solid #ffd15c;outline-offset:-4px}
.bar{height:42px;display:flex;align-items:center;justify-content:center;gap:12px;color:#dcbfa7;font-size:11px}
.bar span{background:#21150f;border-radius:8px;padding:4px}
.controls{display:flex;gap:8px;margin-top:10px;align-items:center}
.controls div{display:flex;gap:5px;margin-right:auto}
.controls i{width:45px;height:45px;background:#fff;color:#111;border-radius:9px;display:grid;place-items:center;font-size:22px;font-style:normal}
.controls i.used{opacity:.35}
.controls button,header button,.chat button{padding:10px 13px;border:0;border-radius:9px;background:#ffd15c;font-weight:800}
#msg{color:#ffd15c;min-height:18px;margin-top:5px;font-size:12px}
#chat{height:240px;overflow:auto;background:#0d1218;border-radius:9px;padding:8px;font-size:12px}
#chat div{padding:7px;border-bottom:1px solid #252c36}
#chat small{color:#777;float:right}
.chat{display:flex;gap:5px;margin-top:7px}
.chat input,.home input{flex:1;background:#0e1319;color:#fff;border:1px solid #394354;border-radius:9px;padding:10px}
.home{max-width:440px;margin:15vh auto;text-align:center;padding:20px}
.hero{background:#191e27;border:1px solid #343c4b;border-radius:18px;padding:25px}
.hero h1{color:#ffd15c}
.hero button{width:100%;margin-top:8px;padding:12px;border:0;border-radius:9px;background:#ffd15c;font-weight:800}
.join{display:flex;gap:6px;margin-top:12px}
.join input{min-width:0}
.join button{margin:0}

@media(max-width:850px){
main{display:block}
aside{margin-top:10px}
.point{height:160px}
.checker{width:22px;height:22px}
}

@media(max-width:520px){
.app{padding:6px}
.point{height:118px}
.checker{width:17px;height:17px}
.board{border-width:5px}
.controls i{width:40px;height:40px}
.players{font-size:11px}
}

.stack::after{
content:attr(data-count);
position:absolute;
left:50%;
transform:translateX(-50%);
z-index:10;
background:#ffd15c;
color:#17120b;
border:2px solid #6b431d;
border-radius:999px;
font-weight:900;
font-size:11px;
line-height:20px;
min-width:22px;
height:22px;
text-align:center;
box-shadow:0 2px 5px #0008
}

.stack.t::after{top:145px}
.stack.b::after{bottom:145px}

/* =========================================================
TABLĂ REALISTĂ
========================================================= */

body{
background:
radial-gradient(
circle at 50% 20%,
#3a2415 0,
#17100b 38%,
#090807 100%
);
}

.app{
max-width:1500px;
padding:10px 14px
}

.card{
background:linear-gradient(145deg,#15191f,#0d1015);
border:1px solid #594126;
box-shadow:0 18px 45px #0009
}

.board{
width:100%;
max-width:1380px;
margin:auto;
background:
linear-gradient(
90deg,
#5a321d,
#9a5c2d 48%,
#4d2b19
);
border:12px solid #2b170c;
border-radius:20px;
padding:8px;
box-shadow:
inset 0 0 0 3px #a56a35,
inset 0 0 35px #160b05,
0 18px 40px #000b
}

.row{gap:3px}

.point{
height:270px;
overflow:visible;
touch-action:manipulation
}

.tri{
left:4%;
width:92%;
filter:drop-shadow(0 4px 2px #0005);
background:linear-gradient(90deg,#e8c080,#bd7d40)
}

.point:nth-child(even) .tri{
background:linear-gradient(90deg,#63331e,#8b4b28)
}

.stack{gap:0}

.stack.t{top:26px}
.stack.b{bottom:26px}

.checker{
width:42px;
height:42px;
border-width:3px;
box-shadow:
0 4px 7px #000b,
inset 0 1px 2px #fff8
}

.w{
background:
radial-gradient(
circle at 30% 23%,
#fff,
#e8dfca 55%,
#a79a83
);
border-color:#7e7568
}

.bl{
background:
radial-gradient(
circle at 30% 23%,
#555,
#161616 60%,
#050505
);
border-color:#050505
}

.stack .checker{margin-top:-2px}
.stack.b .checker{margin-bottom:-2px}

.stack::after{
font-size:13px;
min-width:27px;
height:25px;
line-height:21px;
border-width:2px
}

.stack.t::after{top:225px}
.stack.b::after{bottom:225px}

.sel .tri{
outline:5px solid #ffd34e;
filter:drop-shadow(0 0 10px #ffd34e)
}

.point.hint .tri{
outline:5px solid #1ea7ff;
outline-offset:-5px;
filter:drop-shadow(0 0 11px #1ea7ff)
}

.moveDot{
position:absolute;
z-index:20;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:58px;
height:58px;
border-radius:50%;
background:#168dff33;
border:4px solid #42b6ff;
box-shadow:
0 0 20px #168dff,
inset 0 0 15px #168dff;
display:grid;
place-items:center;
animation:pulseHint 1s infinite
}

.moveDot span{
font-size:25px;
text-shadow:0 0 8px #fff
}

@keyframes pulseHint{
50%{
transform:translate(-50%,-50%) scale(1.13);
opacity:.75
}
}

.controls i{
width:58px;
height:58px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
line-height:1;
background:linear-gradient(145deg,#fff,#d8d8d8);
border:2px solid #aaa;
box-shadow:0 5px 12px #0008
}

.controls i b{font-size:22px}
.controls i span{font-size:18px}
.controls i.used{opacity:.35}

#msg{
font-size:14px;
padding:8px;
color:#8fd3ff;
text-align:center;
min-height:32px
}

@media(max-width:900px){
.app{padding:4px}

.board{
    border-width:7px;
    padding:4px;
    border-radius:14px
}

.point{height:225px}
.checker{width:34px;height:34px}

.stack.t{top:22px}
.stack.b{bottom:22px}

.stack.t::after{top:178px}
.stack.b::after{bottom:178px}

}

@media(max-width:560px){
.point{height:170px}
.checker{width:25px;height:25px}

.stack.t{top:17px}
.stack.b{bottom:17px}

.stack.t::after{top:133px}
.stack.b::after{bottom:133px}

.moveDot{
    width:44px;
    height:44px
}

.moveDot span{font-size:19px}

.board{border-width:5px}
.controls i{width:52px;height:52px}

}

.doubleInfo{
color:#ffd15c;
font-size:11px;
font-weight:800;
align-self:center;
white-space:nowrap
}

.controls #dice{
flex-wrap:wrap;
align-items:center
}

/* =========================================================
INTRARE CAMERĂ
========================================================= */

.fieldLabel{
display:block;
text-align:left;
color:#9ca5b4;
font-size:14px;
font-weight:700;
margin:12px 2px 5px
}

.home .hero>input#name{
display:block;
width:100%;
height:48px
}

.join{
display:block;
text-align:left
}

.join input#code{
display:block;
width:100%;
height:48px;
flex:none
}

.join button{
display:block!important;
width:100%!important;
margin-top:8px!important
}

.hero button{width:100%}

.join .fieldLabel{
margin-top:14px
}

/* =========================================================
MUTĂRI / BARĂ
========================================================= */

.point.bearSource .tri{
outline:5px solid #18a8ff!important;
outline-offset:-5px;
filter:drop-shadow(0 0 13px #18a8ff)!important
}

.point.barEntry .moveDot{
background:#2196f3!important;
box-shadow:
0 0 0 5px rgba(33,150,243,.22),
0 0 18px rgba(33,150,243,.85)!important;
color:#fff!important
}

.point.barEntry .stack{
outline:4px solid #2196f3;
outline-offset:3px;
border-radius:50%
}

/* =========================================================
NIGHT / DAY
========================================================= */

.themeToggle{
white-space:nowrap;
min-width:108px;
cursor:pointer
}

.themeToggle.dayMode{
background:#ffd15c
}

[data-theme="day"] body{
background:#eef2f7;
color:#18202b
}

[data-theme="day"] .card{
background:#ffffff;
border-color:#cbd4df
}

[data-theme="day"] header small{
color:#657184
}

[data-theme="day"] .players span{
background:#e8edf4;
color:#18202b
}

[data-theme="day"] .players b{
color:#9a6900
}

[data-theme="day"] #chat{
background:#f3f6fa;
color:#18202b
}

[data-theme="day"] #chat div{
border-bottom-color:#dce2ea
}

[data-theme="day"] .chat input,
[data-theme="day"] .home input{
background:#fff;
color:#18202b;
border-color:#aeb9c8
}

[data-theme="day"] .hero{
background:#fff;
border-color:#cbd4df
}

[data-theme="day"] .hero h1{
color:#9a6900
}

[data-theme="day"] .fieldLabel{
color:#657184
}

[data-theme="day"] #msg{
color:#1672ad
}

[data-theme="day"] header b{
color:#9a6900
}

[data-theme="day"] .themeToggle{
background:#1f2937;
color:#fff
}

/* =========================================================
TABLĂ - DELIMITĂRI
========================================================= */

.board{
position:relative
}

.row{
position:relative
}

.bar{
position:relative;
height:54px;
margin:2px 0;
border-top:3px solid rgba(220,180,120,.42);
border-bottom:3px solid rgba(50,25,12,.7);
background:
linear-gradient(
90deg,
rgba(35,18,9,.55),
rgba(170,100,45,.35),
rgba(35,18,9,.55)
);
box-shadow:inset 0 0 18px rgba(0,0,0,.45);
z-index:6
}

.row .point:nth-child(7){
border-left:5px solid rgba(35,18,9,.62)
}

.row:first-child .point:nth-child(7)::before,
.row:last-child .point:nth-child(7)::before{
content:"";
position:absolute;
top:0;
bottom:0;
left:-7px;
width:1px;
background:rgba(240,195,130,.35);
z-index:5;
pointer-events:none
}

.row:first-child .point:nth-child(-n+6),
.row:last-child .point:nth-child(-n+6){
background:rgba(255,220,150,.025)
}

.row:first-child .point:nth-child(n+7),
.row:last-child .point:nth-child(n+7){
background:rgba(0,0,0,.035)
}

@media(max-width:560px){
.bar{height:46px}

.row .point:nth-child(7){
    border-left-width:3px
}

.row:first-child .point:nth-child(7)::before,
.row:last-child .point:nth-child(7)::before{
    left:-5px
}

}

/* =========================================================
INVITAȚIE
========================================================= */

.inviteBox{
margin-top:10px;
padding:10px;
border:1px solid #394354;
border-radius:10px;
background:#121820
}

.inviteBox b{
display:block;
color:#ffd15c;
margin-bottom:7px
}

.inviteRow{
display:flex;
gap:8px
}

.inviteRow input{
min-width:0;
flex:1;
background:#0b1016;
color:#fff;
border:1px solid #394354;
border-radius:8px;
padding:9px;
font-size:12px
}

.inviteRow button{
padding:9px 11px;
border:0;
border-radius:8px;
background:#ffd15c;
font-weight:800
}

.inviteBox small{
display:block;
color:#9ca5b4;
font-size:11px;
margin-top:6px
}

@media(max-width:520px){
.inviteRow{
display:block
}

.inviteRow button{
    width:100%;
    margin-top:6px
}

}

/* =========================================================
AUTENTIFICARE / LEADERBOARD
========================================================= */

.authBox,
.leader{
margin:14px 0;
padding:14px;
border-radius:14px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12)
}

.authBox input{
width:100%;
box-sizing:border-box;
margin:5px 0;
padding:11px;
border-radius:10px;
border:1px solid rgba(255,255,255,.15);
background:rgba(0,0,0,.16);
color:inherit
}

.authBtns{
display:flex;
gap:8px;
margin-top:8px
}

.authBtns button{
flex:1
}

.leader table{
width:100%;
border-collapse:collapse;
font-size:.88rem
}

.leader th,
.leader td{
padding:7px 5px;
border-bottom:1px solid rgba(255,255,255,.12);
text-align:left
}

.miniLink{
margin-top:8px
}

.miniLink a{
color:inherit
}

.doubleInfo{
display:block;
margin-left:8px
}

/* =========================================================
CHAT DESKTOP
========================================================= */

.chat{
position:relative;
z-index:30;
display:flex;
gap:6px;
margin-top:7px;
align-items:stretch
}

.chat input#text{
display:block;
position:relative;
z-index:31;
pointer-events:auto;
user-select:text;
-webkit-user-select:text;
cursor:text;
flex:1 1 auto;
min-width:0;
width:100%;
height:40px;
box-sizing:border-box
}

.chat button#send{
position:relative;
z-index:31;
pointer-events:auto;
cursor:pointer;
flex:0 0 auto;
height:40px
}

.chat input#text{
color:#fff!important;
background:#0e1319!important;
caret-color:#fff!important;
opacity:1!important;
-webkit-text-fill-color:#fff!important
}

[data-theme="day"] .chat input#text{
color:#18202b!important;
background:#fff!important;
caret-color:#18202b!important;
-webkit-text-fill-color:#18202b!important
}

.chat input#text::placeholder{
color:#9aa4b2!important;
opacity:1
}

/* =========================================================
PROFIL
========================================================= */

.topActions{
display:flex;
justify-content:flex-end;
align-items:center;
gap:10px;
margin-bottom:15px;
flex-wrap:wrap
}

.profileTop{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-bottom:15px;
flex-wrap:wrap
}

.playerLink{
color:inherit;
font-weight:700;
text-decoration:none;
cursor:pointer;
transition:
color .2s ease,
opacity .2s ease
}

.playerLink:hover{
color:#4f8cff;
text-decoration:underline
}

.profileBox{
margin-top:20px
}

.profileHeader{
display:flex;
align-items:center;
gap:15px;
margin-bottom:25px
}

.profileAvatar{
width:64px;
height:64px;
border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:30px;

background:
    linear-gradient(
        135deg,
        #4f8cff,
        #7c4dff
    );

box-shadow:
    0 8px 25px
    rgba(0,0,0,.15)

}

.profileHeader h2{
margin:0 0 5px 0
}

.profileUsername{
opacity:.65;
font-size:.95rem
}

.profileStats{
display:grid;

grid-template-columns:
    repeat(3,minmax(0,1fr));

gap:12px

}

.profileStat{
padding:16px;

border-radius:14px;

background:
    rgba(127,127,127,.12);

border:
    1px solid
    rgba(127,127,127,.15)

}

.profileStat span{
display:block;

opacity:.7;

margin-bottom:7px;

font-size:.9rem

}

.profileStat b{
display:block;

font-size:1.35rem

}

.profileSummary{
margin-top:20px;

padding:15px;

border-radius:12px;

background:
    rgba(79,140,255,.10);

border:
    1px solid
    rgba(79,140,255,.20)

}

/* =========================================================
CAMERE
========================================================= */

.roomInfo .playerLink{
display:inline-block;
margin-left:3px
}

/* =========================================================
MOBILE PROFIL
========================================================= */

@media(max-width:700px){

.profileStats{
    grid-template-columns:1fr 1fr
}

}

@media(max-width:450px){

.profileStats{
    grid-template-columns:1fr
}

.profileTop,
.topActions{
    justify-content:center
}

}

/* =========================================================
PROFIL - DAY MODE
========================================================= */

[data-theme="day"] .profileStat{
background:rgba(79,140,255,.06);
border-color:rgba(79,140,255,.14)
}

[data-theme="day"] .profileSummary{
background:rgba(79,140,255,.08);
border-color:rgba(79,140,255,.18)
}

[data-theme="day"] .authBox,
[data-theme="day"] .leader{
background:#fff;
border-color:#cbd4df
}

[data-theme="day"] .profileAvatar{
box-shadow:0 8px 25px rgba(40,60,90,.15)
}

/* =========================================================
BUTOANE PROFIL / TOP
========================================================= */

.topActions button,
.profileTop button{
cursor:pointer
}

.topActions a,
.profileTop a{
text-decoration:none
}

.topActions button:hover,
.profileTop button:hover,
.hero button:hover,
.controls button:hover,
.chat button:hover,
.inviteRow button:hover{
filter:brightness(1.06);
}

.topActions button:active,
.profileTop button:active,
.hero button:active,
.controls button:active,
.chat button:active,
.inviteRow button:active{
transform:translateY(1px);
}

/* =========================================================
PLAYER LINKS - MOBILE
========================================================= */

@media(max-width:520px){

.profileHeader{
    gap:10px;
    margin-bottom:18px
}

.profileAvatar{
    width:54px;
    height:54px;
    font-size:25px
}

.profileHeader h2{
    font-size:20px
}

.profileUsername{
    font-size:13px
}

.profileStat{
    padding:13px
}

.profileStat b{
    font-size:1.2rem
}

.profileSummary{
    padding:12px
}

.homeBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 13px;
    border-radius: 9px;
    text-decoration: none;
    cursor: pointer;
}

/* =========================================================
   NUME JUCĂTOR CLICKABLE
========================================================= */

.playerLink {
    display: inline-block;
    color: #ffd15c !important;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition:
        color .2s ease,
        opacity .2s ease,
        transform .15s ease;
}

.playerLink:hover {
    color: #4f8cff !important;
    text-decoration: underline !important;
}

.playerLink:active {
    transform: scale(.97);
}

.playerLink:focus-visible {
    outline: 2px solid #4f8cff;
    outline-offset: 3px;
    border-radius: 4px;
}


}