/* Interblod – Štiri v vrsto (Connect Four) v zasebnem klepetu.
   Nivo-2 preklopniki [Klepet | Igra N | + Nova igra] na vrhu okna + igralna ploskev (#game_pane) nad klepetom.
   Deska = stolpci (flex) x celice; velikost celic postavi games.js (px), da se prilega + pusti rezino klepeta. */

/* ---------- nivo-2 preklopniki ---------- */
#convo_tabs_bar {
	display: none;            /* prikaže games.js, ko si v zasebnem pogovoru */
	flex-wrap: wrap;
	align-items: stretch;
	gap: 5px;
	width: 100%;
	box-sizing: border-box;
	padding: 5px 10px 0;
	margin: 0;
}
.convo-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 10px 10px 0 0;
	background: #2b313a;
	color: #c4ccd6;
	border: 1px solid rgba(0,0,0,.28);
	border-bottom: none;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	user-select: none;
	white-space: nowrap;
}
.convo-tab:hover { background: #333b46; }
.convo-tab.is-active { background: #fff; color: #0b1320; }
.convo-tab__ico { font-size: 12px; opacity: .85; }
.convo-tab__badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: 9px; background: #ff5236; color: #fff; font-size: 10px; font-weight: bold;
}
/* igra, KJER SI TI NA POTEZI -> pobarvan, utripajoč preklopnik */
.convo-tab.is-myturn { background: #1f9d57; color: #fff; border-color: #167a43; animation: convo-turn 1.3s ease-in-out infinite; }
.convo-tab.is-myturn.is-active { background: #25b766; color: #042; }
@keyframes convo-turn { 0%,100% { box-shadow: 0 0 0 0 rgba(31,157,87,.55); } 50% { box-shadow: 0 0 0 5px rgba(31,157,87,0); } }
.convo-tab--new { background: #18c4ed; color: #06222b; font-weight: bold; }
.convo-tab--new:hover { background: #38d0f2; }

/* nivo-1 binder: oseba, kjer te v igri čaka poteza, dobi zelen rob (opaziš med drugim pogovorom) */
.chat-tab.has-game-turn { box-shadow: 0 0 0 2px #1f9d57, 0 3px 7px rgba(0,0,0,.22); }

/* ---------- igralna ploskev ---------- */
#game_pane {
	display: none;            /* games.js prikaže ob aktivnem zavihku igre */
	width: 100%;
	box-sizing: border-box;
	background: #11161d;
	border-bottom: 1px solid rgba(0,0,0,.35);
	padding: 8px 10px 10px;
	overflow: hidden;
}
#game_board_area { display: flex; flex-direction: column; align-items: center; gap: 7px; }

/* host za desko (modul igre izriše vanj) + veliki zmagovalni prekriv čez sredino deske */
.game-host-wrap { position: relative; display: inline-block; }
.game-overlay {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(8,12,18,.5); border-radius: 12px; pointer-events: none; animation: game-overlay-in .25s ease-out;
	overflow: hidden; container-type: size; /* napis se veže na velikost DESKE (cqw), ne na viewport; presežek odreže */
}
@keyframes game-overlay-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.game-overlay__text {
	font-size: 28px; font-size: clamp(14px, 13cqw, 38px); /* manjše + skalira z desko; 28px je fallback */
	font-weight: 900; letter-spacing: 1px; text-align: center; max-width: 100%;
	text-shadow: 0 3px 16px rgba(0,0,0,.85); padding: 0 8px; line-height: 1.04; word-break: break-word;
}
.game-overlay--win  .game-overlay__text { color: #39d98a; }   /* zelena ZMAGA */
.game-overlay--lose .game-overlay__text { color: #ff5a5a; }   /* rdeča ZMAGAL JE IME */
.game-overlay--draw .game-overlay__text { color: #cdd6e0; }   /* siva NEODLOČENO / POTEKLA */

.c4-status { color: #dfe6ee; font-size: 14px; text-align: center; min-height: 18px; }
.c4-status .c4-win { color: #39d98a; font-weight: bold; }
.c4-status .c4-lose { color: #ff8e8e; }
.c4-status .c4-turn-you { color: #ffd23f; font-weight: bold; }

/* deska: 7 stolpcev, vsak stolpec 6 celic (od zgoraj navzdol) */
.c4-board {
	display: inline-flex;
	gap: 4px;
	background: #1763c9;
	padding: 6px;
	border-radius: 12px;
	box-shadow: inset 0 2px 8px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
}
.c4-col { display: flex; flex-direction: column; gap: 4px; }
.c4-board.is-myturn .c4-col { cursor: pointer; }
.c4-board.is-myturn .c4-col:hover { background: rgba(255,255,255,.10); border-radius: 8px; }
.c4-cell {
	width: 40px; height: 40px;       /* games.js prepiše glede na prostor */
	background: #0b1016;
	border-radius: 50%;
	box-shadow: inset 0 2px 4px rgba(0,0,0,.65);
	position: relative;
	box-sizing: border-box;
}
.c4-disc { position: absolute; inset: 9%; border-radius: 50%; }
.c4-disc.p1 { background: radial-gradient(circle at 35% 30%, #ff8475, #e23b2e); }
.c4-disc.p2 { background: radial-gradient(circle at 35% 30%, #ffe488, #f3c01f); }
.c4-disc.is-last { box-shadow: 0 0 0 2px rgba(255,255,255,.7); animation: c4-drop .26s ease-out; }
@keyframes c4-drop { from { transform: translateY(-360%); } to { transform: translateY(0); } }

.c4-legend { color: #9fb0c0; font-size: 12px; display: flex; gap: 14px; }
.c4-legend .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }

.c4-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.c4-btn { padding: 6px 13px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; line-height: 1.2; text-decoration: none; display: inline-block; }
.c4-btn--primary { background: #18c4ed; color: #04222b; font-weight: bold; }
.c4-btn--accept  { background: #1f9d57; color: #fff; }
.c4-btn--danger  { background: #3a2630; color: #ff9a9a; }
.c4-btn--ghost   { background: #262c35; color: #c4ccd6; }
.c4-btn:hover { filter: brightness(1.1); }

/* mobilno: tanjša rezina klepeta, manjši robovi */
@media (max-width: 700px) {
	#game_pane { padding: 6px 6px 8px; }
	.convo-tab { padding: 6px 10px; font-size: 12px; }
	.c4-status { font-size: 13px; }
	.c4-legend { font-size: 11px; gap: 10px; }
}

/* gumb zvočnika (zvok obvestil): privzeto izklopljen/zatemnjen, ob vklopu poudarjen */
#ib_snd_toggle { cursor: pointer; }
#ib_snd_toggle i { opacity: .55; transition: color .15s, opacity .15s; }
#ib_snd_toggle:hover i { opacity: .85; }
#ib_snd_toggle.ib-snd-on i { color: #079af4; opacity: 1; }

/* ============ Potapljanje ladjic (battleship) ============ */
.convo-tab__emo { margin-right: 4px; font-style: normal; }

.bs-wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-start; }
.bs-side, .bs-one { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bs-label { font-size: 12px; color: #9fb0c0; }
.bs-grid { display: grid; grid-template-columns: repeat(10, auto); gap: 2px; background: #0c1c2c; padding: 4px; border-radius: 6px; }
.bs-cell { width: 22px; height: 22px; background: #13283d; border: 1px solid #21405e; border-radius: 2px; }
.bs-cell.ship { background: #6b7480; border-color: #828c98; }
.bs-cell.miss, .bs-cell.omiss { background: radial-gradient(circle, #9fb6cc 26%, transparent 30%), #13283d; }
.bs-cell.hit, .bs-cell.ohit { background: radial-gradient(circle, #ff7a6e 30%, #c0392b 34%); border-color: #e0503f; }
.bs-enemy.can-fire .bs-cell[data-fire] { cursor: crosshair; }
.bs-enemy.can-fire .bs-cell[data-fire]:hover { outline: 2px solid #079af4; outline-offset: -1px; background: #1b3a57; }
.bs-setup-btns { display: flex; gap: 8px; margin-top: 8px; }
.bs-legend .bs-key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; margin-right: 3px; }
.bs-legend .bs-key.hit { background: #c0392b; }
.bs-legend .bs-key.miss { background: #13283d; border: 1px solid #21405e; }
.bs-legend .bs-key.ship { background: #6b7480; }

/* izbirnik nove igre */
.gp-pick { padding: 14px 12px; text-align: center; }
.gp-pick__title { font-size: 15px; color: #e6edf3; margin-bottom: 12px; }
.gp-pick__list { display: flex; flex-direction: column; gap: 8px; max-width: 280px; margin: 0 auto; }
.gp-item { font-size: 15px; padding: 12px; }
.gp-pick__hint { font-size: 11px; color: #7c8a99; margin-top: 12px; }

@media (max-width: 700px) {
	.bs-cell { width: 17px; height: 17px; }
	.bs-wrap { gap: 8px; }
}

/* ============ Šnops / 66 (kartna igra) ============ */
.sn-table { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 4px 8px; }
.sn-opp { display: flex; align-items: center; gap: 8px; }
.sn-opp-name { color: #9fb0c0; font-size: 13px; }
.sn-mid { display: flex; align-items: flex-start; justify-content: center; gap: 16px; min-height: 90px; }
.sn-stock, .sn-trump, .sn-played, .sn-stock-talon { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sn-cnt { font-size: 10px; color: #8a98a6; }
.sn-hand { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sn-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.sn-act { font-size: 13px; padding: 8px 10px; }
.sn-legend b { color: #e6edf3; }
.sn-legend .sn-red { color: #ff6b6b; }

/* karta */
.sn-card { width: 60px; height: 84px; background: #fff; border-radius: 7px; color: #1c2430; position: relative; box-shadow: 0 2px 6px rgba(0,0,0,.45); flex: 0 0 auto; }
.sn-card .r { position: absolute; top: 4px; left: 7px; font-size: 21px; font-weight: 700; }
.sn-card .s { position: absolute; bottom: 3px; right: 7px; font-size: 25px; }
.sn-card.red { color: #c0392b; }
.sn-card.play { cursor: pointer; transition: transform .1s, box-shadow .1s; }
.sn-card.play:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,.5); outline: 2px solid #079af4; }
.sn-card.dim { opacity: .38; }
.sn-card.istrump { outline: 2px solid #079af4; outline-offset: 1px; }
.sn-card.back { background: repeating-linear-gradient(45deg, #1d3a5e, #1d3a5e 4px, #16314a 4px, #16314a 8px); border: 1px solid #2a4565; }
.sn-card.empty, .sn-card.slot { background: transparent; border: 1px dashed #2a3f55; box-shadow: none; }
/* mini hrbtne karte (kup pri nasprotniku / talon) */
.sn-pile { display: flex; }
.sn-pile .sn-card { width: 33px; height: 48px; margin-left: -19px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sn-pile .sn-card:first-child { margin-left: 0; }

@media (max-width: 700px) {
	.sn-card { width: 50px; height: 72px; }
	.sn-card .r { font-size: 18px; } .sn-card .s { font-size: 22px; }
	.sn-mid { gap: 10px; }
}

/* ============ Dama (draughts 8×8) ============ */
.dm-board { display: grid; grid-template-columns: repeat(8, auto); width: max-content; margin: 6px auto; border: 3px solid #3a2a1d; border-radius: 4px; overflow: hidden; }
.dm-sq { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; position: relative; } /* velikost prek JS (sizeBoard); 34px je varni fallback */
.dm-sq.light { background: #e9c9a0; }
.dm-sq.dark { background: #7a4d2b; }
.dm-pc { width: 76%; height: 76%; border-radius: 50%; box-shadow: inset 0 -3px 4px rgba(0,0,0,.4); position: relative; }
.dm-pc.p1 { background: radial-gradient(circle at 35% 30%, #ff8a7a, #c0392b); }
.dm-pc.p2 { background: radial-gradient(circle at 35% 30%, #67768a, #1c2530); }
.dm-pc.king::after { content: '♛'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffd86b; font-size: 0.66em; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.8); } /* 0.66em od pisave figure (= velikost celice, nastavi sizeBoard) → krona se skalira z desko */
.dm-sq.sel-start { cursor: pointer; } .dm-sq.sel-start .dm-pc { outline: 3px solid #ffd86b; outline-offset: -2px; }
.dm-sq.selected .dm-pc { outline: 3px solid #079af4; outline-offset: -2px; }
.dm-sq.target { cursor: pointer; }
.dm-sq.target::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32%; height: 32%; border-radius: 50%; background: rgba(7,154,244,.78); box-shadow: 0 0 6px rgba(7,154,244,.6); }
.dm-legend .dm-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: 3px; }
.dm-legend .dm-key.p1 { background: #c0392b; }
.dm-legend .dm-key.p2 { background: #2b3a4a; }

/* ============ Šah (chess) ============ */
.ch-board { display: grid; grid-template-columns: repeat(8, auto); width: max-content; margin: 6px auto; border: 3px solid #3a2a1d; border-radius: 4px; overflow: hidden; }
.ch-sq { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; position: relative; }
.ch-sq.light { background: #e9c9a0; }
.ch-sq.dark { background: #7a4d2b; }
.ch-sq.last { box-shadow: inset 0 0 0 9999px rgba(255,216,107,.26); }
.ch-pc { line-height: 1; -webkit-user-select: none; user-select: none; }
.ch-pc.w { color: #fdfdfd; text-shadow: 0 0 1px #000, 0 0 2px #000, 0 1px 1px rgba(0,0,0,.55); }
.ch-pc.b { color: #14171b; text-shadow: 0 0 1px #000, 0 1px 1px rgba(255,255,255,.22); }
.ch-sq.sel { box-shadow: inset 0 0 0 3px #ffd86b; cursor: pointer; }
.ch-sq.target { cursor: pointer; box-shadow: inset 0 0 0 3px rgba(7,154,244,.62); }
.ch-promo { text-align: center; margin-top: 6px; }
.ch-promo-lbl { font-size: 12px; color: #9fb0c0; margin-right: 6px; }
.ch-promo-btn { font-size: 26px; background: #1a212b; color: #e6edf3; border: 1px solid #3a4654; border-radius: 6px; padding: 1px 9px; cursor: pointer; margin: 0 2px; }
.ch-promo-btn:hover { background: #26313d; }
.ch-legend .ch-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 3px; border: 1px solid #555; }
.ch-legend .ch-key.w { background: #fdfdfd; }
.ch-legend .ch-key.b { background: #14171b; }
@media (max-width: 700px) { .ch-sq { width: 34px; height: 34px; } }

/* ============ kontrola velikosti igre (Mala/Večja/Največja) ============ */
.c4-zoom { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.c4-zoom-lbl { font-size: 12px; color: #8a98a6; }
.c4-zoom-btn { background: #222c38; color: #c4ccd6; border: 1px solid #3a4654; border-radius: 6px; padding: 4px 11px; font-size: 12px; cursor: pointer; }
.c4-zoom-btn:hover { background: #2a3744; }
.c4-zoom-btn.is-on { background: #079af4; color: #fff; border-color: #079af4; font-weight: 700; }

/* preklop logotipa: skrij header → klepet seže do vrha (adjustHeight ga ne odšteje) */
html.ib-logo-hidden #header { display: none !important; }

/* ============ SPOMIN (Memory) – mreža ploščic + 3D flip ============ */
.mem-grid { display: grid; gap: 6px; justify-content: center; margin: 0 auto; }
.mem-card { perspective: 700px; cursor: default; }
.mem-card.can { cursor: pointer; }
.mem-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.4,.2,.2,1); }
.mem-card.up .mem-inner { transform: rotateY(180deg); }
.mem-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; line-height: 1; user-select: none; }
.mem-back { background: linear-gradient(135deg, #7b5cff 0%, #c44dff 60%, #ff6b9d 120%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.20), inset 0 -6px 12px rgba(0,0,0,.18), 0 3px 7px rgba(40,20,80,.30); }
.mem-back::after { content: "?"; color: rgba(255,255,255,.45); font-weight: 900; font-size: 58%; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mem-front { transform: rotateY(180deg); background: #fffdf8; box-shadow: inset 0 0 0 2px rgba(120,90,255,.22), 0 3px 8px rgba(40,20,80,.16); }
.mem-card.can:hover .mem-back { filter: brightness(1.08); }
.mem-card.can:hover .mem-inner { transform: translateY(-2px); }
/* ujet par: kratko se pokaže (pop), nato ZBLEDI v rahlo obarvano polje (barva LASTNIKA) → razčisti desko */
.mem-card.matched { animation: memPop .4s ease; }
.mem-card.matched .mem-front {
	transition: background .55s ease .9s, box-shadow .55s ease .9s;
}
.mem-card.matched .mem-front, .mem-card.matched.mem-own1 .mem-front, .mem-card.matched.mem-own2 .mem-front { text-shadow: 0 1px 2px rgba(0,0,0,.35); }  /* emoji ostane viden na polni barvi */
.mem-card.matched.mem-own1 .mem-front { background: #7b5cff; box-shadow: inset 0 0 0 2px #5a3ec0, 0 2px 8px rgba(123,92,255,.45); }   /* igralec 1 = POLNA VIJOLIČNA (čigav par) */
.mem-card.matched.mem-own2 .mem-front { background: #ff5a96; box-shadow: inset 0 0 0 2px #d63a73, 0 2px 8px rgba(255,90,150,.45); }   /* igralec 2 = POLNA ROZA (čigav par) */
.mem-card.matched:not(.mem-own1):not(.mem-own2) .mem-front { background: #eafff1; box-shadow: inset 0 0 0 2px rgba(52,211,153,.55); } /* star board brez lastnika */
/* TRENUTNO odkrita (še ne ujeta) ploščica UTRIPA → jasno vidiš, kaj je odprl soigralec */
.mem-card.up:not(.matched) .mem-front { animation: memUpGlow 1.3s ease-in-out infinite; }
@keyframes memUpGlow {
	0%,100% { box-shadow: inset 0 0 0 2px rgba(245,158,11,.7), 0 0 0 2px rgba(245,158,11,.18), 0 3px 8px rgba(40,20,80,.16); }
	50%     { box-shadow: inset 0 0 0 3px rgba(245,158,11,1), 0 0 0 5px rgba(245,158,11,.36), 0 3px 13px rgba(40,20,80,.24); }
}
.mem-card.up.mem-anim-in .mem-inner { animation: memFlipIn .42s cubic-bezier(.4,.2,.2,1) both; }
.mem-card.mem-anim-out .mem-inner { animation: memFlipOut .42s cubic-bezier(.4,.2,.2,1) both; }
@keyframes memFlipIn  { from { transform: rotateY(0deg); }   to { transform: rotateY(180deg); } }
@keyframes memFlipOut { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } }
@keyframes memPop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
.mem-legend { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13.5px; }
.mem-legend .mem-sc { padding: 3px 10px; border-radius: 999px; }
.mem-legend .mem-sc1 { background: rgba(123,92,255,.12); color: #5a3ec0; }
.mem-legend .mem-sc2 { background: rgba(255,107,157,.14); color: #b03a6a; }
.mem-legend .mem-sc b { font-size: 15px; }
.mem-legend .mem-vs { font-size: 11px; color: #8b96a8; text-transform: uppercase; letter-spacing: .06em; }
/* izbira velikosti Spomina v ngames invite panelu */
.ng-p-msizes { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 4px; }
.ng-msz { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #d6def0; border-radius: 10px; padding: 8px 13px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ng-msz:hover { background: rgba(255,255,255,.12); }
.ng-msz.on { background: linear-gradient(135deg,#7b5cff,#c44dff); border-color: transparent; color: #fff; }

/* ===== Gledanje ostalih iger v živo (seznam + read-only okno) ===== */
.ng-p-sec-live { display: flex; align-items: center; gap: 7px; }
.ng-p-sec-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e3392e; animation: ngLive 1.6s infinite; }
@keyframes ngLive { 0% { box-shadow: 0 0 0 0 rgba(227,57,46,.55); } 70% { box-shadow: 0 0 0 7px rgba(227,57,46,0); } 100% { box-shadow: 0 0 0 0 rgba(227,57,46,0); } }
.ng-op-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.045); margin-bottom: 5px; transition: background .15s; }
.ng-op-row:hover { background: rgba(255,255,255,.11); }
.ng-op-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.ng-op-main b { font-size: 13.5px; }
.ng-op-who { font-size: 11.5px; color: #aeb8cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-op-vs { color: #7b86a0; font-style: italic; }
.ng-op-dur { flex: 0 0 auto; font-size: 11.5px; color: #d6def0; background: rgba(255,255,255,.08); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ng-spec { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: #ece2ff; background: linear-gradient(135deg, rgba(123,92,255,.26), rgba(196,77,255,.20)); border: 1px solid rgba(160,120,255,.42); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.ng-spec-dur { color: #ffd2e6; font-weight: 800; }
/* Rezultati gumb v igralnem panelu */
.ng-p-results { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 8px 0 6px; padding: 9px 12px; border-radius: 11px; background: linear-gradient(135deg, #f6c344, #f0a020); color: #4a2e00 !important; font-weight: 800; font-size: 13.5px; text-decoration: none; box-shadow: 0 4px 12px rgba(240,160,32,.28); }
.ng-p-results:hover { filter: brightness(1.06); }
.ng-op-watch { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #ffd2a0; background: rgba(255,180,80,.16); border-radius: 999px; padding: 2px 7px; margin-right: 4px; white-space: nowrap; }
.ng-watchers { text-align: center; font-size: 12px; color: #ffb86b; margin-bottom: 6px; font-weight: 700; }
/* arhiv + nedavno končane igre */
.ng-p-links { display: flex; gap: 8px; margin: 8px 0 6px; }
.ng-p-links .ng-p-results { flex: 1 1 0; margin: 0; box-shadow: none; font-size: 12.5px; padding: 9px 8px; }
.ng-p-archive { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border: 0; border-radius: 11px; cursor: pointer; background: rgba(120,150,235,.18); color: #cfe0ff; font-weight: 800; font-size: 12.5px; }
.ng-p-archive:hover { background: rgba(120,150,235,.30); }
.ng-p-done { opacity: .92; }
.ng-p-fin { flex: 0 0 auto; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ng-p-fin.win { color: #6ff0a0; background: rgba(40,200,120,.16); }
.ng-p-fin.loss { color: #ff9a8f; background: rgba(220,90,70,.16); }
.ng-p-fin.draw { color: #ffe08a; background: rgba(210,180,70,.16); }
.ng-arch-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); margin-bottom: 5px; }
.ng-arch-row.mine { background: rgba(123,92,255,.14); }
.ng-arch-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ng-arch-main b { font-size: 13px; color: #eef1f8; }
.ng-arch-who { font-size: 11.5px; color: #aeb8cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-arch-who .ng-op-vs { color: #7b86a0; font-style: italic; margin: 0 2px; }
.ng-arch-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ng-arch-win { font-size: 11.5px; font-weight: 800; color: #cdd6e8; }
.ng-arch-win.me { color: #ffd86b; }
.ng-arch-win.draw { color: #b9a94a; }
.ng-arch-dur { font-size: 10.5px; color: #8a93a6; }
/* barve/strani igralcev v pregledu igre (kdo je beli/črni ...) */
.ng-sides { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; font-size: 12px; color: #cdd6e8; margin-bottom: 6px; }
.ng-side { display: inline-flex; align-items: center; gap: 5px; }
.ng-side b { font-weight: 800; color: #fff; }
.ng-side-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.ng-side-sep { color: #6b7488; }
/* Križci-krožci (tic-tac-toe) */
.ttt-board { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: linear-gradient(135deg, #2a2440, #3a2f5e); padding: 8px; border-radius: 14px; box-shadow: 0 6px 18px rgba(20, 10, 40, .35); }
.ttt-cell { display: flex; align-items: center; justify-content: center; background: #fffdf8; border-radius: 10px; line-height: 1; font-weight: 900; user-select: none; box-shadow: inset 0 0 0 2px rgba(120, 90, 255, .18); }
.ttt-board.is-myturn .ttt-cell.can { cursor: pointer; transition: background .12s, transform .08s; }
.ttt-board.is-myturn .ttt-cell.can:hover { background: #eef0ff; transform: translateY(-1px); }
.ttt-cell.is-last { box-shadow: inset 0 0 0 3px #f59e0b; }
.ttt-mark.x { color: #e23b2e; }
.ttt-mark.o { color: #2a7de1; }
.ttt-key { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-weight: 900; margin-right: 4px; }
.ttt-key.x { color: #e23b2e; }
.ttt-key.o { color: #2a7de1; }
/* varovalo: če je deska višja od okna (velike povečave), se igralno območje pomika znotraj */
#game_board_area { max-height: calc(100vh - 90px); overflow-y: auto; overflow-x: hidden; }