body, img, tr, td{margin:0; padding:0}

body{font-family:Helvetica,sans-serif; font-size:.9em; text-align:left;background:#fbf6dd url(/assets/bg.png) repeat top left; color:#444}
/* text size from the display settings (layout.html.twig sets the class); body and nearly all text sizes are em/% of this */
html.fs1{font-size:112.5%}
html.fs2{font-size:125%}
h1,h2,h3{margin:0; padding:0; font-size:100%}
p{margin-top:0}
img{border:none}
#headbuffer{width:100%; background-color:#000}
#foot{margin-top:1em; border-top:1px solid #000; text-align:right}

#head, #cont{margin:0 auto;max-width:728px;padding:0px 5px}
#head {display:flex;align-items:center;height:48px;padding:0 0 0 50px;background:url(/assets/style/head-logo.webp) no-repeat 0 50%/50px 40px;color:#fff;overflow:hidden}
/* The logged-out front page's bar has no icons or title: it keeps its old thin height. */
#head.solid {height:23px}
/* The home link covers the logo in the bar's left padding, so the title does not move. */
#head a.logo {position:relative;flex:none;width:50px;height:48px;margin-left:-50px;-webkit-tap-highlight-color:transparent}
#head a.logo:hover, #head a.logo:focus {background:none}
#head a.logo:active {background:rgba(255,255,255,.15)}
#head a.logo:focus-visible {outline:2px solid #f3b5f4;outline-offset:-4px}
/* A long title wraps to a second line, which still fits the bar; only what is beyond that is cut. */
#head h1 {flex:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.15;overflow-wrap:anywhere;font-weight:normal}
/* Header icons: each is a full-height button at least 44px wide with no gap between them, so a tap that misses an icon still lands on the nearest one. */
#head nav {display:flex;flex:none;height:48px;margin:0 2px 0 auto}
#head nav a, #head nav .wait {display:flex;align-items:center;justify-content:center;min-width:44px;height:48px;padding:0 3px;box-sizing:border-box;text-decoration:none;-webkit-tap-highlight-color:transparent}
#head nav a:hover, #head nav a:focus {background:none}
#head nav a:focus-visible {outline:2px solid #f3b5f4;outline-offset:-4px}
#head nav a:active .tile {transform:translateY(1px);filter:brightness(.85)}
#head nav .wait {color:#888;font-size:.85em}
/* The old sprite icons redrawn: a white tile with a grey frame, pink when something is new. */
#head .tile {display:flex;align-items:center;gap:2px;height:26px;padding:0 5px;box-sizing:border-box;background:#fff;border:1.5px solid #888;border-radius:5px;color:#000;font-size:15px;line-height:1}
#head .tile.hot {background:#f9a3a3;border-color:#c66}
#head .tile svg {display:block;height:18px;width:auto}
#head .tile .mp, #head .tile .mg {display:none}
#head .tile.p .mp, #head .tile.g .mg {display:block}
#head .tile .n {font-weight:bold;font-size:14px}
#head .tile .n:empty {display:none}
#head .tile.kred {font-size:14px}
#head .tile.kred b {color:#090;font-size:17px}
#head .tile.kred i {font-style:normal;color:#c00}

.spr {
    background: url(/assets/style/spr.png) no-repeat top left;
}
.x-top{ background-position: 0 -512px; width: 14px; height: 14px; display: inline-block; } 

#cont{text-align:center; background-color:transparent;word-wrap:break-word}
.solid{background:black !important; padding-left:0px !important}
a, a:visited, .postlink button {text-decoration:underline; color:#000}
/* A POST form that looks and flows like a plain link. */
form.postlink {display:inline; margin:0}
.tagbox {margin-bottom:1em}
.newcomments {margin-bottom:2em}
/* white on red reads on the light and the dark style alike */
.newbadge {background:#c00; color:#fff; font-weight:bold; font-size:.85em; padding:0 4px; border-radius:3px}
.postlink button {font:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer}
/* Touch screens keep :hover (and :focus) on a tapped link until the next tap, so there the grey shows only while pressed or on keyboard focus. */
a:active, a:focus-visible, .postlink button:active, .postlink button:focus-visible {text-decoration:underline; background-color:#777; color:#eee !important}
@media (hover: hover) {
    a:hover, a:focus, .postlink button:hover, .postlink button:focus {text-decoration:underline; background-color:#777; color:#eee !important}
}
a.img:hover, a.img:focus, a.img:active{background-color:transparent !important}
.levelified {background: transparent url(/assets/level/progress/0.png) scroll no-repeat right center;padding: 0px 105px 0px 0px;text-decoration: none !important;color: #600 !important;font-style: italic;}
.levelified:hover, .levelified:focus, .levelified:active {text-decoration:none; background-color:transparent; color:#000 !important}
.si a, .si a:visited {color:#555}
.si a:hover, .si a:focus {background-color:#555; color:#eee}
input, select, textarea{border:1px solid #000; color:#444; margin-bottom:.2em; background-color:#eee}
/* Focus lightens the field instead of the browser's blue ring. */
input[type=text]:focus, input[type=password]:focus, input:not([type]):focus, select:focus, textarea:focus {outline:none; background-color:#fff}
/* Filled buttons share one colour; chat-dark.css overrides these. */
:root {--btn:#c0c; --btn-fg:#fff; --btn-hover:#a0a; --btn-active:#808}
input[type=submit]{background-color:var(--btn); color:var(--btn-fg)}
#notice{background-color:#F2DEDE; border:1px solid #EED3D7; color:#B94A48; display:block; padding:2px 5px; text-align:left; margin-bottom:2px;}
#notice:empty {display:none}
#info{background-color:#D9EDF7; border:1px solid #BCE8F1; color:#3A87AD; display:block; padding:2px 5px; text-align:left; margin-bottom:2px;}
.top{margin-left:1em}
.a-c{text-align:center}
#clogo{width:100%; background-color:#000; text-align:center}
#slogan{text-align:center; color:#f3b5f4; cursor:default; padding-bottom:.5em}
#slogan strong{font-size:140%}
#slogan span{font-size:smaller; vertical-align:top; color:#fff}
.panel{margin-bottom:1em; text-align:left}
.panel .ti{font-weight:bold; color:#000}
.btop{border-top:1px dashed #f3f; margin:1em 0}
.bbottom{border-bottom:1px dashed #f3f}
.ikonok2 img{margin-left:3px}
/* Touch: taller lines, so stacked text links are at least 24px apart to tap; the menu icons become 48px targets with no gap between them;
   form fields at 16px so phones do not zoom in on focus. With a mouse the pages stay as dense as before. */
@media (pointer: coarse) {
    body {line-height:1.7}
    .ikonok2 a {display:inline-block; padding:4px; vertical-align:top}
    .ikonok2 img {display:block; margin-left:0}
    input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input:not([type]), select, textarea {font-size:16px}
}
.fiu, a.fiu:visited {color: #039;}
a.fiu:hover {background-color: #039; color: #eee}
.fiu-offline, a.fiu-offline:visited {color: #80AAFF;}
a.fiu-offline:hover {background-color: #80AAFF; color: #eee}
.lany, a.lany:visited {color: #f33;}
a.lany:hover {background-color: #f33; color: #eee}
.lany-offline, a.lany-offline:visited {color: #f99;}
a.lany-offline:hover {background-color: #f99; color: #eee}
#chatPanel { margin: 5px 0px; text-align:left; }
#chatPanel .ic a:hover, #chatPanel .ic a:focus { background:none; }
.leftMarg { margin-left: .5em;}
#chatPanel a img {padding: 0px 5px;}

/* list tables (table.t) and help article tables: translucent rules/stripes so the page texture shows through; chat-dark.css swaps the tints */
table.t, .sugo table {border-collapse:collapse; text-align:left; color:inherit}
.sugo table {margin:.5em 0 1em; display:block; max-width:100%; overflow-x:auto} /* scrolls sideways on narrow screens */
table.t th, table.t td, .sugo th, .sugo td {padding:.4em .8em; text-align:left; vertical-align:top; border-bottom:1px solid rgba(0,0,0,.12)}
table.t thead tr > *, .sugo thead tr > * {background:#006; color:#fff; font-weight:bold; border-bottom:0}
table.t-red thead tr > *, table.chat thead tr > * {background:#e99; color:#000}
table.t thead tr > .bg-red {background:#c99}
.bg-red {background-color:#c99; color:#000;}
table.t thead a {color:#fff;}
table.t-red thead a, table.chat thead a {color:#000}
table.t thead tr:first-child > :first-child, .sugo thead tr:first-child > :first-child {border-top-left-radius:4px}
table.t thead tr:first-child > :last-child, .sugo thead tr:first-child > :last-child {border-top-right-radius:4px}
table.t tbody tr:nth-child(even) > td, .sugo tbody tr:nth-child(even) > td {background:rgba(0,0,0,.04)}
table.t tbody tr:hover > td, .sugo tbody tr:hover > td {background:rgba(0,0,102,.07)}
a.black, a.black:visited{color:#000}
a.black:hover, a.black:focus{background-color:#777; color:#eee}

table.chat {margin: 0 auto;}
table.chat thead > tr {background-color:#e99;}

div.colors {overflow:auto; width: 100%;}
div.colors a {width:22px; height:10px; display:block; float:left; margin:0 .6em .5em 0}
div.colors .active {border: 1px dotted black;}
div.colors .reset {background-color: #444;}
div.colors.picker {text-align:center}
div.colors label {display:inline-block; margin:0 .2em .4em; padding:2px; cursor:pointer}
div.colors label img {display:block; width:33px; height:15px}
div.colors input {position:absolute; opacity:0}
div.colors input:checked + img {outline:2px solid currentColor; outline-offset:1px}
/* The send row (recipient + button) is stretched to the textarea's width. */
div.tree { width:100px; text-align:center; float:left; margin:0px 5px 5px 0px; font-size:90%}
div.tree img { border:0px;}

.b {font-weight:bold;}
.small {font-size:80%}
.text-center {text-align:center}
.l {text-align:left !important}
.muted, a.muted, .postlink button.muted { color: #999999;}
.text-warning, a.text-warning {color: #c09853;}
.text-error, a.text-error, .postlink button.text-error {color: #b94a48;}
.text-info, a.text-info {color: #3a87ad;}
.text-success, a.text-success {color: #468847;}
.margin-reset {margin:0 !important;}

.zebra {padding-bottom:1em;color:#444;}
.zebra-even {background-color:#eee;}
.zebra-odd {background-color:#d0d0d0;}

.dtable {display:table}
.dtable .column {width: 230px; padding-right:20px; float:left; text-align:left;}
.dtable .column-full {width: 100% !important}
.dtable .column-auto {width: auto !important}
.center {margin:0 auto}
.clear {clear:both}

.content-bar {font-size:80%; margin-bottom:1.5em}
.content-bar div, .content-bar form {display:inline; margin-left:5px}

table.forums {margin:1em auto}
table.forums td {padding-left:1em}
table.forums td a {display:block}
.sticky {background: #FFFEA1 url('/assets/pic/f/sticky.gif') no-repeat scroll 2px 1px; margin-bottom: 0.5em; padding-left: 1.2em; color:#000;}

img.dotted {border:1px dotted #c09853}

.flag {
	width: 16px;
	height: 11px;
	background:url(/assets/flags/flags.png) no-repeat
}

.flag.flag-de {background-position: -16px 0}
.flag.flag-gb {background-position: -32px 0}
.flag.flag-hu {background-position: 0 -11px}
.flag.flag-ro {background-position: -16px -11px}
.flag.flag-sk {background-position: -32px -11px}

.first {margin-right: 10px}
.msg {background-color:#ddd; display:block; padding:0px; margin:0px; color:#000;}
.indent {margin-left:1em}
.text-gray {color:gray}
/* Touch screens keep :hover on a tapped link; the chat bar's htmx links never reload the page to clear it. */
@media (hover: none) {
    #chatbar a:hover {background-color:transparent; color:#000 !important}
}
/* Fills up under the refresh time until the next poll. The oob swap replaces the element on every poll, which restarts the animation in step with the htmx timer.
   The bar is a real text underline on transparent no-break spaces, so it sits at the same height and weight as the chat bar links' underline. */
#chatbar a {text-decoration-thickness:1px; text-underline-offset:2px}
/* The send line has its own row above the link bar: swatch, recipient chip and field touch as one control, the send button stands apart; the field shrinks instead of wrapping.
   The form anchors the picker, so it floats under the whole line. 16px text keeps phones from zooming into the field. */
#chatline {display:flex; align-items:stretch; height:44px; position:relative; margin:8px 0 0}
#chatline input[type=text] {flex:1; min-width:0; width:auto; height:100%; box-sizing:border-box; margin:0; padding:0 10px; border:1px solid rgba(0,0,0,.35); border-radius:6px; background:#fff; color:#000; font:inherit; font-size:16px}
#chatline button {flex:none; margin-left:6px; padding:0 14px; border:0; border-radius:6px; background:var(--btn); color:var(--btn-fg); font:inherit; font-weight:bold; cursor:pointer; -webkit-tap-highlight-color:transparent}
#chatline button:hover, #chatline button:focus-visible {background:var(--btn-hover)}
#chatline button:active {background:var(--btn-active)}
/* The colour swatch is a square button as tall as the field; it opens the picker as a panel under the line, over the list, so the list does not move. */
#chatline details.chatcolors {flex:none; width:40px}
/* The recipient chip sits between swatch and field; a long nick is cut short, its title keeps it whole. */
#chatline #chatto {display:flex; align-items:center; flex:0 0 auto; box-sizing:border-box; max-width:8em; padding:0 0 0 8px; border:1px solid var(--line, rgba(0,0,0,.35)); border-right:none; background:#f3d6f3; color:#606; white-space:nowrap}
#chatline #chatto[hidden] {display:none}
/* Only the joined control's outer corners are rounded; the recipient chip reacts live to being shown or hidden. */
#chatline > #chatto:first-child {border-radius:6px 0 0 6px}
#chatline details.chatcolors ~ input[type=text], #chatline #chatto:not([hidden]) + input[type=text] {border-radius:0 6px 6px 0}
#chatline #chatto span {overflow:hidden; text-overflow:ellipsis; min-width:0; margin-left:.25em}
/* The × fills the chip's height and reaches its edge, so it is an easy tap. */
#chatline #chatto a {flex:none; align-self:stretch; display:flex; align-items:center; padding:0 10px; text-decoration:none; font-size:1.2em}
#chatline #chatto a, #chatline #chatto a:visited {color:#606}
#chatline #chatto a:hover, #chatline #chatto a:focus {background:none; color:#606 !important}
/* The link bar: equal cells with thin dividers, like the room list's tabs. */
.chatnav {display:flex; margin:8px 0 6px; border:1px solid rgba(0,0,0,.15); border-radius:6px; overflow:hidden}
.chatnav a {flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:40px; padding:0 4px; color:#444; text-decoration:none; white-space:nowrap; -webkit-tap-highlight-color:transparent}
.chatnav a + a {border-left:1px solid rgba(0,0,0,.15)}
.chatnav a[hidden] {display:none}
/* The staff-only ghost cell takes only its letter's width. */
.chatnav a.ghost {flex:none; padding:0 12px}
/* the raktár button where a kör a szobának can be bought: a corner mark that takes no width */
.chatnav a.round {position:relative}
.chatnav a.round::after {content:"🍻"; position:absolute; top:1px; right:2px; font-size:10px; line-height:1}
/* The smiley list cell is just its little :) image. */
.chatnav a.pofi {flex:none; padding:0 10px}
/* In the ghost view the G is lit; it leads back to the room. */
#chatbar .chatnav a.ghost.on, #chatbar .chatnav a.ghost.on:hover, #chatbar .chatnav a.ghost.on:focus {background:rgba(204,0,204,.07); color:#c0c !important}
#chatbar .chatnav a:hover, #chatbar .chatnav a:focus, .roomfoot .chatnav a:hover, .roomfoot .chatnav a:focus {background:rgba(0,0,0,.05); color:#444 !important}
#chatbar .chatnav a:active, .roomfoot .chatnav a:active {background:rgba(0,0,0,.1)}
.chatnav #chatrefreshed {color:#999}
/* The chat lines: one row each, newest first, with thin separators; whispers are tinted and marked, robot-like lines (items, entries) small and grey. */
.msgs {list-style:none; margin:0; padding:0; text-align:left; border-top:1px solid rgba(0,0,0,.1)}
.post {display:flex; align-items:flex-start; gap:6px; padding:7px 4px; border-bottom:1px solid rgba(0,0,0,.08); line-height:1.35}
.post .body {flex:1; min-width:0; overflow-wrap:anywhere}
.post a.nick {font-weight:bold; text-decoration:none}
.post time {flex:none; padding-top:2px; font-size:.75em; color:#aaa}
.post .postlink {display:flex}
.post .postlink button {display:flex; align-items:center; justify-content:center; min-width:32px; height:28px; margin:-4px 0; border-radius:6px; background:rgba(0,0,0,.06); color:#888; text-decoration:none; font-size:.85em}
.post .postlink.mod button {color:#b94a48}
/* The × glyph is small; both delete buttons draw it larger. */
.post .postlink.del button {font-size:1.3em}
.post .postlink button:hover, .post .postlink button:focus {background:rgba(0,0,0,.12); color:#444 !important}
.post.me .body {font-style:italic; color:#777}
.post.sys {padding-left:14px; font-size:.82em; color:#888}
.post.sys .ico, .post.modpost .ico, .post.qmaster .ico {flex:none; width:14px; text-align:center}
.post.sys .replay {white-space:nowrap}
/* Szobaesemény konfetti (chat_list.html.twig): the pieces fall over the whole page, each in its own lane and pace;
   the delay minus --ev-at (the seconds already gone) lets each poll's redraw go on where the last one was. */
.confetti {position:fixed;inset:0;z-index:50;overflow:hidden;pointer-events:none}
.confetti i {position:absolute;top:-20px;width:8px;height:14px;border-radius:2px;background:#e33;animation:confetti-fall var(--t) linear infinite;animation-delay:calc(var(--ev-at) - var(--o))}
.confetti i:nth-child(6n+2) {background:#f90}
.confetti i:nth-child(6n+3) {background:#fd0}
.confetti i:nth-child(6n+4) {background:#3b5}
.confetti i:nth-child(6n+5) {background:#39f}
.confetti i:nth-child(6n) {background:#c0c}
@keyframes confetti-fall {to {transform:translate(var(--x), calc(100vh + 40px)) rotate(720deg)}}
@media (prefers-reduced-motion: reduce) {.confetti {display:none}}
/* Villanyoltás: the list goes dark for the minute, in both themes; the handler hides the names (LightsOut). */
#chatlist.ev-dark {background:#0c0c12; box-shadow:0 0 0 6px #0c0c12; border-radius:2px; color:#889}
#chatlist.ev-dark .post {border-color:rgba(255,255,255,.07)}
#chatlist.ev-dark .post .body, #chatlist.ev-dark .post.sys, #chatlist.ev-dark .post time {color:#778}
#chatlist.ev-dark .nick, #chatlist.ev-dark a {color:#556 !important}
#chatlist.ev-dark .post .postlink button {background:rgba(255,255,255,.06); color:#778}
/* Visszhang (parts/chat_echo.html.twig): the text's start comes back twice, smaller and fainter. No fade-in: each poll would replay it. */
.post .echo {opacity:.5; font-size:.92em}
.post .echo.e2 {opacity:.25; font-size:.85em}
.post .roomtag {flex:none; max-width:35%; padding-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75em; color:#888; text-decoration:none}
.post .jailtag {font-size:.75em; color:#b94a48}
.post .hidtag {flex:none; padding-top:2px; font-size:.75em; color:#b94a48}
/* Cella: the BVIF notice box above the list, hidden while empty. */
#bvif {margin:2px 0 4px; padding:3px 6px; border:1px solid #c8ccd0; background:#f4f5f6; color:#444; font-size:.9em}
#bvif:empty {display:none}
#bvif .head {display:block; font-size:.75em; letter-spacing:.05em; color:#777}
#bvif p {margin:2px 0 0}
.post.qmaster .nick {color:#408c40}
.post.pv {padding-left:6px; border-left:3px solid #c0c; background:rgba(204,0,204,.07)}
.post.pv .dir {font-size:.85em; color:#a0a}
.post.modpost {background:rgba(185,74,72,.06)}
.post .body img {max-width:100%}
.msgs .empty {padding:14px 4px; color:#999}
/* Paging through older lines: full-width buttons above and below the list. */
#chatlist a.pager {display:block; margin:6px 0; padding:12px; border-radius:6px; background:rgba(0,0,0,.06); color:#444; text-align:center; text-decoration:none; -webkit-tap-highlight-color:transparent}
#chatlist a.pager:hover, #chatlist a.pager:focus {background:rgba(0,0,0,.1); color:#444 !important}
#chatlist a.pager:active {background:rgba(0,0,0,.15)}
/* The room's foot: a link bar like the top one, then a quiet owner line. */
.roomfoot {margin-top:8px}
.roomowner {margin:0 0 4px; padding:0 4px; font-size:.85em; color:#888; overflow-wrap:anywhere}
.roomowner b {color:#444}
/* The quiz card under the chat bar: the round's question, the tip buttons and the last round's result or the winners. Quiet: a thin frame, no fill. */
.quizcard {margin:6px 0 8px; padding:8px 10px; border:1px solid rgba(0,0,0,.15); border-radius:6px; color:#444; text-align:left}
.quizcard header {font-size:.85em; color:#888}
.quizcard header b {color:#408c40}
.quizcard.closed header b {color:#b94a48}
.quizcard .q {margin:4px 0 0}
.quizcard p {margin:4px 0 0}
.quizcard .tips {display:flex; gap:6px; margin-top:8px}
.quizcard .tips form, .quizcard .tips a {flex:1; margin:0}
.quizcard .tips button, .quizcard .tips a {display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; padding:0 8px; text-decoration:none; min-height:40px; border:1px solid rgba(0,0,0,.15); border-radius:6px; background:none; color:#444; font:inherit; font-weight:bold; cursor:pointer; -webkit-tap-highlight-color:transparent}
.quizcard .tips button:active, .quizcard .tips a:active {border-color:#c0c; background:rgba(204,0,204,.07)}
/* a confirm step keeps one filled red button */
.quizcard .tips button.go {border-color:#b94a48; background:#b94a48; color:#fff}
.quizcard footer {margin-top:8px; padding-top:6px; border-top:1px solid rgba(0,0,0,.08); font-size:.9em; color:#666}
.quizcard > footer:first-child {margin-top:0; padding-top:0; border-top:0}
.quizcard ol {margin:4px 0; padding-left:1.6em}
.quizcard details {margin-bottom:4px}
.quizcard summary {cursor:pointer; color:#888}
/* With a mouse the bars are slimmer, so the list starts higher on desktop. */
@media (pointer: fine) {
    #chatline {height:34px}
    .chatnav a {min-height:30px}
    /* A lone button (e.g. vissza) keeps its own width instead of spanning the page. */
    .chatnav.fit {display:inline-flex}
    .chatnav.fit a {padding:0 16px}
    .quizcard .tips form, .quizcard .tips a {flex:none}
    .quizcard .tips button, .quizcard .tips a {min-width:56px; min-height:30px; padding:0 16px}
    .post {padding-top:2px; padding-bottom:2px}
    .post .postlink button {height:20px; margin:-1px 0}
    #chatlist a.pager {padding:6px}
}
/* A tapped nick's menu floats under the nick, over the list, so the list does not move. */
/* The nick menu is a popover in the top layer, placed under the nick in page coordinates. */
#nickmenu {position:absolute; inset:auto; margin:0; z-index:10; padding:.2em .1em; background:#fbf6dd; border:1px solid #ccc; box-shadow:0 2px 6px rgba(0,0,0,.2); white-space:nowrap}
#nickmenu a {margin:0 .3em}
/* The swatch reads as a text-colour button, like in a word processor: a letter A over a bar in the chosen colour. */
#chatline details.chatcolors summary, .msgbar details.chatcolors summary {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:100%; box-sizing:border-box; border:1px solid var(--line, rgba(0,0,0,.35)); border-right:none; border-radius:6px 0 0 6px; background:#fff; color:#333; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent}
#chatline details.chatcolors summary::-webkit-details-marker, .msgbar details.chatcolors summary::-webkit-details-marker {display:none}
#chatline details.chatcolors summary::before, .msgbar details.chatcolors summary::before {content:"A"; font-weight:bold; font-size:18px; line-height:1}
#chatline details.chatcolors[open] summary, .msgbar details.chatcolors[open] summary {background:#eee}
#chatline details.chatcolors summary img, .msgbar details.chatcolors summary img {display:block; width:24px; height:6px; border-radius:1px; box-shadow:0 0 0 1px rgba(0,0,0,.25)}
#chatline div.colors.picker, .msgbar div.colors.picker {position:absolute; top:100%; left:0; margin-top:2px; z-index:10; width:18em; max-width:90vw; overflow:visible; padding:.3em; background:#fbf6dd; border:1px solid #ccc; box-shadow:0 2px 6px rgba(0,0,0,.2)}
#chatrefreshed.refreshbar {position:relative}
#chatrefreshed.refreshbar::after {content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0"; position:absolute; left:0; top:0; width:0; overflow:hidden; white-space:nowrap; line-height:normal; color:#000; text-decoration:underline 1px; text-underline-offset:2px; animation:refreshbar var(--friss) linear forwards}
@keyframes refreshbar {to {width:100%}}
@media (prefers-reduced-motion: reduce) {
    #chatrefreshed.refreshbar::after {display:none}
}
#c4-table td a {display:block; padding:4px 0}
#c4-table img {display:block}

/* Room list (rooms.php): tabs, full-width tappable rows with an online badge and the last activity. */
.roomtabs {display:flex;margin:16px 0 0;border-bottom:1px solid rgba(0,0,0,.15)}
/* The current tab is marked by colour and an underline, not filled. */
.roomtabs a {flex:1;margin-bottom:-1px;padding:10px 0;border-bottom:3px solid transparent;text-align:center;text-decoration:none;font-weight:bold;color:#888;-webkit-tap-highlight-color:transparent}
.roomtabs a.on {border-bottom-color:#c0c;color:#c0c}
.roomtabs a:hover, .roomtabs a:focus {background:rgba(0,0,0,.04);color:#444 !important}
.roomtabs a.on:hover, .roomtabs a.on:focus {color:#c0c !important}
.roomhead {display:flex;align-items:baseline;margin:16px 0 4px;padding:0 8px;text-align:left;font-size:.75em;letter-spacing:.08em;text-transform:uppercase;color:#888}
.roomlist {list-style:none;margin:0;padding:0;text-align:left;border-top:1px solid rgba(0,0,0,.12)}
.roomlist li {display:flex;border-bottom:1px solid rgba(0,0,0,.12)}
.roomlist a {text-decoration:none;-webkit-tap-highlight-color:transparent}
.roomlist a.go {flex:1;display:flex;align-items:center;gap:10px;min-width:0;min-height:46px;padding:0 8px}
.roomlist a:hover, .roomlist a:focus {background:rgba(0,0,0,.05);color:inherit !important}
.roomlist a:active {background:rgba(0,0,0,.1)}
.roomlist a:focus-visible {outline:2px solid #c0c;outline-offset:-2px}
.roomlist .txt {flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.roomlist .name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.05em}
.roomlist .who {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8em;color:#888}
.roomlist .lock {height:.85em;width:auto;vertical-align:-1px;opacity:.7}
.roomlist .last {white-space:nowrap;font-size:.8em;color:#999}
.roomlist .cnt {min-width:1.6em;padding:2px 6px;border-radius:10px;text-align:center;font-size:.85em;background:rgba(0,0,0,.07);color:#999}
.roomlist li.live .cnt {background:#2a2;color:#fff;font-weight:bold}
.roomlist .ghost {display:flex;align-items:center;padding:0 14px;border-left:1px solid rgba(0,0,0,.12);font-size:.85em;color:#999}
.roomlist .ghost.off {color:rgba(153,153,153,.4);cursor:default}
.roomlist .empty {padding:14px 8px;color:#999}
/* User search (system.php?page=keres_user): a roomlist of users with status badges; the form fields at 16px so phones do not zoom in. */
.usersearchform {margin:8px 0;text-align:left}
.usersearchform input, .usersearchform select, .usersearchform button {font-size:16px}
.usersearchform .q {box-sizing:border-box;width:100%;padding:8px}
.usersearchform .row {margin-top:8px}
.usersearchform input[type=number] {width:4.5em}
.usersearchcount {margin:8px 0 4px;text-align:left;color:#888}
.usersearch form.ghost {display:flex;align-items:center}
.usersearch .ubadge {display:inline-block;margin-left:2px;padding:0 5px;border-radius:3px;font-size:.75em;vertical-align:1px;background:rgba(0,0,0,.08);color:#555}
.usersearch .ubadge.ban {background:#c00;color:#fff}
.usersearch li.more a {flex:1;padding:12px 8px;text-align:center}
/* Op/admin menu (parts/staff_menu.html.twig): roomlist rows; a pending report count and an active regblock are red. */
.staffsearch {display:flex;gap:6px;margin:8px 0}
.staffsearch input {flex:1;min-width:0;box-sizing:border-box;padding:8px;font-size:16px}
.staffsearch button {font-size:16px}
.staffmenu li.info {padding:8px}
.staffmenu li.hot .cnt, .staffmenu li.regblock.on .cnt {background:#c00;color:#fff;font-weight:bold}
.staffform input {font-size:16px;width:9em}
.roomnew, .roomnew:visited {display:block;box-sizing:border-box;width:100%;margin:16px 0 6px;padding:11px;border:0;border-radius:6px;background:var(--btn);color:var(--btn-fg);font:inherit;font-size:1em;text-align:center;text-decoration:none;font-weight:bold;cursor:pointer;-webkit-tap-highlight-color:transparent}
.roomnew:hover, .roomnew:focus, .roomnew:active {text-decoration:none}
.roomnew:hover, .roomnew:focus {background:#a0a;color:#fff !important}
.roomnew:active {background:#808}
/* Staff link to the global room, centred over the ghost column. */
.roomhead .roomglob {margin:0 -8px 0 auto;width:calc(28px + 1.13em);text-align:center;text-transform:none;letter-spacing:0;text-decoration:none}
/* With a mouse the list is as dense as the old pages. */
@media (pointer: fine) {
    .roomtabs a {padding:6px 0}
    .roomlist a.go {min-height:34px}
    .roomlist .name {font-size:1em}
    .roomlist .who {display:inline;margin-left:8px}
    .roomlist .txt {flex-direction:row;justify-content:flex-start;align-items:baseline}
    .roomhead {margin-top:12px}
    a.roomnew {display:inline-block;width:auto;padding:6px 18px}
}
/* Profile picture moderation (system.php?page=profile_images): a grid of cards, new ones framed; the delete form folds out inside the card. Whole pictures (contain), since moderating needs all of it. */
.picnews {margin:8px 0;text-align:left;color:#888}
.picgrid {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;text-align:left}
.picgrid li {display:flex;flex-direction:column;gap:2px;min-width:0;padding:6px;border:1px solid rgba(0,0,0,.12);border-radius:6px}
.picgrid li.new {border-color:#c00;box-shadow:inset 0 0 0 1px #c00}
.picgrid .pic {position:relative;display:block;aspect-ratio:1;border-radius:4px;background:rgba(0,0,0,.05);overflow:hidden}
.picgrid .pic img {display:block;width:100%;height:100%;object-fit:contain}
.picgrid .pic .newbadge {position:absolute;top:4px;left:4px}
.picgrid .nick {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:bold;text-decoration:none}
.picgrid .ago {font-size:.8em;color:#999}
.profiledetails summary {padding:6px 0;text-decoration:underline;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* data.php profile: one centered column, free text boxed and left-aligned */
.profile {max-width:420px;margin:0 auto;text-align:center}
.profile h2 {margin-bottom:2px}
.profile-sub {margin:0 0 8px}
.profile-sub img {vertical-align:middle}
.profile-pic img {display:block;margin:0 auto;max-width:100%;height:auto;border-radius:4px}
.profile-actions {margin:10px 0;position:relative}
.profile-bio {text-align:left;margin:10px 0;padding:8px 10px;border-left:3px solid rgba(128,128,128,.45);background:rgba(128,128,128,.08);border-radius:0 4px 4px 0;overflow-wrap:anywhere}
.profile .profiledetails {text-align:left;margin:10px 0}
.profile .profiledetails summary {text-align:center}
.profilemore {display:inline}
.profilemore summary {display:inline;color:#000;text-decoration:underline;cursor:pointer;-webkit-tap-highlight-color:transparent}
.profilemore summary::-webkit-details-marker {display:none}
.profilemore summary::after {content:" ▾"}
.profilemore[open] summary::after {content:" ▴"}
/* drops below the action row as a popup, like #nickmenu */
.profile-more {position:absolute;left:50%;transform:translateX(-50%);top:100%;z-index:10;display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:4px;padding:10px 14px;background:#fbf6dd;border:1px solid #ccc;box-shadow:0 2px 6px rgba(0,0,0,.2);white-space:nowrap;text-align:left}
.profile-dl {display:grid;grid-template-columns:max-content 1fr;gap:3px 12px;margin:4px 0 8px}
.profile-dl dt {opacity:.7}
.profile-dl dd {margin:0;overflow-wrap:anywhere}
/* parts/stats_box.html.twig: level, coins and the latest badge in one box */
.stats-box {max-width:420px;box-sizing:border-box;margin:12px auto;padding:10px 12px;border:1px solid rgba(128,128,128,.3);background:rgba(128,128,128,.08);border-radius:6px}
.stats-coins {display:flex;justify-content:center;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(128,128,128,.25);text-decoration:none !important}
.stats-coins span {white-space:nowrap}
.stats-coins img, .last-badge img {vertical-align:-.25em}
.last-badge {margin-top:8px;font-size:85%}
.last-badge img {width:1.2em;height:1.2em}
.profile-links {list-style:none;padding:0;margin:12px 0}
.profile-links li {margin:4px 0}
.picdel summary {padding:6px 0;color:#c00;cursor:pointer;-webkit-tap-highlight-color:transparent}
.picdel form {display:flex;flex-direction:column;gap:6px}
.picdel .chips {display:flex;flex-direction:column;gap:4px}
.picdel .chips label {position:relative;display:block}
.picdel .chips input {position:absolute;opacity:0;margin:0}
.picdel .chips span {display:block;padding:6px;border:1px solid rgba(0,0,0,.15);border-radius:6px;font-size:.85em;color:#666;cursor:pointer}
.picdel .chips input:checked + span {border-color:#c00;background:rgba(204,0,0,.07);color:#c00;box-shadow:inset 0 0 0 1px #c00}
.picdel .chips input:focus-visible + span {outline:2px solid #c0c;outline-offset:2px}
.picdel input[type=text] {box-sizing:border-box;width:100%;padding:6px;font-size:16px}
.picdel small {color:#888}
.picdel button {padding:8px;border:0;border-radius:6px;background:#c00;color:#fff;font:inherit;font-weight:bold;cursor:pointer}
.picnav {display:flex;justify-content:space-between;align-items:center;margin:12px 0}
.picnav a {padding:10px 12px;text-decoration:none}
.picnav .pg {color:#999}
/* galeria.php lists: a grid of square-cropped thumbnails; a tap opens the single view, one big picture with prev/next and its details boxed below. */
.galgrid {list-style:none;margin:8px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.galgrid a {position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:4px;background:rgba(128,128,128,.12)}
/* the small image has the watermark baked into its bottom-right corner: top-aligned and zoomed so the cell crops it away */
.galgrid img {display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.2);transform-origin:50% 0}
.galgrid .likes {position:absolute;left:3px;bottom:3px;padding:0 4px;border-radius:3px;background:rgba(0,0,0,.55);color:#fff;font-size:.75em}
.galsort b, .galsort a {display:inline-block;margin-right:4px;padding:4px 12px;border:1px solid rgba(128,128,128,.4);border-radius:6px;text-decoration:none}
.galsort b {border-color:currentColor}
.galone {max-width:640px;margin:0 auto;text-align:center}
.galone-pic img {display:block;margin:0 auto;max-width:100%;max-height:75vh;height:auto;border-radius:4px}
.galone .picnav {margin:4px 0}
.galone-info {text-align:left;margin:4px 0 12px;padding:8px 10px;border:1px solid rgba(128,128,128,.3);background:rgba(128,128,128,.08);border-radius:6px}
.galone-info .row {margin:4px 0}
.galone-info .nick {font-weight:bold}
.galone-info .ago {font-size:.85em;opacity:.7}
.galtags a {display:inline-block;margin:2px 4px 2px 0;padding:1px 8px;border:1px solid rgba(128,128,128,.4);border-radius:10px;text-decoration:none;font-size:.9em}
.galactions {display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:8px !important}
.galfind {display:flex;gap:6px;margin:4px 0 8px}
.galfind input {font-size:16px}
.galcap {margin:0 0 8px;opacity:.8}
.galown li {display:flex;flex-direction:column;gap:2px;min-width:0}
.galdel summary {padding:4px 0;font-size:.85em;color:#c00;text-align:center;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.galdel summary::-webkit-details-marker {display:none}
.galdel form {margin:0}
.galdel button {width:100%;padding:6px 2px;border:0;border-radius:6px;background:#c00;color:#fff;font:inherit;font-size:.85em;font-weight:bold;cursor:pointer}
/* meglepi.php: category tiles named over the latest image; a too-new image is dimmed and not a link; the send form stacked under the picture */
.megcats .cat {position:absolute;left:0;right:0;bottom:0;padding:3px 4px;background:rgba(0,0,0,.55);color:#fff;font-size:.85em;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.megyoung {position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:4px;opacity:.5}
.megyoung img {display:block;width:100%;height:100%;object-fit:cover}
.megyoung .likes {position:absolute;left:3px;bottom:3px;padding:0 4px;border-radius:3px;background:rgba(0,0,0,.55);color:#fff;font-size:.75em}
.megby {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}
.megmod {font-size:.85em}
.megwait {opacity:.7}
.megsend {max-width:420px;margin:0 auto}
.megsend-pic {display:block;margin:0 auto 8px;max-width:100%;max-height:45vh;height:auto;border-radius:4px}
.megform {display:flex;flex-direction:column;gap:4px}
.megform label {margin-top:6px;font-weight:bold}
.megform input[type=text], .megform textarea {box-sizing:border-box;width:100%;padding:6px;font-size:16px}
.megform input[type=submit] {align-self:flex-start;margin-top:8px;padding:6px 18px}
.galfind input[name=tag] {flex:1;min-width:0;max-width:240px;padding:4px 6px}
@media (pointer: fine) {
    .picgrid {grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
    .galgrid {grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
    .picdel input[type=text] {font-size:inherit}
}
/* Room creation (rooms.php?page=newroom): stacked fields, a two-way topic switch and a grid of day/price chips; inputs at 16px so phones do not zoom in. Quiet: thin frames, a pick is marked, not filled; only the submit button is filled. */
.roomform {margin-top:12px;text-align:left}
.roomform .field {display:block;margin:0 0 14px;padding:0;border:0;min-width:0}
.roomform .lbl {display:block;margin:0 0 5px;padding:0;font-size:.95em;font-weight:bold}
.roomform .lbl em {font-weight:normal;font-style:normal;color:#999}
.roomform .lock {height:.85em;width:auto;vertical-align:-1px;opacity:.7}
.roomform input[type=text] {display:block;box-sizing:border-box;width:100%;height:40px;margin:0;padding:0 10px;border:1px solid rgba(0,0,0,.3);border-radius:6px;background:#fff;color:#444;font:inherit;font-size:16px}
.roomform input[type=text]:focus {outline:2px solid #c0c;outline-offset:-1px}
.roomform small {display:block;margin-top:6px;color:#888}
.roomform .seg, .roomform .chips {display:grid;grid-template-columns:1fr 1fr;gap:6px}
.roomform .chips {grid-template-columns:repeat(4,1fr)}
.roomform .seg label, .roomform .chips label {position:relative;display:block;-webkit-tap-highlight-color:transparent}
.roomform .seg input, .roomform .chips input {position:absolute;opacity:0;margin:0}
.roomform .seg span, .roomform .chips span {display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:38px;box-sizing:border-box;padding:4px;border:1px solid rgba(0,0,0,.15);border-radius:6px;background:none;text-align:center;cursor:pointer}
.roomform .seg span {color:#444}
.roomform .chips span {min-height:44px;font-size:.85em;color:#888}
.roomform .chips b {font-size:1.1em;color:#444}
.roomform input:checked + span {border-color:#c0c;background:rgba(204,0,204,.07);color:#c0c;box-shadow:inset 0 0 0 1px #c0c}
.roomform input:checked + span b {color:#c0c}
.roomform input:focus-visible + span {outline:2px solid #c0c;outline-offset:2px}
.roomform .check {display:flex;align-items:center;gap:10px;min-height:40px;margin-bottom:6px}
.roomform .check input {width:22px;height:22px;margin:0}
/* With a mouse the creation form is as dense as the old pages: narrow fields, one row of day chips, a label-wide button. */
@media (pointer: fine) {
    .roomform input[type=text] {max-width:360px;height:32px}
    .roomform .seg {grid-template-columns:140px 140px}
    .roomform .seg span {min-height:30px}
    .roomform .chips {grid-template-columns:repeat(8,1fr)}
    .roomform .chips span {min-height:36px}
    .roomform .check {min-height:30px}
    .roomform .roomnew {display:inline-block;width:auto;padding:6px 18px}
}
a.roomback {display:block;padding:12px 0;text-align:center;text-decoration:none;color:#888}
a.roomback:hover, a.roomback:focus {background:none;color:#444 !important}
.roominfo {margin:12px 0 0;padding:10px 12px;border-radius:6px;background:rgba(204,0,204,.08);border:1px solid rgba(204,0,204,.3);text-align:left}
.roomdone {margin:16px 0 0;padding:20px 12px;border:1px solid rgba(0,0,0,.12);border-radius:6px;background:rgba(255,255,255,.6);text-align:center}
.roomdone p {margin:4px 0}
.roomdone .ok {color:#2a2;font-weight:bold}
.roomdone .nm {font-size:1.5em;font-weight:bold;overflow-wrap:anywhere}
.roomdone .lock {height:.8em;width:auto;opacity:.7}
/* Stock (stock.php): room-creation fields, selects styled like its text inputs; items to buy as rows with a thin-framed price button. */
.roomform select {display:block;box-sizing:border-box;width:100%;height:40px;margin:0;padding:0 6px;border:1px solid rgba(0,0,0,.3);border-radius:6px;background:#fff;color:#444;font:inherit;font-size:16px}
.roomform select:focus {outline:2px solid #c0c;outline-offset:-1px}
.stock h2.lbl {margin:18px 0 6px;font-size:1em}
.stock h2.lbl em {font-weight:normal;font-style:normal;color:#999}
/* kör a szobának: its own card above the weapons, so the two do not run together */
.roundbox {margin:12px 0 4px;padding:2px 12px 12px;border:1px solid rgba(204,136,0,.4);border-radius:6px;background:rgba(255,190,60,.1)}
.roundbox p {margin:6px 0}
.stock .chips {grid-template-columns:repeat(4,1fr)}
.stocklist {list-style:none;margin:0;padding:0;border-top:1px solid rgba(0,0,0,.12)}
.stocklist li {display:flex;align-items:center;gap:8px;min-height:48px;padding:0 4px;border-bottom:1px solid rgba(0,0,0,.12)}
.stocklist .nm {flex:1;min-width:0}
.stocklist form {margin:0}
.stocklist button {min-width:76px;height:36px;padding:0 12px;border:1px solid #c0c;border-radius:6px;background:none;color:#c0c;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stocklist button:hover, .stocklist button:focus-visible {background:rgba(204,0,204,.07)}
.stocklist button:active {background:rgba(204,0,204,.15)}
@media (pointer: fine) {
    .roomform select {max-width:360px;height:32px}
    .stock .chips {max-width:360px}
    .stocklist {max-width:360px}
    .stocklist li {min-height:36px}
    .stocklist button {height:28px}
}
/* Locked-room password (chatroom.php): one narrow centred row, the field and its button side by side. */
.roompw {max-width:340px;margin:16px auto 0;text-align:center}
.roompw .row {display:flex;gap:6px}
.roompw .row input[type=text] {flex:1;min-width:0;width:auto;max-width:none}
.roompw .roomnew {flex:none;width:auto;margin:0;padding:0 18px}
/* Room-op menu (room-op.php): the room's name as the list shows it, then sections. Quiet on purpose: thin frames, no fills; only the one paying button and a confirm page's button are filled. Colour chips only pick (a button pays); the two-way switch is submit buttons with the current one marked. */
.roomop .roomname {margin:2px 0 0;font-size:1.15em;text-align:center;overflow-wrap:anywhere}
.roomop h2.lbl {margin:14px 0 5px;font-size:.95em}
.roomop .chips {grid-template-columns:repeat(3,1fr);gap:6px}
.roomop .chips span {flex-direction:row;justify-content:flex-start;gap:6px;min-height:38px;padding-left:8px;border-color:rgba(0,0,0,.15);background:none;font-size:.85em;color:#444;overflow-wrap:anywhere;text-align:left}
.roomop .chips i {flex:none;width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}
.roomop .chips input:checked + span, .roomop button.on {border-color:#c0c;background:rgba(204,0,204,.07);color:#444;box-shadow:inset 0 0 0 1px #c0c}
.roomop .seg {gap:6px}
.roomop .seg button {display:flex;align-items:center;justify-content:center;min-width:0;min-height:38px;box-sizing:border-box;margin:0;padding:4px;border:1px solid rgba(0,0,0,.15);border-radius:6px;background:none;color:#444;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.roomop button.on {color:#c0c;cursor:default}
.roomop .roomnew {margin:0;padding:10px;font-size:.95em}
.roomop .roomnew.quiet, .roomop .row button {border:1px solid #c0c;background:none;color:#c0c;font-weight:normal}
.roomop .roomnew.quiet:hover, .roomop .roomnew.quiet:focus, .roomop .row button:hover, .roomop .row button:focus {background:rgba(204,0,204,.07);color:#c0c !important}
.roomop .roomnew.danger, .roomop .roomdone + form .roomnew, .roomop .roomdone + .roomnew {margin-top:16px}
.roomop .roomnew.danger {background:#b94a48}
.roomop .roomnew.danger:hover, .roomop .roomnew.danger:focus {background:#a33}
.roomop #roomcolor .roomnew {margin-top:8px}
.roomop .roomnew:disabled {background:rgba(0,0,0,.12);color:#888;cursor:default}
.roomop .state {margin:0;color:#2a2}
.roomop .nicks {display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;padding:0;list-style:none}
.roomop .nicks li {display:flex;align-items:center;gap:2px;padding-left:10px;border:1px solid rgba(0,0,0,.15);border-radius:16px;font-size:.9em}
.roomop .nicks form {display:flex;margin:0}
.roomop .nicks button {min-width:30px;height:30px;border:0;border-radius:15px;background:none;color:#b94a48;font:inherit;font-size:1.1em;line-height:1;cursor:pointer}
.roomop .nicks li:not(:has(form)) {padding-right:10px;min-height:30px}
.roomop .row {display:flex;gap:8px}
.roomop .row input[type=text] {flex:1;min-width:0;height:40px}
.roomop .row button {flex:none;padding:0 14px;border-radius:6px;font:inherit;cursor:pointer}
.roomop .chatnav {margin:0}
.roomop .chatnav a {min-height:40px}
.roomop .chatnav a:hover, .roomop .chatnav a:focus {background:rgba(0,0,0,.05);color:#444 !important}
.roomop .chatnav.danger a, .roomop .chatnav.danger a:hover, .roomop .chatnav.danger a:focus {color:#b94a48 !important}
/* With a mouse the menu is as dense as the old pages: buttons as wide as their label, a two-row colour grid. */
@media (pointer: fine) {
    .roomop .chips {grid-template-columns:repeat(6,1fr)}
    .roomop .chips span, .roomop .seg button {min-height:30px}
    .roomop .seg {display:inline-grid;grid-template-columns:80px 80px}
    .roomop .roomnew {display:inline-block;width:auto;padding:6px 18px}
    .roomop .row {max-width:360px}
    .roomop .row input[type=text] {height:32px}
    .roomop .nicks button {min-width:26px;height:26px}
    .roomop .nicks li:not(:has(form)) {min-height:26px}
    .roomop .chatnav {display:inline-flex}
    .roomop .chatnav a {min-height:30px;padding:0 16px}
}
/* smiley.php: every smiley in one tap-friendly grid, with a filter and favorite stars */
#smfilter {width:100%; box-sizing:border-box; padding:.4em; font-size:1em; margin:.3em 0}
.smhelp {margin:.3em 0; font-size:.85em}
.smhead {margin-top:.5em}
.smgrid {display:grid; grid-template-columns:repeat(auto-fill, minmax(4.5em, 1fr)); gap:4px; margin:.3em 0 1em}
.sm {position:relative; border:1px solid rgba(0,0,0,.15); border-radius:4px; background:rgba(255,255,255,.5)}
.sm[hidden], #smnone[hidden] {display:none}
.smcopy {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; box-sizing:border-box; width:100%; min-height:4.5em; padding:.6em .2em .3em; font:inherit; font-size:.8em; color:inherit; background:none; border:0; border-radius:4px; cursor:pointer; overflow-wrap:anywhere}
.smcopy img {max-width:100%; height:auto}
.smcopy:active {background:rgba(0,0,0,.12)}
.smstar {position:absolute; top:0; right:0; padding:2px 5px; font-size:1em; line-height:1; color:#c0c; background:none; border:0; cursor:pointer}
#smtoast {position:fixed; left:50%; bottom:1.5em; transform:translateX(-50%); padding:.5em 1em; border-radius:4px; background:#333; color:#fff; opacity:0; transition:opacity .2s; pointer-events:none}
#smtoast.show {opacity:1}
/* The mail form (msg_write.html.twig): a wider, centred textarea, under it the colour swatch and pofi joined into one control like the chat line's, then the send button, both centred under the text.
   The swatch-and-pofi bar anchors the picker, centred under it. */
.msgcompose {display:flex; flex-direction:column; align-items:center; gap:6px; width:min(100%, 24em); margin:0 auto 6px}
.msgcompose textarea {align-self:stretch; box-sizing:border-box; margin:0}
/* The recipient row over the text: label, then the nick field filling the rest (or the fixed nick). */
.msgto {align-self:stretch; display:flex; align-items:center; gap:6px}
.msgto input[type=text] {flex:1; min-width:0; margin:0}
.msgbar {display:flex; align-items:stretch; position:relative; height:44px}
.msgbar details.chatcolors {flex:none; width:44px}
.msgbar a.pofi {display:flex; align-items:center; justify-content:center; width:44px; box-sizing:border-box; border:1px solid rgba(0,0,0,.35); border-radius:0 6px 6px 0; -webkit-tap-highlight-color:transparent}
.msgbar a.pofi:first-child {border-radius:6px}
.msgbar div.colors.picker {left:50%; transform:translateX(-50%)}
.msgcompose #smpanel {align-self:stretch; margin:0}
.msgsend {min-height:44px; padding:0 24px; border:0; border-radius:6px; background:var(--btn); color:var(--btn-fg); font:inherit; font-weight:bold; cursor:pointer; -webkit-tap-highlight-color:transparent}
.msgsend:hover, .msgsend:focus-visible {background:var(--btn-hover)}
.msgsend:active {background:var(--btn-active)}
/* With a mouse it is as slim as the chat line. */
@media (pointer: fine) {
    .msgsend {min-height:34px}
}
/* the pofi panel of the chat and the mail form (parts/smiley_panel.html.twig) */
#smpanel {display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin:0 0 6px; padding:4px; border:1px solid rgba(0,0,0,.15); border-radius:6px}
#smpanel[hidden] {display:none}
#smpanel button {display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:2px; background:none; border:0; border-radius:4px; cursor:pointer; -webkit-tap-highlight-color:transparent}
#smpanel button:active {background:rgba(0,0,0,.1)}
#smpanel button img {max-width:64px; max-height:40px}
#smpanel .smmore {margin-left:auto; padding:0 6px}
a.pofi.on {background:rgba(0,0,0,.08)}
/* A wms shown on tap: a tappable chip until opened (WmsImage::render). */
details.wms {display:inline-block}
details.wms summary {display:inline-block; padding:.4em .8em; border:1px dashed currentColor; border-radius:6px; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent}
details.wms summary::-webkit-details-marker {display:none}
details.wms[open] summary {display:none}
/* Upload page (upload.php): each move target is a button that opens its rules and move action in place; the move itself reads as a filled button. */
.movetargets {max-width:420px; margin:6px 0 12px}
.movetargets > details {margin-bottom:6px}
.movetargets > details > summary, .meglepitags summary {display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border:1px solid #c0c; border-radius:6px; color:#c0c; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent}
.movetargets > details > summary::-webkit-details-marker, .meglepitags summary::-webkit-details-marker {display:none}
.movetargets > details[open] > summary, .meglepitags[open] summary {background:rgba(204,0,204,.1)}
.movetargets > details > p:first-of-type {margin-top:8px}
.movetargets .postlink button {min-height:36px; padding:0 14px; border-radius:6px; background:var(--btn); color:var(--btn-fg) !important; text-decoration:none; font-weight:bold}
.meglepitags {margin:6px 0}
.meglepitags a {display:inline-block; margin:4px 4px 0 0; padding:4px 10px; border:1px solid rgba(0,0,0,.2); border-radius:6px; text-decoration:none}
@media (pointer: fine) {
    .movetargets > details > summary, .meglepitags summary, .movetargets .postlink button {min-height:28px}
}

.chatters img, .chatters .more {vertical-align:bottom}
.chatters .more {display:inline-block; width:70px; height:70px; line-height:70px; text-align:center; font-size:22px; font-weight:bold; color:#555; text-shadow:0 0 3px #eee; background:radial-gradient(circle at 50% 38%, #c8c8c8 14px, transparent 15px), radial-gradient(ellipse 25px 20px at 50% 100%, #c8c8c8 96%, transparent 100%), #e6e6e6; cursor:default}
/* wlog.php: stacked forms (jump, new/edit, comment), inputs at 16px so phones do not zoom in */
.wlogform {display:flex;flex-direction:column;gap:4px;max-width:600px}
.wlogform label {margin-top:6px;font-weight:bold}
.wlogform input[type=text], .wlogform input[type=date], .wlogform textarea {box-sizing:border-box;width:100%;padding:6px;font-size:16px}
.wlogform input[type=submit] {align-self:flex-start;margin-top:8px;padding:6px 18px}
/* wlog.php author page: each wlog in a box, the meta line quiet; the wlog jumped to (fromDate) is marked */
.wlog-author {margin:4px 0 12px}
.wlog-post {margin:0 0 14px;padding:8px 10px;border:1px solid rgba(128,128,128,.3);background:rgba(128,128,128,.08);border-radius:6px;overflow-wrap:anywhere}
.wlog-post.marked {border-left:4px solid #c00}
.wlog-post h3 {margin:0 0 6px;font-size:1.1em}
.wlog-body img {max-width:100%;height:auto}
.wlog-meta {margin-top:8px;font-size:.85em;opacity:.75}
.wlog-pager {margin:8px 0}
.wlog-pager.next {text-align:right}
.wlog-comment {margin:0 0 10px;padding:6px 10px;border-left:3px solid rgba(128,128,128,.45);background:rgba(128,128,128,.06);border-radius:0 4px 4px 0;overflow-wrap:anywhere}
.wlog-comment .wlog-meta {margin:0 0 4px}
.wlog-fold summary {cursor:pointer;list-style:none}
.wlog-fold summary::-webkit-details-marker {display:none}
.wlog-fold summary h3 {display:inline}
.wlog-fold summary::after {content:" (tovább ▾)";font-size:.85em;opacity:.75}
.wlog-fold[open] summary::after {content:" ▴"}
/* wlog.php front page: the own box with the new-wlog button, link chips, the newest wlogs with an excerpt */
.wlog-box {margin:8px 0 14px;padding:10px 12px;border:1px solid rgba(128,128,128,.3);background:rgba(128,128,128,.08);border-radius:6px}
.wlog-new {display:inline-block;margin-bottom:8px;padding:6px 14px;border-radius:6px;background:var(--btn);color:var(--btn-fg) !important;font-weight:bold;text-decoration:none}
.wlog-new:hover, .wlog-new:focus, .wlog-new:active {background:var(--btn-hover);color:var(--btn-fg) !important}
.wlog-links {display:flex;flex-wrap:wrap;gap:6px 14px;margin:4px 0 14px}
.wlog-item {margin:0 0 10px;overflow-wrap:anywhere}
.wlog-item .wlog-meta {margin:0}
.wlog-foot {margin-top:18px;font-size:.9em}
.wlog-rank {margin:6px 0 12px;padding-left:2em}
.wlog-rank li {margin:3px 0}
.wlog-fav {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px}
.wlog-fav .wlog-meta {margin:0}
/* online.php: places as small headings, nicks as chips under them */
.online-record {display:inline-block;margin:0 0 8px;padding:4px 10px;border:1px solid rgba(128,128,128,.3);background:rgba(128,128,128,.08);border-radius:6px}
.online-filter {display:block;box-sizing:border-box;width:100%;max-width:320px;margin:0 auto 10px;padding:6px 8px}
.online-group {margin:0 0 12px}
.online-group h3 {margin:0 0 4px;font-size:1em}
.online-group h3 small {font-weight:normal;opacity:.7}
.nickchips {list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.nickchips a {display:inline-block;padding:3px 10px;border:1px solid rgba(128,128,128,.35);background:rgba(128,128,128,.08);border-radius:12px;text-decoration:none}
.online-friends {padding:6px 0 2px;border-bottom:1px solid rgba(128,128,128,.25)}
.nickchips small {opacity:.65;font-size:.8em}
.nickchips .idle {opacity:.7}
.nickchips .chip-room {padding:3px 8px}
.decorpick {border:0;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px}
.decorpick legend {width:100%;margin-bottom:4px}
.decorpick label {font-size:1.3em;white-space:nowrap}
.decorpick .decorown {font-size:1em}
.decorpick .decorown input {font-size:1.3em;width:3em}
.entrancepick {border:0;margin:0 0 8px;padding:0}
.entrancepick legend {margin-bottom:4px}
.entrancepick label {display:block;padding:3px 0}
.entrancepick .hint {margin:4px 0 0;font-size:.9em;opacity:.75}
.appearancepreview {margin:0 0 12px}
.giftpick {border:0;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.giftpick legend {margin-bottom:4px}
.giftemoji {font-size:1.3em}
.giftlist {display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 4px}
.lista-manage {margin:12px 0 0;text-align:center;line-height:1.8}
/* the viewer's own @nick in a post (Wline\Chat\Message\OwnMention) */
.post mark.me {padding:0 .35em; border-radius:.7em; background:rgba(214,170,60,.18); color:inherit}