/* PerunOTS phone / tablet layout (30.10.2026). The desktop design is a fixed 1200 px three-column page; below 900 px the columns stack:
   a sticky top bar with a menu button, the content at full width, the right column boxes under the content.
   Loaded after codex.css so equal selectors win; page styles inside <body> need a stronger selector (body ...). */
.mnav-bar { display:none; }
@media (max-width:900px) {
	html, body { overflow-x:clip; } /* clip (not hidden): the window keeps scrolling, the sticky top bar works */
	body { -webkit-text-size-adjust:100%; }
	#ArtworkHelper { min-width:0 !important; padding-top:0 !important; background-size:900px auto !important; background-position:top center !important; }
	#Bodycontainer, .Forum #Bodycontainer { width:auto !important; display:block !important; padding:0 4px; box-sizing:border-box; }

	/* top bar: site name, players online, menu button */
	.mnav-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; position:sticky; top:0; z-index:500; margin:0 -4px 6px; padding:6px 10px;
		background:linear-gradient(#3c2f26,#1a120b); border-bottom:2px solid #d9b45a; box-shadow:0 2px 8px rgba(0,0,0,.45); }
	.mnav-bar a.home { font:900 18px Cinzel, Georgia, serif; color:#ffe3a1 !important; text-decoration:none; text-shadow:1px 1px 0 #000; letter-spacing:1px; }
	.mnav-bar .on { font:bold 11px Verdana,Arial,sans-serif; color:#b8f5b8 !important; text-decoration:none; }
	.mnav-bar .on:before { content:''; display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:#4cff4c; box-shadow:0 0 6px #4cff4c; }
	.mnav-bar button { font:bold 13px Verdana,Arial,sans-serif; color:#2a1a00; background:linear-gradient(#f5c94a,#b8860b); border:1px solid #fff0b0; border-radius:4px; padding:7px 12px; cursor:pointer; }

	/* left column becomes a drop-down panel, right column boxes go under the content in two columns */
	#MenuColumn { position:static !important; width:auto !important; margin:0 0 8px !important; display:none; }
	body.mnav-open #MenuColumn { display:flex; flex-direction:column; align-items:center; }
	#LeftArtwork, #RightArtwork { display:none !important; }
	#Loginbox, #Menu { margin-left:auto !important; margin-right:auto !important; }
	#Loginbox { width:180px !important; left:0 !important; }
	/* NPC list: three small cards per row */
	body .npc-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:5px !important; }
	body .npcCard { padding:6px 3px !important; }
	body .npc-name { font-size:11px !important; word-break:break-word; }
	body .npc-location { font-size:9px !important; }
	#ContentColumn { margin:0 !important; width:auto !important; }
	#ThemeboxesColumn { position:static !important; width:auto !important; margin:8px 0 0 !important; }
	#Themeboxes { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:6px; }
	#Footer { padding:10px 0; }
	#container > br { display:none; } /* the <br> pairs between content boxes */
	/* desktop heights: the artwork is 100% of the window and some boxes inherit it; the right column boxes are shifted down */
	#ArtworkHelper, .SmallBox, .MessageContainer, .Message { height:auto !important; }
	#Themeboxes > div, #Themeboxes > a { top:0 !important; }
	/* side boxes (audit 03.11): one centred column, nothing shifted or overlapping */
	#Themeboxes { flex-direction:column; align-items:center; gap:10px; }
	#Themeboxes > * { position:relative !important; top:0 !important; margin:0 auto !important; float:none !important; }
	/* keyboard hint ("Press / to search") makes no sense on a phone; small links get a bigger tap area */
	.cx-kbd { display:none !important; }
	#highscoresTable td a, .mnav-bar .on, #onlinelistTable td a { display:inline-block; padding:6px 0; }
	/* contact page: label above the text instead of a two-column table */
	.contact-table, .contact-table tbody, .contact-table tr, .contact-table td { display:block; width:auto !important; }
	.contact-table td { padding:2px 6px !important; overflow-wrap:anywhere; }
	.contact-table tr { padding:6px 0; border-bottom:1px solid #d9c3a0; }
	/* forms: the cells of a row side by side, wrapping when there is no room */
	.BoxContent form table, .BoxContent form tbody { display:block; width:auto !important; }
	.BoxContent form tr { display:flex; flex-wrap:wrap; width:auto !important; }
	.BoxContent form td, .BoxContent form th { display:block; flex:1 1 0; min-width:96px; width:auto !important; text-align:left; box-sizing:border-box; }
	body #highscoresTable, body #highscoresTable td, body #highscoresTable th { font-size:11px !important; }
	body #highscoresTable td, body #highscoresTable th { padding-left:3px !important; padding-right:3px !important; }

	/* content box: no fixed widths; data tables scroll sideways inside their own box */
	.BoxContent { padding:6px !important; overflow-x:clip; }
	.BoxContent img { max-width:100%; height:auto; }
	.BoxContent img.cx-sprite, .cx-table img, .cx-tile img, .cx-tabs img, .cx-cat img, .cx-stage img, .cx-results img, .cx-pop img, .ml-name img, .ui-table img, .pf-stage img { max-width:none; }
	.ui-card, .ml-wrap, .cx-box, .TableContainer .TableContentContainer { overflow-x:auto; -webkit-overflow-scrolling:touch; }
	.BoxContent table.TableContent, #housetable, #housesTable { display:block; overflow-x:auto; max-width:100%; }
	.BoxContent select, .BoxContent input[type=text], .BoxContent input[type=password], .BoxContent input[type=email], .BoxContent textarea { max-width:100%; box-sizing:border-box; }
	.ui-table th, .ui-table td, .cx-table th, .cx-table td { padding-left:5px !important; padding-right:5px !important; }

	/* codex pages */
	.cx-table td.num { white-space:nowrap; }
	.cx-table td.bon { min-width:150px; }
	.cx-title { flex-wrap:wrap; gap:2px 8px; }
	.cx-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
	.cx-tabs a { flex:none; }
	/* hero: picture left, text right, stats below */
	.cx-hero { flex-wrap:wrap; justify-content:flex-start !important; text-align:left !important; gap:10px 12px; padding:12px; }
	.cx-hero .cx-stage, .cx-hero .cx-stage.big { width:64px; height:64px; }
	.cx-hero .cx-stage img { max-width:56px; max-height:56px; }
	.cx-hero .cx-glow { width:76px; height:76px; margin:-38px 0 0 -38px; }
	.cx-hero .cx-main { flex:1 1 0; min-width:0; }
	.cx-hero .cx-chips { justify-content:flex-start !important; }
	.cx-hero .cx-meters { grid-column:1 / -1; }
	.cx-hero .cx-side { grid-template-columns:1fr 1fr; width:100%; }
	.cx-name { font-size:20px; } .cx-desc { font-size:11px; }
	.cx-meter { grid-template-columns:52px 1fr 92px; }

	/* monster list: keep name, health, experience and loot value */
	.ml-table th:nth-child(4), .ml-table td:nth-child(4), .ml-table th:nth-child(5), .ml-table td:nth-child(5),
	.ml-table th:nth-child(6), .ml-table td:nth-child(6), .ml-table th:nth-child(7), .ml-table td:nth-child(7) { display:none; }
	.ml-tools { flex-wrap:wrap; }
	body .ml-table td.ml-name { white-space:normal; }
	body .ml-name img { width:22px !important; height:22px !important; margin-right:3px !important; }
	body .ml-table th, body .ml-table td { padding-left:3px !important; padding-right:3px !important; }
	body .ml-table, body .ml-table td, body .ml-table th { font-size:11px; }
	/* who is online / highscores: no outfit (and guild) column */
	#onlinelistTable th:nth-child(1), #onlinelistTable td:nth-child(1), #onlinelistTable th:nth-child(3), #onlinelistTable td:nth-child(3) { display:none; }
	#highscoresTable th:nth-child(1), #highscoresTable td:nth-child(1) { display:none; }
	body .hs-podium { grid-template-columns:repeat(3,1fr) !important; gap:4px; }
	body .hs-pod .medal { font-size:9px; letter-spacing:.5px; }
	body .hs-pod a { font-size:11px; padding:0 3px; word-break:break-word; }
	body .hs-pod .v { font-size:14px; } body .hs-pod .s { font-size:9px; padding:0 3px 6px; }
	/* character profile: outfit and level ring on top, name and bars below */
	body .pf-hero { justify-content:space-around !important; }
	body .pf-hero .pf-main { order:3; flex:1 1 100% !important; }
	body .pf-chips, body .pf-bars { justify-content:center; }
	body .pf-skills { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:480px) {
	.cx-cats { grid-template-columns:1fr 1fr; }
	.cx-cat { grid-template-columns:34px 1fr; padding:6px 8px; } .cx-cat img { width:32px; height:32px; } .cx-cat b { font-size:12px; }
	.cx-tiles { grid-template-columns:1fr 1fr; gap:4px; padding:4px; }
	.cx-tile { padding:4px 5px 8px; gap:5px; } .cx-tile img { width:28px; height:28px; }
	.cx-facts { grid-template-columns:1fr 1fr; }
	.cx-tabs a { padding:2px 6px 2px 3px; } .cx-tabs a em { display:none; }
}