/* ==========================================================
   Our stars align – Postbit Outplay (Sternenbuehne rechts)
   Alle Klassen beginnen mit op-  (kollidiert nicht mit den alten
   .postbit_*_outplay-Regeln, die du loeschen kannst).
   An dein Postbit-/Theme-CSS anhaengen.
   ========================================================== */
@import url(https://fonts.googleapis.com/css2?family=Italiana&family=Archivo:wght@400;600;800&display=swap);

.op-post{
	--l1:#e1daf0; --l2:#bfcce4; --ink:#1b2a36; --dk:#2d2a63; --navy:#1f3366; --muted:#5a6877; --tit:#1f1d4f;
	--glass:rgba(255,255,255,.62); --line:rgba(255,255,255,.8);
	--stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cpolyline points='110,215 160,150 205,178 250,100 292,132' fill='none' stroke='white' stroke-opacity='.45' stroke-width='1.4'/%3E%3Cg fill='white' fill-opacity='.5'%3E%3Ccircle cx='110' cy='215' r='2.6'/%3E%3Ccircle cx='160' cy='150' r='2.6'/%3E%3Ccircle cx='205' cy='178' r='2.6'/%3E%3Ccircle cx='250' cy='100' r='2.6'/%3E%3Ccircle cx='292' cy='132' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
	--stripes:repeating-linear-gradient(135deg,rgba(255,255,255,.38) 0 14px,rgba(255,255,255,.12) 14px 28px),linear-gradient(150deg,var(--l1),var(--l2));
	--heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z' fill='%23b0405a'/%3E%3C/svg%3E");
	box-sizing:border-box;
	display:grid;
	grid-template-columns:minmax(0,1fr) 230px;
	gap:12px;
	margin:0 0 20px;
	padding:14px;
	background:linear-gradient(180deg,#e8edf6,#dbe3f0);
	border:1px solid rgba(255,255,255,.8);
	color:var(--ink);
	font-family:'Archivo',system-ui,sans-serif;
	font-size:15px;
	line-height:1.55;
}
.op-post *{box-sizing:border-box}
.op-main{grid-column:1;grid-row:1;min-width:0;display:flex}
.op-side{grid-column:2;grid-row:1}
.op-likes{grid-column:1/-1;grid-row:2}

/* ---------- Beitrag ---------- */
.op-msg{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;padding:16px 24px 20px;background:rgba(255,255,255,.72);border:1px solid var(--line)}
.op-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
.op-head .float_right{float:none!important;order:-1;display:flex;align-items:center;gap:8px;vertical-align:baseline!important}
.op-head .float_right strong{font-weight:400}
.op-head .float_right strong a{display:inline-block;padding:3px 14px;background:var(--navy);color:#fff!important;font:400 20px/1.2 'Italiana',serif;letter-spacing:.08em;text-decoration:none}
.op-head .float_right input.checkbox{margin:0!important}
.op-meta{flex:1;min-width:0;font:600 11px/1.5 'Archivo',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.op-meta .post_edit{display:block;margin-top:2px;font-weight:400;font-style:italic;text-transform:none;letter-spacing:0;font-size:11px}
.op-meta .post_edit a{color:var(--navy)}
.op-post .post_body{
	padding:6px 4px 4px;
	text-align:justify;hyphens:none;-webkit-hyphens:none;-ms-hyphens:none;
	font-size:14px;line-height:1.75;color:var(--ink);
}
.op-post .post_body *{hyphens:none;-webkit-hyphens:none;-ms-hyphens:none}

/* ---------- Buehne rechts ---------- */
.op-side{
	/* KEIN position:relative: das MyBB-Popup-Menue (Bearbeiten, Autor aendern) rechnet mit Seitenkoordinaten */
	display:flex;flex-direction:column;align-items:center;gap:12px;
	padding:44px 18px 20px;text-align:center;
	border:1px solid var(--line);
	/* dunkelblaue Ecke oben rechts als Verlauf (statt Pseudo-Element) */
	background:linear-gradient(225deg,var(--navy) 0 21px,transparent 21px),var(--stars) right bottom/340px auto no-repeat, linear-gradient(150deg,var(--l1),var(--l2));
}
.op-ic{width:112px;height:112px;border:4px solid rgba(255,255,255,.75);overflow:hidden;flex:none}
.op-ic img{display:block;width:100%;height:100%;object-fit:cover}
.op-player{font:400 26px/1.1 'Italiana',serif;letter-spacing:.07em;text-transform:uppercase;color:var(--tit);-webkit-text-stroke:.8px var(--tit);word-break:break-word}
.op-player a{color:inherit;text-decoration:none}
.op-ttl{font:800 10px 'Archivo',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--dk)}
.op-chara{font:600 11px 'Archivo',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dk)}
.op-chara a{color:var(--navy);font-weight:800;text-decoration:none}

/* ---------- Buttons: runde Glaskreise, ohne Hover-Effekt ---------- */
.op-tools{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:auto;padding-top:8px}
.op-tools>a,.op-tylbtn>a,.op-author>span{
	display:grid!important;place-items:center;
	width:33px;height:33px;margin:0;padding:0;
	border-radius:50%;border:1px solid var(--line);
	background:var(--glass)!important;color:var(--navy)!important;
	font-size:14px!important;line-height:1;text-decoration:none;cursor:pointer;
	transition:none;box-shadow:none;
}
.op-tools>a:hover,.op-tylbtn>a:hover,.op-author>span:hover{background:var(--glass)!important;color:var(--navy)!important}
.op-tools a span,.op-tylbtn a span{display:grid;place-items:center;font-size:0}
.op-tools a i,.op-tylbtn a i{font-size:14px;color:inherit}
.op-tylbtn,.op-author{display:contents}
.op-author:empty{display:none}
.op-author>span{font-size:10px!important}
/* Like gesetzt (Entfernen-Link des Plugins): Herz rot auf Weiss */
.op-tylbtn a[href*="action=del"],.op-tylbtn a[href*="remove"]{background:#fff!important;color:#b0405a!important}

/* ---------- Danke-Zeile ---------- */
.op-likes{padding:10px 18px;background:var(--stripes);border:1px solid var(--line)}
.op-likes .tyllist{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0;padding:0;border:0;background:none}
.op-likes .tyllist::before{
	content:"Gefällt";order:-1;
	padding-left:20px;background:var(--heart) left center/14px no-repeat;
	font:800 10px 'Archivo',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dk);
}
.op-likes .tyllist>b{display:none}
.op-likes .tyllist>span{font-size:0;display:block}
.op-likes .tyllist oswald{display:flex;flex-wrap:wrap;gap:6px}
.op-likes .tyllist a{
	display:inline-block;padding:3px 12px;background:var(--glass);border:1px solid var(--line);
	font:600 12px/1.5 'Archivo',sans-serif!important;letter-spacing:.06em;color:var(--navy);text-decoration:none;
}
.op-likes .tyllist a:hover{text-decoration:underline}

/* Popup-Menues (Bearbeiten, Autor aendern) ueber allem */
.op-post .popup_menu{z-index:1000}

/* ---------- schmale Bildschirme ---------- */
@media (max-width:760px){
	.op-post{grid-template-columns:1fr}
	.op-main,.op-side,.op-likes{grid-column:1;grid-row:auto}
	.op-side{order:-1;padding-top:40px}
}