/* Phone sheets (Sac, Personnage, Sorts, Menu): a full-height card over a dark scrim, parchment body in the bronze / gold window frame of the PC, list or grid on the
   left, the detail of the selected thing on the right. Scoped to html.mobile like mobile.css (the sheets only exist there anyway). */
.msheet { position: absolute; inset: 0; z-index: 50; display: flex; align-items: stretch; justify-content: center; background: rgba(8, 5, 3, 0.58);
  padding: calc(var(--sat, 0px) + 8px) calc(var(--sar, 0px) + 10px) calc(var(--sab, 0px) + 8px) calc(var(--sal, 0px) + 10px); animation: msIn 0.14s ease-out; }
@keyframes msIn { from { opacity: 0; } }
.ms-card { display: flex; flex-direction: column; width: 100%; max-width: 800px; min-height: 0; color: var(--gf-ink); border-radius: 8px; font-size: 13px;
  background: repeating-linear-gradient(45deg, rgba(120, 90, 40, 0.05) 0 2px, transparent 2px 7px), var(--gf-paper);
  box-shadow: 0 0 0 2px #1e1008, 0 0 0 4px var(--gf-frame), 0 0 0 5px #f1c04a, 0 0 0 7px #1e1008, inset 0 0 0 1px #fff7da, inset 0 0 0 3px rgba(168, 116, 58, 0.45), 0 10px 28px rgba(0, 0, 0, 0.6); }
.ms-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 6px 6px 0 0; flex: none;
  background: linear-gradient(#c58d4a, #a8743a 45%, #7a4c22); box-shadow: inset 0 1px 0 rgba(255, 233, 160, 0.75), 0 2px 0 #3b2412; }
.ms-title { color: var(--gf-title); font-weight: 800; font-size: 16px; text-shadow: -1px -1px 0 #3a2208, 1px -1px 0 #3a2208, -1px 1px 0 #3a2208, 1px 1px 0 #3a2208, 0 2px 2px rgba(0, 0, 0, 0.5); }
.ms-tabs { display: flex; gap: 4px; flex: 1; min-width: 0; margin-left: 6px; }
.ms-tab { flex: 1; max-width: 150px; min-height: 36px; padding: 0 8px; border: 1px solid #5b3a18; border-bottom: 0; border-radius: 9px 9px 0 0; background: #cdb98d; color: var(--gf-ink); font-weight: 800; font-size: 12px; align-self: flex-end; }
.ms-tab.on { background: var(--gf-paper); box-shadow: inset 0 3px 0 #f1b84c; }
.ms-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #fff6dc; font-weight: 800; text-shadow: var(--outline); }
.ms-close { width: 40px; height: 40px; flex: none; border-radius: 10px; border: 2px solid #3b2412; color: #4a2f14; font-size: 18px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(#f6ead0, #cdb27a); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, 0.4); }
.ms-close .glyph { width: 20px; height: 20px; }
.ms-small { min-height: 34px; padding: 0 12px; font-size: 12px; font-weight: 800; border: 2px solid #7a5a2a; border-radius: 14px; background: linear-gradient(#f0e1b8, #c3a96f); }
.ms-small.on { background: linear-gradient(#bff0b4, #7ed36d); border-color: #2f7a2a; }
.ms-body { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 8px; }
.ms-cols { flex: 1; min-width: 0; display: flex; gap: 10px; }
.ms-hint { margin: 6px 4px; color: #7a6544; font-size: 12px; }
.ms-h { margin: 0 0 6px; font-size: 14px; color: #7a4c22; }
.ms-left { flex: none; display: flex; flex-direction: column; gap: 8px; width: 240px; overflow: auto; }
.ms-sections, .ms-list { flex: 1; min-width: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.ms-detail { flex: none; width: 41%; max-width: 330px; min-width: 230px; display: flex; flex-direction: column; gap: 8px; padding-left: 10px; border-left: 2px solid rgba(138, 102, 54, 0.45); overflow: auto; -webkit-overflow-scrolling: touch; }
.ms-cols > .ms-detail { flex: 1; }
.ms-info { overflow: auto; border-radius: 6px; padding: 9px 11px; font-size: 12.5px; line-height: 1.35; color: #fff6dc; background: linear-gradient(rgba(74, 58, 38, 0.97), rgba(40, 29, 17, 0.97)); box-shadow: 0 0 0 2px var(--wood-dark), inset 0 0 0 1px #e6d3a2, inset 0 0 0 2px #6b4421; }
.ms-info h4 { margin: 0 0 4px; font-size: 14px; color: #ffa73a; text-shadow: 0 1px 2px #000; }
.ms-info .row { display: flex; justify-content: space-between; gap: 12px; color: #d8c9a4; }
.ms-info .row span:last-child { color: #fff; text-align: right; }
.ms-info .row.on span { color: #9ae67a; }
.ms-info .row.bad span { color: #ff6b61; font-weight: 600; }
.ms-info p { margin: 5px 0 0; color: #f1e7cc; }
.ms-info .sk-dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; transform: rotate(45deg); border: 1px solid #1e1008; vertical-align: 1px; }
/* the buttons under a detail */
.ms-act { flex: none; min-height: 46px; padding: 0 14px; font-size: 15px; font-weight: 800; border: 2px solid #5b3a18; border-radius: 16px; position: sticky; bottom: 0;
  background: linear-gradient(#f4e6bf, #cdb27a 55%, #b99a5e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 4px rgba(0, 0, 0, 0.4); }
.ms-act.primary { background: linear-gradient(#ffe9a0, #f1c04a 50%, #c98a1c); color: #3a2208; }
.ms-act:disabled { opacity: 0.45; }
.ms-acts { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
/* inventory grid */
.ms-sec { background: var(--gf-paper-dark); border: 1px solid #a88a58; border-radius: 6px; padding: 3px 6px 6px; margin-bottom: 8px; }
.ms-seclabel { margin: 2px 2px 4px; font-weight: 800; font-size: 12px; color: #7a4c22; }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, 54px); gap: 5px; justify-content: start; }
.gf-tile.ms-tile { width: 54px; height: 54px; }
.gf-tile.ms-tile img { width: 46px; height: 46px; }
.gf-tile.ms-tile.sel { outline: 3px solid #f6c453; outline-offset: -1px; box-shadow: 0 0 10px rgba(246, 196, 83, 0.8); }
.ms-cap { font-size: 12px; }
/* paper doll */
.ms-doll { display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; justify-content: center; padding: 8px; border-radius: 6px; border: 1px solid #a88a58; background: radial-gradient(circle at 50% 45%, #efe4c8, var(--gf-paper-dark) 70%); }
.ms-doll .gf-tile.ms-tile { width: 56px; height: 56px; }
.ms-sets { display: flex; justify-content: center; gap: 8px; }
.ms-set { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 62px; min-height: 40px; border-radius: 8px; border: 2px solid #8a6636; background: #d9c9a6; font-weight: 800; color: var(--gf-ink); }
.ms-set img { width: 22px; height: 22px; }
.ms-set.on { background: linear-gradient(#bff0b4, #7ed36d); border-color: #2f7a2a; }
.ms-cands { margin-top: 4px; }
.ms-left .gf-row, .ms-detail .gf-row { margin: 2px 0; }
/* skills */
.ms-list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 52px; gap: 6px; align-content: start; padding: 6px; background: #8c7a5e; border: 2px solid #5b3a18; border-radius: 6px; }
.ms-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; text-align: left; background: #a89580; border: 2px solid #5d4b33; border-radius: 6px; color: #fff; overflow: hidden; }
.ms-row.on { border-color: #ffe44d; background: #bda88e; box-shadow: 0 0 8px rgba(255, 228, 77, 0.6); }
.ms-row.off { opacity: 0.55; filter: grayscale(0.6); }
.ms-row img { width: 40px; height: 40px; flex: none; border-radius: 5px; }
.ms-rtext { display: flex; flex-direction: column; min-width: 0; text-shadow: 0 1px 2px #2a1c0a; }
.ms-rtext b { font-size: 12px; line-height: 1.15; }
.ms-rtext i { font-style: normal; font-size: 10px; color: #ffd9a8; line-height: 1.1; }
.ms-rowtabs { display: flex; gap: 6px; }
.ms-rowtabs .ms-small { flex: 1; }
.ms-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.ms-pslot { position: relative; aspect-ratio: 1; min-height: 40px; padding: 0; border-radius: 7px; border: 2px solid #5d4b33; background: linear-gradient(#35200f, #5a3a1c); display: flex; align-items: center; justify-content: center; }
.ms-pslot img { width: 32px; height: 32px; border-radius: 4px; }
.ms-pslot b { position: absolute; left: 3px; top: 1px; font-size: 9px; color: #fff6dc; text-shadow: var(--outline); }
.ms-pslot.full { border-color: var(--bronze-hi); }
/* menu */
.ms-mgrid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 62px; gap: 10px; align-content: start; padding: 6px; }
.ms-mitem { display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 15px; font-weight: 800; text-align: left; border: 2px solid #5b3a18; border-radius: 16px; background: linear-gradient(#f4e6bf, #cdb27a 55%, #b99a5e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 2px 4px rgba(0, 0, 0, 0.4); }
.ms-mitem .glyph { width: 26px; height: 26px; flex: none; --glyph-cut: #e9cf8c; }
.ms-mitem.danger { background: linear-gradient(#f08a82, #c2343a 55%, #8c1f26); color: #fff3e0; border-color: #4a0f12; }
/* talents tab: the PC panel in a scrolling frame */
.ms-body > .tal { flex: 1; min-width: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.ms-body > .tal .tal-card { min-height: 44px; }

/* ---- Social panel (O / Social button): fits the landscape screen, touch sized rows and filters ------------------------------------------------- */
html.mobile #gfw-social, html.mobile .gfw.social { width: min(94vw, 720px) !important; }
html.mobile .sp-filters { gap: 6px; }
html.mobile .sp-filters select, html.mobile .sp-filters input { height: 34px; font-size: 13px; }
html.mobile .sp-kinds .gfw-tab { min-height: 34px; }
html.mobile .sp-head button { padding: 8px 6px; font-size: 12px; }
html.mobile .sp-view { height: calc(100vh - var(--sat) - var(--sab) - 150px) !important; min-height: 90px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
html.mobile .sp-row { font-size: 13px; }
html.mobile .sp-row span { padding: 0 6px; }
html.mobile .partyframes { transform: scale(0.8); transform-origin: top left; }
html.mobile .ow-sum .mute { color: var(--ink); opacity: 0.75; }
html.mobile .ms-tile.act { box-shadow: 0 0 0 2px #c084fc, 0 0 10px rgba(192, 132, 252, 0.85); position: relative; }
html.mobile .ms-tile.act::after { content: '✦'; position: absolute; right: 2px; top: 0; font-size: 13px; line-height: 1; color: #f5d0fe; text-shadow: 0 0 4px #7c3aed, 0 1px 0 #2e1065; pointer-events: none; }